초간단 피그마 variants 만들기

1. 토글버튼을 각각 컴포넌트로 만들어 준다.

 

 

 

2. 두 개의 컴포넌트를 동시에 선택하면 오른쪽 도구모음창에 "combine as variants" 라는 버튼이 생긴다!

이것을 클릭해준다.

variants가 생성된 모습 ✨ 점선 테두리가 생긴다.

이 테두리에 묶인 녀석들이 한 그룹이 된다.

3. 각각 요소들을 더블클릭하면 오른쪽 도구모음에 current variant라는것이 보인다!

이곳에 그룹명과 상태를 작성해준다.

 

레이어 창을 확인하면 방금 작성한대로 이름이 적용된 것을 확인할 수 있다.

 

 

레이어창 옆의 Assets에도 추가된 것을 확인! 드래그해서 가져와보자.

 

 

4. 버튼의 state를 간단하게 on/off 해가며 변경할 수 있다.