Как сохранить палитру из фото в Figma и Canva
Пошагово переносим цвета, извлечённые из фото, в Figma (Color styles и переменные) и Canva (бренд-набор): HEX-коды, названия, порядок.
Инструкции · · 2 мин чтения
Чтобы перенести палитру из фото в Figma или Canva, извлеките цвета в генераторе палитры, скопируйте HEX-коды кнопкой «Копировать все HEX» и создайте из них стили: в Figma — Color styles или переменные, в Canva — цвета бренд-набора. Работа занимает 2–3 минуты.
Шаг 1. Получите HEX-коды
- Загрузите фото в генератор.
- Выберите количество цветов — для фирменного набора обычно хватает 5–6.
- Нажмите «Копировать все HEX». В буфере окажется строка вида
#DE7C56, #FA9B59, #867569, #FEE0A4, #4E4747, #1E1A1D.
Шаг 2. Figma: Color styles
- Нарисуйте шесть прямоугольников.
- Каждому задайте Fill — вставьте HEX в поле цвета.
- Выделите прямоугольник, в панели Fill нажмите на значок стилей (четыре точки) → «+» → дайте имя.
- Называйте по роли, а не по цвету:
bg/base,text/primary,accent/main. Тогда смена палитры не потребует переименований.
Figma: переменные
В новых версиях удобнее Variables: Local variables → Create collection → Color. Создайте переменные color/accent, color/surface и т. д. и привяжите к ним слои. Переменные поддерживают режимы — например, светлую и тёмную тему.
Шаг 3. Canva: цвета бренда
- Откройте раздел «Бренд» (Brand Kit) — он доступен в платных тарифах Canva.
- В блоке «Цвета бренда» нажмите «+» и вставьте HEX каждого цвета.
- Создайте палитры по назначению: «Основные», «Акценты», «Фоны».
На бесплатном тарифе цвета можно вводить вручную через «Цвет» → «+» → поле HEX: последние использованные цвета Canva запоминает в документе.
Как назвать цвета
| Роль | Пример имени | Что красить |
|---|---|---|
| Основной фон | bg/base |
Фон страниц и слайдов |
| Поверхность | bg/surface |
Карточки, плашки |
| Текст | text/primary |
Заголовки и основной текст |
| Акцент | accent/main |
Кнопки, ссылки, выделения |
| Второй акцент | accent/alt |
Графики, иконки |
Как распределить эти роли по площади — в статье правило 60-30-10.
Частые вопросы
Можно ли импортировать палитру в Figma файлом?
Стандартного импорта палитры из текста в Figma нет, но HEX вставляется в любое поле цвета, так что шесть цветов переносятся вручную за минуту. Для больших наборов есть плагины импорта токенов.
Сохраняются ли названия цветов из генератора?
Генератор показывает ближайшее название («Терракотовый», «Песочный») как подсказку. В Figma лучше называть цвета по роли в интерфейсе.
Подойдёт ли палитра для печати?
HEX описывает цвет на экране. Для печати переведите цвета в CMYK или подберите близкие по каталогу Pantone и сделайте пробный оттиск.