Маргарита Романова показала, как без больших трудозатрат повысить интерактивность прототипов в Фигме.

— Выделение строки таблицы, отображение раскрывающегося списка действий со строкой, изменение статуса строки — с помощью интерактивных компонентов;
— Для раскрывающегося списка настройка Absolute position позволяет игнорировать Auto layout компонента, в котором он находится;
— Для Auto layout таблицы настройте Canvas stacking: First on top. Так верхние строки расположатся в слоях выше, и нижние строки не будут перекрывать раскрывающиеся списки действий;
— Отображение в таблице большого количества тултипов;
— Component properties позволяет работать с текстом, не переходя на конкретный слой с текстом. Функция Expose properties from Nested instances позволяет редактировать текст тултипа прямо в свойствах инстанса родительского компонента;
— Чтобы редактировать текст тултипов, которые отображаются с помощью интерактивного компонента, для состояния компонента без тултипа надо добавить тултип с нулевой прозрачностью.

#figma #prototype #table

Вова Красильников написал, как в Фигме организовать работу со светлой и тёмной темой с помощью переменных.

— С помощью панели Local variables (ничего не выбрано, вкладка Design) добавьте переменную типа Color;
— Присвойте переменной второе значение, добавив ещё одну колонку в появившейся таблице;
— Задайте компонентам и уникальным элементам макета цвета с помощью переменных (отображаются квадратиками в отличие от круглых стилей);
— Чтобы использовать одно из значений переменной, на панели Layer выбранного элемента нажмите на гаечки, выберите коллекцию переменных (по умолчанию будет Collection 1) и название нужного столбца (режим);
— По умолчанию используется режим родительского слоя;
— Можно создать секции светлой и тёмной темы, задать для них режимы. Тогда фреймы с переменными цветами, попадая в эти секции, будут автоматически применять цвета светлой или тёмной темы.

#figma #dark_theme

Опубликовали видео с Alfa Design Meetup #1:

1. Вячеслав Киржаев, Альфа-Банк — AI в руках дизайнера цифровых продуктов: приёмы и техники для повышения эффективности

2. Кирилл Викентьев, Альфа-Банк — Скайнет на страже пользовательских ценностей: как мы используем AI в командах роста

3. Ольга Петроченко, Альфа-Банк — Почему я так придираюсь к вёрстке: на что дизайнеры часто не обращают внимание при вёрстке макетов, и как этого избежать

4. Геннадий Мохов, mos.ru — Чем занят дизайн-директор: фреймворки, подходы и ритуалы при управлении командой любого масштаба

#ai #figma #layout #management

Я написал, как быстро сделать в Фигме прототип формы, поля которой можно заполнять в любом порядке.

— С этим помогут локальные переменные (Variables) и условия (экшен Conditional);
— Если их не использовать и просто переводить пользователя с одного экрана на другой, для формы из 4 полей потребуется 16 экранов (включая полностью заполненную форму и полностью незаполненную);
— Поля, с которыми будет взаимодействовать пользователь, надо заменить на локальные компоненты с вариантами «Не заполнено» и «Заполнено»;
— Когда пользователь заполняет поле, это надо сохранять в локальную переменную;
— При отображении формы надо проверять переменные и переключать компоненты заполненных полей на нужный вариант: триггер After delay, повешенный на компоненты конкретных полей, плюс экшен Conditional.

#figma #prototype #form

Дмитрий Якушин написал о дизайн-токенах.

