Оптимизация адаптации шаблонных страниц | Figma | Variables
Всем привет! Меня зовут Ангелина, и я UX/UI дизайнер. Сегодня хочу поделиться с вами своим опытом использования локальных переменных в Figma для оптимизации создания шаблонных страниц сайта.
Что такое варианты, официальный сайт фигмы Figma Learn дает такое определение: Переменные в Figma design хранят многократно используемые значения, которые могут применяться ко всем видам свойств дизайна и действий по прототипированию. Они помогают экономить время и усилия при создании проектов, управлении системами проектирования и создании сложных процессов прототипирования.
В этой статье я пошагово расскажу, как создать страницу сайта для публикации статей, используя локальные переменные в Figma.
На данный момент есть 4 вида переменных:
- color — цвет
- number — числа, например размер текста
- string — строки, например название шрифта
- boolean — булевые значения true false
1. Создание экранов
На первом этапе мы определяем переменную, которая будет контролировать размер экрана, и присваиваем имена создаваемым экранам. Это упростит настройку дизайна под различные размеры устройств.
Присвоим значения для ширины фрейма:
Затем в Layer нужно выбрать подходящий формат отображения из списка:
2. Создание сетки
Я беру 4 за базовую единицу и настраиваю сетку под нужные экраны. Чтобы упростить задачу, я использую тип сетки Stretch и подгоняю каждый экран под эту сетку.
Основные характеристики сетки:
- Count — количество колонок
- Margin — расстояние от границ фрейма
- Gutter — расстояние между колонками
На основе подобранных значений создаю варианты для сетки и добавляю их в саму сетку. Теперь можно добавить сетку в стили проекта и применять к экранам.
Работа со шрифтами
Принцип создания переменных остаётся тем же, что и на предыдущих этапах. Рассмотрим, как это работает на примере простого текста.
Стиль текста определяется следующими параметрами:
- Font weight — толщина шрифта. Может принимать значения типа number или string
- Font size — размер шрифта. Значение задаётся числом (number)
- Line height — межстрочный интервал. Измеряется числом (number)
- Letter spacing — межбуквенный интервал. Также измеряется числом (number)
- Paragraph spacing — расстояние между абзацами. Измеряется числом (number)
- Paragraph indent — отступ «красной строки». Измеряется числом (number)
На этом этапе мы выбираем шрифты, которые будут использоваться в нашем проекте. Затем мы настраиваем их размеры так, чтобы они адаптировались к разным устройствам.
Чтобы упростить работу с большим количеством вариантов, можно их сгруппировать. Для этого необходимо выделить нужные переменные, затем нажать правую кнопку мыши и выбрать «New group with selection». Также можно создать группу, добавив в название слово «typography/font family». В результате будет создана группа «typography», содержащая элемент «font family».
4. Работа с компонентами
Чтобы обеспечить хорошую адаптацию дизайна под разные устройства, иногда требуется использовать компоненты. В контексте этой статьи компонентом является изображение. Размер изображения также можно настроить с помощью вариантов.
Для работы с компонентами создадим новую переменную type типа string. Дадим ей название, аналогичное названию страниц. Затем в созданном компоненте присвоим аналогичные названия.
После создания компонента его можно разместить на готовом фрейме. Для этого выберите созданную ранее переменную.
5. Работа с отступами
Отступы различаются в зависимости от типа элемента. Например, для абзацев, иконок, от границ контейнера, до границ контейнера.
В этом примере я использовала пять разных отступов. Один из них был взят из настроек сетки.
- «indent:icon» определяет расстояние между иконкой и текстом
- «indent1» и «indent2» задают отступы внутри абзацев
- «indent:from the edge» — это отступ от края контейнера
- «indent:article the edge» — отступ внутри контейнера
Заключение
Описанные шаги помогут адаптировать простые экраны. Если же речь идёт о сложных интерфейсах, то адаптация потребует больше шагов и элементов. В таких случаях для адаптации используется большее количество компонентов.
Спасибо всем за внимание! ❤ Надеюсь, эта информация была вам полезна✨