In this review, we’ll show you how to turn Figma layouts into a finished product without coding. A plugin that unloads ready-made designs into React Native code will help us with this.
Sizze is a plugin from the creators of Sizze.io that allows you to interactively export your mobile app interface layouts from Figma to React Native code without losing the quality and structure of your source files.
Main advantages:
- Accurate conversion from design to code
- Code cleanliness
- Flexbox support
- Fast implementation into an existing project
Plugin features
Auto-layout
All components assembled in Auto Layout mode turn into elements that are easy to use for building dynamic lists and connecting backends.
Constraints
The creators have developed algorithms for adapting layouts for all application screens. By simply adding the constraints property, you can see how easy it is to adapt the dimensions to different devices.
Scrolling and Grid
You can create dynamic content directly from prototypes. All you need to do to add animations is write properties to the elements to get the result without any programming.
Export opportunities
Using the Sizze plugin, you can unload SVG elements with high detail, as well as export fonts.
How much does the plugin cost?
The plugin provides three free downloads without a subscription. By subscribing to the plugin, you also get access to sizze.io, where you can develop your own designs from ready-made templates in the application itself and import ready-made layouts from Figma. Monthly subscription with unlimited downloads is $ 22, there is also an advanced plan for $ 169. If you buy one year subscription, you get a 20% discount.
How to use it ?
You can download the plugin in Figma Community or by following the link sizze.io/plugin. After activating the plugin, a window will open in which you can copy the code of the selected layout.
Next, on the expo.dev website, you need to create a new snack, in which you need to paste the code you copied earlier. After checking the code on different devices, it remains to download it in zip.
The second option for unloading the code: go to the sizze.io platform, where you can also make changes, check the adaptation on different devices and download the ready-made code in React Native.
Conclusion — who is the plugin suitable for?
The plugin is suitable for absolutely everyone: novice developers, UI&UX designers, teams and mobile app development studios for speed and ease of the app creation process. No-code development can meet some product needs and save time and resources. It’s worth considering platforms without code, even if you have enough money. They can help you make decisions faster, test ideas, and stay one step ahead of your opponents. The Sizze plugin gives you the ability to create and test products in a matter of days.