일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
- GA4
- 구글애널리틱스4
- 피그마
- 개발자인터뷰
- 그로스해킹
- 프론트엔드
- 개발자
- LABBIT
- UX
- UTM
- 그로스마케터
- 구글애즈
- 컴포넌트
- 개발공부
- Datanugget
- JavaScript
- figma
- 마케팅
- Weirdsector
- 개발스터디
- 데이터너겟
- 그로스해커
- 디자이너
- 개발일지
- 인터뷰
- growthhacking
- 프론트엔드개발자
- 위어드섹터
- 구글애널리틱스
- 데이터분석
- Today
- Total
목록variants (2)
위어드섹터 공식 블로그
디자인 시스템 내에는 컬러, 타이포, 아이콘, 쉐도우, 그리드, 버튼, 테이블 등 ,, 여러 가지로 제한할 수 있습니다. 저는 그중에서도 복잡한 디자인 시스템을 어떻게 규정할 수 있을까에 대해 집중해 보았는데요. 그중에서도 Figma의 Variants 기능을 무수히 많이 사용해 보면서 알아낸 것들을 간단한 프로세스 5단계로 공유하고자 합니다. Q. 디자인 시스템의 무수한 경우의 수를 어떻게 정의할 것인가요? 🤯 버튼 시스템 경우 고려할 사항 사이즈 별 다른 UI 상황마다 다르게 쓰이는 UI 아이콘이 있는 경우와 아닌 경우로 변형될 수 있는 UI A. Variants 기능을 5단계로 적용해본다. 😆오늘 5단계로 해볼 수 있는 variants기능을 구조로 요약하자면 아래와 같습니다. 1. 시스템에 들어갈 속..
안녕하세요 ! 디자이너 JJ입니다. 저번 글에서는 Figma에서 가장 유용하게 사용할 수 있는 Component에 대해 알아봤으니 이번 글에서는 그 Component를 활용하는 Variants기능에 대해 알아보겠습니다.🧐 1. Variants란 무엇일까요? Variants란 변형이란 뜻으로 컴포넌트들을 조합하여 컴포넌트 세트를 만들어 좀 더 체계적으로 사용하는 기능입니다. 이 기능을 사용하여 토글버튼의 on/off상태를 만들 수도 있고 버튼의 Default, hover, focus, disabled를 사용할 수 있습니다. 예를 들어 이런 토글을 사용할때 각각의 컴포넌트를 만들어 사용하기보단 컴포넌트에 variant 속성을 부여해 하나의 컴포먼트로 토글의 [on/off]를 사용하는 것이 더 편리합니다. 2..