본문 바로가기

book

UX/UI 디자이너를 위한 실무 피그마

피그마에 대해서는 많이들 알려지고, 현업에서 많이 사용되고 있습니다.

디자인 툴은 계속 UI/UX관점도 중요하지만, 개발자와의 협업, 빠른 프로토타입 구성등이 더욱 더 중요해지는 시점인것 같습니다.

 

아직 책을 읽기 전에 피그마를 사용해본 경험 없이 이책을 통해서 피그마의 내용을 살펴보고려 합니다.

사용하지 전이지만, 평소 전해들은 내용과 책을 보기 전에 궁금한 사항은 아래와 같았습니다.

 

 

① 피그마의 결과물을 React에서 활용? (아마 publishing된 파일을 의미하는데, html로 구성이 가능한가?)

제플린과 어떠한 부분이 다를까?

③ 어도비에서 인수를 한 제품은 어떠한 강점이 있을까?

 

 

 

 

■ 피그마를 잘 활용할수 있게 Step by Step

· 피그마는 도구 입니다. 그래서 각 메뉴 및 기능에 대한 설명이 매우 중요합니다.

· 이 책에서는 메뉴에서 제공하는 기능 설명을 우선 1장에서 설명을 합니다.

· 2장에서는 그래픽의 스타일을 사용법을 통해서 "컬러, 라인, 그라데이션"등 사용법을 설명하고 Organization플랜 제공 항목인 팀 라이블러를 통한 공유 방법을 설명합니다.

· 3장에서는 개인적으로 가장 중요하다고 생각하는 레이아웃에 대해서 설명합니다.

레이아웃을 구성할때, 중요한 반응형디자인에 대한 구성도 할수 있습니다.

"콘스트레인트" 라고 하는 어떤 오브젝트의 위칫값을 상하좌우 강제로 고정하는 기능이 있어서 많이 사용하실거 같습니다.

 

 

 

· 4장에서는 화면 구성시 필요한 리소스 - 컴포넌트, 플러그인, 위젯을 사용하고 관리하 다양한 방법이 소개됩니다.

· 5장에서는 Figma를 조금더 잘 활용하기 위한 다양한 협업 기능이 있습니다.

 

 

베리언츠 : 컴포넌트 세트를 만들고 더 체계적으로 사용하는 기능

컴포넌트 프로퍼티 : 지정된 텍스트를 쉽게 변경하고, 아이콘을 앞이나 뒤의 원하는 위치로 지정하기 편리

인터랙티브 컴포넌트 : (컴포넌트 + 베리언츠 + 프로토타입)의 3가지 기능이 합쳐져 실제 같은 인터랙션을 바로 구현해보는 기능

버전히스토리 : 30분 단위로 오토세이브로 기록하고, 이전 내역을 볼수 있는 기능

 

 

· 6장부터는 실제 앞단원에서 배운 요소요소 항목을 가지고 본적격인 실습을 합니다.

 

 

· 실습 장표를 구성시, iOS, 안드로이드, 반응형서비스를 구성하면서 각각의 다른 Device을 하게  예제가 있는 부분이 좋았습니다.

예를 들어 안드로이드와 iOS에는 구조적인 호면 차이가 있습니다. 안드로이드는 하단의 소프트 키가 있어 iOS와 달리 '뒤로 가기' 버튼이 없어도 된다는 특징이 있습니다.

반응형 웹은 크게 모바일 뷰, 패드 뷰, 데이크톱 뷰 별로 디자인을 만듭니다.

 

 

· 9장에서 소개되는 요서는 Figma에 종속적이지 않지만, 가장 많이 사용하는 항목들인데 그것들에 대한 디자인에 대한 원칙 및 기준을 제시하는 부분이라서 많이 생각할 수 있고, 한번 익히고 배워놓으면 계속 사용하게 될 내용으로 구성되어 있습니다.

 

 

 

 

 

■ 디자인을 잘하기 위한 노하우가 잘 설명되어 있습니다.
피그마의 사용법에 대한 부분 이외에 "디자인 노하우"가 잘 정리되어 있습니다.

현업에서 이러한 지식이 없이, 디자인 작업을 진행하게 된다면, 몇번이고 다시 작업을 하고

정확하게 제품 릴리즈에 필요한 디자인 요소를 놓칠수가 있습니다.

 

이러한 부분은 실제 협업에서도 매우 중요한 개념이여서 많은 도움이 됩니다.

디자인하기 전 알아야 하는 UI 기술 지식 (P.61)

 

 

책에 소개되는 추가적인 "디자인 노하우"에는 아래와 같은 부분이 있으니 참고해주세요.

→ 팀원들에게 피그마 도입을 설득하고 싶어요! (P.40)

아이콘 활용 팁 (P.230)

다크모드의 디자인 요소 (P.266)

반응형 디자인의 이해 (P.303)

디자인과 개발 화면이 다를때 (P.382)

추가적으로 책의 요소요소 마다 Tip이라는 항목으로 도움이 되는 정보가 제공됩니다.

 

■ 대상 독자

· 디자인 서적이여서 그런지, 편집 및 화면구성이 눈에 잘 들어와서 편하고, 핵심내용이 눈이 잘 들어옵니다.

· 피그마는 디자인을 잘 하기 위한 도구 입니다. 그래서 디자인을 하려고 할때 필요한 기본적으로 알아야할 중요 개념을 깔끔하게 설명해줍니다. 

· 피그마를 다루는 디자이너의 입장, 기획자의 입장, 개발자의 입장을 느껴볼수 있어 좋았습니다.

· 피그마가 디자인툴이기는 하지만, "프리젠테이션"에 활용할 수도 있어서 매력적입니다.

· 현업 디자이너 입장에서 스케치에서 피그마로 변경하는 사례를 많이 소개해주는 Tip들이 많이 있습니다.

· Figma를 처음 사용해보려고 하시는 분이나, 본격적으로 사용해보려고 하시는 독자분들에게 도움이 되는 책입니다.

 

 

 

■ 실습 파일 다운로드

· https://www.figma.com/@uidesignguide

 

Figma (@uidesignguide) | Figma Community

The latest files and plugins from Claire (@uidesignguide) — 'UX/UI 디자이너를 위한 실무 피그마' 판매 링크24: http://www.yes24.com/Product/Goods/115096585 알라딘: https://www.aladin.co.kr/shop/wproduct.aspx?ItemId=303941921

www.figma.com

 

 

"한빛미디어 <나는 리뷰어다> 활동을 위해서 책을 제공받아 작성된 서평입니다."