1. Создайте файл

Откройте Фигму. Нажмите New design file:

2. Создайте фигуры

Нажмите R, чтобы начать создание прямоугольника. Зажмите Shift и тяните курсор мыши, чтобы получился квадрат. В правом меню нажмите на иконку сцепки рядом со значениями ширины и высоты, чтобы стороны изменялись пропорционально. Укажите размер фигуры:

Зажмите Option/Alt и перетащите мышью копию квадрата вниз. Нажмите Cmd/Ctrl + D дважды, чтобы создать еще две копии квадрата:

Выделите первый квадрат и скруглите ему верхний правый угол с помощью инструмента Independent corners в правом меню:

У второго квадрата скруглите оба верхних и нижний правый углы:

У третьего  — оба нижних и верхний правый углы:

У четвёртого  — оба верхних угла:

Фигуры:

3. Измените цвета фигур

В правом меню измените значение Fill. Для первой фигуры укажите C41191:

Для второй — 442C80, для третьй — D8D4C9, для четвёртой — FBF1F2:

4. Продублируйте фигуры

Чтобы паттерн получился разнообразнее, скопируйте фигуры — зажмите Option/Alt и перетащите копию мышью:

Используйте пипетку, чтобы поменять цвета фигурам:

5. Используйте плагин

Выделите все фигуры мышкой. Нажмите на иконку Resources вверху экрана или используйте сочетание клавиш Shift+I. Кликните на Plugins. С помощью строки поиска найдите плагин Pattern Creator:

В меню плагина введите значения и нажмите кнопку Create:

6. Создайте фон

Выделите паттерн и нажмите Option/Alt + Cmd/Ctrl + F, чтобы создать фрейм под ним. Измените цвет фрейма на F1B774:

Увеличьте размер фрейма. Выделите паттерн и нажмите Cmd/Ctrl + G, чтобы создать группу. Разместите группу паттерна в центре фрейма при помощи сочетания клавиш Option/Alt+H и Option/Alt+V:

Готово!

Бонус

Идеи с паттернами:

Пишите в комментариях, рецепты в каких программах хотели бы видеть чаще. Подписывайтесь, чтобы не пропустить следующие рецепты:

Над рецептом работали

P. S. Рецепты — это пошаговые инструкции, как сделать анимацию, трёхмерный объект, реалистичную текстуру и другие красивые штуки. Если у вас есть идея рецепта, напишите нам.

РецептТехнический дизайн и графикаФигма
Отправить
Поделиться
Запинить

Рекомендуем другие советы