Как поменять цвет фона в фигме
Перейти к содержимому

Как поменять цвет фона в фигме

  • автор:

Как изменить цвет фона в рабочей области Figma?

Figma — это редактор векторной графики и инструмент проектирования, используемый в основном веб-дизайнерами и front-end разработчиками. Программа доступна для macOS, Windows и Linux.

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

Чтобы изменить цвет фона в рабочем пространстве Figma, просто нажмите на значок «гамбургер» в левом верхнем углу экрана и выберите «Параметры».

ПРО СОВЕТ: Если вы не знакомы с Figma Workspace, мы рекомендуем вам обратиться за помощью к профессионалу, прежде чем пытаться изменить цвет фона. Изменение цвета фона в Figma Workspace может быть непростым делом, и если сделать это неправильно, то можно получить рабочее пространство, которое трудно читать или использовать.

В окне «Параметры» выберите «Внешний вид» на левой боковой панели. Здесь вы можете выбрать любой цвет для фона рабочего пространства. Просто нажмите на образец цвета рядом с «Цвет фона» и выберите желаемый цвет.

Выбрав нужный цвет фона, нажмите «OK», чтобы сохранить изменения и выйти из окна «Параметры».

Заключение:

Вот и все! Изменение цвета фона в рабочем пространстве Figma — это быстрый и простой способ настроить среду под свои нужды. Попробуйте это сегодня!

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

Цвет — важная часть веб-дизайна, которая оживляет вашу страницу и мобильные приложения. 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

Пошаговая инструкция, которая поможет грамотно поменять цвета в интерфейсе.

Meery Mary для Skillbox Media

Вячеслав Лазарев

Вячеслав Лазарев
Редактор. Пишет про дизайн, редактирует книги, шутит шутки, смотрит аниме.

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

Рассказываем и показываем, как сделать тёмную тему вашего приложения.

Подготовка

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

Создайте стили цветов с помощью функции Style. Это поможет вам менять одинаковые цвета сразу на всех макетах. Рекомендуем в названия цветов для светлой и тёмной темы добавлять слова light и dark соответственно — это поможет избежать путаницы. Также в названиях важно отражать функцию цвета, чтобы случайно не изменить цвет фона вместо цвета плашек. Например: light-link-color и dark-link-color; light-background и dark-background; light-text-color и dark-text-color.

О работе с функцией Style — в статье «Как упростить работу в Figma»

Установите плагин Contrast. Одни и те же цвета на тёмном и светлом фоне работают по-разному, поэтому при проектировании тёмной темы важно следить за контрастом. В Figma это можно делать с помощью плагина Contrast:

  • Перейдите на страницу плагина и нажмите Install.
  • Зайдите в Figma и выделите любой объект на макете.
  • Нажмите в верхнем левом углу на иконку , в выпадающем меню перейдите в пункт Plugins и нажмите на Contrast.
  • Откроется окно Contrast, которое показывает контраст между выделенным объектом и фоном. Если у фона несколько цветов, нажмите в окне Contrast на переключатель Enable Smart Sample for layer.

Согласно стандарту доступности WCAG, минимальное значение контраста — 7:1. Дизайнеры Google рекомендуют между текстом и фоном добиваться контраста 15,8:1.

Фон

Цвета фона и плашек определяются структурой документа: чем ближе модуль к пользователю, тем светлее он должен быть. Значит, цвет фона всегда самый тёмный.

Apple рекомендует использовать в iOS чёрный цвет фона, чтобы контраст элементов интерфейса был выше. Google рекомендует использовать не до конца чёрный цвет #121212 , чтобы снизить нагрузку на глаза.

Цвет фона выбирайте в зависимости от задачи. Например, если на сайте много текста, то прочесть его весь на чёрном фоне будет сложно:

Быстрый способ поменять фон во всём макете

  • Зажмите Ctrl (⌘) и левой кнопкой мыши выделите на панели слоёв все фреймы с макетами приложения.
  • На панели настроек в блоке Layer отобразится название вашего фонового цвета. Нажмите на иконку , чтобы открепить стиль. Если у вас нет стилей, переходите в пункт 3.
  • В появившемся блоке Fill вместо текущего цветового кода укажите нужный цвет: чёрный #000000 , рекомендуемый Google #121212 или любой другой.
  • В параметре Fill нажмите на иконку и сохраните фон как стиль. Назовите его dark-background-color.

