étape 1

Préparer le document

1. Dans votre équipe IMD1x - …, dans le dossier UID 01 - Exercices , créer un Design File Figma
2. Renommer ce fichier : Calculator
3. Renommer la page présente : cover
   • Y créer une Frame de 1920 x 1080 pixels
   • Renommer cette frame : cover (nous y reviendrons plus tard)
4. Créer une nouvelle page mockup, la placer sous la page cover

<aside> <img src="/icons/keyboard-alternate_yellow.svg" alt="/icons/keyboard-alternate_yellow.svg" width="40px" />

Raccourcis utiles

A ou F pour créer une Frame

</aside>

étape 2

Structurer la composition

1. Placez vous dans la page mockup
2. Créer une Frame de 360 x 624 px
   • Renommer cette Frame en 01.calculator
   • Sélectionner cette Frame
   • Positionner cette Frame à X : 0 et Y : 0
3. Créer une première grille avec l’outil Layout Guides
   • Définir cette grille comme verticale (column)
   • Définir les paramètres de la grille : 4 colonnes, étirable (stretch), 8px de marge (margin), 8px de gouttière (gutter)
4. Créer une seconde grille avec l’outil Layout Guides
   • Définir cette grille comme horizontale (row)
   • Définir les paramètres de la grille : 7 lignes, étirable (stretch), 8px de marge (margin), 8px de gouttière (gutter)

<aside> <img src="/icons/info-alternate_gray.svg" alt="/icons/info-alternate_gray.svg" width="40px" />

Un peu d’aide (seulement si besoin)

• Je regarde les réglages des grilles pour m’aider </aside>