--- title: Eksport description: Eksport zawartości dokumentu do PNG, JPG, WEBP, SVG, .fig, JSX, HTML lub historyjek Storybook i konwersja między formatami. --- # Eksport CLI eksportuje projekt do raster images, vector graphics, osobnych dokumentów `.fig`, JSX, HTML albo historyjek Storybook. ## Obrazy i .fig ```sh openpencil export design.fig # PNG domyślnie openpencil export design.fig -f jpg -s 2 -q 90 # JPG, skala 2×, jakość 90 openpencil export design.fig -f webp -s 3 # WEBP, skala 3× openpencil export design.fig -f svg # SVG openpencil export design.fig -f fig --page "Page 1" # Jedna strona w osobnym .fig openpencil export design.fig -f fig --node 1:23 # Jeden obiekt w osobnym .fig openpencil export design.fig -f html --css tailwind # Fragment HTML z klasami Tailwind ``` Opcje: - `-f` — format: `png`, `jpg`, `webp`, `svg`, `jsx`, `html`, `fig` albo `storybook`; - `-s` — skala od `1` do `4`; - `-q` — jakość od `0` do `100`, tylko dla JPG i WEBP; - `-o` — ścieżka pliku wynikowego; - `--page` — nazwa strony; - `--node` — ID obiektu. ## JSX Aby otrzymać JSX z utility classes Tailwind: ```sh openpencil export design.fig -f tailwind-jsx # albo: -f jsx --style tailwind ``` Przykład wyniku: ```html

Card Title

Description text

