Иконки для Figma
Шаблон сайта для Figma. Тематика — продвижение диджея.
Как добавить иконку в фигме
Для того чтобы вставить иконку в фигму вам нужно:
- Скачать эту иконку в svg или растровом формате на ваш компьютер (png, jpg и др.)
- Перетащить иконки с вашего компьютера в рабочее поле программы Figma
Если вы используете растровый формат изображений, то вы можете использовать функцию Place Image (Ctrl + Alt + K).
Как в фигме поменять цвет иконки
Если ваша иконка в jpg, png или любом другом растровом формате, то цвет изменить не удастся.
Для того чтобы изменить цвет иконки в фигме (иконка в формате svg), нужно данную иконку выделить (выделить фрейм или сам векторный элемент), после этого в панели “Fill” меняете цвет у иконки.
Как перекрасить иконку в фигме в разные цвета?
Для этого вам нужно перейти в векторное редактирование (несколько раз кликните на иконку, чтобы появились опорные точки). После этого просто выделяете точки фигуры, которые вам нужно перекрасить и через панель Fill делаете это.
Бесплатные иконки для фигма
Сервисы, где можно найти бесплатные иконки:
- Iconfinder.com
- Flaticon.com (обновление декабря 2021 года — иконки платные)
- Freepik.com (данная библиотека наверно самая большая, но иконки там в формате eps, поэтому вам нужно будет с помощью векторного редактора поменять их формат)
Хотите изучить все инструменты в Figma, а также освоить процесс разработки дизайн-макетов? Приходите на вводный курс по UX/UI дизайну. Вы изучите начальный дизайн-процесс: работа в Figma, анализ информации, визуальная концепция, прототипирование и т.д. Ссылка на сайт курса.
Как изменить цвет PNG иконки в Figma
Довольно популярный вопрос, как у новичка, так и у профессионала — как же в этой долбанной фигме пенять цвет png иконки?
Да, действительно, поменять цвет растровой иконки совсем не просто, ведь фигма у нас векторная и приспособлена использоваться SVG иконки, а там все меняется довольно быстро и просто. Но пнг — это растр, фигма не дружит с растром, но способ наложить другой цвет на иконку есть. Он не такой простой, как в фотошопе, но тем не менее существует
Заходи на телеграмм канал — там еще больше полезного
Берешь пнг иконку, копируешь ее, создаешь из двух слоев маску. У верхнего слоя меняешь цвет на тот, который тебе нужно — наслаждаешься. Даже можешь создать градиентную заливку, заливку фото — все что хочешь можно сделать с цветом пнг иконки таким способом.
Вот такой простой или не очень простой способ менять цвет у растровых элементов с прозрачным фотом в Фигма. Читай, как перевести фигму на русский язык. Нравится Figma? — подпишись на нас в вк и инстаграме
Редактируем иконки: раскрашиваем иконку SVG
Итак, вы скачали иконку SVG и обнаружили, что её надо немного изменить. В этой статье мы рассмотрим, как залить пустые части цветом.
Открываем иконку в Figma.
Figma заливает один вектор одним цветом (либо одним градиентом). Если нам надо сделать заливку несколькими цветами, вектор надо продублировать.
Мы будем делать цветную иконку с контуром, поэтому продублируем заднюю часть и перейдем в режим редактирования (дважды кликаем по вектору, либо выделяем и жмем Enter).
Figma может залить только замкнутое пространство. Если есть разрывы, то заливка не будет видна.
Закрываем область для заливки с помощью пера: в режиме редактирования выбираем перо (P) и цепляясь к привзякам соединяем точки вокруг пустого пространства.
Выбираем инструмент заливки Paint Bucket (B).
Наводим на область, которую надо залить, и кликаем.
Видео заливки
Проделываем аналогичные манипуляции с внутренней частью.
Гайд по работе с иконками в Figma и их передачей в разработку
Каждый дизайнер хоть раз, да сталкивался с иконками. Эта статья о процессе работы с готовыми иконками и их подготовкой перед тем, как отдать разработчику. Разберёмся с рядом проблем и постараемся улучшить процесс. Затронем роль дизайнера и разработчика.
Если некоторые абзацы вам знакомы — смело пропускайте!
Мамкин Дизайнер Подпишись на телеграм канал
Форматы файлов
Существует несколько форматов изображений: jpg, tiff, png, webp, gif, svg и тд. Они разделяются на растровый и векторный форматы.
Нас не интересует растр. Наши изображения должны минимально весить и хорошо отображаться на любом устройстве, даже с дисплеем Retina. Поэтому говорить мы сегодня будем о векторе, а именно о формате svg.
SVG иконка = код
Да, вы не ослышались. Если вы смотрите на svg-изображение, то будьте уверены, что это 100% код.
Формат содержит специальную разметку, где указываются параметры: заливка, обводка, размер, точки на плоскости.
Любое svg-изображение можно открыть не только в режиме его просмотра, но и в любом текстовом редакторе.
Вот так мы видим иконку Figma в любом браузере, веб или мобильном:
А вот так она выглядит в коде:
Работа в Figma
Иконки в вариантах
Об этом совсем недавно рассказывал Саша Окунев. Я тоже об этом немного расскажу, так как это часть процесса.
Некоторые дизайнеры избыточно используют фишку Figma — Variants, закидывая в них иконки. Это не удобно по ряду причин:
- если иконок много, то в списке вариантов вы можете запутаться;
- на превью компонента всегда будет одна и та же иконка, найти нужную будет сложно;
- не будет поиска по названию, компонент всегда будет один;
- при экспорте иконки, имена файлов будут соответствовать названию слоя, то есть содержать длинное свойство компонента, например так:
icon name=ArrowCircleUpLeft, size=32px.svg
Теперь внутри квадратного фрейма мы можем делать всё что угодно, добавлять иконки любого размера, даже с дробными числами. Главное, что обертка остается всегда фиксированного размера.
Сделать это довольно просто:
- выбираем иконку;
- выделяем все слои в ней;
- ПКМ — Outline Stroke
или нажимаем горячую клавишу CMD (CTRL) + Shift + O; - В верхней панели булевых операций выбираем Union Selection или Flatten Selection.
После того как всё подключили, можно добавлять иконки на страницу через тег , , или подключать в CSS через background-image.
Работа с иконочным шрифтом через обычные CSS-свойства
Заключение
Я постарался максимально вложить в эту статью все свои знания по процессу работы с иконками в инструменте и их дальнейшей передачей.
Такие подходы позволяют мне сократить время общения с разработкой и улучшить процесс взаимодействия.
Способы не исчерпывающие и наверняка, у вас найдется еще 1000 и 1 способ, как улучшить взаимодействие при передаче иконок. Обязательно поделитесь им в комментариях.
Чтобы не пропускать новый материал, подпишись на телеграм-канал Мамкин Дизайнер