openpencil/packages/docs/pl/guide/features.md

Funkcje

Dlaczego OpenPencil

Narzędzia projektowe to problem łańcucha dostaw. Gdy narzędzie jest zamknięte, dostawca kontroluje co jest możliwe — może zepsuć automatyzację z dnia na dzień. OpenPencil to alternatywa open-source: licencja MIT, kompatybilny z Figmą, w pełni lokalny i programowalny.

Import i eksport plików .fig Figmy

Otwieraj i zapisuj natywne pliki Figmy bezpośrednio. Import dekoduje pełny schemat Kiwi z 194 definicjami w tym wiadomości NodeChange z ~390 polami. Eksport koduje graf sceny z powrotem do binarnego Kiwi z kompresją Zstd i generowaniem miniatur. Zapisz (⌘S) i Zapisz jako (⇧⌘S) używają natywnych okien dialogowych OS.

Kopiuj i wklej z Figmą

Zaznacz węzły w Figmie, ⌘C, przełącz się na OpenPencil, ⌘V — pojawiają się z wypełnieniami, obrysami, auto-layoutem, tekstem, promieniami narożników, efektami i sieciami wektorowymi. Działa też w drugą stronę.

Wklejanie obsługuje złożone scenariusze: ścieżki wektorowe są skalowane z normalizedSize Figmy, dzieci instancji są wypełniane z symbolData komponentu, zestawy komponentów są wykrywane, a symbolOverrides są stosowane. Czcionki są ładowane automatycznie.

Sieci wektorowe

Narzędzie pióro używa modelu sieci wektorowej Figmy — nie prostych ścieżek. Kliknij dla punktów narożnych, kliknij+przeciągnij dla krzywych Béziera. Obsługa ścieżek otwartych i zamkniętych.

Narzędzia kształtów

Pasek narzędzi udostępnia wszystkie podstawowe narzędzia kształtów Figmy: Prostokąt (R), Elipsa (O), Linia (L), Wielokąt i Gwiazda. Wszystkie obsługują wypełnienie, obrys, podświetlenie przy najechaniu i kontur zaznaczenia.

Auto-Layout

Yoga WASM zapewnia layout CSS flexbox. Ramki obsługują: kierunek, gap, padding, justify, align i wymiarowanie dzieci. Shift+A przełącza auto-layout.

Edycja tekstu inline

Natywna edycja tekstu na canvasie. Podwójne kliknięcie na węźle tekstowym wchodzi w tryb edycji. Wybieracz czcionek z wirtualnym przewijaniem, filtrem wyszukiwania i podglądem CSS. W Tauri czcionki systemowe są enumerowane przez crate Rust font-kit.

Formatowanie tekstu bogatego

Formatowanie per-znak: ⌘B pogrubienie, ⌘I kursywa, ⌘U podkreślenie, lub przyciski B/I/U/S. Zaimplementowane przez model StyleRun. Zachowane przy imporcie/eksporcie .fig.

Cofnij/Ponów

Każda operacja jest cofalna. Wzorzec komendy odwrotnej. ⌘Z cofa, ⇧⌘Z ponawia.

Prowadnice snap

Przyciąganie do krawędzi i centrów z czerwonymi liniami prowadzącymi. Uwzględnia rotację.

Linijki canvasu

Linijki na górze i po lewej pokazują skale współrzędnych z badge'ami współrzędnych przy zaznaczeniu.

Wybieracz kolorów i typy wypełnień

Wybór koloru HSV ze sliderem odcienia, sliderem alfa, wejściem hex i kontrolą przezroczystości. Typy: Jednolity, Gradient (Liniowy, Radialny, Kątowy, Diamentowy) i Obraz.

Panel warstw

Widok drzewa hierarchii dokumentu. Panele są zmiennych rozmiarów.

Panel właściwości

Interfejs z kartami Design | Kod | AI. Karta Design pokazuje sekcje kontekstowe: Wygląd, Wypełnienie, Obrys, Efekty, Typografia, Layout, Pozycja, Eksport i Strona.

Grupuj/Rozgrupuj

⌘G grupuje. ⇧⌘G rozgrupowuje. Węzły są sortowane wg pozycji wizualnej.

Sekcje

Sekcje (S) to kontenery organizacyjne najwyższego poziomu na canvasie z pigułkami tytułu i automatyczną inwersją koloru tekstu.

Dokumenty wielostronicowe

Dokumenty obsługują wiele stron. Każda strona utrzymuje niezależny stan viewportu.

Podświetlenie przy najechaniu

Węzły podświetlają się konturem podążającym za rzeczywistą geometrią.

Zaawansowane renderowanie (Tier 1)

Renderer CanvasKit obsługuje pełne cechy wizualne Tier 1: wypełnienia gradientowe, wypełnienia obrazem, efekty, właściwości obrysu, dane łuku, culling viewportu, ponowne użycie Paint i koalescencja RAF.

Komponenty i instancje

Komponenty wielokrotnego użytku (⌥⌘K), zestawy (⇧⌘K), instancje przez menu kontekstowe, odłącz (⌥⌘B). Synchronizacja na żywo i obsługa nadpisań. Fioletowe etykiety z ikoną diamentu.

Zmienne

Tokeny projektowe z kolekcjami i trybami. Dialog TanStack Table. Obsługuje COLOR z pełnym UI, FLOAT/STRING/BOOLEAN zdefiniowane. Wszystkie operacje są cofalne.

Eksport obrazów

PNG, JPG, WEBP ze skalą 0,5×–4×, podgląd na żywo i ⇧⌘E.

Menu kontekstowe

