Для чего нужны компоненты в фигме

Компоненты в Фигме — часть вторая. Наследование и замена компонента

В прошлой части мы разобрались с темя, как создавать компоненты Figma и проводить с ними базовые манипуляции. В этой заметке мы рассмотрим некоторые дополнительные действия, связанные с компонентами.

Как заменить родительский компонент для уже созданного элемента

Если вы создали экземпляр компонента, а потом решили изменить его родителя (например, текст H1 на H2), вам требуется выполнить следующие действия:

1. Выберите нужный элемент
2. В окне Design слева найдите поле Instance
3. Выберите из выпадающего списка нужный компонент

Аттентион: вам будет доступен список вообще всех компонентов, и очевидно, что большая часть их не сможет корректно примениться. Заблаговременно создайте компонент с аналогичным набором стилей.

Смена через меню Swap Component

Обновление от 17 сентября 2020 года добавляет в Figma новое меню для быстрой смены экземпляра компонента. При этом доступен поиск по названию и представление в виде списка и карточек.

Как воспользоваться

1. Выберите элемент в вашем макете
2. Если это экземпляр компонента, в правой панели с параметрами появится подменю Swap Instance
3. Выберите из списка или начните вводить название в поле поиска, чтобы сделать фильтр по названию

Создать компонент, наследующий стили другого компонента

Чтобы не переопределять свойства для компонентов, похожих на уже существующие, вы можете сделать компонент, наследующий свойства какого-то другого уже существующего компонента.

Например, вы создали компонент текста Paragraph, а потом решили создать еще и компонент для шрифта цитаты. В таком случае вы можете создать клона исходного Paragraph, но сделать его шрифт жирным и наклонным. Таким образом, если в дальнейшем вам потребуется заменить семейство шрифта или его размер, вам потребуется отредактировать только исходный компонент, и эти изменения коснутся и параграфа, и цитаты.

1. Делаем экземпляр уже имеющегося компонента
2. Назначаем этот экземпляр компонентом
3. Меняем необходимые свойств. Эти свойства более не зависят от исходного компонента, но те, которые мы не трогали, будут меняться вместе со свойствами исходного

10 советов по компонентам Figma

Советы и лучшие практики для работы с компонентами Figma Рекомендация: Повторяйте действия за мной в Figma Используйте созданный мной файл Figma Community.

1. Сочетания клавиш для работы с компонентами

• OPTION + CMD + K= Создать компонент
• OPTION + CMD + B= Отсоединить экземпляр
• OPTION + CMD+ O= Командная библиотека
• OPTION+ 2= Показать панель активов (option + 1 возвращает вас на панель слоев)

Windows:

• ALT + CTRL + K= Создать компонент
• ALT + CTRL + B= Отсоединить экземпляр
• ALT + CTRL + O= Командная библиотека
• ALT+ 2= Показать панель активов (option + 1 возвращает вас на панель слоев)

2. Поменять местами компоненты

Открыв панель активов (используя option / alt + 2 или shift + I), вы можете перетащить экземпляры компонентов на холст. Если у вас уже есть компонент, попробуйте использовать эти сочетания клавиш при перетаскивании компонента для замены существующего.

3. Именование компонентов

От того, как вы назовете свои компоненты, будет зависеть их организация. Если вы используете разделение косой чертой, Figma сгруппирует эти компоненты в меню экземпляра, что упростит их поиск. Figma использует следующий путь file / page / frame / ** name ** / для организации наших компонентов. Так, например, если у меня есть раскрывающийся компонент, я бы поместил его в отдельный фрейм Figma под названием «Inputs», а затем назвал бы компонент Dropdown / Active. Figma будет использовать это имя для создания папки «Inputs», а затем внутри папки «Dropdown». Вы также можете назвать свой компонент Inputs / Dropdown / Active, если основной компонент не находится внутри фрейма под названием «Inputs».

4. Создавайте компоненты забавной формы

Используя мощь логических операций для вычитания фигур и установки ограничений для этих фигур, мы можем создать аккуратно выглядящие компоненты (Спасибо Роджи Кингу). Для этого следуйте инструкциям Роджи на YouTube (начало с 32:50).

5. Используйте базовые компоненты

Используя базовые компоненты для наборов вариантов, мы можем внести одну корректировку в базовый компонент, и он внесет изменения во все варианты экземпляров. Для этого создайте базовый компонент со всеми элементами, необходимыми в различных вариантах для значений по умолчанию, иконки слева, иконки справа, наведения, активного состояния, ошибки и т. д. Это так же просто, как скрыть ненужные нам элементы в разных вариантах. Также полезно добавить модификатор перед именем компонента, который скроет его из библиотеки, когда вы будете готовы опубликовать компоненты. Для этого добавьте «.» или «_» перед названием компонента (например, «_Profile Card Base»).

