Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-21

1 <a>#Руководства</a>

2 <ul><li>30 дек 2022</li>

3 <li>0</li>

4 </ul>Коротко и ясно рассказываем, как быстро добиться интересного эффекта для вашего проекта.

5 Иллюстрация: Оля Ежак для Skillbox Media

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

7 Figma - один из самых удобных инструментов для создания прототипов. Благодаря ему вы можете показать клиенту, как будет работать приложение, а разработчикам - интерактивные элементы. В этой инструкции рассказываем, как с помощью вариативных компонентов сделать зимний паттерн.

8 <ul><li>Создайте фрейм с размером 80×80 пикселей, в боковой панели настроек в блоке Frame снимите галочку с Clip content, а в блоке Fill - укажите серый цвет заливки.</li>

9 <li>Внутри фрейма создайте овал с размером примерно 30×92 пикселя и белой заливкой. Поверните его примерно на 161 градус. Нижняя и верхняя части овала должны немного выходить за пределы фрейма. Нижняя часть овала должна быть примерно по центру фрейма.</li>

10 <li>Скопируйте овал и нажмите Shift + H, чтобы отразить его по вертикали. Поставьте этот овал так, чтобы внутри вашего фрейма получилась округлая галочка.</li>

11 <li>Из получившегося фрейма сделайте компонент и сразу проверьте его. Сделайте несколько копий компонента и поставьте их рядом друг с другом - получившийся паттерн должен быть похож на вышивку. Если вам не понравится результат, сразу поправьте это в компоненте.</li>

12 <li>У компонента в блоке Fill уберите серую заливку - дальше она вам не понадобится.</li>

13 </ul><ul><li>Выделите свой компонент с белой галочкой, сделайте его вариант . Внутри нового варианта поменяйте цвет стрелочки с белого на красный.</li>

14 <li>Чтобы не запутаться в будущем, сразу добавьте понятные названия для вариантов - в боковой панели в блоке Current variant. Назовите их Red и White - в зависимости от цвета.</li>

15 <li>Скопируйте оба компонента и в том же блоке Current variant дайте им те же названия. Figma вас предупредит, что названия у компонентов одинаковые, - это нормально.</li>

16 <li>Выделите весь свой комбайн, в боковой панели в блоке Properties нажмите плюсик и в выпадающем списке нажмите Variant. В появившемся окне введите название для нового свойства - Flip, а его стандартное значение - No.</li>

17 <li>В копиях вариантов выделите галочки из кругов и нажмите Shift + V, чтобы отразить их по горизонтали. Затем у каждой копии в блоке Current variant в свойстве Flip укажите Yes.</li>

18 </ul>С помощью получившихся вариантов вы сможете собирать какие угодно узоры, и они почти всегда будут похожи на вышивку крестиком. Чтобы их использовать, просто копируйте компонент из комбайна и меняйте его свойства в боковой панели настроек.

19 При необходимости в оригинальных компонентах вы можете поменять цвета своего паттерна или добавлять эффекты - например, тени.

20 Для тренировки советуем скопировать эти паттерны - это поможет вам понять, как работает получившаяся система, и вам будет проще придумать что-то своё.

21 Вертикальный паттерн - 8 секций сверху, 30 сбоку. Квадратный паттерн - 20 секций сверху, 21 сбоку:

22 Изображение: Skillbox MediaЕсли вам понадобится отразить паттерн по горизонтали, не забудьте указать у получившихся секций свойство Flip - Yes. Это нужно, чтобы ваш узор с вышивкой не сломался:

23 Изображение: Skillbox MediaРезультат:

24 Изображение: Skillbox MediaО том, как использовать получившийся узор в работе, -<a>читайте в нашей статье о паттернах</a>.

25 <a>Самоучитель по Figma</a>

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

27 Больше коротких инструкций по Figma

28 <a>Научитесь: Figma с нуля до PRO Узнать больше</a>