Экспорт параметров и графики из Figma

Описание навыка

Профессиональная задача:

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

Зачем нужен этот навык:

Входные данные для вёрстки сайта — обычно макет, часто в формате Figma. Верстальщик получает макет и самостоятельно открывает его в браузере или же в графическом редакторе Figma, извлекает информацию и графику, полученные параметры прописывает в HTML и CSS. Без этого умения готовую вёрстку просто не сделать. Графический редактор Figma стал очень распространённым, и дизайнеры часто в нём делают макеты сайтов, так как редактор работает в браузере и не зависит от операционной системы.

Расположение относительно других навыков:

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

Минимальные требования для освоения:

Пройдено три части тренажёра Знакомство с HTML и CSS:

Состав навыка

Подготовительный материал

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

Углублённая теория

Углублённая теория и методики общим объёмом 30 страниц.

Включает следующую информацию:

Обзор интерфейса и основных функций Фигмы, которые нужны для работы верстальщика.
Методики получения данных о тексте, определения цвета элементов, работы с эффектами, измерения расстояний и экспорта графики

Фрагмент методики по созданию разметки

Демонстрационные кейсы

Два демонстрационных кейса, по одному для лёгкого и сложного уровня.

Показывают как применять описанные выше инструкции по работе с макетами.

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

Так выглядит страница демонстрационного кейса:

Страница демонстрационного кейса