Иконки для Фигмы – 9 бесплатных наборов
Figma
Автор InPX На чтение 2 мин Просмотров 14.4к. Опубликовано 8 ноября, 2022
Мы собрали лучшие иконки для Фигмы из более 128К элементов.
Каждый из 9 наборов иконок бесплатны и доступны для коммерческого использования в ваших проектах Figma.
useAnimations – анимированные иконки для Figma
Каждая иконка выполнена в векторном формате, что позволяет легко скорректировать её форму и цвет, под свои нужды.
Iconsax плагин для Figma с более 6000 иконок
Это плагин с организованной библиотекой для Figma, с поиском и перетаскиванием.
Содержит 6 стилей: линейные, контурные, полужирные, объемные, двухцветные и ломаные.
Craftwork – более 950 иконок для Figma
Плагин Craftwork icons предоставляет бесплатную и растущую коллекцию самых популярных иконок с открытым исходным кодом.
Более 950 иконок в 4 пакетах и различных часто используемых категориях, которые помогут вам в поиске того, что вам нужно.
Iconduck – это плагин с более 120 000 иконок для Фигмы!
С помощью этого плагина для Figma, вы сможете найти более 120 000 бесплатных значков, смайликов, иллюстраций, логотипов, флагов, графики и клипартов в SVG для вашего проекта.
Hicon Glass – набор их 370 стеклянных иконок для Figma
Пак состоит из самих иконок и подложек в разных стилях и цветах, которые можно по-разному сочетать и кастомизировать.
Neon Icons – набор из 18 неоновых иконок и стеклянные плашек для Фигмы
В наборе иконки с эффектом неонового свечения, стеклянные плашки и текст.
Ripple – набор из 800 иконок для Figma
Это плагин с организованной библиотекой для Figma, с поиском и перетаскиванием.
Содержит 6 стилей: линейные, контурные, полужирные, объемные, двухцветные и ломаные
Holographic icons – набор голографических иконок для Фигмы
В наборе всего 10 иконок, но зато можно потыкать, узнать как там все устроено и создавать такие самостоятельно.
Посмотрите наши другие подборки с набором 3D иллюстрациями и набором Эмодзи для Фигмы. А также подборку с самым большим набором иконок для Фигмы. Надеемся, что они вам понравятся и вдохновят на создание чего-то интересного.
Делаем 3D иконку в Figma
Вы можете написать сейчас и зарегистрироваться позже. Если у вас есть аккаунт, авторизуйтесь, чтобы опубликовать от имени своего аккаунта.
Примечание: Ваш пост будет проверен модератором, прежде чем станет видимым.
Больше кнопок.
Просматривают тему сейчас 0 пользователей онлайн
- Ни одного зарегистрированного пользователя не просматривает данную страницу
Made with remotely from Moscow Powered by Invision Community
Разбор кейса: создаем иконки в Figma
Иконки — графические элементы, которые помогают нашим пользователям быстро ориентироваться в интерфейсе и воспринимать текстовый контент. Их можно рисовать в разных программах, в том числе в Figma.
Иконки — графические представления функций, концепций, конкретных объектов и самого приложения в интерфейсах. Они служат визуальным ориентиром для пользователей и помогают им интуитивно перемещаться по страницам. Если иконки нарисованы надлежащим образом, они даже могут заменить отдельные фразы и слова (не забывайте, мы воспринимаем визуальные образы быстрее, чем текст). Узнаваемые понятные иконки — залог простого и удобного интерфейса.
Все это хорошо, но покажите мне, как это сделать
Неправильных ответов на этот вопрос не существует. Все зависит от процесса, которому вы следуете, и методов, которые вы используете. Существует множество различных способов создания иконок. Я расскажу о том, как я создавала иконки для приложения, предназначенного для учета расходов.
Недавно мы изменили дизайн и интерфейс нашего мобильного приложения. Одним из этапов редизайна было создание новой библиотеки иконок. Мы решили создать ее в Figma, чтобы использовать при проектировании мобильных и веб-приложений в дальнейшем.
Размер
Первый шаг — определение размеров иконки в пикселях. Мы можем создавать иконки в разных размерах:
- Маленькие — 12×12 px, 16×16 px, 24×24 px, 32×32 px, 48×48 px
- Средние — 64×64 px, 96×96 px, 128 x 128 px, 256 x 256 px
Все зависит от платформы, для которой разрабатывается иконка.
Сетки
Начните с выбора сетки. Это поможет установить четкие правила для последовательного, но гибкого позиционирования графических элементов.
KeyLine shapes (базовые формы) необходимы для поддержания единообразных визуальных пропорций во всех иконках.
Квадраты, круги, прямоугольники и диагонали помогут нам создать более согласованные иконки за счет единообразного размещения этих форм внутри них.
Активная область (live area) — это пространство, в котором находятся основные части иконки. При необходимости элементы могут заходить в область обрезки (trim area), но не должны выходить за ее пределы.
Тип иконки
После создания сетки мы должны решить, какой тип иконки нам нужен.
Существуют различные типы иконок:
- Контурные (линейные) иконки — состоят исключительно из обводки.
- Иконки с заливкой — здесь есть как обводка, так и заливка.
- Двухцветные контурные иконки — состоят из обводки двух цветов.
- Сочетание контурных иконок и иконок с заливкой — эти типы иконок могут сосуществовать в рамках одного продукта. Обычно они показывают состояние объекта — является он активным или нет.
Поскольку наша цель состояла в том, чтобы создать четкие и понятные иконки, я решила нарисовать их в контурном стиле, а также добавить несколько значков с заливкой для отображения активного состояния.
Давайте создадим несколько иконок!
Вы можете рисовать иконки разными способами. Я расскажу вам о том, какие шаги позволили мне создать отличную библиотеку иконок, которой я горжусь ��.
Обводка 1px — 1.5px — 2px
- Создайте нужную форму. Отрегулируйте размер иконки в соответствии с вашими требованиями.
- После того как иконка готова, выберите в панели слоев ее фрейм и кликните по нему правой кнопкой мыши. На экране появится выпадающее меню. В этом меню выберите Outline Stroke. Откройте его еще раз и выберите Flatten. Эти действия позволят превратить обводку в объекты и сделать из них единую форму.
- Измените размер и положение иконки в панели справа — округлите все дробные значения.
- Чтобы сделать иконку масштабируемой, выберите в панели Привязки (Constraints) параметр Scale как по горизонтали, так и по вертикали.
- Создайте компонент иконки и измените цвет в соответствии с вашими требованиями.
- Вуаля! Ваша иконка готова ��
Вот туториал по созданию иконки шестеренки (Настройки), которая обычно вызывает у дизайнеров затруднения. Мне самой потребовалось некоторое время, чтобы разобраться, но теперь я могу создать такую иконку за пару минут.
Как сделать объемную иконку в фигме
Перейдите в File → Import → Scalable Vector Graphics:
Выберите файл с иконками в СВГ и нажмите кнопку Import SVG:
Приблизьтесь к иконкам с помощью колёсика мыши. Чтобы менять ракурс, двигайте мышью с зажатым колёсиком. Чтобы перемещать экран, двигайте мышью с зажатыми колёсиком и клавишей Shift. Иконки отображаются с артефактами, это нормально:
4. Разделите логотипы и плашки
Выделите все плашки: нажмите по каждой левой кнопкой мыши с зажатой клавишей Shift. Обложки подсветятся оранжевой обводкой:
В окне Outliner перетащите плашки и логотипы в Collection. Коллекцию с плашками назовите Plates, коллекцию с логотипами — Logos.
5. Отдалите логотипы от плашек
Выделите все логотипы. Для этого в окне Outliner в коллекции Logos нажмите на первый и последний логотип с зажатой клавишей Shift:
Нажмите клавиши G+Z и двигайте мышью вперёд, чтобы переместить иконки по оси Z:
6. Повысьте качество кривых
Выделите любой логотип:
Мы выделили логотип ВК
В панели Properties зайдите в Object Data Properties и откройте вкладку Shape. Задайте параметру Resolution Preview U значение от 30 до 64:
Повторите с каждым логотипом и каждой плашкой. Вы не заметите изменений, но края объектов сгладятся. Это сделает трёхмерную модель глаже.
Выделите любой логотип. Перейдите в Modifier Properties. В выпадайке Add Modifiers выберите Decimate:
Выберите режим Planar и выставьте значение Angle Limit от 1 до 5:
Выделите логотип, к которому применили модификатор Decimate, затем выделите все остальные объекты. У логотипа с модификатором жёлтый контур, у остальных — оранжевый:
У логотипа ВК жёлтый контур
Перейдите в меню Object → Link/Transfer Data и нажмите Copy Modifiers:
Так вы примените настроенный модификатор ко всем кривым. Кривые станут чище, но пока вы снова этого не увидите.
7. Переведите кривые в меши
Меш (англ. mesh) — сетка полигонов, из которых состоит трёхмерный объект. Полигон состоит из вершин, рёбер и граней
Сейчас все иконки — это кривые Безье. Чтобы сделать иконки объёмными, нужно перевести кривые в меши. Выделите все объекты и нажмите правую кнопку мыши, Convert To → Mesh:
Меш (англ. mesh) — сетка полигонов, из которых состоит трёхмерный объект. Полигон состоит из вершин, рёбер и граней
Кривые стали мешами. Это видно по иконкам слоёв: вместо дуг — треугольники.