6. Меню быстрой вставки

Добавляйте компоненты за секунды с помощью меню быстрой вставки.

7. Следуйте принципам атомарного дизайна

Атомарный дизайн Брэда Фроста – это методология создания дизайн-систем. Она помогает нам организовать компоненты для эффективного масштабирования нашей дизайн-системы и поддерживать порядок внутри вложенных компонентов. В атомарном дизайне есть пять различных уровней:

Атомы – это основные строительные блоки, такие как метка формы, поле ввода или кнопка.

Молекулы – это группы атомов, связанных вместе, например, метка формы, ввод и кнопка, объединенные вместе в форму.

Организмы состоят из похожих и / или разных типов молекул. Например, организм «шапка сайта» может состоять из различных компонентов, таких как логотип, основная навигация, поиск и список каналов социальных сетей.

Шаблоны конкретны и предоставляют контекст для всех этих относительно абстрактных молекул и организмов. Шаблоны – это то место, где клиенты начинают видеть окончательный дизайн. Со временем повышается точность шаблонов и в итоге они становятся конечным результатом.

Страницы – это особые экземпляры шаблонов. Здесь контент-плейсхолдер заменяется реальным репрезентативным контентом, чтобы дать точное представление о том, что в конечном итоге увидит пользователь. Чтобы узнать больше, посмотрите это видео на YouTube и прочтите книгу Брэда Фроста «Атомарный дизайн»

8. Используйте компоненты слота

Слоты позволяют использовать плейсхолдер, который мы можем заменить нужным нам контентом. Например, создать модальный компонент может быть не просто, потому что не все модальные окна будут иметь внутри себя одинаковый контент. Чтобы решить эту проблему, мы можем использовать технику под названием «слоты» (спасибо, Rogie, Ben Adelt, и Ridd). Просто вставьте компонент слота туда, где вам понадобится гибкий контент, и при необходимости поменяйте его.

9. Используйте несколько библиотек

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

• мобильные компоненты
• десктопные компоненты
• активы бренда и цвета
• и так далее…

10. Экспериментируйте с компонентами

Загрузите файл сообщества, чтобы поэкспериментировать с ним. Компоненты очень универсальны и могут использоваться для создания самых разных вещей, например, анимации с использованием интерактивных компонентов или забавных паттернов. Используя плагин и компоненты Rotate Copies, можно создавать забавные и динамичные арты прямо внутри Figma!

Лучшие практики Figma: компоненты, стили и общие библиотеки

Найкращі практики Figma: компоненти, стилі та загальні бібліотеки

Редакція ・ Серп 13

1. В пределах одного отдельного файла в бесплатной версии Figma
2. Для разных файлов и проектов в пакете Figma Professional
3. Между командами в пакете Figma Organization

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

Небольшое примечание: перед тем, как создавать компоненты в Figma, мы рекомендуем выяснить, какой тарифный план Figma больше вам подходит. Если вы купили лицензию Figma Organization, прочтите эту прекрасную практическую статью об организации работы команд в Figma, потому что эта структура станет основой организации ваших компонентов.

Введение: что такое компоненты и стили?

Если вам уже знакомы основы компонентов, стилей и библиотек, перейдите к следующему разделу.

Процесс создания, публикации и обмена компонентами и стилями

Компоненты – это объекты многоразового использования в вашем дизайне. Они могут быть простыми, как отдельная кнопка, или сложными, как весь заголовок навигации (состоящий из экземпляров других компонентов, таких как логотипы, аватары, кнопки и пункты меню). Компоненты работают аналогично «символам» в Sketch или других инструментах проектирования, но с некоторыми уникальными отличиями. Подробнее об этом чуть позже.

Вот список вещей, которые люди часто превращают в компоненты:

• компоненты пользовательского интерфейса
• логотипы компании и активы бренда
• иконки
• макеты устройств
• компоненты платформы ОС (Android, iOS, Linux, OSX, etc)
• курсоры
• аннотации компонентов
• записки и голосовые «стикеры» для участия в совместных дизайн-спринтах
• элементы создания диаграмм, например, стрелки и формы блок-схем

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

Стили: это многократно используемые коллекции свойств, которые вы можете легко применять к элементам вашего дизайна. В Figma вы можете создавать стили для текста, цветов, сеток и эффектов, таких как тени и размытия. Если компоненты являются объектами многократного использования, думайте о стилях как об атрибутах, которые вы можете применять к этим объектам.

Вы можете создавать библиотеки для всего, что вам нужно многократно использовать

