How to start or transferring layouts from Figma

Go to Sizze.io

Register

Register in any of the suggested ways.

‍

Connect accounts

To begin, please watch the brief tutorial on "How to connect Sizze and Figma accounts". Once you have completed it, return to the Projects section.

Next, copy the link to the Figma file. You have the option to copy the link to the entire project, a specific page within the project, or a particular frame - depending on your preference.

‍

Import Figma designs

Now click the Import from Figma button.

‍

In the window that opens, paste this link.

‍

Don't worry if you see a blank screen 😄 all layouts are loaded as separate pages, and you can find them in the left menu.

‍

Link presets to your design

You can now link presets to your design components to make them functional. For more information on each preset, please refer to the academy.

‍

We would like to highlight the CMS preset as a cool feature of our editor.

With this preset, you can link it to your product listing page and connect it to individual detail page. Once you populate the table with content, you will see the magic happen on the preview, where each product's detailed page will be unique.

Add actions

Additionally, you can add actions to specify how your application should behave in the Sizze editor. To learn more about actions, please refer to the academy.

‍

Enjoy!

Once presets are linked and behavior is set, you can use the generated code for development or publish the app in stores.

‍