Как в Figma сделать зимний паттерн
Коротко и ясно рассказываем, как быстро добиться интересного эффекта для вашего проекта.
![](https://248006.selcdn.ru/main/iblock/7db/7db5be5d5f2091b8b2c5cdb4d0dca12b/2c2a23a5f3d15341473143b334b948e7.png)
![](https://248006.selcdn.ru/main/iblock/7db/7db5be5d5f2091b8b2c5cdb4d0dca12b/2c2a23a5f3d15341473143b334b948e7.png)
Иллюстрация: Оля Ежак для Skillbox Media
Figma — один из самых удобных инструментов для создания прототипов. Благодаря ему вы можете показать клиенту, как будет работать приложение, а разработчикам — интерактивные элементы. В этой инструкции рассказываем, как с помощью вариативных компонентов сделать зимний паттерн.
В этой инструкции мы используем компоненты. Инструкция вам поможет сделать паттерн, даже если вы не пользовались раньше этой функцией. Но лучше, если вы изучите её самостоятельно:
Этот способ рисования паттерна придумал дизайнер Mavi Design. Оригинальную инструкцию на английском языке можно посмотреть на YouTube.
Основной компонент
- Создайте фрейм с размером 80×80 пикселей, в боковой панели настроек в блоке Frame снимите галочку с Clip content, а в блоке Fill — укажите серый цвет заливки.
- Внутри фрейма создайте овал с размером примерно 30×92 пикселя и белой заливкой. Поверните его примерно на 161 градус. Нижняя и верхняя части овала должны немного выходить за пределы фрейма. Нижняя часть овала должна быть примерно по центру фрейма.
- Скопируйте овал и нажмите Shift + H, чтобы отразить его по вертикали. Поставьте этот овал так, чтобы внутри вашего фрейма получилась округлая галочка.
- Из получившегося фрейма сделайте компонент
и сразу проверьте его. Сделайте несколько копий компонента и поставьте их рядом друг с другом — получившийся паттерн должен быть похож на вышивку. Если вам не понравится результат, сразу поправьте это в компоненте.
- У компонента в блоке Fill уберите серую заливку — дальше она вам не понадобится.
Варианты компонента
- Выделите свой компонент с белой галочкой, сделайте его вариант
. Внутри нового варианта поменяйте цвет стрелочки с белого на красный.
- Чтобы не запутаться в будущем, сразу добавьте понятные названия для вариантов — в боковой панели в блоке Current variant. Назовите их Red и White — в зависимости от цвета.
- Скопируйте оба компонента и в том же блоке Current variant дайте им те же названия. Figma вас предупредит, что названия у компонентов одинаковые, — это нормально.
- Выделите весь свой комбайн, в боковой панели в блоке Properties нажмите плюсик и в выпадающем списке нажмите Variant. В появившемся окне введите название для нового свойства — Flip, а его стандартное значение — No.
- В копиях вариантов выделите галочки из кругов и нажмите Shift + V, чтобы отразить их по горизонтали. Затем у каждой копии в блоке Current variant в свойстве Flip укажите Yes.
Сборка паттерна
С помощью получившихся вариантов вы сможете собирать какие угодно узоры, и они почти всегда будут похожи на вышивку крестиком. Чтобы их использовать, просто копируйте компонент из комбайна и меняйте его свойства в боковой панели настроек.
При необходимости в оригинальных компонентах вы можете поменять цвета своего паттерна или добавлять эффекты — например, тени.
Для тренировки советуем скопировать эти паттерны — это поможет вам понять, как работает получившаяся система, и вам будет проще придумать что-то своё.
Вертикальный паттерн — 8 секций сверху, 30 сбоку. Квадратный паттерн — 20 секций сверху, 21 сбоку:
![](/upload/setka_images/08420929122022_accf102caaa970ce65d217b9ae9a8e9a57caa67c.jpg)
Если вам понадобится отразить паттерн по горизонтали, не забудьте указать у получившихся секций свойство Flip — Yes. Это нужно, чтобы ваш узор с вышивкой не сломался:
![](/upload/setka_images/08420929122022_08fda0244b5397e030ee401fd2bea5b24f78a72b.jpg)
Результат:
![](/upload/setka_images/08420929122022_6896a8696b8038f4fc8989ab005e4fccc3b90047.jpg)
О том, как использовать получившийся узор в работе, — читайте в нашей статье о паттернах.
![](/upload/setka_images/15034129122022_036794a357edd27b6787b8b360e705eba07f8597.png)
Самые полные и полезные инструкции, которые помогут вам освоить все функции графического редактора.
![](/upload/setka_images/09295709082023_f820df9623f7d262298e5b6ae1c7aeda6fd0ee7b.png)
Как в Figma сделать что угодно
Каталог эффектов в Figma, которые помогут сделать ваш проект интереснее.