처음 시작하는 사람을 위한 피그마 사용법 완벽 정리!

웹디자인을 처음 시작하거나, 포토샵 대신 협업이 편한 툴을 찾고 있다면 피그마(Figma)는 최고의 선택입니다. 

웹 기반으로 작동해 설치 없이 바로 시작할 수 있고, 실시간 협업과 컴포넌트 기능 등으로 작업 효율을 높여줍니다.

이번 포스팅에서는 피그마를 활용한 웹디자인 기초 사용법을 하나씩 쉽게 설명해드릴게요.

1. 피그마 계정 만들기 및 접속하기

- https://figma.com에 접속해 무료 계정을 만듭니다.

- 설치할 필요 없이 웹에서 바로 사용 가능하며, 데스크탑 앱도 제공됩니다.

- 로그인 후 ^{New Design File}을 클릭하면 디자인을 시작할 수 있어요.

2. 새 파일 생성 및 아트보드(Frame) 만들기

- 피그마에서 아트보드는 Frame이라고 불립니다.

- 상단 툴바에서 Frame Tool (F)을 클릭하고 Desktop, Tablet, Mobile 사이즈 중 선택합니다.

- 웹디자인이라면 보통 Desktop - 1440px 또는 1440 x 1024 사이즈로 시작합니다.

3. 레이아웃 구조 잡기 (Grid & Layout 사용법)

- 선택한 Frame에 레이아웃 그리드를 추가하면 디자인 정렬이 쉬워집니다.

- 오른쪽 패널 → Layout Grid → + 클릭 → Grid → Columns 선택

- 예: 12 columns, margin 120px, gutter 20px 설정 → 부트스트랩 그리드와 유사한 구조

4. 텍스트, 버튼, 이미지 추가하기

- T 키 : 텍스트 추가

- R : 사각형 (버튼 형태 만들기 가능)

- Shift + I : 아이콘, 이미지 등 Assets 삽입

- 폰트는 구글 폰트 연동 가능 → 웹디자인에 적합한 폰트 쉽게 사용 가능

5. 컴포넌트로 작업 효율 높이기

- 반복되는 요소(버튼, 카드, 네비게이션 등)를 **컴포넌트(Component)**로 만들면 편리합니다.

- 요소 선택 후 Cmd/Ctrl + Option + K → 컴포넌트 생성

- 페이지 전체에서 재사용 가능 + 일괄 수정 가능

6. 공유 및 실시간 피드백 받기

- 우측 상단 Share 버튼 클릭 → 링크 공유

- 실시간 협업 가능 (Google Docs처럼)

- 댓글 기능으로 팀원 피드백 바로 수렴 가능

7. 피그마 디자인 → 개발자 전달까지

- 개발자에게 전달할 때는 Inspect 탭 활용

- CSS 코드, 폰트, 색상, 간격 등을 자동으로 보여줍니다

- 플러그인 활용 시, 코드 추출이나 리소스 다운로드도 가능

피그마는 초보자도 쉽게 시작할 수 있고, 협업과 유지보수까지 고려된 정말 효율적인 디자인 툴입니다.

오늘 소개한 기본 사용법만 익혀도 실제 웹디자인 작업에 충분히 활용할 수 있어요.

지금 바로 피그마를 열고, 첫 디자인을 시작해보세요!