Design EditorDocsImport et export
Importer
Importez des fichiers Figma, des fichiers pen.dev, du SVG, des pages web et des captures d’écran sous forme de calques modifiables.
1Figma
- Dans Figma, choisissez File, Save local copy pour obtenir un fichier
.fig. - Ouvrez-le avec Fichier, Importer, Figma (
Cmd+Shift+F), la carte de l’Accueil, un double-clic, ou en le déposant sur la fenêtre. - Choisissez les pages voulues, ou Importer toutes les pages.
- Choisissez Conserver la mise en page Figma pour garder les positions telles quelles, ou Mise en page automatique Design Editor pour reconstruire les empilements.
Tout ce qui n’a pas pu être repris exactement est signalé par un avertissement. Copier des calques dans Figma et les coller ici fonctionne aussi.
2pen.dev
Un fichier .pen s’ouvre comme un nouveau document sans titre ; l’original n’est jamais réécrit. Les shaders, scripts, notes et nœuds navigateur sont conservés.
3SVG et images
L’outil Image place des fichiers PNG, JPEG, GIF, WebP et SVG ; le SVG devient des calques vectoriels modifiables. Les images matricielles peuvent aussi être déposées directement sur le canevas.
4HTML
Fichier, Importer, HTML (Cmd+Shift+H) accepte un fichier .html ou .htm, ou un .zip avec ses styles et ses images. Il respecte la cascade CSS, les variables, les media queries et la grille, et liste ce qu’il a dû approximer.
de import:html https://example.com --viewport-height 9005Recréer une capture d’écran
La carte de capture d’écran de l’Accueil envoie un PNG ou un JPEG à l’agent, qui le reconstruit en design modifiable.
6Extension Chrome
L’extension fournie dans le dépôt envoie la page que vous consultez vers l’éditeur ouvert. Elle peut capturer la page entière, sélectionner un seul élément, extraire un design.md ou télécharger un fichier .de.
Elle n’est pas encore sur le Chrome Web Store. Compilez-la depuis packages/de-chrome-extension et chargez-la non empaquetée dans Chrome 110 ou plus récent. Elle ne communique qu’avec l’éditeur sur votre propre ordinateur.