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

Announcing Visual Copilot - Figma to production in half the time

Builder.io
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

Symbols help you work more efficiently by centralizing reusable content. This document shows you how to configure your Symbol so that you can drag and drop blocks as needed into the Symbol. This is helpful for iterating on a Symbol, A/B testing, and targeting.

  • When creating a Symbol, use the Slot block to create space for other blocks to be inserted.
  • When your Symbol is used, customize your Symbol by adding other blocks.

To configure a Symbol to accept blocks, take the following steps:

  1. Open your Symbol.
  2. From the Code section of the Insert tab, drag in a Slot block.

Once you are done with your edits, click the Publish button to ensure you Symbol is accessible and updated with the most recent version.

You can have multiple slots as long as you give them different names. You can set the name of a slot from the Options tab when selected.

After you've published the Symbol, use it in a content entry:

  1. Open the Page or Section where you want to use the Symbol.
  2. In the Insert tab, expand the My Symbols section and drag in your Symbol.
  3. With your Symbol on the page, the Visual Editor indicates the Slot with a blue section and + Add Block button.
  4. Drag any block into the Slot.

For other advanced uses of Symbols, visit Scheduling Symbols and Adding Inputs to 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