[TIL] Figma: 고급진 파워포인트

Nowwyun·2023년 5월 22일
0

Today I Learn

목록 보기
12/15
post-thumbnail

"예쁜 디자인보다는 얼마나 기획을 성실하게 했고 UX가 얼마나 체계적으로 되어있는지가 중요하다. "

피그마 기초

  • Move
    기본 고정
  • Scale
    프레임 안에 있는 요소들을 함께 확장/축소

  • Frame
    가장 기본이 되는 작업의 틀
  • Section
    섹션 안에서 작업을 구분하기 위한 틀
  • Slice
    캡쳐와 비슷한데 Export할 때 특정부위만 사용하는 틀(거의 안씀)

  • Star
    다각형(각도 조절로 가능함)

  • pen
    꼭지점을 찍어서 완성된 도형을 만듦(잘 안씀)
  • penceil
    급하게 설명하거나 넣을 때

  • plug in
    가벼운 피그마를 위해서 확장 기능을 붙일 수 있음

  • 오토레이아웃
    shift+a 자동정렬
    간격 정렬할 때, padding 설정할 때 사용하기 좋음

  • 컴포넌트
    컴포넌트는 하나의 기능을 집단으로 수정을 했을 때, 동시에 수정될 수 있도록 돕는다.
    왼쪽 버튼

  • varients
    컴포넌트 위에 컴포넌트이다. 컴포넌트를 하나의 그룹으로 묶는다고 해야한다.
    (상태관리의 개념으로 보면 되나..?)
    별점을 줄 때 , 여길 클릭하면 몇 점을 줘라 하는 것처럼!

  • Text Style
    내가 어떤 스타일로 적든 스타일 지정해서 그대로 사용할 수 있도록 하는 기능 이미 정해져 있는 피그마 스타일 가이드를 이용하면 훨씬 유용하다.

  • 모바일 앱
    Mirror 기능을 사용하면 실시간 뷰어기능이 가능하다.

  • 스타일 정의
    17pt 아래로 쓰지 말아라 😦


피그마 확장프로그램

  1. Iconify
    무료 아이콘을 import 해올 수 있는 플러그인

  2. remove BG
    누끼따는데 화질이 좀 떨어짐
    (→ 개인 API키를 설정해야 사용할 수 있음)

  3. unsplah
    저작권 없는 이미지 사용하는 플러그인
    (웹 페이지에서 사용할 수 있지만 출판을 하거나 굿즈를 만들 땐 사용하면 안됨)

  4. Content reel
    예시로 사용하는 AVATER 이미지에서 주로 사용하는 플러그인

  5. Better Font Picker
    폰트의 예시를 직관적으로 볼 수 있는 플러그인

밀리의 서재 스타일 가이드

UI를 고민할 때, 꼭 해당 도메인에 국한되는 것이 아니라 다른 디자인을 레퍼런스할 필요도 있다. 또한, 예쁘기만 하다고 좋은 프로그램이 아니다.


실습

이커머스 사이트 MVP인 구매 프로세스를 적립했다. 홈부터 상세, 구매페이지, 주문자 정보... 아래와 같은 프로세스를 적립하고 협업을 위해 ASANA를 이용해서 간트차로 상태관리를 진행했다.

푸드레인이라는 B2B 이커머스 기업을 기반으로 아직 출시되지 않은 푸드레인의 앱을 기획해보고자 한다. 우리가 레퍼런스해야 할 UI 리딩, 경쟁 기업을 조사한 결과 다음과 같은 고려 사항을 발견할 수 있었다.

  • 등록되어있는 사업장 외에는 배송지 미허용
  • 장바구니에 최소 주문 금액
  • 필수로 표시된 배송시 요청사항
  • 샘플신청, 구매하기 버튼 분리
  • 중량별 가격 안내
  • 추천, 연관, 유사 상품 노출

    토스 페이먼트의 구매API 프로세스처럼 모든 상황에서 어떤 흐름으로 정리할지 하나부터 열까지 고민할 것들이 너무 많다. 아래와 같이 결제 실패했을 때, 결제 성공했을 때.. 어떤 화면을 띄울것이면 어떤 로딩창을 띄울 것인지 고려해야 할 부분이다.

Reference ✍️

https://www.figma.com/file/mCCsB0JYPPW4Fj2QNh8N45/millie-Design-Library-2.0-(Community)?type=design&node-id=2-47&t=PkBWG9J95hrFSVyF-0
https://docs.tosspayments.com/guides/payment/virtual-account

profile
근본있는 서비스 기획자를 꿈꿉니다 🧑🏻‍💻

0개의 댓글