Стили

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

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

3.1 Создание цветовых стилей

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

Создайте и используйте свой цветовой стиль.

Создайте объект

2. Измените заливку на желаемое значение цвета

3. Нажмите на квадратный символ, содержащий цветовые стили

4. Щелкните «+», для добавления класса. Готово!

Совет: когда вы даёте название стилю, укажите наименование его области применения, а не просто впишите название самого цвета («цвет выделения», а не «оранжевый»).

3.2 Создание стилей для текста

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

Настройка стиля текста схожа с настройкой цветовых стилей.

Выделите текст

2. В правом меню свойств щелкните по квадратному значку стилей.

3. Нажмите на «+» и дайте вашему ему имя

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

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

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

3.3. Больше стилей

Сетки также можно сохранять и повторно использовать в качестве стилей.

А еще такие эффекты как тень, внутренняя тень, размытие слоя и размытие фона.

Типографика. Готовим стили для текста

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

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

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

Итак, создаем текстовый слой, задаем ему шрифт, начертание, размер, отступы и другие параметры на панели слева. Затем нажимаем на иконку с четырьмя точками на этой панели и в появившемся окошке жмем +:

​Создание стиля для текста в Figma Татьяна Маслакова

Задаем имя стиля, далее он появится у вас на панели слева.

​Стиль текста в Figma Татьяна Маслакова

Таким же образом создаем все остальные стили для нашей дизайн-системы.

​Таблица текстовых стилей в дизайн-библиотеке в Figma Татьяна Маслакова

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

https://vc.ru/design/123801-dizayn-biblioteka-v-figma-tipografika-cveta-i-stili

Цвета

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

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

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

​Создания стиля заливки в Figma Татьяна Маслакова

После определения всех стилей они отобразятся в правой панели в Figma:

Создаем плашку, изучаем стили эффектов

Наконец-то переходим к созданию первого компонента в нашей библиотеке.

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

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

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

Внутри компонента выделяем прямоугольник и настраиваем Constraints как на картинке:

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

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

Расширим функциональность компонента плашки:

К примеру, добавим иконку с крестиком для закрытия диалоговых окон.

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

Выделяем все слои нашей иконки и запаковываем в компонент.

Зарезервируйте в вашей библиотеке, куда вы будете складывать все будущие иконки.

Дублируем компонент иконки. При этом создастся экземпляр компонента. При любом изменении основного компонента меняются все его экземпляры.

Созданный экземпляр перетаскиваем в компонент с нашей плашкой и настраиваем constraints: top и right.

​

Нарисуем при помощи pen небольшой треугольник, поместим его внутрь компонента плашки, к нему также применится общая тень всего компонента (обратите внимание, ранее тень была применена к самому компоненту, а не к слою прямоугольника внутри него).

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

Скрывая или показывая нужные слои, мы будем кастомизировать компонент под нужные ситуации.

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

Наводим порядок

Есть удобный способ именования стилей в Figma. Стили можно удобно сгруппировать в палитре, задавая им имена с использованием знака «/». Например headers/h1 и так далее:

Таким же образом именуются стили заливок, стили эффектов и даже сами компоненты.

Как создать свою библиотеку компонентов в Figma

Туториалы

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

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

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

Начинаем создавать библиотеку компонентов

Любая библиотека компонентов в фигма — это сложно, но крайне удобно в будущем, как для команды, так и для одиночного дизайнера-фрилансера

Библиотека компонентов, далее БК состоит из собственно, компонентов и стилей. Это ее основа.

Вот основные стили, которые тебе понадобятся для создания своей БК

Типографика в библиотеки компонентов

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

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

Подбор цветовой схемы для библиотеки компонентов

С текстом разобрались, теперь пора бы поговорить о цвете.

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

1 создай несколько основных цветов

2 на основе главных цветов создай еще больше оттенков светлее-темнее.(есть масса сайтов-помощников, которые помогут тебе., например sassme.jim-nielsen.com)

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

Чтобы в будущем избавить себя от страданий переименования  стилей давайте им название не по цвету, а по значению. Например не «зеленый», а «основной» и тд.

Когда у тебя готовы все стили для твоей БК  — это уже 30% от всего пути.  Благодаря так несправедливо недооцененным стилям ты можешь использовать одну и ту же комбинацию стилей текста и цвета для разных элементов и в любой момент их изменять.

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

Помни о правильной иерархии в названиях стилей. Фигма позволяет группировать названия стилей. Например главный цвет/90%

Стили текста

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

Давать названия стилям можно по-разному. Я советую пользоваться такой логикой

Название шрифта размер/начертание

Вопреки мнению школьников у обводок стиля не бывает, хотя соответствующая пиктограмма там есть. Для обводки можно применить стиль цвета. Данные на июнь 2019.

Стили для эффектов

Ты можешь создавать супер сложные комбинации из 101 тени и объединить их в один стиль. Давать названия то же нужно логичные. Например, выбрать ориентир в размытии или % прозрачности. Я беру всегда значение blur и называю стили соответственно:

Тень/16  Внутренняя тень/24 и тд.

первый шаг к созданию своей Библиотеки компонентов есть. Ты подобрал и настроил стили, дал и правильное и логичное название.

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

Библиотеки компонентов в Figma: что это, зачем нужно и как работает

Редактируете одну кнопку — меняются все. Разбираемся с главной фишкой Figma, за которую её любят веб-дизайнеры.

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

Что такое компонент Figma

