Créer une frame
💡 Sujet
Les cadres (frames) sont les éléments fondamentaux de Figma. Contrairement aux simples groupes, les frames permettent d'utiliser des fonctionnalités avancées comme les Constraints, l'Auto Layout, et de définir des zones de défilement. Elles servent de conteneurs pour vos designs.
⚙️ La méthode
1. Utiliser l'outil Frame
- Cliquez sur l'icône Frame (en forme de croisillon
#) dans la barre d'outils. - Ou utilisez les raccourcis clavier
FouA. - Une fois l'outil actif, vous pouvez :
- Cliquer sur le canevas pour créer une frame par défaut (100x100).
- Cliquer et glisser pour dessiner une frame sur mesure.
- Choisir un Preset (iPhone, Desktop, etc.) dans le panneau de droite.
2. Transformer une sélection en Frame
Si vous avez déjà des objets sur votre canevas, vous pouvez les encapsuler directement dans une frame :
- Sélectionnez vos objets.
- Faites un clic droit et choisissez "Frame selection".
- Raccourci clavier :
- Mac :
⌥ Option + ⌘ Command + G - Windows :
Ctrl + Alt + G
- Mac :
🔄 Frame vs Groupe
| Fonctionnalité | Groupe | Frame |
|---|---|---|
| Redimensionnement (Constraints) | ❌ | ✅ |
| Masquer le contenu (Clip Content) | ❌ | ✅ |
| Grilles de mise en page (Layout Grids) | ❌ | ✅ |
| Auto Layout | ❌ | ✅ |
🧩 Résumé
- ⌨️ Raccourci :
FouApour l'outil,Ctrl + Alt + Gpour encadrer une sélection. - 📱 Presets : Utilisez les tailles prédéfinies dans la barre latérale droite.
- 💡 Préférez toujours les frames aux groupes pour bénéficier des contraintes et de l'Auto Layout.
- 📦 Une frame peut contenir d'autres frames (nesting).