main

UXДизайн

Как создать и использовать Библиотеку в Figma? Том второй

Октябрь 11, 2021 — 0

Как-создать-и-использовать-Библиотеку-в-Figma-Том-второй.png

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

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

В этой статье

Как настроить компоненты в Figma?
  Варианты в Figma
  Массовое переименование
  Auto layout в Figma
Коротко о главном

Как настроить Компоненты в Figma?

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

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

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

Компоненты

ПРИМЕР ИСПОЛЬЗОВАНИЯ КОМПОНЕНТ
exclamation-mark

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

Варианты в Figma

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

Для того, чтобы создать варианты необходимо выбрать минимум два компонента и нажать на появившуюся в правой панели кнопку “Combine as variants”. Теперь создастся новый фрейм, в котором будут содержаться два (или более) варианта одного и того же элемента. Этот фрейм можно настроить как и любой другой: создать auto layout, выровнять элементы внутри, задать фон, рамки и так далее.

Variants_1

СОЗДАНИЕ ВАРИАНТОВ

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

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

На примере:
Создается вариант из компонент

  • Button / default
  • Button / hover
  • Button / click

Получается один фрейм Button, в котором каждый элемент называется по правилу Property 1=click.

Настройки вариантов

НАСТРОЙКИ ВАРИАНТОВ

После выделения фрейма, в правой панели становятся видны новые свойства. Во-первых, это настройки самого фрейма. Ему можно задать описание или прикрепить ссылки на документацию. Во-вторых, это свойства элементов фрейма. На данный момент у элементов всего одно свойство, имеющее три значения. Название свойства можно поменять, достаточно нажать не него. В меню вариантов можно добавить новый вариант (количество элементов в фрейме увеличится) или добавить новое свойство (название каждого элемента изменится Property 1=click, Property 2 =…)

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

ДОБАВЛЕНИЕ СВОЙСТВА

На рисунке выше добавлены еще 4 варианта и еще одно свойство — Variant. По умолчанию значением нового свойства у всех восьми кнопок будет стоять Default. Как же быстро разделить кнопки на Primary и Secondary?

Массовое переименование

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

Массовое переименование

МАССОВОЕ ПЕРЕИМЕНОВАНИЕ

В первом поле можно ввести значение, которое нужно заменить (необязательное поле), во втором — то, на что его заменить. Также есть кнопки быстрого действия: Current name — текущее имя
Number — задать числа по возрастанию/убыванию
В данном случае следует изменить Default на Primary. Аналогичную операцию можно провести и с оставшимися четырьмя кнопками, заменив значение свойства Variant на Secondary.

Использование вариантов

ИСПОЛЬЗОВАНИЕ ВАРИАНТОВ

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

exclamation-mark

Auto layout в Figma

Auto layout позволяет сохранять отступы и расстояния между элементами, вне зависимости от контекста. Правильно настроенные auto layout с легкостью можно адаптировать под разные размеры макетов.

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

Настройка AUTO LAYOUT_1

НАСТРОЙКА AUTO LAYOUT

Стрелки обозначают направление элементов внутри фрейма, если мы захотим сделать горизонтальное меню, достаточно будет нажать одну кнопку. Далее стоит значение, которое показывает расстояние между элементами, минимальное значение которого = 0. Следующее значение показывает отступы внутри фрейма, аналогично значению padding в css. И точно так же как в css его можно записать:

  • одним числом — одинаковый отступ со всех сторон,
  • двумя числами через запятую — отступы сверху/снизу и справа/слева
  • четырьмя числами — отступы, начиная сверху и по часовой стрелке

Кроме того отступы и выравнивание можно настроить в следующем окошке. Тут наглядно видно какие отступы чему равны, а также видно, как выровнен контент Auto layout. На данный момент он начинается с верхнего левого угла фрейма. Это значение можно поменять на центр или прижать к какому-то краю. Помимо этого, внизу есть выпадающий список и значение Packed (элементы сгруппированы) можно поменять на значение Space between (элементы будут равноудалены друг от друга и будут занимать весь предоставленный им фрейм)

Настройка AUTO LAYOUT_1 (1)

НАСТРОЙКА AUTO LAYOUT

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

Коротко о главном

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

UXДизайн

Как создать и использовать Библиотеку в Figma? Том первый

Август 27, 2021 — 0

Как-создать-и-использовать-Библиотеку-в-Figma-Том-первый.png

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

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

В этой статье

Из чего состоит библиотека в Figma?
Как настроить стили в Figma?
  Настроить сетку
  Настроить цвет
  Настроить типографику
  Настроить эффекты
Коротко о главном

Из чего состоит библиотека в Figma?

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

Работая над несколькими продуктами одного заказчика, надо следить чтобы цветовая палитра не гуляла. Используя стили, вы не ошибетесь! Не понравился заказчику цвет фона, вы одним движением замените “нецепляющий” серый на серый как у Apple по всему проекту.

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

Как настроить стили в Figma?

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

Настройки стиля

НАСТРОЙКА СТИЛЯ

Настроить можно сетку, цвет, типографику и эффекты. Подробнее о каждой настройке ниже.

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

  • Primary / Default
  • Primary / Hover
  • Primary / Click

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

