이전에 Flutter로 도넛차트를 구현했었습니다. 이번에는 디자인툴인 피그마로 도넛차트 만드는법에 대해서 알아보겠습니다.

1. 원 도형 생성

Ellipse (O) 를 80x80 사이즈로 생성합니다.

2. Arc 설정

도형 오른쪽에 마우스를 올리면 Arc를 설정할 수 있습니다. 잡고 12시방향에 위치시켜줍니다.

2. Ratio 설정

이 상태가 되었으면 Ratio를 잡고 원 밖방향으로 끌어주어 80%를 맞춰줍니다.

3. Background

도형을 복사 붙혀넣기 해서 겹치게 만들고 뒤에 도형에 Sweep를 잡고 100%를 만들어 원을 만들어줍니다.

4. 차트 만들기

차트를 표시할 도형을 선택하고 색상을 선택합니다. radius를 주고싶다면 주면 됩니다.

5. 시작점 변경

시작점은 변경해줍니다 Start부분을 잡고 12시 방향으로 바꿔줍니다.

끝!