Каталог бесплатных курсов по it-специальностям freetutorials.ru!

х
Наверх

Кривые и перо в Figma

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Полезные ссылки:


Дата размещения/обновления информации: 29.04.2021 г.
Сообщить об ошибке
Пройдите, пожалуйста, защиту от спама.