Figma의 특징과 시작하기 | UX/UI 디자인이란?

Figma의 특징과 시작하기 | UX/UI 디자인이란?

출처: Figma UX/UI 활용 수업

1. Figma의 특징

- 자동저장을 할 수 있다.
- 무료버전이 있다.
- 올인원으로 활용할 수 있다.
- 동시 협업이 가능하다.
- 플러그인을 활용할 수 있다.

- 접근성에 제약이 없다.(멀티 디바이스에서 동시 작업이 가능하다.)
- 해상도 대응과 편리한 개발자 핸드오프를 제공한다.
- 디자인 리소스 매니지먼트, 디자인 시스템을 갖추고 있다.
- 온라인 커뮤니케이션, 디지털 프로토타이핑 가능, 레퍼런스 활용이 가능하다.

- 레퍼런스 중에 최근에 출시된 피그마 커뮤니티> 프레젠테이션 서비스가 제공되고 있어서 추가적인 활용이 가능하다.

- 공유되고 있는 유료나 무료의 PPT 템플릿을  활용할 수 있다.

- 기획과 UI/UX 디자인을 통해 프로토타입을 제작할 수 있다.

- 개발 및 협업도구로 사용할 수 있다.

 

2. Figma의 구독 플랜

1) 무료 플랜
- 개인: draft를 무한으로 사용할 수 있다.
- 팀프로젝트: 3파일, 3페이지, 1 프로젝트까지만 사용할 수 있다.
- 버전 히스토리 지원: 버전 히스토리는 30일까지 지원된다.

2) 유료 플랜
- 무료버전기능+파일갯수, 버전 히스토리가 무제한 지원된다.
- 프로젝트 공유, private 설정이 가능하다.
- 팀 라이브러리 기능을 사용할 수 있다.
- 고급 프로토타이핑 기능을 사용할 수 있다.
- (beta) Dev Mode를 사용할 수 있다.

 

3. Figma 기본 화면의 구성요소

1) 좌측패널

레이어 패널, 프레임, 에셋(Assets)으로 글꼴, 색상, 크기 등의 속성들을 미리 설정하여 필요시 빠르게 적용할 수 있다.
2) 중앙영역

프레임 패널(가운데), 사용자가 작업하는 영역
3) 상단영역

툴바: 메인메뉴 목록, 도구, 타이틀 영역, 공유화면 비율 등의 기능

4) 우측패널

디자인, 프로토타입, 사용자가 아이디 공유, 미리보기, 화면확대 비율 등 상세 설정

5) Draft

바탕화면처럼 문서를 선택하기 위한 공간

 

4. 새 프레임을 만드는 방법

프레임은 디자인 작업창을 만드는 것이다. 프레임 도구를 선택하고 오른쪽 패널에서 디바이스(PC, Tablet, Mobile) 크기를 지정하여 만들 수 있다.

 

5. 프레임을 이미지로 저장하는 방법

프레임은 png, jpg, svg, pdf 확장자의 이미지로 저장할 수 있다. 저장하고자 하는 프레임 또는 콘텐츠를 선택하고 오른쪽 패널 하단에 ‘export’ 메뉴를 클릭한 후 확장자를 선택한 후 배수를 선택하고 저장한다. 피그마 원본 파일(*.fig)로도 저장할 수 있다. (File> Save local copy메뉴에서 백업 파일로 저장할 수 있다.)

 

6. UI(User Interface)란?

UI(User Interface)란 사용자 환경, 표현을 뜻한다. 사용자가 기계나 컴퓨터를 사용할 때 사용자가 쉽게 접근해서 사용하고 그에 따른 결과를 얻어 내는 것을 의미한다. 사용자가 화면에서 무엇을 할 수 있을지, 어떤 식으로 사용해야 하는지를 긴 설명 없이 한눈에 인지하도록 직관적으로 설계하는 것을 목적으로 한다.
ex) 모바일 화면, 윈도우 화면, 태블릿 화면, 스마트워치 화면, 내비게이션, 블랙박스, 세탁기, 냉장고 등.

 

7. UX(User Experience)란?

UX(User Experience)란 사용자 경험, 행동을 뜻한다. 심리, 행동, 습관, 경험 등 다양한 사항들이 결합되어 하나의 행동으로 나오는 것을 의미한다. 사용자가 시스템, 제품, 서비스 등의 직접적이거나 간접적인 이용으로 얻게 되는 총체적 경험을 말한다. 단지 기술을 효용성 측면에서만 보는 것이 아니라 사용자의 삶의 질을 향상하는 방향으로 이해하려는 새로운 디자인 접근법이라고 할 수 있다. 사람의 행동을 뒷받침해 주고, 더 좋은 경험을 통해 자연스럽게 이전의 행동을 바꾸어줄 수 있다. 즉, 인간 우선적 접근 방식이 강조되는데 사용자가 제품과 상호 작용을 원활하게 할 수 있도록 지원하는 것이다.

※ UX는 기획, UI는 설계와 실천, GUI는 그래픽 표현, CUI는 문자 표현이라고 할 수 있다.