UI기획의 생산성을 확 끌어올려줄 Figma 고급 기능 사용 - 2부

지난 포스팅에서 피그마 고급 기능인 컴포넌트, 오토 레이아웃, 컨스트레인트 3개 기능을 확인해보았는데요.

오늘은 레이아웃 그리드, 스타일 사용하기, 팀 라이브러리 기능을 이어서 살펴보도록 하겠습니다.

4) 레이아웃 그리드

UI 화면을 기획할 때 화면 내의 간격 등을 눈으로 보기에 대략적으로 맞춰서 작업하기 보다 애초에 레이아웃 그리드(Layout grid)를 설정해 놓으면 해당 그리드에 맞춰 간결하게 요소들을 배치할 수 있습니다. 쉽게 설명하면 그림을 가지런히 그릴 수 있도록 밑그림격의 그리드를 설정해 놓는 작업입니다.

레이아웃 그리드 사용하기

① 우측 속성 패널의 디자인탭의 레이아웃 그리드 영역에서 우측 + 버튼을 클릭하면 기본적으로 세팅되어 있는 가로, 세로 줄이 표출됩니다.

② 번 영역을 클릭하고

③ 영역을 클릭해 Columns(세로열)으로 설정합니다.

④ 그리드 Count(갯수) 수치를 6으로 입력하고,

⑤ 그리드 투명도도 최초엔 잘 보이도록 20%로 설정(살짝만 보이게 하려면 3%로 설정)합니다.

⑥ 좌우 여백 Margin값은 20px로 설정하고,

⑦ Gutter : 각 세로단 사이의 여백은 16px로 설정합니다.

이렇게 밑그림으로 설정해준 레이아웃 그리드(Layout grid)에 맞춰 프레임 내 요소들을 정돈해서 UI를 기획해 줍니다.

디자이너들은 이 기능을 필수로 사용하고 있습니다. 그래서 디자인이너들이 작업한 UI 디자인을 보면 자로 잰듯한, 마치 로봇이 그려낸 듯이 잘 정돈되어 있는 게 바로 이 기능을 사용해서이기 때문입니다.

5) 스타일 사용하기

스타일 사용하기

앱 UI 기획 시 수십, 수백 페이지 기획을 진행했을 때 각 페이지의 요소들이 상이하고, 또한 전체적으로 일관성이 없는 파편화된 UI 기획을 많이 볼 수 있습니다. 이렇게 기획이 파편화되게 되면 향후 공통 화면 수정 시에도 많은 시간을 소요하게 됩니다.

이러한 불필요한 수정을 지양하기 위해 기획 단계에서부터 폰트와 컬러, 레이아웃 그리드 등에 대해 통일된 스타일 가이드(①번)를 설정해 놓으면 체계적으로 기획해 나갈 수 있습니다.

디자인 작업할 때 만큼의 다양한 스타일 가이드는 아니지만, 기획 시 필요한 버튼 활성화/비활성화 등의 간소화된 수준 정도로 스타일을 사용하면 기획에 일관성을 보다 더 부여할 수 있게 됩니다.

또한, Figma에서 폰트, 컬러, 레이아웃 등을 스타일로 등록해서 사용하면 스타일 선택만으로 통일된 스타일을 적용할 수 있습니다.

그럼, 스타일은 어떻게 등록하고 사용하는지 알아보겠습니다.

먼저, 텍스트 스타일 등록입니다.

스타일 사용하기 (텍스트 스타일 등록)

① 번 폰트는 우측 속성 패널 디자인탭의 Text 설정 영역

② 번과 같이 폰트 종류는 'Noto Sans KR', 두께는 'Bold', 사이즈는 '28'로 설정되어 있습니다.

③ 번 아이콘을 클릭하면, 나타나는

④ 번 영역에서 + 등록 아이콘을 클릭하여 ⑤ 스타일명 입력 필드에 ‘모바일 / 대타이틀(H3) 28px Bold’ 로 입력하고

⑥ 스타일 생성 버튼을 클릭하면

⑦ 번과 같이 텍스트 스타일이 설정된 것을 확인할 수 있습니다.

그럼, 이제 텍스트 스타일을 등록했으니, 다른 곳에 등록한 텍스트 스타일을 적용해보겠습니다.

등록한 텍스트 스타일 적용하기

① 스타일을 적용할 폰트를 선택하고,

② 우측 영역의 Text Styles ▦ 설정 아이콘을 클릭하고

③ 등록한 텍스트 스타일 중 원하는 스타일을 선택하면

④ 번과 같이 등록한 스타일로 복제 반영됩니다.

이어서 컬러도 스타일 등록해서 사용해보도록 하겠습니다.

스타일 사용하기 (컬러 스타일 등록)

① 번 도형 영역을 클릭하면 우측 Fill 영역에서 ‘222222’ 컬러 설정되어 있는 것을 확인할 수 있습니다.

② 번 ▦ 아이콘을 클릭한 뒤 이어서

③ 번 + 등록 아이콘을 클릭하면 나타나는 팝업에서

④ 스타일명 입력 필드에 ‘TEXT / BLACK(Default)’ 로 입력하고

⑤ 스타일 생성 버튼을 클릭하면

⑥ 번과 같이 컬러 스타일이 설정된 것을 확인할 수 있습니다.

⑦ 번 아이콘을 클릭하면 적용된 컬러 스타일을 적용 해제할 수 있는 기능입니다.

