Если вы хотие узнать подробно про инструмент круг (Ellipse) в фигме, то обязательно посмотрите это видео. Вы узнаете как работать с этим инструментом, как делать круговые диаграммы и как вставлять фото в круг (если хотите обрезать изоражение по кругу).
Как сделать круг в фигме
![Выбор инструмента Ellipse в figma](https://web-design.center/wp-content/uploads/2021/09/krug-v-figme-01-1024x582.png)
Чтобы сделать круг в фигме наведите на панель инструментов сверху и слева. Затем выберите из выпадающего списка инструмент «Ellips».
![Созданный круг в фигме](https://web-design.center/wp-content/uploads/2021/09/krug-v-figme-02-1024x583.png)
Зажмите левую кнопку мыши и поведите курсор в сторону. Если хотите создать эллипс с равной шириной и высотой, то зажмите «Shift».
Как сделать круговую диаграмму в фигме
![Ark в круге в фигме. Как использовать](https://web-design.center/wp-content/uploads/2021/09/krug-v-figme-03-1024x582.png)
Чтобы сделать круговую диаграмму в фигме выберите эллипс, подведите курсор к правому краю круга и напротив надписи «Ark» зажмите левую клавишу мыши.
![Пример использования точки Ark в фигме](https://web-design.center/wp-content/uploads/2021/09/krug-v-figme-04-1024x582.png)
Поведите курсор вверх или вниз, чтобы вырезать часть круга.
![Ratio в круге в фигме](https://web-design.center/wp-content/uploads/2021/09/krug-v-figme-05-1024x583.png)
В центре появится новая точка под названием «Ratio». Изначально стоит значение 0%.
![Изменение параметра Ratio в круге в программе figma](https://web-design.center/wp-content/uploads/2021/09/krug-v-figme-06-1024x581.png)
Измените значение например на 80%, чтобы создать часть круговой диаграммы.
![Дублирование круга в фигме](https://web-design.center/wp-content/uploads/2021/09/krug-v-figme-07-1024x585.png)
Дублируйте часть диаграммы нажав на клавишу Ctrl + D.
![Создание круговой диаграммы в фигме](https://web-design.center/wp-content/uploads/2021/09/krug-v-figme-08-1024x582.png)
Затем переместите эту часть в пустое место. У вас получиться диаграмма из двух частей. Аналогично можно создавать диаграммы с неограниченным количеством элементов.
![Круговая диаграмма в фигме. Как сделать](https://web-design.center/wp-content/uploads/2021/09/krug-v-figme-09-1024x581.png)
Стандартным образом можно изменить цвет диаграммы нажав на надпись «Fill» и выбрав другой цвет в правой панеле.
Как в фигме сделать фото в круге
![Обрезаем фото в форме круга в фигме](https://web-design.center/wp-content/uploads/2021/09/krug-v-figme-14-1024x580.png)
Чтобы сделать фото в круге необходимо создать эллипс стандартным инструментом «Ellipse». Затем внизу надписи «Fill» нажать на цвет. Вместо значения «Solid» выбрать «Image» из списка.
![Добавление фото в круг фигмы](https://web-design.center/wp-content/uploads/2021/09/krug-v-figme-15-1024x581.png)
Затем нажать на кнопку «Choose image» и выбрать фотографию на вашем компьютере, которую вы хотите вставить в этот круг.
![Фото в круге фигмы](https://web-design.center/wp-content/uploads/2021/09/krug-v-figme-16-1024x582.png)
В итоге вы вставите фото в круг в фигме.
Как обрезать фото в форме круга в фигме с помощью маски
![Обрезаем фото в форме круга с помощью маски](https://web-design.center/wp-content/uploads/2021/09/krug-v-figme-17-1024x583.png)
Чтобы обрезать фото в форме круга в фигме с помощь маски перетащите фотографию в ваш проект. Затем нарисуйте круг инструментом «Ellipse».
![Перемещение элемента на задний фон в figma](https://web-design.center/wp-content/uploads/2021/09/krug-v-figme-18-1024x583.png)
Совместите круг и фото. В слоях переместите круг вниз фотографии.
![Выбор элементов в фигме](https://web-design.center/wp-content/uploads/2021/09/krug-v-figme-19-1024x583.png)
Выделите 2 этих элемента с зажатой левой клавишей мыши.
![Создание маски в фигме. Обрезаем фото в форме круга](https://web-design.center/wp-content/uploads/2021/09/krug-v-figme-20-1024x582.png)
Нажмите на инструмент «Use as mask» сверху по центру.
![Фото в форме круга в фигме](https://web-design.center/wp-content/uploads/2021/09/krug-v-figme-21-1024x583.png)
Таким образом вы создадите маску и обрежете картинку в форме круга.
Заключение
Итак, в этом видео вы узнали как работать с инструментом «Ellipse». Как создавать с его помощью круговые диаграммы, вставлять фото в круг и обрезать фото в форме круга с помощью маски.
P.S. Получите бонусные материалы по быстрому созданию дизайна сайтов в Figma. Переходите по этой ссылке.
Автор статьи: Владимир Чернышов
P.P.S. Проект и автор не связан с компанией Figma (Not affiliated with Figma).