Generate Figma Designs with AI

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:

Using the Builder.io Figma plugin

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+p or ctrl+p and 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.

Creating AI-generated sections

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.

Converting your designs to code

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, we recommend using our headless CMS APIs so that this entire workflow is API-driven and changes in Builder go to your live site 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} />;
}

Use AI to edit your designs

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”:

Generating interactive applications with AI

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”:

About Me

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.

Visually build with your components

Builder.io is a headless CMS that lets you drag and drop with your components right within your existing site.

Try it out

Learn more

// Dynamically render your components
export function MyPage({ json }) {
  return <BuilderComponent content={json} />
}

registerComponents([MyHero, MyProducts])

AI