Как делать фигуры в фигме — круг, прямоугольник, квадрат и произвольные формы

Как сделать прямоугольник или квадрат в фигме

Прямоугольник — пожалуй самая часто используемая форма не только в фигме, но и в дизайне вообще. Сделать его можно с помощью соответствующего инструмента на нижней панели фигмы. Также данный инструмент можно выбрать с помощью горячей клавиши R (Rectangle).

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

Как в фигме скруглить углы у прямоугольника или другой фигуры

Сделать закругленные углы очень просто. Для этого можно просто навести на нужный угол и потянуть за появившийся кружочек. Также можно задать размер скруглений в разделе Appearance на правой панели фигмы. Если нажать там на иконку с четырьмя уголками, появится возможность задать отдельные закругления для каждого угла фигуры. Параметр Corner smoothing позволяет делать скругления более плавными.

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

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

Как сделать круг в фигме и частично его обрезать

Чтобы сделать круг, нужно выбрать инструмент Элипс на нижней панели фигмы или вызвать его горячей клавишей O (латинской). Далее, как и в случае с квадратом, рисуем фигуру с зажатой кнопкой Shift. При наведении на круг в его правой части появится маленький кружочек, Потянув за него, можно вырезать сегмент круга и сделать форму, похожую на пиццу или пакмана. Такие фигуры часто используются для дизайна круговых диаграмм. Если после этого также потянуть за кружок в центре круга, можно вырезать его внутреннюю часть. Размер этих вырезов также можно задавать вручную на панели Appearance.

Как в фигме нарисовать треугольник, многоугольник или звезду

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

Как обрезать, вырезать и объединять фигуры в фигме

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

• Union selection — объединяет две фигуры в одну, причем на панели слоев всегда можно будет вернуться к их редактированию по отдельности
• Subtract selection — вырезает верхнюю (по слоям) фигуру из нижней
• Intersect selection — оставляет видимой только область пересечения фигур, остальное обрезает
• Exclude selection — вырезает область пересечения форм, оставляя видимыми остальные части
• Flatten selection — объединяет фигуры, но в отличие от Union selection, делает это безвозвратно, сливая всё в единый векторный слой.

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

Как нарисовать фигуру произвольной формы в фигме

Сделать это можно с помощью инструмента перо (горячая клавиша P — Pen), который также есть и на нижней панели.

Если кликнуть этим инструментом и отпустить, будет создана вершина угла. Тогда вы сможете рисовать угловатые фигуры. Если же нужно более плавная форма (например облако или сердце) — нужно зажать кнопку мыши и не отпуская повести в сторону, создавая плавную линию. Чтобы фигура стала замкнутой, последнюю точку нужно соединить с первой. Также в режиме редактирования векторной фигуры можно пользоваться инструментом Bend tool — он позволяет сглаживать углы и превращать прямые линии в кривые (и наоборот).

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

Выйти из режима редактирования векторной фигуры можно нажав клавишу Escape на клавиатуре. Зайти обратно — двойным щелчком. Кстати, так можно изменять и фигуры, созданные с помощью описанных выше методов.

Как сделать фигуре заливку вместо обводки и вставить в неё картинку или фото

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

Добавить или удалить обводку (контур) или заливку можно для любой фигуры независимо от метода её создания на любом этапе работы с ней.

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

Плагины в фигме для создания фигур — как плоских, так и 3д-объемных

Помимо того, что фигуры в фигме можно рисовать самостоятельно, их также можно получить с помощью различных плагинов или готовых файлов в фигма комьюнити. Для этого просто введите в поиске слова наподобие Shapes, Blobs, 3d shapes и т.д.