007. 피그마(Figma) 첫 만남 – 설치부터 기본 개념까지

“프로덕트 디자이너라면 피그마는 기본이다.”
이 말을 얼마나 많이 들어왔는가. 그만큼 피그마는 이제 디자인 업계에서 ‘표준 툴’ 이 되어버린 상태이다.
특히 협업과 클라우드 기반이라는 두 가지 강점을 앞세워, 디자이너뿐 아니라 개발자, 기획자도 함께 사용하는 협업 툴로 자리 잡았다.

오늘은 피그마를 처음 시작하는 예비 디자이너를 위해, 설치부터 기본 개념, 그리고 간단한 실습까지 한 번에 정리해본다.

1. 피그마란 무엇인가?

피그마는 클라우드 기반 디자인 툴이다.
이 말은 곧 “인터넷만 연결되어 있다면 어디서든 디자인 가능” 이라는 뜻이다.
포토샵이나 스케치처럼 무거운 설치 프로그램이 필요하지 않다. 브라우저에서 바로 시작할 수 있는 것이 가장 큰 특징이다.

피그마의 핵심 특징

• 실시간 협업 – 구글 Docs처럼 여러 명이 동시에 작업 가능하다.

• 자동 저장 & 버전 관리 – 실수해도 걱정 없다. 언제든 과거 상태로 돌아갈 수 있다.

• 프로토타이핑 – 단순 디자인을 넘어, 실제 인터랙션까지 구현할 수 있다.

• 플러그인 지원 – 아이콘, 일러스트, 데이터까지 한 번에 불러올 수 있다.

결론적으로, 피그마는 디자이너의 Notion + Google Docs + Photoshop을 합친 것이라고 이해하면 된다.

2. 피그마 인터페이스 한눈에 보기

피그마의 화면은 크게 세 가지 영역으로 나뉜다.

① 툴바 (하단)
• Select Tool (V) : 선택 도구
• Frame Tool (F) : 화면 구조를 만드는 기본 틀
• Shape Tool (R, O) : 사각형·원형 등 기본 도형
• Text Tool (T) : 텍스트 입력

➜ 팁: 단축키를 익히면 작업 속도가 2배 빨라진다. (예: V = 선택, R = 사각형, T = 텍스트)

② 레이어 패널 (좌측)
• Pages와 Layers 구조 이해가 중요하다.
• 프레임 안에 어떤 요소가 있는지 계층 구조로 관리할 수 있다.

③ 속성 패널 (우측)
• Fill : 색상 채우기
• Stroke : 테두리
• Shadow : 그림자
• 크기, 위치, 투명도까지 세세하게 조절할 수 있다.

 

3. 직접 해보는 실습

피그마는 말로 배우는 것이 아니다. 손으로 해봐야 익숙해진다.
아래 세 가지 실습을 바로 따라 해본다.

실습 1: 피그마 계정 만들기 & 새 파일 생성
1. Figma 공식 사이트에 접속 → 회원가입 & 로그인
2. “New File” 클릭 → 새 디자인 파일 생성
3. 파일 이름을 내 첫 피그마로 변경

* 목표: 피그마 계정 & 새 프로젝트 시작 완료.



실습 2: 인터페이스 탐험하기
• 툴바에서 Select, Frame, Shape 등을 눌러 기능 확인
• 좌측 Layers 패널에서 계층 구조 살펴보기
• 우측 속성 패널에서 선택한 오브젝트의 속성 바꿔보기

*목표: 인터페이스의 구조와 각 패널의 역할 파악.



실습 3: 도형 만들기 & 스타일 적용
1. 사각형 도구 (R) → 캔버스에 드래그하여 사각형 생성
2. Fill 색상 변경 → 원하는 컬러로 바꾸기
3. Stroke 두께 조절 & Shadow 효과 추가
4. 원형 도구 (O) → 캔버스에 원 그리기

*목표: 도형 생성 + 스타일 변경 경험.



정리

오늘은 피그마의 기본 개념과 인터페이스 구조를 살펴보고, 간단한 실습을 진행해보았다.
핵심은 다음과 같다.
• 피그마는 클라우드 기반 + 협업 중심의 디자인 툴이다.
• 툴바, 레이어 패널, 속성 패널을 이해하는 것이 첫걸음이다.
• 직접 실습을 통해 감각을 익히는 것이 가장 빠른 학습법이다.

다음 글에서는 프레임과 오토 레이아웃을 심층적으로 다루면서, 디자인 시스템의 기초를 잡아본다.

➜피그마를 처음 써본 느낌은 어땠는가? 댓글로 남겨보자.