# Características
## Archivos .fig de Figma
Abre y guarda archivos nativos de Figma directamente. El pipeline de importación/exportación usa el mismo códec binario Kiwi que Figma — 194 definiciones de esquema, ~390 campos por nodo. Guardar con ⌘S, Guardar como con ⇧⌘S.
**Copiar y pegar con Figma** — selecciona nodos en Figma, ⌘C, cambia a OpenPencil, ⌘V. Rellenos, trazos, auto-layout, texto, efectos, radios de esquina y redes vectoriales se preservan. Funciona en ambas direcciones.
## Dibujo y edición
- **Formas** — Rectángulo (R), Elipse (O), Línea (L), Polígono, Estrella
- **Herramienta pluma** — redes vectoriales (no rutas simples), curvas de Bézier con asas de tangente
- **Texto** — edición nativa en el canvas con soporte IME, doble clic para entrar en modo de edición
- **Texto enriquecido** — negrita por carácter (⌘B), cursiva (⌘I), subrayado (⌘U), tachado
- **Auto-layout** — flexbox vía Yoga WASM: dirección, gap, padding, justify, align, dimensionado de hijos. ⇧A para alternar
- **Componentes** — crear (⌥⌘K), conjuntos de componentes (⇧⌘K), instancias con soporte de overrides, sincronización en vivo
- **Variables** — tokens de diseño con colecciones, modos (Claro/Oscuro), tipos color/float/string/boolean, vinculación de variables
- **Secciones** — contenedores organizacionales con adopción automática de hijos y píldoras de título
## Panel de propiedades
Pestañas contextuales Diseño | Código | IA:
- **Apariencia** — opacidad, radio de esquina (uniforme o por esquina), visibilidad
- **Relleno** — sólido, gradiente (lineal/radial/angular/diamante), imagen
- **Trazo** — color, grosor, alineación (interior/centro/exterior), grosores por lado, cap, join, dash
- **Efectos** — sombra paralela, sombra interior, desenfoque de capa, desenfoque de fondo, desenfoque de primer plano
- **Tipografía** — selector de fuentes con scroll virtual y búsqueda, peso, tamaño, alineación, botones de estilo
- **Layout** — controles de auto-layout cuando está habilitado
- **Exportación** — escala, formato (PNG/JPG/WEBP/SVG), vista previa en vivo
## Renderizado
Skia (CanvasKit WASM) — el mismo motor de renderizado que Figma:
- Rellenos de gradiente (lineal, radial, angular, diamante)
- Rellenos de imagen con modos de escala
- Efectos con caché por nodo
- Datos de arco (elipses parciales, donuts)
- Culling de viewport y reutilización de Paint
- Guías de snap con alineación consciente de rotación
- Reglas del canvas con badges de selección
- Resaltado al pasar que sigue la geometría real
## Deshacer/Rehacer
Toda operación es deshacible — creación, eliminación, movimientos, redimensionamientos, cambios de propiedades, cambios de padre, cambios de layout, operaciones de variables. Usa un patrón de comando inverso. ⌘Z / ⇧⌘Z.
## Documentos multi-página
Añadir, eliminar, renombrar páginas. Cada página tiene estado de viewport independiente. Doble clic para renombrar en línea.
## Pestañas multi-archivo
Abre múltiples documentos en pestañas. ⌘T nueva pestaña, ⌘W cerrar, ⌘O abrir archivo.
## Exportación
- **Imagen** — PNG, JPG, WEBP a escala configurable (0,5×–4×). Vía panel, menú contextual, o ⇧⌘E
- **SVG** — formas, texto con style runs, gradientes, efectos, modos de mezcla
- **Tailwind JSX** — HTML con clases de utilidad Tailwind v4, listo para React o Vue
- **Copiar como** — texto, SVG, PNG (⇧⌘C), o JSX vía menú contextual
CLI: `openpencil export design.fig -f jsx --style tailwind`
## Chat IA
Pulsa ⌘J para abrir el asistente IA. 90+ herramientas que pueden crear formas, aplicar estilos, gestionar layout, trabajar con componentes y variables, ejecutar operaciones booleanas, analizar tokens de diseño y exportar assets. Conecta Anthropic, OpenAI, Google AI, OpenRouter o cualquier endpoint compatible.
Las llamadas a herramientas se muestran como entradas colapsables. Verificación visual — el asistente renderiza su trabajo y lo compara con tu solicitud. Soporte completo de deshacer para todas las mutaciones de IA.
Ver [Chat IA](/programmable/ai-chat) para configuración y detalles de proveedores.
## Servidor MCP
Conecta Claude Code, Cursor, Windsurf, o cualquier cliente MCP para leer y escribir archivos `.fig` de forma headless. 90+ herramientas. Dos transportes: stdio y HTTP.
```sh
npm install -g @open-pencil/mcp
```
```json
{
"mcpServers": {
"open-pencil": {
"command": "openpencil-mcp"
}
}
}
```
Consulta la [referencia de herramientas MCP](/programmable/mcp-server) para la lista completa.
## CLI
Inspecciona, exporta y analiza archivos `.fig` desde el terminal:
```sh
openpencil tree design.fig # Árbol de nodos
openpencil find design.fig --type TEXT # Buscar
openpencil export design.fig -f png # Renderizar
openpencil analyze colors design.fig # Auditoría de colores
openpencil analyze clusters design.fig # Patrones repetidos
openpencil eval design.fig -c "..." # Figma Plugin API
```
Cuando la app de escritorio está en ejecución, omite el archivo para controlar el editor en vivo vía RPC:
```sh
openpencil tree # Documento en vivo
openpencil export -f png # Captura del canvas
```
Todos los comandos soportan `--json`. Instalar: `npm install -g @open-pencil/cli`
## Colaboración en tiempo real
P2P vía WebRTC — sin servidor requerido. Comparte un enlace y edita junto.
- Cursores en vivo con flechas de colores y píldoras de nombre
- Avatares de presencia
- Modo seguimiento — clic en un par para seguir su viewport
- Persistencia local vía IndexedDB
- IDs de sala seguros vía `crypto.getRandomValues()`
## Escritorio y web
**Escritorio** — Tauri v2, ~7 MB. macOS (firmado y notarizado), Windows, Linux. Menús nativos, offline, autoguardado.
**Web** — funciona en [app.openpencil.dev](https://app.openpencil.dev), instalable como PWA en móvil con interfaz optimizada para táctil.
**Homebrew:**
```sh
brew install open-pencil/tap/open-pencil
```
## Fallback de Google Fonts
Cuando una fuente no está disponible localmente, OpenPencil la carga automáticamente desde Google Fonts. No requiere instalación manual al abrir archivos .fig con fuentes desconocidas.