Watch Webinar: Figma - Design to Code in 80% Less Time

Announcing Visual Copilot - Figma to production in half the time

Builder.io logo
Talk to Us
Platform
Developers
Talk to Us

Blog

Home

Resources

Blog

Forum

Github

Login

Signup

×

Visual CMS

Drag-and-drop visual editor and headless CMS for any tech stack

Theme Studio for Shopify

Build and optimize your Shopify-hosted storefront, no coding required

Resources

Blog

Get StartedLogin

‹ Back to blog

AI

Generate Figma Designs with AI

April 12, 2023

Written By Steve Sewell

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:

  1. Add the Builder.io Figma plugin.
  2. Go to openai.com, add a payment method, and grab your API key.
  3. 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).
  4. 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.

Try Visual Copilot

Share

Twitter
LinkedIn
Facebook
Hand written text that says "A drag and drop headless CMS?"

Introducing Visual Copilot:

A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot
Newsletter

Like our content?

Join Our Newsletter

Continue Reading
Web Development12 MIN
Figma to Angular: Convert Designs to Clean Angular Code in a Click
WRITTEN BYVishwas Gopinath
May 16, 2024
Web Development18 MIN
Getting Started with Mitosis: Creating a Cross-Framework Design System
WRITTEN BYVishwas Gopinath
May 7, 2024
Company News3 MIN
Builder.io closes $20 million in funding led by M12, Microsoft’s Venture Fund
WRITTEN BYSteve Sewell
April 24, 2024