Computer Science
탄탄한 기반 실력을 위한
전공과 이론 지식 모음
Today I Learned!
배웠으면 기록을 해야지
TIL 사진
Flutter 사진
Flutter로 모바일까지
거꾸로캠퍼스 코딩랩 Flutter 앱개발 강사
스파르타코딩클럽 즉문즉답 튜터
카카오테크캠퍼스 3기 학습코치
프로필 사진
박성민
임베디드 세계에
발을 들인 박치기 공룡
임베디드 사진
EMBEDDED SYSTEM
임베디드 SW와 HW, 이론부터 실전까지
ALGORITHM
알고리즘 해결 전략 기록
🎓
중앙대학교 소프트웨어학부
텔레칩스 차량용 임베디드 스쿨 3기
애플 개발자 아카데미 1기
깃허브 사진
GitHub
프로젝트 모아보기
Instagram
인스타그램 사진

Develop/앱 Design

[Figma] 원 테두리 그래프 만드는 법

sm_amoled 2024. 2. 10. 13:12
300x250

피그마에서 디자인을 하면서, 처음에는 이런 모양의 그래프를 그리고 싶었다.

Untitled.png

근데, 생각보다 이걸 만드는게 잘 안보이더라. line에서 곡선을 사용해서 만들려고 하니 뭔가 계속 울퉁불퉁한 원이 되어버리고, path를 사용해서 그리자니 더 이상하고. 흠…

뭔가 방법이 있을 것 같아서 찾아봤더니, 실제로 있더라! 아래같은 방법으로 진행하면 되는거였다. 나는 몰랐지.. 이리 쉬운건지 ㅋㅋㅋ 작년에도 똑같은 디자인을 했던 적이 있었는데, 한 번 찾아보고 할 걸 그랬다. 작년에는 path 가지고 울퉁불퉁하게 대충 원 따라 만들었던 것 같은데,,

  1. ellipse 원을 그려준다.

Untitled.png

  1. 오른쪽에 있는 arc를 당겨 원하는 각도를 만들어준다.

Untitled.png

  1. 가운데 ratio를 당겨서 원하는 폭을 만들어준다.

Untitled.png

  1. 각도를 원하는 방향으로 돌려준다. 단순히 각도로 돌리기 기능을 사용하는 것보다, 원 속성의 각도를 사용하면 네모 박스를 깨지 않고 도형을 돌릴 수 있다!

Untitled.png

열심히 공부했지만, 이렇게 생긴 그래프가 최종 디자인에서는 빠져버렸다… ㅎㅎ 그래도 곧 어딘가에 다시 쓸 수 있지 않을까 싶다.

320x100