HTML из Фигмы/Пиксо: верстаем макет инфостраницы

Когда выходит эта статья, Фигма работает везде в России, кроме Крыма. Но сервис в любой момент могут заблокировать, поэтому напоминаем, что есть практически полный аналог — Пиксо, в котором все функции схожи до неразличимой идентичности. Инструкция годится для Пиксо.

1. Структурируйте фигма-файл

Правильно назовите слои в фигма-файле. Имя слоя в Фигме — это класс, который будет присвоен элементу в HTML. Все слои должны быть понятно названы на латинице. Кириллицу и транслит лучше не использовать в вёрстке: nazvaniya translitom тяжело читать, в них легко опечататься, одно и то же слово можно написать по-разному (opisanie, opisaniye, opisanye) — всё это может привести к непредсказуемому поведению, ошибкам и долгой отладке.

Проверьте, не встречаются ли названия «frame23». Такие нужно заменить на понятные, чтобы потом в HTML не перебирать все «frame» в поисках нужного. К тому же такое название класса в коде выдаст его источник с головой.

В видео: слои в Фигме/Пиксо

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

В видео: добавление ссылок

Настройте автолэйаут — автоматическое выравнивание и указание отступов. Эта функция позволит избежать абсолютных значений в коде. Вёрстка на абсолютах в большинстве случаев сломается на разных экранах. Автолэйаут поможет сделать резиновый макет, в котором элементы будут подстраиваться и меняться в зависимости от разрешения экрана.

Первая настройка — расположение групп внутри автолэйаута. В моём случае:

• первая группа: номер телефона, почта и иконки соцсетей;
• вторая группа: ссылки «О нас», «Продукты», «Мы помогаем»;
• третья группа: блок заказа доставки.

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

Или можно сделать настройку «wrap»: если контент не помещается в строке, то автоматически переносится на следующую. Настройка делает макет адаптивным, чтобы элементы подстраивались под ширину фрейма.

Установите расстояние между блоками. Новичкам я предлагаю не выдумывать свои сетки, а придерживаться 12-колоночной. Она удобна для вёрстки: макет можно поделить на две, три, четыре и шесть колонок. Я тоже использую 12-колоночную сетку.

В моём макете три группы элементов в футере, отступы между группами по 20 пикселей (рх).

Настройте внешние отступы — расстояние от края экрана предполагаемого устройства.
Горизонтальные отступы. Я сделал ширину контента на моей странице 840px при ширине фрейма 1000px, поэтому у меня стоит значение 80px для внешних отступов контентной области. Вы можете выбрать другие отступы — это не принципиально. Главное, чтобы фрейм был 1000px.

Вертикальные отступы. Контент в футере стоит впритык к верхнему и нижнему краям блока, поэтому у меня выставлено расстояние 0.

Добавьте горизонтальное и вертикальное растягивание. Эта функция находится в верхнем углу правой боковой панели и доступна для элементов внутри автолэйаута.

Функция имеет три состояния:

• fixed width — элемент будет всегда иметь фиксированную ширину;
• hug contents — элементы занимают область по самому широкому элементу в группе;
• fill container — элементы занимают весь фрейм/контейнер, в котором они находятся.

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

В видео: в моем футере каждая группа элементов занимает четыре колонки. У всех групп значение «fill», чтобы при увеличении ширины макета эти группы всё равно занимали по четыре колонки

2. Получите код из режима dev mode: index.html, index.css и global.css

Режим dev mode в Фигме — это режим для разработчика, в котором можно посмотреть код сделанного макета. Доступен тем, у кого есть pro или учебный аккаунт в Фигме. Вам может помочь знакомый или другой студент с потока, у которого есть pro-аккаунт. Ко мне обращались несколько одногруппников, и я вытаскивал им код из Фигмы. В Пиксо режим разработчика работает аналогично, с одним отличием — он пока в свободном доступе.

