наборы иконок, векторных карт и фотографий / Skillbox Media

Дизайн

#Руководства

• 6 май 2022

• 0

Как быстро загрузить на макет картинку из фотостока, иконку из Material Design и карту регионов любой страны.

Vkontakte

Twitter

Telegram

Скопировать ссылку

Иллюстрация: Оля Ежак для Skillbox Media

Вячеслав Лазарев

Редактор. Пишет про дизайн, редактирует книги, шутит шутки, смотрит аниме.

В Figma очень удобно делать интерфейсы, но некоторые нужные функции в ней не предусмотрены. Например, редактор не может сам собрать вам гайдлайн на основе вашего документа или сделать «непрогрузившийся» макет. В этом вам помогут плагины, которые расширяют функционал графического редактора.

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

Плагин автоматически генерирует гайдлайны по использованию цветов и шрифтов на основе стилей в вашем документе.

Как пользоваться

• Скачайте плагин по ссылке.
• Зайдите в Figma, нажмите правой кнопкой мыши на макет, в выпадающем меню перейдите в пункт Plugins и выберите Automatic Style Guides.
• В вашем документе появится новая страница — в ней будут все ваши стили и пояснения по их использованию.

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

Как пользоваться

• Скачайте плагин по ссылке.
• Зайдите в Figma, нажмите правой кнопкой мыши на любой фрейм, в выпадающем меню перейдите в пункт Plugins и выберите Ghost.
• В появившемся окне укажите нужный стиль «недогрузившегося» экрана.

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

Как пользоваться

• Скачайте плагин по ссылке.
• Зайдите в Figma, нажмите правой кнопкой мыши на макет, в выпадающем меню перейдите в пункт Plugins и выберите Vector Maps.
• В появившемся окне выберите нужную страну, укажите её регионы и нажмите Get as Layer.

Полный набор иконок из дизайн-системы Material Design. Каждую из них можно изменить: добавить заливку, поменять размер и толщину обводки.

Как пользоваться

• Скачайте плагин по ссылке.
• Зайдите в Figma, нажмите правой кнопкой мыши на макет, в выпадающем меню перейдите в пункт Plugins и выберите Material Symbols.
• В появившемся окне выберите нужную иконку, укажите необходимые параметры — иконка автоматически появится на макете.

Набор фотографий из бесплатных фотостоков. Пользователь может выбрать конкретный снимок или нажать на одну из категорий и получить случайную. Если нажать на User Profile, на макете появится случайный портрет человека, сгенерированного с помощью нейросети.

Как пользоваться

• Скачайте плагин по ссылке.
• Зайдите в Figma, нажмите правой кнопкой мыши на макет, в выпадающем меню перейдите в пункт Plugins и выберите Photos.
• В появившемся окне выберите нужную фотографию или нажмите на любую категорию, чтобы плагин выдал вам случайную картинку.

Больше о Figma

Vkontakte

Twitter

Telegram

Скопировать ссылку

Figma с нуля до PRO

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

Узнать про курс

Учись бесплатно:
вебинары по&nbspпрограммированию, маркетингу и&nbspдизайну.

Участвовать

Обучение: Figma с нуля до PRO
Узнать больше

Нидерланды превратились в музей моушн-дизайна под открытым небом
19 дек 2022

В Валенсии проходит выставка о роли дизайна в сфере здравоохранения
15 дек 2022

Студия Monotype рассказала о фирменной типографике ЧМ-2022
15 дек 2022

Понравилась статья?

Да

Полное руководство по созданию интерфейсных иконок

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

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

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

Основные элементы значков

Размер

Согласованность и соответствие является ключевым условием для иконок, и все ваши иконки должны быть одинакового размера при их создании. Во-первых, вам нужно убедиться, что вы знаете, как построена ваша сетка (кратно 8 или 10?). Исходя из этого, ваш базовый размер иконки должен быть напрямую связан с данными условиями. Итак, если у вас есть сетка, основанная на 8, вы бы хотели построить в 16, 24 или 32.

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