— Набор дизайн-токенов позволяет сделать визуально согласованный и при этом гибкий дизайн (легко поменять один оттенок на другой);
— Дизайн-токен — псевдоним определённого значения той или иной переменной: цвета, шрифта, размера элемента, тени, отступа, скругления;
— Цвет #677178 можно назвать color-grey-600 и использовать в макетах так, а можно создать токены color-text-secondary и color-component-badge-bg-neutral, которые будут ссылаться на color-grey-600;
— В тёмной теме color-text-secondary может ссылаться на другой цвет, что упрощает создание макетов для других тем;
— Говорящие названия упрощают их использование, особенно новыми участниками команды;
— Есть черновая версия стандарта дизайн-токенов от W3C;
— В составном токене (миксине) может быть больше одной переменной. Например, в токене типографики: название шрифта, кегль, высота строки, межбуквенный интервал;
— color-green-600 — глобальная переменная (примитив, палитра, референсный токен) с абстрактным названием без контекста. Число обычно отражает количество света в цвете;
— color-text-success — дизайн-токен, который ссылается на переменную color-green-600 и имеет контекст использования: для текстовых сообщений об успехе;
— Есть компонентные токены, которые относятся к конкретным компонентам, например, color-component-badge-bg-info для фона информационного бейджика;
— Распространены стили названия: color_text_primary для веба, сolorToken.textPrimary для мобильных платформ;
— Полная структура названия: префикс, группа (color), тип (text, component), элемент (badge), модификатор (background), вариант (info), состояние (hover);
— Некоторых частей может не быть: если токен не относится к компоненту, если к проекту не подключено нескольких библиотек с токенами (прификс их идентифицирует);
— В именах токенов размеров лучше не использовать цифры, чтобы не было путаницы с фактическими значениями: xx-small, x-small, small, medium, large, x-large, xx-large;
— Категории: colors, font family, font size, line height, border color, grid, border radius, spacing, box shadow, duration/transition, shadows, z-index, size.

#figma #design_system

Маргарита Романова написала об управлении доступом к платным возможностям Фигмы.

— Проблема: непонятно, откуда в пространстве появляются редакторы, за которых надо доплачивать сверх плана;
— Команда в Фигме — общее пространство, где хранятся проекты с файлами;
— На тарифе выше Professional появляется сущность «Организация», которая может включать несколько команд;
— У Фигмы есть Design seat и DevMode seat, к каждому может быть доступ Full (платный), Viewer и Viewer-restricted (бесплатные);
— Причина проблемы: в отличие от Viewer-restricted, пользователь с доступом Viewer может самостоятельно переключиться на Full;
— Это происходит, например, когда он переносит файл из черновиков в пространство команды, создаёт файл в проекте, редактирует файл, которым поделились с доступом «Can edit» (на плане Professional, Organization), нажимает на «Edit file» (на плане Enterprise);
— Запретить это можно, установив Viewer-restricted каждому пользователю с доступом Viewer. Можно сделать его доступом по умолчанию для всех новых пользователей (настройка Default seat type);
— Если у пользователя Full seat в 2 разных командах, которые не в одной организации, за доступ заплатит каждая команда;
— На месячном тарифе (на плане Professional), оплата списывается только за пользователей, у которых Full seat на день оплаты;
— На годовом можно выдавать Full seat в пределах количества, выбранного при подписке. Раз в месяц (в число, когда происходит годовая оплата) Фигма проверяет количество Full seats и выставляет счёт, если это количество превышено;
— Добавить мест в годовую подписку можно в любой момент (оплата спишется в конце года), убавить — за 2 недели до годовой оплаты;
— На планах Organization и Enterprise Фигма раз в квартал проверяет количество Full seats. Если есть превышение, в течение 2 недель можно подтвердить добавление этих мест в подписку (с оплатой в конце года), перевести часть на бесплатные места или ничего не делать, тогда дополнительные места добавятся автоматически;
— Можно настроить ежедневный Seat upgrade digests и узнавать обо всех повышениях доступа до Full с комментарием, превышают ли они ваш план.

#figma #management

В Контуре подготовили гайд, как навести порядок в макете.

— Настройте автолейауты и констрейнты. Разработчик быстрее поймёт задумку и воспроизведёт её средствами CSS и HTML;
— Назовите слои единообразно и так, чтобы было понятно, что это за элементы. Multi-edit станет работать лучше;
— Размеры элементов задавайте так, чтобы было понятно, как они ведут себя при изменении содержимого и размеров контейнера. Произвольные размеры мешают понять, как работает макет;
— Группируйте элементы так, как они будут связаны в вёрстке. Можно показать область ховера, объяснить логику отступов между ними;
— В компонентах используйте варианты вместо скрытия слоёв или множества отдельных компонентов. Заполненные значения не будут сбрасываться, меньше нагрузка на компьютер;
— В их описаниях пропишите ключевые слова с синонимами, как люди называют такие элементы;
— Компонент, который используется только внутри других компонентов, можно сделать приватным, поставив _ в начале его имени. Он не будет опубликован в библиотеке;
— Как только начинаете использовать компонент в разных частях системы, переносите его в библиотеку и подключайте её к нужным макетам;
— В стили можно добавить не только цвета и типографику, но и изображения (например, аватарки), обводки, сетки, тени и другие эффекты;
— Старайтесь не использовать лишних элементов. Аватар можно сделать с помощью заливки фигуры картинкой вместо маски и 2 объединённых в группу элементов;
— Не дублируйте всю страницу целиком, чтобы описать поведение отдельного элемента. Чтобы показать, где происходит изменение, достаточно показать страницу один раз;
— Показывайте состояния элементов рядом, используйте подписи, если они нужны;
— Давайте осмысленные названия секциям. Они видны при зумировании, так проще найти нужные фрагменты макета.

