본문 바로가기

728x90
반응형

체크박스

피그마 즐겨찾기(북마크) 컴포넌트 만드는 방법(UI/UX 컴포넌트 쉽게 만들기) 유저들이 즐겨 찾는 항목을 저장하고 싶을 때 보통 별모양을 클릭해서 북마크로 유저의 관심사를 저장합니다. 그래서 오늘은 그 중요한 기능 중하나인 즐겨찾기/북마크 컴포넌트를 만들어 보겠습니다. 초보자도 쉽게 따라 하실 수 있는 북마크/즐겨찾기 컴포넌트 지금부터 시작합니다. ▼▼▼▼완성본은 아래 동영상은 참조해주세요!▼▼▼▼ 즐겨찾기컴포넌트 즐겨찾기 단계적으로 만드는 방법(아래 설명 참조해 주세요!) 우선 즐겨찾기의 핵심인 별모양부터 만들어 봅시다. 아래 순서에 따라 별을 만들고 크기 설정 후 레디우스 크기 설정, 오토레이아웃 순으로 차례대로 따라 하시면 됩니다. 1. 별모양 만들기 - 상단 별모양 클릭 - 크기 : 18x18 - coner radius : 0.5 - auto layout 설정 → 이름 변경.. 더보기
피그마(figma) 최신 트렌드의 검색 바(interactive search bar) 단계별로 자세히 만드는 방법(PPT 기능 비교) 검색 바는 웹/모바일 모두에 있어 가장 중요한 기능입니다. 그리고 검색되는 검색 바는 계속적으로 진행되고 있습니다. 검색 바는 네이버, 구글 등에서 하고 있는 전체 검색 바의 형태가 있고, 중분류 주제 혹은 소분류 주제를 찾는 검색 바의 형태가 있습니다. 아래와 같은 검색바 형태가 있습니다. 오늘은 아래와 같은 최신 트렌드 검색 바 형태를 만들어보는 시간을 가져보겠습니다. 이제 피그마를 켜주세요! 피그마로 최신 트렌드 검색 바(Search bar) 만드는 방법 1. 돋보기 만들기 1) 단축기 'O' 원 사용 : 18X18 크기, Fill 제거, stroke 2 2) 단축기 'P' 펜툴 사용(두 번째 그림 참고) : 4x4 크기, center, 양 끝 round 변경 3) 단축기 'ctrl+g' 그룹화 :.. 더보기
피그마 체크박스(checkbox) 컴포넌트 쉽게 만드는 방법(feat.PPT와 무엇이 다를까?) 현직 기획자가 만드는 쉬운 컴포넌트 PPT로 체크박스를 만드는 방법은 정말 간단합니다. 체크박스 기능은 유저의 검색폭을 넓히기 위해서 다양한 조건으로 검색할 수 있게 도와주는 기능인데, 라디오 버튼과는 달리 체크박스는 2개 이상 중복적으로 적용이 가능하다는 점에 있어서 라디오 버튼과는 다릅니다. 하단에 보이는 그림은 PPT의 checkbox 표현인데, 참 쉽죠? 그렇다면, 피그마는 어떻게 생겼을까요? 하단에 보이는 그림은 피그마로 체크박스를 만든 것인데, 당연 다르죠? 피그마는 프로토타입을 위해 만든 것이라고 보시면 더욱더 편하겠습니다. 피그마로 체크박스(checkbox) 만드는 방법 1. 체크박스 만들기 텍스트 및 네모박스 만들기 글씨체 : Medium 글씨크기 : 18 네모박스 크기 : 20x20(Radius 3, stroke 2, f.. 더보기

728x90
반응형