Когда вам понадобится комплексность глифа, именно тогда вы захотите добавлять другие размеры. У вас может быть значок базового продукта в 24px, а у маркетинговых значков — 80px из-за огромной разницы в использовании. Вы захотите добавить больше деталей для больших размеров.

Значок магазина в размерах 24×24, 40×40 и 80×80

Когда создается одна и та же иконка разных размеров, я предпочитаю начинать с самого большого размера и идти на уменьшение. Мне гораздо проще удалять детали и упрощать, чем добавлять по мере роста. Это также дает вам ощущение объекта, прежде чем вы действительно минимизируете его.

Цвет

Для иконок товара используйте 1 цвет: черный. Если добавить что то кроме этого, то ваши компоненты станут слишком сложными и трудными для других дизайнеров. Для маркетинговых иконок вы можете использовать 2 цвета, если это важная часть вашего бренда, но я лично считаю, что значки должны быть одноцветными. Все, что имеет 3 или более цветов, является иллюстрацией, а не значком.

Слева: это точечная иллюстрация. По-середине: значок в перспективе. Справа: плоский значок.

Сетки

Пиксельная сетка является основной сеткой, которая использует наименьший элемент: пиксель. При создании значков вы всегда хотите выровнять объекты по пиксельной сетке, особенно по прямым линиям. Но вы можете строить другие фигуры на пиксельной сетке (если вы используете Figma, это уже установлено автоматически). Вы хотите строить объекты на пиксельной сетке не только потому, что она будет выглядеть более красиво, но и потому, что она облегчит вашу жизнь. Равномерно распределять объекты намного проще, когда вы используете сетку. Это помогает вам оставаться в соответствии с вашим расположением, и в целом ваши значки будут выглядеть лучше. Вы можете легко увидеть в Figma разницу между чем-то, находящимся «на пикселе» и вне.

Слева: объекты на пиксельной сетке

Мне нравится строить себе сетку, прежде чем я начну. Вот мои настройки в Figma.

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

При построении моей оптической сетки, я предпочитаю делать отступы по краю, которые равны ширине моего штриха, или, возможно, в два раза шире, если я использую штрих в 1px. В приведенных ниже примерах вы можете видеть, как разные формы подходят к разным краям сетки.

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

Доминирующий объект (прямоугольник) находится в центре

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

Штрихи и заливки

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

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

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

Расстояние между штрихами должно по возможности быть равным ширине штриха

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

Я не рекомендую делать контурные значки размером менее 10px (при условии, что ширина штриха будет 1px-2px). Их будет очень сложно расшифровать.

Выбор стиля

Ваши значки являются отражением вашего бренда. Приступая к этой работе, важно понимать основные ценности вашего бренда и то, как они проявляются визуально. Некоторые прилагательные для размышления: жесткий/мягкий, обыденный/официальный, роскошный/экономичный и буквальный/абстрактный. У вас может быть визуализация стиля, на который вы можете ссылаться.

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

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

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

• Uber
• Google
• Apple
• Airbnb
• Square

Рисование значков

Геометрические фигуры

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

Эта резиновая утка сделана из кругов (и одного закругленного прямоугольника).

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

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

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

Естественные формы

Рисовать более естественные формы в Figma легко. Вы можете либо использовать традиционный метод рисования кривых точка за точкой, либо вы можете использовать превосходный инструмент Figma углового радиуса. Мне нравится рисовать все мои точки в виде прямых линий, а затем закруглять углы с помощью инструмента «Радиус угла». Этот инструмент очень полезен для создания органических, сбалансированных форм. Поскольку углы Figma автоматически подстраиваются, вы можете перемещаться по этим точкам, и углы подстраиваются под вас.

Углы

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

Угловой радиус

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

Отличный образец концентрических радиусов в этом портфеле

Любая промежуточная точка на пути может быть сглажена, с помощью свойства Угловой радиус в Инспекторе. Если вы выбираете весь путь, то он округляет все углы в одинаковой степени. Если вы перейдете в режим редактирования, вы можете выбрать отдельные точки и округлить их по отдельности.

Закрашенные объекты

