Как изменить цвет PNG иконки в Figma
Довольно популярный вопрос, как у новичка, так и у профессионала — как же в этой долбанной фигме пенять цвет png иконки?
Да, действительно, поменять цвет растровой иконки совсем не просто, ведь фигма у нас векторная и приспособлена использоваться SVG иконки, а там все меняется довольно быстро и просто. Но пнг — это растр, фигма не дружит с растром, но способ наложить другой цвет на иконку есть. Он не такой простой, как в фотошопе, но тем не менее существует
Сменил цвет черной png иконки на красный
Берешь пнг иконку, копируешь ее, создаешь из двух слоев маску. У верхнего слоя меняешь цвет на тот, который тебе нужно — наслаждаешься.
Даже можешь создать градиентную заливку, заливку фото — все что хочешь можно сделать с цветом пнг иконки таким способом.
Вот такой простой или не очень простой способ менять цвет у растровых элементов с прозрачным фотом в Фигма.
Иконки для Figma
Шаблон сайта для Figma. Тематика — продвижение диджея.
Как добавить иконку в фигме
Для того чтобы вставить иконку в фигму вам нужно:
- Скачать эту иконку в svg или растровом формате на ваш компьютер (png, jpg и др.)
- Перетащить иконки с вашего компьютера в рабочее поле программы Figma
Если вы используете растровый формат изображений, то вы можете использовать функцию Place Image (Ctrl + Alt + K).
Как в фигме поменять цвет иконки
Если ваша иконка в jpg, png или любом другом растровом формате, то цвет изменить не удастся.
Для того чтобы изменить цвет иконки в фигме (иконка в формате svg), нужно данную иконку выделить (выделить фрейм или сам векторный элемент), после этого в панели “Fill” меняете цвет у иконки.
Как перекрасить иконку в фигме в разные цвета?
Для этого вам нужно перейти в векторное редактирование (несколько раз кликните на иконку, чтобы появились опорные точки). После этого просто выделяете точки фигуры, которые вам нужно перекрасить и через панель Fill делаете это.
How to change an Icon-Image Colour in Figma.
Being a Developer, I always wanted to learn how to design a world class product from scratch (on my own ��). Recently i have been learning how to design an app using the right tools and process, primarily using the already well established tool, Figma. As Figma supports almost every popular image-type out of the box, and with its brilliant collections of available plugins (for free ��) we can drag and drop a design for any app or website quite easily.
The most recurring problem that i encountered was dealing with images, especially Icons and the need to change to different colour’s based on the design scheme (for example Dark vs Light mode).
After searching for a while, I stumbled across this reddit thread (click here, credits to the creator!) and immediately felt like trying the same cool trick on my most favourite plugin.
Changing the colour of Icons.
For my Icon needs i tend to use StreamLine Icons, one of Figma’s most widely used plugins to get any desired shape into the design. You can find the plugin here.
Here is how we can change the colour of an icon imported from this plugin.
- Load the Plugin by selecting it from the Plugins menu.
2. Select an Icon from the Plugin, e.g the Home Icon.
3. Select the Icon and remove the fill of “FFFFFF” from the image on the design panel on the right. This will strip down the icon to its boundaries thus removing the unwanted background.
3. Draw a rectangle on top of the icon, make sure the rectangle is of same dimension as the Icon, e.g 48×48 as in the above image. In case it’s not, it can be adjusted later on as well from the design panel on the right.
4. Select the Icon and the Rectangle by either pressing Cmd+Click on each item on the Layers, or manually on the frame and open the Right Click Menu, then select Use As Mask (shift+cmd+m).
5. Change the colour of the Rectangle in the Mask to achieve the desired result.
Цвет в фигме. Как поменять? Панель «Fill», быстрая замена, стили.
В этом уроке вы узнаете как работать с инструментом «Цвет» в фигме (Figma). Сделаю обзор инструмента и панели «Fill» справа. Также поговорим про стили и быструю замену цвета. Если хотите узнать, как поменять цвет иконки, фона, картинки, логотипа, текста, то вы попали по адресу. Посмотрите видео или воспользуйтесь статьёй ниже.
Как поменять цвет в фигме
Чтобы поменять цвет векторного элемента в фигме, выберите его и нажмите в правой панели, внизу надписи «Fill» на квадрат с цветом. Выберите новый цвет в цветовой палитре или напишите шестнадцатеричный код в поле для изменения цвета. Например, если впишите FFFFFF — это будет белый цвет.
Таким образом можно менять цвет элементов, которые вы создали с помощью стандартных инструментов фигмы (прямоугольники, круги, линии, многоугольники). Также векторных элементов в формате SVG (лого, иллюстраций, иконок).
Если нажмёте на надпись HEX, то можно выбрать другую цветовую модель (RGB, CSS, HSL, HSB).
Быстрая замена цвета с помощью пипетки в фигме
Чтобы активировать инструмент «Пипетка» в фигме, выберите какой-то элемент, нажмите на цвет и выберите иконку пипетки под цветовой палитрой. Также можно активировать её нажав на клавишу «i». Если кликните на другой цвет, то цвет элемента изменится.
Создание и использование стилей цвета в Figma
Что такое стили цвета в фигме и зачем они нужны?
Стили цвета в фигме позволяют сохранить какой-либо цвет для повторного использования в вашем проекте.
Как создать стиль цвета в фигме?
Чтобы создать новый стиль цвета в фигме, выберите нужный элемент с цветом. Нажмите в правой панели, напротив надписи «Fill» на иконку с четырьмя точками, затем на плюс.
Задайте имя цвета, например «Желтый».
При нажатии на пустую область, то вы увидите все созданные вами ранее стили цвета в правой панели.
Если хотите применить созданный ранее стиль к какому-то цвету, то выберите элемент и нажмите на иконку с четырьмя точками «Style» и выберите нужный стиль.
При изменении цвета в созданном ранее стиле, то элементы к которым был применён этот стиль также поменяют свой цвет. Для этого нужно нажать на иконку справа от стиля и изменить цвет.
Создание папок для стилей цвета в фигме
Чтобы переименовать имя стиля, нажмите на иконку рядом со стилем. Если хотите поместить стиль в папку, то нужно переименовать имя стиля следующим образом ПАПКА/ИМЯ СТИЛЯ.
Например если назовёте стиль «Теплые/Желтый», то создадите папку «Теплые» и туда переместится стиль цвета под названием «Желтый».
Также все раскладывается по папкам при нажатии на иконку «Style» напротив надписи «Fill» справой стороны.
Как использовать стили цвета в фигме повторно в других проектах
Чтобы использовать стили цвета в фигме повторно в других проектах, нажмите на вкладку «Accets», затем на иконку книги. В появившемся окне нажмите кнопку «Publish».
Затем нажмите на надпись «Pubsish styles only».
В следующем окне можно написить описание к этим стилям (не обязательно). Чтобы их опубликовать нажмите на кнопку «Publish styles».
Чтобы использовать опубликованные стили цвета в других ваших проектах, перейдите в новый проект и нажмите на «Accets» и иконку с книгой. В появившемся окне включите тумблер с названием того файла, в котором представлены цвета этих стилей.
После этого проверьте появились ли они справа, при изменении какого-либо цвета.
Как массово изменять цвет элементов в фигме
Если в вашем проекте много различных цветов, то их можно изменять массового с помощью функции «Selection colors». Эта функция появляется если вы выберите элементы или фрейм, с несколькими цветами.
Если изменить цвет в разделе «Selection colors», то цвет всех выбранных элементов изменится. Это удобно, поскольку вы можете сэкономить ваше время. Не нужно всё изменять для каждого элемента.
Как в фигме поменять цвет PNG иконки
Чтобы в фигме поменять цвет PNG иконки, логотипа или любого другого элемента можно воспользоваться плагином под названием «Color Overlay». Для его установки перейдите по ссылке. После этого сверху, справа нажмите на кнопку «Install».
Плагин хорошо работает для черных иконок. Для его активации выберите иконку или картинку, у которой хотите поменять цвет, перейдите в меню «Гамбургер», выберите вкладку «Plagins», затем нажмите на надпись «Color Overlay».
Внизу надписи «New color» нажмите на цвет и из цветовой палитры выберите новый цвет. Затем на кнопку «Colorize».
Важно примечание для иконок в фигме. Лучше использовать иконки в формате SVG. Тогда их можно будет перекрасить стандартным образом с помощью надписи «Fill». Недостаток формата PNG для иконок в том, что при увеличении будут видны пиксели. Векторый формат (SVG) устроен так, что там не будет пикселей и иконки можно увеличивать до бесконечности, без потери качества.
Заключение
Итак, вы этой статье и видео уроке вы узнали как работать с инструментом «Цвет» в фигме.