Menu
In this tutorial, we will show the basic rules for preparing a layout for export to Sizze, for example, an online store screen:
First, create a new file in Figma and give it a name. Then select the frame tool (hotkey F) and in the right panel select the phone screen size 375*812 px.
Then, in the upper part of the frame, create another frame for the future Nav bar and set the desired size, in this case - 375*96 px.
Rename the layer to “nav bar” - this is necessary for the aesthetics of your future code.
Layer names may be different, but try to use standard naming.
In the right panel, in the Constraints section, set the Left and right parameter so that when the screen size changes, the Navbar changes with it. Check the box next to Fix position when scrolling to indicate that this design element will not scroll with the rest of the content, plus it will be more convenient for you to navigate the layers.
Select the Text tool (shortcut T). Write the name of the screen, in this case it is the Catalog. Set it to the desired font, size, font style, etc.
Wrap the text in a frame (keyboard shortcuts Command+Option+G/Control+Alt+G) and rename it to “left". This is how we create the left part of the Navbar.
Then add an icon and place it inside the NavBar. In this case, the icon is added from those already used earlier.
Important! All icons should be translated into Outline stroke, merged into one layer (Command+E/Control+E keyboard shortcuts) and have their own external frame.
Wrap the icon in a frame (keyboard shortcuts Command+Option+G/Control+Alt+G) and rename it to “right". This way we create the right part of the Navbar.
Let's change the background of the screen to see the difference better. In this case, we choose the gray background color - F9F9F9.
Next, select the Nav bar layer and add an autolayout to it (Shift+A keyboard shortcuts). In the right panel, replace the Resizing values both horizontally and vertically with “Fixed” and return the desired size ( 375*96 px).
Then set the margins inside the autolayout - from all sides 0. Next, we will add the margins to each element separately.
The location of the content inside the autolayout in this case is selected from the bottom left.
Select the left part of the nav bar, select resizing horizontally “Fill" and set the indentation to 16 px on the left.
In the right part of the Navbar, set the indent to the 16px on the right.
Then select both parts of the Navbar and wrap them in a frame with autolayout (Shift+A keyboard shortcuts). Rename the layer to “container".
To visually separate the Navbar, add a gray line down. To do this, take the frame tool and draw a line with a thickness of 1 px.
Important! Do not use the Line or Pen tools, as they are not available in this version of Sizze.
Paint the line a darker gray than the background.
Now drag the line to the “nav bar” layer (don't confuse it with the “container" layer). Next, select the “nav bar” layer and change the autolayout direction to vertical. Don't forget to rename the line layer, for example, to “bottom line".
Nav bar is ready, next is a Tab bar.
Select the frame tool and draw an arbitrary rectangle. Add an icon inside this frame (we recommend adding an icon component) and text for the first tab.
Rename the layers:
Select the “tab” layer, add an autolayout to it (Shift+A keyboard shortcuts) and set the necessary margins, in this case 4 px on top, 12 px on the bottom, 0 px on the sides, 0 px is the distance between the text and the icon.
Select the “tab name“ layer, change resizing to ”fill" (increase the width of the entire tab so that the text does not move to the second line) and center the text in the middle.
The first tab is ready!
Now duplicate the tab (hold down Option/Alt and drag the “tab” layer to the right). Change the icon and text for the second tab.
Repeat this action the required number of times.
Select all the tabs and wrap them in an autolayout frame. Rename the layer a “tab bar".
Select the “tab bar" layer and stretch it to the full width of the screen. Set Resizing “Fill” to all inner layers of “tab”.
In the “tab bar” layer, set the bottom margin 32 px and align the layer to the bottom edge of the screen.
Select the “tab bar” layer and in the right panel in Constraints select the value Left and right. Check the box next to Fix position when scrolling. And paint the layer white.
If necessary, add a dividing line on top of the Tab bar, similar to the Navbar.
To do this, wrap all the “tab” in a frame with an autolayout -> add a frame with a thickness of 1 px -> place the line in the “tab bar” layer -> change the direction of the autolayout to vertical -> put the Resizing “fill” lines.
The tab bar is ready! Now, we’ll be proceeding to the creation of a product card.
Select the Rectangle tool (shortcut R). Draw a rectangle and select the “Image” fill from it.
Important! Do not use the frame tool with photo filling, Rectangle is better suited for more correct export to Sizze.
Add a photo for the first product card.
Then add 2 texts, one with the price, the second with the product name. Edit their font, font size, font type, etc.
Select all the new layers and wrap them in a frame with autolayout (Shift+A keyboard shortcuts). Set the distance between the layers, in this case 8 px.
Add margins at the top, bottom and sides of 12 px and color the card white.
Rename the layers:
Put Resizing “fill” on all the inner layers of the card and set the text location on the left edge.
The card is ready!
Next, when you transfer the layout to Sizze, you will transfer this card to the CMS preset, where it will be automatically duplicated as many times as you need. Therefore, there is no need to spend time preparing the entire layout in Figma, just one card is enough.
In this lesson, we have learned how to create design elements with:
By following these rules, you won’t have any problems with transferring layouts to Sizze and generating clean code!
