CO:SSION Week3 - Figma

Figma란?

Figma

• 온라인에서 사용할 수 있는 디자인 툴
• 자체 클라우드에 저장되는 방식으로, 오프라인으로 파일 저장 없이 실시간으로 저장하면서 사용
• PPT보다 훨씬 기능이 많고, 포토샵보다 가벼움
• 직관적인 인터페이스로 다른 디자인 툴에 비해 쉽게 활용 가능
• 웹, 앱, 인터페이스 디자인 등 다양한 분야에서 사용
• UX/UI 디자인 및 프로토타입 제작을 위한 기능 제공
• 디자인과 개발 과정에서 필요한 여러 협업 기능을 지원

Figma를 배워야 하는 이유

개발 / 디자인 간의 일관성 유지

• 과거에는 UI 디자인 작업에 주로 어도비 포토샵이 사용되었고, 디자인 핸드오프는 PPT 파일을 통해 이루어졌다. 이러한 작업 방식은 디자인 파일을 다시 공유하거나 수정사항을 반영하는 과정에서 번거로움이 많았고, 이로 인해 디자이너와 개발자 간의 미스커뮤니케이션이 빈번하게 발생해, 프로젝트가 지연되곤 했다.
• Figma를 활용하게 되면서 디자인 파일을 실시간으로 확인할 수 있을 뿐만 아니라, 색상, 폰트, 크기 등 코드에 필요한 디자인 사양을 손쉽게 추출할 수 있게 되었다. 덕분에 수정사항이 생겨도 별도의 파일 공유 없이 실시간으로 업데이트된 정보를 개발자가 즉시 확인할 수 있어 디자이너와 개발자 간의 미스커뮤니케이션이 크게 줄어들었다.

디자인 시스템과 스타일 가이드 관리

• 개발자는 Figma를 통해 디자이너가 정의한 디자인 시스템을 기반으로 코드 구현 시 중복을 줄이고 효율성을 높일 수 있다. 디자인 시스템은 일관적인 스타일을 정의하여 개발자가 이를 재사용할 수 있도록 지원한다. 이를 통해 매번 동일한 스타일을 새롭게 코드로 작성할 필요 없이 이미 정의된 컴포넌트나 규칙을 활용해 코드 작성 속도와 효율성이 향상된다. 또한, 코드의 일관성을 유지할 수 있어 유지보수나 확장성 측면에서 큰 장점을 제공한다.

팀원과의 실시간 상호작용

Figma는 클라우드 기반으로 실시간 피드백이 가능하다. 덕분에 여러 팀원이 동시에 디자인을 확인하고, 즉각적으로 수정하거나 의견을 교환할 수 있다. 이러한 실시간 피드백 환경 덕분에 디자인에 대한 의견 교환과 수정 사항 반영이 신속하게 이루어져, 프로젝트 진행 속도가 향상된다.

인터페이스 구성

Home 화면 인터페이스

디자인 파일 인터페이스

• 캔버스 영역 - 디자인 요소를 배치하고 편집하는 공간
• 레이어 패널 - 작업 중인 모든 요소 확인
• 속성 패널 - 선택된 디자인 요소의 색상, 크기, 여백 등의 속성을 확인하고 조정

툴 바

속성 패널

팀원 초대하기

화면 공유하기 / 음성 대화 기능

코멘트와 미니 채팅 버블

디자인 시스템

디자인 시스템

• 일관성 있고 효율적인 디자인 작업을 위해 UI 요소, 스타일, 컴포넌트, 패턴 등을 체계적으로 정리한 규칙의 모음
• 제품의 사용 경험(UX)을 일관되게 제공하며, 디자인과 개발 간의 일관성을 유지하고 반복적인 작업을 줄인다

스타일 가이드

• 컬러 스타일 : 색상 팔레트 정의
• 타이포그래피 스타일 : 폰트, 크기, 간격 등의 텍스트 스타일 정의
• 효과 스타일 : 그림자, 블러 등과 같은 시각적 효과 정의
• 그라디언트 스타일 : 그라디언트 색상 조합 정의

컴포넌트

• 디자인 시스템에서 컴포넌트는 버튼, 입력필드, 선택요소, 모달, 레이아웃 등과 같은 재사용 가능한 UI 요소를 의미한다
• Figma에서는 이러한 컴포넌트를 정의(Master Component)하고, 여러 번 복제해(Instance) 사용할 수 있는 기능을 제공한다

파일 구조

Page

• 디자인 프로젝트를 구분하고 관리
• 하나의 피그마 파일에는 여러 개의 페이지를 추가할 수 있으며, 개별 캔버스 영역을 가진다

Section

• 여러 개의 프레임을 하나의 구역으로 묶음
• 관련된 프레임들을 시각적으로 구분/조직화

Frame

• Figma에서 디자인의 기본 단위
• 한 프레임은 여러 레이어들로 이루어져있음

파일 추출

PNG, JPG 등

• 하나의 프레임을 내보낸다고 할 때, 원하는 요소가 프레임 레이어 안에 모두 들어와 있는지 레이어 패널에서 확인해야 한다.
• 원하는 요소가 누락될 수 있기 때문!

PDF

• 한 페이지 분량의 PDF는 위의 방식대로 해도 된다
• 여러 페이지는 기본 export 기능을 사용하면, 한 프레임 당 하나의 PDF 파일로 만들어져서 원하는 결과를 얻어낼 수 없다.
• 플러그인을 사용해서 해결!