Если для ваших иконок требуются закрашенные объекты внутри их основных форм (например, окна в доме), в идеале вы захотите сохранить контурные фигуры в заштрихованных значках. И закрашенные объекты в закрашенных значках. В случае, если у вас нет места для контурных фигур, вы хотите использовать закрашенные формы, которые пропорциональны вашим контурам. Например, если у вас контур шириной в 2px, вам не нужны закрашенные фигуры больше, чем 4x4px.

Метафора

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

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

Когда общий контент выглядит не так как нужно, определите, какие детали наиболее важны, а затем удалите лишние.

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

Перспектива

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

Верхний ряд: плоский. Нижний ряд: в перспективе.

Шрифт (избегайте!)

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

Подсказки

Операции Boolean

Логические операции объединяют любой набор слоев фигур с помощью одной из четырех формул: объединение, вычитание, пересечение и исключение. Этот инструмент актуален и потрясающий. Это отличный способ сделать ваши иконки более изменяемыми. Вместо того, чтобы обрезать контуры, вы можете использовать функцию объединения. Не хотите искать пересечение фигур вручную? Попробуйте вычесть.

Группы Boolean обрабатываются как единый слой формы и имеют общие свойства заливки и обводки и могут комбинироваться с другими булевыми группами посредством последующих логических операций.

Объединение: объединяет выбранные фигуры в логическую группу. Если объекты перекрываются, внешний путь новой фигуры состоит из совокупности путей ее подслоев минус любые сегменты, которые перекрываются. Затем этот штрих будет применен к этому внешнему пути, игнорируя любые сегменты пути, которые перекрывают друг друга.

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

Пересечение: создает логическую группу, форма которой состоит только из перекрывающихся частей ее подслоев.

Исключение: является противоположностью пересечения. Исключение показывает только те области его подслоев, которые не перекрываются.

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

Сеть вектор

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

Как использовать иконки в системе дизайна

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

Организация

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

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

Со временем вы превратите все свои значки в компоненты. В Figma компоненты работают точно так же, как и фреймы, с небольшой уловкой, которая дублирует компонент, создавая новые экземпляры, а не копии. Это означает, что вы можете иметь гигантскую библиотеку со всеми вашими значками, а когда вам понадобится ее использовать, вы создаете экземпляр из библиотеки. Если кто-то внесет изменения в оригинал, ваши значки будут обновлены. Вам может понадобится искать эти активы, поэтому вы можете добавить информацию для поиска. Но вместо того, чтобы поместить это в имя файла, есть альтернатива. Figma имеет окно описания компонента, которое позволяет добавлять теги и ключевые слова. Это отличное место для добавления всех тех фраз, которые люди могут искать в вашей библиотеке, не делая сумасшедших длинных и сложных имен. Вот откуда идут ценности продукта!

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

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

Различные размеры: Используйте разные страницы, так как вы редко будете переключаться напрямую с одного экземпляра на другой.

Заливка vs контур: Если вы используете оба стиля, используйте косую черту после имени значка, чтобы указать закрашенные или заштрихованные значки.

Слева: кофе / контурный. Справа: кофе / закрашенный

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

Исходный значок слева «щит». Затем слева направо: «щит / доллар», «щит / евро», «щит / фунт», «щит / иена», «щит / плюс»

Управление вашими активами

Когда вы закончили работу над своими знчками, вы хотите, чтобы они были максимально чистыми для наилучшего экспорта. Используйте логические операции, чтобы упростить вашу работу (помните, наш друг Объединение?). Избегайте лишних линий или форм. Убедитесь, что все ваши строки попадают в ваш кадр. Также необходимо, чтобы другой человек посмотрел на все ваши значки и дважды проверил чистоту.

