Menu
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
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
Note that the design uses a flexible structure using the Auto Layout and Constraints properties
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
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.
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
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
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
