Related Videos

• Cadres dans Figma

  Avant de commencer

  Qui peut utiliser cette fonctionnalité

  Toute personne de toutes les équipes ou tous les forfaits peut utiliser des cadres.

  Toute personne disposant d'un accès peut éditer à un fichier peut créer et modifier des cadres.

  Dans Figma, vous pouvez ajouter des calques directement dans le Canevas. Si vous réalisez un design pour un périphérique ou une taille d'écran spécifique, vous pouvez créer un conteneur pour vos designs. C'est ici que les cadres vont entrer en jeu.

  Si vous avez déjà utilisé des outils de design, vous avez l'habitude des plans de travail. Tout comme eux, les cadres vous permettent de choisir une zone du canevas dans laquelle vous pouvez créer vos designs.

  Contrairement aux plans de travail traditionnels, vous avez la possibilité d'imbriquer des cadres dans d'autres cadres, permettant ainsi de créer des conceptions plus complexes qui fonctionnent ensemble.

  Les cadres vous permettent également d'accéder à des fonctionnalités supplémentaires, telles que Grilles de mise en page, Disposition automatique, Contraintes, et Réalisation de prototypes.

  Créer des cadres

  Créez des cadres dans le canevas à l'aide de l'outil cadre. Il existe plusieurs façons de sélectionner l'outil cadre :

  • Utilisez les raccourcis clavier F ou A
  • Sélectionnez l' outil cadre dans la barre d'outils :

  Vous pouvez ensuite créer différentes tailles de cadre dans le canevas :

  • Cliquez sur le canevas pour créer un cadre par défaut avec les dimensions de 100 x 100.
  • Cliquez sur le canevas et faites-le glisser pour créer un cadre aux dimensions personnalisées.
  • Utilisez la liste déroulante de la barre latérale droite pour sélectionner un préréglage de cadre.
    1. Choisissez des préréglages pour les modèles de périphériques et de ressources les plus courants :
       • téléphone,
       • tablette,
       • bureau,
       • montre,
       • papier,
       • médias sociaux,
       • Communauté Figma.
    2. Cliquez sur la flèche pour développer la section et sélectionnez un préréglage dans la liste.

  Identifiez les cadres par le symbole dans le Panneau des calques.

  Astuce !  Vous pouvez également créer un cadre autour d'objets existants, qu'il s'agisse d'un seul calque ou d'une sélection de calques. Utilisez le raccourci clavier de sélection de cadre :

  • MacOS : ⌥ Option Commande ⌘ G
  • Windows : Ctrl + Alt + G

  Propriétés du cadre

  Quelques propriétés sont associées aux cadres. Les cadres prennent en charge les propriétés suivantes.

  • Rayon d'Angle : arrondir le coin d'un cadre pour créer des bords plus doux.
  • Couper le contenu : masquer tous les objets dans le cadre qui s'étendent au-delà des limites du cadre.
  • Grilles de mise en page : créer des lignes directrices pour vous aider à structurer vos designs.
  • Disposition automatique :  Créer des Cadres dynamiques qui répondent à leur contenu.
  • Remplir : appliquer un remplissage uni, un gradient, des Images (PNG, JPEG, GIF, TIFF et WEBP) à un cadre.
  • Contour : ajouter des contours à un cadre pour créer une bordure ou une ébauche.
  • Effets : ajouter une ombre ou des flous à un Cadre.

  Fonctionnalités supplémentaires

  Les cadres vous permettent d'accéder à des fonctionnalités supplémentaires dans Figma. Vous devez utiliser les Cadres pour accéder aux fonctions suivantes :

  • Grilles de mise en page : appliquer des grilles, des colonnes et/ou des lignes transparentes aux Cadres pour fournir une structure visuelle.
  • Contraintes : Définissez la façon dont les objets enfants réagissent lorsque vous redimensionnez un Cadre. Appliquez des Contraintes aux  objets  dans un Cadre.
  • Disposition automatique : ajouter la disposition automatique aux Cadres pour créer des dispositions dynamiques qui répondent à leur contenu.
  • Réaliser des prototypes : créer des prototypes interactifs qui se déplacent entre les Cadres de votre Canevas.

  Un Cadre est un objet  parent . C'est-à-dire qu'il peut contrôler ou influencer n'importe quel objet enfant  que vous y placez.

  En savoir plus sur les relations parent/enfant dans Figma →

  Ajuster les propriétés du cadre

  Auparavant, il était possible d'ajuster les propriétés des objets enfants lorsque vous aviez sélectionné le Cadre. Vous pouvez désormais ajuster les propriétés du cadre lui-même.

  • Sélectionnez un objet enfant à l'aide du raccourci clavier : Entrée ou Retour.
  • Appuyez sur la touche Tab pour sélectionner le frère/la sœur suivant(e).
  • Appuyez sur Maj + Tab pour sélectionner le frère/la sœur précédent(e).
  • Appuyez sur Maj + Entrée pour sélectionner le parent.

  Si vous souhaitez ajuster les propriétés de remplissage et de contour d'un cadre et de ses enfants, vous pouvez utiliser Sélection des couleurs pour visualiser ou régler les couleurs dans une sélection mixte.

  Imbriquer des cadres dans d'autres cadres

  Dans Figma, vous pouvez créer des cadres à l'intérieur d'autres cadres. Ce processus se nomme imbrication. Il vous permet de combiner des cadres avec différentes propriétés afin de construire des interfaces complexes,

  créant de nouvelles hiérarchies ou relations :

  • Cadres de premier niveau : tout cadre qui se trouve directement sur le canevas. Pour qu'un cadre soit un cadre de premier niveau, vous ne pouvez pas l'imbriquer dans un autre cadre, groupe ou objet.
  • Cadre imbriqué : tout cadre placé dans un autre cadre. Vous pouvez placer des cadres à l'intérieur de cadres de premier niveau ou dans d'autres cadres imbriqués. Les cadres imbriqués sont à la fois parents et enfants.
  • Enfant : tout objet qui se trouve dans un cadre.

  En savoir plus sur les relations parent, enfant, frère et sœur.

  Cadres de premier niveau

  Figma met en gras les cadres de premier niveau dans le Panneau des calques et affiche le nom des cadres de premier niveau sur le canevas :

  Cadres imbriqués

  Les cadres imbriqués sont des cadres que vous placez dans un autre cadre ou objet, en les faisant devenir un parent et un enfant. Vous pouvez placer des cadres dans :

  • Cadres de premier niveau
  • d'autres cadres imbriqués,
  • des groupes.

  Dans notre exemple ci-dessous, chacun de nos éléments se trouve dans son propre cadre. Il y a une barre d'état en haut et un menu de navigation en bas. Nous voyons également une carte qui inclut les informations de nos prochains billets.

  En utilisant l'un de nos préréglages d'appareil, il est possible de créer un cadre de premier niveau pour nos éléments. Nous pouvons ajouter nos éléments au cadre de premier niveau afin de créer un seul écran dans notre application mobile.

  

  Redimensionner les cadres

  Vous pouvez interagir avec les cadres comme n'importe quel autre objet du canevas, y compris modifier la taille ou l'échelle des cadres. Il existe plusieurs façons de modifier la taille d'un Cadre :

  Faire glisser le cadre

  Faites glisser pour redimensionner un cadre manuellement.

  1. Sélectionnez le cadre dans le canevas ou le Panneau des calques dans la barre latérale gauche.
  2. Cliquez sur la poignée sur l'un des coins et faites glisser pour redimensionner. Ou cliquez sur l'un des bords et faites-le glisser.

  Astuce ! Pour ignorer lesContraintes sur des objets enfants, maintenez la touche de modification enfoncée :

  • macOS : Commande ⌘
  • Windows : Ctrl

  Modifier le préréglage du cadre

  Sélectionnez un autre préréglage de cadre pour modifier la taille du cadre.

  1. Sélectionnez le cadre.
  2. Dans le Panneau Propriétés de la barre latérale droite, sélectionnez le champ cadre.
  3. Sélectionnez un préréglage dans la liste.
  4. Choisissez des préréglages pour les modèles de périphériques et de ressources les plus courants :
     • téléphone,
     • tablette,
     • bureau,
     • montre,
     • papier,
     • médias sociaux,
     • Communauté Figma.
  5. Figma met à jour les dimensions de votre cadre pour qu'elles correspondent au préréglage.

  Remarque : Si vous avez appliqué des Contraintes à n'importe quel objet enfant, Figma les redimensionnera pour les faire correspondre au nouveau préréglage de cadre. Dans le cas contraire, les objets à l'intérieur du cadre resteront aux dimensions et dans la position d'origine.

  Panneau Propriétés

  Mettez à jour la Largeur et la Hauteur du Cadre à l'aide du Panneau Propriétés de la barre latérale de droite.

  Saisissez un nouveau numéro dans les champs W et H ou passez le curseur sur l'icône pour effacer le champ. Faites glisser vers la gauche pour diminuer et vers la droite pour augmenter.

  Activez le bouton de lien situé à côté de la Largeur et de la Hauteur pour redimensionner la contrainte aux proportions actuelles.

  

  Astuce ! Vous pouvez utiliser les champs dimensions pour effectuer des calculs. Cela vous permet de mettre à l'échelle ou de redimensionner rapidement des objets.

  • % Pourcentage, p. ex. 50 % 
  • + Addition, p. ex. +100 
  • -  Soustraction, p. ex. -20 
  • *  Multiplication, p. ex. *4 
  • /  Division, p. ex. /8 

  Il n'est pas possible de  multiplier  une largeur ou une hauteur par un pourcentage </span, par exemple*50 % donnera une valeur de 50x l'original, et non 50 %.

  Ajuster la taille au contenu

  Vous pouvez redimensionner un Cadre pour qu'il rétrécisse ou grossisse pour s'ajuster à ses objets enfants. Cette opération va redessiner le Cadre autour des limites extérieures des objets qui y sont contenus.

  • Utilisez le raccourci clavier :
    • macOS: ⌥ Option Maj Commande ⌘ R
    • Windows :
  • Cliquez sur dans le coin supérieur droit du Panneau Propriétés
