Pen2Figma
Importez vos maquettes pen.dev dans Figma en conservant l’auto layout, les composants, les variables et les thèmes.
Télécharger le plugin
Pen2Figma convertit les fichiers .pen en calques Figma natifs et modifiables. Ses règles ont été calibrées sur le moteur de rendu de Pen : les détails sujets aux erreurs (alignement des contours, géométrie des polygones, angles des dégradés, sens des arcs, résolution des thèmes, interlettrage) sont tous traités en fonction des résultats réels du rendu de Pen. Gratuit, sans compte et sans limite.
Fonctionnalités
- Auto layout
- Direction, espacement, marges internes, alignement, tailles hug, fill et fixe, et enfants en position absolue.
- Composants et instances
- Les composants réutilisables de Pen deviennent des composants Figma ; les instances gardent leurs remplacements, y compris imbriqués, et les changements d’icône deviennent des échanges d’instance.
- Variables et modes de thème
- Chaque axe de thème (clair, sombre, etc.) produit une collection de variables avec des modes ; les alias sont conservés et les cadres gardent leur thème.
- Bibliothèques
- Déposez aussi les fichiers .pen de bibliothèque utilisés par votre maquette : ils sont liés automatiquement.
- Styles
- Couleurs unies, dégradés linéaires, radiaux et angulaires, remplissages d’image, contours par côté, ombres et flous, coins arrondis, arcs et vecteurs.
- Texte
- Les polices et graisses sont associées à celles installées ; le texte CJK se replie sur PingFang SC ou Noto Sans SC, comme dans Pen.
- Icônes
- lucide, Material Symbols, phosphor et feather, dans les mêmes versions que celles fournies avec Pen.
Installation
Pen2Figma n’est pas encore sur Figma Community : il faut l’importer à la main, et uniquement depuis l’application de bureau Figma.
- Téléchargez l’archive ci-dessus et décompressez-la.
- Dans l’application de bureau Figma, ouvrez le menu et choisissez Plugins → Development → Import plugin from manifest…
- Sélectionnez le fichier
manifest.jsondécompressé. Pen2Figma apparaît ensuite dans Plugins → Development.
Mode d’emploi
- Lancez Pen2Figma et glissez un fichier
.pen(avec les fichiers.pende bibliothèque et les images qu’il utilise) sur le canevas Figma, ou choisissez les fichiers dans le plugin. - Sélectionnez les cadres à importer et lancez l’import.
- Tout arrive sur la page courante, et un récapitulatif liste les points à vérifier.
Confidentialité
La conversion se fait entièrement dans le plugin et vos fichiers ne sont jamais envoyés. Les seules requêtes réseau récupèrent les icônes et les images référencées par votre maquette.
Limites connues
Les shaders, les dégradés de maillage, les nœuds de script et de page web n’ont pas d’équivalent dans Figma et sont importés comme des espaces réservés clairement signalés. Sur les offres Figma limitées à un mode par collection, les autres thèmes reçoivent des valeurs fixes.
Pen2Figma est un outil indépendant de UISurf, sans lien ni approbation de pen.dev ou de Figma.
Notes de version
- Première version publique.
- Auto layout, composants et instances avec remplacements imbriqués, variables avec modes de thème, bibliothèques, dégradés, images, effets et icônes.
- Polices de repli pour le CJK, 10 langues d’interface et une interface claire et sombre qui suit Figma.