Как добавить стиль в фигме
Перейти к содержимому

Как добавить стиль в фигме

  • автор:

Дизайн-система в Figma. Часть 1: типографика, цвета и стили

Эта серия статей будет полезна новичкам, тем, кто еще сомневается, переходить ли в Figma, Sketch или XD и тому подобные программы из Photoshop, а также тем, что уже работает в Figma, но еще не освоил ее в достаточной степени, чтобы создать свою собственную дизайн-систему. Система конечно не претендует на глобальные системы для огромных проектов и порталов, но она может здорово упростить и ускорить работу начинающим дизайнерам.

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

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

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

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

Аналогичным образом создаются все необходимые стили для вашей дизайн системы.

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

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

Цвета

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

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

После того, как мы закончим с цветом и текстом, мы увидим внушительный список различных стилей в правой панели у Figma:

Тени, плашки, стили обводок у форм и прочие эффекты

Думаю, пора уже нам познакомиться с компонентами.

Первым делом мы создадим компонент для плашки, настроим ее внешний вид, попутно создадим стиль для всех теней в проекте (теней для плашек в том числе).

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

Выделяем наш прямоугольник и создаем новый компонент. Не забудьте задать новое имя для компонента на панели слоев слева. Я назвала его surface.

Если прокликаться до нашего прямоугольника, то в левой панели во вкладке Constraints мы увидим, что по умолчанию привязки к краям заданы как Scale. Это значит, что объект будет пропорционально масштабироваться при изменении размеров компонента. Задайте значение как на картинке:

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

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

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

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

Итак. Базовый компонент плашки готов. Теперь я хочу расширить его функционал:

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

Но для этого предварительно нарисуем эту иконку при помощи инструмента Pen (горячая клавиша P). Не забудьте к линиям иконки применить цвет из палитры, что мы создали ранее.

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

Выделяем компонент иконки и дублируем его (Comand+D или Contrl+D). у нас создастся экземпляр компонента. При этом при любом изменении основного компонента иконки будут меняться все его экземпляры. Перетаскиваем этот экземпляр прямо в компонент с нашей плашкой и настраиваем constraints так, чтобы иконка всегда была привязана к правому верхнему углу компонента.

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

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

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

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

П.С. Наводим порядок

Век живи — век учись! Ввожу некоторые корректировки в нашу систему по прошествии какого то времени.

Если задать грамотные имена нашим стилям с использованием знака «/», то они сгруппируются в палитре слоев:

Также хорошим тоном считается использования описаний для стилей — это будет полезно многим:

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

Комментарий задается при редактировании стиля в поле description.

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

Behance — мои лучшие работы

Telegram-канал — публикую, заметки и мысли о своей работе, figma, портфолио, дизайн-системах, автоматизации задач и ускорении работы. Делюсь ссылками, крутыми кейсами.

  • Часть 2: Кнопки
  • Часть 3: Поля ввода и выпадающие списки
  • Часть 4: Поиск и умный поиск
  • Часть 5: Списки и Auto Layout

Лучшие практики 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

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

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

  1. Заливок: заполнение (Fill), обводка (Stroke), Фон (Background color)
  2. Текст: шрифты, размеры, высота строки, интервалы
  3. Эффекты: тень, внутренняя тень, размытие, размытие фона
  4. Сетки: строки, столбцы и отступы

Как добавить стиль к элементу

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

Как создать стиль

1) Создайте элемент, задайте его свойства

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

Кнопка вызова окна со списком стилей

3) Нажмите значок плюс (+) в открывшейся панели

Окно списка стилей

4) Введите название стиля

Название нового стиля

После создания стиля вы увидите, что панель свойств изменилась. Теперь вместо настроек, отображается название стиля. Если вы наведете на него курсор, вы увидите две иконки — настройки стиля и кнопку «Detach style», открепляющую стиль от этого элемента.

Отображение стиля вместо свойств

Изменение стиля

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

Как удалить стиль

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

Чтобы удалить стиль, вызовите окно со списком стилей и вызовите контекстное меню («правая кнопка» мыши), из списка команд выберите Delete Style.

