피그마 체크박스(checkbox) 컴포넌트 쉽게 만드는 방법(feat.PPT와 무엇이 다를까?) 현직 기획자가 만드는 쉬운 컴포넌트

PPT로 체크박스를 만드는 방법은 정말 간단합니다. 체크박스 기능은 유저의 검색폭을 넓히기 위해서 다양한 조건으로 검색할 수 있게 도와주는 기능인데, 라디오 버튼과는 달리 체크박스는 2개 이상 중복적으로 적용이 가능하다는 점에 있어서 라디오 버튼과는 다릅니다.

 

하단에 보이는 그림은 PPT의 checkbox 표현인데, 참 쉽죠? 그렇다면, 피그마는 어떻게 생겼을까요?

PPT_체크박스

하단에 보이는 그림은 피그마로 체크박스를 만든 것인데, 당연 다르죠? 피그마는 프로토타입을 위해 만든 것이라고 보시면 더욱더 편하겠습니다. 

피그마_체크박스_완성본

피그마로 체크박스(checkbox) 만드는 방법

1. 체크박스 만들기 텍스트 및 네모박스 만들기

• 글씨체 : Medium
• 글씨크기 : 18
• 네모박스 크기 : 20x20(Radius 3, stroke 2, fill 삭제)
• 네모박스+텍스트 : 오토레이 아웃 지정

해설1

2. 지정된 오토레이아웃 설정하기

• 오토레이아웃 명칭 변경 : option
• 수평간격/수직간격 : 24/12
• 배경색 : +(흰색)
• 오토레이 아웃 radius : 10

해설2

3. 컴포넌트로 변환하기

• option을 컴포넌트로 변환한 후
• 하단 네모(체크박스)를 오토레이아웃을 변경 
  수평 padding/ 수직 padding : 0/3
• ctrl+alt+G으로 변경 후 이름 checkbox로 변경

해설3

4. 컴포넌트 복사 및 설정하기

• 컴포넌트를 복제(add variant)
• properties 명칭 변경 : state
• 위 컴포넌트/하단 current variant

해설4

5. 체크박스 복사 및 설정하기

• 체크박스(스트로크 포함) 색깔 : 초록(34D67E)
• 체크 만들기 : 펜툴을 이용해서 6.5x4 사이즈의 체크 만들기

해설5

7. 체크박스 안에 넣기

• 체크박스 안에 체크박스 프레임 안에 넣기 : 체크박스 프레임 안에 ctrl+x → ctrl+v
• 체크박스 색 흰색으로 변경하고 center 3으로 변경
• center 옆에 점 3개에서 join : round로 변경

해설6

8. 체크박스 선택 시 배경색 변경

• 선택 시 배경색을 지정할 겁니다.
  아래 체크박스를 선택하고 fill에 들어가서 hsl로 변경하고 148/74/96으로 변경

해설7

8. 다중 선택 창 만들기

• 복제한 컴포넌트를 10개를 복제 : shift+d
• 10개를 오토레이 아웃으로 변환
• 엔터를 쳐서 frame을 fill container로 변경

해설8

9. 다중 선택 전체 컴포넌트로 변경 후, layer 순번 변경

• 다중 선택의 우측의 Layer에서 순번을 1~10으로 설정 

해설9

10. 프로토타입으로 연결

• 첫 번째 컴포넌트와 두 번째 컴포넌트 연결하고 옵션값 변경
  On Click, change to, instant 
• 두 번째 컴포넌트와 첫 번째 컴포넌트 연결하고 옵션값 변경
  On Click, change to, instant 

해설10

해설11

피그마의 강력한 기능 다른 글도 한번 만나보세요!

[피그마 중급 7강] 툴팁(느낌표/물을표) 컴포넌트 UI/UX(ToolTIP) PPT와는 전혀 다른 툴팁(tooltip) 비교(

 

[피그마 중급 1강] 라디오 버튼(Radio Button) 만들기<피그마의 프로토타입 만들기, PPT와 다른 기능>

 

[피그마 중급 강의 9강] PPT와 다른 Figma의 강력한 프로토타입 기능 이미지 캐러셀 슬라이드(image ca