Builder offers two types of Space:
- Develop Space: for generating code from Figma designs
- Publish Space: a headless CMS
For more context about Spaces, read Spaces Overview.
Develop Spaces are designed for development teams to convert Figma designs into production-ready code and manage component development.
Key points include:
- The main goal of a Develop Space is generating and syncing your code.
- There's one kind of model: Figma Imports. If you want to create your own models, or use other types of models, use a Publish Space.
- The Visual Editor features select options specific to the Develop workflow. For example, Develop Spaces don't include targeting, A/B testing, or other Headless CMS type of features as these features aren't applicable to the code generation workflow.
- Offers Visual Editor AI along with other Content editing features.
The video below gives a tour of a Develop Space, which includes a focused set of features in the general UI of Content, Models, and an Asset Library.
A Develop is a focused experience specifically to help you get your design to code faster. So we recommend either of these possible workflows:
- Import from Figma → export to code
- Import from Figma → enhance the design → export to code
When you've generated code for an imported Figma design in your Develop Space, you can share that design with others:
- In your imported Figma design, after you've generated code, click the Share button.
- Use the link that's automatically created and copied, to share with collaborators.
This video shows using the Share feature with an imported Figma design and opening that shared design in the browser:
Publish Spaces serve as a headless CMS for creating, managing, and optimizing digital experiences.
Key features include:
- Visual Editor with drag-and-drop functionality
- Robust Headless CMS capabilities
- Multiple models (built-in and custom)
- Content personalization and targeting
- Scheduling
- Workflow and Environments
- Content API access
- A/B testing tools
- Built-in optimization features
- Localization
- Variant containers
- Much more
The video below tours a Publish Space and shows content, multiple models, scheduling, the Asset Library, Scheduler, Insights, Plugins, and a fully featured Visual Editor:
- Focus on CMS operations
- Content creation and management
- Testing and optimization
- Content delivery and distribution
Note that if you need to export to code, you must use a Develop Space.
The table below shows which features are available in Develop and Publish Spaces:
| Feature | Develop | Publish |
|---|---|---|
✅ | ✅ | |
✅ | n/a | |
✅ | n/a | |
Figma Model is the only content model | ✅ | n/a |
✅ | n/a | |
Sharing | ✅ | n/a |
✅ | ✅ | |
✅ | ✅ | |
Content editing features | ✅ | ✅ |
Creating, publishing, & managing visual content | n/a | ✅ |
Content publishing | n/a | ✅ |
n/a | ✅ | |
n/a | ✅ | |
n/a | ✅ | |
n/a | ✅ | |
n/a | ✅ | |
Headless CMS | n/a | ✅ |
Content personalization with Variant Containers | n/a | ✅ |
n/a | ✅ | |
n/a | ✅ | |
n/a | ✅ |
Develop and Publish Spaces have complimentary purposes. To use them together, consider:
- Components created in Develop Spaces can be used as part of the design system in Publish Spaces.
- Existing codebase components can leverage Builder SDKs and APIs to incorporate content from Publish Spaces.
- Typical setup requires two separate spaces, one Develop and one Publish.
- Use Develop Spaces for initial component creation and code generation.
- Use Publish Spaces for ongoing content management and optimization.
- Maintain clear separation between development and content management workflows.
- Leverage integrations with existing tech stack components.
Certain parts of this workflow uses AI, for more information, visit How Builder Uses AI.
