Skip to main content

6. Import Designs from Figma

Figma & Figma Plugin Download & Install​

1. Download Figma​

To import text styles or screens from a Figma design, you first need the Figma app (or the web version).

2. How to Install​

  1. Download the installer for your operating system from the link above.
  2. Run the installer and follow the prompts to finish installing.
  3. Once it's installed, open Figma and log in with your account. (If you don't have one yet, sign up first.)
tip

If you already have Figma installed, skip this step and go straight to 3. Install the Figma to LucyStudio Plugin below.

3. Install the Figma to LucyStudio Plugin​

To bring text styles into Lucy Studio, you need a plugin that exports them from Figma as JSON.

  1. Download the plugin from the link above.
  2. Click the Action button in Figma's bottom menu bar.
  3. Select Plugins and widgets.
  4. Search for Figma to Lucy Studio.
  5. Select Figma to Lucy Studio and click Run.

Running the plugin from the Figma Action bar

Importing a Screen from Figma​

Import a whole frame you designed in Figma and turn it into a new page in Lucy Studio.

STEP 1. Copy a Screen in Figma​

  1. Run the "Figma to Lucy Studio" plugin.

    Running the plugin

  2. With the plugin window open, click the screen (frame) you want to import to select it, then click [</> Copy Code] to copy that screen as JSON.

    The Copy Code button

STEP 2. Paste the Copied Screen into Lucy Studio​

  1. Open a new page in Lucy Studio, or create one.

  2. Click the canvas and paste (macOS: Cmd+V / Windows: Ctrl+V). The screen you copied is added as widgets, exactly as it was.

    Pasting onto the canvas

STEP 3. What to Check After Importing​

Color

Colors used in an imported screen link automatically to the color theme registered in your project.

warning

A color links automatically only if it's already registered in the project's color theme. Colors that aren't registered yet come in as fixed color values and stay unlinked from the theme, so import your color theme before you import a screen.

Text Style

Text styles aren't included when you import a screen. Import them separately with [Import Figma Text Styles] in the Text Style editor.

Layout

Figma's Auto Layout direction (horizontal or vertical) becomes a Row or Column, and Wrap is applied when automatic wrapping is on. If a frame contains elements placed at absolute positions (Ignore Auto Layout), the rest keep their original Row/Column flow. Only the absolute elements are layered on top. If spacing or alignment looks different from the original after importing, check the layout properties again and adjust them.

info

Transparent background and group frames nested several layers deep are cleaned up automatically during import, so Figma's layer structure and the widget tree built in Lucy Studio may not match exactly.

Troubleshooting​

  • Nothing happens after you paste → Check that you copied the value in the correct format in Figma, then try again from STEP 1.
  • Spacing or alignment differs from the original → Check the Auto Layout and absolute position settings.
  • Colors came in as fixed values → Check that the color is registered in your color theme first.