Moteur de rendu JSX
OpenPencil utilise JSX comme langage de création de design. Les LLMs ont vu des millions de composants React — décrire une mise en page avec <Frame><Text> est naturel, aucun entraînement spécial nécessaire. Chaque token compte quand un agent IA effectue des dizaines d'opérations, et JSX est la représentation déclarative la plus compacte.
JSX est aussi diffable. Quand une IA modifie un design, le changement est un diff JSX — lisible, vérifiable, versionnable.
Créer des designs
L'outil render (disponible dans le chat IA, MCP et l'eval du CLI) accepte du JSX :
<Frame name="Card" w={320} h="hug" flex="col" gap={16} p={24} bg="#FFF" rounded={16}>
<Text size={18} weight="bold">Card Title</Text>
<Text size={14} color="#666">Description text</Text>
</Frame>Dans le serveur MCP et le chat IA, l'outil render accepte des chaînes JSX directement. Dans le CLI, utilisez la commande export pour aller dans l'autre sens — exporter des designs en JSX.
Éléments
Tous les types de nœuds sont disponibles en tant qu'éléments JSX :
| Élément | Crée | Alias |
|---|---|---|
<Frame> | Frame (conteneur, supporte l'auto-layout) | <View> |
<Rectangle> | Rectangle | <Rect> |
<Ellipse> | Ellipse / cercle | |
<Text> | Nœud texte (les enfants deviennent le contenu textuel) | |
<Line> | Ligne | |
<Star> | Étoile | |
<Polygon> | Polygone | |
<Vector> | Chemin vectoriel | |
<Group> | Groupe | |
<Section> | Section |
Props de style
Props raccourcies compactes inspirées des conventions de nommage de Tailwind.
Mise en page
| Prop | Description |
|---|---|
flex | "row" ou "col" — active l'auto-layout |
gap | Espace entre les enfants |
wrap | Retour à la ligne des enfants |
rowGap | Espacement sur l'axe transversal lors du retour à la ligne |
justify | "start", "end", "center", "between" |
items | "start", "end", "center", "stretch" |
p, px, py, pt, pr, pb, pl | Marges internes (padding) |
Taille et position
| Prop | Description |
|---|---|
w, h | Largeur/hauteur — nombre, "fill" ou "hug" |
minW, maxW, minH, maxH | Contraintes de taille |
x, y | Position |
Apparence
| Prop | Description |
|---|---|
bg | Remplissage d'arrière-plan (couleur hexadécimale) |
fill | Alias pour bg |
stroke | Couleur de contour |
strokeWidth | Épaisseur du contour (par défaut : 1) |
rounded | Rayon d'arrondi (ou roundedTL, roundedTR, roundedBL, roundedBR) |
cornerSmoothing | Coins lisses style iOS (0–1) |
opacity | 0–1 |
shadow | Ombre portée (ex. "0 4 8 #00000040") |
blur | Rayon de flou du calque |
rotate | Rotation en degrés |
blendMode | Mode de fusion |
overflow | "hidden" ou "visible" |
Typographie
| Prop | Description |
|---|---|
size / fontSize | Taille de police |
font / fontFamily | Famille de polices |
weight / fontWeight | "bold", "medium", "normal" ou nombre |
color | Couleur du texte |
textAlign | "left", "center", "right", "justified" |
Exporter en JSX
Convertissez des designs existants en JSX :
open-pencil export design.fig -f jsx # Format OpenPencil
open-pencil export design.fig -f jsx --style tailwind # Classes TailwindL'aller-retour fonctionne : exportez un design en JSX, modifiez le code, rendez-le à nouveau.
Diff visuel
Comme les designs sont représentables en JSX, les changements deviennent des diffs de code :
<Frame name="Card" w={320} flex="col" gap={16} p={24} bg="#FFF">
- <Text size={18} weight="bold">Old Title</Text>
+ <Text size={24} weight="bold" color="#1D1B20">New Title</Text>
<Text size={14} color="#666">Description</Text>
</Frame>Cela rend les changements de design vérifiables dans les pull requests, traçables dans le contrôle de version, et auditables dans la CI.