openpencil/packages/docs/es/overview/features.md

Características

Archivos de Figma

OpenPencil abre y guarda archivos .fig directamente. La importación y exportación usan el mismo códec binario Kiwi que Figma: 194 definiciones de esquema y unos 390 campos por objeto. Guardar: ⌘S. Guardar como: ⇧⌘S.

Copiar y pegar con Figma: selecciona objetos en Figma, pulsa ⌘C, cambia a OpenPencil y usa ⌘V. Los rellenos, contornos, la disposición automática, el texto, los efectos, los radios de esquina y las redes vectoriales se conservan en ambas direcciones.

Dibujo y edición

• Formas: rectángulo (R), elipse (O), línea (L), polígono y estrella.
• Pluma: redes vectoriales, curvas de Bézier y tiradores tangentes.
• Texto: edición directa en el lienzo y soporte de IME.
• Texto enriquecido: negrita, cursiva, subrayado y tachado en rangos de caracteres.
• Disposición automática: Flexbox y CSS Grid mediante Yoga WASM, con dirección, separación, relleno, distribución, alineación, tamaño y pistas de cuadrícula.
• Componentes: creación de componentes y conjuntos, instancias, sustituciones y sincronización.
• Variables: valores de diseño con colecciones, modos claro/oscuro, tipos color/número/texto/booleano y enlaces.
• Secciones: contenedores de organización que incorporan automáticamente los objetos superpuestos.

Panel de propiedades

Las pestañas Diseño, Código, IA y Revisar se adaptan a la selección:

• Apariencia: opacidad, radio uniforme o por esquina y visibilidad.
• Relleno: color sólido, degradados lineal, radial, angular y diamante, e imágenes.
• Contorno: color, grosor, alineación, grosor por lado, extremos, uniones y guiones.
• Efectos: sombra exterior e interior, desenfoque de capa, fondo y primer plano.
• Tipografía: selector de fuentes con búsqueda y desplazamiento virtual, estilo, tamaño, alineación y formato.
• Disposición: controles de la disposición automática.
• Exportación: escala, PNG/JPG/WEBP/SVG y vista previa.
• Código: Design JSX y Tailwind JSX de la selección, con edición bidireccional en vivo de Design JSX que actualiza tu código a medida que cambian las capas; el elemento bajo el cursor resalta su capa en el lienzo y los problemas de diseño se subrayan en la propiedad que los causa.
• Revisar: revisión de diseño en vivo de la página o la selección (bajo contraste, áreas táctiles pequeñas, colores sin variable, espaciados fuera de escala), con marcadores de problemas en el lienzo y enlace a variables con un clic (Revisar diseños).

Renderizado

OpenPencil usa Skia mediante CanvasKit WASM, el mismo motor gráfico de Figma:

• degradados lineales, radiales, angulares y diamante;
• rellenos de imagen con varios modos de escala;
• caché de efectos por objeto;
• arcos, elipses parciales y anillos;
• exclusión de objetos fuera de la vista y reutilización de herramientas de pintura;
• guías de ajuste que tienen en cuenta la rotación;
• reglas con el rango de la selección;
• resaltado que sigue la geometría real.

Deshacer y rehacer

La creación, eliminación, movimiento, cambio de tamaño, propiedades y jerarquía, disposición y variables se pueden deshacer. Atajos: ⌘Z y ⇧⌘Z.

Páginas y documentos

Puedes crear, eliminar y renombrar páginas; cada una conserva su posición y escala de vista. Se pueden abrir varios documentos en pestañas.

Exportación

• Imágenes: PNG, JPG y WEBP con escala de 0,5× a 4×.
• SVG: formas, texto con rangos de estilo, degradados, efectos y modos de fusión.
• Tailwind JSX: HTML con clases Tailwind v4 para React o Vue.
• Copiar como: texto, SVG, PNG o JSX desde el menú contextual.

openpencil export design.fig -f jsx --style tailwind

Chat con AI

⌘J abre el asistente. Más de 90 herramientas crean formas, modifican estilos y disposiciones, trabajan con componentes y variables, ejecutan operaciones booleanas, analizan variables de diseño y exportan recursos. Admite Anthropic, OpenAI, Google AI, OpenRouter y extremos compatibles.

Las llamadas a herramientas aparecen en una cronología plegable. Para verificar visualmente los cambios, el asistente renderiza el resultado y lo compara con la solicitud. Todas las modificaciones realizadas por AI se pueden deshacer.

Servidor MCP

Claude Code, Cursor, Windsurf y otros clientes MCP pueden leer y modificar archivos .fig con más de 90 herramientas. Están disponibles stdio y HTTP.

npm install -g @open-pencil/mcp

CLI

La CLI examina, exporta y analiza archivos .fig:

openpencil tree design.fig              # Árbol del documento
openpencil find design.fig --type TEXT  # Búsqueda
openpencil export design.fig -f png     # Exportación
openpencil analyze colors design.fig    # Análisis de colores
openpencil analyze clusters design.fig  # Estructuras repetidas
openpencil eval design.fig -c "..."     # Figma Plugin API

Todos los comandos admiten --json. Instalación: npm install -g @open-pencil/cli o bun add -g @open-pencil/cli.

Colaboración en tiempo real

La colaboración funciona directamente entre participantes mediante WebRTC y no necesita servidor central. Basta con compartir un enlace. Incluye cursores, presencia y seguimiento de la vista de otro participante.

Escritorio y web

Escritorio: Tauri v2, unos 7 MB, para macOS, Windows y Linux, con menús nativos, uso sin conexión y guardado automático.

Web: app.openpencil.dev, instalable como PWA y adaptado a pantallas táctiles.

Carga alternativa desde Google Fonts

Si una fuente no está disponible localmente, OpenPencil la descarga automáticamente desde Google Fonts. No hace falta instalarla manualmente.