Made in Builder.io

Ship Your First Personalized Web Experience webinar on June 15 @ 10AM PT. Register Now

Talk to Us
Product
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.

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} />;
}

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.

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.

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

registerComponents([MyHero, MyProducts])

Share

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

Builder.io is a headless CMS that lets you build visually with your components.

Learn more

Like our content?

Join Our Newsletter

Continue Reading
Web Development11 MIN
Next.js 13 - Routing Fundamentals and Beyond
WRITTEN BYVishwas Gopinath
June 9, 2023
Latest News7 MIN
Builder Drop: More insights, environments and localization permissions
WRITTEN BYBuilder Team
June 8, 2023
Latest News6 MIN
The Dev Drop: Multi-threading in JSX, Resumability, Qwik Case Study, React in 2023
WRITTEN BYYoav Ganbar
June 1, 2023