14장. Community 템플릿을 Figma로 복제

준비하기

by jeromeNa

Nov 18. 2025

선택한 템플릿을 프로젝트 파일로 복제하는 과정은 단순해 보이지만, 체계적인 접근이 필요하다. 복제 방법과 초기 구조화 작업이 이후 작업 효율성을 결정한다.

복제 프로세스

기본 복제 단계

Figma Community에서 선택한 템플릿 페이지 열기

'Figma에서 열기' 버튼 클릭

파일명 즉시 변경: [프로젝트명]_템플릿명_v0.1

파일 구조 재구성

템플릿 구조 분석

Figma는 페이지 계층을 지원하지 않으므로, 네이밍 규칙으로 구조를 표현한다.

원본 구조 예시: 템플릿마다 다름
├── Cover
├── Components
├── Icon
├── [Free] Landing Page
├── [Free] Login
├── [Free] Product List
├── [Free] Product Detail
├── [Free] Cart
├── [Free] Checkout
└── --- Snippet Full Version

표준 구조로 전환

3장에서 정의한 표준 구조로 재구성

재구성된 페이지

- 00_Cover
- 01_Flows_UserJourney
- 02_Wire_FO_Desktop
- 02_Wire_FO_Mobile
- 02_Wire_BO_Desktop
- 03_Proto_FO
- 03_Proto_BO
- 90_Spec_Components
- 91_Spec_Documentation

섹션(Sections)을 활용한 페이지 내 구조화

각 페이지 내부에서 Section으로 영역 구분 (첨부한 이미지에는 Frame으로 되어 있지만, Section 영역으로 묶으면 관리가 좀 더 수월하다.)

[02_Wire] FO_Desktop 페이지 내부:
━━━━━━━━━━━━━━━━━
Section: Homepage
└─ Frame: Hero
└─ Frame: Categories
└─ Frame: Products
━━━━━━━━━━━━━━━━━
Section: Product List
└─ Frame: Filter
└─ Frame: Grid View
└─ Frame: List View
━━━━━━━━━━━━━━━━━
Section: Product Detail
└─ Frame: Gallery
└─ Frame: Info
└─ Frame: Reviews

프레임 간격 표준화

프레임 배치 규칙:
- 가로 간격: 100px
- 세로 간격: 100px
- 섹션 간 간격: 200px
- 첫 프레임 위치: X: 0, Y: 0

컴포넌트 정리

컴포넌트 페이지 통합

분산된 컴포넌트를 하나의 전용 페이지로 모으기

90_Spec_Components 페이지 구조

Section: Atoms
- Button/Primary
- Button/Secondary
- Input/Text
- Input/Select

Section: Molecules
- Card/Product
- Form/Login
- Navigation/Breadcrumb

Section: Organisms
- Header/Desktop
- Header/Mobile
- Footer/Default