openpencil/packages/docs/fr/guide/features.md

Fonctionnalités

Pourquoi OpenPencil

Les outils de design sont un problème de chaîne d'approvisionnement. Quand votre outil est propriétaire, l'éditeur contrôle ce qui est possible — il peut casser votre automatisation du jour au lendemain. OpenPencil est une alternative open-source : licence MIT, compatible Figma, entièrement local et programmable.

Import & export de fichiers .fig Figma

Ouvrez et enregistrez les fichiers natifs Figma directement. L'import décode le schéma Kiwi complet à 194 définitions incluant les messages NodeChange avec ~390 champs. L'export encode le graphe de scène en binaire Kiwi avec compression Zstd et génération de miniature. Enregistrer (⌘S) et Enregistrer sous (⇧⌘S) utilisent les dialogues natifs de l'OS sur l'app bureau.

Copier-coller avec Figma

Sélectionnez des nœuds dans Figma, ⌘C, passez à OpenPencil, ⌘V — ils apparaissent avec remplissages, contours, auto-layout, texte, rayons de coins, effets et réseaux vectoriels préservés. Fonctionne aussi dans l'autre sens.

Le collage gère les scénarios complexes : les chemins vectoriels sont redimensionnés depuis la normalizedSize de Figma vers les limites réelles du nœud, les enfants d'instance sont peuplés depuis le symbolData de leur composant, les ensembles de composants sont détectés et les symbolOverrides sont appliqués. Les polices sont chargées automatiquement.

Réseaux vectoriels

L'outil plume utilise le modèle de réseau vectoriel de Figma — pas de chemins simples. Clic pour les points d'angle, clic+glisser pour les courbes de Bézier. Chemins ouverts et fermés supportés.

Outils de forme

La barre d'outils fournit tous les outils de forme de base de Figma : Rectangle (R), Ellipse (O), Ligne (L), Polygone et Étoile. Toutes les formes supportent remplissage, contour, surbrillance au survol et contour de sélection.

Auto-Layout

Yoga WASM fournit le layout CSS flexbox. Les frames supportent : direction, gap, padding, justify, align et dimensionnement des enfants. Shift+A active/désactive l'auto-layout.

Édition de texte en ligne

Édition de texte native sur le canevas. Double-clic sur un nœud texte pour entrer en mode édition. Sélecteur de polices avec défilement virtuel, filtre de recherche et aperçu CSS. Dans Tauri, les polices système sont énumérées via le crate Rust font-kit.

Formatage de texte riche

Formatage par caractère : ⌘B gras, ⌘I italique, ⌘U souligné, ou boutons B/I/U/S. Implémenté via un modèle StyleRun. Préservé lors de l'import/export .fig.

Annuler/Rétablir

Toute opération est annulable. Patron de commande inverse. ⌘Z annule, ⇧⌘Z rétablit.

Guides d'alignement

Accrochage aux bords et centres avec lignes guides rouges. Conscient de la rotation.

Règles du canevas

Règles en haut et à gauche montrant les échelles de coordonnées avec badges de coordonnées lors de la sélection.

Sélecteur de couleur et types de remplissage

Sélection HSV avec curseur de teinte, curseur alpha, entrée hex et contrôle d'opacité. Types : Solide, Dégradé (Linéaire, Radial, Angulaire, Diamant) et Image.

Panneau des calques

Vue en arbre de la hiérarchie du document avec le composant Reka UI Tree. Panneaux redimensionnables.

Panneau de propriétés

Interface à onglets Design | Code | IA. L'onglet Design montre des sections contextuelles : Apparence, Remplissage, Contour, Effets, Typographie, Layout, Position, Export et Page.

Grouper/Dégrouper

⌘G groupe. ⇧⌘G dégroupe. Les nœuds sont triés par position visuelle.

Sections

Les sections (S) sont des conteneurs organisationnels de niveau supérieur sur le canevas avec des pilules de titre et inversion automatique de la couleur du texte.

Documents multi-pages

Les documents supportent plusieurs pages. Chaque page maintient un état de viewport indépendant.

Surbrillance au survol

Les nœuds se mettent en surbrillance avec un contour qui suit la géométrie réelle.

Rendu avancé (Tier 1)

Le renderer CanvasKit supporte les fonctionnalités visuelles Tier 1 complètes : dégradés, remplissages d'images, effets, propriétés de contour, données d'arc, culling de viewport, réutilisation de Paint et coalescence RAF.

Composants et instances

Composants réutilisables (⌥⌘K), ensembles (⇧⌘K), instances via menu contextuel, détacher (⌥⌘B). Sync en direct et support des surcharges. Étiquettes violettes avec icône diamant.

Variables

Jetons de design avec collections et modes. Dialogue TanStack Table. Supporte COLOR avec UI complète, FLOAT/STRING/BOOLEAN définis. Toutes les opérations sont annulables.

Export d'images