Библиотеки: в Figma вы можете поделиться компонентами и стилями, опубликовав их. Это превращает ваш файл в библиотеку, поэтому вы можете использовать экземпляры этих компонентов в других файлах. Обновления дизайна ваших компонентов можно публиковать и распространять в других документах, где находятся экземпляры компонентов. Пользователи могут принять эти обновления или продолжить работу со старой версией (если требуется).

Компоненты

Когда начинать создавать компоненты?

Этот вопрос часто возникает, и ответ зависит от предпочтений в рабочем процессе отдельных дизайнеров. Тем не менее, мы обычно рекомендуем превращать элементы дизайна в компоненты на раннем этапе проектирования. Когда элементы повторяются на нескольких экранах, самое время подумать о компонентах (даже если ваш проект находится на довольно низком уровне точности). Дизайн может измениться и пройти через множество усовершенствований, но создание компонентов на этом этапе означает, что вы сможете сэкономить время, сделав эти изменения один раз (с исходным компонентом), и обновив их на всех ваших экранах (с экземплярами).

Главные компоненты (мастер-компоненты) живут там, где вы их создаете, обычно в контексте вашего дизайна, что позволяет легко их настраивать по мере развития вашего проекта (за исключением крупных компаний, которые размещают свои главные компоненты в отдельном файле дизайн-системы). Если вы чувствуете, что слишком рано зацикливаетесь на компонентах, на исследовательской стадии вашего проекта, вернитесь к ним позже – не позволяйте им помешать плавности процесса проектирования.

Создание компонентов на ранних этапах рабочего процесса может сэкономить вам время при внесении масштабных изменений на многих экранах

Когда ваша команда решит применять эти паттерны для повторного использования в других продуктах, в качестве части вашей дизайн-системы, вы можете рассмотреть возможность объединения их из отдельных файлов проекта в более формальный документ, предназначенный для использования в качестве общей библиотеки. Во время этого процесса вы можете уточнить их структуру / наименование / свойства, чтобы они были проще в использовании и соответствовали другим компонентам. Как разработать лучшие компоненты? Давайте рассмотрим некоторые идеи и лучшие практики!

Атомная структура компонентов

Когда вы начнете создавать высококачественные компоненты, особенно с целью их совместного использования, подумайте о том, чтобы начать с более мелких «атомных» компонентов, которые можно использовать в качестве строительных блоков. Вы заметите в своем дизайне паттерны, и захотите их последовательности. Например, форма карточки или форма кнопки.

Хорошая стратегия – превратить эти повторяющиеся элементы в компонент, который вы можете использовать повторно, вложив экземпляры этих элементов в другие компоненты. Представьте себе, что вы превращаете простую форму кнопки в компонент (который будет использоваться в качестве атома) и вкладываете его в каждый созданный вами компонент кнопки. Результат: все кнопки используют одну и ту же отправную точку. Если эту форму нужно изменить, ее можно обновить, изменив всего лишь «атомный» компонент.

Продолжая пример с кнопками, давайте предположим, что у вас также есть основной и дополнительный варианты, десктопная и мобильная версии, каждая из которых имеет 4 состояния (normal, disabled, pressed и focused). Потенциально у вас будет 16 различных компонентов кнопок, которые в противном случае пришлось бы редактировать, если бы вы не использовали атомную структуру. Таким образом, подобная структура компонентов сделает вашу систему более удобной в обслуживании.

Создавайте многократно используемые «атомные» компоненты, которые вы можете вкладывать в другие компоненты, чтобы упростить обновление

Подсказка: добавьте к именам компонентов префикс «_» или «.» и они будут исключены из публикации. Подумайте, какие компоненты могут понадобиться разработчикам. Возможно им не понадобиться доступ ко всем атомным компонентам. Исключив их из процесса публикации, вы упростите работу пользователей библиотек, поскольку отключите их отображение на панели компонентов.

Структурирование компонентов для обработки состояний, тем и изменений

Размышляя о компонентах пользовательского интерфейса, вы, скорее всего, думаете о том, как обращаться со связанными компонентами – это могут быть дополнительные состояния, темы (светлая или темная), или другие варианты. Как лучше справиться с ними? Как дизайнеры будут взаимодействовать с ними?

Вложенные состояния и изменения в одном компоненте

Группы или фреймы, вложенные в компонент, можно переключать с помощью видимости слоев

Когда вы добавляете экземпляр компонента в свой дизайн, Figma предоставляет вам доступ к его слоям на панели слоев. Это позволяет вам просматривать и расширять каждый экземпляр на панели слоев. Вы можете вложить элементы в компонент, которые пользователи при необходимости могут включать (переключая видимость слоя). Вы можете даже вкладывать все состояния в один компонент. Этот метод имеет ряд преимуществ, но также обладает рядом недостатков.

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

