À partir d’un texte, je devais créer une maquette pour la marque Délices Daisy en utilisant les outils de mise en page Figma.
Compétences acquises:
- Mise en place de styles
- Créer des composants et des variantes
- Gérer des contraintes
- Rendre la maquette responsive
Choix du frame et des images
D’abord, j’ai recherché des images en accord avec la marque Délices Daisy sur le site Pexels ensuite, sur Figma j’ai choisi le frame Desktop 1440×1024, pour le format écran d’ordinateur.
Création de la forme lune
J’ai crée 2 formes rondes que j’ai superposé et soustrait grâce à l’outil booléens.
Création des styles et des composants
Pour créer une maquette responsive, j’ai commencé par créer une forme rectangulaire et j’y ai ajouté du texte et une image. J’ai ensuite ajouté des règles pour créer des marges uniformes.
En m’inspirant de ce modèle, j’ai créé un style pour les titres, les paragraphes et les couleurs. J’ai ensuite créé un composant en sélectionnant le calque Menu > Object > Create Component.
Pour la section « Nos plats », j’ai créé une variante de la section « À propos ». Pour le texte de cette section, j’ai utilisé l’outil texte blocs. J’ai aligné les trois blocs de texte en utilisant l’outil alignement.
Au fur et à mesure que j’ajoutais des calques, je les nommais et les regroupais par section.
Gestion des contraintes
J’ai rendu la maquette responsive en utilisant des contraintes. Cela permet à la maquette de s’adapter à différents types d’écrans, tels que les ordinateurs, les tablettes et les smartphones.
Exportation de la maquette
Pour l’exportation j’ai sélectionné le frame et je l’ai exporté en format jpg.