Удаление стиля

Обратите внимание, что удаление стиля не означает возврат связанных с ним элементов к исходным настройкам.

Дизайн в Figma: учимся пошагово работать со стилями текста и цвета

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

Если вы новичок в дизайне или хотите прокачаться в этой сфере, рекомендуем курсы по Фигме от Contented и Pentaschool. Они дают все необходимые навыки и знания для создания дизайнерских проектов.

Преимущества и недостатки использования Фигмы для дизайна

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

Преимущества использования Фигмы

  1. Коллаборация в реальном времени. Одно из основных преимуществ Figma — возможность работать в режиме реального времени с другими дизайнерами и разработчиками. Вы можете пригласить коллег или клиентов в проект и работать над ним вместе, комментируя и делая изменения прямо в приложении. Это упрощает командную работу и ускоряет процесс создания дизайна.
  2. Универсальность. Figma доступна на различных платформах, включая веб-браузеры, Windows, macOS, iOS и Android. Это означает, что вы можете работать в Фигме, где бы вы ни находились, и иметь доступ к вашим проектам и файлам с любого устройства.
  3. Лёгкость в использовании. Figma имеет простой и интуитивно понятный интерфейс, что делает её доступной для новичков в дизайне. Она также предлагает множество инструментов и функций, которые позволяют создавать сложные макеты и прототипы без необходимости загружать дополнительное программное обеспечение.

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

  1. Ограниченный доступ к функциям в бесплатной версии. В бесплатной версии Фигмы есть некоторые ограничения по количеству проектов, файлов и коллег, с которыми можно сотрудничать. Для более широких возможностей и доступа к расширенным функциям вам придётся подписаться на платную версию.
  2. Небольшой выбор инструментов для работы с векторными изображениями. Хотя Фигма предлагает широкий набор инструментов для создания и редактирования макетов, она не обладает самым богатым набором функций для работы с векторными изображениями.
  3. Необходимость подключения к интернету. Чтобы использовать Фигму, вы должны быть подключены к интернету. Это может быть проблемой в случае отсутствия стабильного интернет-соединения или желания работать в автономном режиме.

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

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

Добавление стилей цвета

  1. На панели справа найдите раздел «Local styles» и нажмите на кнопку «+».
  2. В появившемся окне выберите «Color».

Добавление стилей цвета в Figma

  1. Выберите новый цвет из списка, который вы хотите использовать, или введите код цвета в поле настроек.

Добавление стилей цвета в Figma

  1. Нажмите на кнопку «Create style».

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

Чтобы понимать, как правильно использовать цвета в своих проектах, рекомендуем пройти «UX/UI-дизайнер: расширенный курс». Вы получите знания о принципах дизайна, которые помогут сделать ваш продукт не только красивым, но и функциональным.

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

Добавление стилей текста

  1. На панели справа найдите раздел «Local styles» и нажмите на кнопку «+».
  2. В появившемся окне выберите «Text»

Добавление стилей текста в Figma

  1. Введите имя для стиля.
  2. Выберите нужный шрифт, размер и стиль текста.

Добавление стилей текста в Figma

  1. Нажмите на кнопку «Create style».

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

Удаление стилей

Удаление стилей в Figma

  1. На панели слоёв справа найдите раздел «Local styles» и выберите нужный стиль, который вы хотите удалить.
  1. Нажмите на нужный стиль правой кнопкой мыши и выберете «Delete style».

Теперь стиль будет удалён и все элементы, к которым был применён этот стиль, вернутся к исходным стандартным настройкам.

Итоги

Вы можете править или удалять бесчисленное количество стилей, которые были созданы, чтобы сделать в итоге уникальный и полезный для вас стиль. Если вы не можете настроить удобный design-шаблон, не можете выстроить строки и команды, сделать правильные отступы и заливки фона, попробуйте использовать ux или ui плагины.

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

Добавление и использование стилей цвета и текста в Figma — эффективный способ сделать ваш дизайн более последовательным и легко редактируемым. Благодаря этой функции, изменение цвета или текста во всём макете займёт всего лишь несколько минут.

Освойте навыки дизайнера

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *