프로덕트 디자이너 예습일지 - 피그마 기본개념

 
디자인 프로그램 하면 떠오르는 건?
 
옛날엔 주로 '어도비'프로그램 세트를
떠올리곤 했다(포토샵, 일러스트 등등)
 
물론 아직도 혼용해서 사용은 하고 있고,
인쇄시안 작업은 일러스트가 강세지만
 
요즘 트렌드는 '피그마' 프로그램이다
 
피그마 프로그램은 특히 UXUI디자인에
특화되어 있는 디자인 프로그램이라서
 
디자인 직군 중 UXUI를 꿈꾸는 디자이너에겐
필수 아닌 필수적인 프로그램이다.
 
오늘은 디자인 프로그램 피그마에 대해 알아보자
 

---

 

피그마란?

 
"클라우드 기반의 디자인 툴"로서
인터넷 연결만 있으면 "어디서든" 작업할 수 있다.
 
PC에 전용 PC프로그램을 깔 수도 있지만,
깔지 않고서도 이용 가능 하다는 점이 장점
 
인터넷 연결을 기반으로 이용하는 앱이다 보니
각 팀의 담당자가 동시접속하여
실시간 협업이 가능하다는 장점 때문에
업계에서 사용하는 비율이 점차 늘고 있다.
 
-
 
특히 피그마는 프로토타입제작이
가능하다는 강점이 있는데,
 
프로토타입 제작이란,
파워포인트 프레젠테이션을 띄우듯
 
피그마 작업페이지에서
각각 연동한 버튼과 화면을
미리 보기 화면으로 띄워주는데,
 
미리 보기 화면에서
아이콘과 화면을 클릭하면
연결된 페이지로 넘어가는 기능이다.
 
이런 미리 보기 즉 프로토타입을 제작하면
각 아이콘이나 화면을 클릭해서
제품의 이용단계를 점검할 수 있어
본격 제작(개발)을 하기 전에 문제점 발견과
피드백을 할 수 있다는 장점이 있다.
 

---

 
 

피그마의 장점
협업 기능	여러 사용자가 동시에 같은 파일에서 작업 가능하다
버전 관리	자동 저장과 버전 기록을 통해 이전 상태로 쉽게 복구 가능하다.
플러그인 지원	다양한 플러그인을 통해 워크플로우 확장이 가능하다

 
 
https://www.figma.com/ko-kr/downloads/

Figma 다운로드 | 데스크톱 및 모바일용 웹 디자인 앱

 
 

---

 
 

 
 

툴바	선택툴, 프레임툴, 도형툴, 펜툴, 텍스트툴 등등 기본적인 요소 디자인 툴
레이어 패널	계층적 구조를 가지며, 페이지/프레임/그룹/개별 오브젝트로 구성, 각 요소의 순서와 계층을 확인 및 조정가능
속성 패널	스타일 및 속성을 조절하는 패널 툴바로 그린 오브젝트의 색상, 크기, 위치, 그림자, 테두리 등등 세부 속성 설정
기타 기능	팀원간 코멘트 기능, 파일 및 버전 관리

 
 

---

 
 

사용방법

1. 피그마 다운로드 페이지에서 다운로드한다.
2. 회원가입을 한다.(구글계정으로 로그인 가능)
 
 
3. 메인 홈페이지 좌측에서 초안 - 디자인을 눌러 파일 생성

 
 
4. 디자인 페이지 좌측 상단에서 파일명 변경
 

 

 
 
5. 하단 툴바에서 각 도구를 확인한다.
 

 
 

 
6. 레이어 패널 확인
 

 
페이지는 각 앱/홈페이지의 페이지 개념
레이어는 각 페이지를 이루는 요소의 개념
 
 
 
7. 프레임 앱으로 프레임 선택하기
 

 
 
 

(아이폰 14/15 pro 프레임선택)

 
 
 
 

요소를 클릭하면 우측 속성패널이
요소와 연관된 속성패널로 바뀐다.
 

 

 
 
 
8. 페이지 위에 툴바 도형툴을 이용해
요소들을 그리고, 우측 속성패널에서 스타일 설정
 

 
 
간단하게 윤곽선 스타일 설정으로
아이폰 하단 메뉴를 만들어 보았다.
(툴바에서 펜툴, 사각형툴 두 가지 사용)
 
 
기존에 어도비를 사용하던 사람이라면
몇 가지 단축키가 헷갈리는 것 말고는
크게 어려울 게 없으나,
 
디자인 툴 자체가 처음이라면
하단 툴을 통해 이것저것 따라 그려보는
연습을 추천하면서 오늘 포스팅 마무리한다.