• Utilisation des Outils de Forme

  Les formes composent la majorité de vos calques dans n'importe quel design.

  Vous pouvez accéder à toutes les formes de base à partir du menu Outils de forme de la barre d'outils. Cliquez sur la flèche vers le bas à côté du Rectangle pour afficher vos options.

  Six Outils de forme sont à votre disposition :

  1. Outil Rectangle
  2. Outil Ligne
  3. Outil Flèche
  4. Outil Ellipse
  5. Outil Polygone
  6. Outil Étoile
  7. Foire aux questions

  Pour les designs nécessitant des formes uniques ou complexes, vous pouvez créer vos propres Réseaux de Vecteurs en utilisant l'outil Stylo inégalé de Figma.

  

  Astuces pour créer des formes

  • Maintenez la touche Maj enfoncée tout en faisant glisser pour créer des carrés, des cercles et des polygones parfaits.
  • Maintenez la touche Option enfoncée pour créer et redimensionner la forme à partir de son centre.
  • Maintenez les touches Maj et Option enfoncées pour faire les deux.

  Outil Rectangle

  Vous pouvez utiliser l'outil Rectangle pour créer des Rectangles et des Carrés.

  1. Sélectionnez l'outil Rectangle à partir des Outils de Forme, ou utilisez le raccourci clavier R
  2. Cliquez sur un point dans le canevas et tirez-le pour créer le Rectangle :

     

  3. Les dimensions des Rectangles sont affichées en bleu sous le bord inférieur :
  4. Une poignée sera présente dans chaque coin de la forme, vous permettant de redimensionner la forme comme vous le souhaitez.

  Outil Ligne

  L'outil Ligne vous permet de créer des lignes dans n'importe quelle direction. Les lignes sont un moyen efficace de diviser le contenu dans un design ou de simuler des bordures CSS.

  1. Sélectionnez l'OutilLigne dans les Outils de Forme ou utilisez le Raccourci Clavier L :

     

  2. Cliquez sur un point du canevas et faites-le glisser pour créer la Ligne :

     

  3. Une fois une Ligne créée, vous pouvez modifier son apparence dans la section Contour du Panneau Propriétés :

     

     1. Réglez la Couleur et l'Opacité du Contour à l'aide du Sélecteur de Couleurs.
     2. Mettez à jour l'Épaisseur pour modifier l'épaisseur de la Ligne et choisissez l'emplacement pour l'Alignement de l'épaisseur de la Ligne. Vous pouvez l'appliquer à l'Intérieur, à l'Extérieur ou au Centre de la Ligne.
     3. Les options Contour avancé vous permettent de personnaliser davantage la ligne, notamment en déterminant la Limite (l'apparence de chaque extrémité de la ligne) et Rejoindre (le comportement de la ligne lorsqu'elle est connectée à aux autres lignes), ainsi que lors de l'utilisation du paramètre Tirets pour créer une ligne sous forme de tirets.

  Outil Flèche

  L'Outil Flèche vous permet de tracer des flèches dans un sens ou à double sens.

  1. Sélectionnez l'Outil Flèche dans les Outils de Forme ou utilisez le Raccourci Clavier ⇧ + L :

     

  2. Cliquez sur un point du canevas et faites glisser pour créer la Flèche. Vous pouvez déplacer le curseur sur le canevas pour changer la direction.
  3. Comme l'Outil Ligne (ci-dessus), vous pouvez modifier les propriétés de Contour.

  Ajouter ou modifier une seule limite

  1. Double-cliquez sur la ligne pour entrer dans le Mode Modification de Vecteur
  2. Sélectionnez le point que vous souhaitez ajouter à la Limite. Vous devez vous assurer d'utiliser l'outil Déplacer V.
  3. Vous pouvez sélectionner plusieurs points dans une forme en cliquant et en faisant glisser ou en utilisant les raccourcis ci-dessous :
     • Windows : Alt
     • macOS : Maj
  4. Ouvrez le menu Contour avancé en cliquant sur les trois points dans les paramètres Contour :
  5. Sélectionnez la Limite que vous souhaitez utiliser dans le champ déroulant : 

  Outil Ellipse

  Vous pouvez utiliser l'outil Ellipse pour tracer des Ovales et des Cercles. Ils peuvent être utilisés tels quels, ou manipulés pour créer des formes personnalisées avec des courbes.

  1. Sélectionnez l'Outil Ellipse dans les Outils de Forme ou utilisez le Raccourci Clavier O :

     

  2. Cliquez sur un point du canevas et faites glisser pour créer l'Ellipse. Les dimensions de la forme s'affichent en bleu sous l'objet :

     

  3. Une boîte englobante bleue entoure l'ellipse, avec une poignée dans chaque coin, ce qui vous permet de redimensionner la forme que vous souhaitez

  Outil Polygone

  L'Outil Polygone vous permet de tracer une forme fermée composée d'un nombre quelconque de lignes droites.

  La forme par défaut de l'outil Polygone est un Triangle, mais vous pouvez ajouter des points supplémentaires à l'objet pour créer vos propres polygones personnalisés.

  1. Sélectionnez l'outil Polygone dans la liste Outils de Forme :

     

  2. Cliquez sur un point du canevas et faites glisser pour créer le Polygone. Les dimensions de la forme s'affichent en bleu sous l'objet.
  3. Une boîte englobante bleue entoure la forme, avec une poignée dans chaque coin, ce qui vous permet de redimensionner la forme que vous souhaitez
  4. Vous pouvez accéder au Mode Modification de Vecteur en double-cliquant sur le Polygone, ce qui vous permet d'ajouter des points supplémentaires au Polygone et de manipuler chaque point individuellement :
     

     

  5. Comme pour la forme Rectangle, vous pouvez également arrondir les coins d'un Polygone :
     1. Passez le curseur sur la poignée dans le coin jusqu'à ce que le symbole Rayon s'affiche : 
     2. Cliquez sur la poignée et faites-la glisser vers le centre de l'objet pour arrondir les coins.

  Polygones et Boîtes Englobantes

  Vous avez peut-être remarqué que lorsque nous avons dessiné notre Polygone, dans le cas présent un Triangle, la boîte englobante bleue autour de la forme s'étendait bien en dessous du bas de la forme.

  Cela permet à la boîte englobante de conserver une forme ou une taille cohérente, lorsque des points supplémentaires sont ajoutés au Polygone.
  
  Pour aligner la boîte englobante sur la véritable bordure de la forme, vous pouvez Aplatir la forme. Vous pouvez y accéder en cliquant avec le bouton droit de la souris sur la forme et en choisissant Aplatir, ou en utilisant le raccourci

  • Mac :   Commande E
  • Windows :   Ctrl + E

  Outil Étoile

  L'Outil Étoile crée des Polygones disposés en forme d'Étoile. Lorsque vous créez une Étoile, la valeur par défaut est une étoile à 5 branches avec 10 côtés.

  1. Sélectionnez l'Outil Étoile dans la liste des Outils de Forme :

     

  2. Cliquez et faites glisser sur un point du canevas et faites glisser pour créer l'Étoile :

     

  3. Vous pouvez désormais utiliser trois poignées pour manipuler l'Étoile :
     • Le Nombre détermine le nombre de points de l'Étoile (min. : 3, max. : 60) : 
     • Le Ratio détermine la distance entre les points intérieurs de l'Étoile depuis le centre. Cela s'exprime sous forme de pourcentage du diamètre total de l'Étoile.
     • Le Rayon vous permet d'arrondir le point, de la même manière que le Rayon d'Angle fonctionne sur un Rectangle.

  Astuce ! Lorsque vous entrez dans le Mode Modification de Vecteur, vous pouvez régler le Rayon de chaque point individuellement.

  Foire aux questions

  Nous avons rassemblé quelques réponses aux questions qui nous sont le plus fréquemment posées concernant la forme.

  Réglage du Rayon d'Angle

  En plus des poignées habituelles, les rectangles ont également quatre poignées en forme de cercle à l'intérieur de chaque coin. Ces poignées vous permettent d'ajuster le coin afin d'arrondir les angles du rectangle. Pour en savoir plus, consultez notre article Ajuster le rayon d'angle et lissage article.

  Création de lignes sous forme de tirets

  1. Dessinez ou sélectionnez la ligne pour créer des tirets.
  2. Dans la section Contour du Panneau Propriétés, cliquez sur les trois points pour ouvrir les paramètres Contour avancé :
  3. Vous pouvez spécifier à la fois la longueur des Tirets, ainsi que la distance entre eux (Intervalle).
  4. Saisissez cette valeur dans le champ Tirets au format suivant : Tiret, Intervalle ; par exemple, pour créer un tiret d'une longueur de 5 px et d'un intervalle de 2px, vous devez saisir 5,2.

  Création de flèches doubles

  Pour réaliser une flèche double :

  1. Sélectionnez la flèche dans le canevas.
  2. Double-cliquez sur la flèche pour entrer dans le Mode Modification de Vecteur.
  3. Sélectionnez le point situé à l'autre extrémité de la Flèche.
  4. Dans l'option Contour Avancé, sélectionnez le type de Flèche que vous souhaitez utiliser, dans le champ Limite.

  Création de Demi-cercles

  Pour transformer un Cercle en Demi-cercle :

  1. Utilisez le raccourci O pour sélectionner l'outil Ellipse
  2. Maintenez la touche Maj enfoncée tout en cliquant et en faisant glisser pour créer un Cercle parfait.
  3. Double-cliquez à l'intérieur de la forme pour entrer dans le Mode Modification de Vecteur.
  4. Sélectionnez l'un des quatre points principaux, puis Supprimer sur votre clavier.
  5. Pour fermer le demi-cercle, cliquez sur la touche P pour sélectionner l'outil Stylo.
  6. Cliquez sur chaque point ouvert dans le demi-cercle pour fermer la forme.

  Pour en savoir plus, consultez Modification de Formes et d'Objets.

  Utilisation de l'outil Arc

  Vous pouvez également utiliser l'outil Ellipse pour créer des formes supplémentaires, telles que des diagrammes circulaires, des anneaux et des anneaux brisés :

  Pour en savoir plus, consultez l'article Utilisation de l'outil Arc .