Figma design to React-Native code

I know, Developers love creating things from Scratch, but to be productive, the idea should be like building a working, smooth, and stable product the simplest way, so just let’s take advantage of NoCode and LowCode tools.

Starting with a figma file, and coding it from zero can get sometimes boring and might take a lot of time to finish an alpha version of your product, therefore we’ll be using Sizze, it’s an amazing lowCode tool that you can use to draw your design to be converted to programming language of your choice such as React.js, React-Native or Flutter, it can be used as a Figma plugin or directly in their website as in the picture as below :

Once you select a component, you can see the corresponding source code by clicking on the tab “Code” in the top left side :

You can even test the code on Expo as they provide. To add the plugin to Figma, open your figma file, navigate to “plugins” then search for Sizze to add it as in the picture just below :

Once it’s added, select your component, then go to Sizze plugin and click on “run” :

It will ask you to sign-in/sign-up to Sizze :

You’ll be redirected to their website to sign-up (or sign-in). Once it’s done, get back to your figma file to find the generated code like this :

As an alternative, you can directly import your Figma file to Sizze website, and the rest is the same as explained as above.

That’s it till now, hope you enjoyed it, and keep being curious.