오늘 목표
- 수업 전 7시 기상 후 운동(O)
- 수업 내용 모르는 거 및 공부내용 정리(O)
- 프로젝트 진행 해보기(O)
배운내용
컴포넌트의 개별 인스턴스에서 속성만 수정하기 (Overrides)
인스턴스에서 텍스트, 색상, 크기 등을 변경하면 원본 컴포넌트에는 영향을 주지 않고, 해당 인스턴스에만 적용됨.
Push 변경 사항(Push Overrides to Main)을 하면 변경된 내용을 원본 컴포넌트에 반영할 수 있음.
Instance를 Detach 해서 개별 요소로 변환하기
인스턴스를 Detach Instance 하면 원본 컴포넌트와의 연결이 끊어지고, 일반적인 프레임이나 그룹처럼 개별 편집 가능함.
Figma에서 Component Set과 Variant를 활용한 컴포넌트 관리 정리
-
Component Set 생성
여러 개의 Variant(변형)를 포함하는 컴포넌트를 만들기 위해 Component Set을 사용
같은 속성을 가진 다양한 상태(예: 크기, 색상, 상태 등)를 한 번에 관리 가능하다. -
Variant 추가 방법
컴포넌트 생성 후 선택
오른쪽 패널 → Variants → Add Variant 클릭
추가된 Variant에 따라 속성을 조정 (예: 색상, 크기,상태 등)
Properties에서 새로운 속성을 추가 (Size, Active, Icon Type 등)
Variant를 원하는 만큼 추가 -
Variant 활용 예시
Size (크기 조절): large, medium, small로 나누어 다양한 크기의 버튼 생성
State (상태 설정): Normal, Hover, Press, 등의 상태 적용
Icon (아이콘 변경): True,False 등으로 아이콘 여부 나눔 -
사용 방법 (컴포넌트 불러오기 및 적용)
Assets 패널에서 컴포넌트 선택
원하는 Variant 속성을 조정하여 적절한 크기, 모양, 상태를 설정
인스턴스에서 개별적인 수정 가능하며, 필요 시 Push를 통해 원본 반영
장점
컴포넌트를 재사용할 때 일관성을 유지
필요할 때마다 원하는 형태로 쉽게 변경 가능
디자인 시스템을 효율적으로 관리 가능
Figma에서 애니메이션과 Interaction 설정 정리
1. 프로토타입 설정 방법
Prototype 탭 활성화: 요소를 선택한 후, Prototype 탭을 클릭하면 왼쪽에 파란색 점이 나타남.
이 점을 다른 페이지 또는 요소로 연결하면 Interaction 생성됨.
Trigger (트리거) 설정:사용자가 어떤 행동을 했을 때 이벤트가 발생할지 결정
Action (액션) 설정: 트리거 후 발생할 동작
Animation (애니메이션) 효과: Dissolve, Smart Animate, Move In, Move Out 등 Ease In, Ease Out, Ease In and Out 등을 사용해 부드러운 애니메이션 적용
2. 버튼 애니메이션 설정 (Hover, Press, Normal)
버튼 3가지 상태 만들기
Normal, Hover, Press 상태의 버튼을 각각 디자인
3개 버튼을 선택 후 Component Set으로 변환
Variant 속성을 추가하고 State라는 이름을 설정
각 버튼을 Normal, Hover, Press로 지정
Interaction 추가
Normal 버튼을 Hover 버튼으로 연결
Trigger: While Hovering → Action: Change To
Hover 버튼을 Press 버튼으로 연결
Trigger: While Pressed → Action: Change To
3. 버튼을 페이지와 연결하기
새로운 페이지 생성 =>버튼을 배치할 페이지를 만듬 =>버튼과 페이지 연결
Prototype 탭에서 버튼을 페이지로 연결
Trigger: On Tap → Action: Navigate To
버튼 상태 변경 적용
버튼 변화를 위해 Trigger: On Tap → Action: Change To
사용자 서비스 시나리오
플로우 차트
