Speed Up Your Wireframing with Symbols

This helps to save time, maintain consistency and modularize wireframing.

What is a Symbol?

A symbol is essentially a single or grouped component that can be reused across your wireframe and can be updated together in one edit. It is more like master pages but at the component level.

However you can also edit any symbol at the instance level to prevent global changes being applied to it.

The major advantage of Symbols is that any changes made to a Symbol will automatically update everywhere it is used. It could be in the same page in a project or across different pages in the same project.

Using symbols in your wireframing process benefits your team in more than one way:

1. Time-Saving: Make changes once and see them reflected across all instances.
2. Consistency: Maintain uniformity in design elements throughout your project.
3. Error Reduction: Minimize the risk of manual errors and discrepancies.
4. Efficiency: Streamline your workflow by reducing repetitive tasks.
5. Scalability: Easily manage updates in large projects with multiple instances.

If you are thinking about where you can apply Symbols in your design workflow, the possibilities are numerous, some of which could be:

1. UI Components: Standardize buttons, icons, and other UI elements used on multiple pages.
2. Navigation Menus: Ensure consistent navigation menus across different parts of your application.
3. Form Fields: Uniformly design and update form fields like text boxes and checkboxes.
4. Templates: Create reusable templates for common sections like Footers, CTA , etc.
5. And more!

To use symbols in your project, create the component/ group of components that you are likely to use multiple times across your project. On the left menu, you can find the option - 'Create Symbol'. Click on it to add the component to your symbols listing.

All the symbols created can be accessed by clicking on the 'Symbols' on the top of the left side bar. Just drag and use the symbol anywhere in the project like any other component.

Now, to edit this symbol instances everywhere in the project, go to the Symbols section and double-click the symbol to edit. This will open a new view where you can edit the symbol. After making the edits, click on the Save button at the top right and you will find 2 options -save without updating instances and save & update all instances. If you choose to update all instances, then as soon as you save, all instances in the project will be updated immediately.

Overriding Symbol Properties

There is more! You can choose to edit certain properties of the instance like text, color, etc using the 'Edit Instance' option. In certain cases, you may also choose to 'break apart' from the original symbol in order not to update that specific instance whenever the original symbol is updated.

We’re thrilled for you to try out the new Symbols feature and see just how much it can enhance your design process! Dive in and experience the benefits firsthand. Your feedback is incredibly valuable to us, so please share your thoughts. Together, we can keep improving and deliver the best tools for all your wireframing needs!