Плашки

Цвет плашек зависит от «высоты» — чем ближе плашка к пользователю, тем она светлее.

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

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

У приложения для Android может быть девять уровней с разными оттенками серого. Google предлагает менять цвет плашки наложением белого цвета определённой непрозрачности:

Как высветлить блок по рекомендациям Google

  • Выделите любую плашку на макете, после чего на панели настроек в блоке Fill укажите ей цвет основного фона.
  • На панели настроек в блоке Fill нажмите на плюс, чтобы добавить ещё один цвет.
  • Нажмите на образец дополнительного цвета, в появившейся палитре сделайте его белым и укажите уровень непрозрачности, соответствующий рекомендациям Google.

Быстрый способ поменять цвет плашек в приложении

  • Зажмите Ctrl (⌘) и левой кнопкой мыши выделите на панели слоёв все фреймы с макетами приложения.
  • На панели настроек в блоке Selection Colors найдите цвет, которым залиты ваши плашки. Нажмите на иконку напротив цвета, чтобы открепить стиль. Если у вас нет стилей, переходите в пункт 3.
  • В блоке Selection Colors вместо цвета плашек укажите серый цвет, например, как у плашек Apple — #1C1C1E .
  • В параметре Fill нажмите на иконку и сохраните фон как стиль. Назовите его dark-boxed-color.

Цвет элементов интерфейса

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

Чтобы самостоятельно подобрать пару к цвету из светлой темы для тёмной, воспользуйтесь кодировкой HSL. Она состоит из трёх значений: тон, насыщенность, светлота.

Использование кодировки HSL в Figma

  • Выделите любой объект на макете.
  • На панели настроек в блоке Fill нажмите на цвет, чтобы открыть дополнительное меню.
  • В нижней части меню вместо RGB выберите HSL. Значение тона не меняйте, пробуйте уменьшать и увеличивать второй и третий параметры — насыщенность и светлоту. Универсальных формул по подбору цвета нет.

Если не получается подобрать цвета самостоятельно, воспользуйтесь системой Google с градацией от 900 до 50. Дизайнеры компании сделали удобный инструмент, который автоматически создаёт всю палитру. Для этого нужно ввести HEX-код вашего цвета — в Figma его можно найти в блоке Fill на панели настроек.

В качестве основного цвета в тёмной теме Google рекомендует использовать тональное значение 200. Но это только рекомендация — если этот тон вам не подходит, пробуйте соседние.

Как быстро поменять цвета элементов интерфейса в приложении

  • Зажмите Ctrl (⌘) и левой кнопкой мыши выделите на панели слоёв все фреймы с макетами приложения.
  • На панели настроек в блоке Selection Colors найдите нужный цвет. Нажмите на иконку напротив цвета, чтобы открепить стиль. Если у вас нет стилей, переходите в пункт 3.
  • В блоке Selection Colors замените цвет элементов интерфейса на другой, более светлый.
  • В параметре Fill нажмите на иконку и сохраните фон как стиль. Назовите его dark-ui-color.

Иконки

Для тёмной темы иконки лучше рисовать не контуром, а использовать заливку. Тогда они сохранят узнаваемость и не будут выглядеть странно:

Меняем иконку под тёмную тему

Для примера посмотрите, как изменить простую иконку щита с галочкой.

1. Зажмите клавишу Ctrl (⌘) и дважды кликните по контуру, чтобы открылся векторный редактор:

2. Нажмите на иконку на панели инструментов, удалите весь внутренний контур — выделяйте каждый узел иконки и нажимайте клавишу Delete. Когда контур удалён, нажмите Done на панели инструментов:

3. Сейчас у щита не видно галочки. Чтобы её вернуть, выделите щит и галочку на панели слоёв, затем на панели инструментов нажмите на иконку и в выпадающем меню выберите :

Для большинства иконок достаточно удалить только внутренние контуры, но бывают и более сложные случаи. Например, здесь нужно сохранить разделитель между кошельком и застёжкой, чтобы не потерять узнаваемость формы:

