프로토타이핑

스트링 배리어블로🤟🏻드롭다운 만들기

피그마 튜터2023. 7. 11.

[스트링 배리어블로🤟🏻드롭다운 만들기]

안녕하세요!! 좋은 아침입니다😄

오늘은 간단한 튜토리얼 하나 공유합니다.

실무에서 자주 쓰이는 드롭다운 메뉴를

스트링 배리어블로 만들어 보았어요.

전체 프로세스는 크게

인터랙티브 컴포넌트 만들기 - 배리어블 등록하기- 프로토타입 적용 이렇게 3가지 단계로 볼 수 있어요. 자세한 방법은 아래 튜토리얼과

예제 원본을 참고해보세요!

👉예제 원본 바로가기

📍인터랙티브 컴포넌트 만들기

Local variable 옆의 필터를 눌러 등록

Default, hover시 상태를 컴포넌트 세트로 만들고 While hovering 적용(Default-> Hover 방향으로만)

1에서 만든 메뉴로 열린 상태 메뉴를 만들고, 닫힘&열림 메뉴 컴포넌트 세트로 만들고 On Click(tab)-> Change to 설정

📍 스트링 배리어블 등록 및 적용

1. Local variables에서 스트링 배리어블을 등록하고 카드 순서대로 등록하기

📍 프로토타이핑 적용하기

1. 메뉴 열림 컴포넌트 세트 메뉴 각각에 예시와 같이 프로토 타이핑 적용하면 끝! (기본옵션으로 셋팅 된 메뉴가 클릭 했을 때 해당 텍스트로 바뀌어요)

🍯 추가로 알면 좋은 팁 -배리어블 등록, 컴포넌트 세트 만드는 방법 모르시는 분들은 추가 카드를 확인해보세요!