피그마에서 체크박스를 만들어보자
팀플하다가 피그마 프로토타입 제작하는데 체크박스 만드느라 몇 시간을 끙끙댔던 좋지 않은 기억이 있어서 만드는 법을 조금 끄적여보려고 한다.
오늘은 피그마에서 프로토타입을 실행했을 때 위와 같이 잘 작동하는 체크박스를 만들어보자
자 드가자
일단 준비물로는 빈 체크박스와 체크된 체크박스 2개가 필요하다.
빈 체크박스와 체크된 체크박스를 동시에 선택하고 컴포넌트 셋을 만들어준다.
빈 체크박스를 클릭하면 체크된 체크박스로 바뀌어야하므로 상호작용을 설정해줘야한다.
빈 체크박스를 선택한 후 위와 같이 설정한다.
보라색 화살표가 뜨면 성공.
체크된 체크박스를 해제할 수 있어야하므로 반대로도 똑같이 설정해준다.
이건 직접 한 번 해보시길...
체크박스를 사용할 프레임에 지금까지 만든 컴포넌트를 복사하고 붙여넣는다.
서로 껐다켰다 할 수 있으니 뭘 갖고와도 상관 없다. 본인이 사용하고자하는 초기세팅대로 가져오면 된다.
아마 잘 작동할 것이다.
주의사항 및 아마도 님들이 당면했을 문제
위와 같이 컴포넌트 셋을 만들지 않고 바로 상호작용 탭에서 Changes to를 사용하려고 하면 비활성화 된 Changes to 버튼이 당신을 기다리고 있을 것이다.
반드시 컴포넌트 셋을 만들어야 한다.