You can now generate designs inside of Figma with AI, with the latest version of the Builder.io Figma plugin.
For example, in this prompt, I just said “I want a product page that looks like it's on everlane.com”.
Then, you can hit enter, and watch the AI produce design options in real time:
Then you can click on your favorite, and it becomes fully editable directly in Figma:
To use this plugin to generate designs in Figma:
- Add the Builder.io Figma plugin.
- Go to openai.com, add a payment method, and grab your API key.
- Open the Builder.io Figma plugin (use
cmd+porctrl+pand then type “Builder.io” and hit enter when our plugin comes up). - Go to the Generate with AI tab at the top, enter your OpenAI key, type a prompt, and start generating!
You can be as detailed and specific with prompts as you like. You can even write whole paragraphs if you like, outlining your exact design requirements, such as your brand colors, design tokens, fonts, spacing, and anything else you can type can be included.
We also suggest always including a website as a reference to fill in any gaps. Just choose a well known website that has a similar feel to what you need for the Style field.
The best way to produce designs with this plugin is to do it section by section.
For example, we can next ask for a hero section with the prompt “a homepage hero”. The AI produces 4 options, and you select your favorite, place it where you like, and edit anything you need:
Now, we can add another section; for instance, a recommended products section:
Now we have a pretty nice e-commerce page!
This is obviously not limited to just e-commerce use cases, though.
For instance, let’s next make a signup page for an app that streams podcasts and make it look similar to the design of Spotify:
And there you have it — pretty cool and completely editable however you like.
Tip: We suggest reading this on our most recent launch - Visual Copilot - for how to convert Figma designs into clean, responsive code with AI.
Anything you create with our plugin, or even anything you create in Figma, can be imported into Builder, and then you can grab the code for your framework of choice — like React, Vue, Qwik, Svelte, plain HTML/CSS, and more:
For the most seamless workflow, where you can import Figma designs and publish them to your live site or app in a click, we recommend using our headless CMS APIs so that this entire workflow is API-driven and changes in Builder go to your live site or app automatically.
For instance, this is the code to integrate Builder's headless CMS to a production Next.js app.
import { BuilderComponent, builder } from '@builder.io/react';
export async function getStaticProps({ params }) {
// Fetch the builder content as JSON
const page = await builder
.get('page', {
userAttributes: { urlPath: '/' + params.page.join('/') }
}).toPromise();
return { props: { page } };
}
export default function Page({ page }) {
// Render the content dynamically
return <BuilderComponent model="page" content={page} />;
}When you import your designs into Builder.io, you can take advantages of additional AI features.
One is the ability to edit your designs with natural language, such as “add a button”, “make one a primary vs. secondary CTA”:
Once imported into Builder, you can take advantage of even more powerful AI generation and editing and bring your designs to life with rich interactivity.
For example, we can generate and edit full mini-applications, like a joke generator, calculator, or gift guide:
And then, we can prompt to edit whatever we want. You can change everything from look and feel — like “make this look like it would be on apple.com” — to changes to business logic — like “generate two jokes at a time instead of one”:
Hi! I’m Steve, CEO of Builder.io. I built all of these AI features that you see above, so if you think they are cool and want to follow other interesting stuff we make and write about, you may enjoy our newsletter.
Introducing Visual Copilot: convert Figma designs to code using your existing components in a single click.
