With your design within a Develop Space, you can use the Visual Editor Develop feature to generate code specific to your needs, such as in a specific framework, CSS, testing framework, and even code quality. This document outlines the options available.
The video below shows where the options covered in this document are located within the Visual Editor:
Supported frameworks include:
- SwiftUI (Beta)
- Compose (Beta)
- Flutter (Beta)
- React
- React Native
- Qwik
- Vue
- Angular
- HTML
- Solid.js
- Svelte
- Marko
- Mitosis
For CSS, you can choose:
- Tailwind
- CSS
- Emotion (React)
- Styled Components (React)
- Styled JSX (React)
Builder-generated styles include clean, contextual class names, CSS variable names that align to your design system, and styled components.
For output language, choose either TypeScript or JavaScript. For testing framework, choose Vitetest or Jest.
There are three types of generated code available: Fast, Quality, and Quality V2 code generation.
Fast code generations leverage Builder’s proprietary AI model and open-source compiler to nearly instantly turn any Figma design file into high-performing, responsive code for any framework.
Free for all plans, Builder generates Fast code for the selected layers immediately, which is nearly instantly available. This code is best for rapid prototyping and working out quick concepts.
Quality code generations further enhance fast code generations to support your framework and styling requirements by adding an additional AI model that has been fine-tuned to generate clean, semantic code just as developers would write themselves.
Quality code generates at a more deliberate speed as AI considers the design as a whole and thoughtfully creates corresponding code. This bespoke option is more specific to your needs in that you can tell Builder's AI precisely what you want with custom instructions and prompts.
Quality V2 code generations include all of the features of quality with the addition of enhanced stability, consistency, optimized response times, and the latest model improvements.
After you've chosen your code generation options, Generate code with Develop.