Tutoriel Figma UX/UI : comment designer une maquette de site web

Summary

Ce script d'une vidéo tutorielle présente Figma, un outil en ligne pour créer des maquettes et prototypes de sites web et d'applications. Il couvre les bases de Figma, y compris la création de frames, l'utilisation de grilles pour l'alignement, la modification des propriétés des éléments, et la création de groupes et de composants réutilisables. Le tutoriel vise à aider les utilisateurs à comprendre les principales fonctionnalités de Figma pour commencer à créer des maquettes web efficacement.

Takeaways

• 🌐 Figma est un outil en ligne pour créer des maquettes et prototypes de sites web et d'applications.
• 🎨 Il est utilisé pour tous les projets de clients avec l'agence, notamment pour créer des maquettes de sites web qui convertissent.
• 📦 Lors de la création d'un nouveau fichier, il est important de nommer le fichier de manière descriptive pour faciliter l'organisation.
• 🖼️ Les frames représentent les pages ou sections principales du site web et peuvent être dimensionnées selon les besoins.
• 📏 Les grilles sont utilisées pour aligner les éléments et respecter les marges, améliorant la cohérence de la conception.
• 🔠 Le texte peut être personnalisé en termes de taille, police, graissage, et espacment entre les lignes pour assurer la lisibilité.
• 🔄 L'utilisation de l'auto layout facilite la gestion de l'espacement et l'alignement des éléments dans les frames.
• 🔲 La création de rectangles et d'autres formes de base est essentielle pour construire les interfaces de navigation.
• 👉 La duplication d'éléments de texte et la mise en place de styles cohérents rendent le processus de conception plus efficace.
• 🔄 Les boutons et les flèches peuvent être adaptés en termes de couleur, forme et ombre pour améliorer l'esthéthique et l'accessibilité.
• 🔄 La création de composants réutilisables permet d'assurer une cohérence de style tout au long du site web et des applications.
• 📱 L'outil prend en charge la conception adaptable pour différents écrans, y compris les mobiles et les tablettes.

Q & A

Qu'est-ce que Figma et à quoi sert cet outil?

Figma est un outil de conception en ligne qui permet de créer des maquettes et des prototypes de sites web et d'applications. Il est utilisé pour créer rapidement des pages web, en facilitant le design, l'alignement et l'organisation des éléments.

Quels sont les principaux éléments que l'on retrouve dans l'interface de Figma?

L'interface de Figma comprend des frames (cadres) pour organiser le contenu, des formes comme des rectangles et des lignes, des grilles pour l'alignement, ainsi que des outils pour configurer les couleurs, l'opacité, les contours et autres effets visuels.

À quoi sert une 'frame' dans Figma?

Une frame dans Figma correspond à une page ou une section de votre projet. Elle sert à contenir les éléments visuels d'une page, comme des images, des boutons ou des textes, que vous pouvez dimensionner et organiser selon vos besoins.

Comment peut-on utiliser les grilles dans Figma?

Les grilles dans Figma servent de repères pour aligner les éléments de façon cohérente. Elles peuvent être configurées en colonnes, ce qui est utile pour gérer les marges et l'alignement des objets sur la page, notamment pour les sites web responsives.

Comment dupliquer un élément dans Figma?

Pour dupliquer un élément dans Figma, il suffit de rester appuyé sur la touche 'Alt', puis de glisser l'élément à l'endroit souhaité. Cette fonctionnalité permet de répliquer facilement des éléments comme des textes ou des formes.

Qu'est-ce que l'auto-layout et comment l'utiliser?

L'auto-layout est une fonctionnalité dans Figma qui permet de gérer automatiquement l'espacement et l'alignement des éléments à l'intérieur d'un cadre ou d'un groupe. Elle est particulièrement utile pour garantir un alignement cohérent et espacer correctement les éléments comme des textes ou des boutons.

Comment créer un bouton avec un texte dans Figma?

Pour créer un bouton, vous commencez par ajouter un rectangle, puis un texte. Ensuite, vous pouvez utiliser l'auto-layout pour ajuster l'espacement entre le texte et les bords du rectangle. Vous pouvez personnaliser la couleur, ajouter des effets comme des ombres portées, et arrondir les bords du bouton.

