manifest.jsonKonfiguracja wtyczki. Wybierz ten plik podczas instalacji w Figma.
1
Wgraj projekt
HTML, HTM lub ZIP · maksymalnie 15 MB
Upuść tutaj projekt HTML lub ZIP albo wybierz plik
2
Rozmiary responsywne
JAK TO DZIAŁA
Renderowanie w przeglądarce, uporządkowany wynik.
CoreBase renderuje stan początkowy w trzech szerokościach, odczytuje widoczny DOM i obliczony CSS, a następnie tworzy niezależne drzewa układu.
Co zawierają dane
Wersjonowany JSON zapisuje hierarchię, tekst, wymiary, Flexbox, odstępy, typografię, kolory, obramowania, widoczność, overflow, pozycję i odwołania do obrazów.
Zakres obecnej wersji
CoreBase eksportuje dane strukturalne, a osobna wtyczka Figma odtwarza edytowalne warstwy. Nie każda funkcja CSS jest odwzorowana idealnie. Skrypty, zdalne zasoby, animacje i stany przejściowe są ograniczone. Po imporcie sprawdź makiety i ostrzeżenia.
OD POCZĄTKU DO KOŃCA
Od projektu HTML do edytowalnych makiet Figma.
Przygotuj układ w przeglądarce, pobierz JSON i zaimportuj go wtyczką CoreBase w Figma Desktop. Wtyczkę instalujesz raz, a potem korzystasz z niej w kolejnych projektach.
CoreBase HTML to Figma
Gotowy ZIP · schemat v2 · bez kompilacji i Node.js
Potrzebujesz Figma Desktop, pliku Figma Design z prawem edycji oraz lokalnego projektu HTML lub ZIP. Instalacja odbywa się w trybie deweloperskim, nie przez Figma Community. Po instalacji zachowaj rozpakowany folder na komputerze.
Przygotuj projekt HTML
Użyj HTML/HTM lub ZIP z plikami HTML, CSS, obrazami i fontami, zachowując ścieżki względne. Przy lokalnych zasobach lepiej wybrać ZIP. Limit: 15 MB. Zewnętrzne zasoby i skrypty projektu są blokowane; narzędzie odczytuje początkowy statyczny stan strony.
Wyeksportuj układy responsywne
Wgraj projekt powyżej i wybierz stronę główną, jeśli zawiera kilka plików HTML. Zostaw Desktop 1440, Tablet 768 i Mobile 390 px lub ustaw własne szerokości. Kliknij Przygotuj dane układu, poczekaj na trzy widoki i zapisz plik .corebase-layout.json.
Pobierz i rozpakuj wtyczkę
Pobierz ZIP wtyczki i rozpakuj do stałego folderu na komputerze. Powinny w nim być manifest.json, README.md oraz dist z code.js i ui.html. Nie importuj ZIP, nie przenoś samego manifestu i nie zmieniaj nazwy dist.
Zainstaluj w Figma Desktop
Otwórz plik Figma Design. Kliknij prawym przyciskiem na obszarze roboczym → Plugins → Development → Import plugin from manifest… (czasem Import new plugin from manifest…). Wybierz manifest.json z rozpakowanego folderu. Nie twórz nowej wtyczki i nie edytuj manifestu.
Uruchom wtyczkę i wybierz JSON
Otwórz Plugins → Development → CoreBase HTML to Figma. Wybierz .corebase-layout.json z kroku 2, nie HTML, ZIP projektu ani manifest. Sprawdź nazwę, Import ID, schemat v2 i szerokości. Kliknij Import to Figma.
Sprawdź zaimportowane makiety
Poczekaj na Done. Sekcja CoreBase Import zawiera zaznaczone obok siebie ramki Desktop, Tablet i Mobile. Przejrzyj ostrzeżenia i w razie potrzeby użyj Select Imported Frames. Tekst i obsługiwane wektory można edytować. Sprawdź hierarchię, wymiary, odstępy i brakujące zasoby.
Popraw i zaimportuj ponownie
Zmień źródłowy HTML/CSS, wyeksportuj nowy JSON i uruchom wtyczkę jeszcze raz. Każdy import tworzy nową sekcję i nie nadpisuje poprzedniej. Uporządkuj i zapisz makiety w Figma jak zwykle.
Zachowaj te pliki razem
dist/code.jsSkompilowany importer. Pozostaw w folderze dist.
dist/ui.htmlInterfejs wtyczki. Pozostaw obok code.js w dist.
README.mdInstalacja, instrukcja dla programistów i ograniczenia V1.
Co odtwarza wtyczka
Warstwy zamiast zrzutu ekranu
Ramki, tekst, osadzone obrazy i pełne SVG są odtwarzane jako edytowalne warstwy. Flexbox staje się Auto Layout, gdzie to możliwe; CSS Grid zachowuje względne pozycje w zwykłej ramce.
Sprawdź fonty i obrazy
Niedostępne fonty lub odmiany są zastępowane z ostrzeżeniem. Brakujące albo wyłącznie zdalne obrazy stają się elementami zastępczymi o prawidłowych wymiarach. Dodaj lokalne zasoby do ZIP: importer nie pobiera ich z internetu.
Trzy niezależne widoki
Desktop, Tablet i Mobile to osobne ramki, nie automatycznie połączone komponenty responsywne. Zaawansowany CSS, animacje, interakcje prototypu, komponenty i tokeny projektu nie są odtwarzane.
Gdy pojawi się problem
Błąd manifestu lub brak pliku
Pobierz aktualny ZIP ponownie i rozpakuj cały folder. Wybierz manifest.json, pozostawiając dist/code.js i dist/ui.html na miejscu. Błąd dotyczący description oznacza stary manifest; obecny pakiet nie zawiera tego pola.
Nieobsługiwany schemat lub błędny JSON
Utwórz tutaj nowy Layout JSON. Wtyczka obsługuje tylko schemaVersion 2. Zmiana rozszerzenia HTML na .json i starszy niezgodny eksport nie zadziałają. Import ID to identyfikator, nie kod do pobierania danych online.
Import zakończony z ostrzeżeniami
Ostrzeżenia wskazują zamiany i ograniczenia; nie gwarantują idealnego odwzorowania. Sprawdź wskazane warstwy, obrazy i fonty. Przy pustym lub niepełnym źródle skontroluj główny HTML, lokalne ścieżki i statyczną treść przed kolejnym eksportem.
Pliki nie trafiają na serwery CoreBase
HTML jest analizowany lokalnie w odizolowanej ramce przeglądarki. Wtyczka czyta lokalny JSON bez wywołań CoreBase i zewnętrznych API. Po imporcie warstwy należą do pliku Figma, przechowywanego zgodnie z ustawieniami i zasadami prywatności Figma.
Dokładność i zaufanie
Zbudowany, aby był użyteczny. Zaprojektowane do sprawdzania.
Testujemy i przeglądamy narzędzia, formuły i informacje CoreBase, aby były przydatne i dokładne. Sporadyczne niedokładności lub okoliczności specyficzne dla Twojej sytuacji mogą nadal mieć wpływ na wynik, dlatego ważne decyzje sprawdzaj pod kątem własnych wymagań.
Znalazłeś coś, co nie wygląda dobrze? Powiedz nam, abyśmy mogli go sprawdzić i ulepszyć.