Как сделать заливку в фигме: Как сделать заливку для вектора в Figma |

Содержание

5 лайфхаков в Figma для работы с текстом, картинками и заливкой / Skillbox Media

Дизайн

#Руководства

4 мар 2022
0

Рассказываем, как использовать математику в Figma, сделать из картинки заливку и включить пиксельное отображение вектора.

Vkontakte

Twitter

Скопировать ссылку

Иллюстрация: Meery Mary для Skillbox Media

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

Редактор. Пишет про дизайн, редактирует книги, шутит шутки, смотрит аниме.

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

Рассказываем о пяти простых лайфхаках, которые помогут вам быстрее работать в Figma.

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

Самостоятельно сместить какой-либо объект на один пиксель или на 1% — не всегда просто. Чтобы не вычислять значение нужного размера или расположения в уме, сделайте это прямо в полях ввода — например, наберите «144+1%». Графический редактор сам всё посчитает, и свойства объекта тут же изменятся.

Таким образом можно изменить размер объекта, его расположение и непрозрачность. Математический расчёт работает во всех полях, где нужно вводить числа.

Если в Figma вы рисуете векторное изображение, которое потом хотите использовать как растровое, его внешний вид важно заранее проверить. Чтобы лишний раз не выгружать картинку и не редактировать её наугад, воспользуйтесь пиксельным режимом. В нём Figma будет отображать все объекты в растровом формате, и вы сможете заранее понять, как будут выглядеть мелкие детали вашего изображения.

Чтобы включить пиксельный режим просмотра, нажмите сочетание клавиш Ctrl + Alt + Y (на macOS — Ctrl + Y). Либо нажмите на иконку , затем View и выберите Pixel Preview.

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

Кстати, в этом же меню из любого цвета можно сделать стиль.

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

Как добавить изображение в стили

Добавьте на макет любое изображение и выделите его.
Перейдите в пункт Fill («Заливка») и нажмите на иконку .
В появившемся меню нажмите на плюсик.
Назовите стиль и сохраните.
Чтобы использовать стиль, в пункте Fill нажмите на иконку из кружков и выберите нужный шаблон. Стиль можно выбрать и для обводки в пункте Stroke — он находится под Fill.

Больше о Figma

Самоучитель по Figma

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

Vkontakte

Twitter

Скопировать ссылку

Figma с нуля до PRO

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

Узнать про курс

Учись бесплатно:
вебинары по&nbspпрограммированию, маркетингу и&nbspдизайну.

Участвовать

Обучение: Figma с нуля до PRO
Узнать больше

Adobe представила виртуальную гримёрку Дэвида Боуи
28 дек 2022

Яёи Кусама сделала коллаборацию с Louis Vuitton
27 дек 2022

Дизайнеры представили новую схему московского метро 2030 года
26 дек 2022

Понравилась статья?

Да

Заливки и границы.

Основы UI дизайна

Как мы указали в первой статье этой серии, большая часть UI дизайна заключается в перемещении прямоугольников. Итак, давайте начнем со скромного прямоугольника. В большинстве инструментов дизайна вы можете нарисовать его, нажав клавишу R.

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

На заре Sketch у прямоугольника был только контур, и вы могли выборочно отключать его части. Но, к счастью, теперь это в прошлом.

Недавно я снял видео, пытаясь воссоздать дизайн в версии Sketch почти 10-летней давности, и поверьте мне, сейчас проще начать работать ?

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

Простая заливка – это еще одно название фона объекта. Это может быть цвет, градиент или фотография. У каждого из них также может быть разный уровень непрозрачности (прозрачности) от 0 (полностью прозрачный – невидимый слой) до 100 (полностью непрозрачный слой).

Большинство современных инструментов дизайна позволяют настраивать прозрачность с помощью цифровых клавиш на клавиатуре. Просто выберите объект и нажмите 1 (для 10%), 2 (для 20%) и так далее. Нажатие 0 переключает непрозрачность между 0% и 100% (поэтому иногда нужно дважды нажать клавишу).

Если у объекта нет заливки, а также границы или эффекта, он не будет виден в интерфейсе, так как для этого требуются определяющие характеристики. Однако вы по-прежнему сможете выбрать его, переместить и изменить. Он также останется в списке слоев.

Типы заливки

Есть три основных типа заливки и вариант без заливки. Таким образом, у вас может либо НЕ БЫТЬ ЗАЛИВКИ, либо может быть фон с одним цветом, градиентом или изображением.

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

Укладка заливок в стек

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

Мультиградиент

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

Однако наиболее распространенные заливки, которые вы, вероятно, будете использовать – это цвет и градиент.

Границы

Границы – второй по популярности стиль после заливки, который может иметь объект.