А у этой иконки домика дизайнеры Apple дорисовали тень от крыши, чтобы тот не казался монолитным кирпичом:

Пример приложения

В качестве примера разберём макет банковского приложения, который сделал дизайнер Иван Павлов:

Начнём с фона. Текста в приложении не очень много, поэтому здесь можно использовать чёрный цвет:

Плашки лучше сделать по рекомендациям Apple, так как приложение спроектировано под iPhone. Здесь можно ограничиться самым тёмным цветом — #1C1C1E . Также стоит сразу покрасить чёрный текст в белый:

Сейчас серый текст недостаточно контрастен. Чтобы это исправить, нужно сделать серый текст светлее, чтобы коэффициент контраста был равен 7:1 или выше:

Теперь нужно проверить контраст элементов в тёмном интерфейсе. Цвета для градиентов можно не трогать, так как они выступают в роли плашек и сами по себе уже достаточно контрастируют с фоном:

Красный цвет не дотягивает до значения 7:1. А так как красный и зелёный должны работать в паре, менять их тоже нужно парой:

Для красоты в графе This month в зелёный и красный можно покрасить не только стрелки, но и числа рядом:

Теперь нужно поправить мелкие недочёты: поменять цвет текста на картах с белого на чёрный, поменять цвет логотипа Visa около Matt Hardy с синего на белый и адаптировать иконки. Тёмная тема приложения готова:

Полезные лайфхаки

Следуйте гайдлайнам. Используйте гайдлайны систем, в которых ваше приложение будет работать:

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

Автоматизируйте процесс. Плагин Dark Mode Magic может автоматически сделать из светлой темы тёмную.

Как пользоваться Dark Mode Magic:

  • Перейдите на страницу плагина и нажмите Install.
  • Зайдите в Figma и выделите любой макет приложения.
  • Нажмите на макете правой кнопкой мыши, в выпадающем меню перейдите в пункт Plugins и нажмите на Contrast.

Автоматический результат не всегда окажется идеальным. Будьте готовы к тому, что вам придётся доделывать мелкие детали самостоятельно.

Используйте насыщенность белого, чтобы выделять слова. У белого текста на чёрном фоне есть особенность — стандартное и полужирное начертания мало чем отличаются. Если вам важно выделить слово, сделайте обычный текст непрозрачным на 80%, а жирный — на 100%. Тогда разница будет очевиднее:

Попробуйте эффект «вдавливания». С помощью внутренней тени можно изобразить «вдавленный» объект.

  • Создайте фрейм серого цвета и поместите в него любую фигуру того же цвета. Важно, чтобы фон не был чёрным, иначе тени на нём будет не видно.
  • В блоке Effects на панели настроек нажмите плюс три раза. У появившехся эффектов вместо Drop shadow укажите Inner shadow.
  • У каждой тени укажите значения параметров, как на иллюстрации ниже. Чтобы открыть настроки тени, нажмите на иконку .

Получится вдавленная фигура. Этот эффект можно использовать как элемент стиля для фона или плашек:

Фирменные цвета в интерфейсе. Если клиент просит использовать в тёмной теме цвета своего бренда, сделайте это по методу Google. Только накладывать нужно не белый, а цвет фирменного стиля клиента:

Больше о тёмной теме

  • Как сделать тёмную тему для сайта — руководство по HTML, CSS, JavaScript и PHP
  • Тёмная тема: приёмы, которые помогут сделать качественный интерфейс

Самые полные и полезные инструкции, которые помогут вам освоить все функции графического редактора.

Код цвета в шестнадцатиричной системе, например #1C1C1E (серый).

Как перекрасить текст в цвет фона?

62c7f38f39e99084117596.png

Необходимо текст сделать разного цвета. Как это можно сделать?

  • Вопрос задан более года назад
  • 231 просмотр

Комментировать
Решения вопроса 1
Илья Деревянных @Ylia_dr Автор вопроса

Сделал маской. Только пришлось группу прямоугольников выгрузить как фото, после картинку поставить под текст и применить маску

Ответ написан более года назад

То есть фон должен быть виден только там, где текст? После решения это стало понятно.
Правильный вопрос — уже половина ответа)

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *