Дизайн из Figma
собрать или доработать сайт по макету
Накатить дизайн из Figma
- Откройте доступ к макету. В Figma: Share → «Anyone with the link - can view», и обязательно галочка «Allow viewers to copy, share, and export». Без второй галочки Figma не отдаёт содержимое файла никому, кроме владельца, и перенос не начнётся.
- Скопируйте ссылку. Лучше всего - на нужный кадр: правый клик по фрейму на холсте → Copy link. Ссылка на файл целиком тоже подойдёт.
- В редакторе сайта: меню ⋮ → «Дизайн из Figma», вставьте ссылку. В поле пожеланий напишите объём словами: «только главную», «поменяй цвета и шрифты, тексты не трогай», «сделай как в макете, но телефон оставь наш».
- «Сначала обсудить» - ассистент изучит макет и расскажет, что и как перенесёт, не меняя сайт. «Применить к сайту» - начнёт сборку по кнопке «Взять дизайн из Figma»; перед ней автоматически сохранится снимок, откат в один клик через «Историю».
- Многостраничный макет собирается целиком: после первой страницы платформа сама ставит задачи на остальные (тумблер «Собрать все страницы макета»). Страница занимает 10–40 минут, большой макет - несколько часов. Ход работы виден на кнопке «Очередь правок» (счётчик «макет: готово X из Y») и на странице «Страницы и макеты из Figma», вкладку можно закрыть: по готовности придёт письмо со ссылками.
- Сверьте предпросмотр с макетом, попросите в чате поправить, что разошлось, и нажмите «Опубликовать».
Что важно знать
- Ссылку можно просто отправить сообщением в чат - сработает так же, как через окно.
- Шрифты. Figma не отдаёт файлы шрифтов никому - это лицензии, а не наше ограничение. Бесплатные шрифты (Google Fonts) платформа подключит сама; для платного подберёт близкий бесплатный аналог и скажет об этом. Если лицензия у вас есть - пришлите файлы шрифта в чат, поставим настоящий.
- Дизайнер прислал файл .fig? Его открывает только сама Figma. Перетащите файл на список файлов на figma.com, откройте получившийся макет, включите доступ по ссылке и пришлите ссылку - так перенос будет точным.
- Совсем нет ссылки - экспортируйте кадры страниц и картинки и приложите одним архивом .zip (до 20 МБ). Это запасной путь: в экспорте только картинки, поэтому шрифты, точные цвета и тексты придётся снимать на глаз, и перенос выйдет приблизительным.
- Если макет лежит в бесплатном воркспейсе Figma, она почти не отдаёт его по API. Платформа решает это сама - вам ничего делать не нужно, просто присылайте свою обычную ссылку.
- Один экран в нескольких ширинах (1440 / 1080 / 768 / 390) - это адаптив одной страницы, а не четыре разные страницы. Платформа так и собирает: одна страница, которая перестраивается под телефон.
- Страницы дизайн-системы (Guidelines, Components, Materials, обложки) платформа страницами сайта не считает и на сайт не переносит.
- Каталог товаров из макета - это оформление поверх живого каталога сайта, а не картинка: данные подключаются отдельно, скажите об этом в чате.
- Формы из макета собираются на формах платформы: заявки приходят в кабинет и на почту. Сторонние сервисы форм не подключаем - они ломаются при смене домена.
- Галочку согласия на обработку персональных данных платформа никогда не ставит отмеченной заранее, даже если в макете она нарисована с галочкой: по закону человек ставит её сам.
- Анимации, прототип и наведения из макета не переносятся - переносится вёрстка и содержимое. Что-то важное из движения опишите словами в чате.
- Не переносится и не должно: наш служебный домен в текстах, чужие счётчики аналитики, ссылки на закрытые макеты. Всё остальное из макета - переносится.
Что вы увидите
Окно «Дизайн из Figma» (меню «Сайт» → «Дизайн из Figma»): «Шаг 1. Ссылка на макет» с раскрывашками «Как открыть доступ к макету» и «Ссылки нет - другие варианты» (архив .zip до 20 МБ), «Шаг 2. Что сделать» с переключателем «Применить к сайту» | «Сначала обсудить», переключатели «Дизайнер обновил макет» и «Собрать все страницы макета» (по умолчанию включён), поле пожеланий до 500 знаков и кнопка «Взять дизайн из Figma» или «Обсудить макет».
В чате шаги «Открываю макет» → «Забираю материалы» → «Собираю» → «Сверяю» → «Проверяю» → «Готово». Ход раскатки по страницам виден на кнопке «Очередь правок» («макет: готово X из Y») и на странице «Страницы и макеты из Figma» со статусами «готово», «в работе», «в очереди», «ошибка». По окончании письмо «Сайт по макету Figma собран» со ссылками на страницы.
Если в окно вставить прежнюю ссылку, оно напомнит: «Это макет, по которому сайт уже собирали - можно просто нажать кнопку внизу, чтобы пересобрать по нему».
Что платформа делает сама
Перед «Применить к сайту» сохраняет снимок «Перед применением макета Figma». Для макета на бесплатном тарифе Figma делает рабочую копию у себя (около минуты) и пишет об этом в чате. После первой страницы ставит в очередь остальные страницы макета, до 20, каждую отдельной задачей; служебные страницы макета (Guidelines, Components) пропускает.
Собранную страницу меряет браузером на всех ширинах, которые есть в макете, и сверяет с числами макета: цвета, шрифты, отступы, размеры. Однозначные расхождения чинит сама, остальное отдаёт ассистенту кругом с числами; круг, который сделал хуже, откатывается. Тексты, которые вы правили руками, к макету не возвращаются.
Пока идёт раскатка, публикация ждёт: «Собираем страницы по макету: X из Y. Сайт выйдет целиком, когда сборка закончится».
Частые вопросы
- Сколько это занимает? Страница 10-40 минут, большой макет несколько часов. Вкладку можно закрыть: ход работы виден в чате и в очереди правок, по готовности придёт письмо.
- Что не перенесётся? Анимации, прототип и наведения (только вёрстка и содержимое); платные шрифты заменяются близким бесплатным аналогом, если не прислать файлы шрифта в чат; служебный домен в текстах, чужие счётчики, ссылки на закрытые макеты.
- Макет обновил дизайнер, как пересобрать? Включите «Дизайнер обновил макет» и нажмите «Взять дизайн из Figma»: платформа возьмёт свежую версию, а не ту, что читала раньше.
- В макете больше 20 страниц? Автоматически собираются первые 20; остальные собирайте по одной на странице «Страницы и макеты из Figma», указывая ссылку на кадр.
- Что делать с формами и каталогом из макета? Формы собираются на формах платформы (заявки приходят в кабинет), каталог это оформление поверх живого каталога сайта: скажите об этом в пожеланиях.
Если не сработало
- Написано «Это не похоже на ссылку на макет Figma». Нужен адрес вида figma.com/design/…: скопируйте ссылку из адресной строки или через «Copy link».
- Перенос не начался, в чате про доступ. В окне Share макета должно стоять «Anyone with the link - can view» и галочка «Allow viewers to copy, share, and export»: без неё Figma не отдаёт содержимое файла никому, кроме владельца.
- Прислали файл .fig. Его открывает только сама Figma: загрузите файл на figma.com, откройте, включите доступ по ссылке и пришлите ссылку. Если аккаунта Figma нет, напишите нам.
- Написано «Не удалось загрузить архив» или «Нужен архив .zip с экспортом макета». Приложите zip до 20 МБ с экспортом кадров и картинок; перенос по архиву приблизительный, по ссылке точнее.
- Страница в статусе «ошибка». Откройте «Страницы и макеты из Figma» и нажмите «Собрать» у этой страницы ещё раз; если повторится, напишите нам с адресом страницы.
- Дизайн собрался не так, как в макете. Откройте «Сверить с макетом»: платформа покажет расхождения числами, отметьте нужные и нажмите «Исправить отмеченные».
В каком тарифе
Доступно с тарифа «Профессиональный». Свой тариф и его срок видны в кабинете, пункт «Платежи».