Как перенести дизайн из Figma в сайт с помощью ИИ

Figma хранит больше контекста, чем обычный скриншот: отдельные слои, размеры, стили и компоненты. Однако макет всё равно не является готовым сайтом. Код должен описать структуру страницы, адаптацию к разным экранам и поведение интерактивных элементов.

Собрать сайт по макету в Lork

Подготовьте макет к переносу

Удалите черновые варианты и обозначьте актуальные фреймы. Дайте понятные имена страницам, секциям и повторяемым компонентам. Проверьте, что текст не переведён в кривые, а изображения доступны отдельно.

Для передачи подготовьте:

• desktop и mobile фреймы;
• список страниц и переходов;
• состояния меню, форм и кнопок;
• логотип, иконки и фотографии;
• цвета, шрифты и размеры;
• комментарии к нестандартному поведению.

Официальная документация Figma подтверждает, что из Design можно экспортировать слои, фреймы, компоненты и секции в графические форматы. В Dev Mode доступны параметры слоёв, CSS-фрагменты и экспорт ресурсов. Эти данные помогают разработке, но не создают готовую архитектуру приложения автоматически. См. экспорт из Figma и фрагменты кода в Dev Mode.

Передайте структуру до оформления

Сначала попросите ИИ перечислить страницы и компоненты. Исправьте карту сайта до генерации. Этот шаг ловит простую, но дорогую ошибку: красивый интерфейс оказывается собран вокруг неверной структуры.

Полезный порядок работы:

1. Главная страница и общая навигация.
2. Один повторяемый тип страницы.
3. Мобильная версия этих экранов.
4. Остальные страницы на основе утверждённых компонентов.
5. Формы, ссылки и интерактивные состояния.

В задании укажите, какие решения фиксированы. Например: тексты согласованы, логотип нельзя деформировать, карточки услуг должны использовать один компонент, порядок блоков на телефоне задан отдельным фреймом.

Проверьте компоненты и адаптивность

React строит интерфейс из компонентов, которые можно повторно использовать и вкладывать друг в друга. Это соответствует логике дизайн-системы, но компонентная граница в макете и коде может различаться. Базовое объяснение есть в официальном руководстве React.

После генерации проверьте повторяемые элементы. Одна карточка услуги не должна иметь случайные отступы или отдельную логику. Изменение общего компонента должно предсказуемо обновлять все его экземпляры.

На мобильном экране оцените не только сходство с фреймом. Проверьте длинные реальные тексты, изображения, меню, формы и кнопки. Для графики браузер поддерживает разные источники и размеры изображений. Это помогает загружать подходящий файл для конкретного экрана, как описано в руководстве MDN по адаптивным изображениям.

Получите код и передайте проект

После визуальной проверки откройте структуру файлов. В React разметка обычно записывается в JSX, который похож на HTML, но живёт внутри JavaScript и подчиняется более строгим правилам. Поэтому React-проект нельзя считать одним HTML-файлом. Подробности есть в документации React о JSX.

Перед передачей разработчику сохраните:

• ссылку на исходный макет;
• исходные изображения и шрифты;
• список готовых страниц;
• известные расхождения с дизайном;
• описание форм и интеграций;
• исходный React-код.

Частые вопросы

Достаточно ли ссылки на Figma

Ссылка полезна, если сервис может её открыть и права доступа настроены правильно. Надёжнее приложить экспорт ключевых фреймов и ресурсов, а структуру описать текстом.

Код из Figma готов к публикации

Автоматические CSS-фрагменты помогают прочитать свойства выбранного слоя. Рабочий сайт дополнительно требует структуры компонентов, маршрутов, адаптивности, форм, метаданных и проверки в браузере.

Можно ли перенести только один экран

Да. Для проверки процесса разумно начать с главной страницы или одного типового экрана. Если результат подходит, остальные страницы собираются на утверждённой основе.

Перенести макет в рабочий сайт