Как делать варианты элементов интерфейса в Figma
Каждый раз делать разные состояния одной и той же кнопки — долго. Варианты в Figma помогут избежать этой нудной работы.
Варианты — это группы компонентов, которые объединяются в один. Благодаря этому дизайнер может в любой момент выбрать, в каком состоянии показать элемент интерфейса: кнопку — нажатой или деактивированной, чекбокс — активным или пустым.
Рассказываем, как сделать варианты для кнопок и воспользоваться ими в макете.
Перед тем как читать эту статью, советуем узнать о функции Auto Layout и компонентах. Иначе вам будет сложно разобраться, для чего нужны варианты и как их сделать.
Редактор. Пишет про дизайн, редактирует книги, шутит шутки, смотрит аниме.
Подготовка компонентов
Чтобы варианты работали, сначала нужно правильно назвать компоненты для них. Для этого в Figma есть система со слешами /:
Название элемента/Значение первого свойства/Значение второго свойства/…/Значение десятого свойства
Рекомендуем описывать варианты на английском языке. Например, отмеченный чекбокс большого размера можно назвать так:
Система названий поддерживает и русский язык, но имейте в виду, что, если ваш макет попадёт к зарубежным дизайнерам, они не смогут понять, что в нём написано:
Как сделать кнопки с системой названий в Figma
Теперь у вас есть два готовых компонента, которые можно превращать в варианты.
Создание вариантов
Чтобы создать варианты из ваших компонентов, выделите их и на панели настроек, в блоке Variants нажмите Combine as variants. Ваши компоненты объединятся в общую группу с вариантами — он называется комбайном.
Обратите внимание, что добавить в комбайн можно только компоненты. Если вместе с ними выделить группы, фреймы или копии компонентов, Figma не даст вам сделать из них варианты.
Как воспользоваться вариантом
Ваша контрастная кнопка перекрасится в серый:
Добавление новых состояний
У каждого объекта может быть сколько угодно состояний, но их важно правильно назвать, чтобы потом вы не потерялись в своём же макете. Сейчас состояния Primary и Secondary относятся к свойству Property 1 — вашему арт-директору будет непонятно, что это значит.
Чтобы переименовать Property 1, выделите весь комбайн c вариантами и на панели настроек в блоке Variants вместо Property 1 напишите Type. Теперь даже спустя десять лет кому угодно будет понятно, что в этом меню нужно выбрать тип элемента:
Как добавить новое свойство
Теперь у стиля Primary появилось новое состояние — Disable. Чтобы его активировать, выберите вашу кнопку на макете и на панели настроек в блоке Button укажите значение State — Disable:
То же самое можно сделать и с дополнительным стилем кнопки, чтобы вы могли быстро показать её отключённой.
С помощью вариантов можно менять что угодно, например цвет, размер, и добавлять иконки.
Когда вариантов становится слишком много, полезно привести весь комбайн в порядок, чтобы вы могли быстро найти любое состояние. Рекомендуем располагать всё вертикально и группировать по типу кнопок:
Не забывайте, что варианты — это те же компоненты. Если вы захотите изменить цвета или форму кнопок по всему макету, это можно сделать через комбайн.
Плагин Button Buddy
Создать варианты кнопок несложно, но отрисовывать каждую по отдельности — долго и нудно. Решить проблему поможет плагин Button Buddy, который автоматически создаёт все основные состояния по указанным вами параметрам.
Как пользоваться плагином:
У вас на макете появится готовый комбайн с базовыми состояниями кнопки:
обложка: Olyasnow для Skillbox Media
Variants — новые вариативные компоненты в Figma
Эта функция в настоящее время находится в стадии бета-тестирования. Figma будет сотрудничать с бета-тестерами Variants. Это необходимо для устранения ошибок, прежде чем сделать новую функцию доступной для всех.
Команда Figma планирует представить Variants для всех к концу ноября. Поддержка интерактивных компонентов появится в начале 2021 года.
Variants представляют новый способ группировки и организации вариаций одного и того же компонента. Это упрощает работу с компонентами и делает их более интуитивно понятными.
Объединяйте варианты в один компонент с настраиваемыми свойствами и значениями. Они могут отображать фронтенд-код, упрощать библиотеки ресурсов и ускорять выбор подходящего варианта.
В нашем примере есть компонент кнопки, который обладает 24 вариациями. Их все вы можете наблюдать на скриншоте нашей дизайн-системы:
Тут есть четыре свойства, каждому из которых свойственны определённые значения.
Figma использует этот набор свойств и значений для идентификации каждого уникального образца. На скриншоте ниже видно все эти параметры для одной кнопки.
Чтобы выбрать необходимые параметры, нажимайте на стрелочку вниз рядом со свойством. Или включайте/выключайте их с помощью свитчеров.
Примечание: В варианты можно преобразовывать только компоненты. Того же самого вы не сможете сделать, например, с объектами или слоями.
Есть несколько вещей, которые вы можете сделать, чтобы максимально упростить преобразование уже существующих компонентов дизайн-системы.
Примечание: Эти пункты влияют на то, как пользователи могут выбирать компоненты из библиотек в Figma. Если они станут причинами проблем в вашей команде, отложите внесение этих изменений, пока не получите доступ к Variants.
Используйте последовательную систему именования Figma уже поддерживает систему именования через слэш / для организации компонентов. Вы можете использовать её, чтобы преобразовать существующие компоненты в Variants. Мы рекомендуем использовать следующую структуру для любых компонентов, которые вы желаете преобразовать:
— Любой текст перед первым / станет именем компонента. Каждый дополнительный / уровень будет создавать новое свойство.
— По умолчанию Figma назовёт первое свойство Variant, следующее Property 2, затем Property 3 и так далее.
— У каждого варианта должно быть определено значение для каждого свойства. Убедитесь, что в каждом компоненте используется одинаковое количество слэшей.
— Когда вы объединяете варианты в один компонент, Figma создаст переключатели для любых значений Yes/No или True/False.
Например, наш компонент кнопки имеет следующее имя:
После преобразования это будет выглядеть так:
Вы сможете изменить название и порядок любых свойств после преобразования их в варианты. Измените порядок свойств в разделе «Variants» в инспекторе. Это также изменит порядок значений в имени каждого варианта.
Будет легче отслеживать все варианты, если вы разместите их в сетке. Контейнер компонента верхнего уровня не может содержать ничего, кроме вариантов. Это означает, что вы не можете сгруппировать набор вариантов или вставить текст в контейнер.
Чтобы делать аннотации к вариантам, мы рекомендуем добавлять текстовые метки для соответствующих свойств и значений рядом с контейнером вариантов.
Вам не нужно держать под рукой компонент для каждой возможной комбинации свойств и значений. Здесь могут находиться любые варианты интерактивных компонентов, которые вам понадобятся.
Figma группирует варианты в одном контейнере. По умолчанию она будет представлять этот контейнер с фиолетовой пунктирной обводкой. Как и в случае с обычными фреймами, вы можете настроить такие свойства как «Заливка» или «Обводка» в соответствии с вашей системой дизайна.
При объединении компонентов Figma смотрит только на имена слоев, а не на имена страниц и фреймов. Если вы использовали страницы или фреймы для организации вариантов — они могут стать лишними при преобразовании.
Вы по-прежнему можете использовать страницы и фреймы верхнего уровня для создания дополнительной иерархии. Это улучшает организацию компонентов на панели ассетов и в меню «Instance».
Можно использовать подход, аналогичный системе дизайна Shopify Polaris. Она группирует наборы компонентов, которые функционально похожи. Например, кнопки и группы кнопок в разделе «Действия» или текстовое поле с полем выбора даты в разделе «Формы».
Создайте примеры Variants: Figma убедится, что ваши экземпляры ссылаются на правильный компонент. При преобразовании компонентов в варианты, все экземпляры будут ссылаться на новый вариант.
Любой, кто обращается к системам дизайна на панели ассетов или в меню «Instance» увидит один результат для одного компонента. После его размещения на канвасе, можно выбрать нужный вариант в инспекторе.
Больше интересных и актуальных статей ищите в нашем блоге и телеграм-канале.
Советы по использованию вариантов (variants) в Figma
Если вы любите часто использовать компоненты в своих дизайнах, то вы полюбите новую функцию Figma под названием варианты (Variants). Она переводит процесс проектирования на совершенно иной уровень!
Что такое варианты
Варианты похожи на группы компонентов. Их цель – собрать похожие компоненты и дать дизайнеру возможность настроить их, как один элемент, с помощью пары переключателей.
Варианты сделают ваши дизайн-системы более гибкими и быстрыми в использовании. Просмотр компонентов стал намного удобнее. В целом варианты упрощают наборы компонентов.
Кроме того, хорошо подготовленные варианты сохраняют переопределения.
Когда вы используете компонент Variant, вы можете настроить его (или выбрать другие варианты) в соответствующем разделе на панели справа.
Как создать варианты
Создавать варианты очень просто. Выберите группу компонентов и нажмите «Combine as Variants» на панели справа.
Важно иметь один и тот же набор слоев с одинаковыми именами внутри каждого компонента. Благодаря этому вы сможете быстро переключаться между каждым вариантом, а сами варианты сохранят переопределения.
Давайте посмотрим на пример правильно названных компонентов, которые будут работать как варианты:
Например, у вас есть компоненты, названные в соответствии со следующим соглашением (пример на скриншоте выше):
После создания градиентов вы сможете добавить иконку и стиль в компонент «Кнопка».
Я обновил User Flow Kit, чтобы по максимуму использовать варианты. Это позволило мне узнать много нового о самой функции. Ниже я хотел бы дать вам несколько практических советов по использованию вариантов.
Как сделать переключатель вместо раскрывающегося списка
Когда вы просматриваете активы дизайна, вы можете заметить, что в некоторых вариантах есть переключатели вместо выпадающих селекторов. Сделать переключатель очень просто:
Итак, из приведенного выше примера мы можем переименовать свойство в «Icon» и значения «True», «False».
Если в вашем проекте есть такие компоненты, я настоятельно рекомендую настроить их подобным образом.
Практическое использование вариантов
Благодаря вариантам можно намного быстрее использовать компоненты. Вы быстро заметите нужный вам элемент, потому что вам не нужно просматривать список из десятков практически идентичных вариантов.
1. Используйте его для управления состояниями
Используйте переключатель, чтобы упростить настройку флажков, переключателей и других элементов управления.
Когда дело доходит до состояний кнопок, они тоже полезны. Подготовьте компоненты, чтобы они имели такие свойства, как «По умолчанию, Наведение, Нажатие, Отключено». Тогда вы сможете настраивать их с помощью вариантов.
2. Используйте его, чтобы изменить стиль
Назовите свои компоненты так, чтобы они имели стиль – «Основной», «Вторичный», «Нейтральный», «Ошибка», «Успех» и т. д. Благодаря этому вы сможете настраивать их на лету с помощью различных вариантов.
3. Различия в размерах компонентов
С помощью вариантов можно управлять не только состояниями элементов управления интерфейса. Если в вашем проекте несколько размеров кнопок, объедините их с помощью вариантов. Так вы сможете переключаться между большим, средним и малым размером в пределах одного компонента.
4. Объедините несколько свойств
Не ограничивайте варианты одним или двумя свойствами. Подумайте, как вы будете использовать библиотеку дизайн-системы. Например, кнопки могут иметь следующие свойства: размер, стиль, состояние и иконка.
На панели вы увидите только один компонент, и сможете очень быстро настроить его с помощью вариантов.
Каковы ограничения вариантов?
Несмотря на всю полезность этой функции, есть некоторые моменты, которые можно улучшить.
На данный момент вы должны создать все преобразования компонента, чтобы правильно использовать его как вариант.
Кроме того, было бы здорово, если бы прототипы могли получить больше возможностей вариантов.
Варианты – очень гибкая функция. Они предоставили нам много возможностей для масштабирования дизайн-систем и ускорения рабочего процесса. Знаете другие советы по использованию вариантов? Делитесь ими в комментариях!
Бонус
Чтобы облегчить начало работы с вариантами, я приготовил для вас небольшой подарок. Файл включает в себя два элемента управления пользовательского интерфейса: кнопку и переключатель, они объединены, как варианты. Вы можете скачать файл здесь: Figma Variants Sample
Оптимизируем работу с Figma Variants
Привет! Меня зовут Евгений Шевцов, я руковожу UX-направлением в Usetech и на досуге веду телеграм канал «Мамкин Дизайнер», где рассказываю о жизни дизайнера и о фишечках в Figma.
Мы в компании ценим быстроту и оптимизацию процессов. Когда для продукта необходимо разработать UI Kit в Figma со всеми ее возможностями – работа может превратиться в рутину.
Сегодня расскажу, как с помощью стилей и дублирования компонентов создать 120 вариантов кнопок за минимальное количество времени.
Я не претендую на открытие года, наверняка, вы уже и сами все знаете, просто делюсь своим методом.
Я ожидаю, что вы уже знакомы с функционалом Variants, если нет, то самое время узнать.
Документация и плейграунд:
Если вы не хотите читать и вам проще посмотреть, то держите сразу небольшое видео, а если текстовый формат для вас – ниже подробный разбор.
Надеюсь, что вы подготовили цветовые стили для своих макетов и компонентов. Если нет, то сделайте это. Далее с их помощью мы будем красить варианты.
Также выпишите атрибуты кнопки, ее состояния и размеры, которые она будет у вас принимать. Таким образом вы ничего не упустите, а если упустите не беда, добавим позже.
Если грядет создание большого количества вариантов, то я всегда создаю самый главный компонент, который в последствии я оборачиваю в еще один компонент и создаю из него Variants.
Важно: собирайте компоненты на Auto Layout, чтобы все компоненты были «резиновыми»
Если вы используете Pro план и пользуетесь публикацией библиотек, то я рекомендую в названии главного компонента добавлять точку «.» или нижнее подчеркивание «_». Таким образом мы говорим figma проигнорировать компонент, чтобы в последующем избавиться от дублей.
Теперь необходимо сделать дубликат главного компонента и обернуть его еще раз в компонент. Называем компонент как нам необходимо и получаем вложенность.
Такая вложенность позволяет централизованно управлять всеми вариантами, например, если потребуется добавить иконку в кнопку, то добавить ее в главный компонент быстрее и проще, чем добавлять во все варианты.
У нас должно получится так же, как на рис.2
Figma variants для чего
Два важнейших инструмента в Figma: полный гайд
Аудио перевод статьи
Figma — это революционная облачная платформа для проектирования, которая упрощает совместную работу команды и полностью снижает риск потери вашей работы из-за неоправданных сбоев (я смотрю на тебя, Adobe). При этом, она еще относительно молода и постоянно развивается. Не так давно в нашем списке желаний все еще были мощные функции, такие как Auto Layout и Variants (не говоря уже о Smart Animate, поддержке gif и плагинах). Если вы, как и я, всегда стремитесь идти в ногу со временем, вы захотите узнать, как применять Auto Layout и Variants в своих системах дизайна. Но не буду врать, к этому придется привыкнуть. Эти инструменты требуют, чтобы вы придерживались дисциплинированной архитектуры и не приветствуют быстрые и грязные экспериментальные изменения фреймов (также известных как артборды).
Так стоит ли оно того? Безусловно, и вот почему.
Сначала о главном: О чем мы говорим?
Auto Layout
Проще говоря, Auto Layout ( или авторазметка) позволяет объединить несколько слоев в одну строку или один столбец, причем каждый слой равноудален от другого.
Когда вы комбинируете слои с помощью Auto Layout, они будут заключены в «рамку» (или “фрейм”). Как и любой другой фрейм в Figma, фреймы Auto Layout могут быть сгруппированными.
Конечным результатом является возможность создания макетов, закрепленных на сетке. Вам больше не придется беспокоиться о том, что объекты могут находиться на несколько пикселей в стороне от направляющих. Auto Layout гарантирует, что все всегда будет идеально выровнено.
Слои, заключенные в рамку авторазметки, нельзя свободно перемещать по фрейму. В зависимости от того, какое действие вы выполняете мышкой, щелчок и перетаскивание одного из этих слоев приведет либо (1) к замене этого слоя другим, либо (2) к удалению слоя из фрейма. Такое ограничение спасает вас от самих себя: ваши проекты должны придерживаться определенной, целенаправленно разработанной и симметричной архитектуры. Это не рекомендация — они буквально должны это делать. Такой подход не означает, что вы не можете легко настроить пространственные элементы. Это просто означает, что ваши настройки будут применяться к фрейму в целом, что в любом случае является лучшей практикой. Также это именно то, что ваш разработчик будет делать при преобразовании дизайна в код (подробнее об этом позже).
Итак, как вы можете изменять элементы внутри фрейма Auto Layout?
Во-первых, я уже отмечал, что авторазметка позволяет создать строку или столбец. Вы можете изменить любой кадр с одного на другой, нажав стрелку вниз (для столбца) или стрелку вправо (для строки). Вы также можете изменить «пространство между» каждым слоем, увеличивая или уменьшая число рядом с символом ]〡[. Кроме того, вы можете настроить заполнение всего кадра (т.е. пространство вокруг), увеличивая или уменьшая число рядом с символом ▣. И, наконец, можно определить, как слои будут выровнены относительно рамки авторазметки. Они могут быть выровнены в любом направлении по осям X и Y (т.е. сверху-слева, сверху-в центре, сверху-справа, по центру-слева, по центру-в центре, по центру-справа, снизу-слева, снизу-в центре, снизу-справа).
В дополнение к этим явным элементам управления авторазметкой, существуют ограничения на фреймы авторазметки, которые Figma называет «Изменение размера». Изменение размеров позволяет вам определять следующие моменты:
На практике это означает, что вы можете использовать такие простые удобства, как автоматическая адаптация высоты компонента к объему текста внутри него. Или расширенная форма, естественно подстраивающаяся под дополнительные поля ввода. Или целая страница, адаптирующаяся к добавлению или вычитанию различных элементов. И все это без необходимости уточнять интервалы или вручную перемещать другие компоненты на странице.
Variants
Для того чтобы понять, что такое Variants (т.е. Варианты (компонентов)), необходимо иметь базовое представление о Компонентах Figma. Те из вас, кто пришел из мира Sketch, знают компоненты под другим названием: «Символы». И Компоненты, и Символы концептуально являются синонимами «шаблонов». Другими словами, они позволяют нам создать мастер-шаблон дизайна. Каждый раз, когда мы дублируем мастер, мы создаем «экземпляр» оригинала. Экземпляр всегда совпадает с эталоном, поэтому любые изменения, внесенные в эталон, каскадируются на каждый экземпляр. Это может сэкономить вам много времени и свести к минимуму риск создания несогласованных проектов с течением времени. Например, допустим, вы преобразовываете красную кнопку в компонент. Если вы решите изменить красную кнопку на синюю, каждый экземпляр этой кнопки в вашей системе дизайна также изменится на синий. Иными словами, вам не нужно вручную обновлять каждую кнопку — достаточно обновить первую созданную кнопку. Представьте это как отношения родителя и ребенка: родитель устанавливает правила, а ребенок следует им.
Но что, если вам нужно несколько кнопок? Например, первичная кнопка и вторичная кнопка. В этом случае вы создадите два компонента: один под названием «primary», а другой под названием «secondary». Затем вы сгруппируете эти компоненты, назвав каждый из них с помощью синтаксиса именования Figma. Синтаксис выглядит следующим образом:
[Категория] / [Подкатегория] / [Под-подкатегория] / […]
В случае с нашими кнопками у нас есть одна категория (т.е. кнопки) и две подкатегории (т.е. первичная и вторичная). Поэтому название нашей основной кнопки будет выглядеть следующим образом:
А название нашей вторичной кнопки будет выглядеть следующим образом:
И Figma будет отображать их на своей боковой панели вот так:
Как вы видите, Figma сгруппировала оба экземпляра в папку под названием «Buttons». В этом примере мы использовали только одну подкатегорию, но вы можете иметь столько, сколько вам нужно. Например, возможно, я хочу иметь активное и неактивное состояние для каждого типа кнопок. Это будет выглядеть следующим образом:
Каким бы мощным ни был этот синтаксис, представьте себе его применение к более сложным компонентам. или даже к компонентам, вложенным в компоненты (например, компонент кнопки внутри компонента формы внутри компонента заголовка). Чем больше ваша система проектирования, тем более утомительным, трудоемким и склонным к ошибкам становится этот процесс.
Введите: Variants. Варианты — как и буквально следует из названия: это вариации одного компонента. В нашем примере выше у нас есть четыре независимых компонента, объединенных с помощью умного синтаксиса.
Если выделить каждый из них и нажать на кнопку «Объединить как варианты» в боковой панели, то все эти компоненты объединятся в один компонент, состоящий из четырех вариантов.
На изображении выше видно, что каждая кнопка теперь представлена как один компонент. С правой стороны кнопка объединения вариантов была заменена двумя рядами свойств. В свойстве 1 указан тип кнопки (например, Primary или Secondary), а в свойстве 2 — состояние кнопки (например, Active или Inactive). Щелкнув на имени свойства, вы можете переименовать его. Например, я переименовал эти свойства в «Тип» и «Состояние».
Если вы скопируете экземпляр своего варианта кнопки, вы увидите возможность изменить вариант, применяемый к этому экземпляру.
Все довольно просто, но можно сделать еще проще. Если переименовать свойство «State» в «Active» и изменить значения на «True» или «False», Figma сообразит и преобразует выпадающий список в переключатель. Когда он включен, отображается активное состояние. В выключенном состоянии отображается неактивное состояние.
Figma по сути рассматривает свойства как переменные. Как и в математике или коде, переменная — это имя, равное значению. Например, если X = 10, то 5 + X = 15, потому что X эквивалентно значению 10. Аналогично, наши свойства требуют имени (например, «Тип») и значения (например, Primary или Secondary). Это можно записать и по-другому: Тип = Первичный.
Фактически, Figma позволяет добавлять свойства, изменять существующие свойства или изменять значения свойств, используя именно этот синтаксис. Если вы посмотрите на панель «Слои», то увидите, что каждое свойство записано с использованием этого синтаксиса и разделено запятыми.
Двойной щелчок по варианту позволит вам редактировать эти свойства по своему усмотрению. Просто убедитесь, что любое свойство, которое вы добавляете к одному варианту, также добавляется ко всем другим вариантам в данном компоненте. Значения могут быть разными, но вариант должен существовать. Если свойство отсутствует в варианте, Figma не поймет, как с ним обращаться, потому что не получила значения там, где ожидала его найти.
Хорошо, так в чем же преимущество?
Есть два основных преимущества. Первое — это невероятная последовательность и модульность. Поскольку фреймы и варианты авторазметки могут быть вложены в другие фреймы и компоненты, вы можете создавать страницы, на которых все — от целого раздела до одной кнопки — может быть добавлено, убрано или изменено одним кликом.
Это удобно, когда, например, вы создали шаблон целевой страницы для маркетинговой команды, а им нужно создать отдельные версии для каждой рекламной кампании. Или, если использовать пример, ориентированный на продукт, когда вам нужно переключить макет между различными административными разрешениями. Варианты упрощают процесс переключения, а автоматическая верстка гарантирует, что каждая версия вашего шаблона будет идеальна до пикселя.
Второе и, возможно, более важное преимущество — совместимость с разработчиками. И Auto Layout, и Variants говорят на языке кода. Вы, вероятно, знаете, что в Figma есть вкладка «Inspect», которая преобразует ваши проекты в простой код для облегчения процесса преобразования статических проектов в динамические интерфейсы. Возможно, вы не знаете, что до появления Auto Layout, Figma позиционировала элементы «абсолютно» внутри фрейма. Для тех из вас, кто не знаком с абсолютным позиционированием, просто знайте, что в мире адаптивного дизайна это. абсолютно. ужасная идея (или, если вам интересно, вы можете узнать больше здесь). Вместо абсолютного позиционирования современные элементы фронтенда позиционируются относительно друг друга (т.е. относительное позиционирование). Авторазметка позиционирует элементы относительно, позволяя разработчикам получать более значимые фрагменты кода из вкладки Inspect. Это может показаться тривиальным, но это не так. В конце концов, ничто не имеет значения, если реальное приложение не отражает макеты. Чем больше мы можем сделать, чтобы помочь разработчикам в реализации нашего видения, тем лучше.
Отлично, а в чем подвох?
Если вы работаете с командой, которая незнакома или не заинтересована в этих новых инструментах, Auto Layout и Variants могут привести к путанице и разочарованию. Оба инструмента требуют дисциплины, и ни один из них не позволяет быстро и рандомно корректировать макеты. Прямое редактирование экземпляра компонента (с включенными вариантами или иным способом) отсоединяет его от мастера, что не позволяет ему наследовать обновления до сброса (и, как вы догадались, сброс стирает все ваши переопределения). Кроме того, автоматическая верстка предотвращает изменения, которые не соответствуют ранее заданной архитектуре сетки. Это может привести к тому, что незнающие или просто раздраженные дизайнеры удаляют фреймы авторазметки в качестве быстрого решения проблемы.
Во многих отношениях такие обходные пути имеют смысл. Конструкции рождаются в процессе итеративного процесса проб и ошибок. Сложные инструменты мало способствуют такому поведению и в то же время сдерживают творческий потенциал. Поэтому, чтобы стимулировать их внедрение, я советую дизайнерам поработать над дубликатами компонентов и фреймов. После того как они окончательно оформили свое видение в черновике, они могут изменить архитектуру макета в Auto Layout и импортировать его в главный компонент, где он будет автоматически применен ко всем экземплярам. Для некоторых этот процесс кажется достаточно простым. Для других он кажется громоздким. В любом случае, небольшая дополнительная работа — это справедливая плата за более простую, устойчивую и масштабируемую систему проектирования.
Выводы
Использование авторазметки и вариантов может уменьшить нежелательную изменчивость в вашей системе проектирования, упростить работу по обслуживанию и облегчить процесс проектирования и разработки. Но чтобы это произошло, вы и ваша команда должны быть заинтересованы в этом. Неубежденным членам команды будет сложнее приложить дополнительные усилия, что приведет к использованию коротких путей и быстрых исправлений, разбросанных по всему вашему дизайну. Даже один непоследовательный шаблон дизайна может сбить с толку разработчиков, которые справедливо предположат, что отклонения являются преднамеренными. Это замедляет время разработки и, в худшем случае, приводит к неправильному пользовательскому интерфейсу в реальном приложении.
При этом период адаптации вполне оправдан и стоит того. Для настороженных членов команды я рекомендую провести несколько “внеклассных” занятий во время обеденного перерыва, в ходе которых вы будете руководить своей командой при выполнении примеров проектов. Figma предлагает отличные образовательные ресурсы по авторазметке и вариантам, которые вы можете найти здесь и здесь, соответственно.
