C'est du gâteau !¶

L'objectif de cet exercice est de mettre en pratique les techniques de mise en page dynamique imbriquée (auto layout) dans Figma.

Résultat suggéré¶

Télécharger l'image d'un gâteau sur pexels.com.
Renommer le fichier Figma « C'est du gâteau ! ».
Déplacer le fichier Figma dans un projet plutôt que de le laisser dans « Brouillon ».

Ajouter l'image dans le frame du téléphone de sorte qu'elle prenne 50% de la hauteur et 100% de la largeur.
Si on redimensionne la page, l'image devrait s'adapter :

Trouver une police de caractères adaptée à un site de recettes.
Ajouter un lien de retour en haut à gauche avec une icône tirée des icônes Feather.
Ajouter un avatar en haut à droite.
Aligner verticalement l'icône, le lien ainsi que l'avatar.
Si on redimensionne la page, l'avatar devrait rester attaché à droite (contrainte 😜) :

Créer un frame « Menu » avec une mise en page automatique horizontale.
Ajouter dans le menu les mots "Ingrédients" et "Préparation". Ajouter également un trait vertical au centre.
Gérer les espacements avec les options de mise en page automatique.
Positionner le frame dans le frame du téléphone de sorte qu'il soit toujours au centre de la page (contrainte 😜).
Si vous avez bien configuré le tout, le menu devrait s'ajuster automatiquement si vous changez le texte.

Ajouter 3 petits avatars superposés avec un nombre de commentaires à leur droite. Grouper le tout.

Ajouter le titre de la recette. Sa largeur doit s'adapter à la largeur de la page (contrainte 😜).
Créer un frame « Body », de la largeur du téléphone, avec une mise en page automatique verticale et y ajouter le titre et les commentaires.
Si vous avez bien configuré le tout, la partie des commentaires devrait s'ajuster par rapport à la hauteur du titre.

Pour la liste des ingrédients, commençons par la mise en forme d'une seule ligne

Créer un frame « Ligne », de la largeur du téléphone, avec une mise en page automatique horizontale.
Dans le frame, ajouter un carré d'environ 12 x 12 avec un tracé de 2px. Cela fera office de "checkbox".
Dans le frame, ajouter un texte pour l'aliment. Assurez-vous que la largeur de ce dernier « remplisse le contenant ».
Dans le frame, ajouter un texte pour la quantité.
Configurer les marges de sorte que le contenu ne soit pas collé sur les bords du téléphone (ex. : 16px).
Configurer les espacements pour éviter que la case à cocher soit collée à l'aliment.
Retirer la couleur de remplissage du frame, si ce n'est déjà fait.

Ajouter le titre des ingrédients et la ligne d'ingrédient dans le frame « Body » !
Copier-coller quelques fois la ligne d'ingrédient et remplir quelques ingrédients supplémentaires.

Ajouter un rectangle vide entre le lien des commentaires et le titre Ingrédients.