Academy
Figma connection

Figma connection

Create fully responsive prototypes in Figma and import them to Sizze.Bring your own design from Figma. Import your projects into Sizze and enhance them in the editor. The Sizze Plugin for Figma is another great Sizze product that will help you instantly convert your Figma layouts to React Native code and copy it.

Summary

Hello Sizziers, the given tutorials will help you to obtain the basic knowledge on Figma Import and Figma Plugin!

Here's the wrap up of the videos for your convenience:

In the first tutorial you will learn how to import Figma projects and convert designs to React Native code.

To begin with, we need a properly structured layout, you will learn how to design them in our next videos.

Select our layout, press the share button, copy the link. Next we go to Sizze, press the import button in Sizze editor and paste the link.

You'll see that our layout is added and you can see how the code was generated in real time, which you can either copy or download in a zip file.

The second tutorial will help you to understand how Figma Plugin works and export a mobile app design from Figma to react native code using the Sizze plugin.

To do this you need to click on the name of your design, go to plugins and then select the Sizze plugin in the plugin window. You can see how Sizze  converted your design to react native code right away. To download this code you need to copy it and go to the website which is called Expo.dev. On this website all you need to do is to create a new “snack” and then replace a template code with your own code.

Here's an important point - you need to double click on the inscription to remove this line.Now we can see that the code works fine and there are no bugs. You can run it on the browser to test.

Here we go!

Our design looks great and you can also check how it will look like on Android and IOS devices and even check it on your own device using the QR code

Make sure that everything works well so we can download the ZIP file. 

Get started

Related courses

15 videos • Advanced

Presets

View
2 videos • Advanced

CMS Collections

View
8 videos • Begginer

Publishing to Stores

View