Оптимизация адаптации шаблонных страниц | Figma

Всем привет! Меня зовут Ангелина, и я UX/UI дизайнер. Сегодня хочу поделиться с вами своим опытом использования локальных переменных в Figma для оптимизации создания шаблонных страниц сайта.

Что такое варианты, официальный сайт фигмы Figma Learn дает такое определение: Переменные в Figma design хранят многократно используемые значения, которые могут применяться ко всем видам свойств дизайна и действий по прототипированию. Они помогают экономить время и усилия при создании проектов, управлении системами проектирования и создании сложных процессов прототипирования.

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

На данный момент есть 4 вида переменных:

color — цвет
number — числа, например размер текста
string — строки, например название шрифта
boolean — булевые значения true false

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

Присвоим значения для ширины фрейма:

Затем в Layer нужно выбрать подходящий формат отображения из списка:

Мы завершили базовую подготовку и создали переменные ширины для трёх типов экранов: Desktop, Tablet, Mobile. Был подготовлен фрейм над которым в дальнейшем будет идти работа.

Я беру 4 за базовую единицу и настраиваю сетку под нужные экраны. Чтобы упростить задачу, я использую тип сетки Stretch и подгоняю каждый экран под эту сетку.

Основные характеристики сетки:

Count — количество колонок
Margin — расстояние от границ фрейма
Gutter — расстояние между колонками

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

Принцип создания переменных остаётся тем же, что и на предыдущих этапах. Рассмотрим, как это работает на примере простого текста.
Стиль текста определяется следующими параметрами:

Font weight — толщина шрифта. Может принимать значения типа number или string
Font size — размер шрифта. Значение задаётся числом (number)
Line height — межстрочный интервал. Измеряется числом (number)
Letter spacing — межбуквенный интервал. Также измеряется числом (number)
Paragraph spacing — расстояние между абзацами. Измеряется числом (number)
Paragraph indent — отступ «красной строки». Измеряется числом (number)

Чтобы избежать путаницы в переменных, можно настроить их отображение в зависимости от типа переменной. Например, на скриншоте ниже переменная body:size будет отображаться только для размера шрифта.

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

Чтобы упростить работу с большим количеством вариантов, можно их сгруппировать. Для этого необходимо выделить нужные переменные, затем нажать правую кнопку мыши и выбрать «New group with selection». Также можно создать группу, добавив в название слово «typography/font family». В результате будет создана группа «typography», содержащая элемент «font family».

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

Для работы с компонентами создадим новую переменную type типа string. Дадим ей название, аналогичное названию страниц. Затем в созданном компоненте присвоим аналогичные названия.

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

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

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

«indent:icon» определяет расстояние между иконкой и текстом
«indent1» и «indent2» задают отступы внутри абзацев
«indent:from the edge» — это отступ от края контейнера
«indent:article the edge» — отступ внутри контейнера

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

Ссылка на файл figma

Спасибо всем за внимание! ❤ Надеюсь, эта информация была вам полезна✨

Оптимизация адаптации шаблонных страниц | Figma | Variables

1. Создание экранов

2. Создание сетки

Работа со шрифтами

4. Работа с компонентами

5. Работа с отступами

Заключение