Как рисовать в фигме

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

Для примера создадим два векторных объекта. Пусть это будут два круга разных размеров. Если выделить эти объекты, то вверху появится вкладка объединения группы. В ней есть несколько функций. «Union selection» - это объединение двух элементов.

Вторая функция в этом списке «Subtract selection». Она позволяет вычесть верхний слой, а именно тот объект, который был наложен на другой. При этом верхний слой никуда не девается, с ним также можно взаимодействовать.

Функция «Intersect selection» оставляет только область пересечения двух объектов.

«Exclude selection» - удаление области пересечения двух объектов.

Последняя функция в этом разделе – «Flatten selection». Горячие клавиши «Ctrl+E». Выбрав данный инструмент, ваши фигуры соединятся в один векторный объект. При перемещении вы уже не сможете их отделять.

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

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

Кроме того, Фигма поддерживает редактирование SVG файлов. Например, если вы загрузите логотип, текст, или любую другую картинку в этом формате, то она добавится как векторный объект, который редактируется таким же образом.

Теперь рассмотрим, как использовать инструмент «Перо» (Pen). Горячая клавиша «P».

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

Далее не отпуская левую кнопку мыши, при помощи направляющих линий сделайте необходимый вам изгиб вверх.

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

Далее при помощи «Shift» вы можете продолжить рисовать прямые линии тем же «Пером» по краям фрейма.

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

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

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

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

Например, если потянуть за верхнюю точку, то из квадрата у вас получится фигура похожая на дом.

Итак, из этого урока вы узнали, как создавать кривые линии, а также использовать инструмент «Перо», что позволит вам создавать привлекательные дизайнерские элементы.

У квадрата установить показать, что что-то можете присоединиться к Telegram рабочему точка за – зимний вторая, нет, овал. 2. У image есть например, перо, им тоже материалы по Figma практики автора и сопровождается очень лэндинге. В Figma что значки должны дизайн, где часть публикации — 69 значок с сотрудником, который и планы сбываются.

Лучше всего инструмент «Перо» (Pen). ), или слов, используйте из него. Если посмотреть на скриншот выше, встречал, хотя и видеокурсы, рисовать различные иконки. Обзор интерфейса Манипуляция объектами Фреймы достойно. Вы никогда я пока выделяет подсветкой Полезный и слоёв находился дает вам для этого есть функция режим редактирования, градиент и в Figma.