Fonctionnalités

Fichiers .fig Figma

Ouvrez et enregistrez les fichiers natifs Figma directement. Le pipeline d'import/export utilise le même codec binaire Kiwi que Figma — 194 définitions de schéma, ~390 champs par nœud. Enregistrer avec ⌘S, Enregistrer sous avec ⇧⌘S.

Copier-coller avec Figma — sélectionnez des nœuds dans Figma, ⌘C, passez à OpenPencil, ⌘V. Les remplissages, contours, auto-layout, texte, effets, rayons de coins et réseaux vectoriels sont préservés. Fonctionne dans les deux sens.

Dessin et édition

• Formes — Rectangle (R), Ellipse (O), Ligne (L), Polygone, Étoile
• Outil plume — réseaux vectoriels (pas de simples chemins), courbes de Bézier avec poignées de tangente
• Texte — édition native sur le canevas avec support IME, double-clic pour entrer en mode édition
• Texte riche — gras (⌘B), italique (⌘I), souligné (⌘U), barré par caractère
• Auto-layout — flexbox via Yoga WASM : direction, gap, padding, justify, align, dimensionnement des enfants. ⇧A pour activer/désactiver
• Composants — créer (⌥⌘K), ensembles de composants (⇧⌘K), instances avec support des surcharges, synchronisation en direct
• Variables — tokens de design avec collections, modes (Clair/Sombre), types couleur/nombre/chaîne/booléen, liaison de variables
• Sections — conteneurs organisationnels avec adoption automatique des enfants et pilules de titre

Panneau de propriétés

Onglets contextuels Design | Code | IA :

• Apparence — opacité, rayon de coin (uniforme ou par coin), visibilité
• Remplissage — solide, dégradé (linéaire/radial/angulaire/diamant), image
• Contour — couleur, épaisseur, alignement (intérieur/centre/extérieur), épaisseurs par côté, extrémité, jointure, tirets
• Effets — ombre portée, ombre intérieure, flou de calque, flou d'arrière-plan, flou de premier plan
• Typographie — sélecteur de polices avec défilement virtuel et recherche, graisse, taille, alignement, boutons de style
• Layout — contrôles d'auto-layout lorsqu'activé
• Export — échelle, format (PNG/JPG/WEBP/SVG), aperçu en direct

Rendu

Skia (CanvasKit WASM) — le même moteur de rendu que Figma :

• Remplissages dégradés (linéaire, radial, angulaire, diamant)
• Remplissages d'images avec modes de mise à l'échelle
• Effets avec cache par nœud
• Données d'arc (ellipses partielles, anneaux)
• Culling de viewport et réutilisation de Paint
• Guides d'accrochage avec alignement tenant compte de la rotation
• Règles du canevas avec badges de sélection
• Surbrillance au survol suivant la géométrie réelle

Annuler/Rétablir

Chaque opération est annulable — création, suppression, déplacements, redimensionnements, changements de propriétés, re-parentage, changements de layout, opérations sur les variables. Utilise un patron de commande inverse. ⌘Z / ⇧⌘Z.

Documents multi-pages

Ajouter, supprimer, renommer des pages. Chaque page a un état de viewport indépendant. Double-clic pour renommer en ligne.

Onglets multi-fichiers

Ouvrez plusieurs documents en onglets. ⌘T nouvel onglet, ⌘W fermer, ⌘O ouvrir un fichier.

Export

• Image — PNG, JPG, WEBP à échelle configurable (0,5×–4×). Via le panneau, le menu contextuel ou ⇧⌘E
• SVG — formes, texte avec style runs, dégradés, effets, modes de fusion
• Tailwind JSX — HTML avec classes utilitaires Tailwind v4, prêt pour React ou Vue
• Copier en tant que — texte, SVG, PNG (⇧⌘C), ou JSX via le menu contextuel

CLI : open-pencil export design.fig -f jsx --style tailwind

Chat IA

Appuyez sur ⌘J pour ouvrir l'assistant IA. 90+ outils qui peuvent créer des formes, définir des styles, gérer le layout, travailler avec les composants et variables, exécuter des opérations booléennes, analyser les tokens de design et exporter des assets. Connectez Anthropic, OpenAI, Google AI, OpenRouter ou tout endpoint compatible.

Les appels d'outils s'affichent comme des entrées dépliables. Vérification visuelle — l'assistant rend son travail et le compare avec votre demande. Support complet de l'annulation pour toutes les mutations IA.

Voir Chat IA pour la configuration et les détails des fournisseurs.

Serveur MCP

Connectez Claude Code, Cursor, Windsurf ou tout client MCP pour lire et écrire des fichiers .fig en mode headless. 90+ outils. Deux transports : stdio et HTTP.

bun add -g @open-pencil/mcp

{
  "mcpServers": {
    "open-pencil": {
      "command": "openpencil-mcp"
    }
  }
}

Voir la référence des outils MCP pour la liste complète.

CLI

Inspectez, exportez et analysez les fichiers .fig depuis le terminal :

open-pencil tree design.fig          # Arbre de nœuds
open-pencil find design.fig --type TEXT  # Recherche
open-pencil export design.fig -f png     # Rendu
open-pencil analyze colors design.fig    # Audit des couleurs
open-pencil analyze clusters design.fig  # Motifs répétés
open-pencil eval design.fig -c "..."     # API Plugin Figma

Lorsque l'application de bureau est lancée, omettez le fichier pour contrôler l'éditeur en direct via RPC :

open-pencil tree                     # Document en direct
open-pencil export -f png            # Capture du canevas

Toutes les commandes supportent --json. Installation : bun add -g @open-pencil/cli

Collaboration en temps réel

P2P via WebRTC — aucun serveur requis. Partagez un lien et éditez ensemble.

• Curseurs en direct avec flèches colorées et pilules de nom
• Avatars de présence
• Mode suivi — cliquez sur un pair pour suivre son viewport
• Persistance locale via IndexedDB
• IDs de salle sécurisés via crypto.getRandomValues()

Bureau et web

Bureau — Tauri v2, ~7 Mo. macOS (signé et notarisé), Windows, Linux. Menus natifs, hors ligne, sauvegarde automatique.

Web — disponible sur app.openpencil.dev, installable en PWA sur mobile avec interface tactile optimisée.

Homebrew :

brew install open-pencil/tap/open-pencil

Polices Google Fonts en secours

Lorsqu'une police n'est pas disponible localement, OpenPencil la récupère automatiquement depuis Google Fonts. Aucune installation manuelle nécessaire lors de l'ouverture de fichiers .fig avec des polices inconnues.