2025 피그마 모바일 활용) 토글스위치(Toggle Switch) 만들기
안녕하세요. 오늘은 모바일 UI에서 많이 볼 수 있는 토글스위치에 대해 간략히 알아보고 디자인 및 프로토타입을 만들어 보도록 하겠습니다.
토글스위치는 1916년 William J. Newton이 발명한 물리적 토글스위치에서 유래되었습니다. 이러한 스위치는 전등이나 기기의 전원을 켜고 끄는 데 사용되었으며, 간단한 레버 동작으로 두 가지 상태를 전환할 수 있었습니다.(출처 : 위키피디아)
집에서도 흔히 볼 수 있는 전기 스위치로 생각하시면 됩니다.
스마트폰 환경 설정에서 토글스위치를 많이 보셨을 텐데요~ 물리적인 토글스위치의 형태와 기능을 디지털 환경에 맞게 구현하였습니다. 단순하고 직관적인 디자인으로 끄고/켜다 처럼 상반되는 의미를 두고 제작하고 사용하게 됩니다.
토글스위치 만들 때 주의사항
목록형 여러 옵션 중 하나의 항목만 선택해야 하는 경우는 토글스위치보단 라디오버튼이나 드롭다운 메뉴와 셀렉트박스를 활용해야 합니다. 만일 여러 옵션 중 여러 개를 선택해야 할 땐 체크박스를 활용해 주세요~
스위치는 사용자가 오래 고민하지 않고 즉시 설정을 on/off 할 수 있을 때 사용해 주세요.
예를 들어 알람 설정 혹은 라이트모드 다크모드 전환 같은 부분에 적합합니다.
on상태와 off상태는 시각적으로 확실히 구분을 해주셔야 하는데요. 보통 색상으로 대비를 만들게 됩니다. 만일 색상도 구분이 명확하지 않다면 레이블을 추가할 수 있습니다.
피그마로 토글스위치를 만드는 방법은 너무 간단합니다.
1. 단축키 F를 눌러 캔버스에 너비 40, 높이 20의 영역을 만듭니다. 모서리반경 10 설정합니다.
2. 만든 프레임은 단축키 Ctrl+R(Command+R) 눌러 이름을 ''Toggle"로 변경합니다.
2. 단축키 O를 눌러 너비, 높이 16의 원형을 만듭니다.
3. 만든 원형을 Toggle 프레임 내부에 포함시킵니다.
4. 원하는 색으로 ON상태의 토글 색상을 적용합니다.
디자인이 끝났다면 이제 컴포넌트로 만들어야겠죠~
1. 만든 토글을 단축키 Ctrl+Alt+K (Command+Option+K) 눌러 컴포넌트로 만듭니다.
2. Add Variable 아이콘 누르고 컴포넌트 세트로 변경합니다.
3. 복제된 컴포넌트의 베리언트 네이밍을 OFF로 설정, 기존 컴포넌트는 ON으로 설정합니다.
4. 컴포넌트의 Property1은 state(상태)로 변경합니다.
5. OFF 컴포넌트는 비활성 상태의 색상(ON 컴포넌트와 시각적으로 분명한 차이가 있어야 함)으로 변경합니다.
여기까지 컴포넌트 세트로 만드는 과정입니다.
이제 프로토타입 적용해 볼까요~
1. 디자인패널에서 프로토타입 패널로 단축키 Shift+E 눌러서 전환합니다.
2. ON컴포넌트 선택 후 OFF컴포넌트로 핫스팟(+) 연결합니다.
3. 펼쳐진 인터렉션 모달창에서 애니메이션 설정 (Smart Animat)로 설정하고
가속도(Ease out), 시간(300ms) 그대로 기본 설정으로 둡니다.
4. OFF컴포넌트 선택 후 ON컴포넌트로 핫스팟(+) 연결합니다.
5. 단축키 F 눌러서 빈 프레임 하나 만들어줍니다.
6. 토글스위치 컴포넌트를 복사 한 인스턴스를 빈 프레임 안에 포함합니다.
7. 빈 프레임 선택 후 Ctrl+Alt+Enter(Command+Option+Enter) 눌러서 프레젠테이션 모드에서 확인합니다.
+ 위의 예시 이미지처럼 ON, OFF 레이블 추가를 원하시면 위에 토글스위치에 만들어둔 컴포넌트에 텍스트 추가하시면 됩니다.
아래 영상은 off상태일 때 원형을 달 모양처럼 적용해 본 예시입니다. 위 설명이 복잡하게 느껴지시면 10분 정도의 영상이니 유튜브 영상 참고하시면 될 것 같습니다. :) 읽어주셔서 감사합니다.