Figma — популярный веб-редактор векторной графики и инструмент для создания прототипов. Он используется дизайнерами UI и UX для проектирования и создания прототипов пользовательских интерфейсов и опыта. Figma позволяет дизайнерам проектировать интерфейсы в браузере, что обеспечивает лучшую совместную работу в процессе проектирования.
Одной из многих замечательных функций Figma является возможность для пользователей полностью настраивать дизайн, включая установку определенных фоновых цветов с помощью шестнадцатеричных цветовых кодов. Это позволяет дизайнерам точно соответствовать цветам бренда и руководствам по стилю.
Знание кодов фоновых цветов в Figma важно для создания согласованных дизайнов и стилей. В этой статье будет представлен обзор того, как находить и использовать коды фоновых цветов в Figma.
Есть несколько способов найти коды цветов для фоновых цветов в Figma:
Самый простой способ — использовать инструмент палитры цветов в Figma. Чтобы открыть палитру цветов, щелкните значок в виде ведра с краской на панели инструментов в правой части экрана. Это откроет палитру, в которой вы можете визуально выбрать нужный цвет фона.
После того, как вы выбрали цвет, в нижней части всплывающего окна палитры цветов отобразится шестнадцатеричный код. Например, если вы выберете синий цвет фона, будет показан код #0816F2. Затем вы можете использовать этот точный код в своих проектах Figma для поддержания согласованности цветов.
Вы также можете найти коды цветов, проверив свойства заливки любой фигуры или объекта в Figma. Для этого:
Это позволяет вам легко получать коды, не открывая палитру цветов.
Панель «Активы» в Figma позволяет вам создавать центральную библиотеку цветов, стилей текста, значков и многого другого, к которой можно получить доступ из файлов и проектов.
Чтобы найти коды цветов через панель «Активы»:
Это полезно, когда вы хотите сослаться на стандартизированный цвет из своего руководства по стилю.
После того, как у вас есть шестнадцатеричный код, использовать его просто. Есть несколько способов применить цвет фона:
Откройте палитру цветов, вставьте шестнадцатеричный код в поле внизу и нажмите Enter. Это автоматически выберет этот конкретный цвет для использования в качестве фона.
Выберите слой объекта или фигуры, откройте свойство «Заливка» на правой панели свойств, щелкните квадрат цвета рядом с RGB и вставьте шестнадцатеричный код в поле. Нажмите Enter, чтобы изменить цвет фона.
Это точно соответствует нужному цвету, сохраняя единообразие фонов во всех файлах и проектах Figma.
Вот несколько советов по работе с кодами цветов фона в Figma:
Использование точных цветовых кодов вместо визуального выбора цветов дает вам больше контроля и согласованности. Это помогает оптимизировать совместную работу и гарантировать, что дизайн будет выглядеть и ощущаться правильно.
Вот некоторые распространенные фоновые цвета, используемые в дизайнах Figma, и соответствующие им шестнадцатеричные коды:
| Цвет | Шестнадцатеричный код |
|---|---|
| Белый | #FFFFFF |
| Черный | #000000 |
| Серый | #8E8E93 |
| Красный | #FF564F |
| Оранжевый | #FF9F1C |
| Желтый | #FFCC4D |
| Зеленый | #3DCC91 |
| Синий | #2D9CDB |
| Фиолетовый | #9B51E0 |
| Розовый | #F45FA9 |
Это всего лишь несколько примеров цветов и кодов, которые обычно используются в дизайне Figma. Палитра цветов и панель «Активы» предоставляют доступ ко многим другим предопределенным цветам, которые соответствуют этому формату шестнадцатеричного кода.
Использование точных шестнадцатеричных кодов цветов для установки цветов фона в Figma обеспечивает согласованность и точность ваших проектов. Инструмент выбора цвета, проверка свойств заливки объекта и использование панели «Активы» — все это простые способы поиска и использования цветовых кодов.
Сохранение основных фирменных цветов, четкое обозначение кодов и ведение справочного листа позволяют быстро воспроизводить стили в разных проектах. Коды фоновых цветов дают больше контроля над внешним видом и ощущением дизайнов по сравнению с визуальным выбором.
В целом, изучение того, как находить и использовать коды фоновых цветов, является ценным навыком для любого пользователя Figma. Он позволяет вам создавать прекрасно согласованные интерфейсы и опыт.
| Цвет | Шестнадцатеричный код | Цвет | Шестнадцатеричный код |
|---|---|---|---|
| Белый | #FFFFFF | Черный | #000000 |
| Серый | #8E8E93 | Красный | #FF564F |
| Оранжевый | #FF9F1C | Желтый | #FFCC4D |
| Зеленый | #3DCC91 | Синий | #2D9CDB |
| Фиолетовый | #9B51E0 | Розовый | #F45FA9 |
Вот пример использования шестнадцатеричных кодов для точной установки цветов фона в Figma:
В этом примере для каждой фигуры свойство Fill установлено на точный шестнадцатеричный код цвета. Это позволяет цветам быть идеально согласованными по всему дизайну.
Использование кодов из панели sharedAssets обеспечивает последовательное соответствие розового (#F45FA9) и зеленого (#3DCC91) цветов. Такие названия, как «Brand Blue», помогают быстро идентифицировать стандартные цвета.
Точное использование цветовых кодов дает больше контроля над визуальным дизайном в Figma. Это гарантирует, что цвета бренда точно воспроизводятся в любом количестве проектов и файлов.
Развитие четкого понимания того, как находить и использовать шестнадцатеричные коды фонового цвета в Figma, позволяет дизайнерам создавать прекрасно согласованные пользовательские интерфейсы с правильным внешним видом и ощущением. Это очень ценный навык для UI/UX и визуальных дизайнеров.