Figma 기초 사용법 - UI/UX 디자인 입문 가이드
웹이나 앱 디자인에 관심이 생겼다면 반드시 알아야 할 툴이 있습니다. 바로 협업 중심의 UI/UX 디자인 도구 Figma(피그마)입니다.
Figma는 설치 없이 웹에서 바로 사용할 수 있는 클라우드 기반 디자인 툴로, 전 세계 수많은 디자이너와 개발자들이 애용하고 있는 표준 도구입니다.
1. Figma란 무엇인가요?
Figma는 UI 설계, 프로토타이핑, 협업 기능까지 지원하는 올인원 디자인 플랫폼입니다. 디자인과 개발, 기획이 한 공간에서 소통할 수 있도록 만들어졌으며, 완전 무료로 시작 가능합니다.
- 🌐 웹 기반으로 설치 없이 사용 가능
- 🧑🤝🧑 실시간 협업 기능 (댓글, 공동 편집)
- 🧱 컴포넌트, 스타일 기능으로 반복 작업 최소화
- 🚀 프로토타입 제작까지 한 번에 가능
2. Figma 시작하기 - 계정 생성
먼저 Figma 공식 웹사이트에 접속해 계정을 만듭니다. Google 계정으로도 쉽게 로그인할 수 있어요.
3. 새 프로젝트 만들기
- 홈 화면 우측 상단의 [New Design File] 클릭
- 새 캔버스가 열리면, 도형, 텍스트, 이미지 등을 배치해보세요
Figma의 인터페이스는 Adobe XD나 Sketch와 비슷하지만 더 직관적입니다.
4. 주요 기능 소개
① 프레임(Frame)
웹 페이지나 앱 화면의 사이즈를 지정할 수 있는 기능으로, 프레임을 생성하면 작업의 시작점을 잡을 수 있습니다. 예: iPhone 14 Pro, Desktop 1440px 등
② 컴포넌트(Component)
버튼이나 카드 등 반복적으로 사용하는 디자인 요소를 컴포넌트로 등록하면, 여러 화면에서 재사용 가능하며 변경도 한 번에 적용됩니다.
③ 프로토타입
디자인된 화면을 클릭 가능한 인터랙티브 시뮬레이션으로 만들어 클라이언트나 팀원에게 시연할 수 있습니다.
④ 공유 & 협업
링크 공유만으로 공동 편집 및 피드백이 가능하며, Google Docs처럼 실시간 코멘트 기능도 지원합니다.
5. 디자인 예시: 블로그 카드뉴스
- 프레임: Instagram Post (1080x1080)
- 내용: 블로그 글 요약 카드 디자인
- 폰트: Noto Sans KR, 배경: 그라디언트
이렇게 만든 카드뉴스는 PNG로 다운로드 후 블로그나 SNS에 업로드하여 콘텐츠 가치를 높일 수 있습니다.
6. 무료 vs 유료 기능 비교
| 기능 | 무료 | 프로(유료) |
|---|---|---|
| 디자인 파일 생성 | 무제한 | 무제한 |
| 실시간 협업 | 가능 | 가능 |
| 버전 히스토리 | 30일 | 무제한 |
| 팀 프로젝트 정리 | 제한적 | 폴더, 권한 관리 가능 |
7. 마무리: 디자인은 시작이 반
Figma는 디자이너가 아니더라도 누구나 쉽게 UI/UX 디자인을 시작할 수 있는 도구입니다. 블로그나 앱, 웹 기획을 하시는 분들도 Figma로 시각적 스토리텔링을 시작해보세요!
다음 글에서는 무료 디자인 리소스 사이트 TOP 10을 정리해드릴 예정이니, 디자인 소스가 필요하셨던 분이라면 꼭 확인해주세요 😊