Comment créer un cadre dans Figma

Apprenez à créer un cadre dans Figma pour organiser vos designs et mises en page d’interface utilisateur. Un guide pour débutants sur l’utilisation de l’outil de cadre pour une meilleure structure et une meilleure adaptabilité.

Créez de superbes vidéos produit et des documents avec l’IA

Ce tutoriel a été créé avec Trupeer en moins de 5 minutes

Créez gratuitement

Étapes détaillées :

1. Sélectionnez l’outil Cadre : cliquez sur l’icône de l’outil Cadre dans la barre d’outils ou appuyez sur la touche « F ».
2. Choisissez une méthode de création : cliquer et faire glisser : cliquez et faites glisser sur le canevas pour créer un cadre avec des dimensions personnalisées.
Taille d’appareil prédéfinie : sélectionnez une taille de cadre prédéfinie dans le panneau des propriétés à droite.
Sélection du cadre : sélectionnez des éléments existants et convertissez-les en cadre.
3. Créez un cadre autour d’éléments existants (sélection du cadre) : sélectionnez les éléments souhaités, puis appuyez sur Ctrl + Alt + G (Win) ou ⌘ + Opt + G (Mac) pour créer un cadre contenant ces éléments.
4. Ajustez les propriétés du cadre : une fois créé, vous pouvez modifier les propriétés du cadre (taille, couleur, etc.) dans le panneau de droite.

Guide étape par étape : comment créer un cadre dans Figma

Étape 1

Cliquez sur l’option « Cadres » pour lancer le processus de création du cadre.

Click on the "Frames" option to initiate the frame creation process.

Étape 2

Après avoir sélectionné l’option « Cadres », appuyez n’importe où sur le modèle Figma à l’endroit où vous souhaitez placer votre nouveau cadre.

After selecting the "Frames" option, tap anywhere on the Figma template where you want to place your new frame.

Étape 3

Une fois que vous avez cliqué, le cadre apparaîtra sur le modèle. Vous pourrez ensuite ajuster la taille et les dimensions du cadre selon vos besoins spécifiques.

Once you've clicked, the frame will appear on the template. You can then adjust the size and dimensions of the frame according to your specific requirements.

Conseils de pro pour créer des cadres dans Figma

Utiliser le raccourci de l’outil Cadre
Appuyez sur F au clavier pour activer l’outil Cadre. Cliquez ensuite et faites glisser sur le canevas pour dessiner un cadre. C’est la méthode la plus rapide et la plus couramment utilisée pour créer des cadres.
Créer un cadre à partir de la barre d’outils
Cliquez sur l’icône de l’outil Cadre dans le coin supérieur gauche de la barre d’outils (elle ressemble à un dièse ou à un rectangle). Sélectionnez ensuite une taille de cadre prédéfinie (comme iPhone, Desktop ou Tablet) dans le panneau de droite, ou dessinez-en un manuellement sur le canevas.
Convertir des éléments existants en cadre
Sélectionnez les éléments que vous souhaitez regrouper, puis faites un clic droit et choisissez « Créer un cadre à partir de la sélection » dans le menu contextuel. Cela place les éléments sélectionnés dans un nouveau cadre, ce qui est utile pour organiser votre conception.
Utiliser la disposition automatique dans les cadres
Après avoir créé un cadre, activez la disposition automatique pour le rendre adaptatif. Cela est utile lors de la conception de boutons, de cartes ou de sections qui nécessitent un espacement et un alignement cohérents.
Imbriquer des cadres pour une meilleure structure
Vous pouvez placer un cadre à l’intérieur d’un autre. Les cadres imbriqués sont idéaux pour organiser des conceptions d’interface complexes et des composants comme les fenêtres modales, les cartes et les barres de navigation.

Pièges courants et comment les éviter

