Дизайн иконок в Figma | Дизайн в жизни

Обновлено: 23.03.2021

Иконки, значки, пиктограммы – неотъемлемая часть дизайна сайтов и мобильных приложений. Они быстро объясняют пользователю смысл каждого блока. Мы часто даже не читаем надписи под иконками, потому что их визуальная часть нам и так понятна. Существуют целые направления дизайна, где занимаются именно иконками. Сегодня мы поговорим о том, откуда брать иконки для своих проектов в Figma и продолжим создавать дизайн приложения Proper Nutrition.

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

Содержание

1. Использование готовых библиотек компонентов с иконками

Самый простой и быстрый способ – использовать то, что создали другие дизайнеры.

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

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

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

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

Щелкните на название понравившегося набора и напротив его названия вы найдете кнопку Duplicate. После ее нажатия, файл скопируется в ваш раздел Drafts.

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

На вкладке Layer вы увидите список фреймов, с входящими в него иконками. Каждая иконка – это компонент.

Если вы еще не узнали, что такое компонент из видео урока, который я рекомендовала посмотреть в статье «Первое знакомство с Figma», то напомню.

Компонент в Figma – это элемент дизайна, который можно использовать многократно. Например, меню приложения. Достаточно нарисовать его один раз, объединить все слои в компонент и использовать его копии для всех экранов. В случае если нужно будет внести какие-то изменения, это нужно будет сделать только с самым первым экземпляром, который будет считаться родительским. Остальные же (дочерние) изменятся автоматически.

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

Для этого в левом меню на вкладке Assets со списком всех компонентов нажмите на кнопку TeamLibrary (библиотека команды).

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

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

Совет! Есть только один способ использовать иконки и другие компоненты сторонних дизайнеров в бесплатной версии Figma. Найдите проект, который максимально подходит по набору компонентов для вас. Дублируйте его в свои черновики и работайте прямо в нем. Создайте страницу (Page) со своим проектом, тогда все объекты из других страниц будут так же доступны для вас.

2. Использование плагинов с иконками в Figma

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

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

Для того, чтобы установить плагин выполните следующие действия:

Вернитесь на главный экран Figma (Menu – Back to files)
Перейдите в раздел Community, где хранится список всех плагинов и UI Kits от пользователей.
Перейдите в раздел Plugin и найдите подходящий вариант, например, Icons8 Free Icons. Напротив его названия в найденном списке или на странице плагина нажмите клавишу Install.

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

Теперь вернитесь к вашему документу и в пункте меню Menu — Plugins вы найдете только что установленный Icon8. Щелкните по названию и откроется диалоговое окно плагина с библиотекой иконок.

Ищите необходимые варианты и вставляйте их в свой дизайн. Лучше использовать SVG формат, но в данном плагине он доступен в платной версии. Подробнее о преимуществах SVG читайте в статье «Экспорт из Photoshop в SVG».

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

3. Использование иконочных шрифтов в Figma

В Figma нет готового набора иконок, но можно использовать иконочные шрифты, например, FontAwesome.

С помощью инструмента Text создайте текстовый блок во фрейме и на панели свойств в разделе Text выберите шрифт Font Awesome

Перейдите на официальный сайт шрифта Font Awesome. Выберите подходящую иконку, щелкните по ней левой клавишей мыши и скопируйте в буфер.

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

4. Рисуем собственные иконки в Figma, пример – иконка wifi из фигур

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

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

Давайте нарисуем иконку сети wifi в Figma и заодно познакомимся с особенностями работы с фигурой Ellipse

Нарисуйте эллипс размером 40х40 px, зажав клавишу shift, чтобы сохранить пропорции. Наведите на него указатель мыши, и вы увидите круглую точку arc, потянув за которую вы измените свойство sweep (развертка) и получится пайчарт.

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

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

Повторите все тоже самое с 3-м эллипсом (у меня получился 20х20 px), но не создавайте дугу, а оставьте треугольный сегмент (Piechart).

Затем выделите все эллипсы и установите закругление краев на 1 в панели свойств.

