Builder Develop is an AI-powered design-to-code solution that transforms Figma designs into clean, production-ready code in your framework of choice. Streamline frontend development by automating repetitive coding tasks while maintaining control over the output.
- Offload repetitive coding work to AI and reduce development timelines by 50-80% (based on Beta feedback).
- Copy and paste generated code directly into the codebase without adding dependencies.
- Use
npxcommands for seamless integration into existing workflows.
Builder Develop integrates into your existing workflow, allowing you to generate frontend code that matches your coding style. There are three primary ways to use Builder Develop:
- Convert designs to code: run the Builder Figma plugin to generate clean, accessible code from your Figma files.
- Iterate and refine: chat with the AI to make quick modifications, refactor elements, or optimize code reusability.
- Leverage existing components: sync your Figma components with your code components for consistent, reusable design-to-code output.
The Builder Figma plugin enables AI-powered design-to-code conversion with no setup required. Key features include:
- Framework support: convert Figma designs into React, Next.js, Gatsby, Hydrogen, Vue, Nuxt, Angular, Svelte, Svelte, React Native, to name a few.
- Styling flexibility: choose Tailwind CSS, CSS Modules, Emotion, Styled Components, or Styled JSX.
- Responsive by default: even if designs don’t use Auto Layout, the output is fully responsive.
- Component mapping: map your Figma components to your codebase.
- Easy-to-read code: generated code is developer-friendly, making it easy to integrate and improve.
For more information, see Import from Figma.
Builder Develop recognizes semantic elements in your Figma designs and converts them into structured, developer-friendly code. The AI-generated code follows accessibility best practices and integrates smoothly with your existing application.
- Supports the most popular JavaScript frameworks.
- Converts designs into various styling libraries, including Tailwind CSS, Material UI, and CSS Modules.
- Automatically responsive, even if Figma designs don’t use Auto Layout.
- Generates entire Pages, Sections, or components with variants from Figma component sets.
For more information, see Generate code.
Builder Develop integrates with your existing development ecosystem by connecting directly to your Figma Library:
- Component mapping: map your JavaScript framework components to Figma Library components, automatically using your existing component library when applicable.
- Design token syncing: map Figma Library variables to styles in your code to maintain visual consistency throughout your application.
- API integration: automate design-to-code workflows by integrating Builder's API with your development environment.
For more detail, read Design tokens and Component mapping functions.
The previous sections give you an idea of what you can do with Builder Develop. To get started playing with Builder, a few terms and concepts can help:
| Concept | Description |
|---|---|
Organization | The top-most level of your Builder account, an Organization usually represents a company or group of related Spaces. For more information, see Understanding Organizations. |
Space | A single app, a Space resides within an Organization. A Space is where you do your daily tasks such as Generate Code with Custom Instructions. |
Users | Create and maintain all users in your Organization and then specify which Space(s) those users can access. For more information, see Managing Users, and Roles and Permissions in a Space. |
Integrations/plugins | A built-in or custom feature that helps two resources work together. For example, the built-in integrations for Figma helps you import designs directly from Figma into Builder. |
Block | A Block is a drag-and-drop UI feature of Builder that you can use to create Page and Section layouts. For example, use Text blocks for copy, Columns for side-by-side layout, or create your own custom components. You can find all available components in the Insert tab within the Visual Editor. |
Responsive | Responsive apps adapt by design to any screen width. You can check out any site's responsiveness by opening it on various devices or changing the width of the browser. A responsive site maintains its integrity and accessibility on any device. Responsiveness is a core part of the Develop product. For more detail, see Intro to Responsive Design. |
Get familiar with importing your Figma designs, generating code, and map your Figma components.