Портфолио

Услуги и прайс

Отзывы

МЕНЮ

Главная
/
Блог

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

Этот гайд подойдёт дизайнерам и предпринимателям без знаний в программировании.

Привет! Меня зовут Ляйля. Я веб-дизайнер с 2020 года. За это время:

Разработала 300+ проектов для экспертов и бизнесов в нишах: стоматология, HR, флористика, криптовалюта, недвижимость, IT-продукты, одежда, бухгалтерия, театры, Event-агентства, благотворительность, производство, образование, строительство, инвестиции, LMS
Работаю с международными проектами. Мои клиенты: Meera Global, Квант, QOS Education, театр «Созвездие-Йолдызылк» и многие другие. Больше кейсов на сайте.
Являюсь финалистом всероссийского конкурса Art-Masters 2023 в специальности Веб-дизайн
Создала свое обучение веб-дизайну для новичков. Мои ученики работают в компаниях

В результате изучения этого материала вы получите первую работающую версию сайта, которую можно открыть в браузере, проверить на компьютере и телефоне.

Что понадобится

Перед началом подготовьте:

готовый дизайн сайта в Figma
отдельную версию для компьютера и телефона
приложение Codex на компьютере
подключение Figma к Codex.

Figma MCP — это связка, благодаря которой Codex может самостоятельно открыть ваш макет, увидеть размеры, тексты, цвета и скачать изображения.

Вам понадобится оплатить подписки в Chat GPT и Figma. Примерно 4000 руб./месяц за оба сервиса.

Шаг 1. Подготовьте макет в Figma

Создайте два отдельных экрана:

Landing — Desktop — 1440
Landing — Mobile — 390

В каждом экране должна находиться вся страница: от меню до подвала.

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

Проверьте 6 вещей

1. Используйте Auto Layout и Frame.

Основные блоки страницы должны быть собраны через Auto Layout. Это поможет Codex понять, как элементы должны располагаться и перестраиваться.

Поэтому каждый блок собирайте отдельно во фрейме и все элементы внутри фрейма объединяйте в автолейауты.

2.Дайте слоям понятные названия

Вместо:
Frame 87
Rectangle 126
Group 4

используйте:
Header
Hero
MainButton
Services
CaseCard
Footer

3. Назначьте стили для текстов и палитры

Для каждого текста и цвета назначьте стили: отдельно для десктопа и мобильной версии.

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

5. Фоновые изображения вставляйте изображениями в формате jpg, png или svg

Не оставляйте в макете сложные эффекты. Фотографии, логотипы и иконки должны находиться в макете отдельными элементами.

6. Проверьте макет на разных ширинах

Попробуйте сузить десктопный экран с 1440 до 1024 пикселей, а мобильный — с 390 до 320 пикселей.

Убедитесь, что:

текст не выходит за границы;
карточки не накладываются друг на друга;
кнопки не обрезаются;
изображения остаются на своих местах;
страница не уезжает вправо.

Если макет ломается при изменении ширины в Figma, Codex тоже может собрать его неправильно.

Это можно сделать в разделе Constrains, выставив точки расположения для каждого элемента

Шаг 2. Установите Codex

Скачайте приложение Codex с официального сайта OpenAI и войдите в свой аккаунт.

Cоздайте новый проект. Разрешите полный доступ.

Шаг 3. Подключите Figma

В настройках Codex найдите раздел с плагинами и выберите Figma.

Авторизуйтесь в своём аккаунте Figma и разрешите доступ к файлу.
После подключения откройте макет в Figma и скопируйте две ссылки:

На десктопный экран.
На мобильный экран.

Важно: выделите конкретный экран и скопируйте ссылку именно на него, а не на весь файл.
В ссылке должно быть указано node-id. Это означает, что Codex откроет нужный экран.

Раздел Dev Mode в Figma

Шаг 4. Попросите Chat GPT написать промт для верстки в Codex

