3-2 : Figma 기본 인터페이스 및 핵심 기능

1. Figma란? 웹 기반 디자인 툴의 장점

Figma는 구글 닥스의 디자인 버전

Photoshop이나 Illustrator처럼 설치할 필요 없이 웹 브라우저에서 바로 사용 가능

다만, 웹 브라우저에서는 컴퓨터에 설치된 폰트를 사용하려면 별도 작업 필요

→ 데스크톱 앱 다운로드 추천

 

Figma vs. Photoshop 비교

	Figma	Photoshop
설치	필수 ❌ (웹으로 사용 가능)	필수
가격	무료 버전 사용 가능	7일 무료 체험판 가능 이후 유료 (월 $31.49~)
협업	실시간 가능, 협업 빠름	실시간 불가능 ❌, 협업 어려움
초심자 난이도	⭐⭐ 쉬움	⭐⭐⭐⭐ 어려움
용도	UI/UX, 광고 소재	사진 편집, 합성
속도	빠름	느림 (용량이 큰 경우가 많음)

광고 이미지 제작에는 Figma가 더 적합하다.

 

스타터 플랜(무료)에서 사용 가능한 기능

• 3개의 프로젝트까지 생성 가능
• 무제한 개인 파일
• 공동 작업 인원: 최대 2명
• 컴포넌트 및 스타일 가이드: 사용 가능
• 플러그인 및 위젯 사용 가능
• 프로토타입 기능: 기본 제공
• 이미지 내보내기 (JPG, PNG, SVG)
• 버전 히스토리 (30일까지만 확인 가능)

 

실무 시나리오별 Figma 활용

시나리오 1: SNS 피드 이미지 대량 제작

상황: Instagram 피드용 이미지 20개 필요 → 같은 레이아웃, 다른 제품

 

Figma 활용

1. 템플릿 1개 제작 (컴포넌트화)
2. 복제 → 이미지/텍스트만 교체
3. 한 번에 20개 내보내기

시간 절약

• 일반 방식: 약 4시간 (개당 12분)
• Figma: 약 1시간 (템플릿 30분+수정 30분)

---

시나리오 2: A/B 테스트용 배너 제작

상황: 같은 디자인, 다른 문구로 5가지 버전 필요

 

Figma 활용

1. 마스터 컴포넌트 1개 제작
2. 인스턴스 5개 복제
3. 텍스트만 변경 (레이아웃 자동 유지)

장점

• 마스터 수정 → 모든 버전 자동 업데이트
• 디자인 일관성 보장

---

시나리오 3: 브랜드 가이드 준수

상황: 여러 마케터가 동시에 소재 제작 → 브랜드 색상/폰트 통일 필요

 

Figma 활용

1. 브랜드 컬러 팔레트 등록
2. 텍스트 스타일 프리셋 저장
3. 공유 → 모두가 같은 스타일 사용

효과

• 브랜드 일관성 100% 유지
• 수정 요청 감소

 

2. Figma 시작하기

Figma: The Collaborative Interface Design Tool

 

[실습&생각해보기] 실습 1: Figma 프레임 만들기

[과제] Figma의 기본 도구를 모두 사용해 보세요.

 

1. Instagram 피드 프레임 생성 (1080x1350)
2. 도형 2개 추가 (사각형, 원)
3. 텍스트 추가 (“YOUR BRAND”)
4. 레이어 순서 조정
5. 도형에 stroke, 그림자 효과 추가
6. 텍스트 색상 변경
7. 이미지 내보내기