Figma 써봤니.
Figma?
이 글은 figma를 전혀 사용해보지 않은 사람들을 위한 글이다. 어떤 것인지 간략하게 알아보자.
Design tool
혹시 Adobe XD 혹은 zeplin을 써봤거나 알고 있다면 같은 라인에 있는 툴이라고 이해하면 된다. (아쉽게도 이 글은 다른 프로그램과 비교하지 않는다.)
만약 써보지 않았는가? 괜찮다. 혹시 MS 파워포인트를 사용해본 적이 있다면 쉽게 시작할 수 있을 것이다.
Figma는 웹에서도 동작하기 때문에 (물론 데스크탑 앱을 설치하는게 더 좋지만) 별도로 설치하지 않고 테스트해볼 수 있다.
Figma에는 Community라고 하는 일종의 Asset store가 존재하는데, 이 곳에서 만들어진 템플릿을 복제해서 사용할 수 있다. 먼저 Figma와 익숙해지기 위해 Figma Auto Layout playground을 복제해서 놀아보자. 대부분 동작은 파워포인트처럼, 마우스 좌/우클릭 그리고 스크롤 버튼을 눌러서 동작한다.
Powerful tools
figma가 어떤 프로그램인지 대략 이해가 되었다면, figma가 갖고 있는 장점을 몇가지 살펴보자.
Community
카우치코딩을 진행하면서, figma로 화면 다이어그램을 작성했다. here
물론 다른 앱들도 지원하지만 figma의 장점 중 하나는 community이다.
UI를 작성할 때, 아무것도 없는 상황에서 사각형과 자신의 color pallete를 만들어서 웹페이지를 만들 수도 있다. 하지만 웹페이지를 작성하는 것에 익숙하지 않은 사람들 (혹은 designed component. like bootstrap을 사용하는 사람들)은 어떤 컴포넌트가 필요하고 어떻게 배치하면 좋은지에 대한 레퍼런스가 있다면, 좀 더 UI를 구현하는 것이 쉬워질 것이다.
물론 dribble이나, behance같은 좋은 레퍼런스를 참조하는 것도 좋은 방법이지만, 아예 만들어진 컴포넌트를 drag&drop하여 UI를 만든다면 더 쉽지않을까? 여기 bootstrap 4+ UI Kit이 있다. 만들어진 템플릿을 조합해서 사용한다면 작업 속도는 당연히 빨라질 것이고, 구현한 웹페이지에 bootstrap4를 적용하는 것도 쉬울 것이다.
Preview
먼저 here을 클릭해보자. 드래그하고 클릭할 수 있는 버튼이 나올 것이다. 마치 실제 웹페이지가 구현된 것처럼 미리보기를 만들 수 있다. see original project.
figma 우측의 Design, Prototype, Inspect 중 Prototype을 누르면 아래와 같이 만들어진 흐름을 볼 수 있다.
Figma preview arrows.
Read more
