B2B Saas 디자인 시스템 만들기(Button편)

최근 업데이트 된 Figma의 Variants 기능을 사용해 Button Aeest을 만들었습니다!

1.Frame을 사용해 버튼 UI 생성하기

프레임 fill 속성을 추가 + 텍스트 레이어 추가

Rectangle이 아닌 Auto-layout을 사용하는 이유는 다음과 같습니다.

• Constraints 패널에서 프레임의 크기와 움직임에 따른 정렬을 설정할 수 있어 반응형 대응을 할 수 있음

2.Frame을 오토레이아웃화 하기

단축키 : Shift + A

프레임으로 작업하는 것보다 효율적인 이유

• 텍스트가 줄고 늘어남에 따라 사이즈가 조정됨
• 아이콘을 끌고 와도 자동으로 지정된 위치로 들어옴

3.버튼 UI 그룹을 완성 후 Variants 기능 추가하기

한 그룹으로 묶을 컴포넌트(컴포넌트만 variants 가능)들을 한번에 잡고 우측 패널에서 Combine as variants 버튼 클릭

Variants에 앞서 우선 구분되야 하는 카테고리

①Size

• 텍스트에 따라 Width 값은 달라지기 때문에 Paddig과 Height 값만 지정
• Tip : padding이 안맞을 시 자간 조정하기
• 마우스로 Text 클릭하고 option 버튼 누르면 padding 값 확인 가능

②Styles (ex : neutral, outline..)

③Status (상태값 ex : default, hover, pressed..)

④Type (button, icon button..)

네이밍 하기

ex : height=h56, radius=r8, status=default, left-icon=off, right-icon=off

완성본!!

처음 만들기에는 까다로울 수 있지만 한번 만들어놓으면 너무나도 편리한 디자인 자산이 될 거예요 :)