Builder io figma to html

Importing Figma Designs

Important: This import is still in beta. For best results, you must prepare your design file before exporting and do some cleanup afterward.

Import Figma designs into Builder to save time and effort.

Learn how to install the plugin, prepare your design, export, import, and adjust in Builder. Plus, get helpful tips and videos for optimizing your process.

Overview

Importing your Figma designs into Builder involves:

1. Installing the Builder plugin in your Figma account.
2. Preparing your Figma file.
3. Exporting from Figma.
4. Importing into Builder.
5. Checking and tweaking your import in Builder.

For details on each part of the process, refer to the following videos and written instructions in this document.

Helpful videos

To support different learning styles, this document covers the process for using your Figma designs in Builder in writing as well as in two videos.

Each video is self-contained with one being shorter and the other being a webinar led by Builder team members.

A concise video demo

The following video provides a quick demonstration and covers the contents of the current document:

An in-depth video

This next video offers an in-depth webinar demonstrating this feature and covers everything (and more) in this document:

Installing Builder’s Figma to HTML plugin in your Figma account

Install the Figma to HTML plugin into your Figma account from the Builder Figma page.

Making a backup copy of your file

Make a copy of your design. You’ll be making changes to the file, such as rasterizing and detaching instances, and you might find it helpful to maintain your original design.

1. In the Figma top navigation menu, click the dropdown next to your file name and select Duplicate.
2. Keep this copy in case you need to return to the original state.

Preparing your design

Preparing layers for export from Figma involves:

• Applying auto layout to layers.
• Rasterizing images.
• Adding rasterized images to a layout that has auto layout enabled.
• Making sure all layers, including those nested within other layers, are properly prepared for import.

Applying auto layout

Auto layout organizes the frame contents into either a row or column layout. Auto layout frames in Figma are analogous to applying a Child Layout of Stack or Row in the Builder Visual Editor.

Tip: Auto layout is a required feature for all layers that are to be imported into Builder.

To convert a layer to use auto layout in Figma:

1. Select the layer.
2. Click the + button next to Auto layout.

The following video shows how to apply auto layout:

Check that all child frames use auto layout and add frames if necessary. For more information, see Figma’s article, Explore auto layout properties.

If the parent frame you are trying to import does not already use auto layout, then you may have to add additional frames inside to group content into rows and columns.

Tips for complex designs

Auto layout may not be suitable for some layer designs due to complexity. For complex layer designs or vectors, rasterizing images first can help to improve the chances of optimal rendering.

Additionally, be sure to rasterize any vectors, grouping any small components if possible.

To optimize layer designs for import, consider the following tips:

• Flattening layers may not be sufficient to prepare graphics for import, as they may contain vectors or groups that do not import well. In such cases, rasterizing these elements might be necessary.
• Avoid using unnecessary frames or groups around graphics.

Rasterizing layers

If complex designs need more help than just Auto layout, try rasterizing them first. To rasterize in Figma:

1. Select the area of your design you want to rasterize.
2. Go to File > Quick Action.
3. In the Quick action search bar (keyboard shortcut: CMD + / ), choose Rasterize selection.

The following video shows how to rasterize a selection:

Источник

Saved searches

Use saved searches to filter your results more quickly

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.

Builder.io for Figma: AI generation, export to code, import from web

License

BuilderIO/figma-html

This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Sign In Required

Please sign in to use Codespaces.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching Xcode

If nothing happens, download Xcode and try again.

Launching Visual Studio Code

Your codespace will open once ready.

There was a problem preparing your codespace, please try again.

Latest commit

Git stats

Files

Failed to load latest commit information.

README.md

Builder.io for Figma: AI generation, export to code, import from web

Teach Figma how to speak code: generate designs via AI, convert designs to code, import from web.

1. Install the plugin
2. Create an OpenAI account, grab your OpenAI key, make sure you have billing enabled, and add your API key in the plugin
3. Enter a prompt, and watch AI design in real time!

Troubleshooting: if having trouble with your OpenAI API calls, please follow this guide

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

Supports many code outputs, such as React, Vue, Svelte, Qwik, Solid, plain HTML/CSS, and more via Mitosis

Import webpages to Figma designs

1. Install the plugin
2. In Figma, open a new or existing document, then hit cmd+/ and search «html figma» and hit enter
3. Enter a URL you want to import

• 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
• Easy import from storybook, etc

Want to capture a page behind an auth wall, or in a specific state you need to navigate to? Then the chrome extension is for you!

// 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 the REST API, or generate a .figma.json file that can be uploaded through the Figma plugin

When exporting Figma to Builder, the plugin requires all elements to be in auto-layout. However, it’s not possible to auto-layout a vector. The alternative here is to use Figma’s rasterize selection command on your vector. If the output of that is too low-resolution, then you can try this plugin: https://www.figma.com/community/plugin/837846252158418235/Flatten-Selection-to-Bitmap.

If you want the Builder end-result to have a vector, then consider this rasterized selection as a placeholder, and swap it back with an SVG in the Builder editor.

Importing HTML layers to Figma is a best-effort process. Even getting 90% there can save you a ton of time, only having to clean up a few things.

• not all element types are supported (e.g. iframe, pseudoelements)
• not all CSS properties are supported or fully supported
• not all types of media are supported (video, animated gifs, etc)
• all fonts have to be uploaded to Figma or a best effort fallback will be used

If you find any issues or have feedback at all please make an issue

• builder.io/api/v1/html-to-figma : API endpoint that converts a URL’s layout to a Figma design. The logic of that endpoint lives in this repo, under ./lib/html-to-figma.
• builder.io/api/v1/figma-to-builder : API endpoint that converts a Figma design to a Builder content JSON. The logic of that endpoint lives in Builder’s API.

About

Builder.io for Figma: AI generation, export to code, import from web

Источник