Figma Variables: как ускорить дизайн адаптивов без плагинов и SMS
Variables упрощает подход к созданию адаптивных макетов. С помощью переменных дизайнеры могут минимизировать количество стилей, управлять системой размеров, а также ускорять процесс адаптации интерфейсов для разных устройств и экранов. В этой статье мы будем адаптировать Desktop версию к мобильным экранам с помощью Variables автоматически.
Инструмент Variables доступен платным аккаунтам, который есть у многих команд. На бесплатном тарифе можно создать только один режим, что кажется бессмысленным, так основной смысл инструмента - смена режимов. Просто рассмотреть файл с проработанной системой поближе можно по ссылке Figma Community.
Объяснение для бабушек и новичков
При подготовке макета к верстке дизайнеры создают минимум два комплекта текстовых стилей (для Desktop и для Mobile), две системы отступов (для Desktop и для Mobile), по две версии компонентов, которые меняются в зависимости от ширины экрана (например, карточки для Desktop и для Mobile).
Разработчики же на самом деле не используют такое количество дубликатов, у них для этого есть CSS - один стиль меняется в зависимости от ширины экрана сколько угодно раз, но остается одним стилем: не Desktop H1 и Mobile H1, а просто – H1.
Figma Variables - это инструмент взаимопонимания дизайнеров и разработчиков в рамках одной системы, по одной логике.
Преимущества использования переменных
- Упрощение управления стилями: Переменные позволяют избежать дублирования стилей и облегчить их изменение.
- Гибкость дизайна: Легко изменять значения переменных для адаптации макетов под разные разрешения, темы или языки интерфейса.
- Взаимопонимание с разработчиками: вас будут искренне благодарить за качественную работу, которая ускорит процессы команды.
Коротко и четко
Variable Numbers – это одни и те же числа, которые вы используете много раз в разных местах. Где именно они пригодятся указанно в настройках строки числа в разделе Scope.
Эти числа Figma меняет во всех указанных местах автоматически в зависимости от выбранного вами режима.
Процесс работы с Variables
1. Создание режима (Mode)
На старте в разделе Local variables Figma попросит вас создать первую переменную. Вариантов 4:
- Цвет (HEX, RGB, CSS или любой код цвета для стилей и градиентов)
- Число (то, с чем мы будем работать в статье)
- Строка (любой текст на любом языке)
- Boolean (Hide/Show что-либо в макете)
Выберите Number и создайте переменную, указав, например, ширину исходного макета. Так вы создадите первое значение первого режима (Variable mode): в первой колонке будут названия ваших переменных, в следующих – режимы со значениями ваших переменных. Следующую колонку переименуйте с Value на Desktop.
От одного режима Desktop в файле мало толку – магия начинается с добавления второго, назовите его Mobile.
2. Внесение переменных
Теперь необходимо внести все числовые переменные вашей системы размеров и отступов, которые будут использоваться для адаптации макета в режимах Desktop/Mobile. Например, может быть такая система отступов:
- Screen Width: 1920/375 (ширина экрана)
- Vertical Margin: 120/80 (отступ между блоков)
- Horizontal Margin: 60/20 (отступ по краям макета)
- Large Heading: 80/40 (H1)
- Medium Heading: 60/32 (H2)
- Small Heading: 40/24 (H3)
… - Large Block Gap: 80/40 (большой отступ внутри блока между разными типами контента, например, между заголовком и слайдером)
- Small Block Gap: 60/20 (маленький отступ внутри блока между однотипным контентом, например, карточками)
- Card Padding: 32/24 (отступ внутри карточки до контента)
- Card Gap: 20/16 (отступ внутри карточки между контентом, например, заголовок и фото)
- Large Card Radius: 32/24 (радиус скругления больших карточек)
- Small Card Radius: 24/16 (радиус скругления маленьких карточек)
- Medium Text Block Gap: 24/20 (расстояние между заголовком и текстом в блоке)
- Small Text Block Gap: 16/12 (расстояние между заголовком и текстом в карточке)
3. Назначение Variables
Сама по себе таблица полезна лишь для хранения числовых переменных на всякий случай, а рабочим инструментом она становится только после того, как вы примените значения Variables к вашему дизайну. Начнем с текстовых стилей:
В настройках каждого стиля вместо произвольного числового значения выберите Apply variable (иконка шестеренки-шестигранника в поле или в выпадающем списке), и выберите из списка ваших Variables подходящий параметр, например, Large Heading, стилизующий все заголовки H1. Для удобства можно воспользоваться строкой поиска, ��ли группировать переменные изначально.
Теперь ваш текстовый стиль имеет значение кегля 80px, которое вы внесли в таблицу как Large Heading для режима Desktop, и держит в уме второе значение кегля 40px для режима Mobile. Смену размера в действии вы увидите в тот момент, когда измените режим для выбранного фрейма или для всего файла сразу. Но эффектнее результат будет, когда вы расставите все Variables на свои места:
- Укажете размеры для всех текстовых стилей в Variables,
- Установите значения радиусов скругления в Variables,
- Расставите Padding и Gap во всех Auto Layout в Variables,
- Или даже укажете параметры Grid в Variables
Чудеса работы Variables произойдут тогда, когда вы примените к выбранному фрейму режим Mobile (по умолчанию, всем фреймам устанавливается первый режим – Desktop).
Ясный пример на видео:
Важно
Для правильной рекомпозиции элементов макета с широкой версии в мобильную версию важно осознанно работать с дополнительными параметрами Auto Layout:
- Fill ширины контейнера блока
- Wrap сетки из карточек, где у каждой карточки указаны Min/Max Widht
Не игнорируйте проработку этих параметров, устанавливайте их сразу в исходном макете.
Для чего еще можно использовать Variables?
Для светлой и темной тем, создав всего один набор цветовых стилей, но с использованием Variable Colors. Эти цвета можно применять к градиентам, оттенки которых удобно редактировать прямо из таблицы.
В этом случае также необходимо применить Variables ко всем существующим стилям: Text, Fill, Stroke, Gradient, Shadow. Переключение цветовой темы доступно как для отдельных фреймов в блоке настроек Appearance, так и для всей страницы сразу. Перекрашивание большого количества фреймов подтормаживает и занимает некоторое время до минуты.
Вывод
Инструмент Variables упрощает процесс проектирования и значительно сокращает время на внесение изменений, позволяя легко управлять стилями и параметрами для различных устройств. Благодаря возможности централизованного редактирования значений, команды могут поддерживать согласованность и адаптироваться к требованиям современных интерфейсов без лишних усилий.
Внедрение переменных в ваш рабочий процесс позволит оптимизировать взаимодействие между дизайнерами и разработчиками, сделав его более гладким и эффективным.
Не бойтесь экспериментировать с этим мощным инструментом — ваша работа станет более гибкой, а результаты впечатляющими!