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 упрощает процесс проектирования и значительно сокращает время на внесение изменений, позволяя легко управлять стилями и параметрами для различных устройств. Благодаря возможности централизованного редактирования значений, команды могут поддерживать согласованность и адаптироваться к требованиям современных интерфейсов без лишних усилий.
Внедрение переменных в ваш рабочий процесс позволит оптимизировать взаимодействие между дизайнерами и разработчиками, сделав его более гладким и эффективным.
Не бойтесь экспериментировать с этим мощным инструментом — ваша работа станет более гибкой, а результаты впечатляющими!