manifest.jsonНалаштування плагіна. Саме цей файл вибирайте під час встановлення у Figma.
1
Завантажте проєкт
HTML, HTM або ZIP · до 15 МБ
Перетягніть сюди HTML- або ZIP-проєкт чи виберіть файл
2
Адаптивні розміри
ЯК ЦЕ ПРАЦЮЄ
Рендеринг у браузері, структурований результат.
CoreBase відтворює початковий стан сторінки у трьох розмірах, читає видимий DOM і обчислені CSS-стилі та створює окремі адаптивні дерева макета.
Що містять дані макета
Версіонований JSON зберігає ієрархію, текст, розміри, напрям Flexbox, відступи, типографіку, кольори, рамки, видимість, overflow, позиціонування та посилання на зображення. Зайві обгортки очищаються лише там, де це безпечно.
Межі поточної версії
CoreBase готує структуровані дані, а окремий плагін Figma відтворює редаговані шари. Це не ідеальна конвертація всіх CSS-можливостей. Скрипти, зовнішні ресурси, анімації та тимчасові стани обмежені — перевіряйте макети й попередження після імпорту.
ВІД ПОЧАТКУ ДО РЕЗУЛЬТАТУ
Від HTML-проєкту до редагованих макетів Figma.
Підготуйте макет у браузері, збережіть JSON і відкрийте його в плагіні CoreBase у Figma Desktop. Плагін встановлюється один раз і підходить для наступних проєктів.
CoreBase HTML to Figma
Готовий ZIP · схема v2 · Node.js і ручна збірка не потрібні
Потрібні Figma Desktop, файл Figma Design із правом редагування та локальний HTML- або ZIP-проєкт. Плагін додається через меню розробки, а не через Figma Community. Після встановлення не видаляйте й не переміщуйте розпаковану папку.
Підготуйте HTML-проєкт
Використайте HTML/HTM або ZIP із HTML, CSS, зображеннями та шрифтами зі збереженими відносними шляхами. Для сторінки з локальними ресурсами краще ZIP. Максимальний розмір — 15 МБ. Зовнішні ресурси та скрипти проєкту блокуються: інструмент відтворює початковий статичний стан сторінки.
Збережіть адаптивний макет
Завантажте проєкт у форму вище. Якщо HTML-сторінок кілька, виберіть головну. Залиште ширину Desktop 1440, Tablet 768 і Mobile 390 px або задайте власну. Натисніть «Підготувати дані макета», дочекайтеся трьох макетів і завантажте файл .corebase-layout.json.
Завантажте й розпакуйте плагін
Завантажте ZIP плагіна та розпакуйте його в постійну папку на комп’ютері. Усередині мають бути manifest.json, README.md і папка dist із code.js та ui.html. Не імпортуйте сам ZIP, не переносіть manifest окремо й не перейменовуйте dist.
Додайте плагін у Figma Desktop
Відкрийте файл Figma Design. Натисніть правою кнопкою на полотні: Plugins → Development → Import plugin from manifest… (у деяких версіях — Import new plugin from manifest…). Виберіть manifest.json із розпакованої папки. Створювати новий плагін чи редагувати manifest не потрібно.
Запустіть плагін і виберіть JSON
Відкрийте Plugins → Development → CoreBase HTML to Figma. Виберіть файл .corebase-layout.json із кроку 2, а не HTML, ZIP проєкту чи manifest. Перевірте назву проєкту, Import ID, схему v2 та ширину макетів. Натисніть Import to Figma.
Перевірте імпортовані макети
Дочекайтеся Done. У секції CoreBase Import з’являться окремі Desktop, Tablet і Mobile поруч один з одним; плагін одразу їх виділить. Перегляньте попередження та за потреби натисніть Select Imported Frames. Текст і підтримувані вектори редагуються. Перевірте ієрархію, розміри, відступи та відсутні ресурси.
Уточніть макет і повторіть імпорт
Змініть вихідні HTML/CSS, збережіть новий JSON і знову запустіть плагін. Кожен імпорт створює нову секцію, а не замінює попередню. Організуйте та збережіть отримані макети у Figma звичним способом.
Зберігайте ці файли разом
dist/code.jsЗібраний код імпорту. Залиште його в папці dist.
dist/ui.htmlІнтерфейс плагіна. Має бути поруч із code.js у папці dist.
README.mdІнструкція зі встановлення, розробки й обмеження першої версії.
Що відтворює плагін
Шари, а не скриншот
Фрейми, текст, вбудовані зображення та повні SVG відтворюються як редаговані шари. Flexbox перетворюється на Auto Layout там, де це можливо; CSS Grid зберігає відносне розташування елементів у звичайному фреймі.
Шрифти й зображення варто перевірити
Недоступні шрифти або накреслення замінюються з попередженням. Відсутні чи лише зовнішні зображення стають заглушками правильного розміру. Додавайте локальні ресурси до ZIP: плагін не завантажує їх з інтернету.
Три незалежні макети
Desktop, Tablet і Mobile — окремі фрейми, а не пов’язані адаптивні компоненти. Складні CSS-ефекти, анімації, прототипні взаємодії, компоненти та дизайн-токени не відтворюються.
Якщо виникла помилка
Помилка manifest або відсутній файл
Завантажте актуальний ZIP і повністю розпакуйте його. Виберіть manifest.json, залишивши dist/code.js і dist/ui.html на своїх місцях. Помилка з полем description означає старий manifest — у поточному пакеті цього поля немає.
Несумісна схема або некоректний JSON
Створіть новий Layout JSON цим інструментом. Плагін приймає лише schemaVersion 2. Перейменований HTML чи старий несумісний експорт не підійде. Import ID — ідентифікатор проєкту, а не код для отримання даних онлайн.
Імпорт завершився з попередженнями
Попередження повідомляють про заміни й обмеження, а не гарантують ідеальне відтворення. Перевірте зазначені шари, зображення та шрифти. Якщо вихідний макет порожній або неповний, перевірте головний HTML, локальні шляхи й статичний контент перед новим експортом.
Ваші файли не потрапляють на сервери CoreBase
HTML аналізується локально в ізольованому фреймі браузера. Плагін читає JSON із комп’ютера без запитів до CoreBase чи зовнішніх API. Після імпорту шари стають частиною вашого файлу Figma, який зберігається за правилами та налаштуваннями приватності Figma.
Точність і довіра
Створений, щоб бути корисним. Призначений для перевірки.
Ми тестуємо та переглядаємо інструменти, формули та інформацію CoreBase, щоб вони були корисними та точними. Випадкові неточності або обставини, характерні для вашої ситуації, все одно можуть вплинути на результат, тому перевіряйте важливі рішення відповідно до власних вимог.
Знайшли щось не так? Розкажіть нам, щоб ми могли переглянути та покращити його.