Bringing Your Designs to Life with Builder.io Fusion

2025 is meant to be the year of AI agents, lately I evaluated builder.io and I'd like to share a brief review.

What is builder.io Fusion?

Builder.io Fusion is an agent which generate javascript code. It offers a good integration with GitHub, Figma and Visual Studio Code.

The issue

Modern apps are typically designed using a Design System, often with tools like Figma. However, translating these designs into code within a web development framework remains hard work. Next, we will see how to export a component from Figma and import it into a React project.

In the beginning was the design...

We begin with Figma. The example below illustrates the design of an 'Icon' component:

Having selected your icon, run the plugin "builder.io" and click the button "Smart Export" (at this point you need a Figma "dev" license). As a result, the layers and variables are copied to the clipboard.

...but soon, thankfully, the code

In Visual Studio Code, install and launch the extension "builder" to preview your React components in your browser. Behind the scenes, it automatically executes "npm run storybook".

Then paste the exported Figma design in the chat with a prompt: "Add the Icon as a new component near menu-item and toggle-button. It has one prop to select the svg".

The result is visible and documented, fulfilling the expectations:

Perfect! I've created a production-ready Icon component that converts the absolute-positioned Figma design into a fully responsive React component. The component: 1.  Follows project patterns: Uses PropTypes, export patterns, and naming conventions consistent with other components 2.  Fully responsive: Uses Tailwind CSS classes instead of absolute positioning 3.  Flexible and reusable: Supports different icon types (check/cross) and sizes (sm/md/lg/xl) 4.  Accessible: Includes proper ARIA labels and semantic markup 5.  Customizable: Accepts className prop for additional styling 6.  Uses currentColor: Icons inherit text color, making them easy to style 7.  Includes Storybook documentation: Complete with multiple story variants The component is ready to use and integrates seamlessly with your existing design system!

The created React component is integrated in your repository structure, following your code conventions. A test is automatically created - indeed it's used for the creation, it uses in our case React Testing Library. Note: builder.io tends to create a large number of tests.

Beyond the creation of new components

Builder.io is also capable to work on any element of the repository, based on prompts:

• Improvement of components, creation of storybook files, development of tests

• Bugfix: impressing capabilities to figure out issues, investigate and provide fixes, like in this example:

The infinite loop should now be fixed! The key changes made: 1.     Used useCallback for onPillBoundingChange to prevent it from being recreated on every render 2.     Added position comparison to only update state when positions actually change 3.     Used useMemo for masterKey to prevent unnecessary recalculations 4.     Added safeguards in the calculation useEffect to prevent execution with invalid data 5.     Added state comparison before calling setMaxDisplayedPills to prevent unnecessary updates Fixed the first pill reference to use actual pill IDs instead of hardcoded

• Builder.io is also capable of visual creativity. In the example below, we've added a horse icon to demonstrate the flexibility. Notice how builder.io breaks down the requirements into smaller components - such as eyes, nose, smile:

• Finally Builder.io manages to create a complete application from scratch. You see below an example with a game. It could be built with just a few commands and around 250 lines of readable code. The correction of bugs like missed collisions or ball resets on mouse movement was a partial success. My high score says it all—my gaming skills are undeniable:

Alternatives to Visual Studio Code extension

Instead of using the clipboard and the Visual Studio Code extension, you can also import the design via a simple npx command. In this mode, the chat remains available, but the output isn’t rendered interactively.

Conclusion

As of now, Builder.io Fusion is still in beta, but it already offers a well-rounded feature set powered by Claude 4. While GitHub Copilot can also act as an agent for development tasks, Builder.io takes a different approach with its Figma integration and visual interface—you can interact directly with the design, and Builder.io interprets the page structure through the DOM.