Граница – это линия, огибающая наш объект. Она может проходить внутри (внутренняя граница), снаружи (внешняя граница) или между ними (по центру). Помните, что только внутренняя граница визуально не увеличивает объект.

В приведенном выше примере размер поля составляет 60 x 60 точек. Граница толщиной 10 точек. На среднем изображении она увеличивает нашу рамку на 5 точек с каждой стороны. В третьем примере граница полностью выходит наружу, увеличивая прямоугольник на 10 точек во всех направлениях.

Стили границы

Граница может иметь разную толщину (ширину) в точках и может быть пунктирной линией из точек или штрихов. Мы также можем заполнить ее как цветом, так и градиентом.

Большинство инструментов дизайна позволяют вам также изменять окончания и стыки ваших линий.

Концы могут быть открытыми, плоскими или закругленными, а стыки могут быть острыми, закругленными или угловыми.

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

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

Если вы хотите узнать больше о фигурах и дизайне интерфейса в целом, ознакомьтесь с нашей ? книгой www.designingui.com – там также есть бесплатные главы.

Источник: UXPUB

Изучите основы Figma, часть 7: режим заливки, обводка и эффекты

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

Позвольте мне показать вам, как это работает, используя нашу предыдущую форму.

Добавить заливку:

Выберите слой формы
Перейдите к , заполните раздел на боковой панели.

В разделе заливки щелкните серый квадрат, чтобы открыть палитру цветов.
Переместите точку круга палитры цветов, чтобы выбрать цвет, или добавьте код цвета в поле ввода Hex.

В моем случае я изменю цвет формы на ярко-синий.
(добавьте этот HEX-код: #1B9DE5 , чтобы он соответствовал цвету, который я использовал)

Добавить градиент:

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

Заменить сплошной градиент:

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

Появится раскрывающееся меню с различными эффектами градиента: линейным, радиальным, угловым и ромбовидным.

Выбор Линейный
Каждый градиент имеет как минимум два цвета. Чтобы изменить цвет, выберите один из квадратов двух цветов в контроллере градиента.

Добавить новый слой градиента:

Если вы хотите сохранить предыдущий сплошной цвет, создайте новый слой-заливку с градиентом.

После выбора слоя формы щелкните значок + в правой части области заливки.

Поверх первой заливки будет создан новый линейный градиент.

Выберите слой линейной заливки, чтобы отредактировать его.
Или отрегулируйте непрозрачность заливки в поле непрозрачности.

Изображение в качестве заливки:

Изображения в Figma относятся к типу Fill . Вы можете получить к ним доступ в разделе Заливка с эффектами градиента.

Новый слой заливки

Выберите слой формы
Щелкните значок + справа от раздела заполнения.
Выберите слой заливки
Нажмите линейный в верхнем левом углу палитры цветов
Выберите Изображение в раскрывающемся меню

К фигуре будет применено изображение-заполнитель в виде черно-белых галочек.

Нажмите кнопку Выбрать изображение в окне предварительного просмотра

Импортируйте изображение со своего компьютера и нажмите «Открыть », чтобы применить .
Изображение будет добавлено к вашей фигуре как Заливка .

Добавление обводки аналогично добавлению заливки цветом. он доступен через панель свойств.
Стокс имеет три основных варианта: цвет, размер и направление.

Давайте посмотрим, как добавить обводку к слою с фигурой, отредактировать ее цвет, размер и направление.

1- Создать обводку:

часть штриха находится под областью заливки.

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

2- Изменить цвет обводки:

Выберите цветной прямоугольник, чтобы активировать палитру цветов.
Добавьте цветовой код #ededed в поле Hex.

3- Увеличить размер штриха:

Поле размера находится под разделом цвета. его значение по умолчанию равно 1px.

Нажмите на поле размера и увеличьте его до 8px.

4- изменить направление хода:

Помимо размера штриха, щелкните внутри .
В раскрывающемся меню выберите Снаружи .

Эффекты также являются разделом панели свойств, применимым так же, как обводка или заливка.

Добавить тень:

Выберите слой формы
Щелкните значок + в правой части раздела эффектов
К слою будет применен эффект тени.
Нажмите на тень, чтобы открыть меню эффектов

У вас есть выбор между тенью и эффектом размытия

Выберите тень
Вы можете настроить параметры эффекта, щелкнув значок эффекта слева.

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

В следующем посте мы обсудим, как создавать смарт-объекты с компонентами и функциями стилей .

Этот пост является частью серии, посвященной основам проектирования с помощью Figma.
Пожалуйста, не забудьте подписаться и поделиться. Увидимся в следующем посте 😉

Заливка, обводка и расширенная обводка — Руководство Figma

Добавить в избранное

Узнайте больше о заливке и различных параметрах обводки в Figma

Руководство Figma

Инструмент дизайна фигма