Недостатки: этот метод может затруднить обнаружение различных состояний в стеке слоев каждого компонента. Переключение между ними может быть проблематичным, поскольку дизайнеры должны знать, как переключать соответствующие слои внутри компонента. Эти состояния не всегда очевидны, пока дизайнеры не развернут компонент на панели слоев. Этот метод также может привести к множеству повторяющихся слоев в вашем компоненте. Например, кнопка, состоящая из текстового поля и прямоугольника, может потребовать повторить эти слои для каждого состояния – когда пользователи переопределяют текст, а позже захотят показать другой вариант / состояние, дизайнеру потребуется повторно ввести переопределение. Этот вариант использования можно упростить при следующем подходе.

Отдельные компоненты для состояний и вариантов

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

Для простоты использования мы рекомендуем создавать состояния или варианты компонентов, как отдельные компоненты

Преимущества: с помощью этого метода все варианты легко доступны на панели компонентов и в меню экземпляров. Это облегчает поиск и переключение между ними. Вместо того чтобы переключать правильную комбинацию вложенных слоев, дизайнеры могут просто выбрать другой связанный компонент из меню экземпляров. Этот метод может сохранить ваши текстовые переопределения при переключении экземпляров, если текстовые слои имеют одинаковые имена в обоих компонентах. Также этот метод более производительный; мы видели несколько примеров очень сложных компонентов с сотнями скрытых слоев (используя вложенный подход), которые можно было бы значительно упростить с помощью этого подхода.

Недостатки: с помощью этого метода вы в конечном итоге получите больше компонентов для совместного использования и обслуживания. Однако, если вы объедините этот метод с атомарной структурой, описанной выше, вы сможете создавать компоненты таким образом, чтобы их было проще поддерживать. Наконец, поскольку многие визуальные вариации могут быть едва заметными их трудно различить при предварительном просмотре миниатюр. Поэтому рассмотрите возможность добавления полезных описаний к вашим компонентам (они будут отображаться как всплывающие подсказки при наведении курсора на панели компонентов).

Манипуляции с темами посредством компонентов

Также могут возникнуть ситуации, когда вы захотите создать варианты компонентов с разными визуальными свойствами. Например, для тем, для светлых и темных режимов или для разных брендов. Одна из техник, которую вы можете использовать для достижения этой цели – это выбрать существующий экземпляр компонента, переопределить визуальные свойства, которые вы хотите изменить, а затем создать из него компонент. Это вложит экземпляр исходного компонента в новый компонент. Вы сохраните вновь примененные переопределения, но при этом оставите связь с исходным компонентом – это упрощает поддержку дизайна, поскольку вам нужно настроить дизайн в одном месте. Изображение ниже показывает пару возможных вариантов использования.

Вложив исходный компонент в другой мастер-компонент, вы можете переопределить свойства и получить варианты, которые остаются связанными по мере развития дизайна

Лучшие практики компонентов

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

Сохранение переопределения текста: при создании вариантов / состояний компонентов, в качестве отдельных компонентов, вы захотите сохранить переопределения текста, если вы планируете переключаться между ними. Таким образом вам не нужно повторно вводить текст. Чтобы сохранить текст во время этого переключения, убедитесь, что названия текстовых слоев внутри каждого компонента совпадают друг с другом (поскольку по умолчанию имя слоя наследуется от того, что вы изначально вводите в текстовое поле).

Переопределение текста сохраняется при переключении между связанными компонентами, если текстовые слои названы одинаково

Описания: Вы можете добавить описание к каждому главному компоненту на боковой панели свойств. Эти описания отображаются как всплывающие подсказки на панели компонентов. Здесь можно указать информацию об их предполагаемом использовании, чтобы помочь пользователям выбрать правильные компоненты.

Описания компонентов отображаются на панели компонентов в виде всплывающих подсказок

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

Содержимое, в сочетании с сетками макетов, может помочь вам изменить размер компонентов проще и более предсказуемо

Обрезка контента: Можно установить флажок «обрезать контент» (clip content) на панели свойств, чтобы определить, будут ли обрезаны / скрыты элементы, которые выходят за пределы фрейма. Эта функция может быть очень полезна, если у вас есть компоненты с повторяющимися элементами, которые вы можете захотеть раскрыть при изменении размера. Например, число строк в таблице может варьироваться от варианта использования – с помощью этого метода вы можете просто изменить размер компонента, чтобы отобразить необходимое количество строк. Сначала убедитесь, что вы установили ограничения для всех элементов в компоненте!

Использование функции «обрезать контент» позволяет отобразить элементы, скрытые за пределами вашего компонента

Стили

Вы также можете добавить в общие библиотеки стили, например, цвета и текста – их гораздо проще создавать, но все же есть рекомендации, которые облегчат их использование.

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

Стили цвета: убедитесь, что у вас есть стили, созданные для всех цветов вашей дизайн-системы, и назовите их соответствующим образом, чтобы их было легко идентифицировать и использовать.

