Figma как сделать иконку

Иконки в Figma

Сразу хочется отметить, что иконок как таковых в программе figma нет. Но по умолчанию есть поддержка иконочных шрифтов, одним из которых является Font Awesome.

Иконочный шрифт

Данный шрифт позволяет рисовать различные иконки. Полный список всех иконок указан на официальном сайте. Существует 3 вида данного иконичность шрифта: outline, solid, brands (контурные, залитые цветом, бренды). И если возникает такая ситуация, что некоторые иконки у вас отображаются возможно проблема состоит в том, что вы включили не ту разновидность шрифта, которая нужна.

Более подробную информацию по работе с иконочными шрифтами вы можете найти в видео «обзор программы figma». Ссылку на видео с нужным таймлайном прилагаю.

Иконки в figma «своими руками»

Также вы можете рисовать иконки самостоятельно с помощью векторных объектов (прямоугольник, круг, перо). Если вы работали в программах Adobe Illustrator или Adobe Photoshop, то принцип работы в них один и тот же. Наберите в интернете как рисуются иконки в данных программах и те же принципы вы можете применить и в своей работе.

Иконки svg

Также фигма поддерживает вставки векторных объектов svg. Я сам использую всегда данный формат в работе, вместо png картинок, так как вы можете экспортировать данные иконки из макета во время верстки, и перенос в рабочее пространство figma никак не отразится на иконке. Это очень удобно для верстальщиков, которые берут дизайн в продакшн.

Хотите изучить все инструменты в Figma, а также освоить процесс разработки дизайн-макетов? Приходите на платный интенсив по веб-дизайну. Вы изучите полностью весь дизайн-процесс, в том числе: работа в Figma, общение с заказчиком, анализ и выполнение ТЗ, управление проектами и т.д. Ссылка на сайт интенсива.

Похожие материалы

Иконки для фигмы. Сервисы, где можно скачать иконки для Figma

Как работать с иконками, а также сервисы, где можно скачать иконки.

Текст по кругу в Figma

Текст по кругу с помощью плагина to Path

Лучшие кириллические шрифты в Figma

5 вариантов классных шрифтов, а также примеры их использования.

Новое видео на YouTube

Источник

Иконки для фигмы: обзор классного плагина «Material design icons»

Ищите где скачать иконки для фигмы? В этом обзоре сделаю обзор полезного плагина для работы «Material design icons».

Как установить плагин с иконками «Material design icons»?

Чтобы установить плагин с иконками «Material design icons» перейдите по ссылке, и нажмите на кнопку «Install» сверху, справа, как показано на скриншоте выше.

Чтобы активировать плагин, перейдите в ваш проект. Нажмите на меню слева и выберите пункт «Plagins» далее «Material design icons».

Как вставить иконку в фигму с помощью плагина?

Чтобы вставить иконку в фигму с помощью плагина «Material design icons», просто выберите подходящую иконку и нажмите на неё левой клавишей мыши.

Из выпадающего списка слева вы можете выбирать один из нескольких стилей иконок:

• Classic — классические иконки для фигмы.
• Filled — иконки с заливкой.
• Outlines — иконки в виде линий.
• Rounded — иконки со скруглением.
• Sharp — иконки с острыми углами.
• Two tone — двухцветные иконки.

Справа вы можете выбирать размеры иконок. Просто выберите из списка подходящий размер. Также вы можете масштабировать иконки с помощью инструмента «Scale». Его можно выбрать сверху, слева, либо зажать клавишу «K».

Далее в плагине можно выбрать формат: SVG или PNG. В чем отличие этих двух форматов?

1. У PNG формата при увеличении появляются пиксели. У SVG пикселей нет. Их можно масштабировать до бесконечности, без потери качества. Поэтому рекомендую использовать именно SVG формат для ваших проектов.
2. SVG иконки вы можете перекрасить стандартным образом, а PNG нет.

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

Чтобы перекрасить SVG иконки выберите иконку и в панели справа (внизу надписи Fill) поменяйте её цвет. Для того, чтобы перекрасить иконку в формате PNG можно воспользоваться плагином «Color overlay».

Заключение

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

Источник

Иконки для Figma

Шаблон сайта для Figma. Тематика — продвижение диджея.

