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

1. 실무 시나리오별 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 핵심 기능

기능1) 프레임

- 프레임 = 광고 이미지의 캔버스

광고 이미지를 작업할 공간의 크기를 말합니다. Photoshop의 아트보드와 동일한 개념입니다.

- 프레임을 만드는 이유

• 정확한 크기 설정 (1080x1080, 1080x1350 등)
• 여러 디자인을 한 파일에 관리
• 내보내기 시 프레임 단위로 저장

- 프레임 생성 방법

• 하단 툴바에서 프레임 도구 (F) 클릭
• - 우측 속성 패널에서 프리셋 선택
  • 스마트폰: 기종별 사이즈
  • 소셜 미디어: SNS 영역별 사이즈
• 프리셋 ‘인스타그램 게시물’ 클릭 → 프레임 자동 생성
• 프레임 이름 변경
  • 좌측 레이어 패널에서 ‘Instagrma post-1’ 더블클릭
  • ‘Instagram 피드 이미지’ 입력
• 커스텀 크기 프레임 만드는 법
  • 프레임 도구(F)→ 캔버스에 원하는 만큼 드래그
  • 우측 속성에서 W(너비), H(높이) 직접 입력

기능2) 레이어

- 레이어 순서 조절 방법

• 레이어 순서 바꾸기
  • 좌측 레이어 패널에서 드래그하여 순서 변경
  • 사각형을 원 위로 → 사각형이 앞에 보임
• 레이어 그룹화
  • 2개 레이어를 선택 (Shift+클릭)
  • 우클릭 → ‘그룹 선택’ 클릭
  • 그룹 이름: ‘Group 1’
• 레이어 잠금
  • 레이어에서 ‘자물쇠’ 클릭 -> 실수로 움직이지 않도록 보호

기능3) 도형

- 자주 쓰는 도형

• 사각형 (Rectangle): 배경, 버튼, 박스
• 원 (Ellipse): 로고, 아이콘, 강조
• 선 (Line): 구분선
• 다각형 (Polygon): 별, 화살표 

•  

기능4) 텍스트

- 텍스트 추가 및 스타일링 방법

• 텍스트 추가
  • 하단 툴바에서 ‘T’ 선택
  • 캔버스 클릭 → 텍스트 입력
• 폰트 변경 :텍스트 선택 → 우측 속성 패널 → 글씨체
• 크기 조정 :우측 속성 패널에서 ‘글씨체'
• 색상 변경: 텍스트 선택 → 우측 속성 → 채우기 → 색상 선택

기능5) 내보내기

- JPG (JPEG)

• 장점: 파일 크기 작음
• 단점: 투명 배경 불가
• 용도: 웹 게시, SNS 광고

- PNG

• 장점: 투명 배경 가능, 무손실
• 단점: 파일 크기 큼
• 용도: 로고, 오버레이
• 옵션: PNG-24 (24비트 컬러)

- SVG

• 장점: 벡터 (확대해도 깨지지 않음)
• 단점: 복잡한 이미지 불가
• 용도: 로고, 아이콘

- PDF

• 장점: 인쇄용
• 단점: 웹에서 잘 안 씀
• 용도: 인쇄물

- 내보내기 해상도 옵션

• @1x: 원본 크기
• @2x: 2배 크기 (레티나 디스플레이) -> 용도: 고해상도 화면
• @3x: 3배 크기 -> 용도: 인쇄 또는 매우 큰 화면

- 작업별 추천 해상도

• 웹/SNS: @1x (1080 x 1350)
• 인쇄: @2x 또는 @3x 

3.[실습] Figma 프레임 만들기

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

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

 

 

 

※ 본 글은 학습을 목적으로 작성된 게시물로, 특정 브랜드·제품·서비스명이 언급될 수 있습니다. 이는 순수한 예시일 뿐이며, 상업적 목적은 전혀 없음을 밝힙니다.