Профессиональный навык

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

Подробное описание навыка

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Пошаговые разборы кейсов

Один разбор для каждого демо-кейса.

Разборы кейсов выполнены в виде подробных текстовых демонстраций с поясняющими иллюстрациями и примерами кода.

Так выглядит один из шагов разбора кейса сайта «Архитектурный блог»:

Шаг демонстрационного разбора

Тренировочный материал

Кейсы с возрастающей сложностью и эталонными решения, на которых вы и тренируете навык.

Четыре тренировочных кейсов: 1 лёгкого уровня, 2 среднего уровня и 1 сложного уровня.

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

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

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

Страница тренировочного кейса

Продажа закрыта