Tutorial n°5 : Style your project from Figma design

Step 4 : Place your page elements #2


Select your second GridRow (delete the label again), then search for "GenericItem" in the palette. Drag & drop this GenericItem in the second section. In the Label of the GenericItem, change the text value by "Username". In the palette, search for the "TextInput" component and drag & drop it into your GerenicItem (this text input will be used to fill in the field).

Then, in the palette, search for the "Icon" component and drag & drop it into your GenericItem. Click it, and in the properties set its size as "small" and its slot as "start" to place it on the left. Then click the [...] of the "Icon Name" field : This is where you will choose the icon you want. (Here you literally can choose the icon you want.)

Now that you have your first complete text input, just copy the whole GenericItem and paste it in the next GridCol. Change the icon and the label to "Password"


In the next step you will place your button, then it will be the moment to style it all.
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 ?