Tutorial n°5 : Style your project from Figma design

Step 6 : Style your page elements

It's time to put some styling in this page !

As told at the beginning of this tutorial, each element of this page has an automatic CSS generated by figma. You just have to click the element you want, click on "inspect" and you simply have to copy/paste it. (Don't copy the Height, Width and position, it is useless for the Studio). Let's see where !

For the first CSS element, select the background of the page (click on the page background), and as you can see the affiliated CSS shows up. Copy it (here we just need the background one) and come back in the Studio.

The idea is simply to put a "Style" component in each element you want to style : Search in the palette for "Style" and as you want to change the background color, drag & drop this component directly in your content, directly on the app viewer as in the video or in the treeview.

Then double click the Style to open the editor and paste your copied CSS.

Be careful : you have to paste the CSS inside the {} to be effective.
Overmore, you will always have to add "--" before every CSS line that you will paste : That is mandatory to tell the component you style to "accept" this styling.

Success !

You successfully completed this step, please click the Next Step button to go to next tutorial step
Close
You did not complete all the actions required in this step, are you sure you want to go to the next step ?