Как добавить иконку в фигме

Для того чтобы вставить иконку в фигму вам нужно:

1. Скачать эту иконку в svg или растровом формате на ваш компьютер (png, jpg и др.)
2. Перетащить иконки с вашего компьютера в рабочее поле программы Figma

Если вы используете растровый формат изображений, то вы можете использовать функцию Place Image (Ctrl + Alt + K).

Как в фигме поменять цвет иконки

Если ваша иконка в jpg, png или любом другом растровом формате, то цвет изменить не удастся.

Для того чтобы изменить цвет иконки в фигме (иконка в формате svg), нужно данную иконку выделить (выделить фрейм или сам векторный элемент), после этого в панели “Fill” меняете цвет у иконки.

Как перекрасить иконку в фигме в разные цвета?

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

Бесплатные иконки для фигма

Сервисы, где можно найти бесплатные иконки:

1. Iconfinder.com
2. Flaticon.com (обновление декабря 2021 года — иконки платные)
3. Freepik.com (данная библиотека наверно самая большая, но иконки там в формате eps, поэтому вам нужно будет с помощью векторного редактора поменять их формат)

Хотите изучить все инструменты в Figma, а также освоить процесс разработки дизайн-макетов? Приходите на платный интенсив по веб-дизайну. Вы изучите полностью весь дизайн-процесс, в том числе: работа в Figma, общение с заказчиком, анализ и выполнение ТЗ, управление проектами и т.д. Ссылка на сайт интенсива.

Похожие материалы

Создание и рисование иконок в Фигма. Icons in Figma

Как рисовать иконки в Figma? Как использовать иконочные шрифты?

Текст по кругу в фигме

Текст по кругу с помощью плагина to Path

Как прокачать себя в веб-дизайне

Полезные приемы в повышении навыков веб-дизайна

Новое видео на YouTube

Источник

4 способа добавить иконки на сайт из Figma — все плюсы и минусы

Поговорим о том, КАК ДОБАВИТЬ ИКОНКИ НА САЙТ ИЗ FIGMA. Для тех, кому интереснее смотреть видео, прикрепляю свой видосик на YouTube:

Проверяя html-макеты верстальщиков и разработчиков наблюдаю проблемы с добавлением иконок на сайт. Они их добавляют чёрт пойми как… Могут добавить их как png изображения, а могут вообще использовать не иконки из макета, а похожие иконки, использовав, к примеру, FontAwesome. Это жестко, скажу я вам.

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

Способов хватает, и выбор конкретного способа зависит от самого проекта и дизайнера, который делал макет. Собственно об этом всём мы и поговорим!

Способ №1 — это экспортировать иконки в svg формат и вставлять их либо как код, либо как изображение, либо как CSS свойство.

Сосбтвенно, выделяем иконку в Figma и жмём на экспорт в SVG формат, сохраняем в наш проект и вставляем на сайт:

Сам по себе вариант самый очевидный, простой и достаточно хороший.

Однако тут у нас выступает 2 очень неприятные проблемы.

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

Вторая проблема — это если мы подключаем иконку таким способом, то нам проблематично менять её цвет через CSS или даже JS. Придётся экспортировать дубль иконки, но с другим цветом. А в случае с тегом object у нас вообще не будет нормально работать ссылка, если мы обернули её в тег .

Есть также ещё небольшой минус — он связан с тем, что мы не можем задать размер иконки через свойство font-size (то есть мы не наследуем размер шрифта). Приходится всё время «играться» с шириной и высотой.

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

Поэтому этот вариант на самом деле подходит тогда, когда иконок в макете не много (то есть максимум штук 3-5) и их цвета нигде не меняются (к примеру по наведению или теме макета).

Способ №2 — это создать 1 файл со всеми иконками. По-другому это называют текстура иконок.

Вариант также подразумевает экспорт иконок в svg или png формат, но одним файлом, где будут все иконки одного размера. Это довольно старый вариант, но знать о нём нужно. Я точно знаю, что ВКонтакте использовали этот способ очень долго, и после редизайна они отказались от этого способа в пользу SVG + JS.

К примеру, иконки соц. сетей:

Прописываем код для иконки ВК и Instagram:

Тут у нас выступает 2 проблемы:

