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

Благодаря Figma Variables процесс адаптации макетов под разные платформы можно значительно оптимизировать: сократить время разработки вдвое, сохранить уникальность каждой платформы и сэкономить бюджет проекта. В этой статье мы рассмотрим, как правильно настроить компоненты для этого
Федор Миронов
Федор Миронов
Дизайнер интерфейсов в студии мобильной разработки CleverPumpkin Разрабатываем классные мобильные приложения. В ТОП 3 в рейтинге креативности в дизайне мобильных приложений по РФ по мнению Рейтинга Рунета. Делимся полезными материалами из нашего опыта разработки интерфейсов.
figma variables для автоматизации подготовки макетов мобильных приложений

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

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

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

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

Меня зовут Фёдор Миронов, я — Lead дизайнер интерфейсов в студии разработки мобильных приложений и цифровых продуктов CleverPumpkin. В этой статье я расскажу, как настроить компоненты с Variables так, чтобы вся магия сработала.

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

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

Прочитав немало статей о создании адаптивных веб-макетов с помощью Variables, у меня появилась неожиданная идея — что если использовать Variables не только для переключения тем, но и для смены платформы макетов с iOS на Android? 

адаптация макетов CleverPumpkin

Это решение помогло бы избавить дизайнера от монотонного процесса адаптации макетов и синхронизации изменений при добавлении новых функций в приложение.

Я провёл несколько успешных экспериментов и понял, что это вполне рабочий подход, который мэтчится с процессами компании и правилами подготовки макетов. Базой для работы является создание нескольких коллекций Variables, которые отвечают за определенные параметры интерфейса в компонентах. Рассмотрим как организованы Variables и для чего они используются. 

Настройки Variables

Platform

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

Typography

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

Theme

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

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

Dynamic Typography

Эту коллекцию стоит добавлять, если разработка подразумевает поддержку инклюзивного дизайна.

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

Компоненты

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

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

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

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

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

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

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

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

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

Поделиться
Отправить
Запинить

Обсуждение