PNG, JPG, WEBP avec échelle 0,5×–4×, aperçu en direct et ⇧⌘E.

Menu contextuel

Clic droit pour : Presse-papiers, Ordre Z, Groupement, Composants (items violets), Visibilité, Déplacer vers page.

Ordre Z, visibilité et verrouillage

] amène au premier plan, [ envoie en arrière. ⇧⌘H visibilité. ⇧⌘L verrouillage.

App web et bureau

OpenPencil fonctionne dans le navigateur sur app.openpencil.dev. L'app bureau utilise Tauri v2 (~5 Mo). Fonctionne entièrement hors ligne.

Menu de l'app (navigateur)

Barre de menus avec reka-ui : Fichier, Édition, Affichage, Objet, Texte, Disposition. Raccourcis clavier adaptés à la plateforme. Caché dans Tauri.

Sauvegarde automatique

Fichiers sauvegardés 3 secondes après le dernier changement. Debounce sur sceneVersion. Désactivé pour les nouveaux documents sans titre.

Collaboration P2P

Collaboration peer-to-peer en temps réel — aucun serveur requis. Basé sur Trystero (WebRTC) + Yjs (CRDT).

• Zéro coût d'hébergement — signalisation via brokers MQTT publics
• Traversal NAT — serveurs Google STUN, Cloudflare STUN et Open Relay TURN
• Curseurs en direct — flèches colorées style Figma avec pilules de nom
• Présence — avatars colorés
• Mode suivi — cliquez sur l'avatar d'un pair pour suivre son viewport
• Persistance locale — y-indexeddb maintient la salle entre les rechargements
• Salles sécurisées — IDs via crypto.getRandomValues()

Onglets multi-fichiers

Ouvrez plusieurs documents en onglets. ⌘N/⌘T nouvel onglet, ⌘W fermer, ⌘O ouvrir dans un nouvel onglet. Chaque onglet maintient son propre état de document.

Rendu des effets

Rendu complet des effets Figma : Ombre portée, Ombre intérieure, Flou de calque (Gaussien), Flou d'arrière-plan (effet verre/givre), Flou de premier plan. Cache SkPicture par nœud pour la performance.

Propriétés multi-sélection

Sélectionnez plusieurs nœuds et éditez les propriétés partagées. Valeurs communes affichées normalement, valeurs différentes montrent « Mixed ». Retournement H/V s'applique à tous les nœuds.

ScrubInput

Toutes les entrées numériques utilisent une interaction glisser-pour-ajuster. Supporte les suffixes (°, px, %).

Builds CI/CD

GitHub Actions construit les apps Tauri sur les tags de version. macOS signé et notarisé. Notes de release auto-remplies depuis CHANGELOG.md.

@open-pencil/core et CLI

Le moteur est extrait dans packages/core/. Le CLI fournit : info, tree, find, export, analyze, node, pages, variables, eval. Tous supportent --json. Le commande eval exécute JavaScript avec l'API Plugin Figma. Voir Commande Eval.

Rendereur JSX

Création programmable via TreeNode builders. Props shorthand style Tailwind.

Chat IA

Assistant IA intégré via ⌘J. 87 outils dans packages/core/src/tools/ couvrant lecture, création, modification, manipulation de nœuds, CRUD variables, outils vectoriels, contrôle viewport et eval. Serveur MCP expose 90 outils au total (87 core + 3 gestion fichiers) pour les outils de codage IA externes.

Export SVG

Exporte les nœuds sélectionnés en PNG, JPG, WEBP ou SVG. CLI : bun open-pencil export --format svg file.fig.

Copier en tant que

Le sous-menu Copier en tant que du menu contextuel propose : Copier en tant que texte, SVG, PNG (⇧⌘C), JSX.

Alignement du contour & épaisseurs par côté

Alignement : Intérieur, Centre ou Extérieur. Épaisseurs individuelles par côté (Haut/Droite/Bas/Gauche).

Layout mobile & PWA

Installable en PWA. Sur mobile, panneaux latéraux remplacés par un tiroir inférieur glissable avec onglets.

Export Tailwind CSS v4

L'onglet Code propose un basculement entre OpenPencil JSX et Tailwind CSS v4 (HTML avec classes utilitaires).

Google Fonts Fallback

Si une police n'est pas disponible localement, OpenPencil la charge automatiquement depuis Google Fonts API.

Homebrew Tap

Sur macOS : brew install open-pencil/tap/open-pencil

Renommage inline des calques

Double-clic sur le nom d'un calque pour le renommer. Entrée ou clic ailleurs valide, Échap annule.

Profileur de rendu

Superposition HUD avec métriques de timing. Accessible via le menu Affichage.

Panneau de code

L'onglet Code montre le JSX de la sélection avec coloration syntaxique Prism.js et copie.

Qualité de code

Détection de copier-coller via jscpd — duplication réduite de 15,6% à 0,62%. Pipeline d'import optimisé de O(n²) à O(n).