Confondre les cadres avec les groupes
Les groupes ne font que regrouper des éléments, tandis que les cadres peuvent contenir des règles de mise en page et des contraintes. Utilisez des cadres lorsque vous avez besoin de structure, d’alignement ou de réactivité.
Ne pas définir de contraintes
Lors de la conception de composants responsives, oublier de définir des contraintes à l’intérieur d’un cadre peut entraîner un comportement inattendu des éléments lors du redimensionnement. Vérifiez toujours les contraintes dans le panneau de droite.
Abuser des cadres
Utiliser trop de cadres inutiles peut encombrer votre panneau des calques et rendre la modification difficile. Utilisez les cadres de manière stratégique, uniquement lorsqu’un contrôle de la mise en page est nécessaire.
Imbrication incorrecte
Évitez de placer accidentellement des cadres dans les mauvais cadres parents. Cela peut casser la hiérarchie de votre mise en page. Utilisez le panneau des calques pour garder une trace de la structure.
Omettre de nommer les éléments
Ne pas nommer vos cadres rend la collaboration confuse. Nommez toujours clairement vos cadres (comme « Navbar », « Footer » ou « Écran iPhone 14 ») pour garder les choses organisées.

FAQ courantes sur la création de cadres dans Figma

Quelle est la différence entre un cadre et un plan de travail ?
Dans Figma, un cadre fonctionne comme un plan de travail dans d’autres outils, mais avec davantage de fonctionnalités de mise en page et de responsivité. Les cadres peuvent servir de conteneurs avec des contraintes et la disposition automatique.
Puis-je redimensionner un cadre après l’avoir créé ?
Oui. Sélectionnez le cadre et faites glisser ses bords ou saisissez des dimensions exactes dans le panneau des propriétés à droite.
Les cadres peuvent-ils être exportés ?
Oui. Les cadres peuvent être exportés en PNG, JPG, SVG ou PDF. Sélectionnez le cadre et utilisez la section d’exportation dans le panneau des propriétés.
Existe-t-il des tailles de cadre prédéfinies dans Figma ?
Oui. Lorsque vous activez l’outil Cadre, vous verrez une liste de préréglages à droite — comme des écrans de téléphone, des tailles d’ordinateur de bureau, des tablettes et des dimensions pour les réseaux sociaux.
Puis-je créer des cadres à l’intérieur de composants ?
Absolument. Les cadres peuvent faire partie de composants ou d’instances, ce qui vous permet de structurer et de réutiliser efficacement les éléments de conception.
Comment enregistrer l’écran sur Mac ?
Pour enregistrer l’écran sur un Mac, vous pouvez utiliser Trupeer AI. Il vous permet de capturer l’écran entier et offre des capacités d’IA telles que l’ajout d’avatars IA, l’ajout de voix off, ainsi que le zoom avant et arrière dans la vidéo. Grâce à la fonctionnalité de traduction vidéo par IA de trupeer, vous pouvez traduire la vidéo dans plus de 30 langues.
Comment ajouter un avatar IA à un enregistrement d’écran ?
Pour ajouter un avatar IA à un enregistrement d’écran, vous devrez utiliser un outil d’enregistrement d’écran IA. Trupeer AI est un outil d’enregistrement d’écran IA qui vous aide à créer des vidéos avec plusieurs avatars, et vous aide également à créer votre propre avatar pour la vidéo.
Comment enregistrer l’écran sur Windows ?
Pour enregistrer l’écran sur Windows, vous pouvez utiliser la barre de jeu intégrée (Windows + G) ou un outil IA avancé comme Trupeer AI pour des fonctionnalités plus avancées telles que des avatars IA, la voix off, la traduction, etc.
Comment ajouter une voix off à une vidéo ?
Pour ajouter une voix off aux vidéos, téléchargez l’extension Chrome Trupeer AI. Une fois inscrit, téléchargez votre vidéo avec voix, choisissez la voix off souhaitée dans Trupeer et exportez votre vidéo modifiée.
Comment zoomer sur un enregistrement d’écran ?
Pour zoomer pendant un enregistrement d’écran, utilisez les effets de zoom dans Trupeer AI, qui vous permettent de zoomer avant et arrière à des moments précis, renforçant ainsi l’impact visuel de votre contenu vidéo.