* docs: polish localized documentation - Rewrite Russian documentation for natural terminology and current source parity\n- Continue the Polish editorial pass across guides and SDK references\n- Refresh shared localized SDK API data imports * docs(pl): complete editorial pass - Rewrite the remaining advanced Vue SDK references\n- Refresh the Figma compatibility matrix against the canonical source\n- Align terminology and behavior across every Polish documentation page * docs(de): complete editorial pass - Rewrite German guides, automation docs, and Vue SDK references\n- Restore current AI, export, component, and variable behavior\n- Refresh the Penpot comparison and Figma compatibility matrix * docs(es): complete editorial pass - Rewrite Spanish guides, automation docs, and Vue SDK references\n- Restore current AI, export, component, and variable behavior\n- Refresh the Penpot comparison and Figma compatibility matrix * docs(fr): complete editorial pass - Rewrite French guides, automation docs, and Vue SDK references\n- Restore current AI, export, component, and variable behavior\n- Refresh the Penpot comparison and Figma compatibility matrix * docs: correct localized terminology - Replace unnecessary English prose with natural localized terminology\n- Derive documentation aliases from named directory roots\n- Preserve English only for identifiers, APIs, and exact product terms * docs(it): continue editorial pass - Rewrite Italian user guides and automation documentation\n- Update Vue SDK composables and component references\n- Restore current AI, export, component, and variable behavior * docs(it): complete editorial pass - Finish Italian advanced SDK and reference documentation\n- Refresh the Penpot comparison and Figma compatibility matrix\n- Replace literal machine translations with natural technical prose * docs(pl): refine property panel terminology * docs: refine remaining localized prose - Replace overfitted English prose in Polish feature documentation\n- Rewrite the Russian property-list reference in natural terminology * docs(ru): rewrite Penpot comparison naturally - Replace remaining English prose with natural Russian\n- Preserve code identifiers and library names only where required * docs: rewrite localized feature overviews naturally - Replace avoidable English prose in German, Spanish, and French\n- Keep identifiers and product names unchanged * docs(de): refine property panel terminology * docs: refine Spanish and French SDK terminology * docs(ru): continue full prose audit - Rewrite homepage, setup, navigation, and guide index naturally\n- Restore missing zoom shortcuts * docs(ru): audit user and automation guides - Rewrite selection, collaboration, and automation prose naturally\n- Preserve API identifiers while localizing ordinary terminology * docs(ru): audit CLI inspection and analysis * docs(ru): audit Vue SDK overview and guides * docs(ru): audit Vue SDK API prose - Localize ordinary component and composable terminology\n- Preserve API symbols and code identifiers * docs(ru): audit advanced and gradient API references * docs(ru): finish advanced API prose audit * docs(ru): audit JSX renderer guide * docs(ru): audit CLI export and scripting guides * docs(pl): audit Penpot comparison prose * docs(pl): audit selection and automation guides * docs(pl): audit homepage and variable guides * docs(pl): audit vector, layers, and Pen guides * docs(pl): audit Auto layout and shape guides * docs(pl): audit context menu and export guides * docs(pl): audit JSX and analysis guides * docs(pl): audit AI Chat guide * docs(pl): audit components and CLI inspection * docs(pl): audit scripting and SDK overview prose * docs(pl): audit SDK API indexes * docs(pl): audit SDK component references * docs(pl): audit SDK composable references * docs(ru): refine usePosition terminology * docs(pl): audit advanced SDK references * docs(pl): audit Figma compatibility matrix * docs(pl): finish residual SDK terminology audit * docs(pl): finish component terminology audit * docs(pl): finish SDK guide terminology audit * docs(de): begin full user guide prose audit * docs(de): audit navigation, Pen, and layers guides * docs(de): audit Auto Layout, shapes, menu, and export * docs(de): audit components, text, and vector guides * docs(de): audit variables and automation overview * docs(de): audit AI Chat and collaboration guides * docs(de): audit CLI inspection, analysis, and export * docs(de): audit scripting and JSX guides * docs(de): audit Vue SDK overview and guides * docs(de): audit SDK API indexes * docs(de): audit SDK component references * docs(de): audit SDK composable references * docs(de): audit advanced SDK references * docs(de): audit Penpot comparison prose * docs(de): audit Figma compatibility reference * docs(es): begin full user guide prose audit * docs(es): audit document organization guides * docs(es): audit editing workflow guides * docs(es): audit automation and collaboration prose * docs(es): audit CLI inspection and export guides * docs(es): audit CLI scripting guide * docs(es): audit JSX and feature overview prose * docs(es): audit Penpot comparison prose * docs(es): audit SDK overview and guides * docs(es): begin SDK component reference audit * docs(es): audit SDK navigation component references * docs(es): audit SDK color and layout components * docs(es): begin SDK composable reference audit * docs(es): audit SDK property composable references * docs(es): audit SDK editor composable references * docs(es): begin advanced SDK reference audit * docs(es): audit advanced SDK state references * docs(es): complete advanced SDK reference audit * docs(es): audit Figma compatibility reference * docs(es): complete residual terminology sweep * docs(fr): begin full prose second audit * docs(fr): audit AI and variables prose * docs(fr): audit core user guide prose * docs(fr): audit editing workflow guides * docs(fr): audit CLI and JSX prose * docs(fr): audit Penpot comparison prose * docs(fr): audit SDK overview and guides * docs(fr): begin SDK API reference audit * docs(fr): audit SDK navigation component references * docs(fr): audit SDK color and layout components * docs(fr): begin SDK composable reference audit * docs(fr): audit SDK property composable references * docs(fr): audit editor composables and advanced APIs * docs(fr): audit advanced SDK state references * docs(fr): complete advanced SDK reference audit * docs(fr): audit Figma compatibility reference * docs(fr): complete residual terminology sweep * docs(it): begin full prose second audit * docs(it): audit document workflow guides * docs(it): audit editing and automation prose * docs(it): audit CLI and JSX prose * docs(it): audit Penpot comparison and SDK guides * docs(it): begin SDK API reference audit * docs(it): audit SDK component and state references * docs(it): audit residual SDK references * docs(it): audit Figma compatibility reference * docs(it): complete residual terminology sweep * docs(i18n): verify residual locale terminology
5.1 KiB
Funkcje
Pliki Figma
OpenPencil otwiera i zapisuje pliki .fig bez wcześniejszej konwersji. Import i eksport korzystają z binarnego kodeka Kiwi używanego przez Figmę: 194 definicje schematu i około 390 pól dla każdego obiektu. Zapisz: ⌘S; Zapisz jako: ⇧⌘S.
Kopiowanie między Figmą a OpenPencil: skopiuj obiekty w jednym edytorze i wklej w drugim. Zachowywane są zalewy, obwiednie, automatyczny układ, tekst, efekty, promienie narożników i sieci wektorowe. Wymiana działa w obie strony.
Rysowanie i edycja
- Figury: prostokąt, elipsa, linia, wielokąt i gwiazda.
- Pióro: sieci wektorowe, krzywe Béziera i uchwyty stycznych.
- Tekst: edycja bezpośrednio na obszarze roboczym i obsługa IME.
- Formatowanie tekstu: pogrubienie, kursywa, podkreślenie i przekreślenie wybranych zakresów.
- Automatyczny układ: Flexbox i CSS Grid przez Yoga WASM; kierunek, odstępy, wypełnienie, wyrównanie, rozmiary i ścieżki siatki.
- Komponenty: tworzenie komponentów i zestawów, egzemplarze, nadpisania oraz automatyczna synchronizacja.
- Zmienne: tokeny projektu z kolekcjami, trybami Light i Dark, typami Color, Float, String i Boolean oraz powiązaniami.
- Sekcje: kontenery najwyższego poziomu przejmujące przecinające się obiekty.
Panel właściwości
Zawartość kart „Projekt”, „Kod” i „AI” zależy od zaznaczenia.
- Wygląd: przezroczystość, wspólny lub osobny promień narożników i widoczność.
- Zalew: kolor jednolity, gradient liniowy, radialny, kątowy lub diamentowy oraz obraz.
- Obwiednia: kolor, grubość, wyrównanie, osobna grubość boków, zakończenia, łączenia i kreskowanie.
- Efekty: cień zewnętrzny i wewnętrzny, rozmycie warstwy, tła i pierwszego planu.
- Typografia: wybór czcionki z wyszukiwaniem i wirtualnym przewijaniem, odmiana, rozmiar, wyrównanie i formatowanie.
- Układ: ustawienia automatycznego układu.
- Eksport: skala, format PNG/JPG/WEBP/SVG i podgląd.
Renderowanie
OpenPencil używa Skia przez CanvasKit WASM — tego samego silnika graficznego co Figma:
- gradienty liniowe, radialne, kątowe i diamentowe;
- zalewy obrazami z różnymi trybami skalowania;
- pamięć podręczna efektów osobnych obiektów;
- łuki, częściowe elipsy i pierścienie;
- pomijanie obiektów poza widokiem i ponowne użycie pędzli;
- prowadnice przyciągania z uwzględnieniem obrotu;
- linijki z zakresem zaznaczenia;
- podświetlenie zgodne z rzeczywistą geometrią.
Cofanie i ponawianie
Można cofnąć tworzenie, usuwanie, przesuwanie, zmianę rozmiaru, właściwości i rodzica, układ oraz zmienne. Skróty: ⌘Z i ⇧⌘Z.
Strony i dokumenty
Strony można dodawać, usuwać i przemianowywać; każda zachowuje własne położenie i skalę widoku. Wiele dokumentów można otworzyć w kartach.
Eksport
- Obrazy: PNG, JPG i WEBP w skali od 0,5× do 4×.
- SVG: figury, tekst z zakresami stylów, gradienty, efekty i tryby mieszania.
- Tailwind JSX: HTML z klasami Tailwind v4 dla React lub Vue.
- Kopiuj jako: tekst, SVG, PNG albo JSX przez menu kontekstowe.
openpencil export design.fig -f jsx --style tailwind
Czat AI
Naciśnij ⌘J. Ponad 90 narzędzi tworzy figury, zmienia style i układ, pracuje z komponentami i zmiennymi, wykonuje operacje logiczne, analizuje tokeny projektu i eksportuje zasoby. Można podłączyć Anthropic, OpenAI, Google AI, OpenRouter albo zgodny punkt końcowy.
Wywołania narzędzi pojawiają się na zwijanej osi czasu. Do kontroli wizualnej asystent eksportuje wynik i porównuje go z poleceniem. Wszystkie zmiany AI można cofnąć.
Serwer MCP
Claude Code, Cursor, Windsurf i inni klienci MCP mogą odczytywać i zmieniać .fig bez interfejsu. Dostępnych jest ponad 90 narzędzi oraz transporty stdio i HTTP.
npm install -g @open-pencil/mcp
CLI
openpencil tree design.fig # Drzewo obiektów
openpencil find design.fig --type TEXT # Wyszukiwanie
openpencil export design.fig -f png # Eksport
openpencil analyze colors design.fig # Analiza kolorów
openpencil analyze clusters design.fig # Powtarzające się struktury
openpencil eval design.fig -c "..." # Figma Plugin API
Wszystkie polecenia obsługują --json. Instalacja: npm install -g @open-pencil/cli albo bun add -g @open-pencil/cli.
Współpraca w czasie rzeczywistym
Połączenie równorzędne WebRTC nie wymaga centralnego serwera. Udostępnij odnośnik i edytuj dokument wspólnie z innymi osobami, korzystając z kursorów, informacji o obecności i trybu śledzenia.
Wersja komputerowa i internetowa
Komputer: Tauri v2, około 7 MB, dla macOS, Windows i Linux, z menu systemowymi, pracą bez sieci i automatycznym zapisem.
Internet: app.openpencil.dev, możliwość instalacji jako PWA i interfejs dotykowy.
Zastępcze ładowanie Google Fonts
Jeśli czcionka nie jest dostępna lokalnie, OpenPencil automatycznie pobiera ją z Google Fonts. Ręczna instalacja nie jest potrzebna.