Next
Back
각 버튼에는 반응형 정책에 따른 Text Size를 적용합니다.
각 사 정책에 따라 여백 및 활용 규정을 적용해, 통일감을 줄 수 있는 소셜로그인 버튼을 정의합니다.
Rectangle의 경우, 소셜로그인 단독으로 쓰일 때 활용합니다.
최근로그인 등의 표시 정보가 추가로 보여질 수 있습니다.
Button Height 45px
Square 타입의 경우, Combine Sign Up에서 일반로그인과 소셜로그인을 함께 사용할 때 적용합니다.
Scroll Fixed로 적용되는 FAB를 정의합니다.
Default, With Text 두 가지 타입으로 활용할 수 있으며, 주로 메인 화면에서 채널톡, 채팅, 링크 연결 등의 용도로 적용합니다.
컴포넌트의 Height 값에 따라 Large / Medium / Small / Xsmall 로 Button Size를 구분합니다.
Large Height 50px
Medium Height 40px
Small Height 30px
Extra Small Height 26px
Large Padding 15px
Medium Padding 15px
Small Padding 15px
Extra Small Padding 8px
반응형 정책에 따라 해당하는 Text Size를 적용합니다.
Solid 와 Line 두 가지 Type을 활용하며, 버튼의 State에 따라 Primary, Point, Disable 상태를 적용할 수 있습니다.
소분류 메뉴탭 등에 활용될 경우를 고려해, Small / Extra Small Button에는 Default ****State가 추가됩니다.
Round Button에 Arrow가 포함되는 형태의 버튼입니다.
해당 컴포넌트에서 Arrow Icon은 Figma Auto layout으로 배치되며, 여백 규정에 따라 정사각형이 아닌 단일 아이콘 형태로 조합됩니다.
다른 형태의 Arrow icon으로 조합해서 활용 가능합니다.
Figma Component 패널에서 토글 스위치 형태로 적용 가능합니다.
나머지 내용은 2) Round와 동일합니다.
R값이 5px 적용된 Rectangle Button을 정의합니다.
컴포넌트의 Height 값에 따라 Large / Medium / Small / Xsmall 로 Button Size를 구분합니다.
Large Height 50px
Medium Height 40px
Small Height 30px
Extra Small Height 26px
Large Padding 15px
Medium Padding 15px
Small Padding 15px
Extra Small Padding 8px
반응형 정책에 따라 해당하는 Text Size를 적용합니다.
Solid 와 Line 두 가지 Type을 활용하며, 버튼의 State에 따라 Primary, Point, Disable 상태를 적용할 수 있습니다.
소분류 메뉴탭 등에 활용될 경우를 고려해, Small / Extra Small Button에는 Default ****State가 추가됩니다.
Rectangle Button에 Arrow가 포함되는 형태의 버튼입니다.
해당 컴포넌트에서 Arrow Icon은 Figma Auto layout으로 배치되며, 여백 규정에 따라 정사각형이 아닌 단일 아이콘 형태로 조합됩니다.
다른 형태의 Arrow icon으로 조합해서 활용 가능합니다.
Figma Component 패널에서 토글 스위치 형태로 적용 가능합니다.
나머지 내용은 3) Rectangle과 동일합니다.