Importing Figma files into Lunacy

This article guides you through the import process and showcases Lunacy’s efficiency even with tricky challenges like components and auto layouts.

Figma and Sketch formats are very different, but we balanced their unique features in a way that makes it easy to transfer Figma files into Lunacy while preserving their properties.

The import

Importing Figma files into Lunacy is just a matter of copying and pasting the file link: simply click Share in Figma, set the sharing option to Anyone with the link, and copy the link itself. Open Lunacy, press Ctrl / ⌘ + V, and enjoy the magic!

If your Figma file is private, there are a few more steps you have to do. You’ll have to press Import from Figma on the Home tab to access the import window:

Keep your Figma file set to private, copy its link, and paste it into the corresponding input field. You’ll also need to generate a personal access token in Figma and paste it into the field below. Here’s the Figma team explaining how to manage personal access tokens.

Check that everything’s correct, click Import, and once again, enjoy the magic.

Now onto testing the import quality. We’ll judge it based on the features we found most difficult to adapt to the .sketch format: auto layouts and components.

The auto layout test

First, let’s open our design file in Figma. You can see the auto layout in action:

Here, we test alignment and orientation options, as well as the absolute position feature. We do all the same in Lunacy. See for yourself how it works:

So, what about importing components.

The component test

Back to the Figma file. The menu button and the navigation menu in the layout are grouped into a component:

When imported to Lunacy, the element becomes a component instance, colored pink in the Layer list:

This is because of, essentially, the only difference between Figma and Lunacy components: in Figma, once you create a component, it stays as the main component right there on your layout. In Lunacy, the main components are stored on the Components page — a special page that Lunacy automatically generates in a document when you create a component. What remains on the canvas after you create a component is its instance.

For your convenience, you don’t have to go to the Components page to edit the main component. Simply click an instance, press Enter to enable Edit mode, and edit the main component in a special window. Once you’re done, press anywhere outside the edited component — and here’s your updated instance.

So, if your abundance of Figma files has been keeping you from trying out Lunacy, this is your chance to transfer your designs in just a few seconds and continue working on them right away. 

Our team worked hard to ensure that the most challenging aspects of the import process are adapted seamlessly. This means no worrying about the technicalities of file transfer or redoing designs because they break during the import process. Just open the app — and design.