Figma 사용법 기초 - Group, Component, Layout 등

 

Figma를 본격적으로 사용해 보니 맨 처음 조금은 낯설었던 하루 이틀을 지나고 나면서

조금은 익숙해짐과 동시에 워낙에 기능자체가 직관적이고 쉽다 보니 어느 정도 적응을 할 수 있었다.

물론 아직 모르는 고급기능들이 무수히 많이 있겠지만, 개발자로서 어느 정도의 Prototype을 만드는 수준에서는 이 정도로도 충분한 것 같다.

 

나~중에 한참 개발을 하고난 뒤에 다른 프로젝트를 시작하면서 사용하게 될 경우를 대비해서

갈수록 짧아져가는 기억력을 보조하고자 기초적인 내용만 정리해서 기록으로 남겨본다.

 

우선 기본적으로 크게는 4가지 정도의 기능만 알면 최소한의 Prototype은 만들 수 있는 것 같다.

 

1. 사각형 활용하기(밑 바탕을 만들어주고)

2. Layout 활용하기(실제 UI요소요소들을 배치해 주고)

3. 그룹으로 묶기(요소들을 적절히 묶어준 다음)

4. Component 만들기(여러 번 반복해서 좀 더 손쉽게 사용)

 

사각형 활용하기

사각형은 어찌 보면 프론트 영역에서는 너무나도 기초공사이기 때문에 자연스럽게 가장 먼저 사용이 되는 것 같다.

웹 프론트로 따지면 div tag의 성격인 것 같다. flutter에서는 Container 혹은 Sizedbox 정도가 아닐까 싶다.

사각형 도형을 그리고 Round Border 처리나 Drop Shadow 옵션을 활용하면 좀 더 예쁜 UI를 만들 수도 있다.

물론 Frame으로도 유사한 결과물을 만들어낼 수는 있지만 좀 더 명확하게 배경을 까는 용도

혹은 아이템의 크기를 명확하게 지정해 주는 의미에서 사각형이 더 유용한 것 같다.

(이건 좀 더 사용을 하면서 업데이트가 될 수 있을 것 같기도 하다.)

 

Layout 활용하기

사각형이 기초공사 바탕작업이라면, Layout은 말 그대로 실제 UI 하나하나의 단위라고 보여진다.

Layout을 잘 조합하면 결국 우리가 원하는 구조의 최종 화면 설계와 근접한 결과물을 만들어 낼 수 있다.

(느낌적으로) 웹 프론트에서는 Table / TR / TD이나...div 태그로 row, column 정렬일 것이고,

flutter에서는 정말 무수히도 사용하는 Column, Row Widget들에 해당한다.

 

다만 Layout을 적용하고 나면 배치가 조금 변경되기 때문에 후속 작업을 좀 해줘야 할 수도 있다.

 

Layout으로 정렬이나 Padding값들을 조정하다 보면 가장 적당한 UI를 바로 확인할 수 있어서, 아무것도 없이 맨땅에서 코딩을 했다가 나중에 배치나 Padding 값을 조정한다고 했던 수고로움을 처음부터 상당 부분 제거할 수 있어서 좋다.

 

Layout을 추가하는 방법은 매우 간단하다.

배치를 원하는 Item 혹은 Item들을 선택해 주고 우클릭해서 Add Layout을 눌러주면 끝난다.

 

메뉴를 처음 선택하고 나면 일단은 가작 적합한 Layout으로 자동 지정이 되고, 필요하다면 설정을 변경하면 된다.

세로로 배치하려면 아래방향 화살표, 가로로 배치하려면 오른쪽방향 화살표를 선택해 주면 바로 적용된다ㅎㅎ

배치된 Item 사이사이 간격이나 Padding 값들도 바로바로 조정이 된다.

 

그룹(Group)으로 묶기

여러 Item들을 그룹으로 묶어주면 덩어리로 관리가 가능하고 또 그룹 안에서 Item들 간에 상호 배치도 가능하다.

묶어주고 싶은 Item들을 클릭해서 Group Selection을 선택해 주면 바로 그룹으로 만들어진다.

예를 들면, 처음에 버튼을 하나 만들고 나면 그걸 Group으로 묶어서 놓으면 재사용성을 높일 수 있다.(복붙할때 유용함ㅎㅎ)

 

Component 활용하기

마지막으로 반복적으로 등장하는 UI들(ex. Listview Item 혹은 Appbar, Indicator 등)이 있을 때

그냥 도형이나 Layout, 이미지들을 가져다 다 그려놓으면 처음에는 특별히 문제가 없겠지만,

폰트크기를 일괄로 변경해야 하거나 배경색을 변경하고자 하는 경우, 일일이 다 변경해줘야만 한다.

 

상당히 많은 부분에서 그런 부분이 등장하기 때문에 Component를 잘 사용하면 큰 도움이 된다.

반복적으로 사용될 수 있는 Layout 혹은 Group을 Master Component로 만들어두고

다른 곳에서 Instance 형태로 가져다 재사용을 하게 되면 

이후 변경사항들을 바로바로 한 번에 변경해 볼 수 있다.

 

Component로 만들어주고 싶은 Layout, Group을 선택하고 우클릭해서 Create Component를 해주면 완료.

그렇게 Component로 만들어지고 나면 Asset 탭에서 확인이 되고 바로바로 끌어다 재사용도 가능하다.

 

Master Component와 재사용한 Instance를 구분하는 방법은 간단하다.

최초에 Component로 만든 Master Component는 좌측의 아이콘이 꽉 찬 마름모 모양이고,

재사용된 Instance들은 속이 빈 마름모 모양이라 바로바로 구분이 된다.

 

다만 이 경우 Instance들이 Master Component의 내용을 그대로 유지하기 때문에 처음에는 모든 내용들이 동일하다.

고로...List 아이템들 같은 경우는 우선 복제해서 사용하고 각각 텍스트는 따로 변경해 줘야 한다.

그럼에도 Component로 만들어서 복제해 쓰는 것이 나중에 소소한 변경사항들을 바로바로 반영할 수 있어 큰 장점이다.

(사실 Prototype이기 때문에 세세한 텍스트가 아주 중요한 요소가 아니기도 하다.)

Master Component에서 Text 문구를 바꾸면 아래 Instance들도 함께 변경된다.

 

그런데, Instance로 계속 재사용을 하다 보면 일부 아이템들만 살짝 다르게 변경해서 새로운 Component로 만들고 싶기도 하다.

그럴 때는 변경하고 싶은 Instance을 선택해서 Detach Instance를 해주면 기존에 Master Component와 묶여있던 관계가 풀어지면서 독립 Item으로 바뀐다. 그러고 나서 이런저런 변경사항을 반영한 다음 새롭게 Component로 만들어주면 된다.

List에서 각 Item들이 거의 유사하지만 짝수 홀수 Row단위로 배경색이나 아이콘 색상들이 변경되는 경우가 있어 그럴 때 활용했다.

 

한번 접하고 나니 이후에 프로젝트를 시작할 때는 Figma Prototyping이 가장 먼저 진행하게 될 것 같다.

물론 혹자는 그 시간이 아깝다 느낄 수도 있지만, 결코 그렇지 않다.

머릿속으로 상상하는 것과 실제로 눈으로 확인하는 것은 너무나도 큰 차이가 있기 때문에,

초반에 서비스에 대한 설계하는 시간 그리고 그걸 눈으로 한번 보는 Prototyping은 아주 중요하다고 생각한다.

자주자주 잘 활용해 봐야겠다ㅎㅎ