올인원 디자인 플랫폼 ‘피그마’
모두를 위한 협업 중심의 디자인 플랫폼 ‘피그마’
피그마는 더 이상 단순한 ‘디자인 툴’이 아닙니다. 이제는 아이디어 발상부터 기획, 디자인, 개발 협업, 배포까지 전 과정을 하나의 공간에서 함께할 수 있도록 돕는 웹 기반 올인원 디자인 플랫폼으로 진화하고 있습니다.
- 설치 없이 웹 브라우저에서 실시간으로 협업이 가능합니다. 누구나 ‘링크’ 하나만 있다면 디자인 파일에 접근할 수 있습니다.
- 디자이너, 개발자, 기획자, 마케터까지 모두를 위한 툴로 확장되고 있습니다. 각 역할간 핸드오프를 부드럽게 만드는 다양한 기능을 제공합니다.
📍All-in-One 워크플로우
디자인, 기획, 피드백, 개발, 배포까지 하나의 생태계에서 처리가 가능합니다.
| 단계 | 기능 | 설명 |
|---|---|---|
| 1. 아이디어 구상 | FigJam(피그잼) | 디지털 화이트보드로 브레인스토밍, 아이디어 맵, 회의록 정리 등 협업 기획 진행 |
| 2. 기획안 공유 & 피드백 | Slides(슬라이즈) | 프레젠테이션 형태로 기획 방향 및 아이디어 정리, 팀과 이해관계자에게 공유 |
| 3. 서비스 프로토타입 생성 | Make(메이크) | AI 활용으로 간단한 프로토타입 생성 또는 자동화된 기능 제안 |
| 4. 디자인 작업, 개발 협업 | Figma Design & Dev Mode | UI/UX 디자인 작업 진행, 디자인 시스템 구축, 디자이너-개발자 핸드오프 |
| 5. 반응형 웹사이트 배포 | Sites(사이트) | 반응형 웹사이트를 디자인하고 바로 퍼블리싱 가능 |
| 6. 브랜드 일관성 관리 | Buzz(버즈) | 브랜드 에셋(로고, 컬러, 컴포넌트 등) 중앙 관리 및 팀 공유 |
1. 디자인(Design)
https://www.figma.com/ko-kr/design/
✏️ 웹 기반 UI/UX 디자인, 핸드오프
- 주요 사용자:
디자이너,개발자
1.1. 디자인 모드 🎨
UI/UX 화면을 구성하고 컴포넌트를 설계하는 기본 디자인 작업 공간
- 컴포넌트, 오토 레이아웃, 그리드, 라이브러리 등 다양한 고급 디자인 기능
- 디자인 시스템 구축과 반복 가능한 요소 설계에 최적화
- 슬라이드, FigJam, Sites 등 다른 도구와 유기적으로 연결 가능
1.2. 드로우(Draw) 모드 🖌️
https://www.figma.com/ko-kr/draw/
벡터 기반 드로잉을 강화한 신규 일러스트레이션 도구
- 브러시, 텍스처, 패턴 채우기 등 22가지 신기능 제공
- 자유로운 손그림과 섬세한 벡터 표현 가능
- shape builder, 라쏘 선택, 텍스트 경로 등 세밀한 커스터마이징
- 디자인 모드 내 (
드로우-디자인-개발자 모드) 토글로 사용 가능
1.3. 개발자 모드 🧑💻
https://www.figma.com/ko-kr/dev-mode/
디자인 → 개발을 연결하는 핸드오프 전용 뷰
- 컴포넌트, 폰트, 색상, 크기 등 속성을 코드 형태로 자동 변환
- 개발자는 CSS 속성, 변수, 컴포넌트 구조 확인 가능
- 그리드 레이아웃, Auto Layout, 반응형 설정도 파악 가능
- GitHub, VS Code 등 개발 환경과도 연동 가능
2. 피그잼(FigJam)
https://www.figma.com/ko-kr/figjam/
✏️ 디지털 화이트보드
- 주요 사용자:
기획자,디자이너
아이디어 구상과 팀 협업을 위한 디지털 화이트보드
- 회의, 브레인스토밍, 사용자 플로우 작성 등 비주얼 협업
- 기획자와 디자이너, 개발자가 함께 실시간 코멘트 가능
3. 슬라이즈(Slides)
https://www.figma.com/ko-kr/slides/
✏️ 프레젠테이션 제작
- 주요 사용자:
기획자,디자이너
3.1. 슬라이드 편집 모드 (Slide Editing Mode)
👉 비디자이너를 위한 간단하고 직관적인 인터페이스
- 텍스트 입력, 이미지 교체, 슬라이드 생성/순서 이동 등 기본 기능 중심
- 실수 방지를 위한 제한된 편집 권한 제공
- 마치 Google Slides 또는 PowerPoint와 유사한 사용성
3.2. 디자인 편집 모드 (Design Editing Mode)
👉 디자이너를 위한 고급 커스터마이징 모드
- 컴포넌트 수정, 오토 레이아웃 조정, Export 등 디자인 고급 기능 사용 가능
4. 버즈(Buzz)
https://www.figma.com/ko-kr/buzz/
✏️ 브랜드 에셋 관리
- 주요 사용자:
디자이너,마케터
브랜드 에셋을 효과적으로 관리하고 대량 생성·편집·배포할 수 있는 에디터
- Variants, Multi-edit, CSV 업로드로 수천 개의 에셋 한 번에 관리
- 브랜드 가이드라인을 준수하면서 팀 전체가 콘텐츠 제작 가능
5. 메이크(Make)
✏️ AI 활용 서비스 프로토타입 제작
- 주요 사용자:
디자이너,기획자,개발자
AI와 함께 서비스 프로토타입을 빠르게 제작하는 Prompt-to-Code 환경
- Claude 기반 AI로 디자인을 코드로 전환
- 직관적인 편집 방식
- 지도, API 연동, 3D, 게임 등 복잡한 인터랙션까지 확장 가능
- Sites와 연계하여 즉시 웹에 적용 가능
6. 사이트(Sites)
✏️ 반응형 웹 사이트 디자인, 퍼블리싱
- 주요 사용자:
디자이너
디자인한 웹사이트를 바로 퍼블리싱할 수 있는 반응형 웹 에디터
- 브레이크포인트, 인터랙션, 미리보기, 맞춤형 도메인 지원
- CMS 통합 예정
- 향후 코드 레이어(Code Layers) 도입으로 React, Tailwind 변환 가능
마지막 수정