Builder.ioTranslation site

Tools

Builder.io plugin is a design-to-code conversion tool based on Artificial Intelligence (AI) and advanced technology, which is designed to help designers and developers realize a seamless transition from design to code. The plugin not only supports the Figma design platform, but also offers a wealth of features and integration options to meet the needs of different users.

Key Features

1. AI Design Generation: Through integration with the OpenAI platform, users can observe AI creating designs in Figma in real time after entering text prompts. This feature provides designers with unprecedented creative support, making the design process more efficient and flexible.
2. Design to Code: The Builder.io plugin makes it easy to export designs in Figma to code in various programming languages (e.g. React, Vue, Svelte, etc.). This allows developers to tweak and publish the code directly in the Builder.io editor, dramatically shortening the cycle from design to launch.
3. Web Import Design: Users can import any web page directly into Figma as a design starting point, simplifying prototyping or design component building. This feature is very useful for designers who need to extract design elements from existing websites or create similar designs.
4. REST API interface: The Builder.io plugin provides a REST API interface that allows developers to customize the conversion process. This provides great flexibility for users who require a high degree of customization.
5. Chrome extension: The plugin also comes with a Chrome extension for capturing the content of specific state or protected pages. This makes it easier for users to capture the desired design elements or page content.

Target audience

The Builder.io plugin is suitable for the following categories of users:

1. developer: You can utilize Builder.io's AI features and visual editor to increase development efficiency and reduce duplication of work.
2. designer: Design effects can be quickly realized through a drag-and-drop interface without relying on developers. Meanwhile, the AI design generation function provides more creative support for designers.
3. marketer：能够自主创建和编辑营销页面，快速响应市场变化。Builder.io插件的low code环境使得非技术人员也能轻松上手。
4. content creator: Content can be easily managed and published to ensure timeliness and accuracy.
5. Corporate Team: Ideal for enterprise teams that need to work collaboratively to improve overall productivity.The Builder.io plugin's real-time editing and cloud-native architecture supports cross-team collaboration and continuous integration/continuous deployment (CI/CD) processes.

Operating Instructions

The following are basic instructions for the operation of the Builder.io plug-in:

1. Installation of plug-ins: First of all, users need to install the Builder.io plugin in Figma. This can be done through Figma's plugin marketplace or Builder.io's official website.
2. Preparation of design documentsMake sure that all layers in the Figma design file are automatically laid out (Auto Layout) to ensure optimal code generation. Vector graphics that cannot be automatically laid out can be processed using Figma's "Rasterize Selection" command or third-party plug-ins.
3. Generate Code: Select the design to be converted in Figma and generate the code using the Builder.io plugin. Users can choose to export the code to a specific programming language (e.g. React, Vue, etc.) and make further edits and adjustments in the Builder.io editor.
4. Release and deployment: After completing code editing, users can publish the code to a specified platform or server.The Builder.io plugin supports a variety of deployment options, including cloud-native architectures and Continuous Integration/Continuous Deployment (CI/CD) processes.

Please note that the exact procedure may vary depending on the plugin version and user requirements. Users can refer to the official documentation or tutorials of the Builder.io plugin for more detailed instructions.