Инструменты Figma: как работать с типографикой, цветами и компонентами правильно

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

Всем привет, на связи студия интерфейсов UXART, где мы ежедневно делаем интернет удобнее. 

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

Поэтому предлагаем прочитать статью до конца. За клавиатурой — постоянный редактор UXART. Если захотите прочитать инфу про редактуру и прочее, велком ин май ченнел, ну а мы начинаем :)

Типографская раскладка

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

По сути, это небольшой чит, который позволяет вам печатать специальные символы, используя комбинации клавиш. Например, многие знают, что “” и «» — это два разных типа кавычек. Мы в UXART чаще всего используем именно «».

Почему эти кавычки правильные, а “” нет — можно почитать в интернете. Но это сейчас не так важно. Важно то, что такие кавычки делаются при сочетании клавиш «r.alt+б» и «r.alt+ю».

Кроме того, в раскладке Ильи Бирмана есть и другие специальные символы, которые помогут вам при создании правильных текстов.

Скачать раскладку можно тут

Название проекта и обложка

Поскольку это наш гайд и он в первую очередь разрабатывался для внутренних работ, некоторые главы статьи будут посвящены локальным правилам. Правильны они или нет — судить сложно. Но мы работаем так, и это устраивает нас, Артёма Юрьевича (нашего CEO) и, что самое главное, заказчиков.

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

Итак, здесь у нас 4 важных пункта:

1. Внутренние файлы

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

Для любого файлы фигмы используется обложка, которая содержит:

1. логотип заказчика,
2. название проекта,
3. метка «внутренний» или «релиз»,
4. логотип UXART,
5. тэг (проектирование, дизайн или аналитика).

Обложки внутренних файлов имеют черный фон под логотипом студии.

1. Клиентские файлы (продакшн)

Клиентам открывается доступ к таким файлам для просмотра. В них необходимо соблюдать порядок и не хранить множество устаревших версий макетов.

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

1. Как задать обложку проекту?

1. Поместить фрейм рядом с UI-kit (о нем поговорим ниже) нужного проекта.
2. ПКМ по фрейму, выбрать пункт «Set as thumbnail».

1. Названия файлов

Файлы фигмы следует называть по следующему принципу:

Название компании. Название проекта. Внутренний (если файл не клиентский)

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

Закономерный вопрос, который может возникнуть: зачем мне это использовать? 

Ответ прост — так вы сможете систематизировать все свои работы. При правильном нейминге файлов в будущем у вас не возникнет ситуации: «А где и когда я делал именно этот проект?».

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

Или из наболевшего — многие дизайнеры в своих портфолио оставляют «Untitled» файлы. Что это и зачем оно нужно — нам не понять.

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

Компоненты

Что надо компонентить?

Любые элементы, которые повторяются минимум на двух страницах проекта (сайта или приложения), либо более 3 раз на одной странице. Кнопки, иконки, карточки, переключатели, инпуты и т.д. 

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

Как компонентить?

Простые компоненты

Если элемент никак не изменяется на протяжении всего проекта (одинаковый цвет, размер, набор элементов внутри), то просто нажми сочетание клавиш ctrl(cmd)+alt+k. 

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

Компоненты со множеством состояний

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

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

Фигма имеет возможность создания компонентов с параметром true/false. Такую функцию можно использовать для быстрого скрытия или отображения какого-либо элемента в компоненте.

Например, создадим компонент кнопки с двумя вариантами: один с иконкой, другой без. 

Название первого варианта: Property 1=fill, Right_icon=True 

Название второго варианта: Property 1=fill, Right_icon=False 

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

В результате мы сможем «включать» или «выключать» иконку в кнопке простым переключателем:

Важно! Иконка в кнопке так же должна быть множественным компонентом, чтобы её можно было менять на любую другую.

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

Текстовые стили

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

Основные правила

Важно не создавать множество стилей, которые имеют минимальные отличия (например, 1 pt в размере кегля). Для большинства проектов достаточно 4-5 стилей заголовков и 4-5 стилей основного текста.

Так же не стоит использовать большое количество разных значений интерлиньяжа. Для большинства проектов хватает двух значений — 130% для небольшого по объему текста и 150% для крупных абзацев.

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

Названия для стилей стоит задавать следующим образом: «Headers / H1», «Headers / H2», «Text / 18_150», «Text / 18_130» и т.д. Указывая названия через слэш, мы получаем папки, в которых удобно искать нужный стиль.

Все текстовые стили должны быть представлены в UI-kit и цветовых стилях.

Цветовые стили

Названия для цветовых стилей следует задавать следующим образом: «ui / green», «ui / red», «ui / grey», «text / black», «text / gray». Задавая названия через слэш, мы получаем папки, в которых удобно находить нужный цветовой стиль.

UI-kit

Что это такое

В UIi-kit мы собираем все элементы, которые повторяются как минимум на двух страницах проекта. Шапка, подвал, кнопки, иконки, карточки и т.д. 

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

Как собрать кита 🐳

UI-kit создаётся на первой странице в файле фигмы. Весь дизайн или прототипы располагаются ниже.

Элементы в UI-kit добавляются постепенно, по ходу работы над дизайном. После утверждения главной страницы проекта обычно сразу можно вынести основные составляющие (цвета, типографика, кнопки ...). 

При этом стоит группировать элементы относительно их функционала:

1. цветовая палитра (основные и вспомогательные цвета);
2. типографика (набор стилей для заголовков и основного текста);
3. элементы управления (кнопки, контролы, переключатели, табы ...);
4. формы (инпуты, выпадающие списки, области загрузки файлов ...);
5. иконки;
6. элементы страниц (карточки, блоки меню, таблица ...);
7. и т.д.

Для каждой группы элементов создаётся свой фрейм.

Порядок в проекте

Названия фреймов и групп

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

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

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

Структура проекта

Для большинства проектов в фигме мы используем следующую структуру:

1. UI-kit
2. Дизайн. Для каждой страницы сайта используется отдельная страница в фигме. Кроме тех случаев, когда необходимо показать полностью функционал и флоу какого-либо раздела. Дизайн мобильных приложений создается либо полностью на одной странице, либо разделяя большие разделы на несколько страниц.
3. 🗄️ Архив. На эту страницу помещаются устаревшие варианты дизайна страниц. В этом разделе так же важно хранить порядок. Варианты дизайна, которые относятся к одной странице или разделу, необходимо располагать рядом.

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

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

С вами был редактор прекрасной студии интерфейсов UXART, до скорых встреч!