Дизайн уже готов — перерисовывать его моделью незачем и дорого. Панель берёт файл, сохранённый в Figma, и переводит выбранный кадр в секции как есть: геометрия, цвета, шрифты, скругления, тени, картинки и векторы. Ни один запрос никуда не уходит — разбор целиком у вас в браузере.
Доступ к панели — 290 ₽ в месяц; продукт пока закрытый, пароль выдаём вручную. Разбор макета не трогает никакой модели и сверх этого ничего не стоит.
.fig — Figma → File → Save local copy. Не ссылка, а сам файл.В Figma: File → Save local copy. Панель работает с файлом, а не со ссылкой, — поэтому ни токена, ни доступа к вашему аккаунту ей не нужно.
Сначала папку — пустую под новый проект или ту, где уже лежат секции. Затем карточка «Макет .fig», кнопка Выбрать макет….
Если в папке уже что-то лежит, готовые секции компилятор не трогает: новый макет уйдёт в подпапку рядом, названную по кадру, и панель переключится на неё.
В списке панель сама предлагает тот, что похож на страницу: портретный, настольной ширины, с полосами внутри. Мелкие раскладки и наборы значков рядом с макетом под ногами не путаются. Предложила не то — выберите другой кадр руками.
Кнопка Собрать секции. В папку лягут:
NN-имя.html — по числу полос кадраREADME.txt — порядок блоков по страницамstyles.json — палитра, типографика и кнопки макетаimages/ — картинки макета в исходном разрешенииДальше это обычная папка проекта: заливщик отправит картинки в Тильду и подменит пути на CDN.
Компилятор не молчит о том, чего не смог: какие картинки тяжелее десяти мегабайт, каких шрифтов нет у Google Fonts, где в макете нечего было прочитать. Это не предупреждения на всякий случай, а список того, что придётся доделать руками.
Второй заход, моделью, в режиме «Наш чат». Папку с секциями компилятора панель узнаёт по самим файлам и показывает карточку «Секции из макета»: кнопка Причесать N секций проводит каждую через модель ещё раз.
Задача у прохода узкая: слои, стоящие координатами, переводятся в поток
на узком экране; кнопка становится <a>, чтобы панель СТИЛЬ
давала ей поле ссылки; появляется наведение; проверяется типограф.
Дизайн на ширине макета остаётся прежним.
<link> на каждое
семейство, с теми весами, что и правда встретились в макете. Есть ли шрифт
у Гугла, компилятор знает по списку внутри себя, в сеть при сборке никто
не ходит, поэтому мёртвых ссылок не бывает. Написание там же выправляется:
Фигма пишет PoetsenOne, Гугл — Poetsen One.
<h1>, остальные идут
<h2>–<h4> и <p>
по убыванию. Обычно это совпадает со смыслом, но не всегда — на то и есть
«Причесать».
Панель прячет мелочь — наборы значков, раскладки шириной в телефон, вспомогательные доски. Если кадр страницы всё же не показался, проверьте, что это фрейм, а не группа: группы кадрами не считаются.
Секция — это полоса кадра во всю ширину. Если в макете разделы стоят вплотную, без промежутка, компилятор склеит их в одну полосу; если внутри раздела есть широкая подложка — разрежет надвое. Лечится в макете: промежутком между разделами.
Почти всегда — не загруженный шрифт: браузер подставил запасное начертание, у него другая ширина знака. Посмотрите замечания к сборке, там названо семейство, и загрузите его файлом в настройках сайта Тильды.
Прежние файлы лежат рядом, в скрытой папке .before-dress, —
верните их оттуда. Копия там от первого прохода и переписыванию не подлежит:
сколько бы раз ни причёсывали, вернуться можно к тому, что собрал
компилятор.
Секции длиннее 28 000 знаков проход не берёт, и о каждой сказано отдельной строкой: столько модель не возвращает за один ответ, и файл приехал бы обрезанным. Такие правьте руками или делите надвое.