[TIL] Figma 기본 기능, 프로토타이핑 실습 아이템 기획 - 5/22

오늘은 디자이너가 아닌 기획자로서 알아야 할 Figma 기능들에 대해서 알아봤습니다.

처음이라 되게 기초적인 부분부터 시작하니 입문자가 보시는 것을 추천합니다.

숙련자분들께서는 틀린 부분이 있으면 후두려까주시고, 유용한 기능도 추천해주시면 감사하겠습니다.

 

번호에 따라 기능 설명을 적어두었으니 참고하시면 됩니다.

1. 커서

• move
  - 오브젝트를 옮기는데 특화된 커서
• scale
  - 오브젝트 크기를 키우는데 특화된 커서
  - 프레임과 안의 구성요소를 같은 비율로 함께 키우고 싶을 때 선택하고, 프레임을 늘리면 됨.

** Space를 누르고 스크롤하면 오브젝트를 건드릴 염려없이 화면을 이동할 수 있다.

 

2. 프레임, 섹션

• Frame
  - 캔버스가 되는 Frame을 생성함
  - 사이드툴바에서 휴대폰 기종에 맞는 프레임으로 변경 가능(아래 사진 참고)
• Section
  - 여러 개의 컴포넌트, 프레임 등을 하나로 묶을 수 있음
• Slice (잘 사용할 일이 없는 기능)
  - 오브젝트를 원하는 크기로 자를 수 있음

 

3. 도형그리기

• 특별히 설명할 필요없이 아래의 사진에 있는 같은 도형, 화살표, 직선, 이미지, 비디오를 생성할 수 있음
• 추가로 Polygon의 경우 각의 갯수도 지정할 수 있음
• 각을 둥글게 만들 수 있음

도형 종류

4. 펜

• pencil
  - 그림판처럼 그릴 때
• pen (디자인할 때 사용해서 UX 디자인을 할 때는 많이 사용하지 않음)
  - 직선을 잇고, 곡선으로 휘게 할 수 있음

 

5. 텍스트

• 텍스트 박스 생성 가능
• 사이드 툴바
  - TextStyle: 폰트, 크기 옵션 규격화 기능 -> 모바일의 경우 되도록 17pt보다 크게 하자

6. 플러그인

• 유용한 plugin
  • iconfy -무료 아이콘
  • remove BG - 누끼 플러그인(무료는 화질 저하)
  • Unsplash -무료 이미지(굿즈로는 사용하면 안됨)
  • Content Reel - 특정 도형에 예시 이미지를 넣을 수 있는 플러그인
  • Better Font Picker - 피그마에 폰트 미리보기가 없음. 해당 플러그인으로 폰트를 미리볼 수 있음

 

 

그 밖의 개념 및 기능

• Layer: 디자인은 Layer들이 쌓여서 구성됨
  • 제일 상위에 있는 Layer를 컨트롤 해야하는데 하위 Layer에 가렸을 때
    • 하위 Layer를 보이지 않게 눈 모양 버튼을 누름
  • 해당 Layer를 수정을 할 수 없도록 자물쇠 모양 버튼으로 잠금 가능
  • 오른쪽 툴바를 이용해서 좌표 수정 가능 (좌표는 소속된 프레임 기준)
  • 너비, 높이 변경 가능
    • 비율 고정 기능
  • 투명도 조절가능
  • stroke: 윤곽선 생성
    • 굵기, 색 조절 가능
  • effects
    • shadow: 그림자로 입체감을 줌
      • 특정 버튼을 누르도록 강조하고 싶을 때
    • blur: 테두리를 뿌옅게 만들어줌
      • 배경으로 설정할 때 주로 사용
      • 한국에서는 거의 사용하지 않음
• Share
  • 무료 계정일 경우 총 3명까지는 편집 권한 줄 수 있음
    • 근데 3명 넘어도 괜찮을지도
    • 팀원이 5명이니까 계정을 하나 파서 공유하는게 좋을듯
• Auto layout
  • 안의 요소의 크기가 프레임보다 커질 때 프레임 크기 조절 가능
  • 정렬 기능
• Component
  • 공통적으로 사용하는 아이콘을 재사용하기 위해서 사용
  • 하나만 수저해도 다 수정 가능
• 텍스트 크기, 폰트도 규격화
  • Text Style
  • 17pt 이상으로 사용하기 → 너무 작음
• Variant
  • 비슷한 역할을 하는 컴포넌트들을 묶어서 쉽게 교환할 수 있음
    • ex) 로그인, 로그아웃 버튼을 묶을 수 있음

 

 

---

프로토타입 실습 아이템 기획

Figma 실습을 위해 각 조마다 만들고 싶은 서비스를 기획하여 프로토타입을 만들어보기로 했다.

 

먼저 우리는 각자 페인포인트와 해결책을 브레인스토밍하고, 아이디어 제공자의 설명을 들은 후 투표를 통해 선택했다.

 

선택한 아이디어를 중심으로 다시 페인포인트와 해결책을 브레인스토밍을 했는데 이 과정에서 비판적인 의견이 많이 나왔다.

 

비판적인 의견으로 인해 피보팅을 통해 방향을 전환했고, 처음 아이디어와는 완전히 다른 방향으로 전개되었다.

 

이후 MVP에 추가할 기능을 충분한 토의 끝에 정의했고, 간단하게 와이어 프레임만 짜고, 내일 설계할 페이지의 파트를 나누고 마무리했다.

 

아이디어 투표를 진행하기 전에 아이디어에 대해 비판적인 시각으로 충분히 얘기를 나누고 투표를 진행했어야 했다는 생각이 들었다.

 

내일은 테마 색을 정하고, 각자 맡은 파트의 페이지를 제작할 예정이다.