피그마 썸네일형 리스트형 피그마 선택 옵션 컴포넌트 초이스 칩(choice chips) 단계별 적용법(체크박스, 라디오 버튼, 초이스 칩스, 멀티 칩스) 유저들의 개인화가 보편화되면서 기획자들은 유저가 클릭을 조금이라도 더 잘 받을 수 있도록 컴포넌트를 적극 활용하고 설계하고 있다. 어찌 보면 불편한 UI/UX를 고집하는 대기업 쇼핑몰은 존재한다. 그러나 그렇게 굳이 바꾸지 않아도 우리는 매출이 잘나니깐 굳이 바꾸려고 하지 않는다. 회사를 다녀보니....,, 유저의 편의성을 고려한 개인적인 영역을 고려하기보다는 익숙한걸 선호하는 회사가 더럭 있다는 것이다. 보통 외주를 주는 경우가 편의성은 고려하지 않고 뽑아내기 바쁘고 설계는 뒷전인 거 같다는 생각이 든다. 기획자라면 새로운 것을 지속적으로 탐구하고 그로부터 새로운 걸 계속적으로 적용해서 노출부터 시작해서 클릭, 전환, 리텐션까지 계속적으로 업데이트해줘야 한다고 본다. 지지말고 이겨서 올드한 플랫폼을 트.. 더보기 피그마 즐겨찾기(북마크) 컴포넌트 만드는 방법(UI/UX 컴포넌트 쉽게 만들기) 유저들이 즐겨 찾는 항목을 저장하고 싶을 때 보통 별모양을 클릭해서 북마크로 유저의 관심사를 저장합니다. 그래서 오늘은 그 중요한 기능 중하나인 즐겨찾기/북마크 컴포넌트를 만들어 보겠습니다. 초보자도 쉽게 따라 하실 수 있는 북마크/즐겨찾기 컴포넌트 지금부터 시작합니다. ▼▼▼▼완성본은 아래 동영상은 참조해주세요!▼▼▼▼ 즐겨찾기컴포넌트 즐겨찾기 단계적으로 만드는 방법(아래 설명 참조해 주세요!) 우선 즐겨찾기의 핵심인 별모양부터 만들어 봅시다. 아래 순서에 따라 별을 만들고 크기 설정 후 레디우스 크기 설정, 오토레이아웃 순으로 차례대로 따라 하시면 됩니다. 1. 별모양 만들기 - 상단 별모양 클릭 - 크기 : 18x18 - coner radius : 0.5 - auto layout 설정 → 이름 변경.. 더보기 피그마 개인정보 보호 정책 자연스럽게 넘어가게하는 컴포넌트 만들기(유저가 자연스럽게 넘어가게 만드는 방법) 오늘은 개인정보 보호 정책을 스무스하게 넘어가기 위한 체크박스를 만들어 볼 건데요! 유저가 빠르게 자사의 홈페이지에서 동의를 받는 방법입니다. 물론, 한국에서 유저의 클릭을 하지 않고 넘어가게 하는 정책에 대한 가이드라인은 회사의 정책마다 다른 것 같습니다. 일단, 이번에 만드는 것은 유저가 클릭을 하지 않고 자연스럽게 클릭이 되는 방식으로 유도해 보겠습니다. 완성본! 개인정보 보호 정책에 동의하는 체크박스 만들기 1. 체크박스 만들기 체크박스 만들기 크기 : 20x20 테두리 크기 : 2 fill : -(삭제/빼기) 2. 체크박스 컴포넌트 변환 체크박스를 선택한 후 컴포넌트로 변환 체크박스 전체 컴포넌트를 선택 자산 명칭 변경 : state values 값 변경 : 차례로 false/true 왼쪽 패널.. 더보기 피그마(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.. 더보기 [피그마 중급 강의 9강] PPT와 다른 Figma의 강력한 프로토타입 기능 이미지 캐러셀 슬라이드(image carousel slider) 아직도 ppt로 작업하나요? 오늘은 이미지 캐러셀에 대해서 배워 볼 건데요. 이미지 캐러셀 슬라이드가 무엇인지 먼저 알아보겠습니다. 이미지 캐러셀 슬라이드는 유저가 스크롤을 내리지 않고도 볼 수 있는 정보의 양을 극대화하기 위해 사용하는 기법입니다. ppt로는 슬라이드 작동하는 것을 보기 쉽지 않아서 이커머스에서도 이와 같은 이미지 캐러셀을 사용하고 있습니다. 모든 것은 응용하고 예쁘게 디자인을 하는 것에 있습니다. 하는 방법만 익히면 그다음부터는 UI/UX 설계하면서 예쁘게 만들어보세요! 이미지 캐러셀 슬라이드 만드는 방법 1. 이미지 5개를 준비하고 frame은 아이폰 13 pro로 준비합니다. 이미지를 정중앙에 배치하고 여러분들이 원하는 크기를 배치합니다. 여기에서 중요한 점은 양옆에 이제 작은 그림들이 들어갈 것이기에 레이아.. 더보기 [피그마 중급 7강] 툴팁(느낌표/물을표) 컴포넌트 UI/UX(ToolTIP) PPT와는 전혀 다른 툴팁(tooltip) 비교(프로토타입 구현) PPT에서 굉장히 쉽게 그렸던 툴팁이 피그마로 넘어가면서 조금 간단하지 않게 되었습니다. 그렇지만 유저가 무엇인지 궁금해할 때 꼭 필요한 기능인 툴팁 기능에 대해서 배워보겠습니다. 사실상 웹사이트에서 무언가 정보에 대해서 알고 싶을 때 이러한 기능을 많이 사용하는데요. 쉽고 빠르게 아래 글을 따라오시면 되겠습니다. 툴팁(TOOLTIP) 간단하니 따라와 주세요! 1. 텍스트 입력 + 텍스트 굵기 텍스트 입력 : Sample text field 글씨 굵기 : semi bold 2. 오토레이아웃 ▶ 수평 padding ▶수직 padding ▶도형 색상(감도 설정) ▶ 도형 테두리 설정 ▶ 텍스트 색상 설정 수평 padding : 20 수직 padding : 20 도형 색상 : 검은색(투명도 60%) 도형 테두.. 더보기 [피그마 중급 1강] 라디오 버튼(Radio Button) 만들기<피그마의 프로토타입 만들기, PPT와 다른 기능> UI/UX에서 Componet는 반복적으로 사용되는 typography(표현) + color + 도형으로 구성된 UI 요소를 말합니다. 이제 컴포넌트를 활용하여 라디오 버튼을 만들어보겠습니다. 라디오버튼(Radio Button) 만들기(초중급!) 넓이 16, 높이 16인 네모박스를 만들어 줍니다. 그리고 16X16 네모박스를 ALT를 눌러 새로운 네모를 하나 더 만들어 줍니다. 복사한 네모박스를 넓이와 높이를 8X8 크기의 네모박스로 변환한 후 레디우스(모서리)를 30을 입력합니다. 원의 색깔을 검은색으로 바꿉니다. 그리고 처음에 만들었던 네모를 테두리를 검은색으로 변환하고 모서리를 100으로 맞춥니다. 스트로코를 준 동그라미 원의 색깔을 흰색으로 바꿉니다. 그리고 두 개의 원을 겹칩니다. 겹치고 디자인.. 더보기 이전 1 2 다음