등록한 컬러 스타일을 다른 곳에도 적용해보겠습니다.

스타일 사용하기 (컬러 스타일 적용하기)

① 스타일을 적용할 요소(도형, 폰트 등) 를 선택하고,

② 우측 Fill 영역의 ▦ 설정 아이콘을 클릭,

③ 등록한 컬러 스타일들 중 적용을 원하는 스타일을 선택하면

④ 번과 같이 스타일이 반영됩니다.

이제, 이렇게 하나씩 등록한 스타일들을 한 눈에 확인해보겠습니다.

스타일 사용하기

① 캔버스 영역에서 아무 것도 선택하지 않은 상태에서 우측 속성 패널을 보면

② Text Styles에 ‘모바일’ 카테고리로 구분해서 등록한 텍스트 스타일들을 확인할 수 있습니다.

Tip. 슬래시(/)로 타이틀을 구분해서 등록하면 / 앞이 카테고리로 등록됩니다. '모바일 / 대타이틀(H3) 28px Bold' 모바일 카테고리로 구분하여 등록할 수 있습니다.

③ Color Styles에 ‘TEXT’, ‘Fill’ 카테고리로 구분되고 등록한 컬러 스타일들이 확인됩니다.

④ 각 스타일 영역 위에서 우측 마우스를 클릭하면 편집 상자가 나타나고 ‘Delete Style’을 클릭 해 삭제가 가능합니다.

6) 팀 라이브러리​

팀 라이브러리는 컴포넌트, 스타일 등 설정한 디자인 시스템을 회사 직원 또는 프로젝트 팀원들과 공유할 수 있는 공간입니다.

디자인 시스템들을 팀 라이브러리에 등록하는 방법을 확인해보겠습니다.

팀 라이브러리 (스타일 등록하기)

① 좌측 '레이어 패널'에서 Asset 탭을 클릭합니다.

② 책 아이콘을 클릭하면, Libraries 창이 뜨고,

③ Publish를 클릭하면, 팀 컴포넌트로 이동시키겠습니까? 메시지가 표출됩니다.

Tip. 무료 플랜은 스타일만 라이브러리에 등록 가능하며, 팀 플랜(유료)로 컴포넌트들까지 등록이 가능합니다.​

④ 무료 플랜으로 사용하기 위해선 ‘Publish style only’를 클릭하면 Publish library 창이 뜨고,

⑤ 설명 문구 입력 후

⑥ ‘Publish Style’ 버튼을 클릭하면 팀 라이브러리에 등록됩니다.

이렇게 팀 라이브러리에 스타일을 등록했습니다. 그렇다면 팀 라이브러리에 등록한 스타일은 어떻게 사용할 수 있을까요?

팀 라이브러리에 등록된 스타일을 신규 캔버스에서 사용해보도록 하겠습니다.

팀 라이브러리 (등록된 스타일 사용하기)

① 좌측 레이어 패널에서 Asset 탭 클릭합니다.

② 책 아이콘을 클릭하면, Libraries 창이 뜨고,

③ 등록한 팀 라이브러리 사용 ON 처리합니다. (사용을 원치 않을 경우엔 다시 OFF 처리)

④ 텍스트 입력 후 우측 속성 패널의

⑤ ▦ 아이콘을 클릭해 사용 ON한 팀 라이브러리 스타일 중

⑥ 원하는 스타일을 선택하면

⑦ 번과 같이 반영됩니다.

이렇게 팀 라이브러리에 스타일과 컴포넌트를 저장해서 다른 캔버스에도 공통적으로 사용할 수 있습니다.

회사에 여러 프로젝트팀이 있고, 전사적으로 동일한 스타일, 컴포넌트를 쓰는 경우엔 이렇게 팀 라이브러리에 등록 후 개별 프로젝트에 반영하여 사용하시면 됩니다.

반대로 팀 라이브러리에서 등록한 스타일을 취소해볼까요?

팀 라이브러리에 등록한 파일에 문제가 생겼거나 등록한 디자인 시스템을 변경해야 할 경우, 사용하지 말아야 할 경우엔 등록을 취소할 수 있습니다.

팀 라이브러리 - 등록 취소

① 좌측 '레이어 패널'에서 Asset 탭을 클릭합니다.

② 책 아이콘을 클릭하면, Libraries 창이 뜨고,

③ Publish한 파일을 클릭하면, 상세 페이지로 전환됩니다.

④ 하단의 Unpublish 버튼을 클릭하면

⑤ 정말로 취소하겠습니까? 메시지가 뜨고, ‘Remove file from library’ 버튼을 클릭하면 등록사항이 취소됩니다.

이렇게 Figma 기본 화면 요소를 확인하고, 기본 기능과 고급 기능 습득을 위해 샘플로 '로그인' 페이지 UI 기획을 완성해보았습니다.

이렇게 기본적인 개념과 고급 기능을 습득하고 자주 사용하면서 Figma 기획에 속도가 붙는 것을 경험하실 수 있을 것입니다.

자 그럼, 이제 다음 포스팅에서는 이렇게 배운 기본 사용방법을 활용해서 실전 앱 기획을 진행해보겠습니다. 다음 시간에 만나요~:)

유익했다면! 이어서 읽어보기:)

실패 없는 개발을 위한 서비스 기획!

Figma 프로토타이핑 기획!🚀
상담문의