How do I learn to use Sizze?
We will help you learn how to create your own comoponents and use ready-made ones, how to check the design and download ready-made code
Go to tutorials
Integration with the graphical editor Figma
Figma is the most popular graphic editor for creating interfaces. You can easily import screens directly into Sizze.
Integration with Expo
Expo is an open-source platform for making universal native apps for Android, iOS. You will be able to launch the application directly from the Sizze web interface.
Exporting code to React Native
Sizze converts your app design into React Native code. You can download the design in a zip archive or copy a single line and easily paste it into your project.
Exporting code to Flutter
The second framework for uploading to Sizze is Flutter. You can easily download the project in a zip archive or copy a separate page of code.
Copy the selected item
Sizze allows you to copy a piece of code that only applies to the selected item. You can quickly insert individual elements into your project.
Project in a ZIP archive
This gives you advanced options for building your project. The folder contains all the files you need to instantly start the application.
On the left side of the editor there is a set of functions for quick creation of your design.
Share your projects with the team. Set restrictions only on viewing or duplicating a project.
QR code preview
Test it on a real device. Download the Expo Go app and scan the QR code, your phone will instantly assemble the project and you'll see the results.
Choose different screen widths and see how your design will look on different widths.
On the left side of the menu you have a list of pages that you created in the project or imported from Figma.
Layer structure, you are shown the nesting of elements. The name of the element is duplicated immediately in the code, allowing you to quickly navigate through the code.
Database of ready-to-use functional components. You don't have to create all the elements from scratch, you can use a ready-made set.
Database of ready-made icons in which you can change color or size.
Importing components from Figma
In this block you can insert a link to a component or page with comonents and import all the necessary files from Figma.
Quick navigation menu
See all hotkeys or select the function you need.
Quick alignment of elements relative to each other or to the main parent screen.
At any element you can adjust the position and set the rounding of corners when creating.
One of the handy features, when you select a lot of elements you can see all the colors.
The important block Auto Layout gives you the ability to create flexboxes in a block. When you duplicate elements, they will be aligned with the set parameters.
Constraints tell Sizze how objects should respond as you resize their layout. This helps you to control how designs look across different screen sizes and devices.
Ready font set from Google Fonts.
Gives the ability to make a bypass around the element
Gives you the ability to make shadows for the element
Amazing function for both item types. You can set functional values for Tab Bar, Nav Bar, Switch Box and more. After that, your element will become a functional element with its own logic.
Add an opening function
Make logic to open any element on the page, use the Action tab.
Add navigation function
Create logic to navigate to another page on any item.
Sizze has a preview function, you can open the IPhone emulator directly in the web interface.
Try it in your browser
Sizze 3.2.1 Version
Create a project