О компании
Мы всегда ищем толковых ребят — пишите на
в рейтинге разработки мобильных приложений «под ключ»
Рейтинг Рунета
2 место
  • /
  • /
16 января 2025

ВРЕМЯ ПРОЧТЕНИЯ — 7 МИН

Автоматизируем рутинные задачи и уменьшаем бюджет на дизайн: использование Figma Variables в создании макетов мобильных приложений

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

Когда дизайнер заканчивает работу над макетами, UI Kit и всеми элементами для первой мобильной платформы, ему нужно адаптировать всё тоже самое для второй. Хоть это задача простая, но она занимает довольно много времени.

Наш Lead дизайнер интерфейсов Фёдор Миронов нашел способ, как с помощью Figma Variables оптимизировать процесс создания макетов для второй платформы. При этом можно сохранить уникальность каждой из них и значительно быстрее подготовить все нужные состояния для разработчиков.

В результате удаётся примерно в два раза сокращать время рутинной работы для дизайнера, оптимизировать затраты на разработку дизайна и получать макеты сразу для iOS и Android, что в целом экономит бюджет проекта.

В статье рассказываем, как настроить компоненты с Variables так, чтобы получить всю эту магию.

Lead дизайнер интерфейсов Фёдор Миронов

Эволюция Variables — от переключения тем к кроссплатформенной адаптации

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

Прочитав немало статей о создании адаптивных веб-макетов с помощью Variables, появилась неожиданная идея — что если использовать Variables не только для переключения тем, но и для смены платформы макетов с iOS на Android?
Это решение помогло бы избавить дизайнера от монотонного процесса адаптации макетов и синхронизации изменений при добавлении новых функций в приложение. Фёдор провёл несколько успешных экспериментов и понял, что это вполне рабочий подход, который мэтчится с процессами компании и правилами подготовки макетов. Базой для работы является создание нескольких коллекций Variables, которые отвечают за определенные параметры интерфейса в компонентах.

Настройки Variables

Platform

Переменные в Platform отвечают за смену платформы и содержат базовые настройки: стиль шрифтов, размеры устройств, пропорции картинок.
настройка коллекции Platform

Typography

Использование родных шрифтовых стилей для каждой платформы не вызывает проблем, если — в Figma в названии текстового стиля указать названия iOS и Android — Footnote | Body Medium. В Variables указываем параметры шрифтов для каждой платформы. Чтобы учитывать Accessibility, возможность создавать дизайн с учетом доступности и масштабировать шрифты, основные параметры подтягиваем из коллекции Dynamic Typography.
настройка коллекции Typography

Theme

Наличие светлой и тёмной темы часто является обязательным атрибутом приложения. И коллекция Theme как раз отвечает за смену темы в макетах.

Для названий цветов мы используем токены Material Design 3. Это удобно, так как цвета на обеих платформах называются одинаково и есть их контекстные названия.
настройка коллекции Theme

Dynamic Typography

Эту коллекцию стоит добавлять, если разработка подразумевает поддержку инклюзивного дизайна.
настройка коллекции Dynamic Typography
Указываем параметры масштабирования шрифтов для каждой платформы. Для проверки поведения шрифта в интерфейсе при его масштабировании пользователем, в настройках достаточно добавить базовое значение и максимальное.

Компоненты

Создаём платформенные компоненты и добавляем к ним переменную Platform. И в этот момент весь процесс начинает работать. Теперь при смене Varilbles на артборде будут меняться компоненты и стили платформ.

Платформенные компоненты

Для полей ввода создаем универсальный компонент, который содержит вложенные варианты платформенных компонентов. Получается некая матрёшка, и с одной стороны может показаться, что это усложнение из-за большой вложенности. Но вложенными компонентами легче управлять по отдельности при большом количеством вариантов. Главное, чтобы параметры платформенных компонентов назывались одинаково у iOS и Android. При смене платформы через Varilbles переназначенные инстансы не ломаются и сохраняют контент.
настройка платформенных компонентов Figma

Универсальные компоненты

К универсальным компонентам относятся решения, которые будут выглядеть одинаково на платформах, и будет меняться только текстовый стиль. К таким компонентам можно отнести кнопки. Их можно кастомизировать на любой платформе и сделать одинаковыми.
настройка универсальных компонентов Figma

Подведём итоги

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

Подход с применением Variables поможет получить автоматизированную адаптацию макетов с iOS под Android, соблюсти гайдлайны платформ, что в дальнейшем ускорит внесение правок при добавлении новых функциональностей в приложение.

Да, первоначальная настройка переменных и подготовка UI Kit сразу для двух платформ потребует несколько больше времени. Однако это решение повысит общую консистентность дизайна благодаря автоматизации рутинных процессов, сократит время на разработку макетов и общий бюджет проекта.
Другие статьи по теме:
Есть идея?