#figma #handoff

Маргарита Романова написала первую статью из серии об эффективном прототипировании в Фигме.

— Нелинейный прототип позволяет пользователю отойти от идеального сценария, совершить ошибки. Взаимодействие становится реалистичнее, а инсайты — качественнее;
— Можно проверить интерфейсы, в которых к цели ведут несколько путей;
— В Фигме есть экшен Navigate to, но его лучше использовать для переходов между страницами, а не состояниями одной и той же страницы. Иначе получится куча связанных фреймов, и редактировать такой прототип больно;
— Для возвращения назад используйте экшен Back, он сразу добавляет обратную анимацию;
— Экшен Change to переключает инстанс компонента в заданное состояние. Его достаточно, когда взаимодействие ограничено этим инстансом. Например, пользователь навёл курсор на кнопку, и она изменила цвет;
— С помощью переменных, привязанных к слоям и компонентам, можно сделать так, чтобы действие запускало событие (экшен Set variable), которое будет определённым образом модифицировать эти слои и компоненты;
— Но в этом случае без Smart animate, только Instant;
— Один триггер (например, нажатие на элемент) может приводить к комбинации экшенов. Например, Navigate to и Set variable;
— Популярная ошибка: с помощью Change to настроить, чтобы нажатие на чекбокс ставило или снимало флаг. Если в конкретном сценарии нажатие на него должно делать что-то ещё (разблокировать кнопку), будет 2 конкурирующих набора экшенов, срабатывающих на один триггер (нажатие на чекбокс);
— В этом случае сработают экшены инстанса в сценарии, то есть кнопка в форме разблокируется, а флаг в чекбоксе не появится;
— Решение: сделать интерактивный компонент, но логику привязать к переменной, а не триггеру.

#figma #prototype

Фёдор Миронов написал, как ускорить подготовку макетов мобильного приложения под вторую платформу с помощью переменных в Фигме.

— Создайте коллекции переменных, которые будут отвечать за параметры интерфейса;
— Коллекция Platform: стиль шрифтов, размеры устройств, пропорции картинок;
— Например, переменная Device width для iOS может иметь значение 393, для Android — 412. А переменная Font: SF Pro и Roboto;
— Коллекция Typography: размер шрифта, межстрочное и межбуквенное расстояние, вес;
— Чтобы создавать дизайн с учётом доступности и масштабировать шрифты, основные параметры можно подтягивать из коллекции Dynamic typography (достаточно базового и максимального значения размера шрифта и межстрочного расстояния);
— Для названий цветов удобно использовать токены из Material Design 3, так как цвета на обеих платформах называются одинаково и есть их контекстные названия;
— Универсальные компоненты вроде кнопок выглядят одинаково на разных платформах, меняется только текстовый стиль;
— Платформенные компоненты вроде Navbar, которые сильно отличаются, лучше сделать вариантами одного компонента;
— Вложенными компонентами легче управлять по отдельности при большом количестве вариантов. Важно одинаково называть их параметры для iOS и Android, чтобы при смене платформы сохранялся контент.

#mobile #figma

Михаил Нежник подготовил для начинающих гайд по Фигме: слои, автолейауты, ограничители, стили, компоненты и варианты.

