Цвета и градиенты в 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.

Как изменить цвет фона в Figma – GmodZ.ru

11 июля, 2022Рубрика: ИнтернетАвтор: Funtik

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

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

Как изменить цвет фона

В зависимости от того, выбрали ли вы “легкий” или “темный” тема, цвет фона вашего рабочего пространства будет либо светло-серым, либо почти черным. Изменение цвета фона рабочей области не изменит тему, но изменит цветовую схему текущей страницы. Любые новые страницы будут иметь цвет текущей страницы, а не темы.

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

1. Откройте новую рабочую область.
2. На панели инструментов справа выберите “Фон” раздел.
3. Используйте палитру цветов, чтобы изменить цвет фона.
4. Если хотите чтобы добавить линейки на фон, нажмите “Shift+R” чтобы включить их.

Как изменить цвет фона с помощью прототипа

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

Чтобы выбрать устройство и изменить цвет фона в Prototype, выполните следующие действия:

1. Очистите свой холст.
2. Перейти к разделу “Прототип” меню на правой боковой панели.
3. Выберите предпочитаемое устройство и модель. Окно предварительного просмотра покажет вам, как это будет выглядеть на холсте.
4. В разделе “Фон” выберите нужный цвет фона. Цвет фона появится позади устройства в окне предварительного просмотра.

Как создавать собственные наборы цветов в Figma

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

Вот как создавать собственные наборы цветов в Figma:

1. Создайте новую фигуру на холсте.
2. Выделите фигуру, затем на боковой панели выберите “Заполнить” раздел.
3. Нажмите на поле цвета, затем создайте нужный цвет использовать во всплывающем окне.
4. Справа от “Заполнить” разделе есть символ с четырьмя точками. Нажмите на нее, чтобы включить “Цветовые стили” модальное окно.
5. В правом углу модального окна нажмите кнопку “+” символ. Повторите эти шаги для любых других цветов, которые вы хотите создать.
6. Чтобы добавить свой собственный цвет, выберите слой, который вы хотите покрасить, и перейдите к “Fill” section.
7. Нажмите на четыре точки справа.

Красочный холст

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

Вы когда-нибудь пытались изменить цвет фона в Figma? Использовали ли вы какой-либо из методов, описанных в этой статье? Дайте нам знать в разделе комментариев ниже.

Как изменить цвет изображения в Figma?

Последнее обновление: 27 ноября 2022 г., 18:09

Есть несколько способов изменить цвет изображения в Figma. Первый способ — использовать инструмент цвета заливки. С помощью инструмента цвета заливки вы можете щелкнуть любой цвет в палитре, а затем щелкнуть изображение, чтобы изменить его цвет. Второй способ — использовать инструмент цвета обводки.

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

Чтобы изменить цвет изображения с помощью инструмента «Цвет заливки», сначала выберите инструмент «Цвет заливки» на панели инструментов. Затем щелкните любой цвет в палитре, а затем щелкните изображение, чтобы изменить его цвет.

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

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

Знакомство с цветными вкладками в Figma

Чтобы правильно изменить цвета и формы в своем дизайне, вы должны ознакомиться с вкладками, которые вы будете использовать, иначе вы потеряетесь! Вот две наиболее часто используемые цветные вкладки в Figma, которые вы должны знать:

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

Цветовая палитра

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

Цветовые стили Figma: руководство

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

Изображения и градиенты также могут использовать цветовые стили.

Разработка собственной цветовой схемы

Вот этапы разработки цветовой схемы:

Шаг №1: Начните с создания новой формы, затем нажмите кнопку «Заливка». Окуните слой в оттенок по вашему выбору.

Шаг № 2: Чтобы открыть модальное окно «Цветовые стили», нажмите кнопку с четырьмя точками.

Шаг №3: В правом верхнем углу окна «Цветовые стили» выберите знак «плюс» (+).

