Приветствую, дорогие читатели! Помните, как мы создавали нашу первую кнопку? Синий прямоугольник, белый текст — уже смотрелось неплохо. Но мир дизайна гораздо красочнее! Цвет — это не просто «красиво». Это язык, который сообщает пользователю: «Это кнопка», «Здесь заголовок», «А это — предупреждение».
Сегодня мы будем волшебниками, в чьих руках цвет оживает. Мы научимся не просто красить элементы, а управлять цветом осознанно и эффективно.
Часть 1: Основа основ — сплошная заливка
Допустим, мы хотим перекрасить нашу старую кнопку из синей в сочный зеленый.
- Выделите объект (наш прямоугольник кнопки).
- Смотрите на правую панель — раздел «Fill» (Заливка).
- Кликните по цветному квадратику. Откроется панель выбора цвета.
Перед вами — целый арсенал:
- Палитра: Выбирайте оттенок мышкой.
- Поле ввода HEX-кода: Вот где рождается точность! Если у вас есть фирменный цвет компании (например, #0EBB15), просто введите его сюда.
- Прозрачность (Opacity): Делайте цвет полупрозрачным, сдвигая ползунок. Идеально для затемняющих фонов и тонких акцентов.
Волшебство случилось! Ваша кнопка стала зеленой. Но что, если цвет нужно повторить еще для 50 элементов? Не запоминать же HEX-код! Об этом — ниже.
Часть 2: Пипетка (Eyedropper) — ваш волшебный посох
Вы увидели идеальный цвет на картинке, в логотипе или в другом макете. Вам не нужно гадать его код! Есть способ проще.
- Выделите объект, который хотите покрасить.
- Откройте панель заливки («Fill»).
- Нажмите на значок пипетки (Sample color). Ваш курсор превратится в пипетку!
- Наведитесь на любой нужный цвет (даже на картинку или в другом фрейме) и щелкните.
Цвет скопирован! Это самый быстрый способ поддерживать цветовую гармонию, подхватывая оттенки из фотографий или других элементов дизайна.
Часть 3: Стили цветов — суперсила для поддержания порядка
Представьте: у вас 20 экранов, и везде используется фирменный синий цвет. А заказчик говорит: «Давайте сменим синий на фиолетовый». Если вы красили каждый элемент вручную, вам придется потратить час на замену. А если вы использовали Стили цветов — вам нужно изменить цвет всего в одном месте!
Как создать стиль цвета:
- Покрасьте объект в нужный вам цвет.
- В панели «Fill» найдите значок четырёх точек •••• и затем нажмите на плюсик в открывшемся меню возле точек.
- Дайте стилю понятное имя, например, «Заглавный цвет».
- Нажмите «Create style».
Как использовать стиль:
Теперь, чтобы покрасить любой другой объект в этот цвет, вы просто выбираете его из выпадающего списка стилей в том же меню. Больше не нужно искать HEX-код!
Это основа масштабируемого дизайна. Создавайте стили для основных цветов (Primary, Secondary), для текста, для фона и для состояний (Error, Success, Warning).
Часть 4: Градиенты — уровень «Профи»
Градиенты добавляют глубину, объем и современность. В Figma они создаются за пару кликов.
В той же панели «Fill» выберите не «Solid», а тип градиента:
- Linear (Линейный): Цвет плавно перетекает из одной точки в другую по прямой.
- Radial (Радиальный): Цвет расходится кругами из центра, как от фонарика.
- Angular (Угловой): Создает эффект «цветового конуса».
- Diamond (Ромбовидный): Градиент в форме ромба.
Как настроить:
- Выберите, например, Linear Gradient.
- Появится полоска с точками («стопами»). Каждая точка — это цвет.
- Чтобы добавить цвет: кликните в любом месте полоски.
- Чтобы изменить цвет стопа: кликните на него и выберите цвет из палитры или пипеткой.
- Чтобы удалить цвет: перетащите стоп вниз, за пределы полоски.
Поиграйте с углом наклона и положением стоп — вы удивитесь, какие красивые эффекты можно получить!
Резюме:
- Заливка (Fill) — для базового окрашивания.
- Пипетка (Sample color) — чтобы мгновенно скопировать любой цвет.
- Стили цветов — ваш главный инструмент для порядка и скорости.
- Градиенты — чтобы добавить дизайну современности и объема.
Задание для вас: Возьмите свою старую кнопку. Перекрасьте ее с помощью пипетки, взяв цвет с любого сайта. Затем создайте из этого цвета Стиль. И, наконец, сделайте из сплошной заливки легкий градиент!
Ставьте «палец вверх», если теперь вы чувствуете себя повелителем цвета в Figma, и пишите, о какой следующей суперспособности дизайнера вы хотите узнать!