Tutorial n°5 : Style your project from Figma design

This tutorial will show you the integration of a Login page that was previously created on Figma. Figma automatically gives you the CSS affiliated to the elements of the page you created, let's see how to integrate it in the Studio.

Note : We currently have created the design with Figma (a free tool) but others like Adobe XD also provides you automatic CSS.

Step 1 : Create a new project

The Login page you are about to recreate has been created on figma.
Here is the link to access it :

https://www.figma.com/file/ltNjfK14DfBCIvrRZ
ekR6k/Styling_tutorial-design?t=T5PdI13kCqktNIYY-1

NB : You have to use or create a (free) Figma account to access the CSS.
‍
As you can see, each element of the design can be clicked, and in the right side of the page, on the "inspect" section, the CSS for each element is automatically generated. That is what we will use to design this same page in the Studio.

Now that you know that, let's create our application :
To create a new project, go to File -> New -> Project and search "Convertigo Low Code FullStack Web/Desktop or Mobile app project" and name it "styling_tutorial".

Once your project has been created, simply use the play button to open the Visual App Viewer.

Note: Don't forget that if you name your project differently, you will not be able to continue properly the tutorial..

Step 2 ᐅ

Success !
‍
You successfully completed this step, please click the Next Step button to go to next tutorial step

You did not complete all the actions required in this step, are you sure you want to go to the next step ?

Yes No