피그마 가이드

왕초보 셀러를 위한 피그마 완벽 가이드

1. 피그마 기본 설정

• 가입 방법:
  • 구글에서 "Figma" 검색 → 공식 사이트 접속 → "무료로 시작하기" 클릭 → 구글 계정 로그인.
  • 이름 입력 후 Starter 플랜 선택 (무료 버전 사용).
• 설치 권장: 웹 버전보다 데스크톱 앱 설치 추천 (렉/오류 감소).
• 폰트 설정: 외부 폰트 사용 시 Figma Font Helper 설치 필요.

---

2. 인터페이스 이해

1. 파일 생성:
   • 왼쪽 사이드바 Drafts → + 디자인 파일 클릭 (무료 계정은 3개 파일 제한, Drafts는 무제한).
2. 구조 개념:
   • 페이지: 하나의 파일 내 여러 페이지 생성 가능 (예: 딸기/오렌지 상세 페이지).
   • 프레임: 페이지 내 작업 영역 (예: 스마트스토어/쿠팡 상세 페이지 별도 프레임).
   • 레이어: 프레임 위의 요소 (텍스트, 도형, 이미지 등).
3. 주요 패널:
   • 왼쪽: 레이어 관리.
   • 하단: 도구 모음 (이동, 도형, 텍스트 등).
   • 오른쪽: 디테일 설정 (색상, 효과, 내보내기 등).

---

3. 핵심 기능 활용법

1. 도형 작업:
   • 사각형/원 생성 → 모서리 둥글게 조정:
     • 드래그로 간편 조정 또는 Individual Corners에서 수치 입력.
   • 색상 채우기:
     • Solid (단색), Gradient (그라데이션), Image (이미지 삽입) 지원.
   • 외곽선 설정: Stroke에서 두께/색상 조정.
2. 텍스트 편집:
   • 텍스트 박스 생성 → 폰트 변경: 영문명으로 검색 (예: 지마켓산스 → "Gmarket Sans").
   • 줄 간격 (Line Height), 글자 간격 (Letter Spacing) 드래그로 조정.
3. 효과 적용:
   • 그림자: Effect 패널에서 X/Y축, Blur, Spread 조정.
   • 오토 레이아웃: 요소 선택 후 "Auto Layout" 적용 → 내용 추가 시 간격 자동 유지.
4. 미러링 기능:
   • 모바일에서 실시간 미리보기:
     • Figma 앱 설치 → "Mirror" → PC 프레임 선택 → 작업 화면 동기화.

---

4. 실무 팁

• 프레임 복제: Ctrl + C / Ctrl + V 또는 Ctrl + D.
• 이미지 삽입: 도형 선택 → Fill에서 "Image" → 파일 업로드.
• 내보내기: Export에서 JPG/PNG 등 형식 선택.

---

5. 주의사항

• 무료 계정은 3개 프로젝트만 저장 가능 → Drafts 폴더 활용.
• 한글 폰트는 영문명으로 검색해야 적용 가능.

"피그마는 협업과 빠른 수정에 최적화된 도구입니다. 오토 레이아웃과 미러링으로 효율성을 극대화하세요!"

다음 영상에서는 상세 페이지 제작 실습을 다룹니다. 🛠️