Стили эффектов: стили эффектов позволяют последовательно повторно использовать такие эффекты, как размытие слоя, размытие фона, тени и внутренние тени. Например, система Material design включает в себя набор теней, совпадающих с различными слоями, которые уложены в стек в интерфейсе. Тени многократно используются для создания эффекта различных «возвышений», привязанных к определенным элементам, таким как модальные окна и кнопки.

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

Советы по стилям

Имена стилей: Имена стилей имеют решающее значение в вашей дизайн-системе для выравнивания с предопределенными свойствами. Также для группировки стилей в палитре стилей вы можете добавлять в имена префиксы, разделенные слэшем. (Примечание: вы можете добавить только один уровень иерархии). Например, если вы добавите «Alerts /» перед несколькими стилями, все они будут объединены подзаголовком «Alerts». Вы можете использовать эти префиксы для:

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

Описания стилей: Добавьте описания к своим стилям – они будут отображаться во всплывающих подсказках почти так же, как и для компонентов. Описания могут помочь уточнить их предполагаемые варианты использования, чтобы помочь дизайнерам выбрать правильный стиль.

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

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

Заливка изображениями для изображений-плейсхолдеров: Вы можете создавать стили для заливки изображением (image fills). Допустим, у вас есть несколько пользовательских аватаров или фотографий-плейсхолдеров, которые вы обычно используете. Вы можете не знать, какую форму, пропорции или размеры следует выбрать. Создавая заливку изображением, вы можете легко применить их к любой форме.

Создавайте стили из заливок изображением и легко применяйте их к объектам любых форм и размеров

Сетки макетов для визуализации интервалов: Вы можете создавать стили сетки, состоящие из нескольких сеток макетов. Например, сетка столбцов и строк может быть применена к фрейму или компоненту, чтобы помочь визуализировать поля или отступы. Это может быть очень полезно для команд, которые определили стандартизированный интервал, как часть своей системы.

Используйте сетки макетов для визуализации стандартного интервала вашей системы

Организация и создание библиотек

Чтобы создать свою первую библиотеку, опубликуйте любой документ Figma из модального окна Командной библиотеки (Team Library). Все основные компоненты и стили в этом документе станут доступны для использования в других документах. Когда вы масштабируете дизайн по продуктам или командам, особенно в крупных организациях, вы захотите найти наилучший способ их организации и распространения компонентов для всех пользователей. Сколько библиотек вы должны создать? Как организовать свои компоненты? Помните, что дизайнеры, использующие эти библиотеки, являются вашими конечными пользователями.

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

Всё в одной большой библиотеке

Некоторые команды, особенно небольшие, часто создают единую библиотеку для размещения всех своих компонентов и стилей. Этот подход имеет определенные преимущества, но и несколько больших недостатков при масштабировании.

Единый файл библиотеки

Преимущества: есть только одна библиотека для пользователей, которая содержит все, что им нужно. Никогда не возникает путаницы, где найти определенные компоненты. Это также означает, что нужно поддерживать только одну библиотеку.

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

Отдельные библиотеки

Многие команды, особенно средние и крупные, часто решают, что лучший подход – разбить компоненты на несколько библиотек. Это обеспечивает лучшее масштабирование.

Разбивка компонентов и стилей на отдельные библиотеки позволяет пользователям включать только те библиотеки, которые им нужны

Преимущества: разделив компоненты/стили на разные документы/библиотеки, можно включить только необходимые библиотеки для нужного подмножества пользователей или групп. Например, скажем, у вас есть специальные команды, работающие только над мобильными продуктами. Тем, кто работает над мобильными устройствами, возможно, никогда не понадобятся активы, предназначенные для настольных компьютеров. Разделив их на отдельные документы, вы можете опубликовать их в отдельных библиотеках. Тогда дизайнерам нужно всего лишь включить подходящую библиотеку, что избавит их от необходимости просеивать компоненты, которые им не нужны.

Недостатки: прибавится работы для тех, кто отвечает за поддержание и публикацию библиотек.

Оптимизация для достижения успеха: в пакете Figma Organization библиотеки могут быть включены по умолчанию для специализированных команд или для всех команд компании. Чтобы узнать больше прочитайте наш пост о структурировании команд.

Организация компонентов в библиотеке

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

Слэш в именах

Первый и наиболее распространенный способ группировки компонентов – использовать слэш в именах компонентов, чтобы организовать их в иерархию. Если вы пользовались Sketch, возможно, вы уже знакомы с этим методом. Допустим, у вас были первичные и вторичные кнопки с вариациями для каждой. Вы можете назвать их так:

• buttons/primary/default
• buttons/primary/hover
• buttons/secondary/hover
• buttons/secondary/active

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

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