Для того, чтобы размер иконки ограничивался его видимой частью, а не размером первоначального эллипса (40х40 px), примените к трем выделенным элементам булеву операцию Union (объединение). Более подробно о ней я писала в статье «Рисуем дизайн первой страницы приложения в Figma». В результате данной операции на панели Layer появится новый слой Union. Переименуйте его в wifi.

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

Для этого нажмите на кнопку с ромбом на верхней панели инструментов или в контекстном меню нашей иконки выберите пункт Create Component.

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

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

5. Дизайн иконок для Status Bar приложения Proper Nutrition

Теперь вернемся к приложению Proper Nutrition и создадим иконки для Status Bar. Это будет примерный дизайн, так как у каждого девайса он свой. Нам главное, показать какое место в дизайне экранов он будет занимать.

В документе Proper Nutrition создадим новый фрейм для Iphone 8 и назовем его MainScreen. Это будет главный экран нашего простого приложения. Описание всех экранов смотри в статье «Рисуем дизайн первой страницы приложения в Figma»

Для данного фрейма зададим сетку Grid с ячейкой 8px

С помощью инструмента Shape Tool – Rectangle (R) нарисуйте белый прямоугольник по всей ширине экрана, высотой 44 px (обычная высота для status bar).

Размеры фигуры можно задать вручную на панели Design или растягивать ее, ориентируясь на цифры внизу прямоугольника.

Назовите слой status bar

Для нарисованного прямоугольника задайте ограничители Left and Right — Top.

Теперь займемся иконками. Будем использовать иконочный шрифт. В нашем случае это самый простой способ. Надпись со временем сделайте с помощью обычного текстового блока. У меня это шрифт Roboto в 13px. Для данных иконок выставите ограничители:

Иконка батареи – Right – Top and Bottom
Иконка wifi — Right – Top and Bottom
Время — Left – Top and Bottom

Выровняйте иконки по центру прямоугольника status bar с помощью соответствующих кнопок на панели Design.

Выделите прямоугольник Status Bar со всеми иконками и преобразуйте их в компонент, который назовите так же Status bar.

6. Дизайн иконок для меню tab bar в приложении Proper Nutrition

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

Возврат к главной странице.
Открытие списка избранного.
Добавление в избранное
Поиск по рецептам
Оставить заметку (комментарий)

Нарисуйте прямоугольник высотой 60 px, шириной во весь экран.

Над ним нарисуйте линию (Line) с цветом (stroke) — # 949494

С помощью иконочного шрифта создайте иконки «Возврат к главной странице», «Открытие списка избранного», «Поиск по рецептам», «Оставить заметку». Размер – 24px.

Для созданий кнопки «Добавление в избранное» выполите следующий порядок действий:

Нарисуйте прямоугольник ширина (W) – 48, высота (H) – 30, закругление краев — 3

Залейте его градиентом (Fill – Linear) из красного (#DA0100) в оранжевый (#DA6900), прозрачность 100% в обоих случаях.

С помощью инструмента Text напечатайте «+» по середине прямоугольника, шрифт Comfortaa, размер 24. Установите у него следующие параметры – Fixed Size и Align Centr, чтобы символ всегда оставался в центре кнопки и фиксированного размера при любом изменении ее ширины.

Выделите прямоугольник и знак «+», преобразуйте их в компонент и назовите его Button/add favoriets.

Теперь выделите все иконки и кнопку и выберите для них стиль выравнивания Tidy up, чтобы расстояние между ними стало равным.

Выделите все нарисованные иконки и элементы для status bar и преобразуйте их в компонент с названием status bar.

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

Следующая статья из цикла по разработке приложения Proper Nutrition — это «Дизайн приложения в Figma — стили и маски«. В ней вы узнаете еще один способ поместить растровое изображение в Figma, а так же как работать с масками и стилями.

Подписывайтесь на обновления блога «Дизайн в жизни»

по e-mail или социальных сетях

и мы обязательно опубликуем для вас еще больше полезных статей из мира дизайна и веб-дизайна