Qu'est-ce qu'un composant dans Figma et pourquoi l'utiliser?

Un composant dans Figma est un élément réutilisable qui conserve les styles prédéfinis. Il permet de gagner du temps en évitant de recréer les mêmes objets visuels, comme des boutons ou des titres, tout en assurant une cohérence de style à travers tout le projet.

Comment rendre un design responsive dans Figma?

Pour rendre un design responsive, Figma propose des outils permettant de redimensionner automatiquement les éléments selon la taille de l'écran. En activant l'option 'Hug content' pour les éléments internes d'un groupe, ils s'adaptent au conteneur lorsque vous changez la taille du cadre principal.

Comment organiser les éléments dans un projet Figma?

Il est recommandé de nommer les frames, groupes et composants de façon cohérente et descriptive pour mieux organiser un projet. Vous pouvez également regrouper des éléments similaires pour faciliter la gestion et la manipulation du design.

Outlines

00:00

💻 Introduction à Figma pour créer des maquettes et prototypes

Ce paragraphe introduit Figma comme un outil de création de maquettes et de prototypes pour des sites web et des applications, utilisé notamment pour des projets clients d'une agence. L'auteur promet de montrer les bases pour maîtriser l'outil et créer des maquettes web efficaces tout en fournissant des conseils sur l'UX et l'UI design, y compris l'accessibilité et le contraste.

05:02

🖼️ Exploration des Frames et Grilles dans Figma

L'auteur explique les fonctionnalités principales des Frames dans Figma, décrivant comment elles sont utilisées pour structurer une page web. Il détaille la création et la dimension des Frames, le réglage de l'opacité et des contours, ainsi que l'ajout d'éléments tels que les grilles pour aligner des objets de manière efficace. Il illustre cela à travers un exemple de création d'un menu et l'utilisation des grilles pour assurer un alignement précis des éléments comme le logo et les textes.

10:04

🛠️ Utilisation de l'Auto Layout pour organiser les éléments

Ce paragraphe approfondit la fonctionnalité Auto Layout dans Figma, qui permet d'organiser les éléments de manière cohérente. L'auteur montre comment aligner et espacer des textes et des boutons automatiquement, créant ainsi des interfaces plus ordonnées. Il explique également comment ajuster les paramètres d'espacement et l'alignement des objets, notamment avec des options pour l'espacement interne (padding) dans des composants comme des boutons.

📦 Création de composants réutilisables dans Figma

L'auteur introduit la notion de composants dans Figma, des éléments réutilisables pour accélérer la création d'interfaces homogènes. Il montre comment créer des composants pour les boutons ou les textes, et explique que toute modification du composant principal se répercutera automatiquement sur ses copies. Cela permet d'appliquer des styles uniformes sur plusieurs éléments, facilitant le design systémique.

📱 Adaptation des designs pour le responsive mobile

Ce paragraphe explique comment adapter un design pour différents écrans, notamment pour le mobile. En utilisant les Frames et les options de redimensionnement automatique dans Figma, l'auteur montre comment ajuster les éléments tels que le texte et les boutons pour les petites tailles d'écrans. Il détaille aussi l'utilisation de l'Auto Layout pour que les objets se réorganisent automatiquement lors du redimensionnement du groupe.

🎯 Conclusion et invitation à explorer Figma plus en profondeur

L'auteur conclut en récapitulant les éléments abordés : Frames, groupes, textes, systèmes de design, et composants. Il encourage les utilisateurs à approfondir leur connaissance de Figma avec des tutoriels plus techniques si nécessaire, tout en répondant aux questions spécifiques via les commentaires. Il souligne que Figma est un outil simple à maîtriser une fois les bases acquises, et offre une grande flexibilité pour les projets de maquettes.

Keywords

💡Figma

Figma est un outil de conception collaboratif en ligne qui permet de créer des maquettes et prototypes d'applications web et mobiles. Dans la vidéo, l'auteur présente Figma comme l'outil principal utilisé pour la conception de sites web pour ses clients, en détaillant ses principales fonctionnalités et en expliquant comment l'utiliser efficacement pour créer des designs qui convertissent.

