Работа с цветом в Figma

Как устроена цветовая модель в Фигме? Эта программа позволяет видеть цвета в пяти цветовых моделях: HEX, HSB, HSL, CSS и RGB. Переключение между цветовыми моделями влияет только на то, как Фигма описывает цвета, но не влияет на то, как программа их визуализирует.

По умолчанию Фигма представляет значения цвета с помощью шестнадцатеричной модели. Что это значит? Это объединение красного, зеленого и синего цвета – наиболее часто используемых в цветовых моделях. Каждый цвет, отображаемый на мониторе или экране, будет состоять из различных количеств этих трех цветов. Сейчас мы рассмотрим, как на практике работать со цветами в Фигме, и как выглядит шестнадцатеричная модель.

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

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

Можно комбинировать цвета. Например, выбрав первый цвет красный, нажмите на вкладку в виде «+», после чего снова появится панель управления цветом, в которой вы можете выбрать другой цвет, например, синий. И напротив вкладка в виде «-» (минуса) удаляет выбранный цвет. Вкладка в виде глаза позволит вам отключить выбранный цвет без его удаления.

Также здесь будет доступна вкладка «Color Styles». В открывшейся панели вам будет доступен список стилей. В нем будут содержатся по умолчанию самые распространенный цвета, однако в данном меню можно создавать и добавлять новые цвета. Для этого также необходимо воспользоваться вкладкой в виде «+». Если у вас будет большой список цветов, то найти необходимый можно быстро при помощи поиска.

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

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

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

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

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

При использовании градиентов цветов, то есть постепенного перехода из одного цвета в другой, вам будут доступны несколько вариантов настроек.

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

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

Чтобы добавить изображение выберите пункт «Image», после чего кликните чтобы выбрать картинку с жесткого диска.

Теперь подробнее рассмотрим параметры добавления картинки. Вверху у вас будет выбрана функция «Fill». Это означает, что загруженная вами картинка будет вставлена в границы фигуры, и при движении одной из сторон объекта изображение будет растягиваться, но находится в области фигуры. «Fit» означает что при изменении фигуры картинка будет следовать в одну сторону за горизонтальной или вертикальной обводкой. «Crop» – функция изменения размера шейпа, и определение видимости вашего изображения в данном шейпе.

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

• Exposure – экспозиция. Это параметр регулирующий количество света.  
• Contrast – контраст. Здесь вы сможете сменить диапазон яркости и плотности изображения.
• Saturation – насыщенность. Это степень выражения цветов. Чем больше этот спектр, тем ярче они будут.
• Temperature – температура. При движении шкалы в право, преобладают холодные цвета (синий), а при движении вправо – теплые (желтый).   
• Tint – оттенок. При движении влево преобладает зеленый цвет, а при движении вправо красный.
• Highlights – освещение. При помощи этой настройки вы сможете приглушать темные или светлые тона, или сделать их еще более насыщенными.
• Shadows – тени. При помощи этой шкалы детали в тенях можно высветлить, или наоборот сделать более глубокие тени.  

Итак, мы рассмотрели, как работать со цветами в Фигме. Эти настройки распространяются на все элементы, с которыми можно работать в программе. Например, по такому принципу меняется цвет текста.

Полезные ссылки:

• Бесплатный видеокурс по Figma от GeekBrains;
• Профессиональный курс Figma 2.0 для новичков от SkillBox;
• Полноценный онлайн курс по веб-дизайну с нуля от SkillBox.