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.
КАК ПОМЕНЯТЬ ЦВЕТ КАРТИНКИ В ФИГМЕ
Чтобы поменять цвет картинки в Figma, необходимо сначала выбрать нужный объект. Это можно сделать, выделив его на холсте или в списке слоев.
После того, как нужный объект выбран, можно перейти на панель свойств и выбрать вкладку «Fill». В этой вкладке можно выбрать цвет для заполнения объекта, используя цветовую палитру или введя код нужного цвета.
Если нужно поменять цвет градиента или шаблона на объекте, можно выбрать соответствующую вкладку на панели свойств и настроить параметры соответствующим образом.
Также можно быстро поменять цвет объекта, используя сочетание клавиш «Command + Shift + H» (Mac) или «Ctrl + Shift + H» (Windows) и выбрав нужный цвет в открывшемся меню.
Если нужно поменять цвета нескольких объектов одновременно, можно выделить их на холсте или в списке слоев, затем открыть панель свойств и настроить параметры цвета для всех выделенных объектов одновременно.
Как изменить цвет объекта — дизайн туториал в Figma #дизайн #фигма
Как изменить цвет картинки в фигме без плагинов #figma #webdesign #вебдизайн #обучение
Как изменить цвет PNG иконки в Figma
Довольно популярный вопрос, как у новичка, так и у профессионала — как же в этой долбанной фигме пенять цвет png иконки?
Да, действительно, поменять цвет растровой иконки совсем не просто, ведь фигма у нас векторная и приспособлена использоваться SVG иконки, а там все меняется довольно быстро и просто. Но пнг — это растр, фигма не дружит с растром, но способ наложить другой цвет на иконку есть. Он не такой простой, как в фотошопе, но тем не менее существует
Сменил цвет черной png иконки на красный
Берешь пнг иконку, копируешь ее, создаешь из двух слоев маску. У верхнего слоя меняешь цвет на тот, который тебе нужно — наслаждаешься.
Даже можешь создать градиентную заливку, заливку фото — все что хочешь можно сделать с цветом пнг иконки таким способом.
Вот такой простой или не очень простой способ менять цвет у растровых элементов с прозрачным фотом в Фигма.
5 полезных плагинов в Figma: работа с текстом и изображениями
Как быстро сделать красивые векторные фигуры, перекрасить картинку и оттипографить текст.
Иллюстрация: Оля Ежак для Skillbox Media
В Figma очень удобно устроена работа с текстом и изображениями, но некоторые вещи приходится делать вручную — а это обычно долго. Например, чтобы просто перекрасить PNG-картинку, вам придётся делать отдельную слой-маску. Избавиться от этой рутины вам помогут плагины, которые расширяют функционал графического редактора.
Рассказываем, какие плагины для Figma помогут вам быстрее приводить текст в порядок и работать с картинками.
Typograff
Этот плагин поможет быстро оттипографить текст в документе — он автоматически расставит неразрывные пробелы после предлогов и союзов, поменяет кавычки на правильные «ёлочки» и «лапки».
Как пользоваться
- Скачайте плагин по ссылке.
- Зайдите в Figma, нажмите правой кнопкой мыши на текстовый модуль, в выпадающем меню перейдите в пункт Plugins и выберите Typograff.
- Укажите, какие кавычки вы хотите использовать, и нажмите на кнопку «Оттипографить». Вместе с новыми кавычками в тексте расставятся неразрывные пробелы.
Color Overlay
С помощью этого плагина можно быстро перекрасить PNG-картинку в однотонный цвет без использования слой-масок. Также через Color Overlay можно убрать из изображения любой цвет.
Как пользоваться
- Скачайте плагин по ссылке.
- Зайдите в Figma, нажмите правой кнопкой мыши по PNG-картинке, в выпадающем меню перейдите в пункт Plugins и выберите Color Overlay.
- Откроется окно плагина. В верхнем поле укажите, каким цветом нужно залить картинку, а в нижнем — какой цвет нужно убрать.
- Нажмите Colorize, и изображение изменится.
Spectrum
Меняет палитру любого изображения. Например, поможет поменять цвета красной картинки на синий или превратить голубую фотографию моря в фиолетовую.
Как пользоваться
- Скачайте плагин по ссылке.
- Зайдите в Figma, нажмите правой кнопкой мыши по картинке, в выпадающем меню перейдите в пункт Plugins и выберите Spectrum.
- В появившемся окне выберите количество цветов в новой палитре и их яркость. Также вы можете изменить режим наложения цветов: shades (оттенки) hue (насыщенность) или сделать собственный.
- Нажмите Apply Palette, и изображение изменится.
Этот плагин — условно бесплатный. В Figma вы можете изменить только три картинки с бесплатного аккаунта. Полная версия стоит 29 долларов.
Веб-версия сервиса доступна бесплатно без покупки.
Spirous
Математически генерирует абстрактные фигуры, которые будут хорошо работать как декоративные элементы сайта. А если воспользоваться дополнительными плагинами, то из фигур Spirous можно собрать интересный паттерн.
Как пользоваться
- Скачайте плагин по ссылке.
- Зайдите в Figma, нажмите правой кнопкой мыши по макету, в выпадающем меню перейдите в пункт Plugins и выберите Spirous.
- В появившемся окне выберите понравившуюся фигуру.
- Чтобы изменить фигуру, наведите курсор на её изображение и кликните на карандаш в правом нижнем углу.
- Чтобы добавить фигуру на макет, кликните по ней в окне плагина.
Image tracer
Превращает растровые картинки в векторные. Хорошо работает только с однотонными изображениями, где чётко можно разглядеть границы для вектора.