💡Frame

Une 'frame' dans Figma désigne une section ou une page d'un projet de design, comme la page d'accueil d'un site web. L'auteur montre comment une frame peut être dimensionnée et personnalisée pour contenir différents éléments, comme un menu ou des boutons. La frame constitue le cadre de base dans lequel les éléments du design sont organisés.

💡Grid

Les 'grilles' sont des repères visuels qui aident à aligner les éléments sur une page, assurant une disposition cohérente et harmonieuse. Dans la vidéo, l'auteur explique comment les grilles, notamment les colonnes, sont utilisées pour aligner des éléments tels que les logos ou le texte, en prenant en compte les marges sur les côtés de la page.

💡Auto Layout

L’Auto Layout est une fonctionnalité de Figma qui permet d'organiser automatiquement les éléments d'une page en gérant les espaces entre eux de manière cohérente. L'auteur montre comment utiliser l'Auto Layout pour aligner les textes, boutons et autres composants de manière fluide et uniforme, en expliquant son importance dans la gestion des espaces et de l'alignement.

💡Composants

Les composants sont des éléments réutilisables dans Figma. Une fois créés, ils peuvent être dupliqués et modifiés globalement. L'auteur illustre comment un bouton ou un style de texte peut être converti en composant, permettant d'appliquer des changements à tous les éléments similaires dans une maquette, ce qui rend le processus de design plus rapide et plus uniforme.

💡Textes

Le texte dans Figma peut être configuré en termes de taille, police, alignement, et interligne. L'auteur montre comment créer du texte pour les titres et les menus, puis le personnaliser pour respecter les normes de design, tout en utilisant des grilles pour un alignement précis. La vidéo explique également l’utilisation des styles de texte réutilisables via les composants.

💡Bouton

Le bouton est un élément essentiel des interfaces web, utilisé pour déclencher des actions, comme 'réserver un appel'. L'auteur montre comment créer un bouton dans Figma en utilisant une forme de base, en ajustant l'opacité, la couleur de fond et les bordures. Il montre aussi comment transformer un texte en bouton interactif avec des bords arrondis et une ombre portée pour le rendre plus esthétique.

💡Ombre portée

L'ombre portée est un effet visuel qui ajoute de la profondeur aux éléments en créant l'illusion d'une ombre sous l'élément. Dans la vidéo, l'auteur montre comment configurer une ombre portée sur un bouton pour le faire ressortir, en ajustant des paramètres comme le flou et la position de l'ombre.

💡Responsive design

Le responsive design consiste à adapter un site web ou une application à différentes tailles d'écran, notamment les mobiles. L'auteur explique comment utiliser Figma pour créer des designs qui se redimensionnent automatiquement lorsqu'on passe d'une interface de bureau à un format mobile, en ajustant les textes, boutons et autres éléments pour qu'ils restent lisibles et utilisables.

💡Design system

Un design system est un ensemble de styles et de composants réutilisables, comme les couleurs, les typographies, et les boutons, qui assurent la cohérence visuelle d'un projet. L'auteur mentionne l'importance de créer des éléments standardisés, tels que des styles de texte ou des boutons, dans un design system pour faciliter le travail sur des projets complexes et garantir l'homogénéité du design.

Highlights

Cet outil permet de créer des maquettes et des prototypes de sites web et d'applications directement sur internet.

Utilisé pour tous les projets de clients avec l'agence.

Les bases de Figma sont expliquées pour créer des maquettes de sites web qui convertissent.

Les principales fonctionnalités de Figma sont présentées pour créer rapidement des pages web.

Des conseils sur le design UX et UI, l'accessibilité et le contraste sont donnés.

Explication de la création d'un nouveau fichier et la nomination du projet.

Introduction aux frames et leur rôle dans la conception de pages web.

Comment dimensionner une frame et configurer ses propriétés.

Utilisation des grilles pour aligner des éléments et respecter les marges.

Création d'éléments avec des formes de base comme le rectangle.

Comment utiliser les grilles pour positionner des éléments comme les logos.