``` Opcja `--style openpencil` wybiera własny format JSX OpenPencil. Więcej informacji znajduje się na stronie [JSX renderer](../jsx-renderer). ## HTML Domyślnie polecenie tworzy fragment HTML z inline styles. Zamiast nich można użyć utility classes Tailwind: ```sh openpencil export design.fig -f html openpencil export design.fig -f html --css tailwind ``` Opcja `--html standalone` tworzy pełny dokument HTML, który można otworzyć w przeglądarce. Zawiera reset styles i wrapper strony. Format jest przeznaczony do przekazywania projektu i kodu, a nie do pełnego pixel-perfect odtworzenia renderer: ```sh openpencil export design.fig -f html --html standalone --css inline openpencil export design.fig -f html --html standalone --css tailwind openpencil export design.fig -f html --html standalone --css tailwind --assets external ``` Podczas standalone export Tailwind CSS jest od razu kompilowany, więc browser runtime Tailwind nie jest potrzebny. `--assets external` zapisuje CSS i wyodrębnione obrazy obok HTML. W połączeniu z tą opcją `--fonts assets` wyszukuje fonts obiektów tekstowych SceneGraph przez skonfigurowanych web font providers i tworzy lokalne pliki `@font-face`. Eksport HTML jest dostępny podczas pracy z plikiem. ## Eksport do Storybook Polecenie generuje jeden plik CSF3 `.stories.ts` dla każdego zestawu komponentów lub komponentu: ```sh openpencil export design.fig -f storybook # Historyjki React w ./design-stories/ openpencil export design.fig -f storybook --framework vue -o src/stories openpencil export design.fig -f storybook --framework html --page "Components" openpencil export design.pen -f storybook -o src/stories --watch # Ponowny eksport po każdym zapisie openpencil export 'src/**/*.pen' -f storybook --beside --watch # Historyjki obok każdego projektu ``` ### Projekty obok historyjek Trzymaj plik projektu komponentu w folderze komponentu i eksportuj z `--beside`: historyjki każdego dokumentu, obrazy projektu i manifest `.openpencil-stories.json` trafiają do folderu tego dokumentu, obok kodu komponentu. Wzorzec `stories` w `.storybook/main.ts`, na przykład `../src/**/*.stories.ts`, znajdzie je bez dodatkowej konfiguracji. Możesz podać kilka dokumentów albo ujęty w cudzysłów wzorzec, na przykład `'src/**/*.pen'`, który OpenPencil rozwija samodzielnie (Node.js 22 lub nowszy). Kilka dokumentów wymaga `--beside` albo `--output`, a `--page` działa tylko z jednym dokumentem. Dokumenty są eksportowane kolejno, a gdy któryś się nie powiedzie, pozostałe nadal są eksportowane, po czym polecenie kończy się błędem. `--watch` obserwuje każdy dopasowany dokument; dokument utworzony po uruchomieniu obserwacji wymaga ponownego uruchomienia polecenia. Każdy wariant zestawu komponentów staje się historyjką, a jego właściwości wariantów — kontrolką `select`, więc zmiana kontrolki pokazuje odpowiedni wariant. Samodzielne komponenty nazwane z ukośnikami, takie jak `Button/Primary` i `Button/Secondary`, trafiają do jednego pliku `Button` z kontrolką `Variant`. Kombinacja, dla której projekt nie ma wariantu, zgłasza w Storybooku nazwany błąd zamiast pokazywać inny wariant. Historyjki renderują komponent jako HTML z inline styles, tak jak `-f html`, więc nie potrzebują środowiska OpenPencil; `--framework` (`react`, `vue` lub `html`) zmienia tylko opakowanie oraz import `Meta`/`StoryObj` z `@storybook/react-vite`, `@storybook/vue3-vite` lub `@storybook/html-vite`. Tekst używa rodzin czcionek dokumentu, które Storybook musi wczytać sam. Właściwości tekstowe, logiczne i podmiany egzemplarza nie są jeszcze eksportowane. Historyjki zawierają wpisy `parameters.design` dla [`@storybook/addon-designs`](https://github.com/storybookjs/addon-designs): - **OpenPencil:** gdy ścieżka dokumentu leży w bieżącym katalogu, [odnośnik `openpencil://`](../index#url-scheme), który otwiera dokument w aplikacji na komputer i zaznacza wariant albo jego zestaw komponentów, gdy inna warstwa ma taką samą nazwę jak wariant. Schemat adresuje warstwy po nazwie, więc historyjka, której nazwy wariantu i komponentu są współdzielone z innymi warstwami, nie dostaje odnośnika. - **Design:** obraz PNG wariantu w skali 2×, zapisany w `.design/` obok historyjki i wskazany przez `new URL(…, import.meta.url)`, dzięki czemu Vite go dołącza do paczki. Skopiuj ten parametr do historyjki własnego komponentu, aby porównać implementację z projektem. `--no-design-images` pomija renderowanie; podmiana czcionek podlega `--font-policy`, tak jak w eksporcie rastrowym. `-o` wskazuje katalog wyjściowy. Znajdujący się tam manifest `.openpencil-stories.json` zapisuje, który dokument (jako ścieżkę względną względem katalogu wyjściowego) i która strona wygenerowały każdą historyjkę i obraz projektu; zatwierdzaj go razem z historyjkami. Eksport zastępuje pliki wygenerowane tam wcześniej z tego samego dokumentu, także dla komponentów usuniętych lub przemianowanych od tego czasu; z `--page` tylko pliki tej strony. Przed jakąkolwiek zmianą odmawia nadpisania każdego innego pliku — ręcznie napisanej historyjki, historyjki innego dokumentu lub zbłąkanego obrazu. Eksport jednej strony, w którym nazwy plików przesunęły się na historyjki innej strony, wymaga pełnego eksportu. Bez manifestu istniejące historyjki są traktowane jak cudze, więc usuń je przed ponownym eksportem. `--watch` utrzymuje działanie polecenia i ponawia eksport po każdym zapisie dokumentu, dzięki czemu gorące przeładowanie Storybooka podąża za projektem; zapis, którego nie da się odczytać, jest zgłaszany, a obserwacja trwa dalej. Brakująca strona z `--page` lub podmiana czcionki przy `--font-policy strict` nadal kończy polecenie. ## Thumbnail ```sh openpencil export design.fig --thumbnail --width 1920 --height 1080 ``` ## Eksport z uruchomionej aplikacji Nie podawaj pliku, aby eksportować z aplikacji: ```sh openpencil export -f png # Zaznaczenie w aktywnym dokumencie openpencil export --page "Components" -f png # Wszystkie warstwy strony openpencil export --node 1:23 -f png # Jedna warstwa, na dowolnej stronie ``` `--page` przyjmuje nazwę strony, a `--page-id` identyfikator strony z `openpencil documents list`; oba eksportują tę stronę bez przełączania na nią aplikacji. Dodaj `--document-id`, aby eksportować z dokumentu innego niż aktywny. Tryb aplikacji obsługuje PNG, JPG, WEBP, SVG i PDF. PowerPoint, JSX, HTML, Storybook i `.fig` wymagają podania pliku. Eksport miniatury z pliku nie jest obecnie obsługiwany.