​
Overview

Saving a UI pattern template allows you to reuse custom styles and settings across multiple steps. This feature helps streamline the design process and ensures consistency in user interfaces, saving time when creating similar patterns. By creating templates, you can focus more on design and less on repetitive tasks.

​
Use Cases

  • Rapid Deployment: Quickly apply consistent UI patterns across multiple steps or projects.
  • Branding Consistency: Ensure uniformity in design by saving your preferred color schemes, fonts, and button styles.
  • Efficiency in Development: Reduce time spent manually adjusting settings for every new step or page by reusing templates.
  • Customization Across Projects: Ideal for teams working on similar experiences but with slight variations in branding or layout.

​
How to Save a UI Template

Follow these steps to save a UI pattern template for future use:

​
Step-by-Step Process

1

Edit Your UI Pattern

Start by designing and adjusting your UI pattern according to your needs.
2

Save Your Template

Once you’re satisfied with your design, go to the tool settings section and click on the “Save Template” button. This action stores the UI pattern for reuse.
3

Access Saved Templates

After saving, you can easily access your templates anytime by navigating to the “SAVED” tab. When creating a new step of the same type, simply select your saved template from the list.

​
What Settings Are Saved

The following settings are saved when you save a template:
  • Style Settings: Customizations like background color, font size, and button actions are stored.
  • Layout & Element Preferences: Settings related to elements such as alignment, padding, and spacing. However, it’s important to note that the following settings are not saved:
  • Side-Panel Settings: Elements like beacons, box configurations, element placement, and backdrop settings won’t be stored in the template.

​
Managing Your Saved Templates

You have full control over your saved templates. If you want to delete or rename a template:
  • Navigate to the “SAVED” tab.
  • Hover over the template to reveal the three horizontal dots icon.
  • Click on the icon to access options to either delete or rename your template.

​
FAQs

​