Modification des propriétés de texte comme la taille, la police et la graissage.

Utilisation de l'auto layout pour gérer l'espacement et l'alignement des éléments.

Création de boutons avec des propriétés de base comme la couleur et les bords arrondis.

Ajout d'effets comme l'ombre portée pour améliorer l'esthéthique des éléments.

Utilisation de l'auto layout pour intégrer des flèches entre les textes.

Comment nommer et organiser les éléments pour une meilleure gestion des projets.

Création de composants pour la réutilisation d'éléments avec le même style.

Utilisation de design systems pour appliquer des styles cohérents à l'ensemble du projet.

Comment créer des éléments responsives pour s'adapter aux différents écrans.

Présentation des fonctionnalités avancées de Figma pour la conception de sites web.

Offre de faire des tutoriels plus techniques et approfondis sur demande.

Transcripts

dites moi c'est un outil qui permet de

créer des maquettes et des prototypes de

sites web et d'applications directement

sur internet c'est un outil que

j'utilise pour tous les projets de mes

clients avec l'agencé je vous donnais

dans cette vidéo les bases ont maîtrisé

figma et crée surtout des maquettes de

sites web qui convertissent donc on va

voir vraiment les principales

fonctionnalités de pigments qui vont

vous permettre de créer assez rapidement

des pages web je vais aussi en profiter

pour donner quelques tips en termes du x

et dui design pour respecter

l'accessibilité le contraste etc donc

dès que vous créez un nouveau fichier

sur figma vous arrivez sur cette page où

vous les nommez le fichier ici voilà

paix projet youtube

pour vous donner les bases de figura

dans cette vidéo on va s'appuyer en fait

sur la maquette de la refonte de notre

agence pour commencer vous voyez vous

avez plusieurs éléments en haut à gauche

ici on a des éléments aussi à gauche à

droite on a prototype différentes

différents onglets on va commencer par

ceux ci tout ici c'est tout simplement

les frame donc une frame c'est ce qui

correspond à votre page mer à votre

section mer par exemple ici la page

d'accueil c'est une frayeur on voit que

vous voyez là yade de frame et à la

prime que je viens de créé la prime

accueil qui comprend tous les éléments à

l'intérieur donc la fraise vous pouvez

la dimensionné comme vous voulez qu'ils

sont valley à dimensionner comme la page

d'accueil d'ici donc mais 1440 de

largeur

et vous avez votre prêt voilà vous avez

la frêle si vous cliquez dessus vous

avez différents éléments qui viennent à

droite dont à configurer la largeur mais

certaines fonctionnalités que je vais

détailler un peu plus tard on à

l'opacité vous pouvez régler l'opacité

de la presse vous pouvez régler

la couleur de fond pouvez régler aussi

les contours la largeur du bon tour

rajouter des effets un peu plus précis

exporter des images et on va s'arrêter

là donc une fois que vous avez la flemme

première chose que vous pouvez faire ici

je vais directement vous dire c'est

intégrer des grilles les grilles à quoi

ça sert c'est tout simplement des

repères qui vont vous aider pour aligner

des éléments laissant très été fait

rabrouer soit choisir la forme de grille

ou la forme de colonne la forme de

colonne elle est assez efficace ça me

permet d'aligner de prendre en compte

les marges sur les côtés et c'est donc

nous on va partir sur du 12 et donc on

va créer quelques éléments à partir de

sap donc vous voyez qu'on a vu ici les

frame en haut à gauche on va passer à au

form donc on a un rectangle ligne les

flèches les étoiles et c'est ce qui va

nous apporter ici c'est le rectangle

pourquoi la rectangle a tout simplement

ici parce qu'on va recréer ce menu donc

pour récréer ce menu c'est assez simple

on reste appuyé

et ont créé la forme donc l'appareil

pour la frame on a des éléments qui

viennent se crée à droite par exemple le

fond on peut modifier le fond ici on va

partir sur du gris un petit peu con

c'est comme le défoncer à droite et donc

vous voyez des vous créez un élément

vous avez le rectangle discret dans la

frais non donc c'est en fait un parent

et si vous allez avoir plus vous allez

rajouter des éléments plus ils vont se

