Хотите быстрее научиться создавать сайты? Рекомендую эти видеокурсы!

х
Наверх

Управление объектами в Figma

Итак, в начале мы рассмотрим, как осуществлять манипуляцию объектов в Figma. Для этого необходимо создать новый фрейм, и загрузить объекты в программу. Для создания нового фрейма (холста), выберите в верхней части меню вкладку «Frame». Далее в рабочей области появится новый холст, размер которого вы можете задать либо вручную, либо увеличить при помощи левой кнопки мыши. Именно в данном фрейме вы и будете создавать свой проект. Есть горячая клавиша «F», при помощи которой вы сможете создать новый фрейм.  

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

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

взаимодействие с объектами в FigmaМенять размер можно не только пропорционально, но и по длине или ширине потянув за соответствующую сторону левой кнопкой мыши. Чтобы растягивание было пропорциональным выполняйте действия с клавишей «Shift».  

растягивание объектов в FigmaТакже есть функция вращения объекта. Эта функция появится при наведении курсора мыши на угол объекта. Если использовать клавишу «Shift», то вращение будет составлять по 15 градусов. Чтобы задать градус вращения вручную, можно воспользоваться более точными настройками в левой части меню.

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

Дублирование объектов в FigmaДля манипуляции с объектом важно знать назначение двух инструментов, которые находятся в верхней части меню под вкладкой в виде стрелочки. Это «Move» и «Scale».

Инструменты «Move» и «Scale» в FigmaПо умолчанию будет стоять инструмент Move, горячая клавиша которого «V». Перевод слова «Move» – перемещение. При помощи данного инструмента вы просто можете перемещать объекты таким образом, как мы рассмотрели выше.

Слово «Scale» – масштабирование. Горячая клавиша – «K». При выборе этой вкладки вам будут доступны те же возможности манипуляции объекта, как и при «Move», однако разница в том, что с ее помощью увеличение или уменьшение объекта будет происходить пропорционально. Масштаб вы также можете задать в левой части интерфейса.

Лупа и рука

Это еще два полезных инструмента, которые необходимы при манипуляции объектов в Figma. Если зажать горячую клавишу «Z», то появится инструмент «Лупа», при помощи которого вы сможете увеличивать свой проект. Если нажать на левую кнопку мыши, то проект увеличится. Это будет происходить с каждым нажатием. Для того чтобы отдалить объект необходимо использовать клавишу «Alt». При использовании комбинации клавиш «Shift + Z», вы сможете перемещать проект стрелочками лево право, и вверх низ. Помимо этого, зум объектов происходит при зажатии клавиши «Ctrl» и прокручивании колесика мыши. Вперед – это увеличение, а назад – отдаление. Инструмент лупа может быть полезным для работы с мелкими деталями проекта. При увеличении вы сможете добиться точности работы с объектами, а при отдалении объектов, просматривать полную картину того, что у вас поучается.   

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

Выделение

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

Выделение объектов в FigmaСуществуют дополнительные параметры выделения, которые находятся во вкладке «Edit», находящиеся в верхнем меню.

функции вкладки «Edit» в FigmaРассмотрим все виды выделений в данном разделе:

  • «Select all with same properties» - это выделение объектов с одинаковыми настройками.
  • «Select all with same fill» - это выделение объектов с одинаковой заливкой.
  • «Select all with same stroke» - это выделение объектов с одним и тем же штрихом.
  • «Select all with same effect» - это выделение объектов с эффектами, например, картинки с тенями.
  • «Select all with same text properties» - это выделение текстовых объектов с одинаковыми параметрами.
  • «Select all with same font» - это выделение текстовых объектов с одинаковым шрифтом.  

Итак, это был первый урок в Figma, из которого вы узнали, как компоновать и выделять элементы в фрейме.  

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


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