How to Integrate Builder.io with a Custom Design System

Technical Questions
1

Hello,
We are exploring the possibility of leveraging Builder.io’s capabilities to generate code directly from our Figma projects.

Our solution includes a custom in-house design system, fully implemented as a Figma project, and a own library of Vue.js UI components. We aim to replicate the process demonstrated in your video Announcing Visual Copilot 2.0: Make Designs Real but tailored to our context, utilizing our specific design system and data.

Our goal is to streamline the development process for creating standard UIs. Ideally, a developer would design a UI in Figma using predefined building blocks (UI components and design tokens) and then convert it into a Builder.io project. From there, the Visual Copilot 2.0 feature would generate production-ready code, fully aligned with our Vue.js UI component library.

We would like guidance on two key aspects:

  1. Context Integration: How can we properly integrate our Figma design system and specific screens/pages as context into Builder.io to ensure accurate conversion into a Builder.io project?
  2. Customization and Training: How can we train Visual Copilot and the underlying LLM to fully understand our Vue.js UI component library? This includes ensuring that the generated code exclusively utilizes our custom components.

Could you please share any documentation, examples, or recommendations to help us achieve these objectives?

2

Hello @eugeny.tatarincev,

Yes, indeed, there are several ways to generate code directly from your Figma files and projects, making your development process much more efficient. With Visual Copilot, you can easily streamline the creation of standard UIs in Figma. By leveraging this tool, you’ll be able to transform your Figma components into production-ready code. Of course, this process is enhanced by your expertise and oversight, ensuring that the final output meets your quality standards and specifications.

For your reference, I’ve included some helpful documentation links below, which provide further details on how to integrate Figma with Visual Copilot and optimize your workflow:

Regarding your second question, Visual Copilot’s model is designed to learn and adapt based on the data and information you provide. It can effectively generate production-ready code, such as Vue.js, from your Figma components, aligning with your specific requirements. The tool continuously trains itself on the input you give it, ensuring it can generate accurate and high-quality code.

I hope this helps clarify how Visual Copilot can assist you in your development workflow! Feel free to explore the documentation for more insights or reach back if you have any questions.

Regards,