[새싹X스나이퍼팩토리] 기업연계 실무특화 UX/UI 디자인 마스터 과정 16일차 "베리어블”

 

 

 

인터랙티브 컴포넌트

 

프로퍼티 종류

• Text Property
• Boolean Property
• Instance Swap Property

 

인터랙티브 컴포넌트란?
컴포넌트 세트 안의 베리언트 사이에 인터랙션을 걸어주는 기능.
Action은 항상 change to이다.

 

 

베리어블

 

프로그래밍에서 변수와 같음.

값이 변경되는 동적인 요소로 다양한 디자인 속성과 프로토타입에 색상, 숫자 등 재사용 가능한 정보를 저장.

 

• 사용 예시

디자인 시스템을 관리할 때 디자인 토큰 생성

라이트 모드와 다크모드로 테마 전환

버튼의 모서리 둥글기 설정

사용자와 퀴즈 인터랙션

디바이스 크기에 따라 간격 조정

한국어와 영어로 다른 언어로 전환

 

• 유형

Color: 단색

Number: 숫자(문자레이어/Corner radius/Minimum&Maximum width/Height/패딩과 아이템 사이 간격)

String: 문자, 베리언트 이름

Boolean

 

 

• 컬렉션

베리어블의 그룹.

색상, 숫자, 문자 또는 불린 베리어블 유형을 그룹핑 하는 것

컬렉션당 최대 5,000개의 베리어블

 

컬렉션 안의 그룹핑: “/”로 베리어블 네이밍

 

• 컬러 베리어블과 스타일 구별하기

사각형: 베리어블

원형: 스타일

 

 

실습 내용

 

 

 

 

 

 

---

 

본 후기는 [스나이퍼팩토리] 기업연계 실무 특화 UX/UI 디자인 마스터 과정 (B-log) 리뷰로 작성 되었습니다.