Компонент — это элемент, копии которого меняются вместе с ним. Например, поле ввода, аватар со статусом или меню. Исходный компонент называется основным (main component), его копии — экземплярами (instances).

Допустим, мы создали основной компонент — чёрный квадрат. Затем добавили два его экземпляра.

Перекрасим первый в красный цвет. Все три тоже станут красными — экземпляры наследуют параметры основного компонента.

Наряду с наследованием, экземпляры можно изменять напрямую, не разрывая при этом связь с «родителем». Например, сделать второй квадрат сиреневым, а третьему добавить обводку и растянуть.

Свойства, полученные экземплярами непосредственно, всегда приоритетны по сравнению с унаследованными. Если уменьшить и перекрасить «родителя» в жёлтый цвет, один из его «потомков» всё равно останется фиолетовым, а другой — прямоугольником, потому что эти свойства были приобретены самостоятельно, а не от основного компонента.

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

Что такое библиотека компонентов

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

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

Зачем нужны библиотеки компонентов

Профессионалы сходятся во мнении: библиотеки компонентов — одно из главных преимуществ Figma перед другими программами для дизайна. Они позволяют:

• Экономить время. Из компонентов интерфейс собирается как конструктор. Заготовки в виде миниатюр расположены в левой панели, откуда их перетаскивают в проект. Экземплярам легко менять «родителя». Так можно быстро переключаться, например, с одного стиля на другой. Время — деньги, поэтому использование компонентов означает для клиентов экономию бюджета.
• Эффективно работать в команде. Библиотеки публикуются для всей команды, и каждый сотрудник пользуется элементами одной дизайн-концепции. Если в неё внести правки, компоненты обновятся у всех, а разработчики получат уведомление. При этом в Figma отличный контроль версий за месяц. Кто-то ошибся? Не проблема, откатитесь назад!
• Упростить редизайн. Экземплярам автоматически передаются изменения «родителей». Поэтому, когда сайту или приложению нужно обновить дизайн, основная работа — просто отредактировать библиотеку.
• Использовать готовые наработки. К файлу Figma можно открыть доступ по ссылке. Благодаря этой функции в интернете есть бесплатные библиотеки, которыми может пользоваться каждый. На скриншотах выше — одна из них: дизайн экранов Facebook для iOS 11 в виде компонентов.

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

Сделайте пустой файл, который станет библиотекой, и наполняйте его компонентами. Вначале нарисуйте составные части компонента. Затем выделите их и щёлкните Create Component в верхней панели.

Чтобы новую библиотеку можно было использовать в проектах, её нужно опубликовать. Сделайте это на вкладке Assets, кликнув иконку-книгу и нажав Publish.

С библиотеками проще работать, если соблюдать несколько правил:

• Добавлять всё, что встретится больше двух раз. Интерактивные элементы, иконки, слайдеры, тапбары, аватары пользователей, лэйауты экранов, меню и так далее.
• Начинать с меньшего. По принципам атомарного дизайна вначале создают наименьшие неделимые элементы: например, заголовки и параграфы, иконки, чек-боксы. Позже они станут частью других компонентов.
• Вкладывать состояния. Изображения для элемента в разных состояниях часто располагают одно над другим. Например, кнопка с наведённым курсором и нажатая кнопка. Чтобы переключиться, включают и отключают видимость каждого из них.
• Использовать фреймы как папки. Создать фрейм можно с помощью символа решётки в верхней панели. Это прямоугольник, напоминающий окно в операционной системе.

Фрейм называют как категорию элементов. Допустим, «Уведомления» — все уведомления помещают в него. Визуально так проще ориентироваться, но самое главное — в раскрывающемся списке компонентов появится одноимённый пункт.

• Заполнять описания. У основного компонента есть поле описания. В нём указывают, когда используется и как ведёт себя элемент. Так коллеги не будут теряться в догадках: подсказка появляется при наведении курсора.
• Один интерфейс — одна библиотека. Особенно полезно для больших команд. Если десктопный интерфейс создают одни люди, а мобильный — другие, им лучше пользоваться разными библиотеками. Меньше компонентов в меню, меньше обновлений — никто не отвлекается на лишнее.

Как правильно использовать библиотеки

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

Поместить экземпляр компонента в дизайн можно тремя способами:

1. Скопировать. Копия основного компонента или его копии автоматически становится экземпляром.
2. Перетащить. Из меню Assets в рабочую область.
3. Изменить. На правой панели у экземпляров есть параметр Instance. Здесь нужный основной компонент можно выбрать из списка.

Бывает, что изменённый экземпляр уже сильно отличается от «родителя». Если он ещё понадобится в таком виде, можно сделать две вещи:

1. Перенести изменения в основной компонент. Функция Push Overrides to Main Component в блоке Instances. Все параметры передаются «родителю» и сразу наследуются остальными экземплярами. Подходит, если изменения произошли во всей дизайн-концепции.
2. Сделать экземпляр самостоятельным компонентом. Клик правой кнопкой мыши, Detach Instance. Экземпляр «разберётся» на составные части, которые легко превратить в новый основной компонент. Для случаев, когда прежний «родитель» ещё пригодится.

Что в итоге

Библиотеки компонентов Figma — удобный способ хранить заготовки для интерфейсов, а также делиться ими с командой и всем миром. Сохраняйте в них всё, что будет использоваться многократно. Чтобы подредактировать экземпляр, вносите правки на месте. А если уйдёте далеко от оригинала, элемент можно сделать самостоятельным компонентом.