sont organisées d'ici se ranger d'ici

donc ici on a créé le menu ensuite on

pourrait choisir de mettre le logo donc

ici si je mets le logo je peux me servir

des grilles en fait pour respecter la

marge à gauche un peu comme sur la

maquette à droite ici et donc vous voyez

que figma vous propose de le centrer

automatiquement par rapport au rectangle

ici donc c'est assez bien fait de à ce

niveau là on va avoir une autre chose en

haut à gauche ici vous voyez qu'aprilia

des textes c'est tout simple vous

sélectionnez le texte vous cliquez et

vous river le texte que vous souhaitez

ici je vais noté service et donc comme

pour leur époque juste derrière on a des

éléments qui s'affiche sur la droite et

notamment le réglage des textes donc on

peut changer la taille changer la police

d'écriture ici on va rester sur aube

auto peut changer le graissage on peut

changer l'année pixels entre les lignes

la hauteur de ligne et c'est donc ici

service on va rester sur du 18

ici vous voyez que leur propose la

fonctionnalité pour centrer un peu plus

facilement et donc après je vais venir

créer mes éléments se former nos clients

pour aller plus vite vous pouvez rester

appelé sur alt et glisser déposer pour

dupliquer le texte et donc créer

d'autres textes plus facilement 20

mètres se former et nos

voiles et qui si les textes sont

parfaitement espaces et on a toujours

les mêmes pixels entre les textes alors

pour faire ça je vais utiliser une

nouvelle fonctionnalité c'est à dire que

je vais sélectionner les textes vous

voyez qu'on a les trois textes ici je

vais mais je vais les sélectionner les

trois en restant appuyé sur contrôle et

donc je vais créer un automate un auto

l'eia ça va nous permettre en fait de

créer des briques vraiment bien organisé

avec un espace entre les lignes cohérent

avec un alignement cohérent etc vous

voyez là qu'il ya une petite section qui

serait auto layout et ça nous permet de

gérer facilement les éléments ici on

peut choisir de les aligner du haut vers

le bas ou la la gauche vers la droite

ici on a une petite fonctionnalité qui

permet de gérer les espaces entre tous

les textes de

du frame way 6,6 duplique des textes

dans l'oeuf règne le même espace membres

se crée donc ici on va choisir un

espacement de 48 allez on va dire 64

donc voilà on a deux textes parfaitement

alignés avec un même espace mans entre

les différents textes on va voir avec

les boutons que l'auto layout peut

servir à autre chose si

on crée un texte ici réservez un appel

et qu'on veut le transformer en vous

font pareil on va créer un atelier holt

donc l'or en appuyant sur shift 2 à

garowe de l'hélium qui se créent et vous

voyez qu'en fait ça crée de l'espace

m'en voyez qu'il ya du pad inutile

secret c'est à dire l'espace mon tour on

peut choisir la taille de cet espacement

à droite la taille de cet espacement à

gauche on va rester sur du jury en haut

et en bas et donc comme pour un texte

classique vous voyez ici qu'on peut

sélectionner entre on est donc en

sélectionnant un fond vous voyez que ça

prend directement la forme d'un bouton

ici on va choisir un peu un rouge vous

pouvez aussi vu que c'est un bouton

ajouter un petit peu plus de graissage

pour que ça une meilleure forme pour que

la forme du bouton soit un peu plus

esthétique on veut qu'ils aient des

bords un peu plus les arrondis vous

voyez là c'est un peu c'est un peu trop

strict un peu comme sur la maquette ici

pour faire ça on va cliquer sur

l'élément et vous voyez ici dans la

section des frênes dans l'accession dans

la section des largeurs etc on est une

petite fonctionnalité ici et en

augmentant les pixels on voit que pasa

s'arrondit de plus en plus

il sait ici que vous allez pouvoir gérer

les bords arrondis tous vos éléments et

l'appareil peut me servir de la grille

pour le coller à droite

et pourquoi y ait le même espace mans

avec le logo ici pour le faire ressortir

un peu plus ici je peux ajouter un effet

que je vous ai pas encore montré ici

c'est à dire une ombre portée si je

désactive on va un peu mieux loîc vous

voyez qui les nombreux porter qui vient

s'ajouter ici cette ombre portant pour

la configurer et si vous voyez d'europe

shadow configuré en cliquant ici on voit

qu'on va pouvoir augmenter le blur c'est

à dire la grosseur de l'ombre portée

entre guillemets les xy c'est à dire est

ce que l'on reporté va se mettre à

droite ici si je mens négative elle va

se mettre à gauche la loi on va pouvoir

augmenter l'opacité pour la rendre plus

visible normal tu es sur 2 0 et si on va

rester comme ça

donc voilà l'addition on a déjà créé un

menu on va ajouter cette flèche pour

vous montrer une petite fonctionnalité

des autos layout si je prends la flèche

et que je la rajoute entre les textes

ici vous voyez que vu qu'il ya déjà un

auto layout ici eh ben ça va prendre en

compte l'espace mans et donc c'est pas

bon en fait ce qu'on veut c'est que il

ya un auto layout dans un hôtel hyatt

donc en fait on va venir rejoindre ces

deux éléments on va créer un hôtel et

yahoo tu est ici on va gérer

l'espacement à droite comme on a fait

tout à l'heure donc ici on va mettre un

espacement un peu arbitraire de 8 de 16

le problème ici c'est que la flèche ce

centre en eau comment ça se fait c'est

ici en fait on a les alignements qu'on

peut choisir d'aligner à gauche en haut

à gauche et ses larves allen on va

l'aligner à gauche au milieu donc la

flèche qui s'y est centrée par rapport

au texte mais on a le même rendu qui ces

arbres plus on avance plus vous voyez qu

ici on a des fichiers qui se crée on a

des frères etc le mieux est de ranger

vos prêts avec des noms plus ou moins

arbitraires là on va l'appeler bouton là

on va l'appeler elle dit pour lien

logo on peut garder le nom rectangle on

peut mettre

background et voilà donc on a ces quatre

éléments qui représente un menu vous

pouvez choisir de les regrouper pas en

auto layout mais seulement en groupe

c'est à dire que vous les sélectionner

et vous faites contrôler g

et donc là vous pouvez renommer encore

votre groupe pour la paix définitivement

même et donc comme ça vous pouvez

déplacer votre mené déplacer tous les

éléments en même temps d'ailleurs on va

renommer notre frère on va l'appeler

accueille ensuite si on regarde la

maquette on voit que véritablement ça

sera pas très compliqué on va avoir du

texte a placé on va avoir des boutons à

placer des images à placer etc mais

quand on regarde bien il ya plusieurs

éléments qu'on va utiliser plusieurs

fois c'est à dire qu'ici le style le

texte ici on va l'utiliser à chaque fois

le titre agen on va l'utiliser une fois

mais les titres en hd on va les utiliser

plusieurs fois et donc ça va être un peu

laborieux de à chaque fois écrire le

texte sélectionné la bonne couleur

sélectionner la bonne police

sélectionner la bonne hauteur de ligne

de bons graissage la bonne taille et

c'est pareil pour les boutons créer un

nouveau bouton à chaque fois ça va être

un peu

laborieux aussi ici pareil crée à chaque

fois les différentes box avait un peu

laborieux pour remédier à ce problème on

peut créer ce qu'on appelle des

composants les composants ça va être des

éléments que vous allez pouvoir

réutiliser et qu'ils vont garder le même

style que vous avez établi sur le

composant de base je m'explique ici par

exemple ce bouton cette forme de boutons

ces deux couleurs etc vous allez la

réutiliser plusieurs fois surtout votre

site surtout de votre interface ce que

vous pouvez faire c'est clic droit

ici créer composants et vous voyez qu à

gauche ça a pris une nouvelle forme est

donc maintenant si vous cliquez ici ici

on est dans l'erreur si vous cliquez

maintenant dans à 7 vous allez voir ici

que dans local composants accueil

refonte on a le fameux bouton donc le

composant est en fait là maintenant vous

pouvez le prendre et le placer où vous

voulez et donc maintenant si vous

modifiez votre composant principal si

vous modifiez par exemple la couleur de

fond et massa va changer la couleur de

fond pour tous vos boutons il ya d

autres micro composantes vous allez

pouvoir utiliser par exemple imaginons

ici le texte cette taille de police 24

gotham cette hauteur de lille 32 le fait

que ça soit centré ici à 4% fayyad et

paramètres que vous n'allez pas vouloir

rajouter à chaque fois manuellement ce

que vous pouvez faire c'est ici vous

avez au texte principal vous cliquez ici

vous appelez sur plus vous allez pouvoir

créer un type de police que vous allez

pouvoir utiliser plusieurs fois ça va

rentrer en fait dans votre design

systems donc ici on va nommer tout

simplement hd est donc maintenant si

vous écrivez quelque chose

d'arbitraire comme ça vous avez juste à

sélectionner ici votre page 2 et vous

aurez votre âge de et vous pouvez faire

ça à l'infini avec tous les éléments ici

donc on va essayer de créer un leader un

peu comme celui à droite on va copier

coller ce titre ici

donc là vous voyez que on a mené on a le

texte qui se créé juste à droite on va

utiliser les grilles on va leur centre

et par rapport aux colonnes

voilà centre est ici ici je vais

sélectionner mon texte

je vais du cliquez ici mon composants et

donc si on a une forme une première

forme de ridder en fête est donc ici on

a une forme un peu classique de ce qu'on

trouve sur pas mal de sites web avec un

titre à paragraphe un bouton là encore

on peut choisir l'auto layout on qu'on

va faire on va sélectionner les trois

éléments à d'auto layout et vous voyez

ici qu'on peut gérer l'espacement entre

les différents éléments

on peut choisir de les aligner à droite

où les aligner du pouce vers le bas ici

on va les aligner de jeu quand vers le

bas on peut choisir de les aligner en

haut au milieu ici on va rester en haut

à gauche mais vous savez aussi que quand

on crée un site web on crée aussi le

site web pour les mobiles pour les

tables ici pour aller plus vite et pour

que ce soit à responsable c'est-à-dire

pour ça s'adapte pour les plus petits

écrans veut que quand on redit mentionne

ce groupe on veut que le texte et le

bouton bas se redimensionnent avec lui

ici va rien ne se passe en fait quand on

redit mentionne la largeur donc pour que

ça se redit jeunes avec la boxe on va

sélectionner ces trois éléments à

l'intérieur du groupe et on va cliquer

ici sur fight containers en cliquant ici

quand vous prenez le groupe et que vous

redimensionnée vous voyez que les

éléments à l'intérieur sur le

dimensionnement automatiquement ici on

veut pas trop que le bouton suivent le

conteneur donc on va le garder en oeuvre

continue

donc voilà maintenant si vous passez sur

mobile donc si je crée une frame

iphone 8 ici

et que je du blick

ce groupe et que je le redis mentionne

vous voyez que ça se fait

automatiquement peut-être revoir la

taille de certains titres ici

la taille de certains textes aussi vous

voyez ça vous que gagner un temps

précieux voilà je vais pas plus rentrer

dans les détails des différentes

fonctionnalités de figues masse pas

l'objectif ici je pourrai refaire

d'autres tuto un peu plus complexe qui

dure plus de 30 minutes plus d'une heure

vous pouvez me le demander en

commentaire si ça ou si ça vous

intéresse ici je voulais juste vous

donner les bases vraiment les éléments

de base pour vous puissiez comprendre

les fonctionnalités principales de figma

pour que vous puissiez vous lancer de

façon un peu indépendante dans le

logiciel il n'est pas très compliqué en

soi il suffit juste de maîtriser les

bases et de les utiliser entre elles

pour créer des maquettes pour créer des

vrais projets donc voilà si vous avez

des questions un peu plus précise les

éléments en commentaire je vous

répondrai ici on a vu les frais on a vu

un peu les groupes on a vu les textes on

a vu un peu de design systems de

composants layouts entré les différents

éléments etc on voit là j'estime que je

vous ai donné les bases principales pour

maîtriser l'outil voilà si vous voulez

que je fasse un tuto un peu plus

technique surprise m'a dit fais moi un

commentaire