BUILDER

Resources

Home

Forum

Github

Login

Signup

This page was made in Builder!

Symbols

What is a symbol?

A symbol allows you to turn any component into reusable content that you can drag-and-drop onto any page. You can edit and update your symbol in one place instead of updating each recurring component individually.

Let's say you create a form that will exist on every page of your site, you can make that form a symbol so that it not only becomes a reusable component to simply drag and drop on all of your pages, but whenever you make an update to the symbol, the form on all pages will reflect that change.

Symbol vs Template

A template is similar to a symbol as it allows you to group a set of elements and save it as a reusable component. However, unlike a template, any changes made to a symbol will update the symbol everywhere it is used.

In the case that you want to make an update to your symbol on one page and not reflect everywhere that symbol is used, you have the option of creating an inline symbol. Making a symbol inline allows you to edit that instance of the symbol on one page without those changes reflecting on any other page.

Common use cases

Identical content

If you have identical content (e.g. navigation, headers, footers, forms) that you'll use on multiple pages, you can make this content into a symbol. Any edits made to the symbol will automatically be applied anywhere the symbol is used.

To create a symbol, right click your content and select "convert to symbol". After you've named and saved your symbol, you can find your new symbol in the insert tab under the "My Symbols" section. Now you can drag and drop it onto other pages. Any changes made to the symbol will updated on all pages and keep the content identical.

Design systems

You can use a symbol when you have a component with [inputs](make this a link) [insert link]. This will keep styling consistent from page to page and lock a user into a design. Users will only be able to change certain things like text, image, what products show, how many, etc. Learn more about using inputs in symbols here.

A/B Testing

If you have a component, such as a button, that you want to A/B test [link to A/B testing article] across several pages, you can create a symbol and run tests across the pages.

To create a symbol with A/B testing, navigate to the symbol's page and select the "A/B tests" tab. Adjust your variations and publish. Now you can drag and drop your symbol onto any page. You can view the results on the symbols page.

Was this article helpful?