8/21 demo: Building component libraries from Figma with AI

Announcing Visual Copilot - Figma to production in half the time

Builder.io
Contact sales

8/21 demo: Building component libraries from Figma with AI

Announcing Visual Copilot - Figma to production in half the time

Builder logo
builder.io

Blog

Home

Resources

Blog

Forum

Github

Login

Signup

×

Visual CMS

Drag-and-drop visual editor and headless CMS for any tech stack

Theme Studio for Shopify

Build and optimize your Shopify-hosted storefront, no coding required

Resources

Blog

Get StartedLogin

Use Symbols to create and control content that you can use in multiple places throughout your app. When you make a change to your Symbol, all content entries will use the new version of your Symbol.

  • Create Symbols by selecting a block and choosing the Convert to Symbol option in the dropdown menu.
  • To update a Symbol, click on the Symbol and then choose Edit Symbol in the dropdown menu. You can then edit the Symbol as you would any other content entry.
  • To use a Symbol, select a Symbol from the My Symbols panel in the Insert tab.

To create a Symbol:

  1. Select the block you'd like to convert to a Symbol and click on the arrow next to the Edit button.
  2. Click Convert to Symbol.
  3. In the dialogue, name your Symbol.
  4. Click the Convert button.

You can update your Symbol in two ways:

  1. Go to your Space's Content page, click the Section Models dropdown, and then select your Symbol's model. By default, Symbols are given the Symbol model.
  2. Click on an existing Symbol and choose the Edit Symbol option from the dropdown menu.

Once you are within your Symbol's content entry, update your Symbol and then press the Publish button. All content entries which use that Symbol will be updated accordingly.

In the video below, an existing Symbol within a content entry is selected and the Edit button is clicked. Then, a small change is made to the Symbol and the Publish Update button is clicked.

To use your new Symbol in a page, in the Insert tab, select the My Symbols tab and drag and drop your Symbol block onto the page.

To view where your Symbol is being used:

  1. Open your Symbol. Either click the Edit button after selecting a Symbol in a content entry, or go directly to your Symbol's content entry.
  2. Click the Insights tab.
  3. Scroll down to where it says Entries Using This Symbol. The pages listed are where your Symbol is being used.

For more information on using Symbols, visit Introduction to Symbols and Open and edit Symbols. Developers should view Integrate Symbols.

Was this article helpful?

Product

Visual CMS

Theme Studio for Shopify

Sign up

Login

Featured Integrations

React

Angular

Next.js

Gatsby

Get In Touch

Chat With Us

Twitter

Linkedin

Careers

© 2020 Builder.io, Inc.

Security

Privacy Policy

Terms of Service

Get the latest from Builder.io

By submitting, you agree to our Privacy Policy

  • Fusion

  • Publish

  • Product Updates

  • Figma to Code Guide

  • Headless CMS Guide

  • Headless Commerce Guide

  • Composable DXP Guide

Security

Privacy Policy

SaaS Terms

Compliance

Cookie Preferences

Gartner Cool Vendor 2024