Cadres dans Figma Design

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 sur le plan de travail. Si vous concevez un produit pour un appareil ou une taille d'écran spécifique, vous pouvez créer un conteneur pour vos designs. C'est là que les cadres entrent 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 tableaux traditionnels, vous pouvez également imbriquer des cadres dans d’autres cadres. Cela permet de créer des modèles plus complexes qui fonctionnent ensemble.

Les cadres vous permettent également d'accéder à des fonctionnalités supplémentaires, telles que les grilles de mise en page, la disposition automatique, les contraintes et la 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 frame 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,
     • Présentation
     • Regarder
     • papier,
     • médias sociaux,
     • Communauté Figma
     • Archives
  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.

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éez des cadres dynamiques qui répondent à leur contenu.
• Remplir: Appliquez un remplissage uni, un gradient, des images (PNG, JPEG, GIF, TIFF et WEBP) à un cadre.
• Contour : Ajoutez des contours à un cadre pour créer une bordure ou un contour.
• 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 devrez utiliser des cadres pour utiliser les caractéristiques ou fonctions suivantes :

• Grilles de mise en page : Appliquez 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. Appliquer des contraintes à objets dans un cadre.
• Disposition automatique : Ajoutez la disposition automatique aux Cadres pour créer des dispositions dynamiques qui répondent à leur contenu.
• Création de prototypes : Créez des prototypes interactifs qui se déplacent entre les cadres de votre canevas.

Un cadre est un mère objet. Cela signifie qu’il peut contrôler ou influencer tous les objetsenfants que vous placez à l’intérieur.

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 sélectionniez le cadre. Vous pouvez maintenant 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.

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 niveau supérieur : Tout cadre situé directement sur le canevas. Pour qu’un cadre soit un cadre de niveau supérieur, il ne doit pas être imbriqué dans un autre cadre, groupe ou objet.
• Cadre imbriqué : tout cadre placé dans un autre cadre. Vous pouvez placer des cadres dans des cadres de niveau supérieur ou dans d’autres cadres imbriqués. Les cadres imbriqués sont à la fois un parent et un enfant.
• Enfant : tout objet qui se trouve dans un cadre.

Apprenez-en davantage sur les relations entre parents, frères, sœurs et enfants →

Cadres de premier niveau

Figma met en gras les cadres de niveau supérieur dans le panneau des calques et affiche le nom de tous les cadres de niveau supérieur sur le plan de travail.

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 plan de travail 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.

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,
   • Présentation
   • Regarder
   • papier,
   • médias sociaux,
   • Communauté Figma
   • Archives
5. Figma met à jour les dimensions de votre cadre pour qu'elles correspondent au préréglage.

Panneau Propriétés

Mettez à jour la largeur et la hauteur du cadre à l'aide 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.

Ajuster la taille au contenu

Vous pouvez redimensionner un cadre de manière à ce qu'il se rétrécisse ou s'agrandisse pour s'adapter à ses objets enfants. Cette opération redessine le cadre autour des limites extérieures des objets qu'il contient.

• Utiliser le raccourci clavier :
  • Mac : ⌥ Option Maj Commande ⌘ R
  • Windows : Alt Shift Control R
• Cliquez sur dans la section Layout (Mise en page) de la barre latérale de droite

Dégrouper un cadre

Pour dissocier un cadre, sélectionnez-le et appuyez sur :

• Mac : Commande ⌘MajG ou Commande ⌘Suppr
• Windows : CtrlMajG ou CtrlRetour