Figma

킨도프의 디자인 도구. UI/UX 디자인, 프로토타입, 디자인 시스템이 여기서 만들어집니다.

왜 Figma인가

디자인 파일을 이메일로 주고받아본 적 있나요? "최종", "최종_수정", "진짜최종_v3" 같은 파일명의 악몽을 경험해봤을 겁니다.

킨도프는 실시간 협업과 버전 관리를 위해 Figma를 선택했습니다.

Figma의 장점:

실시간 협업 - 여러 명이 동시에 편집
웹 기반 - 설치 없이 브라우저에서 사용
버전 히스토리 - 변경 이력 자동 저장
개발자 협업 - 인스펙트 모드로 스펙 확인
디자인 시스템 - 컴포넌트 재사용, 일관성 유지

누가 사용하나요?

역할	Figma 사용
디자이너	필수 (매일 사용)
PM	디자인 리뷰, 피드백
개발자	스펙 확인, 에셋 다운로드
마케터	에셋 요청, 확인

비디자이너라면: "기본 개념"과 "개발자/PM을 위한 가이드"를 읽어두세요.

시작하기

1. 계정 및 팀 가입

회사 이메일로 Figma 팀 초대 받기
figma.com 에서 로그인
Kyndof 팀 워크스페이스 확인

2. 앱 vs 웹

웹 브라우저에서도 사용 가능하지만, 데스크톱 앱이 더 안정적입니다.

3. 탐색

로그인하면 팀 워크스페이스가 보입니다.

Kyndof Team/
├── Design System       # 공통 디자인 시스템
├── Atelier/           # Atelier 프로젝트
├── Archives/          # Archives 프로젝트
└── Brand/             # 브랜드 에셋

기본 개념

File (파일)

파일 = 하나의 디자인 프로젝트

예: "Atelier 웹사이트 리디자인" 파일 안에 모든 관련 디자인이 있음

Page (페이지)

파일 안의 섹션

Atelier 웹사이트/
├── Cover            # 파일 썸네일
├── Wireframes       # 와이어프레임
├── Designs          # 최종 디자인
├── Components       # 사용된 컴포넌트
└── Archive          # 이전 버전

Frame (프레임)

화면 또는 요소를 담는 컨테이너

모바일 화면 (375x812)
데스크톱 화면 (1440x900)
개별 컴포넌트 (버튼, 카드)

Component (컴포넌트)

재사용 가능한 디자인 요소

Button 컴포넌트를 만들면:
- 파일 전체에서 재사용
- 원본 수정 시 모든 인스턴스 자동 업데이트
- 일관성 유지

디자이너 가이드

새 파일 시작

팀 워크스페이스에서 "+ New file"
적절한 프로젝트 폴더에 배치
파일 이름은 명확하게 (예: "Atelier - Mobile App v2")

페이지 구조

Cover           # 파일 설명, 상태, 담당자
───────────────
Wireframes      # 초기 구조 설계
───────────────
Designs         # 최종 비주얼 디자인
├── Mobile
├── Desktop
└── Tablet
───────────────
Prototype       # 인터랙션 연결
───────────────
Components      # 이 프로젝트의 로컬 컴포넌트
───────────────
Archive         # 버려진 디자인 (삭제하지 말고 보관)

디자인 시스템 사용

킨도프는 공통 디자인 시스템을 사용합니다.

"Design System" 파일 열기
컴포넌트 확인 (버튼, 입력 필드, 카드 등)
컴포넌트를 드래그하거나 인스턴스 생성
커스터마이징은 variant 또는 override로

새 컴포넌트가 필요하면:

일단 로컬 컴포넌트로 만들기
팀 리뷰 후 디자인 시스템에 추가

개발자/PM을 위한 가이드

인스펙트 모드

개발에 필요한 스펙을 확인하는 방법입니다.

파일 열기
오른쪽 패널에서 "Inspect" 탭 클릭
원하는 요소 클릭

확인 가능한 정보:

크기 (width, height)
색상 (hex, rgb)
폰트 (family, size, weight)
간격 (margin, padding)
CSS/iOS/Android 코드

에셋 다운로드

원하는 요소 선택
오른쪽 패널 > Export 섹션
포맷 선택 (PNG, SVG, JPG, PDF)
"Export" 클릭

배율 설정:

1x: 기본
2x, 3x: 고해상도 디스플레이용
SVG: 벡터 (아이콘에 적합)

코멘트 달기

도구바에서 말풍선 아이콘 (또는 C 키)
피드백할 위치 클릭
코멘트 작성
담당자 @멘션 가능

코멘트 팁:

구체적으로 ("이 버튼" 보다 "헤더의 로그인 버튼")
이유 설명 ("왜" 수정이 필요한지)
스크린샷 첨부 가능

팁과 에티켓

DO (이렇게 하세요)

버전 관리:

파일 이름에 버전 붙이지 마세요.
Figma가 자동으로 버전 히스토리를 관리합니다.

❌ "Homepage_v3_final_수정.fig"
✅ "Homepage" (히스토리에서 이전 버전 확인)

정리된 구조:

프레임 이름을 명확하게:
❌ "Frame 1", "Rectangle 42"
✅ "Header", "Button - Primary", "Card - Product"

프로토타입 활용:

정적 이미지보다 프로토타입이 소통에 효과적입니다.
"로그인 버튼 누르면 이 화면으로" → 직접 연결해서 보여주기

DON'T (이렇게 하지 마세요)

디자인 시스템 컴포넌트 직접 수정:

❌ 디자인 시스템 파일에서 버튼 색상 변경
   (모든 프로젝트에 영향)

✅ 변경 필요시 디자인 리드와 논의

에셋 직접 추출 (협의 없이):

❌ 디자인 보고 바로 에셋 다운로드해서 구현

✅ 디자이너와 상태 확인
   ("이 디자인 확정된 건가요?")

자주 묻는 질문

"편집 권한이 없어요"

View only 상태일 수 있습니다.

팀 멤버라면: 파일 담당자에게 권한 요청
외부 공유 링크라면: View only가 기본

"변경사항을 되돌리고 싶어요"

파일 제목 옆 드롭다운 > "Version history"
원하는 시점 선택
"Restore this version" 또는 복사해서 새 파일로

"오프라인에서 작업할 수 있나요?"

제한적으로 가능합니다:

데스크톱 앱에서 열어둔 파일은 오프라인 접근 가능
편집 후 온라인 되면 자동 동기화
웹 버전은 오프라인 불가

"Sketch/Adobe XD 파일을 가져올 수 있나요?"

네, 가져올 수 있습니다:

Sketch: .sketch 파일 직접 import
XD: 플러그인 사용 또는 수동 이동

왜 Figma인가​

누가 사용하나요?​

시작하기​

1. 계정 및 팀 가입​

2. 앱 vs 웹​

3. 탐색​

기본 개념​

File (파일)​

Page (페이지)​

Frame (프레임)​

Component (컴포넌트)​

디자이너 가이드​

새 파일 시작​

페이지 구조​

디자인 시스템 사용​

개발자/PM을 위한 가이드​

인스펙트 모드​

에셋 다운로드​

코멘트 달기​

팁과 에티켓​

DO (이렇게 하세요)​

DON'T (이렇게 하지 마세요)​

자주 묻는 질문​

"편집 권한이 없어요"​

"변경사항을 되돌리고 싶어요"​

"오프라인에서 작업할 수 있나요?"​

"Sketch/Adobe XD 파일을 가져올 수 있나요?"​

관련 문서​