Шаг № 4: Выбрав имя для своего стиля, вы можете перейти к следующему шагу и нажать кнопку «Создать стиль».

3 причины, по которым дизайнеры используют Figma (вы тоже должны!)

Причина №1: Отличные прототипы.

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

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

Несмотря на то, что прототип Figma фантастический и простой в использовании, ему еще предстоит пройти долгий путь, прежде чем он станет совершенным. Другие инструменты прототипирования, такие как ProtoPie, inVision и Origami, предлагают более сложные анимации с временными шкалами и дополнительными функциями.

С другой стороны, Figma подходит для представления взаимодействий.

Причина № 2. Вы можете редактировать проекты онлайн через веб-браузер.

Браузерная природа Figma отличает его от других инструментов дизайна; все, что вам нужно для начала, — это доступ в Интернет и работающий веб-браузер.

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

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

Причина №3: ​​Отличные видеоуроки онлайн + это совершенно БЕСПЛАТНО!

Большинство, если не все, функций Figma описаны в бесплатном видео и текстовом руководстве, доступном в Интернете.

Они определяют каждую концепцию, доступную сегодня. Сетки, компоненты и различные инструменты, цвета и т. д. — все разбито на части и подробно объяснено. Мой любимый аспект заключается в том, что в дополнение к шаблонам дизайна UX они также предоставляют учебные пособия в виде видео и статей.

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

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

СОВЕТ ПРОФЕССИОНАЛА: Если вы не знакомы с Figma, мы рекомендуем вам не пытаться изменить цвет изображения. Это может привести к потере важных данных изображения.

Заключение

Использование ярких оттенков имеет решающее значение для создания привлекательного веб-сайта или мобильного приложения. Широкий набор опций Figma означает, что в программе есть все оттенки и тона, которые вам когда-либо понадобятся для создания потрясающих веб-сайтов. Кроме того, вы можете создавать свои собственные цвета, что дает вам практически неограниченное разнообразие.

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

Энтузиаст технологий и соучредитель Women Coders SF.

Как изменить цвет фона в Figma

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

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

Как изменить цвет фона

В зависимости от того, какую тему вы выбрали — «светлую» или «темную», цвет фона вашего рабочего пространства будет светло-серым или почти черным. Изменение цвета фона для вашего рабочего пространства не изменит тему, но изменит цветовую схему текущей страницы. Любые новые страницы будут иметь цвет текущей страницы, а не темы.

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

1. Откройте новую рабочую область.
2. На панели инструментов справа выберите раздел «Фон».
3. Используйте палитру цветов, чтобы изменить цвет фона.
4. Если вы хотите добавить линейки на фон, нажмите «Shift+R», чтобы включить их.

Как изменить цвет фона с помощью Prototype

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

Чтобы выбрать устройство и изменить цвет фона в Prototype, сделайте следующее:

1. Очистите свой выбор на холсте.
2. Перейдите в меню «Прототип» на правой боковой панели.
3. Выберите предпочитаемое устройство и модель. Окно предварительного просмотра покажет вам, как это будет выглядеть на холсте.
4. В разделе «Фон» выберите нужный цвет фона. Цвет фона появится позади устройства в окне предварительного просмотра.

Как создавать собственные наборы цветов в Figma

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

Вот как создавать собственные наборы цветов в Figma:

1. Создайте новую фигуру на холсте.
2. Выделите фигуру, затем на боковой панели перейдите в раздел «Заливка».
3. Щелкните поле цвета, затем создайте цвет, который хотите использовать, во всплывающем окне.
4. Справа от раздела «Заполнить» есть символ с четырьмя точками. Нажмите на него, чтобы включить модальное окно «Цветовые стили».
5. В правом углу модального окна нажмите на символ «+». Повторите эти шаги для любых других цветов, которые вы хотите сделать.
6. Чтобы добавить собственный цвет, выберите слой, который вы хотите покрасить, и перейдите в раздел «Заливка».
7. Нажмите на четыре точки справа.