Kliknij prawym dla: Schowek, Kolejność Z, Grupowanie, Komponenty (fioletowe pozycje), Widoczność, Przenieś na stronę.

Kolejność Z, widoczność i blokada

] przenosi na wierzch, [ wysyła na spód. ⇧⌘H widoczność. ⇧⌘L blokada.

Aplikacja webowa i desktopowa

OpenPencil działa w przeglądarce na app.openpencil.dev. Aplikacja desktopowa używa Tauri v2 (~5 MB). Działa w pełni offline.

Menu aplikacji (przeglądarka)

Pasek menu z reka-ui: Plik, Edycja, Widok, Obiekt, Tekst, Rozmieszczenie. Skróty klawiszowe dostosowane do platformy. Ukryte w Tauri.

Automatyczny zapis

Pliki zapisywane 3 sekundy po ostatniej zmianie. Debounce na sceneVersion. Wyłączone dla nowych dokumentów bez tytułu.

Współpraca P2P

Współpraca peer-to-peer w czasie rzeczywistym — bez serwera. Oparta na Trystero (WebRTC) + Yjs (CRDT).

• Zero kosztów hostingu — sygnalizacja przez publiczne brokery MQTT
• Traversal NAT — serwery Google STUN, Cloudflare STUN i Open Relay TURN
• Kursory na żywo — kolorowe strzałki w stylu Figmy z pigułkami imion
• Obecność — kolorowe awatary
• Tryb śledzenia — kliknij awatar peera aby śledzić jego viewport
• Lokalna persystencja — y-indexeddb utrzymuje pokój między przeładowaniami
• Bezpieczne pokoje — ID przez crypto.getRandomValues()

Karty wieloplikowe

Otwieraj wiele dokumentów w kartach. ⌘N/⌘T nowa karta, ⌘W zamknij, ⌘O otwórz w nowej karcie. Każda karta utrzymuje własny stan dokumentu.

Renderowanie efektów

Pełne renderowanie efektów Figmy: Cień rzutowany, Cień wewnętrzny, Rozmycie warstwy (Gaussowskie), Rozmycie tła (efekt szkła/matowania), Rozmycie pierwszego planu. Cache SkPicture per węzeł dla wydajności.

Właściwości wielokrotnego zaznaczenia

Zaznacz wiele węzłów i edytuj wspólne właściwości. Wspólne wartości wyświetlane normalnie, różne pokazują "Mixed". Odwróć H/V dotyczy wszystkich węzłów.

ScrubInput

Wszystkie wejścia numeryczne używają interakcji przeciągnij-aby-zmienić. Obsługuje sufiksy (°, px, %).

Budowanie CI/CD

GitHub Actions buduje aplikacje Tauri na tagach wersji. macOS podpisany i notaryzowany. Noty wydania auto-wypełniane z CHANGELOG.md.

@open-pencil/core i CLI

Silnik wyodrębniony do packages/core/. CLI udostępnia: info, tree, find, export, analyze, node, pages, variables, eval. Wszystko obsługuje --json. Komenda eval wykonuje JavaScript z API Plugin Figma. Zobacz Komenda Eval.

Renderer JSX

Programistyczne tworzenie designu przez buildery TreeNode. Propsy shorthand w stylu Tailwind.

Chat AI

Wbudowany asystent AI przez ⌘J. 87 narzędzi w packages/core/src/tools/ obejmujących: odczyt, tworzenie, modyfikację, manipulację węzłów, CRUD zmiennych, narzędzia wektorowe, kontrolę viewportu i eval. Serwer MCP udostępnia 90 narzędzi łącznie (87 core + 3 zarządzanie plikami) dla zewnętrznych narzędzi kodowania AI.

AI agent skill — npx skills add open-pencil/skills@open-pencil — teaches AI coding agents to use the CLI, MCP tools, and automation bridge. Source: open-pencil/skills.

Eksport SVG

Eksportuje wybrane węzły jako PNG, JPG, WEBP lub SVG. CLI: bun open-pencil export --format svg file.fig.

Kopiuj jako

Podmenu Kopiuj jako w menu kontekstowym oferuje: Kopiuj jako tekst, SVG, PNG (⇧⌘C), JSX.

Wyrównanie obrysu i grubości per-strona

Wyrównanie: Wewnątrz, Środek lub Na zewnątrz. Indywidualne grubości per-strona (Góra/Prawo/Dół/Lewo).

Układ mobilny & PWA

Instalowalne jako PWA. Na urządzeniach mobilnych panele boczne zastąpione przez wysuwaną szufladę dolną z zakładkami.

Eksport Tailwind CSS v4

Zakładka Kod oferuje przełącznik między OpenPencil JSX a Tailwind CSS v4 (HTML z klasami utility).

Google Fonts Fallback

Gdy czcionka nie jest dostępna lokalnie, OpenPencil ładuje ją automatycznie z Google Fonts API.

Homebrew Tap

Na macOS: brew install open-pencil/tap/open-pencil

Inline zmiana nazwy warstw

Dwuklik na nazwie warstwy aby ją zmienić. Enter lub klik poza polem zatwierdza, Escape anuluje.

Profiler renderowania

Nakładka HUD z metrykami czasu renderowania. Dostępna z menu Widok.

Panel kodu

Karta Kod pokazuje JSX zaznaczenia z podświetlaniem składni Prism.js i kopiowaniem.

Jakość kodu

Wykrywanie kopiuj-wklej przez jscpd — duplikacja zredukowana z 15,6% do 0,62%. Pipeline importu zoptymalizowany z O(n²) do O(n).