Nodavelo now has its own dedicated Figma plugin!
This gives you more control, better compatibility with the Editor, and exciting new ways to bring your designs into Nodavelo.
Check out the details 👇
How to install the plugin
To install the Nodavelo - Figma to no-code plugin:
- In Figma, go to “Actions” → “Plugins & widgets”
- Search for Nodavelo
- Select the “Nodavelo - Figma to no-code” plugin
- Click “Run”
Copy your Figma design to clipboard
To copy your Figma design:
- Open the plugin
- Select the design that you want to import
- Click “Export to Nodavelo”
- Click “Copy to clipboard”
How to import your Figma design into Nodavelo
To import your Figma design to Nodavelo:
- In the top navbar of the Nodavelo Editor, click “More” → “Import from Figma”
- In the Welcome screen, click “Copy from clipboard”
- Check the design tokens, typography and spacing, and click “Next”
- In the Images section, select whether you want to upload new images or map the existing ones in your project
- In the Fonts section, check the fonts that were imported
- Review the import summary and click “Finish” to finalize the import
How to bring Figma variables and styles into Nodavelo
Sometimes you don’t want to import the entire design file, you just need the tokens (colors, fonts, spacing, variables, styles) to keep things clean and flexible.
Now you can import variables and styles only:
- Open the plugin and go to the “Design” tab
- Click “Extract All Variables”
You’ll see two modes for extracting:‍
- ‍Fast mode: extracts all local Figma variables, local paint & effect styles, typography, and font families.‍
- Deep scan mode: required to find the library paint/effect styles (external colors and shadows) and to detect inferred variables.
How to reuse Figma components inside Nodavelo
You can also import and manage components to keep them consistent in Nodavelo, eliminate duplicates, and update designs faster with a single source of truth.
To manage components and mappings:
- Open the plugin and go to the “Components” tab
- Enter the API key of your Nodavelo workspace
You can find the API key if you go to your Nodavelo dashboard → “Settings” → “Private Key.”
From there, you can import and map your components.
Check out our docs for a step-by-step tutorial.
Happy importing!