Страницы и фреймы

Рекомендуемый нами метод организации компонентов – это использование страниц и фреймов в качестве организующих контейнеров.

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

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

Например, у вас может быть страница под названием «Кнопки» и выделенный фрейм для каждого типа кнопок («Основная» и «Вторичная»), где находятся эти главные компоненты. Это повысит удобство навигации по миниатюрам на панели компонентов. Имена страниц будут отображаться, как заголовки верхнего уровня, а имена фреймов будут отображаться, как складывающиеся подзаголовки со всеми компонентами, которые находятся в этом фрейме ниже.

Эта функция дополняет визуальную организацию библиотеки, с сопроводительными примечаниями, аннотациями, примерами правильного и неправильного использования и другой документацией по использованию. Таким образом, пользователи могут кликнуть правой кнопкой мыши по любому экземпляру компонента в своем документе и выбрать «Go to Master Component», что откроет документ библиотеки. Здесь они могут просмотреть эту дополнительную информацию, которая может помочь им использовать компоненты, согласно их предназначению.

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

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

Совет: Если вы переходите из существующей или импортированной библиотеки Sketch, в которой используется метод организации посредством слэша, и хотите переключиться на подход страниц и фреймов, вы можете использовать функцию пакетного переименования Figma, чтобы ускорить этот переход. Для этого просто выберите компоненты, которые вы хотите переименовать, и выберите «Rename» в контекстном меню или нажмите cmd + R (Mac), Ctrl + R (Win). В этом диалоговом окне переименования вы даже можете использовать регулярные выражения Javascript для удаления любых префиксов и слэшей.

Экономьте время благодаря пакетному переименованию слоев или компонентов

Мысли в заключение

Хотя существует много способов создания и организации общих библиотек, мы надеемся, что это руководство поможет вам выбрать тот, который больше всего подходит для вашей команды или организации. Никогда не упускайте из виду конечных пользователей, которые в итоге используют созданную вами систему. Убедитесь, что для них включены нужные библиотеки и, что компоненты просты в использовании, поиске и понимании. Выполните это, и вы получите большую согласованность в работе вашей организации.

Мои правила хорошей дизайн-системы. Компоненты и архитектура интерфейса в Figma

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

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

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

По методологии Атомарного дизайна, я начну с атомов и буду двигаться дальше к более сложным компонентам. Буду работать в Фигме и продемонстрирую, что у Скетча появился серьёзный конкурент.

Итак, современный инструментарий превращает работу дизайнера уже в полноценную разработку. Понятие дизайн-системы не означает лишь только набор ui kit с концептуальными правилами и красивыми иллюстрациями. Это прежде всего система визуальной архитектуры, упорядоченная определенным образом. С ней тесно коррелирует понятие продуктового дизайна, т.к. дизайн-система может охватывать несколько продуктов внутри одной организации, подавая их конечному потребителю с помощью фирменного “дизайн-языка”. Буду считать, что грамотному читателю о плюсах такого подхода давно известно.

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

А усли у вас серьезный проект, то наша команда готова развернуть дизайн-систему внутри организации на базе наших наработок и подогнать под конкретные задачи, используя Figma. Web / desktop, так и любой мобайл. С React / React Native мы тоже знакомы. Пишите в Т: @kamushken

Раз существует понятие “дизайн-язык”, значит на нём можно “говорить”. А еще лучше — писать. Слова образуют фразы. Из фраз состоит предложение. А из предложений уже строится целая глава. Это иная метафора Atomic design’a и она мне нравится больше. Когда в июле этого года вышла Figma 2.0, буквально сразу стало ясно, что этот инструмент идеален для написания такого языка. Или системы, если хотите. У небольших компаний появилась возможность организовать грамотный дизайн-менеджмент для нескольких продуктов и не выходить за рамки одного графического редактора, не прибегая к дополнительным надстройкам/плагинам. Впрочем, и у больших компаний тоже, просто они так погрязли в дебрях мультинструментализма, что им теперь крайне сложно перестроиться. Это я про то, что только Sketch’ем им уже не обойтись для командной игры. Тут и Craft, и InvisionApp, и Marvel, и Zepplin и еще множество других ругательств, о которых вероятно вы и не слышали.

Вторая версия Фигмы меня подкупила близостью к Sketch, работой под маздаем Win и особый интерес вызывал Developer’s handoff. Это расширение редактора специально для разработчиков. Девелоперы теперь открывают исходник в браузере, видят все отступы и могут забирать код любого элемента в CSS, Swift или Android XML. Коллаборация дизайнеров и разработчиков стала еще немного эффективнее. Производительность интеграции любого дизайна ускоряется в 2-4 раза. Проверено лично. Правок минимум; багов с отступами, шрифтами и размерностями нет. Всё генерирует программа. Необходимость писать какие-то спексы в документах — в прошлом. А если вы независимый дизайнер, работаете с несколькими клиентами, то теперь гораздо проще установить эффективную связь с отделом разработки в штате вашего заказчика.

