Design EditorDocsUtiliser l’éditeur
Canevas et outils
Le canevas occupe toute la fenêtre et les panneaux flottent par-dessus. Chaque outil a un raccourci d’une seule touche.
1Outils
| Outil | Rôle |
|---|---|
Sélection V | Sélectionner, déplacer et redimensionner les calques. |
Cadre F | Dessiner un cadre. Un cadre de premier niveau est un plan de travail, un écran ou une diapositive. |
Rectangle R | Les outils de forme. Leur menu propose aussi Polygone, Étoile, Ligne, Icône et Navigateur. |
Ellipse O | Cercles et ellipses, avec arcs et anneaux. |
Polygone Y, Ligne L | Polygones réguliers et lignes droites. |
Plume P | Tracés à plusieurs points d’ancrage. Entrée ou Échap termine le tracé. |
Crayon Shift+P | Traits à main levée, lissés en courbes. |
Texte T | Cliquez pour une zone de texte extensible, faites glisser pour une largeur fixe. |
Note N | Cartes de note, de contexte et de prompt, pour vous ou pour un agent. |
| Image | Placer un fichier PNG, JPEG, GIF, WebP ou SVG. |
Main H | Déplacer la vue du canevas. Maintenir Espace a le même effet. |
2Formes spéciales
- Étoile : un polygone avec un rayon intérieur. Le panneau règle le nombre de branches et le rayon intérieur.
- Arcs d’ellipse : Début, Balayage et Intérieur, dans le panneau, transforment une ellipse en part de camembert, en arc ou en anneau.
- Icône : à choisir parmi Lucide, Feather, Simple Icons (marques), Material Symbols en version contour, arrondie et anguleuse, et Phosphor.
- Lissage du crayon : Précis, Équilibré ou Lisse, à régler dans Paramètres, Système. Le style du curseur crayon s’y trouve aussi.
3Pages web en direct sur le canevas
La forme Navigateur affiche une vraie page web sur un appareil Bureau, Tablette ou Téléphone, avec une URL, un zoom et un défilement. Elle utilise le Chrome, Chromium, Edge ou Brave déjà installé sur votre ordinateur ; définissez DE_BROWSER_PATH pour en choisir un autre.
Les pages d’un fichier que vous ouvrez restent en pause jusqu’à ce que vous cliquiez sur Charger les pages : ouvrir un fichier ne visite jamais un site de lui-même.
4Notes et scripts
Les cartes de note, de contexte et de prompt n’existent que sur le canevas. Elles sont exclues de tous les exports : vous pouvez donc laisser des instructions pour un agent à côté du design.
Un nœud script est un cadre dessiné en JavaScript. Ses paramètres @input apparaissent comme des champs dans la section Script du panneau.
6Aligner, magnétiser et combiner
Quand vous faites glisser un calque, des repères intelligents apparaissent et il s’aimante aux bords et aux centres des calques voisins.
Alignez à gauche, au centre, à droite, en haut, au milieu ou en bas depuis le panneau. Répartissez horizontalement ou verticalement dès que trois calques ou plus sont sélectionnés.
Les opérations booléennes combinent les formes : Union Cmd+Alt+U, Soustraire Cmd+Alt+S, Intersection Cmd+Alt+I, Exclusion Cmd+Alt+X. Elles figurent aussi dans le menu du calque. Les cadres qui contiennent d’autres calques ne peuvent pas être combinés.
7Copier et coller
Copier, couper et coller fonctionnent sur les calques. Des calques copiés dans Figma et collés ici arrivent sous forme de calques modifiables. Du HTML collé depuis n’importe où devient lui aussi des calques.