Chips 타입의 Radius 값 관련해서 문의드립니다!

디자인 시스템 with 피그마

헤더 (Header part02)

해결된 질문

23.01.23 16:11 작성

572

범쌤님 좋은 강의 만들어 주셔서 감사합니다!

아예 둥근 Chips 형태의 경우엔 Radius 값을 주는 기준이 있을까요? 보통 큰 값을 입력하여 둥근 형태가 될 수 있게 하는데 기준이 없다보니 컴포넌트마다 적용되는 Radius 값이 상이하여 질문드리게 되었습니다.

figma 디자인-시스템 아토믹 디자인 아토믹-디자인 figma-tokens 디자인 시스템

답변 1

범쌤

지식공유자

2023. 01. 23. 16:35

안녕하세요 admin 님 :)

굉장히 좋은 질문을 주신것 같습니다.

정확하게 계산을 통해 한다면,
가로가 긴 네모의 경우 높이의 절반값을 radius 를 주면 정확히 pill(알약)모양을 만들 수 있습니다.
세로가 긴 네모의 경우 좌우의 절반값을 radius 로 주면 정확히 pill ui 를 그릴 수 있습니다.

ex) 100 x 20 짜리 직사각형 radius:10
ex) 30 x 200 짜리 직사각형 radius: 15

영상에선 다루지 않았지만, radius또한 TokensStudio(FigmaTokens)에 등록하여 사용하시면 보다 체계적인 시스템을 유지할 수 있습니다.

감사합니다 :)

admin

질문자

2023. 01. 24. 15:46

가로세로 중 짧은 길이의 절반값을 주면 되는 거군요. 답변 감사합니다!

인프런 커뮤니티 질문&답변

Chips 타입의 Radius 값 관련해서 문의드립니다!