— Big nudge — значение, на которое с зажатым Shift сдвигается элемент на холсте или изменяется значение в поле. По умолчанию 10. Поставьте его равным основному модулю, часто это 8;
— Что можно сделать свойством, не должно быть отдельным слоем. Например, заливка кнопки должна быть свойством Fill, а не отдельным слоем с цветным прямоугольником;
— Функция Select all with позволяет на всей странице выбрать все слои, например, с такой же заливкой или свойствами текста;
— Чтобы раскрыть все слои внутри выбранного, можно нажать на находящийся рядом с ним шеврон с зажатым Option;
— Свойство Canvas stacking регулирует, какие слои внутри автолейаута находятся визуально выше. Может пригодится, когда на одном из слоев окажется выходящий за его границы дропдаун;
— К свойствам Fill container и Hug contents можно добавить минимальную и максимальную ширину, на которые автолейаут может растягиваться;
— Если цветовые стили разделены на категории (Text, Background, Stroke и так далее), в выбранном элементе интерфейса можно быстро изменить цвета, например, только текста;
— Если в текстовом слое написать «:» и первые символы слова, появится список эмодзи;
— Атомарный подход: внутри одного компонента (молекулы) могут находиться другие (атомы). С помощью Nested instances свойства атомов можно вынести на панель молекулы, чтобы не проваливаться каждый раз до атомов для настройки.

#figma

Маргарита Романова написала, что с 11 марта изменится в тарифах Фигмы.

— Вместо Design seat, DevMode seat и FigJam seat с разными уровнями доступа будет 4 роли;
— Full seat — редактирование Figma (c Dev Mode), FigJam, Figma Slides;
— Dev seat — редактирование FigJam, Figma Slides, просмотр Figma (c Dev Mode);
— Collab seat — как Dev seat, но без Dev Mode;
— View seat — просмотр всего, но без Dev Mode;
— Design seat станет Full seat и подорожает: $20 в месяц или $192 в год, $55 в месяц для плана Organization;
— FigJam seat → Collab seat;
— Dev Mode seat → Dev seat и станет доступен на плане Professional;
— Для каждой роли можно настроить режим выдачи доступа: а) ручной, б) автоматический, если оплаченных мест хватает, в) автоматический;
— Если у пользователя есть права Edit в файле или проекте, он может запросить платную роль и без апрува ей пользоваться 3 дня;
— Даже если сразу отозвать случайно выданный доступ сверх оплаченных мест, он попадёт в счёт.

#figma #management

Михаил Нежник подготовил гайд по анимации в Фигме.

— Если на экран ведут несколько элементов, можно их выделить и потянуть связь до целевого фрейма. Переход будет настроен для всех выделенных элементов;
— Можно скопировать анимацию (выделить её, нажав слева от названия триггера на панели Interactions, и скопировать) и вставить выделенным элементам;
— Также можно её отредактировать или удалить у всех выделенных элементов;
— Настройка «Sticky, stop at top edge» фиксирует элемент при прокрутке внутри блока, а при достижении границ блока прокручивать его уже вместе со страницей (лучше увидеть);
— Для экшена прокрутки (Scroll to) можно выбрать объект и положительное или отрицательное количество пикселей. Тогда прокрутка остановится на это количество после или до объекта. Не забудьте настроить Overflow для прокручиваемого фрейма;
— Смарт-анимация смотрит, что изменилось на связанных фреймах. Если элемент с одним названием изменил размер или переместился, получится плавный переход между состояниями;
— Ease in — анимация начинается медленно и ускоряется к концу;
— Ease in back — элемент сначала отходит назад (а потом как Ease in);
— Ease out back — анимация начинается быстро, замедляется к концу, элемент пролетает немного дальше точки назначения, но возвращается к ней.

#figma #animation

Игорь Бутков понятно написал для начинающих о стилях, переменных и дизайн-токенах в Фигме.

— Минус стилей: если в большой дизайн-системе надо заменить один цвет на другой, каждый стиль придётся обновлять по отдельности;
— С переменными такой проблемы нет: цвет становится значением переменной (корневого токена), с которой можно связать другие переменные;
— Корневые токены варьируются по цветам и контрастности, например: purple-500;
— С ними могут быть связаны семантические токены — абстрактные названия, указывающие не на сам цвет, а его функцию, например: background.primary;
— Если нужна возможность отдельно настраивать, например, цвета кнопок, можно добавить компонентные токены, например: button.primary.default;
— Минус: таких токенов будет очень много;
— Преимущества абстрактных названий: если вместо button.purple будет button.primary, фиолетовый цвет можно легко заменить на розовый, и логика названий не сломается;
— Для обозначения числового шага используют S, M, L или числа с большим шагом: 100, 200, 300;
— Числа удобны, если размеров много и могут добавляться промежуточные шаги (250 добавить проще и он будет понятнее, чем 2L).

Токены Atlassian. #figma #design_system #color