피그마를 다뤄야 🥺진짜 기획자🥺가 되는구나...

유닛 코드 : PXO-208, 선택형

 

안녕하세요 여러분 :)

가을 시즌의 마무리를 선택유닛과 함께 하려고 합니다!

 

제 투두메이트 기획안을 보셨던 분들은 제가 피그마로 인해 고통받던... 모습을 보셨을겁니다.

너무 낯설고... 어렵고... 🥶 시간도 오래 걸리는 피그마... 저에게는 시련과 고통을 주는 대상이었는데요,

고통은 이겨내라고 있는 거겠죠? 💪

 

피그마와 저의 대결! 아래에서 보고 옵시다~

 

STEP 01.   피그마 템플릿 활용 🧩 

우와... 피그마에 템플릿이 이렇게나 많았다니! 처음 알았네요 🥹

저희 투두메이트 타진 제안서에 넣을 UI를 제작해볼게요 :)

 

Sign in & Sign up Page (Community) | Figma

먼저 위 템플릿을 불러와봤어요! 저는 저의 기획인 "투두메이트" 의 회원가입 페이지를 제작하여 제안서에 넣고 싶었습니다. 

이 기본 템플릿을 저의 기획안에 맞게 편집해볼게요 :)

요렇게!

 

짠! 너무나도 간단하게 투두메이트 PC 기준 회원가입 페이지가 만들어졌네요!

적절한 이미지를 넣고 기존 템플릿 상 문자들도 쉽게 편집 가능하니 너무 편했어요.

 

제가 이 선택유닛을 하기 전까지는 템플릿의 존재를 몰랐는데, 확실히 템플릿을 편집하여 제 것으로 만드니 시간도 절약되고 훨씬 예쁜 UI가 만들어지는 것 같네요 ㅎㅎ

 

STEP 02.   UX를 고려한 UI 구성과, Prototype에서의 인터랙션 적용 🦔

UX를 고려한 UI, 너무너무너무 x9999 중요하죠!

 

이제 사용자들이 제가 피그마에서 구성한 사항들을 어떻게 경험할지 "Wire" 기능으로 표현해볼게요!

제가 이전에 구성해본 투두메이트 어플 화면을 이용해서 진행해볼게요 :) 💪

 

 

이렇게 화살표를 추가해서,

1. 앱으로 들어가서 2번 페이지로 연결된다.

2. "투두" 탭을 누르고 날짜를 누르면 아래와 같이 투두리스트가 펼쳐진다.

3. "캘린더" 탭을 누르고 날짜를 누르면 아래와 같이 타임라인이 펼쳐진다.

4. "캘린더" 탭을 누르고 scroll down 한 후 "calendar" 버튼을 누르면 아래와 같이 타임라인이 펼쳐진다.

를 시각적으로 보이고자 했습니다.

 

이 wire 기능을 통해서 사용자들이 제가 구현한 어플을 어떤 순서로 사용할지 보일 수 있었습니다.

다만, 화살표를 빈 곳으로 자유자재로 이동할 수 있는게 아니어서 다소 어려웠네요 ㅎㅎ

 

실제 기획자들은 이 화살표를 어떻게 이용하는지 궁금해져서, 기획자들이 피그마를 이용한 선례들을 더 많이 찾아봐야겠다고 생각했습니다. 

 

STEP 03.   Plugin을 활용한 기획안 강화 🔥

이제 기획안의 완성도를 높일 수 있는 플러그인도 활용해볼게요!

 

원하는 컴포넌트 우측에 +를 클릭한 후, 좌측 상단 피그마 아이콘을 클릭해서, "Plugins" → "Manage plugins" 을 눌러보니

 

오호! 이렇게나 많은 플러그인들이 주루룩 뜨더라고요!

 

 

1. Skew Skew 플러그인

 

으아닛! 제 두번째 화면이 요렇게 15도로 옆으로 돌아갔어요!

저는 지금까지 사람들이 직접 화면들을 옆으로 돌리는... 줄 알았는데 플러그인으로 간편하게 되는거였네요!!!

 

2. Bend Your Type 플러그인

 

텍스트를 굽힐 수 있다길래 후다닥 사용해봤는데,

 

요렇게 ㅎㅎ 귀엽게 굽혀지네요! 너무 신기해요... 제가 직접 해야하는게 아니라, 버튼 몇번만 누르니 원하는대로 바뀌니 너무 편리했습니다 ㅎㅎ

 

이렇게 플러그인을 활용하여 기획 시간도 단축하고, 더욱 다양한 것들을 구현해볼 수 있을 것 같아요!

---

이번 선택 유닛은 정말 해보길 잘했다는 생각이 들어요!

모두 피그마 선택유닛은 꼭꼭 시간 내서 해보시기를!

 

🌟기획자로서, 위 내용은 기획자에게 필수인 피그마 템플릿 및 플러그인 경험 단계로 평가한다.
 

피그마를 다뤄야 🥺진짜 기획자🥺가 되는구나..._끝.