피그마(figma) 최신 트렌드의 검색 바(interactive search bar) 단계별로 자세히 만드는 방법(PPT 기능 비교)

검색 바는 웹/모바일 모두에 있어 가장 중요한 기능입니다. 그리고 검색되는 검색 바는 계속적으로 진행되고 있습니다. 검색 바는 네이버, 구글 등에서 하고 있는 전체 검색 바의 형태가 있고, 중분류 주제 혹은 소분류 주제를 찾는 검색 바의 형태가 있습니다.

가장_일반적인_검색형태(구글_네이버)

아래와 같은 검색바 형태가 있습니다. 오늘은 아래와 같은 최신 트렌드 검색 바 형태를 만들어보는 시간을 가져보겠습니다. 이제 피그마를 켜주세요!

모바일버전_검색바

완성본

피그마로 최신 트렌드 검색 바(Search bar) 만드는 방법

1. 돋보기 만들기

• 1) 단축기 'O' 원 사용 : 18X18 크기, Fill 제거, stroke 2
• 2) 단축기 'P' 펜툴 사용(두 번째 그림 참고) : 4x4 크기, center, 양 끝 round 변경
• 3) 단축기 'ctrl+g' 그룹화 : 45도 각도로 기울기(맨 우측 바깥쪽 클릭 시 기울기 가능)_그룹명_검색 아이콘으로 변경

그림_1

2. 텍스트 만들기

• 1) 검색 바에 검색할 글씨체
  글씨체 : roboto
  굵기/크기 : 세미 볼드/14
• 2) 돋보기와 중앙정렬

그림_2

3. 검색 바 만들기

• 1) 검색 바와 텍스트 모두 선택 : 오토레이아웃(shift+a)
• 2) padding 값 : 10(위/옆 모두)
• 3) coner radius 값 : 10
• 4) 배경색 : 회색으로 변경
• 5) 오토레이아웃 명칭 변경 : 검색 바

그림_3

4. 검색 바 '닫기' 버튼 만들기

• 1) 펜툴 혹은 위에 만들었던 일직선 복사 : 크기 4x4(라운드 삭제)
• 2) 단축기 'O' 사용 : 22x22 크기, fill(백그라운드) : 회색
• 3) 원을 'x' 뒤에 위치시켜놓기 
• 4) 'x' 색 변경 : 흰색
• 5) 'x', 원 : 컴포넌트 변경 + add varient 추가
• 6) 컴포넌트 명칭 변경 : 검색 바 닫기 버튼
• 7) propreries : 상태/defult/pressed
• 8) 두 번째 닫기 버튼 : fill 색 변경(black)
• 9) 프로토타입 연결 
  ㄱ) while press
  ㄴ) chage to
  ㄷ) smart animate : 시간 변경 40ms

그림_4

5. 검색 바 닫기 버튼 색 빼고 검색창 컴포넌트로 변환

• 1) 검색 바 닫기 버튼 : 두 개의 벡터를 그룹화하고 그룹화된 닫기와 원을 묶어서 subtract selection으로 만들기
• 2) 검색 창 컴포넌트 변환 검색 바
  ㄱ) 검색 바 너비 : 44로 변경
  ㄴ) 닫기 버튼 layer : pass through 0%
  ㄷ) 텍스트 laeyer :  pass through 0%
• 3) add varient 추가 및 위치 변경
  fill 색 변경 조금 더 어둡게(원하는 스타일로 변경)
  추가된 add varient 추가 : fill 색 변경 조금 더 가벼운 색(원하는 스타일로 변경) → 위치 변경(맨 마지막 그림)

그림_5

그림_6

6) 프로토타입 연결

• 1) state → hover : while hovering/chage to(property1 hover) 
• 2) hover → press down : while pressing/chage to(property1 press down) 
• 3) sate → press down : while pressing/chage to(property1 press down)
• 4) press →  open : mouse up : chage to(property1 open)
• 5) close search bar button → state : on click(property1 default)

 

참 쉽죠!? 따라 하시면 다음과 같이 만드실 수 있습니다!

 

*) 체크박스 만드는 방법

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

*) 라디오 버튼 만드는 방법

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

*) 이미지 캐러셀 만드는 방법

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

*) 툴팁 만드는 방법

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

 

구독을 눌러주신다면 지속적으로 컴포넌트를 업데이트해 보겠습니다. 감사합니다.