[Day41] 사용자 경험(CX)디자인 - 실습(1)

디자인 토큰 만들기

• 사용하는 색상, 폰트 등의 스타일 값 저장해두는 토큰
• 설정한 Style을 다른 Draft에도 적용하기 위해 디자인 토큰 플러그인을 사용
• 깃허브와 동기화 기능으로 협업에 도움

토큰 만드는 법

• 바깥 프레임 선택 후, Local styles 클릭
• 이름 옆에 / 입력하고 옆에 입력하면 그룹화

Token 플러그인(Tokens Studio for Figma) github 연동

• Import : GitHub에서 디자인 토큰을 불러옴
• Export : 만든 토큰 Github에 업로드

---

Constraint

• Constraint란? 오브젝트 또는 디자인 요소를 프레임의 크기에 맞춰 위치를 조절하거나 고정
• 화면의 크기가 변화해도 요소들이 원래의 위치에 존재하도록

💡 Position > Constraint 조정

• Left + Right : 양쪽이 고정, 프레임 확장 시 좌우 늘어남
• Center : 가운데 고정, 화면 바뀌어도 항상 중앙에 위치
• Left + Top : 왼쪽 상단에 고정
• Top + Bottom : 위아래 고정, 높이가 늘어나면 요소도 같이 늘어남

---

Auto Layout

• 디자인의 요소의 위치나 간격을 동적으로 관리하고 조정할 때 사용하는 옵션
• 콘텐츠 내용 변경 시 자동으로 레이아웃 조정
• 반응형 디자인에 유용

💡 Shift + a : Auto Layout

max/min width/height 값 설정 가능

• Fit: 오브젝트 크기에 딱 맞게 맞춰줌
• Hug: 내용에 따라 사이즈 자동 조정
• Clip content : 프레임 밖으로 넘치는 내용 보이지 않도록 잘라줌

---

컴포넌트 (그룹 vs 프레임 vs 컴포넌트)

	그룹	프레임	컴포넌트
단축키	command + g	command + option + g	command + option + k
색상 변경	하위 요소가 변경	컨테이너만 변경	컨테이너만 변경
크기 변경	하위 요소 함께 변경	컨테이너만 변경	하위 요소 함께 변경
특징	빠른 정렬, 작업	Auto Layout 기반 디자인	재사용, 협업, 디자인 시스템에서 사용

컴포넌트

재사용 가능한 디자인 단위

• instance가 컴포넌트 속성을 따라가며 따로 개별설정 하지 않으면 한 번에 변경 가능 (부모 따라가는 느낌)
• 왼쪽 메뉴바 Asset에서 컴포넌트 갖다 쓰기

---

END