Back to academy

Figma Plugin

If you're wondering how to get started building your app using the Sizze plugin, you've come to the right place! We are glad to see you here, please read the instructions below to start your journey with Sizze

The very first step is installing the plugin by downloading it in Figma Community or by following the link sizze.io/plugin.

Step 1: Copy the code

Select the layout you want to convert to a code by clicking on its name, then select Sizze. You will see a window with a code that can be downloaded in two ways: through the Sizze app or through the Expo.dev website.

Step 2: Paste the code to Expo

You need to create a new snack on Expo.dev. Copy the code from Figma and paste it instead of the sample code in the snack.

After that, you will see an error warning, which must be removed by double-clicking on the inscription "Add dependency".

Now you can see your design in the right block of the site, which you also can check on different devices, including your own device using the QR code. As you made sure that there are no errors, the layout adapts to different device models, the code works well, download it as a zip file.

Sizze Figma plugin - Export Figma designs to React Native code | Product Hunt