44 lines
2.1 KiB
Markdown
44 lines
2.1 KiB
Markdown
# xd2fig
|
|
|
|
Convertisseur Adobe XD (`.xd`) → Figma (`.fig`). Le fichier produit s'importe dans Figma par glisser-déposer dans le navigateur de fichiers.
|
|
|
|
## Utilisation
|
|
|
|
```sh
|
|
npm install
|
|
node src/cli.js maquette.xd [sortie.fig]
|
|
```
|
|
|
|
Le rapport affiche les polices à installer et les éléments qui n'ont pas pu être reproduits à l'identique.
|
|
|
|
## Ce qui est converti
|
|
|
|
- Artboards (frames), groupes, masques, éléments hors artboard
|
|
- Rectangles (coins arrondis), ellipses, lignes, chemins et formes composées (vecteurs éditables)
|
|
- Textes ponctuels, à hauteur auto et à zone, avec styles mixtes, interligne, alignement, casse, soulignement
|
|
- Remplissages unis, dégradés linéaires et radiaux, images (recadrage, symétrie), contours
|
|
- Ombres portées et internes, flou de calque et d'arrière-plan
|
|
- Contraintes responsive, opacité, modes de fusion
|
|
- Instances de composants (contenu résolu depuis les maîtres, surcharges comprises) — converties en groupes
|
|
|
|
## Limites connues
|
|
|
|
- Les composants XD deviennent des groupes, pas des composants Figma
|
|
- La luminosité du flou d'arrière-plan n'est pas reproduite
|
|
- Grilles et repères des artboards non transférés
|
|
- Les images de plus de 4096 px sont réduites (limite de Figma)
|
|
|
|
## Fonctionnement
|
|
|
|
- `src/xd.js` : lecture du `.xd` (ZIP : manifest, `graphicContent.agc` par artboard, ressources)
|
|
- `src/convert.js` : arbre XD → arbre intermédiaire (transformations, peintures, textes, effets)
|
|
- `src/build.js` : arbre intermédiaire → nœuds Figma (géométrie, vector networks, images)
|
|
- `src/figfile.js` : lecture/écriture du binaire `canvas.fig` (`fig-kiwi` : schéma kiwi + données compressées)
|
|
- `template/canvas.fig` : schéma kiwi de Figma (version 106), sans contenu. Si Figma change de format, le remplacer par le `canvas.fig` d'un fichier récent (Fichier → Enregistrer une copie locale), vidé avec `writeCanvas`.
|
|
|
|
## Outils de développement
|
|
|
|
- `tools/render.js fichier.fig dossier/` : aperçu SVG d'un `.fig` généré, pour comparer sans Figma
|
|
- `tools/inspect-fig.js canvas.fig dossier/` : dump du schéma et des nœuds d'un `.fig`
|
|
- `tools/test-fig.js` : génère des `.fig` de test minimaux
|