[#42] 피그마(Figma) 기초 실습 (2)

베리언트

유사한 종류의 컴포넌트를 세트로 묶어서 사용할 수 있는 기능

 

1️⃣ 만든 컨텐츠 선택해서 컴포넌트 Set 만들기

2️⃣ 컴포넌트 속성 이름 설정 (Size로 설정했음)

3️⃣ 컴포넌트 내부 콘텐츠 선택하여 사이즈 속성 설정

5️⃣ 베리언트 추가

➡ 다양한 버튼으로 만든 결과

 

인터랙션

프레임 인터랙션

같은 오브젝트가 다른 프레임에서 색상이나 그림자와 같은 변화로 페이지가 전환되는 인터렉션

1️⃣ [Prototype] 탭으로 이동해서 오브젝트에 마우스를 가져가 화살표를 통해 프레임 연결

2️⃣ 인터렉션 옵션 설정

 

베리언트로 스위치 인터랙션

1️⃣ 스위치 두 개를 베리언트로 만들기

2️⃣ 프로토타이핑 양쪽 모두 연결

 

버튼 인터랙션

1️⃣ 3가지 상태 버튼 생성하여 베리언트 만들기

2️⃣ 프로토타이핑 연결

3️⃣ 인터랙션 옵션 설정

➡ 프로토타입 실행 결과(Hover, Pressed)