В самом Chat GPT напишите запрос, который поможет составить полный и детальный промт для Codex. Используйте следующий алгоритм запроса:

Роль
Главный запрос
Второстепенные детали
Негативный промт

Здесь нет готового промта. Каждый дизайн-макет — индивидуален. Это может быть простой лендинг. А может быть лендинг со сложными анимационными решениями. Учитывайте свои идеи и задачу. Например, для написания промта для верстки я использовала следующий промт:

Ты- профессиональный промт-инженер.

Напиши полный и развернутый промт для Codex, для верстки сайта. 

Подробное задание: Есть фигма с 7 экранами. Эти экраны - раскадровки движения на сайте. 
Переход с первого кадра: замочная скважина увеличивается и постепенно открывается все, что находится за ней. (Frame 1-3) А за ней - картинная галерея. 
Далее включается светильник и зажигается свет над картиной. 
Одна за одной появляются другие картины и их описания с delay 0,1 s анимация плавная. (Frame 4). Эту галерею можно скроллить со всех сторон - это бесконечный скролл. 
Пример: https://public.work. Можно нажать на любую из картин и далее эта картинка плавно увеличивается (Frame 6) и открывается следующий экран, где справа находится подробное описание картины, а слева - сама картина (Frame 7). 
На этом фрейме справа снизу есть указатель, что страницу можно листать. 
Таким образом можно посмотреть следующую картину путем листания.

Используй эту ссылку в качестве дизайн-макета:  https://www.figma.com/design/gc4jLB34qZsivTGR3CVe11/%D0%9A%D0%B0%D1%80%D1%82%D0%B8%D0%BD%D0%BD%D0%B0%D1%8F-%D0%B3%D0%B0%D0%BB%D0%B5%D1%80%D0%B5%D1%8F?node-id=0-1&t=b0Rev17Sg4Fi1yfW-1

Не должно быть наложений картин друг на друга. Между картинами справа, слева, снизу и сверху не должно быть разных расстояний. Сайт не должен зависать.

Шаг 5. Отправьте в чат Codex готовый промт

Шаг 6. Откройте готовый сайт

После выполнения задачи Codex должен запустить сайт и показать адрес примерно такого вида:
http://localhost:5173

Откройте его в браузере.

Проверьте:

компьютерную версию;
мобильную версию;
меню и кнопки;
загрузку изображений;
правильность текстов;
отсутствие элементов, которые съехали или обрезались.

Чтобы увидеть мобильную версию, можно просто уменьшить ширину окна браузера.

Важно: Codex может пропустить какие-то моменты. Вы можете его корректировать в чате.

Шаг 7. Попросите Codex проверить себя ещё раз

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

Отправьте одно сообщение:

Теперь проведи повторную визуальную проверку.

Открой готовый сайт в браузере и сравни его с десктопной и мобильной версиями в Figma.

Проверь:

- размеры блоков;
- расстояния между элементами;
- размеры текста;
- переносы строк;
- расположение изображений;
- цвета;
- скругления;
- декоративные элементы;
- мобильную версию.

Самостоятельно исправь найденные отличия, затем снова открой страницу и проверь результат.

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

На этом этапе можно попросить Codex добавить анимацию и ссылки.

Какой результат вы получите

После выполнения этих шагов у вас должна появиться первая рабочая версия сайта:

она открывается в браузере;
похожа на макет в Figma;
адаптируется под телефон;
содержит оригинальные изображения;
имеет работающие кнопки и меню;
хранится в отдельной папке на вашем компьютере.

Это ещё не означает, что сайт автоматически опубликован в интернете. Сначала Codex создаёт и запускает его на вашем компьютере. После проверки сайт можно загрузить на хостинг, подключить домен или перенести на нужную платформу.

Если вы дизайнер и хотите увереннее работать с сайтами — приходите на консультацию.

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

На консультации мы:

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

Напишите мне фразу «Хочу на консультацию» в личные сообщения, и мы договоримся о времени консультации.

Поделиться статьей