Figma великолепна, потому что она поощряет сотрудничество и прозрачность. Со значками может быть заманчиво позволить всем вашим дизайнерам иметь доступ к редактированию, чтобы они могли добавлять новые значки. Я рекомендую собирать значки по отдельности, проверять их и добавлять их самостоятельно, когда они соответствуют стандарту. Предоставление вашим коллегам доступа к просмотру (и доступу к вашей библиотеке) достаточно, чтобы вовлечь их в то, что вы делаете, не заканчивая библиотекой и файлом cattywampus. Некоторые из ваших коллег могут захотеть создать разные версии одного и того же значка (например, разных цветов или с разными названиями). Это часто случается, когда кто-то связывает значок с концепцией или продуктом. Вы никогда не захотите иметь более одной версии каждого значка в вашей библиотеке. Используйте описание компонента для этих наименований. Ваши коллеги-дизайнеры должны настраивать цвета значков в своих отдельных файлах, а не в мастере. Поверьте, вам придется время от времени вносить изменения в эти значки, и вы не захотите делать это более чем в одном месте. Форматы файлов являются ключевыми для того, когда вы готовы экспортировать значки. Если вы предоставляете значки партнерам за пределами вашей команды дизайнеров или инженеров, вы, вероятно, даете им файлы .png. Экспорт в 1x, 2x и 3x для нескольких устройств. Для разработки и проектирования вы будете часто экспортировать файлы .svg, которые можно редактировать в программах проектирования и которые будут отображаться в браузере с помощью кода при визуализации онлайн в вашем приложении или на сайте. При экспорте SVG вам понадобится максимально чистый код. Еще одна веская причина для выбора Figma-это сверхлимитный экспорт SVG. Поскольку они оптимизированы, это устраняет необходимость дальнейшей оптимизации в будущем. Ознакомьтесь с этой статьей, чтобы узнать больше.

Передача ваших значков в другие руки

Вы можете быть величайшим дизайнером значков в мире, но если вы не можете внедрить ваши значки в ваше приложение / веб-страницу / прямую почтовую программу, это ничего не даст. Прежде чем приступить к проектированию, поговорите с командой инженеров, ответственных за их внедрение в продукт. Они смогут предоставить вам информацию о веб-сайте или инфраструктуре приложения, которая будет определять некоторые из ваших вариантов, например, ширина или размер штриха. Спросите других дизайнеров, что было сделано раннее, чтобы убедиться, что вы не дублируете работу. Выясните из ваших PMM, какие дополнительные значки они желают увидеть. Будьте дружелюбным сотрудником, который заинтересован в обратной связи, совете и помощи. Это даст вам лучшее представление о том, что вы должны делать, чтобы вам не пришлось переделывать работу и не упускать ключевых арендаторов, с которыми уже нашли общий язык другие люди. И когда вы будете готовы к реализации со своими разработчиками, попробуйте использовать API Figma для программного экспорта.

Другие источники

• Не стесняйтесь связаться с Бонни Кейт Вольф по адресу [email protected]
• Я люблю thenounproject. com→ это место вдохновлено различными взглядами на одну и ту же тему (кто знал, что было так много способов нарисовать папку с файлами!)

https://www.figma.com/file/v8WczgltywYcWbZyAqChfX/Design-Systems-Icon-Guide/duplicate?node-id=0:1

Перевод статьи Bonnie Kate Wolf

3089 иконок Figma — бесплатно в SVG, PNG, ICO

Получите неограниченный доступ к более чем 5,6 миллионам активов

Получить полный доступ

Фигма
Значок

Фигма
Значок

Фигма
Значок

Фигма
Значок

Фигма
Значок

Фигма
Значок

Фигма
Значок

Фигма
Значок

Фигма
Значок

Фигма
Значок

Фигма
Значок

Логотип Фигма
Значок

Фигма
Значок

Логотип Фигма
Значок

Логотип Фигма
Значок

Логотип Фигма
Значок

Фигма
Значок

Фигма
Значок

Логотип Фигма
Значок

Фигма
Значок

Фигма
Значок

Логотип Фигма
Значок

Фигма
Значок

Фигма-файл
Значок

Фигма-файл
Значок

Фигма-файл
Значок

Фигма-файл
Значок

Фигма-файл
Значок

Фигма
Значок

Фигма-файл
Значок

Фигма-файл
Значок

Логотип Фигма
Значок

Фигма
Значок

