Figma - 개발자도 Prototype 만들어 보자. UI Kit & Plugin 설치

세상이 참... 많이 변하긴 했다.

인정하고 싶지 않지만...PPT로 앱기획서 전달하던 시대에 코딩을 했던 아재라 그런지

이번에 Figma를 접하고 나니 또 한 번의 자기반성(?)과 동기부여가 동시에 이루어지는 느낌이다.

 

자기반성 이라기 보다는 그간 너무 현실과는 동떨어져서 PM역할만 한건 아닌 건지;;;

그리고 그러면서 자연스럽게 최신 기술이나 트렌드와는 멀어지게 된 건 아닌지 하는 안타까움 같은 기분이 든다.

처음에는 반신반의하면서 시작해 본 Figma 사용이었는데 이게 생각보다 쉽고... 빠르게 무언가를 만들어낼 수 있었다.

(그리고... Figma를 사용한 다음에 다시 한번 최근의 Adobe의 Figma 인수 실패에 은근 안도를 표하게 된다ㅋ)

 

Figma 가입하고 무료

제일 먼저 할 일은... 당연히 Figma에 가입하기.

가입은 매우 간편하게 가능했다. 구글계정으로 바로 가입...

가입을 하면 바로 결정해야 하는 것이 바로 유무료 서비스 결정이다.

물론... 유료로 무한정 사용하면 좋기는 하겠지만 나는 그냥 개인적으로.. 소소하게 쓸 거라서 그냥 무료 서비스를 사용하기로 했다.

 

Starter Plan이란....

Starter Plan은 말 그대로 그냥 아주 기본적인 수준으로 무료사용을 하게 해주는 Plan이다.

무료이기에 당연히 제약이 있다. 파일이랑 페이지는 3개까지만 생성이 가능하고, 프로젝트는 1개만 생성할 수 있다.

사실 이 정도 제약이라면 개인적으로 사용하는 용도이기 때문에 충분하다.

(개인 프로젝트를 한 번에 4~5개를 돌릴 상황도 아니고...ㅎㅎ)

무료 계정으로 프로젝트도 하나 생성할 수 있기 때문에 처음 몇 명이서 모여서 스타트업을 한다거나 공동 프로젝트를 하기에도 부족함은 없을 것 같다.

Starter Plan을 선택하면 바로 화면을 그릴 수 있는 까만 화면이 등장한다ㅎㅎ

 

Figma 주요 기능

처음 까만 도화지(?)가 뜨니 뭐부터 해야 하나 고민이 된다.

구글링을 살짝 해보고 Figma 사이트에서 제공하는 튜토리얼을 참고해 봤다.(물론 영어다;; 공부할 겸 들어봤다.)

그리고 중요한 개념 몇 가지만 인지하고 실제로 Prototype을 만들어봤다.

1. Frame

실제 화면이다. 휴대폰이 될 수도 있고, 웹화면이 될 수도 있다.

우선 당장 진행할 프로젝트는 모바일 관련 프로젝트이기에 휴대폰으로 선택했다.

왼쪽 상단에 Frame을 선택하면 자동으로 오른쪽에 어떤 모바일에 맞춰서 Prototyping 할 건지를 선택할 수 있다.

나는 iPhone 15 pro X를 선택해 봤다ㅎㅎ

 

2. Figma Community에서 UI Kit 고르기

휴대폰 크기의 빈 화면도 만들었으니 채워볼 차례다. 상단의 Status Bar 하단의  Indicator를 다 직접 그리면 더 좋겠지만...

전문가도 아닌 데다... 시간도 절약하기 위해서 이미 잘 만들어놓은 전 세계의 수많은 전문가들이 공유해 준 것들을 가져오면 훨씬 더 멋들어지게 완성이 된다ㅎㅎ

그런 템플릿들을 구경하고 나에게 맞는 것들을 활용할 수 있는 곳이 바로 Figma Community다.

왼쪽 하단에 Explorer Community 버튼을 클릭하면 바로 이동할 수 있다.

그리고 가장 유명하다는 Joey Banks라는 사람이 제작한 iOS 16 Kit를 활용해 봤다.

iOS 16 UI Kit for Figma | Figma Community

 

Community에서 검색 후에 Open in Figma를 선택하면 Figma에서 해당 Kit가 바로 열린다.

그냥 그 상태에서 바로 사용해도 되고, 필요하다면 Move to Project 메뉴를 통해서 내 프로젝트 안에 Draft 폴더로 옮겨도 된다.

(한번 열어본 Kit들이 함께 보이기 때문에 꼭 Draft로 옮겨둘 필요는 없긴 하다)

Kit안에 이미 iOS의 다양한 UI들이 템플릿으로 제작되어 있어서 아주 간편하다. 그렇게 최소한의 아이폰 화면이 금방 완성되었다ㅎㅎ

Move to project > Draft 를 하면 내 Draft에 복사본이 생성된다.(꼭 필요한건 아님)

Kit에 있는 Status Bar, Indicator를 활용해서 금새 아이폰 기본 화면이 하나 완성됐다.

 

 

3. Figma Plugin 설치하기

다음으로는 Figma를 여러 가지로 도와준다는 Plugin들을 설치해 봤다.

인터넷에 매우 다양한 Plugin들이 소개되어 있었는데 우선 나에게 가장 필요하다고 생각되는 3가지만 우선 설치했다.

그런데 Plugin의 경우에는 브라우저마다 따로 설치를 해야 하는 것 같다.

윈도우 컴퓨터에서 먼저 설치해서 잘 사용했는데 맥에서 하려니 Plugin이 보이질 않았다;;

 

설치가 전~혀 어렵지는 않기에 바로 설치를 해본다.

설치하는 방법은 까만 바탕에서 우클릭 후 Plugins > Manage plugins 를 누르고...

창에서 내가 필요한 Plugin 들을 검색해서 설치하면 끝~~

윈도우PC에는 잘 설치되어있는 Plugin들ㅎㅎ 맥에도 똑같이 설치 해줬다.

1. Unsplash

상당히 고퀄리티의 예쁜 혹은 멋진 이미지들을 검색하고 바로 적용할 수 있는 Plugin이다.

Protopyte의 완성도를 확 올려주는 이미지나 아이콘들을 찾아서 바로 배치할 수 있다.

 

2. Autoflow

화면설계, 기획안을 위한 사용이다 보니 서비스 Flow를 화살표로 그려야 한다. 이걸 아주 편하게 해주는 툴이다.

Shift를 누른 상태로 시작과 종료 지점을 선택해 주면 짠!! 하고 화살표가 생긴다ㅎㅎ

 

3. Iconify

이미지 외에 앱에서 참 많이 사용되는 것이 마로 아이콘이다.

그런 아이콘들을 검색하고 바로 적용시킬 수 있는 Plugin이다.

 

어느 정도 준비가 됐으니 정말 한번 제대로 Prototype을 만들어봐야겠다.