요약
- Figma의 AI 이미지 편집 도구 4종(배경 제거, Vectorize, 오브젝트 지우기, 이미지 확장)을 활용해 디자인 화면 안에서 에셋을 바로 다듬는 방법
- Figma Make로 정적 디자인을 인터랙티브 프로토타입으로 전환하고, FigJam 임베드로 팀 크리틱을 진행하는 워크플로우
- 컨셉 → 크리틱 → 프로덕션까지의 간극을 줄이는 실전 프로세스
본문
Step 1. 문제 정의 — 방향 설정
디자인 실험의 출발점은 명확한 목표와 제약 조건입니다.
- 목표 예시: “추천 프로그램의 클릭률과 가입을 늘린다”
- 제약: “기존 사용자 경험을 해치지 않으면서 주목도를 높인다”
- 가시성 레벨별 UX 옵션을 설정합니다:
- 모달 — 짧은 인터럽션, 중간 가시성
- 인피드 카드 — 가장 미묘한 옵션
- 풀스크린 오버레이 — 최대 가시성
Step 2. AI 이미지 도구로 비주얼 실험
각 방향에 맞는 비주얼을 Figma 안에서 바로 만듭니다.
Glass 효과 (모달용)
- 레이어에 Glass 효과 적용 → 서리 낀 표면 생성
- 굴절로 깊이감 추가, 점진적 블러로 가장자리 부드럽게
- 사진 위에 글래스를 올려 “잠금 해제” 느낌 연출
Vectorize (인피드 카드용)
- 손으로 그린 일러스트레이션을 캔버스에 배치
- 배경 제거 → 배경 없는 깔끔한 이미지로 분리
- Vectorize 실행 → 래스터가 편집 가능한 벡터로 변환
- Cut 도구로 불필요한 패스 제거, 바운딩 박스로 앵커 포인트 조정
- 채우기 패널에서 변수 검색 → 브랜드 색상 적용
정밀 사진 편집 (풀스크린용)
- 오브젝트 지우기 — 방해 요소(예: 숟가락) 제거
- 이미지 확장 — 파란색 핸들 드래그로 배경 자동 채우기
- 원본 비율 유지하면서 레이아웃에 맞는 이미지 완성
Step 3. Figma Make로 프로토타입 전환
- Figma Make의 공유 템플릿에 디자인 가져오기
- 스타일/구조 가이드라인이 자동 적용되어 세팅 시간 절약
- 몇 분 내에 인터랙티브 프로토타입으로 전환
- 타이밍, 정보 계층, 모션까지 실제처럼 동작
Step 4. FigJam 임베드로 팀 크리틱
- Figma Make 임베드로 프로토타입을 FigJam 보드에 삽입
- 모든 방향을 한 보드에 나란히 배치
- 댓글, 스티키, 라이브 리액션으로 실시간 피드백
- 정적 프레임이 아닌 실제 동작 기반으로 평가 → 피드백 품질 향상
Step 5. 프로덕션 연결
선택한 방향을 코드로 넘기는 두 가지 경로:
| 경로 | 방법 |
|---|---|
| Dev Mode | Figma Design에서 개발자가 같은 파일에서 바로 코딩 시작 |
| Figma MCP | 캔버스에서 코드로 디자인 컨텍스트를 직접 전달 |
사용된 Figma 도구 한눈에 보기
| 도구 | 용도 | 단계 |
|---|---|---|
| Glass 효과 | 서리 낀 블러 표면 | Step 2 |
| 배경 제거 | 이미지 배경 분리 | Step 2 |
| Vectorize | 래스터 → 벡터 변환 | Step 2 |
| Cut 도구 / 바운딩 박스 | 벡터 패스 편집 | Step 2 |
| 오브젝트 지우기 | 사진 속 불필요 요소 제거 | Step 2 |
| 이미지 확장 | 배경 자동 채우기 | Step 2 |
| Figma Make | 인터랙티브 프로토타입 생성 | Step 3 |
| Figma Make 임베드 | FigJam에 프로토타입 삽입 | Step 4 |
| Dev Mode / Figma MCP | 디자인→코드 연결 | Step 5 |
원문: Workflow lab: AI image tooling and interactive prototyping in Figma | Figma Blog 저자: Mallory Dean (Designer Advocate, Figma)