How to import designs from Figma into Visily

How to import designs from Figma into Visily

This article explains how to import Figma designs into Visily using the Visily plugin for Figma. You can bring your designs into Visily by copying them directly or by exporting them as a `.vis` file. Once imported, your Figma designs become editable in Visily, so you can continue designing, iterating, and collaborating without starting from scratch.

Before you start

Before importing the design to Visily from Figma, make sure you have:
  1. A Visily account with an active paid workspace, as this is a paid feature.
  2. At least one board created in Visily
  3. A Figma file with the design you want to import
  4. The Visily plugin is installed in Figma

Export your Figma designs using the Visily plugin

  1. Open your Figma file and launch the Visily plugin.

  2. In the plugin, select Export to Visily.


  3. Select the layers you want to export, such as frames, groups, or components. Your selection will appear in the plugin preview. 


  4. Click Continue to load the layer details. Keep your layers selected until loading is complete, as changing the selection will cancel the current process and update it to the newly selected layers. 


  5. Choose one of the following export methods:
    1. Copy to clipboard: Copy the selected Figma design so you can paste it directly into a Visily board.
    2. Export file: Export the selected Figma design as a ".vis" file to import into Visily.

Add the exported design to Visily

Option 1: Copy to clipboard

  1. Open your Visily board.
  2. Paste the copied design directly into the canvas using:
    1. Cmd + V on Mac
    2. Ctrl + V on Windows 
An import dialog will appear and show the copied designs. You can choose to import all layers or only selected ones, then click **Import** to add them to your Visily board.

Option 2: Export file

  1. After export the design as a `.vis` file from the Visily plugin in Figma, open your Visily board.
  2. Import the file in one of these ways:
    1. Right-click the canvas and select Import from Figma

    2. Go to Add → Import from Figma 


  3. An Import from Figma dialog will open. From there, either click Import file to upload the exported `.vis` file, or drag and drop the file into the Import file area.

  4. After the file is uploaded, you can choose to import all layers or only selected ones, then click Import to add them to your Visily board.

Save imported Figma components as templates

If your imported Figma design includes components, you can save them as reusable templates in Visily during the import process.
Use the dropdown to choose the save location and manage sync settings. Saved templates can then be reused across your board and workspace. 

Notes

  1. Visily preserves content and styling as closely as possible during import, but some Figma-specific properties may not fully translate. Unsupported fonts may be replaced, and advanced styles such as multiple color layers, per-corner radius values, or complex multi-layer shadows may be simplified. 
  2. The Visily plugin also supports moving designs in the other direction, from Visily to Figma. 
Need more help?
If this does not solve your issue, contact support and include a screenshot if possible.

    • Related Articles

    • How to export designs from Visily to Figma

      This article explains how to export designs from Visily to Figma using the Visily plugin. You can transfer designs from Visily to Figma either by copying them directly or by exporting them as a `.vis` file. Once imported into Figma, the designs are ...

    • Component Templates in Visily

      This article explains what Component Templates are in Visily and how to use them to build designs faster. What Component Templates are Component Templates are ready-made UI building blocks that help you add detail to your design without creating ...

    • UI Screen Templates in Visily

      This article explains what UI Screen Templates are in Visily and how to use them to speed up your design workflow. What UI Screen Templates are UI Screen Templates are prebuilt screen designs you can add to your board as a starting point. In Visily, ...

    • How to install the Visily Plugin on Figma

      This article explains how to install the Visily plugin in Figma. The plugin supports both importing designs from Figma into Visily and exporting designs from Visily to Figma. Before you start Make sure you have a Figma account and can open a Figma ...

    • Diagram Templates in Visily

      This article explains what Diagram Templates are in Visily and how to use them to create diagrams faster. What Diagram Templates are Diagram Templates are premade templates for common diagram, planning, and brainstorming use cases. In Visily, they ...