Давайте перейдем к практике. Суть данной публикации в том, чтобы продемонстрировать конкретный алгоритм визуальной разработки. Говоря проще, разработать дизайн интерфейса таким образом, чтобы его можно было кастомизировать/редактировать за минимальное число действий. В результате создается библиотека компонентов, свойства которой распространяются на связанные с ней элементы. Поменяли там — поменялось везде. А разработчикам даже не нужно нажимать “refresh” — они видят изменения в реальном времени на своих экранах. Как я сказал выше, любом дизайн-языке из “слов” образуются “фразы”, из “фраз” строится “предложение”, а из них состоит целая глава. Абстрактно говоря, нам нужна возможность быстро заменить в одной главе любое “слово” на другое.

Слова. Базовые элементы

Я начну с самых простых элементов. К “словам” можно относить заголовки H1, H2, H3 и далее, параграф текста, иконки. Любые простейшие элементы, которые входят в состав любого ui kit и из которых можно будет в дальнейшем составить “фразу”. Я стараюсь приучать себя к порядку, поэтому буду следить за неймингом элементов. Это особенно важно, если библиотекой будут пользоваться другие дизайнеры и разработчики. Хороший дизайнер начинает делать удобно не только пользователям, но и коллегам.

Далее из каждого элемента я создаю так называемый “component” (Ctrl-Alt-K). Компонент в Figma — это возможность создавать связи между однотипными единицами интерфейса или целыми разделами. Если я наделяю таким свойством, например параграф текста и использую его на определенных экранах интерфейса (copy > paste), то мне достаточно редактировать мастер-компонент, чтобы изменения распространились на все экраны. В использовании подобной иерархии вся суть этой статьи. Фигма подкрашивает фиолетовым все “components” в левой колонке:

Фразы. Многосоставные компоненты

“Фраза” — это метафора более сложных модулей, которые могут состоять из двух или более простейших элементов. Например, кнопка. Как минимум она состоит из фона (чаще всего это прямоугольник) и надписи (label). Или форма для ввода текста (input). В её составе и фон, и заголовок, и плэйсхолдер. Я сейчас ограничусь одной лишь “призрачной” кнопкой. Она будет состоять из прямоугольника без заливки и компонента H3 Header.

Почему так? Если в продукте используется несколько различных кнопок или состояний (primary, secondary, alternative, disabled и т.д), они расставлены по множеству экранов и появилась необходимость поменять шрифт, мне достаточно внести изменения всего в одном месте. Поменяв шрифт для компонента-«слова» H3 Header я автоматически распространю эти изменения и на всю библиотеку, и на все экраны интерфейса. Вот почему важно заложить корректный алгоритм визуальной разработки еще в самом начале.

Для визуализации иерархии более сложные модули я буду отрисовывать правее. В результате окажется, что двигаясь слева направо мы переходим от простых к более сложным. От “слов” к целой “главе”.

Как вы уже заметили на снимке выше, кнопка выделена, превращена в component; а в развороте слева виден её состав. Фигма позволяет вкладывать компонент внутрь другого, создавая несколько уровней иерархии, причем каждый уровень может иметь свои ответвления. Всё зависит только от сложности дизайн-модулей для создаваемого продукта. К примеру, если в библиотеке вы используете 5 различных типов кнопок с одинаковым компонентом H3 Header, то вносить изменения можно как глобально так и локально. Для глобальных изменений редактируется H3 на 1-м уровне, а для локальных редактируем вложенный компонент уже внутри конкретной кнопки и получаем изменения только для тех экранов, где такая кнопка присутствует. Для большей ясности я записал видео: сначала я изменяю глобально надписи у кнопок, а потом локально у определенных типов.

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

Предложения. От фраз к делу.

Настало время собрать что-то посложнее из “фраз” и “слов”. Я буду использовать компоненты 1-го и 2-го уровней, чтобы составить “предложение” — следующий 3-й уровень. Последнее время у меня много наработок по e-commerce, поэтому рассмотрим этот шаг на примере мини-карточки для витрины мобильного интернет-магазина.

Мини карточка состоит из компонентов: H2 (стоимость), H3 (название товара), Paragraph (краткое описание), BTN Ghost (кнопка добавления), иконки, фона и фотографии. Весь состав перечислен слева на экране выше. Ширина карточки выбрана таким образом, чтобы на экране смартфона уместилось две в ряду. По аналогии её следует превратить в компонент, чтобы написать нашу первую “главу”.