Фигма
Значок

Фигма
Значок

Фигма-файл
Значок

Файл FIGMA
Значок

Коробка Фигма
Значок

Коробка Фигма
Значок

Коробка Фигма
Значок

Профиль
Значок

Дом
Значок

Календарь
Значок

Параметр
Значок

Поиск
Значок

Дом
Значок

Плюс
Значок

Мешок
Значок

Категория
Значок

Категория
Значок

Место расположения
Значок

Календарь
Значок

Сканировать
Значок

Профиль
Значок

Дом
Значок

Чат
Значок

Категория
Значок

Категория
Значок

Место расположения
Значок

Уведомление
Значок

Уведомление
Значок

Документ
Значок

Звезда
Значок

Сообщение
Значок

Мешок
Значок

Документ
Значок

Активность
Значок

Звезда
Значок

Профиль
Значок

Уведомление
Значок

Звезда
Значок

Место расположения
Значок

Уведомление
Значок

Поиск
Значок

Сердце
Значок

Календарь
Значок

Сканировать
Значок

Дом
Значок

Сердце
Значок

Сканировать
Значок

Плюс
Значок

Диаграмма
Значок

Поиск
Значок

Сообщение
Значок

Параметр
Значок

График
Значок

График
Значок

Папка
Значок

Чат
Значок

Игра
Значок

Сердце
Значок

Чат
Значок

Документ
Значок

Профиль
Значок

Звезда
Значок

Активность
Значок

Календарь
Значок

Закладка
Значок

Папка
Значок

Сканировать
Значок

Плюс
Значок

Сообщение
Значок

Бумажник
Значок

Диаграмма
Значок

Место расположения
Значок

Активность
Значок

Активность
Значок

Диаграмма
Значок

Сообщение
Значок

Бумажник
Значок

Параметр
Значок

Закладка
Значок

Открытие
Значок

Бумажник
Значок

Закладка
Значок

Плюс
Значок

Закладка
Значок

Мешок
Значок

Сердце
Значок

Бумажник
Icon

Untitled UI Icons — полная библиотека значков Figma

Бесплатная загрузка

Preview PRO

Купить

Бесплатная загрузка

Preview PRO

Купить

Создан для современного дизайна пользовательского интерфейса

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

Сделано для Figma, в Figma

Тщательно разработан, чтобы быть на 100% совместимым с последними свойствами и функциями компонентов Figma 2022 года.

4600+ и больше

В нем есть все необходимое для разработки современного и красивого пользовательского интерфейса и веб-сайтов. Больше никаких пользовательских значков.

4 гибких стиля

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

Оптимизированный вывод SVG

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

Толщина обводки 2 пикселя по умолчанию

Толщина обводки 2 пикселя по умолчанию для визуально сбалансированных значков разных размеров. Легко меняйте толщину обводки несколькими щелчками мыши прямо в Figma.

Бесконечная настройка

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

Создано профессионалами

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

Аккуратная организация + IconJar

Тратьте меньше времени на поиск и больше времени на проектирование. Вся библиотека аккуратно организована в алфавитном порядке по 19категории.

Попрощайтесь с Illustrator

Создан специально для Figma в Figma, так что вам больше не придется открывать Adobe Illustrator. На самом деле, вы, вероятно, можете отменить его.

Использование в неограниченном количестве проектов

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

Пожизненные обновления

Никаких подписок или «обновлений». Платите один раз и получайте пожизненные обновления навсегда. Мы постоянно улучшаем пользовательский интерфейс Untitled.

Скачать бесплатно

Preview PRO

Купить

Бесплатная версия

Попробуйте нашу бесплатную версию Untitled UI Icons с более чем 1100 высококачественными линейными значками.

• Библиотека IconJar в комплекте

  Обновите до версии PRO, чтобы разблокировать это.

• Библиотека SVG включена

  Обновите до версии PRO, чтобы разблокировать это.

• Редактируемые главные значки

  Обновите до версии PRO, чтобы разблокировать это.

• Библиотека значков Duocolor

  Обновите до версии PRO, чтобы разблокировать это.

