[UX UI figma] 피그마란?

안녕하세요 PNcoding입니다 :)

이번 포스팅에선 UX UI 디자인에서 자주 사용하는 Figma에 대하여 알아볼게요!

 

 

---

1. 피그마(figma)란?

https://www.figma.com/

Figma: the collaborative interface design tool.

Figma는 클라우드 기반의 디자인 툴로, 디자이너와 개발자가 함께 작업할 수 있도록 만들어졌습니다.  윈도우, 맥 등 어떤 웹 브라우저에서든 실행이 되며, 언제 어디서나 사용 가능합니다. 웹 기반이기에 별도의 앱을 설치하지 않아도 사용 가능하다는 장점이 있습니다.

 

Figma를 사용하여, 인터페이스 디자인에 필요한 UI 요소를 만들고, 페이지에서 배치하며, 다양한 상호작용을 만들 수 있습니다. 또한, 디자인 요소에 대한 프로토타입을 생성하고, 동작 및 애니메이션을 추가할 수 있습니다.

실제로 Figma처럼 실무에서 사용되는 UI 디자인 프로그램으로는 스케치(sketch)나 어도비 XD 같은 프로그램들이 있습니다.

 

특히, Figma에서는 다른 사람들과 함께 실시간으로 공동 작업할 수 있는 협업 기능을 제공하여, 디자인 작업을 더욱 효율적으로 수행할 수 있습니다.

 

무료와 유료 계정이 모두 제공되며, 유료 계정에는 추가 기능과 저장 용량이 더 많이 제공됩니다.

 

 

---

 

Figma는 벡터 그래픽 기반의 프로그램입니다.

먼저 벡터 그래픽에 대하여 설명을 하고 넘어가도록 할게요.

실무에서 사용되는 그래픽에는 벡터 비트맵 두 가지가 존재합니다.

 

벡터 그래픽

이미지를 수학적인 방법으로 그리는 방법입니다. 이 방법은 선, 곡선, 원, 사각형 등의 도형을 사용하여 이미지를 만들어내며, 이미지를 확대해도 깨지지 않는 특징이 있습니다.

따라서 로고나 아이콘, 일러스트와 같은 작업에 주로 사용됩니다.

 

비트맵 그래픽

이미지를 작은 점들로 분할하여 저장하는 방법입니다. 이미지를 확대하면, 작은 점들이 커져서 화면이 깨지는 현상이 일어날 수 있습니다.

이미지의 해상도가 높을수록 더 많은 저장 공간이 필요하고, 일반적으로 사진과 같은 작업에 사용됩니다.

 

따라서 Figma의 펜툴을 잘 활용하면 일러스트레이터와 같은 벡터기반의 툴 없이도 UI에 관련된 아이콘들을 제작할 수 있다는 장점이 있습니다. 

 

 

 

반응형

 

 

2. 피그마 브라우저 vs 데스크탑 용 앱

피그마는 두 가지 버전으로 사용 가능합니다.
첫 번째 브라우저로 사용, 두 번째 데스크탑용 앱을 다운로드해서 사용 (윈도우, 맥 둘 다 지원) 할 수 있습니다.

 

https://www.figma.com/downloads/

https://www.figma.com/downloads/

 

브라우저로 사용 시의 장, 단점

 

장점

• 동시에 동일한 파일에서 실시간 작업이 가능함
• 파일 공유시 별도의 파일 다운로드 없이 클라우드에 접속만 하면 공유 가능
• 어떤 브라우저에서도 별도의 다른 설치 없이 사용 가능
• 인기 플러그인을 다운로드할 필요 없이 사용 가능
• 기본적으로 구글 웹폰트 제공함

단점

• 로컬 폰트(내 컴퓨터에 설치되어 있는 폰트를 의미)를 공유할 때 따로 피그마 폰트 도우미(Figma Font Helper)를 다운로드하여 별도의 세팅이 필요함
• 인터넷 속도가 느리면 사용하는데 불편한 점이 있을 수 있음

 

데스크탑용 앱으로 사용 시의 장, 단점

 

장점

• 앱을 다운로드하면 별도의 인터넷 연결 없이 피그마 사용 가능
• 로컬 폰트를 별도의 추가 세팅 없이 사용 가능

단점

• 동시에 동일한 파일에서 실시간 작업 불가능
• 온라인 작업 파일은 인터넷이 연결되어 있어야지만 열어 볼 수 있음

 

 

 

그래서 어떤 것을 사용하면 되는데??

 

 

 

사실 어떤 것을 사용하는지 정해진 것은 없어요.
작업 환경은 상황에 맞게 변경해서 사용 가능하기에 편한 대로 사용하면 됩니다.
하지만 로컬 폰트를 공유할 때의 문제가 있다면 데스크탑용 앱을 설치하여 사용하는 것이 좋으며, 주로 개인 작업을 한다면 데스크탑용 앱 사용, 공동작업을 하며 소통을 할 때는 브라우저를 사용하는 것이 좋겠죠 :)

 

 

 

---

 

 

 

 

 

그럼 Figma 툴의 사용방법은 다음 포스팅에서 알아보도록 합시다!