Import your first Figma screen.

Before you begin

• A Figma design file you can open and use plugins in.
• One screen selected as a frame, group, component, or instance.
• A Hygular project in Unbondr that is not connected to GitHub.
• An available project import credit for the conversion.

Find Unbondr Exporter in Figma

1. 1

   Find the plugin

   Open Figma Community and search for Unbondr Exporter. Choose the plugin with that exact name. You can also search for it in Figma’s plugin browser from your design file.

2. 2

   Run it in your design file

   Open the file containing your screen, select its top-level frame, and run Unbondr Exporter. If your workspace restricts plugins, ask your workspace administrator to allow it.

3. 3

   Export the selected screen

   Use the plugin’s export action to download the screen JSON. Keep the file unchanged. Export separate screens as separate files.

Convert your screen

1. 1

   Open Import from Figma

   In your project’s editor menu, choose Import from Figma and select the exported screen JSON.

2. 2

   Choose the layout mode

   Start with Smart responsive · one design. Use Figma viewport variants if you have matching tablet or mobile exports, or Original viewport to keep the source layout’s viewport behavior.

3. 3

   Review detected controls

   Check the suggested roles for headings, buttons, and form fields. Correct any suggestion before converting.

4. 4

   Convert the screen

   Choose Convert screen · 1 import credit. A successful conversion consumes one project credit and saves a result you can recover later.

5. 5

   Inspect the result

   Use the converted preview at several widths. Read any conversion notes, especially those about fonts, layout, or unsupported features.

6. 6

   Add it to your project

   Choose New page or Append to current page, then select Add converted screen. If your plan’s page limit blocks a new page, choose an existing page when appropriate.

After conversion

You can change the destination and inspect preview widths without spending another credit. The converted result’s layout and control options are locked; converting again with different options creates another conversion and uses another credit.

Once added, edit the imported content in the builder. If this saved result is already in the project, use the editor’s normal duplication tools when you want a second copy.