• Библиотека значков Duotone

  Обновите до версии PRO, чтобы разблокировать это.

• Библиотека сплошных значков

  Обновите до версии PRO, чтобы разблокировать это.

• Библиотека значков линий

  Более 1100 профессиональных значков линий по умолчанию.

• Однопользовательская лицензия

  Бесплатно для использования в коммерческих проектах для одного пользователя.

• Более 4600 значков и их число постоянно растет

• Использование в неограниченном количестве проектов

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

• Бесплатные пожизненные обновления

  Мы сообщим вам о выпуске будущих обновлений.

$

39

49 $

Версия PRO

Единая лицензия для индивидуальных дизайнеров, разработчиков и фрилансеров.

• Библиотека IconJar в комплекте

  Аккуратно организованная библиотека IconJar (19 категорий).

• Библиотека SVG включена

  Пиктограммы SVG, экспортированные в аккуратно организованные папки.

• Редактируемые мастер-иконки

  Мастер-иконки с отдельными слоями и живыми углами.

• Библиотека двухцветных иконок

  Более 1100 интересных и уникальных двухцветных иконок.

• Библиотека иконок Duotone

  Более 1100 профессиональных и современных иконок Duotone.

• Библиотека сплошных значков

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

• Библиотека значков линий

  Более 1100 профессиональных значков линий по умолчанию.

• Однопользовательская лицензия

  Бесплатно для использования в коммерческих проектах для одного пользователя.

• 4600+ значков и их количество постоянно растет

• Использование в неограниченном количестве проектов

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

• Бесплатные пожизненные обновления

  Мы сообщим вам, когда выпустим будущие обновления.

$

79

99 $

Версия PRO TEAM

До 5 пользователей. Идеально подходит для дизайнерских команд, агентств и стартапов.

• Библиотека IconJar в комплекте

  Аккуратно организованная библиотека IconJar (19 категорий).

• Библиотека SVG включена

  Пиктограммы SVG, экспортированные в аккуратно организованные папки.

• Редактируемые мастер-иконки

  Мастер-иконки с отдельными слоями и живыми углами.

• Библиотека двухцветных иконок

  Более 1100 интересных и уникальных двухцветных иконок.

• Библиотека иконок Duotone

  Более 1100 профессиональных и современных иконок Duotone.

• Библиотека сплошных значков

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

• Библиотека значков линий

  Более 1100 профессиональных значков линий по умолчанию.

• Лицензия до 5 пользователей

  Бесплатно для использования в коммерческих проектах до 5 пользователей.

• 4600+ значков и их количество постоянно растет

• Использование в неограниченном количестве проектов

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

• Бесплатные пожизненные обновления

  Мы сообщим вам о выпуске будущих обновлений.

Ничто так не выделяется в современном дизайне пользовательского интерфейса, как несовместимые значки. Сегодня в Интернете есть сотни библиотек иконок, но большинство из них имеют низкое качество, содержат ошибки, чрезмерно стилизованы или просто слишком малы — обычно все вместе.

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

Хороший способ создать рамку — задать вопрос: «Эта библиотека иконок сэкономит мне несколько часов работы над проектом?» Если ответ ДА, возможно, это стоит вложений. Затем это становится активом, который вы можете использовать в неограниченном количестве будущих проектов.

Мы подумали обо всем, что вам нужно для современного дизайна пользовательского интерфейса, и упаковали это в один аккуратно организованный пакет. Более того, он создан для Figma, в Figma, что означает, что они тщательно разработаны, чтобы быть на 100% совместимыми с последними свойствами компонентов Figma 2022 года и функциями переопределения.

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

Понятно. Существуют сотни наборов иконок. Почему мы создали еще один?

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

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

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

Вот TL/DR:

• Сделано для Figma, в Figma. 100% совместимость с последними свойствами компонентов Figma 2022 и функциями переопределения. Попрощайтесь с иллюстратором.

• Создан специально для современного дизайна пользовательского интерфейса. Чисто, последовательно и профессионально. Намеренно не слишком стилизованный и достаточно нейтральный для любого проекта.

