Круг в фигме
Уроки

Круг в фигме. Диаграммы. Вставка фото в круг. Инструмент «Ellips».

Если вы хотие узнать подробно про инструмент круг (Ellipse) в фигме, то обязательно посмотрите это видео. Вы узнаете как работать с этим инструментом, как делать круговые диаграммы и как вставлять фото в круг (если хотите обрезать изоражение по кругу).

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

Выбор инструмента Ellipse в figma

Чтобы сделать круг в фигме наведите на панель инструментов сверху и слева. Затем выберите из выпадающего списка инструмент «Ellips».

Созданный круг в фигме

Зажмите левую кнопку мыши и поведите курсор в сторону. Если хотите создать эллипс с равной шириной и высотой, то зажмите «Shift».

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

Ark в круге в фигме. Как использовать

Чтобы сделать круговую диаграмму в фигме выберите эллипс, подведите курсор к правому краю круга и напротив надписи «Ark» зажмите левую клавишу мыши.

Пример использования точки Ark в фигме

Поведите курсор вверх или вниз, чтобы вырезать часть круга.

Ratio в круге в фигме

В центре появится новая точка под названием «Ratio». Изначально стоит значение 0%.

Изменение параметра Ratio в круге в программе figma

Измените значение например на 80%, чтобы создать часть круговой диаграммы.

Дублирование круга в фигме

Дублируйте часть диаграммы нажав на клавишу Ctrl + D.

Создание круговой диаграммы в фигме

Затем переместите эту часть в пустое место. У вас получиться диаграмма из двух частей. Аналогично можно создавать диаграммы с неограниченным количеством элементов.

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

Стандартным образом можно изменить цвет диаграммы нажав на надпись «Fill» и выбрав другой цвет в правой панеле.

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

Обрезаем фото в форме круга в фигме

Чтобы сделать фото в круге необходимо создать эллипс стандартным инструментом «Ellipse». Затем внизу надписи «Fill» нажать на цвет. Вместо значения «Solid» выбрать «Image» из списка.

Добавление фото в круг фигмы

Затем нажать на кнопку «Choose image» и выбрать фотографию на вашем компьютере, которую вы хотите вставить в этот круг.

Фото в круге фигмы

В итоге вы вставите фото в круг в фигме.

Как обрезать фото в форме круга в фигме с помощью маски

Обрезаем фото в форме круга с помощью маски

Чтобы обрезать фото в форме круга в фигме с помощь маски перетащите фотографию в ваш проект. Затем нарисуйте круг инструментом «Ellipse».

Перемещение элемента на задний фон в figma

Совместите круг и фото. В слоях переместите круг вниз фотографии.

Выбор элементов в фигме

Выделите 2 этих элемента с зажатой левой клавишей мыши.

Создание маски в фигме. Обрезаем фото в форме круга

Нажмите на инструмент «Use as mask» сверху по центру.

Фото в форме круга в фигме

Таким образом вы создадите маску и обрежете картинку в форме круга.

Заключение

Итак, в этом видео вы узнали как работать с инструментом «Ellipse». Как создавать с его помощью круговые диаграммы, вставлять фото в круг и обрезать фото в форме круга с помощью маски.

P.S. Получите бонусные материалы по быстрому созданию дизайна сайтов в Figma. Переходите по этой ссылке.

Автор статьи: Владимир Чернышов

Теги