b9753aa016
Eleven translated pages changed in English since the last release without matching updates: system requirements, the Lint tab, AI chat diff tools, collaboration with agents, design JSX imports and export fidelity, Storybook and live-app export, lint fixes, page navigation, and Checking Designs. Bring de, es, fr, it, pl, and ru up to date, add the sections the abridged translations lacked where a change landed, use each language's UI labels, and point the export page at documents list.
108 lines
5.9 KiB
Markdown
108 lines
5.9 KiB
Markdown
# 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: <kbd>⌘</kbd><kbd>S</kbd>. Guardar como: <kbd>⇧</kbd><kbd>⌘</kbd><kbd>S</kbd>.
|
||
|
||
**Copiar y pegar con Figma:** selecciona objetos en Figma, pulsa <kbd>⌘</kbd><kbd>C</kbd>, cambia a OpenPencil y usa <kbd>⌘</kbd><kbd>V</kbd>. 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 (<kbd>R</kbd>), elipse (<kbd>O</kbd>), línea (<kbd>L</kbd>), 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](/user-guide/checking-designs)).
|
||
|
||
## 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: <kbd>⌘</kbd><kbd>Z</kbd> y <kbd>⇧</kbd><kbd>⌘</kbd><kbd>Z</kbd>.
|
||
|
||
## 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.
|
||
|
||
```sh
|
||
openpencil export design.fig -f jsx --style tailwind
|
||
```
|
||
|
||
## Chat con AI
|
||
|
||
<kbd>⌘</kbd><kbd>J</kbd> 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.
|
||
|
||
```sh
|
||
npm install -g @open-pencil/mcp
|
||
```
|
||
|
||
## CLI
|
||
|
||
La CLI examina, exporta y analiza archivos `.fig`:
|
||
|
||
```sh
|
||
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](https://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.
|