Remove implementation details from user guide
Replace internal references (Yoga, CanvasKit, Paragraph API, style runs, characterStyleIDs, vectorNetworkBlob, Kiwi binary, scene graph, font-kit, Local Font Access API, COMPONENT type, override key format, hex codes, px specs) with user-facing language across all 7 locales.
This commit is contained in:
Danila Poyarkov
parent
1ecc20e1ec
commit
36a3257d29
|
|
@ -5,7 +5,7 @@ description: Flexbox-basiertes Auto-Layout in OpenPencil — Richtung, Abstand,
|
|||
|
||||
# Auto-Layout
|
||||
|
||||
Auto-Layout verwendet Yoga (Flexbox-Engine), um Kinder automatisch innerhalb eines Frames zu positionieren. Es verwaltet Richtung, Abstände, Ausrichtung und responsive Größenanpassung.
|
||||
Auto-Layout positioniert Kinder automatisch innerhalb eines Frames nach Flexbox-Regeln. Es verwaltet Richtung, Abstände, Ausrichtung und responsive Größenanpassung.
|
||||
|
||||
## Auto-Layout aktivieren
|
||||
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ Komponenten sind wiederverwendbare Design-Elemente. Bearbeiten Sie die Hauptkomp
|
|||
|
||||
## Komponente erstellen
|
||||
|
||||
Wählen Sie einen Frame oder eine Gruppe und drücken Sie <kbd>⌥</kbd><kbd>⌘</kbd><kbd>K</kbd> (Strg + Alt + K). Der Knoten wird an Ort und Stelle in einen COMPONENT-Typ umgewandelt.
|
||||
Wählen Sie einen Frame oder eine Gruppe und drücken Sie <kbd>⌥</kbd><kbd>⌘</kbd><kbd>K</kbd> (Strg + Alt + K). Der Knoten wird zu einer wiederverwendbaren Komponente.
|
||||
|
||||
Komponenten zeigen ein lila Label mit Diamant-Symbol.
|
||||
|
||||
|
|
@ -45,7 +45,7 @@ Instanzen können bestimmte Eigenschaften überschreiben, ohne die Synchronisati
|
|||
|
||||
### Überschreibbare Eigenschaften
|
||||
|
||||
Name, Text, fontSize, fontWeight, fontFamily sowie alle visuellen und Layout-Eigenschaften.
|
||||
Name, Text, Schriftgröße, Schriftstärke, Schriftfamilie sowie alle visuellen und Layout-Eigenschaften.
|
||||
|
||||
### Neue Kinder
|
||||
|
||||
|
|
@ -59,8 +59,8 @@ Komponenten und Instanzen sind opake Container — Klicken wählt die Komponente
|
|||
|
||||
| Element | Darstellung |
|
||||
|---------|------------|
|
||||
| Komponenten-Label | Lila (#9747ff) mit Diamant-Symbol |
|
||||
| Instanz-Label | Lila (#9747ff) mit Diamant-Symbol |
|
||||
| Komponenten-Label | Lila mit Diamant-Symbol |
|
||||
| Instanz-Label | Lila mit Diamant-Symbol |
|
||||
| Komponenten-Set-Rand | Gestrichelt lila |
|
||||
|
||||
## Tastenkürzel
|
||||
|
|
|
|||
|
|
@ -40,7 +40,7 @@ Das Kontextmenü bietet **Als kopieren** mit mehreren Zwischenablage-Formaten:
|
|||
|
||||
## .fig-Dateioperationen
|
||||
|
||||
OpenPencil verwendet das .fig-Format — dasselbe Binärformat wie Figma.
|
||||
OpenPencil verwendet das .fig-Format — kompatibel mit Figma. Gespeicherte Dateien werden komprimiert und enthalten ein Vorschaubild.
|
||||
|
||||
### Dateien öffnen
|
||||
|
||||
|
|
|
|||
|
|
@ -31,6 +31,6 @@ In diesem Handbuch verwenden Tastenkürzel Mac-Notation: <kbd>⌘</kbd> = Comman
|
|||
|
||||
## Erweiterte Funktionen
|
||||
|
||||
- [Auto-Layout](./auto-layout) — Flexbox-basierte automatische Positionierung mit Yoga
|
||||
- [Auto-Layout](./auto-layout) — Flexbox-basierte automatische Positionierung
|
||||
- [Komponenten](./components) — Wiederverwendbare Komponenten, Instanzen und Overrides
|
||||
- [Variablen](./variables) — Design-Variablen, Sammlungen, Modi und Füllbindungen
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@ Knoten werden in einem zusammenklappbaren Baum angezeigt. Klicken Sie auf den Pf
|
|||
|
||||
### Ziehen zum Umordnen
|
||||
|
||||
Ziehen Sie Ebenen, um sie umzuordnen. Dies ändert die Z-Reihenfolge im Szenengraphen.
|
||||
Ziehen Sie Ebenen, um sie umzuordnen. Ebenen weiter oben in der Liste werden über den anderen gerendert.
|
||||
|
||||
### Sichtbarkeit umschalten
|
||||
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@ Drücken Sie <kbd>Escape</kbd>, um den aktuellen Pfad als offenen Pfad zu bestä
|
|||
|
||||
## Vektornetzwerke
|
||||
|
||||
Pfade verwenden das Vektornetzwerk-Datenmodell statt einfacher Punktlisten. Vektornetzwerke ermöglichen flexiblere Topologien und werden in Figmas `vectorNetworkBlob`-Binärformat für .fig-Kompatibilität kodiert.
|
||||
Pfade verwenden das Vektornetzwerk-Datenmodell statt einfacher Punktlisten. Vektornetzwerke ermöglichen flexiblere Topologien und sind vollständig mit dem .fig-Format kompatibel.
|
||||
|
||||
## Tastenkürzel
|
||||
|
||||
|
|
|
|||
|
|
@ -60,8 +60,8 @@ Die Schriftauswahl im Typografie-Bereich bietet Suchfilter, Schriftvorschau und
|
|||
## Schriftquellen
|
||||
|
||||
- **Standardschrift** — Inter wird automatisch geladen
|
||||
- **Desktop (Tauri)** — Systemschriften via Rust font-kit
|
||||
- **Browser** — via Local Font Access API (Chrome/Edge)
|
||||
- **Desktop** — Systemschriften werden automatisch erkannt
|
||||
- **Browser** — Systemschriften werden in Chrome und Edge unterstützt
|
||||
|
||||
## Tipps
|
||||
|
||||
|
|
|
|||
|
|
@ -4,7 +4,12 @@ description: Auto-layout basado en flexbox en OpenPencil.
|
|||
---
|
||||
# Auto-layout
|
||||
|
||||
<kbd>⇧</kbd><kbd>A</kbd> para activar/desactivar o envolver la selección.
|
||||
El auto-layout posiciona los hijos automáticamente dentro de un marco usando reglas de flexbox. Controla la dirección, el espaciado, la alineación y el dimensionamiento responsivo.
|
||||
|
||||
## Activar auto-layout
|
||||
|
||||
- Selecciona un marco y pulsa <kbd>⇧</kbd><kbd>A</kbd> (<kbd>Shift</kbd> + <kbd>A</kbd>) para activar o desactivar el auto-layout
|
||||
- Selecciona nodos sueltos (sin marco padre) y pulsa <kbd>⇧</kbd><kbd>A</kbd> para envolverlos en un nuevo marco con auto-layout
|
||||
|
||||
## Dirección
|
||||
- **Horizontal** — de izquierda a derecha
|
||||
|
|
|
|||
|
|
@ -4,27 +4,53 @@ description: Componentes reutilizables, instancias, overrides y sincronización
|
|||
---
|
||||
# Componentes
|
||||
|
||||
Los componentes son elementos de diseño reutilizables. Edita el componente principal y todas sus instancias se actualizan automáticamente.
|
||||
|
||||
## Crear un componente
|
||||
<kbd>⌥</kbd><kbd>⌘</kbd><kbd>K</kbd> (<kbd>Ctrl</kbd> + <kbd>Alt</kbd> + <kbd>K</kbd>) — convierte marco/grupo en COMPONENT. Etiqueta morada con diamante.
|
||||
|
||||
Selecciona un marco o grupo y pulsa <kbd>⌥</kbd><kbd>⌘</kbd><kbd>K</kbd> (<kbd>Ctrl</kbd> + <kbd>Alt</kbd> + <kbd>K</kbd>). La selección se convierte en un componente reutilizable.
|
||||
|
||||
Los componentes muestran una etiqueta morada con icono de diamante.
|
||||
|
||||
## Conjuntos de componentes
|
||||
<kbd>⇧</kbd><kbd>⌘</kbd><kbd>K</kbd> — combina 2+ componentes con borde morado punteado.
|
||||
|
||||
Selecciona dos o más componentes y pulsa <kbd>⇧</kbd><kbd>⌘</kbd><kbd>K</kbd> (<kbd>Shift</kbd> + <kbd>Ctrl</kbd> + <kbd>K</kbd>) para combinarlos en un conjunto de componentes — un contenedor con borde morado punteado. Los conjuntos son útiles para agrupar variantes (ej. estados de botón).
|
||||
|
||||
## Crear instancias
|
||||
Clic derecho → **Crear instancia**. Aparece 40 px a la derecha.
|
||||
|
||||
Clic derecho → **Crear instancia**. La instancia aparece a la derecha del componente original.
|
||||
|
||||
## Desenlazar una instancia
|
||||
<kbd>⌥</kbd><kbd>⌘</kbd><kbd>B</kbd> — se convierte en marco sin enlace.
|
||||
|
||||
Selecciona una instancia y pulsa <kbd>⌥</kbd><kbd>⌘</kbd><kbd>B</kbd> (<kbd>Ctrl</kbd> + <kbd>Alt</kbd> + <kbd>B</kbd>). La instancia se convierte en un marco regular sin enlace al componente original.
|
||||
|
||||
## Sincronización en vivo
|
||||
Editar un componente actualiza todas sus instancias. Propiedades sincronizadas: dimensiones, rellenos, trazos, efectos, opacidad, radios de esquinas, layout.
|
||||
|
||||
Editar un componente actualiza todas sus instancias automáticamente. Propiedades sincronizadas:
|
||||
|
||||
- Ancho y alto
|
||||
- Rellenos, trazos y efectos
|
||||
- Opacidad y radios de esquinas
|
||||
- Propiedades de layout
|
||||
|
||||
## Overrides
|
||||
Las instancias pueden sobreescribir propiedades sin romper el enlace.
|
||||
|
||||
## Hit testing
|
||||
Las instancias pueden sobreescribir propiedades específicas sin romper el enlace de sincronización. Cuando se sobreescribe una propiedad en una instancia, esa propiedad se omite durante la sincronización — las demás propiedades continúan actualizándose desde el componente principal.
|
||||
|
||||
## Selección
|
||||
|
||||
Clic selecciona el componente. **Doble clic** para entrar y seleccionar hijos.
|
||||
|
||||
## Tratamiento visual
|
||||
|
||||
| Elemento | Apariencia |
|
||||
|----------|------------|
|
||||
| Etiqueta de componente | Morada con icono de diamante, siempre visible |
|
||||
| Etiqueta de instancia | Morada con icono de diamante, siempre visible |
|
||||
| Borde de conjunto | Contorno morado punteado |
|
||||
|
||||
## Atajos de teclado
|
||||
|
||||
| Acción | Mac | Windows / Linux |
|
||||
|--------|-----|-----------------|
|
||||
| Crear componente | <kbd>⌥</kbd><kbd>⌘</kbd><kbd>K</kbd> | <kbd>Ctrl</kbd> + <kbd>Alt</kbd> + <kbd>K</kbd> |
|
||||
|
|
|
|||
|
|
@ -40,7 +40,11 @@ El menú contextual **Copiar como** ofrece formatos adicionales:
|
|||
| Guardar | <kbd>⌘</kbd><kbd>S</kbd> | <kbd>Ctrl</kbd> + <kbd>S</kbd> |
|
||||
| Guardar como | <kbd>⇧</kbd><kbd>⌘</kbd><kbd>S</kbd> | <kbd>Shift</kbd> + <kbd>Ctrl</kbd> + <kbd>S</kbd> |
|
||||
|
||||
Compatibilidad de ida y vuelta con Figma.
|
||||
Los archivos guardados se comprimen e incluyen una imagen en miniatura para vista previa.
|
||||
|
||||
### Compatibilidad de ida y vuelta
|
||||
|
||||
Los archivos exportados desde OpenPencil se pueden abrir en Figma, y viceversa. El formato .fig preserva todos los tipos de nodos, propiedades, rellenos, trazos, efectos, datos vectoriales y configuración de layout.
|
||||
|
||||
## Consejos
|
||||
|
||||
|
|
|
|||
|
|
@ -31,6 +31,6 @@ OpenPencil es un editor de diseño open-source, compatible con Figma — complet
|
|||
|
||||
## Funciones avanzadas
|
||||
|
||||
- [Auto-layout](./auto-layout) — posicionamiento automático basado en flexbox
|
||||
- [Auto-layout](./auto-layout) — posicionamiento automático de hijos usando reglas de flexbox
|
||||
- [Componentes](./components) — componentes reutilizables, instancias y overrides
|
||||
- [Variables](./variables) — variables de diseño, colecciones, modos
|
||||
|
|
|
|||
|
|
@ -1,26 +1,35 @@
|
|||
---
|
||||
title: Herramienta pluma
|
||||
description: Trazados vectoriales con curvas de Bézier in OpenPencil.
|
||||
description: Trazados vectoriales con curvas de Bézier en OpenPencil.
|
||||
---
|
||||
# Herramienta pluma
|
||||
|
||||
La herramienta pluma crea trazados vectoriales usando un modelo de redes vectoriales, compatible con el formato .fig de Figma.
|
||||
|
||||
## Activación
|
||||
**P**
|
||||
|
||||
Pulsa <kbd>P</kbd> para activar la herramienta pluma.
|
||||
|
||||
## Colocar puntos
|
||||
- **Click** — corner point
|
||||
- **Click + drag** — curve point with Bézier tangent handles
|
||||
|
||||
- **Clic** — punto de esquina (segmento recto)
|
||||
- **Clic + arrastrar** — punto de curva con manejadores de tangente Bézier — la dirección y longitud del arrastre controlan la forma de la curva
|
||||
|
||||
## Cerrar un trazado
|
||||
Click the first point to close into a loop.
|
||||
|
||||
Haz clic en el **primer punto** del trazado para cerrarlo en un bucle. Los trazados cerrados se pueden rellenar.
|
||||
|
||||
## Trazados abiertos
|
||||
<kbd>Escape</kbd> to commit as open path.
|
||||
|
||||
Pulsa <kbd>Escape</kbd> para confirmar el trazado actual como trazado abierto. Los trazados abiertos se renderizan solo como trazos — no se rellenan.
|
||||
|
||||
## Redes vectoriales
|
||||
Vector network data model, compatible with Figma `vectorNetworkBlob`.
|
||||
|
||||
| Action | Mac | Windows / Linux |
|
||||
Los trazados en OpenPencil usan redes vectoriales — un modelo más flexible que las listas simples de puntos que soporta trazados ramificados y topología compleja. Es el mismo modelo que usa Figma, así que los trazados se mantienen perfectamente al abrir y guardar archivos .fig.
|
||||
|
||||
## Atajos de teclado
|
||||
|
||||
| Acción | Mac | Windows / Linux |
|
||||
|--------|-----|-----------------|
|
||||
| Pen tool | P | P |
|
||||
| Commit | Escape | Escape |
|
||||
| Herramienta pluma | P | P |
|
||||
| Confirmar trazado abierto | Escape | Escape |
|
||||
|
|
|
|||
|
|
@ -4,28 +4,51 @@ description: Crear y editar texto con formato enriquecido en OpenPencil.
|
|||
---
|
||||
# Edición de texto
|
||||
|
||||
Crea nodos de texto y edítalos directamente en el lienzo con soporte completo de texto enriquecido.
|
||||
|
||||
## Crear texto
|
||||
Pulsa **T**, luego haz clic en el lienzo. Empieza a escribir inmediatamente.
|
||||
|
||||
Pulsa <kbd>T</kbd> para activar la herramienta de texto, luego haz clic en el lienzo. Aparece un nodo de texto vacío con un cursor parpadeante — empieza a escribir inmediatamente.
|
||||
|
||||
## Edición inline
|
||||
Doble clic en un nodo de texto para entrar en modo edición. Clic fuera para confirmar.
|
||||
|
||||
Doble clic en un nodo de texto para entrar en modo edición. Un contorno azul rodea el texto para indicar el modo edición. Clic fuera para confirmar y salir.
|
||||
|
||||
El texto se renderiza directamente en el lienzo — no hay una capa de entrada de texto separada.
|
||||
|
||||
## Navegación del cursor
|
||||
|
||||
| Acción | Mac | Windows / Linux |
|
||||
|--------|-----|-----------------|
|
||||
| Izquierda/derecha | <kbd>←</kbd> / <kbd>→</kbd> | <kbd>←</kbd> / <kbd>→</kbd> |
|
||||
| Arriba/abajo | <kbd>↑</kbd> / <kbd>↓</kbd> | <kbd>↑</kbd> / <kbd>↓</kbd> |
|
||||
| Por palabra | <kbd>⌥</kbd><kbd>←</kbd> / <kbd>⌥</kbd><kbd>→</kbd> | <kbd>Ctrl</kbd> + <kbd>←</kbd> / <kbd>Ctrl</kbd> + <kbd>→</kbd> |
|
||||
| Inicio/fin de línea | <kbd>⌘</kbd><kbd>←</kbd> / <kbd>⌘</kbd><kbd>→</kbd> | Inicio / Fin |
|
||||
| Inicio/fin de línea | <kbd>⌘</kbd><kbd>←</kbd> / <kbd>⌘</kbd><kbd>→</kbd> | <kbd>Home</kbd> / <kbd>End</kbd> |
|
||||
|
||||
<kbd>Shift</kbd> extiende la selección.
|
||||
Mantén <kbd>Shift</kbd> con cualquier tecla de movimiento para extender la selección.
|
||||
|
||||
## Formato enriquecido
|
||||
|
||||
Aplica formato al texto seleccionado, o alterna el estilo para todo el nodo cuando no hay selección.
|
||||
|
||||
| Acción | Mac | Windows / Linux |
|
||||
|--------|-----|-----------------|
|
||||
| Negrita | <kbd>⌘</kbd><kbd>B</kbd> | <kbd>Ctrl</kbd> + <kbd>B</kbd> |
|
||||
| Cursiva | <kbd>⌘</kbd><kbd>I</kbd> | <kbd>Ctrl</kbd> + <kbd>I</kbd> |
|
||||
| Subrayado | <kbd>⌘</kbd><kbd>U</kbd> | <kbd>Ctrl</kbd> + <kbd>U</kbd> |
|
||||
|
||||
El formato se aplica por carácter. Cuando escribes entre un segmento en negrita y uno regular, el nuevo texto hereda el estilo del segmento anterior.
|
||||
|
||||
## Selector de fuentes
|
||||
Búsqueda, vista previa y scroll virtual. Fuentes del sistema en desktop (Tauri), Local Font Access API en el navegador.
|
||||
|
||||
Abre el selector de fuentes en la sección Tipografía del panel de propiedades para cambiar la familia tipográfica. Incluye:
|
||||
|
||||
- **Filtro de búsqueda** — escribe para filtrar la lista de fuentes
|
||||
- **Vista previa** — cada nombre de fuente se muestra con su propia tipografía
|
||||
- **Scroll virtual** — maneja listas largas de fuentes eficientemente
|
||||
|
||||
## Fuentes disponibles
|
||||
|
||||
- **Fuente predeterminada** — Inter se carga automáticamente
|
||||
- **App de escritorio** — todas las fuentes del sistema están disponibles
|
||||
- **Navegador** — las fuentes del sistema están disponibles en Chrome y Edge
|
||||
|
|
|
|||
|
|
@ -4,6 +4,8 @@ description: Mise en page auto basée sur flexbox dans OpenPencil.
|
|||
---
|
||||
# Mise en page auto
|
||||
|
||||
La mise en page auto positionne automatiquement les enfants dans un cadre selon les règles flexbox. Elle gère la direction, l'espacement, l'alignement et le dimensionnement adaptatif.
|
||||
|
||||
<kbd>⇧</kbd><kbd>A</kbd> pour activer/désactiver ou envelopper la sélection.
|
||||
|
||||
## Direction
|
||||
|
|
|
|||
|
|
@ -5,19 +5,19 @@ description: Composants réutilisables, instances, surcharges et synchronisation
|
|||
# Composants
|
||||
|
||||
## Créer un composant
|
||||
<kbd>⌥</kbd><kbd>⌘</kbd><kbd>K</kbd> (<kbd>Ctrl</kbd> + <kbd>Alt</kbd> + <kbd>K</kbd>) — convertit cadre/groupe en COMPONENT. Étiquette violette avec diamant.
|
||||
<kbd>⌥</kbd><kbd>⌘</kbd><kbd>K</kbd> (<kbd>Ctrl</kbd> + <kbd>Alt</kbd> + <kbd>K</kbd>) — convertit un cadre ou un groupe en composant réutilisable. Une étiquette violette avec un losange apparaît au-dessus.
|
||||
|
||||
## Jeux de composants
|
||||
<kbd>⇧</kbd><kbd>⌘</kbd><kbd>K</kbd> — combine 2+ composants avec bordure violette en pointillés.
|
||||
<kbd>⇧</kbd><kbd>⌘</kbd><kbd>K</kbd> — combine deux composants ou plus dans un conteneur avec une bordure violette en pointillés.
|
||||
|
||||
## Créer des instances
|
||||
Clic droit → **Créer une instance**. Apparaît 40 px à droite.
|
||||
Clic droit → **Créer une instance**. L'instance apparaît à droite du composant source.
|
||||
|
||||
## Détacher une instance
|
||||
<kbd>⌥</kbd><kbd>⌘</kbd><kbd>B</kbd> — devient un cadre sans lien.
|
||||
|
||||
## Synchronisation live
|
||||
Modifier un composant met à jour toutes ses instances. Propriétés synchronisées : dimensions, remplissages, contours, effets, opacité, rayons des coins, mise en page.
|
||||
Modifier un composant met à jour automatiquement toutes ses instances. Les propriétés synchronisées incluent les dimensions, les couleurs, les contours, les effets, l'opacité, les coins arrondis et la mise en page.
|
||||
|
||||
## Surcharges
|
||||
Les instances peuvent surcharger des propriétés sans rompre le lien.
|
||||
|
|
|
|||
|
|
@ -40,7 +40,7 @@ Le menu contextuel **Copier en tant que** offre des formats supplémentaires :
|
|||
| Enregistrer | <kbd>⌘</kbd><kbd>S</kbd> | <kbd>Ctrl</kbd> + <kbd>S</kbd> |
|
||||
| Enregistrer sous | <kbd>⇧</kbd><kbd>⌘</kbd><kbd>S</kbd> | <kbd>Shift</kbd> + <kbd>Ctrl</kbd> + <kbd>S</kbd> |
|
||||
|
||||
Compatibilité aller-retour avec Figma.
|
||||
Les fichiers sauvegardés sont compressés et incluent une miniature pour l'aperçu. Compatibilité aller-retour avec Figma.
|
||||
|
||||
## Conseils
|
||||
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@ Click the first point to close into a loop.
|
|||
<kbd>Escape</kbd> to commit as open path.
|
||||
|
||||
## Réseaux vectoriels
|
||||
Vector network data model, compatible with Figma `vectorNetworkBlob`.
|
||||
Les tracés dans OpenPencil utilisent des réseaux vectoriels — un modèle plus flexible que les listes de points simples, qui prend en charge les tracés ramifiés et les topologies complexes. C'est le même modèle que Figma, les tracés sont donc parfaitement conservés dans les fichiers .fig.
|
||||
|
||||
| Action | Mac | Windows / Linux |
|
||||
|--------|-----|-----------------|
|
||||
|
|
|
|||
|
|
@ -28,4 +28,4 @@ Double-cliquez sur un nœud texte pour entrer en mode édition. Cliquez à l'ext
|
|||
| Souligné | <kbd>⌘</kbd><kbd>U</kbd> | <kbd>Ctrl</kbd> + <kbd>U</kbd> |
|
||||
|
||||
## Sélecteur de police
|
||||
Recherche, aperçu et défilement virtuel. Polices système sur desktop (Tauri), Local Font Access API dans le navigateur.
|
||||
Recherche, aperçu et défilement virtuel. Les polices système sont disponibles sur l'application de bureau, ainsi que dans Chrome et Edge.
|
||||
|
|
|
|||
|
|
@ -4,6 +4,8 @@ description: Auto-layout basato su flexbox in OpenPencil.
|
|||
---
|
||||
# Auto-layout
|
||||
|
||||
L'auto-layout posiziona i figli automaticamente all'interno di un frame usando regole flexbox. Gestisce direzione, spaziatura, allineamento e dimensionamento responsivo.
|
||||
|
||||
<kbd>⇧</kbd><kbd>A</kbd> per attivare/disattivare o avvolgere la selezione in un frame auto-layout.
|
||||
|
||||
## Direzione
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ description: Componenti riutilizzabili, istanze, override e sincronizzazione liv
|
|||
# Componenti
|
||||
|
||||
## Creare un componente
|
||||
<kbd>⌥</kbd><kbd>⌘</kbd><kbd>K</kbd> (<kbd>Ctrl</kbd> + <kbd>Alt</kbd> + <kbd>K</kbd>) — converte frame/gruppo in COMPONENT. Etichetta viola con diamante.
|
||||
<kbd>⌥</kbd><kbd>⌘</kbd><kbd>K</kbd> (<kbd>Ctrl</kbd> + <kbd>Alt</kbd> + <kbd>K</kbd>) — converte la selezione in un componente riutilizzabile. I componenti mostrano un'etichetta viola con icona a diamante.
|
||||
|
||||
## Set di componenti
|
||||
<kbd>⇧</kbd><kbd>⌘</kbd><kbd>K</kbd> — combina 2+ componenti in un set con bordo tratteggiato viola.
|
||||
|
|
|
|||
|
|
@ -40,6 +40,8 @@ Il menu contestuale **Copia come** offre formati aggiuntivi:
|
|||
| Salva | <kbd>⌘</kbd><kbd>S</kbd> | <kbd>Ctrl</kbd> + <kbd>S</kbd> |
|
||||
| Salva come | <kbd>⇧</kbd><kbd>⌘</kbd><kbd>S</kbd> | <kbd>Shift</kbd> + <kbd>Ctrl</kbd> + <kbd>S</kbd> |
|
||||
|
||||
I file salvati sono compressi e includono una miniatura per l'anteprima nel file manager.
|
||||
|
||||
Compatibilità round-trip con Figma.
|
||||
|
||||
## Suggerimenti
|
||||
|
|
|
|||
|
|
@ -8,19 +8,19 @@ description: Percorsi vettoriali con curve di Bézier in OpenPencil.
|
|||
**P**
|
||||
|
||||
## Posizionare punti
|
||||
- **Click** — corner point
|
||||
- **Click + drag** — curve point with Bézier tangent handles
|
||||
- **Click** — punto angolare (segmento rettilineo)
|
||||
- **Click + trascina** — punto curvo con maniglie tangenti di Bézier
|
||||
|
||||
## Chiudere un percorso
|
||||
Click the first point to close into a loop.
|
||||
Clicca sul primo punto del percorso per chiuderlo in un anello. I percorsi chiusi possono essere riempiti.
|
||||
|
||||
## Percorsi aperti
|
||||
<kbd>Escape</kbd> to commit as open path.
|
||||
Premi <kbd>Escape</kbd> per confermare il percorso corrente come percorso aperto.
|
||||
|
||||
## Reti vettoriali
|
||||
Vector network data model, compatible with Figma `vectorNetworkBlob`.
|
||||
I percorsi in OpenPencil usano reti vettoriali — un modello più flessibile delle semplici liste di punti, che supporta percorsi ramificati e topologie complesse. Questo è lo stesso modello usato da Figma, quindi i percorsi si preservano perfettamente nei file .fig.
|
||||
|
||||
| Action | Mac | Windows / Linux |
|
||||
| Azione | Mac | Windows / Linux |
|
||||
|--------|-----|-----------------|
|
||||
| Pen tool | P | P |
|
||||
| Commit | Escape | Escape |
|
||||
| Strumento penna | P | P |
|
||||
| Conferma percorso | Escape | Escape |
|
||||
|
|
|
|||
|
|
@ -28,7 +28,11 @@ Doppio click su un nodo testo per entrare in modalità modifica. Clicca fuori pe
|
|||
| Sottolineato | <kbd>⌘</kbd><kbd>U</kbd> | <kbd>Ctrl</kbd> + <kbd>U</kbd> |
|
||||
|
||||
## Selettore font
|
||||
Ricerca, anteprima e scroll virtuale. Font di sistema su desktop (Tauri), Local Font Access API nel browser.
|
||||
Ricerca, anteprima e scroll virtuale.
|
||||
|
||||
## Fonti dei font
|
||||
- **App desktop** — tutti i font di sistema disponibili
|
||||
- **Browser** — font di sistema disponibili in Chrome e Edge
|
||||
|
||||
## Suggerimenti
|
||||
- Input IME (cinese, giapponese, coreano) completamente supportato.
|
||||
|
|
|
|||
|
|
@ -4,6 +4,8 @@ description: Auto-layout oparty na flexbox w OpenPencil.
|
|||
---
|
||||
# Auto-layout
|
||||
|
||||
Auto-layout automatycznie pozycjonuje dzieci wewnątrz ramki, stosując reguły flexbox. Obsługuje kierunek, odstępy, wyrównanie i responsywne rozmiary.
|
||||
|
||||
<kbd>⇧</kbd><kbd>A</kbd> aby włączyć/wyłączyć lub opakować zaznaczenie.
|
||||
|
||||
## Kierunek
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ description: Komponenty wielokrotnego użytku, instancje, nadpisania i synchroni
|
|||
# Komponenty
|
||||
|
||||
## Tworzenie komponentu
|
||||
<kbd>⌥</kbd><kbd>⌘</kbd><kbd>K</kbd> (<kbd>Ctrl</kbd> + <kbd>Alt</kbd> + <kbd>K</kbd>) — konwertuje ramkę/grupę na COMPONENT. Fioletowa etykieta z diamentem.
|
||||
Zaznacz ramkę lub grupę i naciśnij <kbd>⌥</kbd><kbd>⌘</kbd><kbd>K</kbd> (<kbd>Ctrl</kbd> + <kbd>Alt</kbd> + <kbd>K</kbd>). Zaznaczenie staje się komponentem wielokrotnego użytku z fioletową etykietą i ikoną diamentu.
|
||||
|
||||
## Zestawy komponentów
|
||||
<kbd>⇧</kbd><kbd>⌘</kbd><kbd>K</kbd> — łączy 2+ komponenty z fioletową przerywaną ramką.
|
||||
|
|
@ -20,11 +20,21 @@ Prawy przycisk → **Utwórz instancję**. Pojawia się 40 px na prawo.
|
|||
Edycja komponentu aktualizuje wszystkie instancje. Synchronizowane: wymiary, wypełnienia, obrysy, efekty, przezroczystość, promienie narożników, layout.
|
||||
|
||||
## Nadpisania
|
||||
Instancje mogą nadpisywać właściwości bez zrywania powiązania.
|
||||
Instancje mogą nadpisywać wybrane właściwości bez zrywania powiązania z komponentem głównym. Nadpisana właściwość jest pomijana podczas synchronizacji — pozostałe właściwości nadal aktualizują się z komponentu.
|
||||
|
||||
## Hit testing
|
||||
Kliknięcie zaznacza komponent. **Dwuklik** aby wejść i zaznaczyć dzieci.
|
||||
|
||||
## Wygląd
|
||||
|
||||
| Element | Wygląd |
|
||||
|---------|--------|
|
||||
| Etykieta komponentu | Fioletowa z ikoną diamentu |
|
||||
| Etykieta instancji | Fioletowa z ikoną diamentu |
|
||||
| Ramka zestawu | Fioletowa przerywana ramka |
|
||||
|
||||
## Skróty klawiszowe
|
||||
|
||||
| Akcja | Mac | Windows / Linux |
|
||||
|-------|-----|-----------------|
|
||||
| Utwórz komponent | <kbd>⌥</kbd><kbd>⌘</kbd><kbd>K</kbd> | <kbd>Ctrl</kbd> + <kbd>Alt</kbd> + <kbd>K</kbd> |
|
||||
|
|
|
|||
|
|
@ -40,7 +40,7 @@ Menu kontekstowe **Kopiuj jako** oferuje dodatkowe formaty:
|
|||
| Zapisz | <kbd>⌘</kbd><kbd>S</kbd> | <kbd>Ctrl</kbd> + <kbd>S</kbd> |
|
||||
| Zapisz jako | <kbd>⇧</kbd><kbd>⌘</kbd><kbd>S</kbd> | <kbd>Shift</kbd> + <kbd>Ctrl</kbd> + <kbd>S</kbd> |
|
||||
|
||||
Kompatybilność round-trip z Figmą.
|
||||
Pliki eksportowane z OpenPencil można otwierać w Figmie i odwrotnie.
|
||||
|
||||
## Wskazówki
|
||||
|
||||
|
|
|
|||
|
|
@ -31,6 +31,6 @@ OpenPencil to open-source'owy edytor graficzny, kompatybilny z Figmą — w peł
|
|||
|
||||
## Zaawansowane
|
||||
|
||||
- [Auto-layout](./auto-layout) — automatyczne pozycjonowanie oparte na flexbox
|
||||
- [Auto-layout](./auto-layout) — automatyczne pozycjonowanie dzieci w ramce
|
||||
- [Komponenty](./components) — komponenty wielokrotnego użytku, instancje i nadpisania
|
||||
- [Zmienne](./variables) — zmienne projektowe, kolekcje, tryby
|
||||
|
|
|
|||
|
|
@ -18,9 +18,11 @@ Click the first point to close into a loop.
|
|||
<kbd>Escape</kbd> to commit as open path.
|
||||
|
||||
## Sieci wektorowe
|
||||
Vector network data model, compatible with Figma `vectorNetworkBlob`.
|
||||
Ścieżki w OpenPencil korzystają z sieci wektorowych — elastycznego modelu obsługującego rozgałęzione ścieżki i złożoną topologię. Jest to ten sam model, co w Figmie, więc ścieżki zachowują pełną kompatybilność z plikami .fig.
|
||||
|
||||
| Action | Mac | Windows / Linux |
|
||||
|--------|-----|-----------------|
|
||||
| Pen tool | P | P |
|
||||
| Commit | Escape | Escape |
|
||||
## Skróty klawiszowe
|
||||
|
||||
| Akcja | Mac | Windows / Linux |
|
||||
|-------|-----|-----------------|
|
||||
| Narzędzie pióro | P | P |
|
||||
| Zatwierdź | Escape | Escape |
|
||||
|
|
|
|||
|
|
@ -28,4 +28,14 @@ Dwuklik na węźle tekstowym, aby wejść w tryb edycji. Kliknij poza, aby zatwi
|
|||
| Podkreślenie | <kbd>⌘</kbd><kbd>U</kbd> | <kbd>Ctrl</kbd> + <kbd>U</kbd> |
|
||||
|
||||
## Wybór czcionki
|
||||
Wyszukiwanie, podgląd i wirtualne przewijanie. Czcionki systemowe na desktopie (Tauri), Local Font Access API w przeglądarce.
|
||||
Otwórz selektor czcionek w sekcji Typografia panelu właściwości. Dostępne funkcje:
|
||||
|
||||
- **Wyszukiwanie** — wpisz, aby przefiltrować listę
|
||||
- **Podgląd** — każda nazwa czcionki renderowana jest własnym krojem
|
||||
- **Przewijanie do aktualnej** — bieżąca czcionka jest podświetlona po otwarciu
|
||||
|
||||
## Źródła czcionek
|
||||
|
||||
- **Czcionka domyślna** — Inter jest ładowany automatycznie
|
||||
- **Aplikacja desktopowa** — dostępne wszystkie czcionki systemowe
|
||||
- **Przeglądarka** — czcionki systemowe dostępne w Chrome i Edge
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ description: Авто-раскладка на основе flexbox в OpenPencil
|
|||
|
||||
# Авто-раскладка
|
||||
|
||||
Авто-раскладка использует Yoga (движок flexbox) для автоматического позиционирования дочерних элементов внутри фрейма. Она управляет направлением, отступами, выравниванием и адаптивными размерами.
|
||||
Авто-раскладка автоматически позиционирует дочерние элементы внутри фрейма по правилам flexbox. Она управляет направлением, отступами, выравниванием и адаптивными размерами.
|
||||
|
||||
## Включение авто-раскладки
|
||||
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ description: Создание переиспользуемых компонен
|
|||
|
||||
## Создание компонента
|
||||
|
||||
Выделите фрейм или группу и нажмите <kbd>⌥</kbd><kbd>⌘</kbd><kbd>K</kbd> (<kbd>Ctrl</kbd> + <kbd>Alt</kbd> + <kbd>K</kbd>). Узел преобразуется в тип COMPONENT на месте.
|
||||
Выделите фрейм или группу и нажмите <kbd>⌥</kbd><kbd>⌘</kbd><kbd>K</kbd> (<kbd>Ctrl</kbd> + <kbd>Alt</kbd> + <kbd>K</kbd>). Выделение становится многоразовым компонентом.
|
||||
|
||||
Если выделено несколько узлов, они оборачиваются в новый компонент, позиционированный по их ограничивающей рамке.
|
||||
|
||||
|
|
@ -51,9 +51,7 @@ description: Создание переиспользуемых компонен
|
|||
|
||||
### Переопределяемые свойства
|
||||
|
||||
Переопределения на уровне дочерних элементов поддерживают: имя, текст, fontSize, fontWeight, fontFamily, а также все визуальные свойства и свойства раскладки (заливки, обводки, эффекты, прозрачность, скругление углов, размеры).
|
||||
|
||||
Ключи переопределений используют формат `childId:propertyName` в записи переопределений экземпляра.
|
||||
Переопределения на уровне дочерних элементов поддерживают: имя, текст, размер шрифта, насыщенность шрифта, семейство шрифта, а также все визуальные свойства и свойства раскладки (заливки, обводки, эффекты, прозрачность, скругление углов, размеры).
|
||||
|
||||
### Новые дочерние элементы
|
||||
|
||||
|
|
@ -67,9 +65,9 @@ description: Создание переиспользуемых компонен
|
|||
|
||||
| Элемент | Внешний вид |
|
||||
|---------|-------------|
|
||||
| Метка компонента | Фиолетовая (#9747ff) с значком ромба, всегда видна |
|
||||
| Метка экземпляра | Фиолетовая (#9747ff) с значком ромба, всегда видна |
|
||||
| Рамка набора компонентов | Пунктирная фиолетовая (штрих 6 px, промежуток 4 px, толщина 1.5 px) |
|
||||
| Метка компонента | Фиолетовая с значком ромба, всегда видна |
|
||||
| Метка экземпляра | Фиолетовая с значком ромба, всегда видна |
|
||||
| Рамка набора компонентов | Пунктирная фиолетовая рамка |
|
||||
|
||||
## Сочетания клавиш
|
||||
|
||||
|
|
|
|||
|
|
@ -66,7 +66,7 @@ OpenPencil использует формат .fig для полных докум
|
|||
- **Сохранить** — перезаписывает текущий открытый файл без диалога
|
||||
- **Сохранить как** — открывает диалог сохранения для выбора нового местоположения
|
||||
|
||||
Конвейер экспорта кодирует граф сцены в бинарный формат Kiwi, сжимает его и записывает ZIP-архив с данными и миниатюрой.
|
||||
Сохранённые файлы сжимаются и включают миниатюру для предпросмотра.
|
||||
|
||||
### Совместимость двустороннего обмена
|
||||
|
||||
|
|
|
|||
|
|
@ -31,6 +31,6 @@ OpenPencil — это редактор дизайна с открытым исх
|
|||
|
||||
## Продвинутые возможности
|
||||
|
||||
- [Авто-раскладка](./auto-layout) — автоматическое позиционирование на основе flexbox с помощью Yoga
|
||||
- [Авто-раскладка](./auto-layout) — автоматическое позиционирование на основе flexbox
|
||||
- [Компоненты](./components) — переиспользуемые компоненты, экземпляры и переопределения
|
||||
- [Переменные](./variables) — дизайн-переменные, коллекции, режимы и привязка заливок
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@ description: Рисование векторных контуров с крив
|
|||
|
||||
## Векторные сети
|
||||
|
||||
Под капотом контуры используют модель данных векторной сети вместо простых списков точек. Векторные сети позволяют создавать более гибкую топологию (например, ветвящиеся контуры) и кодируются в бинарном формате `vectorNetworkBlob` Figma для совместимости с файлами .fig.
|
||||
Контуры используют модель данных векторной сети вместо простых списков точек. Векторные сети позволяют создавать более гибкую топологию — например, ветвящиеся контуры — и полностью совместимы с форматом .fig.
|
||||
|
||||
## Сочетания клавиш
|
||||
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@ description: Создание и редактирование текста с р
|
|||
|
||||
Дважды кликните по существующему текстовому узлу, чтобы войти в режим встроенного редактирования. Вокруг текста появляется синяя рамка, указывающая на режим редактирования. Кликните за пределами текстового узла, чтобы применить изменения и выйти из редактирования.
|
||||
|
||||
Текст отображается непосредственно на холсте через Paragraph API CanvasKit — видимого наложения текстового поля ввода нет.
|
||||
Текст отображается непосредственно на холсте — видимого наложения текстового поля ввода нет.
|
||||
|
||||
## Навигация курсором
|
||||
|
||||
|
|
@ -47,7 +47,7 @@ description: Создание и редактирование текста с р
|
|||
|
||||
Зачёркивание доступно через кнопку-переключатель **S** в разделе «Типографика» панели свойств (сочетания клавиш нет — <kbd>⌘</kbd><kbd>S</kbd> используется для сохранения).
|
||||
|
||||
Форматирование хранится в виде стилевых последовательностей (стили для каждого символа). Когда вы набираете текст между жирным и обычным сегментами, новый текст наследует стиль предыдущего сегмента.
|
||||
Форматирование применяется к каждому символу. Когда вы набираете текст между жирным и обычным сегментами, новый текст наследует стиль предыдущего сегмента.
|
||||
|
||||
Кнопки-переключатели **B / I / U / S** в разделе «Типографика» панели свойств также применяют форматирование.
|
||||
|
||||
|
|
@ -72,17 +72,17 @@ description: Создание и редактирование текста с р
|
|||
|
||||
## Начертание шрифта
|
||||
|
||||
Измените начертание шрифта в разделе «Типографика» панели свойств. Доступные начертания зависят от выбранного семейства шрифта (например, Regular, Medium, Bold, Black). Начертание применяется к узлу и отображается через текстовые стили CanvasKit.
|
||||
Измените начертание шрифта в разделе «Типографика» панели свойств. Доступные начертания зависят от выбранного семейства шрифта (например, Regular, Medium, Bold, Black).
|
||||
|
||||
## Источники шрифтов
|
||||
|
||||
- **Шрифт по умолчанию** — Inter загружается автоматически
|
||||
- **Настольное приложение (Tauri)** — системные шрифты перечисляются через Rust-бэкенд font-kit и предзагружаются при запуске
|
||||
- **Браузер** — системные шрифты доступны через Local Font Access API (Chrome/Edge)
|
||||
- **Настольное приложение** — системные шрифты обнаруживаются и предзагружаются при запуске
|
||||
- **Браузер** — системные шрифты доступны в поддерживаемых браузерах (Chrome/Edge)
|
||||
|
||||
## Советы
|
||||
|
||||
- Список шрифтов предзагружается при запуске, поэтому панель выбора открывается без задержки.
|
||||
- Ввод через IME (китайский, японский, корейский) полностью поддерживается через скрытое текстовое поле.
|
||||
- Расширенное форматирование сохраняется при импорте/экспорте .fig — стилевые последовательности соответствуют `characterStyleIDs` Figma.
|
||||
- Ввод через IME (китайский, японский, корейский) полностью поддерживается.
|
||||
- Расширенное форматирование сохраняется при импорте/экспорте .fig.
|
||||
- См. [Компоненты](./components) для информации о текстовых переопределениях в экземплярах компонентов.
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ description: Flexbox-based auto layout in OpenPencil — direction, gap, padding
|
|||
|
||||
# Auto Layout
|
||||
|
||||
Auto layout uses Yoga (flexbox engine) to position children automatically within a frame. It handles direction, spacing, alignment, and responsive sizing.
|
||||
Auto layout positions children automatically within a frame using flexbox rules. It handles direction, spacing, alignment, and responsive sizing.
|
||||
## Enabling Auto Layout
|
||||
|
||||
- Select a frame and press <kbd>⇧</kbd><kbd>A</kbd> (<kbd>Shift</kbd> + <kbd>A</kbd>) to toggle auto layout on or off
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ description: Creating reusable components, instances, component sets, overrides,
|
|||
Components are reusable design elements. Edit the main component and all its instances update automatically.
|
||||
## Creating a Component
|
||||
|
||||
Select a frame or group and press <kbd>⌥</kbd><kbd>⌘</kbd><kbd>K</kbd> (<kbd>Ctrl</kbd> + <kbd>Alt</kbd> + <kbd>K</kbd>). The node converts to a COMPONENT type in place.
|
||||
Select a frame or group and press <kbd>⌥</kbd><kbd>⌘</kbd><kbd>K</kbd> (<kbd>Ctrl</kbd> + <kbd>Alt</kbd> + <kbd>K</kbd>). The selection becomes a reusable component.
|
||||
|
||||
If you select multiple nodes, they're wrapped in a new component positioned at their bounding box.
|
||||
|
||||
|
|
@ -50,9 +50,7 @@ Instances can override specific properties without breaking the sync link. When
|
|||
|
||||
### Overridable Properties
|
||||
|
||||
Child-level overrides support: name, text, fontSize, fontWeight, fontFamily, plus all visual and layout properties (fills, strokes, effects, opacity, corner radii, size).
|
||||
|
||||
Override keys use the format `childId:propertyName` in the instance's overrides record.
|
||||
Child-level overrides support: name, text, font size, font weight, font family, plus all visual and layout properties (fills, strokes, effects, opacity, corner radii, size).
|
||||
|
||||
### New Children
|
||||
|
||||
|
|
@ -66,9 +64,9 @@ Components and instances are opaque containers — clicking on a child selects t
|
|||
|
||||
| Element | Appearance |
|
||||
|---------|------------|
|
||||
| Component label | Purple (#9747ff) with diamond icon, always visible |
|
||||
| Instance label | Purple (#9747ff) with diamond icon, always visible |
|
||||
| Component set border | Dashed purple (6 px dash, 4 px gap, 1.5 px width) |
|
||||
| Component label | Purple with diamond icon, always visible |
|
||||
| Instance label | Purple with diamond icon, always visible |
|
||||
| Component set border | Dashed purple outline |
|
||||
|
||||
## Keyboard Shortcuts
|
||||
|
||||
|
|
|
|||
|
|
@ -65,7 +65,7 @@ A file picker dialog opens, filtered for .fig files. On the desktop app, this us
|
|||
- **Save** overwrites the currently open file without a dialog
|
||||
- **Save As** opens a save dialog to choose a new location
|
||||
|
||||
The export pipeline encodes the scene graph to Kiwi binary format, compresses it, and writes a ZIP archive with the payload and a thumbnail image.
|
||||
Saved files are compressed and include a thumbnail image for preview in file browsers.
|
||||
|
||||
### Round-trip Compatibility
|
||||
|
||||
|
|
|
|||
|
|
@ -31,6 +31,6 @@ Throughout this guide, keyboard shortcuts use Mac notation: <kbd>⌘</kbd> = Com
|
|||
|
||||
## Advanced Features
|
||||
|
||||
- [Auto Layout](./auto-layout) — flexbox-based automatic positioning with Yoga
|
||||
- [Auto Layout](./auto-layout) — flexbox-based automatic positioning
|
||||
- [Components](./components) — reusable components, instances, and overrides
|
||||
- [Variables](./variables) — design variables, collections, modes, and fill bindings
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@ Nodes are shown in a collapsible tree. Click the chevron next to a frame, group,
|
|||
|
||||
### Drag Reorder
|
||||
|
||||
Drag layers to reorder them. This changes the node's z-order in the scene graph — nodes higher in the list render on top.
|
||||
Drag layers to reorder them. Nodes higher in the list render on top.
|
||||
|
||||
### Visibility Toggle
|
||||
|
||||
|
|
|
|||
|
|
@ -27,7 +27,7 @@ Press <kbd>Escape</kbd> to commit the current path as an open path. Open paths r
|
|||
|
||||
## Vector Networks
|
||||
|
||||
Under the hood, paths use the vector network data model instead of simple point lists. Vector networks allow more flexible topology (e.g., branching paths) and are encoded in Figma's `vectorNetworkBlob` binary format for .fig file compatibility.
|
||||
Paths in OpenPencil use vector networks — a more flexible model than simple point lists that supports branching paths and complex topology. This is the same model Figma uses, so paths round-trip perfectly in .fig files.
|
||||
|
||||
## Keyboard Shortcuts
|
||||
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ Press <kbd>T</kbd> to activate the text tool, then click on the canvas. An empty
|
|||
|
||||
Double-click any existing text node to enter inline editing mode. A blue outline appears around the text to indicate edit mode. Click outside the text node to commit and exit editing.
|
||||
|
||||
Text is rendered directly on the canvas using CanvasKit's Paragraph API — there's no visible text input overlay.
|
||||
Text is rendered directly on the canvas — there's no separate text input overlay.
|
||||
|
||||
## Cursor Navigation
|
||||
|
||||
|
|
@ -46,7 +46,7 @@ Apply formatting to selected text, or toggle the style for the entire node when
|
|||
|
||||
Strikethrough is available via the **S** toggle button in the Typography section of the properties panel (no keyboard shortcut — <kbd>⌘</kbd><kbd>S</kbd> is used for Save).
|
||||
|
||||
Formatting is stored as style runs (per-character styles). When you type between a bold and regular segment, the new text inherits the style of the preceding segment.
|
||||
Formatting is applied per character. When you type between a bold and regular segment, the new text inherits the style of the preceding segment.
|
||||
|
||||
The **B / I / U / S** toggle buttons in the Typography section of the properties panel also apply formatting.
|
||||
|
||||
|
|
@ -71,17 +71,17 @@ Open the font picker in the Typography section of the properties panel to change
|
|||
|
||||
## Font Weight
|
||||
|
||||
Change the font weight in the Typography section of the properties panel. Available weights depend on the selected font family (e.g., Regular, Medium, Bold, Black). The weight is applied per-node and renders via CanvasKit text styles.
|
||||
Change the font weight in the Typography section of the properties panel. Available weights depend on the selected font family (e.g., Regular, Medium, Bold, Black).
|
||||
|
||||
## Font Sources
|
||||
|
||||
- **Default font** — Inter is loaded automatically
|
||||
- **Desktop (Tauri)** — system fonts are enumerated via the font-kit Rust backend and preloaded on startup
|
||||
- **Browser** — system fonts are available via the Local Font Access API (Chrome/Edge)
|
||||
- **Desktop app** — all system fonts are available
|
||||
- **Browser** — system fonts are available in Chrome and Edge
|
||||
|
||||
## Tips
|
||||
|
||||
- The font list is preloaded at startup so the picker opens without delay.
|
||||
- IME input (Chinese, Japanese, Korean) is fully supported through the phantom textarea.
|
||||
- Rich text formatting survives .fig import/export — style runs map to Figma's `characterStyleIDs`.
|
||||
- IME input (Chinese, Japanese, Korean) is fully supported.
|
||||
- Rich text formatting is preserved when opening and saving .fig files.
|
||||
- See [Components](./components) for how text overrides work in component instances.
|
||||
|
|
|
|||
Loading…
Reference in a new issue