In the world of web design, bridging the gap between design and development is crucial. Enter the integration of AI-powered design with Builder.io for Figma! This guide will walk you through the steps to generate designs via AI, export them into code, and even import from webpages—all while making it user-friendly!

Generate Designs via AI

Ready to let your creativity soar? Follow these simple steps to generate exquisite designs using AI:

1. Install the plugin.
2. Create an OpenAI account, grab your OpenAI key, ensure billing is enabled at billing overview, and add your API key in the plugin.
3. Enter a prompt, and watch AI design in real time!

Export Designs to Code

Let’s transform those stunning designs into functional code:

1. Install the plugin.
2. Verify that all layers you want to import utilize autolayout as described here.
3. Click the get code button to launch into the Builder.io editor.
4. Make any final adjustments, then click get code at the top of Builder to view the code output, or copy and paste it to the content of a Builder account to publish live.

This feature supports numerous code outputs, such as React, Vue, Svelte, Qwik, Solid, and plain HTML/CSS via Mitosis.

Import Webpages to Figma Designs

Want to bring real-world inspiration into Figma? Here’s how:

1. Install the plugin.
2. In Figma, open a new or existing document. Hit cmd + F and search for html figma, then hit enter.
3. Enter the URL of the webpage you want to import.

Why Use This Integration?

• Instantly convert designs into live webpages and code.
• Easily import real live site styles for a starting point for designs and prototypes.
• Quickly turn real site components into design components, making it easier to prototype.
• Effortless importing from Storybook, ensuring your designs are on point!

Utilizing the Library

If you’re keen to dive deeper into the code, here’s a quick setup:

npm install @builder.io/html-to-figma
import htmlToFigma from '@builder.io/html-to-figma';

const layers = htmlToFigma(document.body); // E.g., send these to REST API or generate a .figma.json file

Troubleshooting

If you encounter issues, especially with OpenAI API calls, check out the guidance at this guide. Here are some common troubleshooting tips:

• Ensure your API key is correctly added to the plugin.
• Confirm your billing is enabled for your OpenAI account.
• If you’re facing difficulties with the import process, consider that it’s a best-effort process and some tweaking may be required.

For more insights, updates, or to collaborate on AI development projects, stay connected with fxis.ai.

Limitations

It’s crucial to understand that certain limitations exist:

• Not all element types may be supported (e.g., iFrames, pseudo-elements).
• Some CSS properties may not be fully supported.
• Media types like videos and animated GIFs might not work as expected.
• All fonts must be uploaded to Figma, or a fallback will be used.

If you find issues or have feedback, please make an issue.

Conclusion

At fxis.ai, we believe that such advancements are crucial for the future of AI, as they enable more comprehensive and effective solutions. Our team is continually exploring new methodologies to push the envelope in artificial intelligence, ensuring that our clients benefit from the latest technological innovations.