Первая — у нас может занять много времени подготовка CSS свойств.

Вторая — опять очень проблематично менять цвета. Придётся экспортировать столько дублей иконок, сколько нужно цветов.

Зато тут есть 1 приятный плюс — это небольшой HTML код, так как мы используем только класс, чтобы добавить иконку.

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

Способ №3 — использовать готовый сервис иконок. Тут вам важно уточнить у дизайнера — ОТКУДА ВЗЯТЫ ИКОНКИ.

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

Часто бывает такое, что иконки взяты с какого-то сервиса, который позволяет подключить иконки через стили или скрипты.

В Figma дизайнеры часто используют сервис Iconify.

Либо дизайнер мог использовать другие иконки, где есть готовое подключение на сайт. Тот же EvaIcons, к примеру.

Пример подключения через Iconify:

Тут я уже начну с плюсов:

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

во-вторых, цвет иконки меняется очень просто по свойству color в css

в-третьих, размер иконки наследуется от шрифта и мы можем его менять по свойству font-size

да и в целом в нашем html коде всё аккуратно, иконки занимают 1 строку

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

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

Способ №4 — это самостоятельно превратить все иконки в иконочный шрифт

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

Что мы делаем:

мы экспортируем все иконки в svg формат (будет лучше, если все они будут чёрные, латиницой без символов и слова «icon»)

импортируем их в сервис icomoon (чтобы сэкономить кучу времени). Тут важно, чтобы у вас все иконки были в кривых (fill), а не обводкой (stroke). Сервис не работает с обводкой, и он вас предупредит, если какая-то иконка будет сделана обводкой

генерируем иконочный шрифт и получаем готовый CSS файл и превьюшку с иконками

Из плюсов я выделю:

возможность легко менять цвет через CSS свойтсво color

возможность задавать размер иконки через font-size (то есть иконка наследует размеры щрифта)

небольшой html-код, так как мы используем только 1 небольшой класс для добавления иконки

простая поддержка иконок (легко добавлять и удалять иконки из нашего арсенала)

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

Из минусов:

мы тратим немного больше времени на подготовку иконочного шрифта

нам важно следить, чтобы иконки были в кривых, а не обводочными

Данный вариант подходит, когда иконок в макете много и когда их цвета могут меняться.

Заключение

Друзья! Поверьте, этого всего вам достаточно, чтобы научиться правильно и без проблем подключать любые иконки на любой сайт. Ведь сами понимаете, как важно, чтобы html-макет соответствовал макету в Figma, при это без ущерба производительности и качеству кода.

Пишите в комментариях — что вы думаете по этому поводу.

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

Удачи вам в ваших макетах и увидимся в следующих видео/статьях. Пока!

Источник

Как мы делаем анимированные иконки SVG с помощью Figma

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

В итоге наш процесс создания анимированной иконки состоит из трех этапов:

1. Создаем SVG в Figma
2. Дописываем анимацию в блокноте

Создание иконки в Figma

Несколько правил при создании иконки:

1. Все подвижные элементы должны быть отдельными. Не объединять их в один вектор
2. Убираем всю обводку

Итак, на примере у нас есть вектор стакан, есть вектор крышка и отдельные векторы — пар.

Иконка стаканчик кофе в Figma

Экспортируем фрейм (не забыв убрать фон) в SVG и открываем файл в блокноте.

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

Иконка SVG в блокноте

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

Для элементов, которые мы планируем анимировать, проставляем id или class.

Далее прописываем для нужных нам id и классов стили с указанием имени анимации, например:

И там же пишем скрипт анимации:

Теперь можно вставить наш SVG в любое место как объект:

То есть нормального инструмента, который бы позволял работать с объектами и анимацией SVG в режиме WYSIWYG — так и не появилось?

Или хотя бы создавал SVG в структурированном по внутренним объектам виде?

Всё через ковыряние кода?….
Причём кода — не в лучшем виде… (((((

Есть Figmotion, там работа с ключевым кадрами. Лично я не видел его довольно давно, тогда там было не так уж много возможностей, но зато можно было экспортировать в JSON. Вообще сейчас есть смысл смотреть в сторону Lottie, конечно, но это уже не про Figma больше, а про AE/Illustrator.

Источник