exclamation-mark

Пример иерархии стиля (1)

ПРИМЕР ИЕРАРХИИ СТИЛЯ

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

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

Пример описания стиля

ПРИМЕР ОПИСАНИЯ СТИЛЯ

Теперь посмотрим а что и как вообще можно настроить. А также поделимся парой лайфхаков.

Настроить сетку

Для работы удобно использовать несколько сеток. Одну в виде колонок, вторую — более детальную в виде линий или полноценной сетки. Для десктопной версии макетов обычно используют 12 колонок и 10-ти пиксельную сетку, для мобильной версии — 4 колонки и 8-ми пиксельную сетку.

exclamation-mark

Сама сетка настраивается в правой панели в разделе Layout grid. При нажатии на + добавится сетка с тем шагом, который задан на данный момент в качестве смещения (по умолчанию 10px).

Параметры сетки

ПАРАМЕТРЫ СЕТКИ

Если нажать на иконку добавленной сетки в правой панели, то увидим, что у самой сетки всего два настраиваемых параметра:

  • Size — размер ячейки
  • Color — цвет сетки и ее прозрачность

Однако вместо значения Grid в выпадающем списке можно выбрать колонки (Columns) или строки (Rows).

Параметры строк и колонок

ПАРАМЕТРЫ СТРОК И КОЛОНОК

Поскольку разница между ними заключается только в терминологии (ширина между колонками или высота между строками), рассмотрим только один вариант

  • Count — количество колонок
  • Color — настройка цвета и прозрачности
  • Type — тип отображения
  • Left — Отображение колонок начинается с левого края
  • Right — Отображение колонок начинается с правого края
  • Center — Колонки отображаются по центру
    • Stretch — Колонки ширина колонок рассчитывается автоматически
    • Width — Ширина колонки
    • Margin / Offset — Отступы:
  • При выбранном типе stretch поле будет называться margin, это расстояния до правого И левого края фрейма
  • При выбранном типе left или right, поле — offset, это расстояние от левого ИЛИ правого края соответственно
  • При выбранном типе center это поле не активно
    • Gutter — Расстояние между колонками

    Несколько примеров настройки сеток.

    1. Сетка 8px + 4 колонки с отступами по краям 16px. Подобная настройка идеально подходит для разработки макетов под мобильную версию. Ширину самих колонок или расстояние между ними можно подбирать в зависимости от контента.

    Пример сетки для макетов в моб приложении

    ПРИМЕР СЕТКИ ДЛЯ МАКЕТОВ МОБИЛЬНЫХ ВЕРСИЙ

    2. Сетка 8px + 2 колонки + 2 строки. Тут колонки и строки служат не для направления и структурирования, а для обозначения границ. Удобно использовать, когда расположение контента может быть произвольным, а вот границы важны, например, для визитный карточек, да и любых других карточек в проектах.

    Пример сетки для визиток и других карточек

    ПРИМЕР СЕТКИ ДЛЯ ВИЗИТОК И ДРУГИХ КАРТОЧЕК

    После настройки сетки, колонок и строк, нужно сохранить все это в единый стиль. Для этого в параметре Layout grid нужно нажать на меню и уже в открывшемся окошке grid style — знак “+”. Если дать понятное название стилю — mobile grid m*n, потом не придется долго мучиться с выбором какой же стиль лучше применить для элемента.

    Настроить цвет

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

    Параметры цветовой палитры

    ПАРАМЕТРЫ ЦВЕТОВОЙ ПАЛИТРЫ

    Удобно выбрать цвет пипеткой или уже готовый из палитры (формируется из тех цветов, что присутствуют в документе). Ну а если знать кодировку, то просто вбить ее (доступны Hex, RGB, CSS, HSL, HSB)

    Можно изменить тип заливки:

    • Solid — сплошная заливка
    • Linear — линейный градиент
    • Radial — радиальный градиент
    • Angular — угловой градиент
    • Diamond — ромбовидный градиент
    • Image — поставить картинку в качестве фона

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

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

    Парамерты цветовой палитры линейный градиент

    ПАРАМЕТРЫ ЦВЕТОВОЙ ПАЛИТРЫ. ЛИНЕЙНЫЙ ГРАДИЕНТ.

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

    Настроить типографику

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

    В принципе если постоять повтыкать, то все понятно становится

    В ПРИНЦИПЕ, ЕСЛИ ПОСТОЯТЬ, ПОВТЫКАТЬ, ТО ВСЁ ПОНЯТНО СТАНОВИТСЯ

    Настройки текста

    НАСТРОЙКИ ТЕКСТА

    После того, как шрифт настроен так как нужно для проекта, его тоже следует преобразовать в стиль. Удобно сразу создавать стили понятные для разработки — Заголовки “h0”, “h1”, “h2” …, основной текст “body” и так далее.

    Настроить эффекты

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

    Пример эффектов

    ПРИМЕР ЭФФЕКТОВ
    exclamation-mark

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

    Коротко о главном

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

    ДизайнПубликации

    Прототипирование с Balsamiq. Основные возможности и неявные преимущества для продвинутых.

    Февраль 5, 2018 — 0

    Картинка-2-960x640.jpg

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