В видео: нажмите на переключатель в правом верхнем краю экрана и настройте параметры получения кода. В результате Фигма выгрузит три файла: index. html, index. css и global. css

3. Зайдите в редактор кода и создайте три файла: index.html, index.css и global.css

Используйте любой удобный редактор кода. Например, я выбрал VS Code. Создайте три файла: index. html, index. css, global.css. В каждый файл скопируйте код из Фигмы.

В видео: добавьте выгруженные из Фигмы файлы в редактор кода

4. Скачайте картинки и загрузите в файл проекта

Все фотографии скачайте в формате PNG: выделите нужный элемент и экспортируйте из Фигмы через кнопку «Export» в правом нижнем углу.

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

Dev mode — умный режим: обычно он сам сохраняет векторную графику в формате SVG. Вам остаётся лишь проверить, в каком формате dev mode выгрузил файлы, и импортировать их.

В видео: картинки из Фигмы надо выгрузить отдельно

Иногда при выгрузке кода бывает путаница с форматами файлов. Например, вы импортировали логотип в формате SVG, но при открытии страницы в браузере он не отображается. Тогда откройте файл index.html, нажмите Ctrl+F и найдите в коде название файла изображения: в моём случае это «logo». Если в «src» тега «img» написано «logo.png», то расширение файла замените на «logo.svg». В общем случае замените на тот формат, который соответствует формату выгруженного файла.

5. Зарегистрируйтесь на GitHub и загрузите файлы проекта

Я зарегистрировался на веб-сервисе для хостинга IT-проектов GitHub и загрузил файлы проекта по инструкции.

В итоге у вас должен получиться репозиторий: все файлы проекта, которые вы перенесёте в GitHub, будут храниться там. Я сделал два репозитория: главный и тестовый, в который я вносил текущие изменения. Например, пробовал избавиться от «position: absolute»: если ничего не ломалось — вносил изменения в главный репозиторий.

Если вы что-то меняете в файле и хотите, чтобы изменения отобразились на итоговой странице, загрузите этот файл заново.

В видео: как перейти на сайт из репозитория Гита

Чтобы посмотреть страницу, выберите Settings, вкладку Pages и перейдите по ссылке вашего проекта. Убедитесь, что страница отображается корректно, для этого откройте её в нескольких браузерах: например, я использовал Сафари и Хром. Отправьте ссылку на сайт друзьям, попросите их пройти по ссылке и проверить отображение. Вы можете сверстать идеально для вашего браузера, например, Хрома, но в других вёрстка может сломаться.

6. Доработайте код

Даже если вы сделаете всё необходимое с файлом проекта в Фигме, выгруженный код будет с ошибками. Разобраться в HTML и приложить к нему руки всё равно нужно. Эта инструкция не отменяет необходимости читать все пояснения преподавателя и ходить за консультацией в его чат. Расскажу, что делал я.

В HTML-файле добавил тег «button». Фигма автоматически все элементы засовывает в тег «div»: даже вдумчивый поиск в общественном сознании форумов и в Фигме не помог обозначить кнопку так, чтобы в коде получить тег кнопки.

Было	Стало
<div class="button-price-turkey"> <div class="text-button-bold">64 ₽</div> </div>	<div> <button type="button" class="button-price"><span class="text-button-bold">64 ₽</span></button> </div>

В HTML-файле добавил теги «h1», «h2». Если текст жирный — Фигма добавляет ему тег «b». Исправить это можно так: заменить «b» на «h1» или «h2». Помните, что тег «h1» должен быть только один в документе.

Было	Стало
<b class="header-title">Фрутоняня</b>	<h1 class="header-title">Фрутоняня</h1>

В CSS-файле убрал «position: absolute». Поиском (Ctrl+F) найдите в файле все «absolute» и удалите их по одному. Если вы настроили все расстояния в Фигме на автолэйауте, ничего не изменится. Если вы убираете «position: absolute» и в макете что-то разваливается, верните (Ctrl+Z): с этим нужно будет разбираться вручную или оставить как есть.

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