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.
- 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
- Cliquez sur la flèche pour développer la section et sélectionnez un préréglage dans la liste.
- Choisissez des préréglages pour les modèles de périphériques et de ressources les plus courants :
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 :
- Mac : ⌥ Option Commande ⌘ G
- Windows : Ctrl + Alt + G
Astuce : vous pouvez transmettre des cadres à développer sans réorganiser votre fichier. Créez une section pour votre cadre ou convertissez-le en section. Ensuite, marquez la section comme Ready for dev (Prêt pour le dév.)→.
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.
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 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.
- Sélectionnez le cadre dans le plan de travail ou le panneau des calques dans la barre latérale gauche.
- 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 les contraintes sur des objets enfants, maintiens la touche de modification enfoncée :
- Mac : 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.
- Sélectionnez le cadre.
- Dans le Panneau Propriétés de la barre latérale droite, sélectionnez le champ cadre.
- Sélectionnez un préréglage dans la liste.
- 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
- Figma met à jour les dimensions de votre cadre pour qu'elles correspondent au préréglage.
Remarque : Si vous avez appliqué les contraintes à des objets enfants, Figma les redimensionnera pour qu'ils correspondent au nouveau préréglage de cadre. Dans le cas contraire, les objets situés à l'intérieur du cadre conserveront leurs dimensions et leur position d'origine.
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.
Conseil : vous pouvez utiliser les champs de dimension pour effectuer des calculs. Cela vous permet de mettre rapidement à l’échelle ou de redimensionner des objets.
- % Pourcentage, par exemple 50 %
- + Ajouter, par exemple +100
- - Soustraire, par exemple -20
- * Multiplier, comme *4
- / Division, par exemple /8
Il n’est pas possible de multiplier une largeur ou une hauteur par un pourcentage, par exemple *50 % donnera une valeur de 50x l’original, et non 50 %.
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