• 4 гибких модели. Выбирайте между минималистичными линиями, современными двухцветными или двухцветными значками или сплошными стилями значков. Переключайте стили и сохраняйте переопределения в Figma как по волшебству.

• 4600+ и больше. В нем есть все необходимое для разработки современного и красивого пользовательского интерфейса и веб-сайтов. Больше никаких пользовательских значков.

• Аккуратно организовано + IconJar. Вся библиотека аккуратно организована в алфавитном порядке по 19 категориям и включает библиотеку IconJar.

Пользовательский интерфейс без названия не связан с Figma или командой Figma, а также не поддерживается и не спонсируется Figma. Мы просто большие фанаты!

Да, у нас есть 100% бесплатная библиотека безымянных значков пользовательского интерфейса, которую вы можете скачать! Вы можете использовать эту библиотеку иконок в любом количестве проектов без указания авторства. Мы только просим вас оценить его ★★★★★ на Gumroad при загрузке.

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

После того, как вы приобрели библиотеку значков, вы получите бесплатный доступ ко всем будущим обновлениям. Мы сообщим вам, когда будут внесены обновления и улучшения.

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

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

Абсолютно! Вы можете использовать значки пользовательского интерфейса без названия в любом количестве проектов. Перед покупкой ознакомьтесь с нашим лицензионным соглашением.

Единовременный платеж! Мы обещаем, никаких повторяющихся платежей или сюрпризов.

Мы предлагаем 50% скидку для студентов, что намного больше, чем у наших конкурентов. Просто отправьте нам электронное письмо по адресу hello@untitledui. com перед покупкой! Убедитесь, что вы используете адрес электронной почты учащегося или прикрепите действительный студенческий билет/подтверждение.

Стартовый план Figma на 100 % бесплатен для частных лиц. Если вы хотите использовать более продвинутые функции, такие как командные библиотеки, вам необходимо приобрести план Professional. Тем не менее, Figma щедро объявила, что все платные привилегии их планов на 100% бесплатны для студентов и преподавателей! Вы можете узнать больше на Figma Education.

Мы счастливы, только если ты счастлив. Если с файлом возникнут серьезные проблемы, свяжитесь с нами по адресу [email protected] в течение 30 дней, и мы полностью вернем вам деньги. Ни один из наших конкурентов не предлагает возврат средств, что, по нашему мнению, было немного отрывочным.

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

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

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

• Из вашей библиотеки Gumroad, если вы создадите учетную запись
• Нажав Просмотреть содержимое или Доступ к безымянным значкам пользовательского интерфейса в исходном письме о покупке ( это будет обновляться автоматически). Они отправлены с адреса [email protected] с темой . Вы купили значки пользовательского интерфейса без названия — более 4600 основных значков Figma!

Показать больше часто задаваемых вопросов

Такой красивый, подробный и обширный набор пользовательского интерфейса.

Untitled UI — идеальная основа для любого проекта. Я настоятельно рекомендую эту огромную экономию времени.

Adham Dannaway

Дизайнер продукта, практический пользовательский интерфейс

Untitled — это лучшие 109 долларов, которые я потратил на свой бизнес за долгое время. Я собираюсь продолжать использовать его и рекомендовать его каждому дизайнеру, которого я знаю.

Сэм Пирс Лолла

Основатель Shuffleboard

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

Риккардо Буззотта

Старший дизайнер продуктов, Spotify

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

Кори Моэн

Старший дизайнер бренда, Webflow

Я очень впечатлен этим.

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

Matt Walker

Design Systems, Mailchimp

Я очень рад использовать это для быстрых макетов идей в Figma. Мы всегда стараемся оптимизировать наш процесс проектирования, чтобы двигаться быстрее! Определенно рекомендую.

Дженни Чу

Руководитель отдела продукции, Eucalyptus

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

Санни Трочаняк

Основатель NewPulse Labs

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

Дэн Маклей

Ведущий дизайнер Fox Sports

Без названия Пользовательский интерфейс невероятно хорошо организован, а внимание к деталям велико.