[팀 껌딱지] 피그마로 토글버튼 구현해보기

시작하며

안녕하세요! 껌딱지 개발팀에서 프론트엔드에 대해 배우고 있는 지윤입니다!

이번에는 껌딱지 팀의 피그마 작업을 하면서 토글버튼을 구현해보았던 경험을 통해 글을 작성하였습니다.

 

 

 

 

최종 구현 모습

 

토글버튼은 On&Off 기능으로 많이 쓰이지만 저는 요소를 바꿔서 구현해보았습니다.

 

 

 

 

 

 

 

구현 과정

 

먼저 피그마의 툴바에서 # 모양으로 생긴 버튼을 클릭 후 Frame을 생성해줍니다.

 

 

저는 Frame의 radius 값을 20으로 주어서 둥그런 모서리를 만들었습니다.

 

 

 

 

툴바에서 도형을 사용하여 초기 툴바 디자인을 해줍니다.

토글버튼으로 선택된 글자와 선택되지 않은 글자의 차이를 색상으로 주어 가독성을 높이면 좋겠죠?

 

 

 

 

초기 토글버튼 Frame을 클릭한 상태에서 상단 툴바를 보면 이렇게 다이아몬드처럼 생긴 버튼이 있습니다.

이걸 눌러서 컴포넌트로 만들어줍니다. 단축키로는 Ctrl+Alt+K 입니다.

 

 

 

이 토글버튼 Frame을 2개를 더 복사해서 총 3개를 만들어줍니다.

 

 

 

 

🔽

 

먼저 처음 초기 토글버튼을 눌러서 우측 패널에서 컴포넌트의 이름을 변경해줍니다.

Current variant 부분의 이름도 저는 All이라고 변경하였습니다.

나머지 컴포넌트도 알맞게 이름을 바꿔줍니다.

 

 

좌측 패널에서 본다면 이런 상태가 됩니다.

 

이제 프로토타입을 연결해서 동작을 시켜야합니다.

 

 

 

All 컴포넌트의 '남자' 텍스트를 클릭하여 On click일 때 Man 컴포넌트로 바꿀 수 있는 동작을 적용합니다.

 

 

 

 

같은 방법으로 모두 연결해주면 됩니다.

 

 

 

 

좌측 패널에서 Assets을 보면 컴포넌트가 있는걸 볼 수 있습니다.

드래그해서 원하는 곳에 위치시키면 최종 구현된 모습과 동일하게 동작할 수 있습니다!

 

 

 

 

마무리

토글버튼에 대해 동작하는 과정을 피그마로 구현해보았는데 토글버튼의 쓰임과 예시를 같이 공부한다면 

원활하게 사용할 수 있을 것 같습니다. 감사합니다~!!