Back

101 Crash Course

If you want to learn about the platform and create your first app, this short dive course is for you

And so here we go, this course we break into three parts: Design, CMS Collections and Actions

Part 1 - We're making a design.

To begin, we will prepare 4 simple screens with a good nested structure.


1. Welcome screen
2. Companies screen with CMS Collections
3. Company details screen
4. About app screen

Figma project

Note that the design uses a flexible structure using the Auto Layout and Constraints properties

Part 2 - Import project from Figma to Sizze

In this part we will transfer the finished design from Figma to the Sizze project

Go to the project in Figma and copy into the project link

You can take this project as an example

Go into Sizze and paste the link into the import modal window

Selecting screens from the Figma project for import

Assign the first screen and delete the blank one

Part 3 - Create custom presets

In this part we will turn static elements into functional elements

Assign to all Navigation Bars the property

By analogy, we do the same with all the other elements. And also configure the link button.

By analogy, we do the same with all the other elements. And also configure the link button.

Part 4 - Create CMS Collection

In this part we will start working with the CMS collection and connect our design to the data

Next, we copy our detail page and paste it into the created CMS collection detail page

Changing the background color to #f6f6f0

And delete the previous page

Open a CMS collection and make additional columns for future content

In the end, the table should consist of fields like this

Part 4 - Create CMS List

In this part, we create a collection preset and connect it to the data

Putting aside our finished design

Go to the presets menu and select CMS List

Connecting our collection to CMS List

We take a ready-made card design and insert it into the CMS item. When you insert something in the CMS item all other cells will duplicate the content until you connect it to the data from the table.

To copy a card you can use the hotkeys CMD + C, CMD + V

Let's set the padding at the CMS item

Select the main text in the card and choose in the right menu from which column to take data for this text.

By analogy it is necessary to do with other data

Part 5 - Connect Detail Page

In this part we will connect all the data to the detail page and learn how to switch between pages

Do the same with the other data that need to be taken from the table

Make sure that your button should be configured as a Preset Contact Button. This is necessary in order to connect a link.

The end result should be as shown on the screen below

Part 6 - Create Actions

Do you still have questions?

Our team is more than happy to help you sort out or solve the problem you're having.
Request