Такую карточку можно назвать модульной, т.к. она содержит компоненты первых двух уровней. Весь дизайн продукта может иметь модульную структуру, т.к. собирается из схожих по структуре компонентов. Модульность способствует порядку и радует разработчиков, т.к. действуя по системе лучше взять из библиотеки готовую мини-карточку и замостить ей экран. Можно изменить соотношение сторон, высоту, ширину, шрифты наконец. Говоря проще: не нужно в библиотеке клонировать много разных мастер-карточек, в которых вы потеряетесь по мере развития вашего продукта. Фигма позволяет вносить небольшие изменения и сохранить эту мастер-связь для быстрого редактирования.

Глава, состоящая из предложений

Мы приблизились к самому интересному. В метафоре, с которой я начал, “глава” является тем уровнем, где подаются уже самостоятельные и полноценные экраны приложения.

В “главу” можно обобщить множество однотипных экранов, например разных форм-факторов. Фигма позволяет быстро расставить constraints (настроить адаптивность), благодаря чему мини-карточку можно увеличить для планшетной или десктоп версии, не потеряв связь с мастер-компонентом. Плюс ко всему разработчикам становится понятна адаптивность любого модуля. Вопросов просто не возникает.

Таким образом получаем еще больше — трансляцию изменений под все устройства. Кстати, буквально недавно все компоненты удобно вынесли в отдельный раздел слева, попасть в который можно через табы снизу. Добавлять модули можно через drag’n’drop. До этого приходилось сильно мучаться в поиске разбросанных по холсту компонентов, когда экранов много.

Результат

В результате применения подобного дизайн-менеджмента мы получаем возможность быстро и оперативно внедрять изменения в набор экранов:

Стоит сказать, что использование только этих фич не сделает вас хорошим дизайнером, но уже продемонстрирует ваш грамотный подход к дизайн-менеджементу. Решать повседневные задачи теперь удастся эффективнее, а значит разработка продукта определенно ускорится. В Фигме крайне умный mass-select, практически идеальный snap и один из самых продвинутых pen tool. И для оптимальной командной игры использование подобной архитектуры уже необходимость.

Я уверен, что среди читателей найдутся те, для которых такой подход уже стандартный. Сегодня многие концепции и принципы кажутся вполне естественными, хотя еще вчера мы говорили “Wow!”. Я думаю, что окончательный wow-фактор в случае с Figma, это возможность использования созданной по вышеописанным принципам библиотеки внутри организации без дополнительных инструментов, плагинов или надстроек. Всё, что нужно сделать, это добавить все ваши компоненты в “Team library” и раздать ссылку всем дизайнерам и разработчикам в команде. Дизайнеры собирают новые модули и целые экраны из компонентов такой командной дизайн-библиотеки, а разработчики мгновенно получают апдейты, экспортируют все элементы в код и внедряют на продакшн. Success!

Заключение

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

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

“Дизайнеры должны кодить, но они не хотят”. Это абсолютно нормально, что дизайнер не любит писать код руками. В основном мы визуалы. Технарей среди дизайнеров очень мало. И всё что требуется, чтобы подтолкнуть нас к кодингу — предоставить иной подход к программированию. Нам нужна визуальная среда, в которой циклы, условия, подсчеты и анимация создавались бы простым перетаскиванием объектов в нужной последовательности.

Заметно, как рынок дизайнерских инструментов давно двигается в одну сторону. Уже сейчас достаточно альтернатив для Sketch, некогда находившегося на вершине горы. Сегодня есть из чего выбрать, вам не обязательно менять свои предпочтения, чтобы работать в более продвинутой среде. Близится (а возможно уже настал) передел этого рынка. Конкурируют огромные компании с солидными вливаниями. Figma закрыла очередной раунд на $17 млн зимой этого года. А в январе 2018 InvisionApp должны выпустить свой Скетч; правда, судя по анонсу, их “Studio” не сулит дизайнерам ничего нового. Впрочем, нам эти гонки очень на руку. Значит рано или поздно появится еще более удобный workflow, но обратная сторона медали — необходимость чаще адаптироваться и мигрировать от инструмента к инструменту.

Бьюсь об заклад, что рынок взорвет тот, кто первый выпустит в едином инструменте комбинацию Webflow + Sketch. Проблема еще не решена: дизайнер должен видеть типографику такой как в браузере, а не идеально отрендеренную в любом графическом редакторе. Особенно, когда балом правит шрифтовой дизайн.

Кстати, а какой ваш идеальный дизайнерский инструмент?

PS: Исходник прототипа БЫЛО // СТАЛО. Спасибо хабрадизайнерам, продолжайте креативить прямо в браузере (потребуется логин)

• Веб-разработка
• Интерфейсы
• Дизайн мобильных приложений
• Управление проектами
• Управление продуктом