# Funkcje
## Pliki .fig Figmy
Otwieraj i zapisuj natywne pliki Figmy bezpośrednio. Pipeline importu/eksportu używa tego samego binarnego kodeka Kiwi co Figma — 194 definicje schematu, ~390 pól na węzeł. Zapisz: ⌘S, Zapisz jako: ⇧⌘S.
**Kopiuj i wklej z Figmą** — zaznacz węzły w Figmie, ⌘C, przełącz się na OpenPencil, ⌘V. Wypełnienia, obrysy, auto-layout, tekst, efekty, promienie narożników i sieci wektorowe są zachowane. Działa w obie strony.
## Rysowanie i edycja
- **Kształty** — Prostokąt (R), Elipsa (O), Linia (L), Wielokąt, Gwiazda
- **Narzędzie pióro** — sieci wektorowe (nie proste ścieżki), krzywe Béziera z uchwytami stycznych
- **Tekst** — natywna edycja na canvasie z obsługą IME, podwójne kliknięcie aby wejść w tryb edycji
- **Tekst bogaty** — formatowanie per-znak: pogrubienie (⌘B), kursywa (⌘I), podkreślenie (⌘U), przekreślenie
- **Auto-layout** — flexbox przez Yoga WASM: kierunek, gap, padding, justify, align, wymiarowanie dzieci. ⇧A aby przełączyć
- **Komponenty** — tworzenie (⌥⌘K), zestawy komponentów (⇧⌘K), instancje z obsługą nadpisań, synchronizacja na żywo
- **Zmienne** — tokeny projektowe z kolekcjami, trybami (Light/Dark), typami color/float/string/boolean, wiązaniem zmiennych
- **Sekcje** — kontenery organizacyjne z automatyczną adopcją dzieci i pigułkami tytułu
## Panel właściwości
Kontekstowe karty Design | Kod | AI:
- **Wygląd** — przezroczystość, promień narożnika (jednolity lub per-narożnik), widoczność
- **Wypełnienie** — jednolite, gradient (liniowy/radialny/kątowy/diamentowy), obraz
- **Obrys** — kolor, grubość, wyrównanie (wewnątrz/środek/na zewnątrz), grubości per-strona, zakończenie, łączenie, kreska
- **Efekty** — cień rzutowany, cień wewnętrzny, rozmycie warstwy, rozmycie tła, rozmycie pierwszego planu
- **Typografia** — wybieracz czcionek z wirtualnym przewijaniem i wyszukiwaniem, grubość, rozmiar, wyrównanie, przyciski stylu
- **Layout** — kontrolki auto-layoutu gdy włączony
- **Eksport** — skala, format (PNG/JPG/WEBP/SVG), podgląd na żywo
## Renderowanie
Skia (CanvasKit WASM) — ten sam silnik renderowania co Figma:
- Wypełnienia gradientowe (liniowe, radialne, kątowe, diamentowe)
- Wypełnienia obrazem z trybami skalowania
- Efekty z cache'owaniem per-węzeł
- Dane łuku (częściowe elipsy, donuty)
- Culling viewportu i ponowne użycie paint
- Prowadnice snap z wyrównywaniem uwzględniającym rotację
- Linijki canvasu z badge'ami zaznaczenia
- Podświetlenie przy najechaniu podążające za rzeczywistą geometrią
## Cofnij/Ponów
Każda operacja jest cofalna — tworzenie, usuwanie, przesuwanie, zmiana rozmiaru, zmiana właściwości, zmiana rodzica, zmiany layoutu, operacje na zmiennych. Wzorzec komendy odwrotnej. ⌘Z / ⇧⌘Z.
## Dokumenty wielostronicowe
Dodawaj, usuwaj, zmieniaj nazwy stron. Każda strona ma niezależny stan viewportu. Podwójne kliknięcie aby zmienić nazwę inline.
## Karty wieloplikowe
Otwieraj wiele dokumentów w kartach. ⌘T nowa karta, ⌘W zamknij, ⌘O otwórz plik.
## Eksport
- **Obraz** — PNG, JPG, WEBP w konfigurowalnej skali (0,5×–4×). Przez panel, menu kontekstowe lub ⇧⌘E
- **SVG** — kształty, tekst z przebiegami stylów, gradienty, efekty, tryby mieszania
- **Tailwind JSX** — HTML z klasami utility Tailwind v4, gotowy dla React lub Vue
- **Kopiuj jako** — tekst, SVG, PNG (⇧⌘C) lub JSX przez menu kontekstowe
CLI: `openpencil export design.fig -f jsx --style tailwind`
## Chat AI
Naciśnij ⌘J aby otworzyć asystenta AI. 90+ narzędzi do tworzenia kształtów, ustawiania stylów, zarządzania layoutem, pracy z komponentami i zmiennymi, operacji boolowskich, analizy tokenów projektowych i eksportu zasobów. Połącz Anthropic, OpenAI, Google AI, OpenRouter lub dowolny kompatybilny endpoint.
Wywołania narzędzi wyświetlane jako zwijane wpisy. Weryfikacja wizualna — asystent renderuje swoją pracę i porównuje z Twoim żądaniem. Pełne wsparcie cofania dla wszystkich mutacji AI.
Zobacz [Czat AI](/programmable/ai-chat) dla konfiguracji i szczegółów dostawców.
## Serwer MCP
Podłącz Claude Code, Cursor, Windsurf lub dowolnego klienta MCP do odczytu i zapisu plików `.fig` headlessly. 90+ narzędzi. Dwa transporty: stdio i HTTP.
```sh
npm install -g @open-pencil/mcp
```
```json
{
"mcpServers": {
"open-pencil": {
"command": "openpencil-mcp"
}
}
}
```
Zobacz [Referencja narzędzi MCP](/programmable/mcp-server) dla pełnej listy narzędzi.
## CLI
Inspekcja, eksport i analiza plików `.fig` z terminala:
```sh
openpencil tree design.fig # Drzewo węzłów
openpencil find design.fig --type TEXT # Wyszukiwanie
openpencil export design.fig -f png # Renderowanie
openpencil analyze colors design.fig # Audyt kolorów
openpencil analyze clusters design.fig # Powtarzające się wzorce
openpencil eval design.fig -c "..." # Figma Plugin API
```
Gdy aplikacja desktopowa jest uruchomiona, pomiń plik aby sterować edytorem na żywo przez RPC:
```sh
openpencil tree # Aktywny dokument
openpencil export -f png # Zrzut ekranu canvasu
```
Wszystkie komendy obsługują `--json`. Instalacja: `npm install -g @open-pencil/cli`
## Współpraca w czasie rzeczywistym
P2P przez WebRTC — bez serwera. Udostępnij link i edytujcie razem.
- Kursory na żywo z kolorowymi strzałkami i pigułkami imion
- Awatary obecności
- Tryb śledzenia — kliknij peera aby śledzić jego viewport
- Lokalna persystencja przez IndexedDB
- Bezpieczne ID pokojów przez `crypto.getRandomValues()`
## Desktop i Web
**Desktop** — Tauri v2, ~7 MB. macOS (podpisany i notaryzowany), Windows, Linux. Natywne menu, tryb offline, automatyczny zapis.
**Web** — działa na [app.openpencil.dev](https://app.openpencil.dev), instalowalny jako PWA na urządzeniach mobilnych z UI zoptymalizowanym pod dotyk.
**Homebrew:**
```sh
brew install open-pencil/tap/open-pencil
```
## Google Fonts Fallback
Gdy czcionka nie jest dostępna lokalnie, OpenPencil pobiera ją automatycznie z Google Fonts. Nie trzeba ręcznie instalować czcionek przy otwieraniu plików .fig z nieznanymi fontami.