Как сделать иконку в фигме или найти готовую с помощью плагинов (svg, пнг, 3д)

Как сделать векторную иконку в фигме

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

Каждую иконку рекомендуется делать в отдельном фрейме одинакового для всех иконок в наборе размера (как правило квадратного, т. е. с одинаковой шириной и высотой). В зависимости от назначения можно использовать стандартные размеры (например 16х16, 24х24, 32х32, 48х48 px) или любые другие. Фон таких фреймов делаем прозрачным. Также следите за тем, чтобы все иконки в наборы были выполнены в одном стиле (залитые или контурные), имели одинаковую толщину линий и визуальный вес. При необходимости к иконкам можно будет применить любые эффекты, например тени, цвета, градиенты или 3д. Сохранить их можно будет с помощью экспорта в формате svg или png (пнг).

Вот пример иконок, которые вы научитесь делать после просмотра видео (оно находится в начале этой статьи):

Плагины в фигме где можно бесплатно найти иконки

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

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

• iconify (очень много иконок в разных стилях)
• icons8
• material design icons
• feather icons
• font awesome icons

Найти эти и другие плагины с иконками можно в Figma Community или сразу в рабочем файле на панели инструментов:

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

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

Некоторые 3д эффекты, такие как тиснения, тени и блики, можно выполнить с помощью стандартных инструментов фигмы. Например, эффект объема в стиле неоморфизма можно получить добавлением темной и светлой Drop shadow с противоположными смещениями. А эффект 3д тиснения — с помощью светлой и темной Inner Shadow и одной Drop. Подробно как это сделать смотрите в видеоуроке в начале статьи.

Также есть несколько плагинов, которые позволяют обычным векторным иконкам добавлять 3д объем, например Fig3D и Roto. Но лучшим на мой взгляд является плагин i 3D. Детально этот плагин для 3д иконок также рассматриваем в видео из начала урока. Вот Какой результат можно сделать с его помощью:

Где бесплатно взять готовые 3д иконки в фигме

Фигма-комьюнити ( figma.com/community ) — это кладезь различных материалов и полезных ресурсов для дизайнера. Там можно найти очень много всего, и 3д иконки — не исключение. Переходим на главную страницу фигмы, нажимаем на кнопку Explore Community в нижнем левом углу и в поиске вводим запрос 3d icons (на английском). В итоге покажется множество файлов с готовыми наборами 3д иконок в самых разных стилях. Во многих случаях существует возможность перекрасить иконки в нужные вам цвета. Также часто эти наборы делаются для определенных тем, например можно встретить пак иконок с едой или логотипами соц сетей. Останется только открыть файлы и скопировать нужные иконки себе в проект.

Как в фигме покрасить иконку пнг в другой цвет

Для начала скажу, что использование PNG-иконок — это в принципе плохая идея. Это растровый формат, и с ним с любом случае будут проблемы. Так что лучше нарисовать или скачать в векторном, например SVG. Но если по каким-то причинам вам всё же нужен именно пнг, можно просто создать поверх иконки цветной прямоугольник и применить к нему иконку как маску. В этом случае итоговое изображение примет цвет прямоугольника и форму исходной иконки (при условии что фон у неё был прозрачный).

Также можно преобразовать растровую пнг иконку в векторную с помощью специальных плагинов, например Image tracer, Vectorized или Codia AI VectorMagic. После преобразования можно будет перекрасить иконку как обычный вектор.