Figma: 협업 캔버스
Figma가 실시간 멀티플레이어 디자인을 구축한 방법: 프레즌스 인디케이터, 무한 캔버스, Dev Mode, 디자인 토큰. CSS 및 JavaScript 구현 패턴 포함.
Figma: 협업의 캔버스
"Figma 방식에서 우리는 AI를 멀티플레이어로 만들고 싶었습니다. 협업은 항상 우리가 하는 모든 일의 핵심이었습니다." — Figma 팀
Figma는 디자인을 개인의 작업에서 팀 스포츠로 변화시켰습니다. 실시간 협업 편집 기능을 갖춘 최초의 디자인 도구로서, Figma는 복잡한 크리에이티브 도구도 디자이너가 요구하는 정밀함을 유지하면서 Google Docs처럼 유연할 수 있음을 증명했습니다.
Figma가 중요한 이유
Figma는 단순히 디자인 도구에 멀티플레이어 기능을 추가한 것이 아닙니다. 디자인이 이루어지는 방식 자체를 재구상했습니다. 협업을 기반에 구축함으로써 Figma는 워크플로우, 팀 역학, 그리고 전체 디자인-개발 파이프라인을 바꿨습니다.
주요 성과: - 실시간 멀티플레이어 편집 기능을 갖춘 최초의 디자인 도구 - UI 패러다임으로서 "무한 캔버스" 개척 - 모든 팀이 디자인 시스템에 접근할 수 있도록 함 - Dev Mode로 디자인과 개발 연결 - 협업을 기반으로 200억 달러 규모의 크리에이티브 제국 구축
핵심 요점
- 멀티플레이어는 단순함을 요구한다 - Figma는 operational transforms보다 단순한 자체 솔루션을 구축했는데, 단순한 시스템이 디버깅과 유지보수가 더 쉽기 때문이다
- 무한 캔버스는 탐색을 유도한다 - 페이지 기반 도구와 달리, 열린 캔버스는 반복 작업을 장려하고 인위적인 제약을 방지한다
- 컨텍스트 인식 인터페이스는 인지 부하를 줄인다 - 선택에 따라 적응하는 툴바와 패널은 관련 컨트롤만 표시한다
- 디자인 토큰은 디자인과 코드를 연결한다 - primitives → semantic → component 레이어를 가진 Variables는 디자이너와 개발자 사이의 공통 언어를 만든다
- Dev Mode는 전용 작업 공간이다 - 개발자 도구를 디자인 도구와 분리하는 것은 서로 다른 멘탈 모델과 워크플로우를 존중한다
핵심 디자인 원칙
1. 기반으로서의 멀티플레이어
Figma는 operational transforms(OTs)와 같은 전통적인 접근 방식보다 단순한 자체 멀티플레이어 솔루션을 구축했습니다. 그들의 목표는 명확성이었습니다: 시스템은 필요 이상으로 복잡해서는 안 됩니다.
철학: Figma는 텍스트 에디터가 아니기 때문에 OTs의 강력함이 필요 없었고, 덜 복잡한 것으로도 충분했습니다. 단순한 시스템은 이해하기, 구현하기, 디버깅하기, 테스트하기, 유지보수하기가 더 쉽습니다.
멀티플레이어를 위한 시각적 패턴:
PRESENCE INDICATORS:
┌─────────────────────────────────────────────────────────────────┐
│ Canvas │
│ │
│ ┌──────────────────────────────────────┐ │
│ │ Component: Button │ (o) Alice │
│ │ ┌────────────────────┐ │ <- 실시간 커서 │
│ │ │ Primary Button │ │ │
│ │ └────────────────────┘ │ │
│ └──────────────────────────────────────┘ (*) Bob │
│ <- 선택 링 │
│ │
│ ┌──────────────────────────────────────┐ │
│ │ Input Field (+) Carol │ <- 편집 모드 │
│ │ ┌────────────────────────────────┐ │ │
│ │ │ | │ │ │
│ │ └────────────────────────────────┘ │ │
│ └──────────────────────────────────────┘ │
└─────────────────────────────────────────────────────────────────┘
CURSOR DESIGN:
┌─────────────────────────────────────────────────────────────────┐
│ │
│ 커서 구조: │
│ │
│ ▲ │
│ ╱ ╲ │
│ ╱ ╲ ← 화살표 (사용자 색상) │
│ ╱_____╲ │
│ ┌─────────┐ │
│ │ Alice │ ← 이름 라벨 (호버/활동 시 표시) │
│ └─────────┘ │
│ │
│ 상태: │
│ • 대기: 커서만 │
│ • 활성: 커서 + 이름 라벨 │
│ • 편집 중: 커서 + 이름 + "Editing..." 배지 │
│ • 자리 비움: 흐린 커서 (50% 불투명도) │
│ │
└─────────────────────────────────────────────────────────────────┘
구현 원칙: - 사용자는 이름뿐 아니라 색상으로도 식별됨 - 선택 링은 누가 어디서 작업 중인지 표시 - 커서 이동은 성능을 위해 debounce 처리 - 사용자가 유휴 상태가 되면 presence 표시가 페이드 아웃
2. 무한 캔버스
Figma의 캔버스는 빠른 반복 작업을 가능하게 하는 개방적이고 유연한 환경입니다. 페이지 기반 도구와 달리, 무한 캔버스는 탐색을 유도합니다.
캔버스 인터랙션 패턴:
NAVIGATION:
┌─────────────────────────────────────────────────────────────────┐
│ Space + 드래그 캔버스 패닝 │
│ 스크롤 수직 패닝 │
│ Shift + 스크롤 수평 패닝 │
│ Cmd/Ctrl + +/- 줌 인/아웃 │
│ Cmd/Ctrl + 0 100%로 줌 │
│ Cmd/Ctrl + 1 화면에 맞추기 │
│ Cmd/Ctrl + 2 선택 영역으로 줌 │
└─────────────────────────────────────────────────────────────────┘
목적에 따른 줌 레벨:
┌─────────────────────────────────────────────────────────────────┐
│ 100%+ 픽셀 수준의 세밀한 작업 │
│ 50-100% 컴포넌트 편집 │
│ 25-50% 페이지/화면 수준 │
│ 10-25% 플로우 개요 │
│ <10% 전체 조감 네비게이션 │
│ │
│ 줌에 따른 UI 적응: │
│ • 텍스트는 가독성 임계값 아래에서 숨김 │
│ • 세부사항은 거리에 따라 단순화 │
│ • 프레임 라벨은 항상 표시 │
└─────────────────────────────────────────────────────────────────┘
미니맵 패턴:
/* Canvas navigation mini-map */
.minimap {
position: fixed;
bottom: 16px;
right: 16px;
width: 200px;
height: 150px;
background: rgba(0, 0, 0, 0.8);
border-radius: 8px;
overflow: hidden;
}
.minimap-viewport {
/* Current visible area */
border: 2px solid var(--color-primary);
background: rgba(255, 255, 255, 0.1);
cursor: grab;
}
.minimap-content {
/* Simplified render of all frames */
opacity: 0.6;
}
3. 커맨드 센터로서의 툴바
Figma의 툴바는 점진적 공개를 구현합니다: 처음에는 단순해 보이지만, 탐색할수록 강력해집니다.
툴바 구조:
FIGMA 툴바 해부:
┌─────────────────────────────────────────────────────────────────┐
│ │
│ ┌─────┬─────┬─────┬─────┬─────┬─────────────────┬───────────┐ │
│ │ [=] │ [>] │ [R] │ [O] │ [-] │ T (H) [...] │ Share v │ │
│ └──┬──┴──┬──┴──┬──┴──┬──┴──┬──┴────────┬────────┴─────┬─────┘ │
│ │ │ │ │ │ │ │ │
│ 메뉴 이동 프레임 도형 선 텍스트/손/ 협업 │
│ 도구 도구 코멘트 │
│ │
│ FLYOUT 패턴: │
│ ┌─────┐ │
│ │ [R] │ <- 기본 도구 (클릭) │
│ └──┬──┘ │
│ │ ┌─────────────────────────┐ │
│ └──│ [R] Rectangle R │ <- 길게 누르면 옵션 표시 │
│ │ [O] Ellipse O │ │
│ │ [^] Polygon │ │
│ │ [*] Star │ │
│ │ [I] Place image Cmd+K │ │
│ └─────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────┘
컨텍스트 인식 툴바:
선택에 따라 툴바 옵션이 동적으로 변경:
선택 없음: [Move] [Frame] [Shape] [Pen] [Text]
프레임 선택: [Move] [Frame] [Auto layout ▼] [Grid ▼]
텍스트 선택: [Move] [Font ▼] [Size ▼] [Weight ▼] [Align]
컴포넌트 선택: [Move] [Variants] [Properties] [Detach]
4. 속성 패널: 컨텍스트 지능
오른쪽 패널은 선택에 따라 완전히 적응하여 관련 컨트롤만 표시합니다.
패널 구조:
속성 패널 상태:
┌─────────────────────────────────────────────────────────────────┐
│ │
│ 선택 없음: 프레임 선택: │
│ ┌────────────────────┐ ┌────────────────────┐ │
│ │ Design Prototype │ │ Design Prototype │ │
│ ├────────────────────┤ ├────────────────────┤ │
│ │ │ │ Frame │
│ │ 항목을 선택하여 │ │ W: 375 H: 812 │ │
│ │ 속성을 확인하세요 │ │ X: 100 Y: 200 │ │
│ │ │ ├────────────────────┤ │
│ │ │ │ Auto Layout │ │
│ │ │ │ ═══ ↕ 16 ↔ 24 │ │
│ │ │ ├────────────────────┤ │
│ │ │ │ Fill │ │
│ │ │ │ ■ #FFFFFF 100% │ │
│ │ │ ├────────────────────┤ │
│ │ │ │ Stroke │ │
│ │ │ │ + Add stroke │ │
│ │ │ ├────────────────────┤ │
│ │ │ │ Effects │ │
│ │ │ │ + Add effect │ │
│ └────────────────────┘ └────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────┘
CSS 구현 패턴:
/* Figma-style properties panel */
.properties-panel {
width: 240px;
background: var(--bg-secondary);
border-left: 1px solid var(--border-subtle);
display: flex;
flex-direction: column;
}
.property-section {
padding: 12px 16px;
border-bottom: 1px solid var(--border-subtle);
}
.property-section-header {
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--text-secondary);
margin-bottom: 8px;
}
/* 접을 수 있는 섹션 */
.property-section[data-collapsed="true"] .property-section-content {
display: none;
}
/* 인라인 입력 그룹 */
.property-row {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 8px;
}
.property-label {
width: 24px;
font-size: 11px;
color: var(--text-tertiary);
}
.property-input {
flex: 1;
height: 28px;
padding: 0 8px;
font-size: 11px;
background: var(--bg-tertiary);
border: 1px solid transparent;
border-radius: 4px;
}
.property-input:focus {
border-color: var(--color-primary);
outline: none;
}
5. Variables & 디자인 토큰
2025/2026년 현재, 가장 선진적인 팀들은 시스템 전체를 Figma Variables 위에 구축합니다. 이는 디자인과 코드를 연결하는 원자적 디자인 결정입니다.
토큰 아키텍처:
VARIABLE STRUCTURE:
┌─────────────────────────────────────────────────────────────────┐
│ │
│ PRIMITIVES (원시 값) │
│ ├── colors/ │
│ │ ├── blue-50: #EBF5FF │
│ │ ├── blue-100: #D1E9FF │
│ │ ├── blue-500: #2563EB ← 브랜드 프라이머리 │
│ │ └── ... │
│ ├── spacing/ │
│ │ ├── 4: 4px │
│ │ ├── 8: 8px │
│ │ ├── 16: 16px │
│ │ └── ... │
│ └── radius/ │
│ ├── sm: 4px │
│ ├── md: 8px │
│ └── lg: 16px │
│ │
│ SEMANTIC (맥락적 의미) │
│ ├── surface/ │
│ │ ├── primary: → colors/white │
│ │ ├── secondary: → colors/gray-50 │
│ │ └── elevated: → colors/white │
│ ├── text/ │
│ │ ├── primary: → colors/gray-900 │
│ │ ├── secondary: → colors/gray-600 │
│ │ └── disabled: → colors/gray-400 │
│ └── interactive/ │
│ ├── default: → colors/blue-500 │
│ ├── hover: → colors/blue-600 │
│ └── pressed: → colors/blue-700 │
│ │
│ COMPONENT (특정 용도) │
│ ├── button/ │
│ │ ├── background: → interactive/default │
│ │ ├── text: → colors/white │
│ │ └── radius: → radius/md │
│ └── card/ │
│ ├── background: → surface/elevated │
│ ├── padding: → spacing/16 │
│ └── radius: → radius/lg │
│ │
└─────────────────────────────────────────────────────────────────┘
Figma variables에서 CSS 커스텀 프로퍼티로:
/* Figma Variables에서 내보낸 값 */
:root {
/* Primitives */
--color-blue-500: #2563EB;
--color-gray-900: #111827;
--spacing-16: 16px;
--radius-md: 8px;
/* 시맨틱 토큰 */
--color-interactive-default: var(--color-blue-500);
--color-text-primary: var(--color-gray-900);
/* 컴포넌트 토큰 */
--button-bg: var(--color-interactive-default);
--button-radius: var(--radius-md);
--card-padding: var(--spacing-16);
}
/* variable modes를 통한 다크 모드 */
[data-theme="dark"] {
--color-text-primary: #F9FAFB;
--color-surface-primary: #1F2937;
}
6. Dev Mode: 디자인과 코드의 연결
Figma의 Dev Mode는 디자인 의도를 프로덕션 수준의 코드로 변환하는 개발자 전용 워크스페이스입니다.
Dev Mode 워크플로우:
디자인 → 개발 핸드오프 흐름:
┌─────────────────────────────────────────────────────────────────┐
│ │
│ 1. 디자이너가 준비 완료 표시 │
│ ┌─────────────────────────────────────────────────────────────┐│
│ │ Frame: Login Screen [✓ Ready for dev] ││
│ │ ││
│ │ 준비 완료 표시 시: ││
│ │ • 개발자 대기열에 표시 ││
│ │ • 주요 수정 잠금 ││
│ │ • 변경 사항 추적 활성화 ││
│ └─────────────────────────────────────────────────────────────┘│
│ │
│ 2. 개발자가 검토 │
│ ┌─────────────────────────────────────────────────────────────┐│
│ │ ┌──────────────────┐ ┌──────────────────────────────────┐ ││
│ │ │ │ │ CSS │ ││
│ │ │ [Button] │ │ .button { │ ││
│ │ │ │ │ display: flex; │ ││
│ │ │ │ │ padding: 12px 24px; │ ││
│ │ └──────────────────┘ │ background: var(--primary); │ ││
│ │ │ border-radius: 8px; │ ││
│ │ 선택됨: Button │ } │ ││
│ │ 컴포넌트: ui/Button │ │ ││
│ │ 마지막 수정: 2시간 전 │ [복사] [Swift로 전환] │ ││
│ │ └──────────────────────────────────┘ ││
│ └─────────────────────────────────────────────────────────────┘│
│ │
│ 3. 변경 사항 비교 │
│ ┌─────────────────────────────────────────────────────────────┐│
│ │ 마지막 개발자 확인 이후 변경 사항: ││
│ │ ││
│ │ - Padding: 16px → 12px ││
│ │ + Border radius: 8px (신규) ││
│ │ ~ Color: #2563EB → var(--primary) ││
│ └─────────────────────────────────────────────────────────────┘│
│ │
└─────────────────────────────────────────────────────────────────┘
컬러 시스템
Figma의 인터페이스는 사용자 콘텐츠에 집중할 수 있도록 절제된 중립 색상 팔레트를 사용합니다.
/* Figma의 UI 컬러 팔레트 */
:root {
/* 서피스 */
--bg-canvas: #E5E5E5; /* 캔버스 배경 */
--bg-primary: #FFFFFF; /* 패널, 프레임 */
--bg-secondary: #F5F5F5; /* 보조 패널 */
--bg-tertiary: #E8E8E8; /* 입력 필드, 웰 */
/* 텍스트 */
--text-primary: #000000;
--text-secondary: #666666;
--text-tertiary: #999999;
/* 테두리 */
--border-subtle: rgba(0, 0, 0, 0.1);
--border-strong: rgba(0, 0, 0, 0.2);
/* Interactive */
--color-primary: #0D99FF; /* Selection, focus */
--color-primary-hover: #0085EB;
--color-success: #14AE5C;
--color-warning: #FFCD29;
--color-error: #F24822;
/* Multiplayer colors (assigned to users) */
--cursor-1: #F24822; /* Red */
--cursor-2: #FF7262; /* Coral */
--cursor-3: #FFCD29; /* Yellow */
--cursor-4: #14AE5C; /* Green */
--cursor-5: #0D99FF; /* Blue */
--cursor-6: #9747FF; /* Purple */
--cursor-7: #FF00FF; /* Magenta */
}
/* Dark mode */
[data-theme="dark"] {
--bg-canvas: #1E1E1E;
--bg-primary: #2C2C2C;
--bg-secondary: #383838;
--bg-tertiary: #444444;
--text-primary: #FFFFFF;
--text-secondary: #ABABAB;
--text-tertiary: #7B7B7B;
}
타이포그래피
Figma는 인터페이스에 화면 전용으로 설계된 서체인 Inter를 사용합니다.
/* Figma's typography system */
:root {
--font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
/* Type scale */
--text-xs: 11px; /* Labels, metadata */
--text-sm: 12px; /* Body, properties */
--text-md: 13px; /* Headings */
--text-lg: 14px; /* Section titles */
/* Weights */
--font-regular: 400;
--font-medium: 500;
--font-semibold: 600;
/* Line heights */
--leading-tight: 1.2;
--leading-normal: 1.4;
--leading-relaxed: 1.6;
}
/* Application */
.section-header {
font-size: var(--text-xs);
font-weight: var(--font-semibold);
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--text-secondary);
}
.property-label {
font-size: var(--text-xs);
color: var(--text-tertiary);
}
.layer-name {
font-size: var(--text-sm);
font-weight: var(--font-medium);
}
애니메이션 & 마이크로인터랙션
Figma는 주의를 분산시키지 않으면서 피드백을 제공하는 섬세하고 목적이 분명한 모션을 사용합니다.
/* Figma's motion principles */
:root {
/* Durations */
--duration-instant: 50ms; /* Hover states */
--duration-fast: 100ms; /* Toggles, small changes */
--duration-normal: 200ms; /* Panel transitions */
--duration-slow: 300ms; /* Page transitions */
/* Easings */
--ease-out: cubic-bezier(0, 0, 0.2, 1);
--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
}
/* Panel slide-in */
.panel {
transform: translateX(100%);
transition: transform var(--duration-normal) var(--ease-out);
}
.panel[data-visible="true"] {
transform: translateX(0);
}
/* Selection highlight */
.layer-item[data-selected="true"] {
background: var(--color-primary);
transition: background var(--duration-fast) var(--ease-out);
}
/* Cursor presence fade */
.remote-cursor {
transition: opacity var(--duration-slow) var(--ease-out);
}
.remote-cursor[data-idle="true"] {
opacity: 0.5;
}
주요 혁신
FigJam: 캔버스 메타포의 확장
FigJam은 Figma의 캔버스를 화이트보드로 확장하여, 무한 캔버스가 픽셀 작업뿐만 아니라 아이디어 발상에도 효과적임을 입증했습니다.
디자인 결정: - Figma의 중립적인 톤과 대비되는 따뜻하고 활기찬 색상 팔레트 - 물리 효과가 적용된 스티키 노트 ("던질" 수 있음) - 비동기 피드백을 위한 스탬프와 리액션 - 퍼실리테이션을 위한 타이머와 투표 기능
Variables: 디자인 토큰의 네이티브 지원
Figma Variables는 디자인 토큰을 일급 시민으로 만들어 다음을 가능하게 했습니다: - 모드 전환 (라이트/다크, 브랜드 테마) - 반응형 토큰 (모바일/데스크톱 값) - 프로토타이핑 로직을 위한 숫자 변수
AI 통합 (2025+)
Figma의 AI 접근 방식은 협업을 중심에 둡니다: - 토큰 준수를 위한 AI 기반 린팅 - 예측 기반 변수 제안 - 레이아웃 최적화 권장 - Weave에서의 생성형 디자인 탐색
구현을 위한 교훈
1. 처음부터 멀티플레이어를 고려하여 구축하기
// Presence system architecture
class PresenceManager {
constructor(roomId) {
this.users = new Map();
this.localUser = null;
this.socket = new WebSocket(`wss://collab.example.com/${roomId}`);
// Debounce cursor updates
this.broadcastCursor = debounce((position) => {
this.socket.send(JSON.stringify({
type: 'cursor',
userId: this.localUser.id,
position,
timestamp: Date.now()
}));
}, 50);
}
updateCursor(x, y) {
this.localUser.cursor = { x, y };
this.broadcastCursor({ x, y });
}
// Fade idle users
checkIdleUsers() {
const now = Date.now();
const IDLE_THRESHOLD = 30000; // 30 seconds
this.users.forEach(user => {
user.isIdle = (now - user.lastActivity) > IDLE_THRESHOLD;
});
}
}
2. 컨텍스트 인식 인터페이스
// Panel content based on selection
function getPropertiesForSelection(selection) {
if (selection.length === 0) {
return { type: 'empty', message: 'Select something to see properties' };
}
if (selection.length > 1) {
return { type: 'mixed', items: selection };
}
const item = selection[0];
switch (item.type) {
case 'FRAME':
return {
type: 'frame',
sections: ['dimensions', 'autoLayout', 'fill', 'stroke', 'effects']
};
case 'TEXT':
return {
type: 'text',
sections: ['font', 'paragraph', 'fill']
};
case 'COMPONENT':
return {
type: 'component',
sections: ['properties', 'variants', 'dimensions']
};
default:
return {
type: 'generic',
sections: ['dimensions', 'fill', 'stroke']
};
}
}
3. 툴바에서의 점진적 공개
<!-- Tool with flyout variants -->
<div class="tool-button" data-tool="shape">
<button class="tool-primary" title="Rectangle (R)">
<svg><!-- Rectangle icon --></svg>
</button>
<div class="tool-flyout" hidden>
<button data-variant="rectangle">
<svg></svg> Rectangle <kbd>R</kbd>
</button>
<button data-variant="ellipse">
<svg></svg> Ellipse <kbd>O</kbd>
</button>
<button data-variant="polygon">
<svg></svg> Polygon
</button>
<button data-variant="star">
<svg></svg> Star
</button>
<hr>
<button data-variant="image">
<svg></svg> Place image <kbd>Cmd+Shift+K</kbd>
</button>
</div>
</div>
<script>
// Long-press to reveal flyout
const LONG_PRESS_DURATION = 300;
toolButtons.forEach(btn => {
let pressTimer;
btn.addEventListener('pointerdown', () => {
pressTimer = setTimeout(() => {
btn.querySelector('.tool-flyout').hidden = false;
}, LONG_PRESS_DURATION);
});
btn.addEventListener('pointerup', () => {
clearTimeout(pressTimer);
});
});
</script>
관련 원칙
- 게슈탈트: 근접성 및 그룹화: 패널 구성
- 시각적 계층 구조: 레이어 목록 디자인
- 색채 이론: 기능적 색상: 상태 및 선택
- 간격 및 리듬: 8px 그리드 시스템
자주 묻는 질문
Figma의 멀티플레이어 기술은 어떻게 작동하나요?
Figma는 기존의 운영 변환(OT)보다 단순한 자체 솔루션을 구축했습니다. Figma는 문서 내 텍스트가 아닌 캔버스 위의 객체를 다루기 때문에 덜 복잡한 충돌 해결 시스템을 사용할 수 있었습니다. 변경 사항은 WebSocket 연결을 통해 동기화되며, 성능을 위해 커서 위치는 50ms 간격으로 디바운스됩니다. 사용자는 활동 시 이름 레이블이 표시되는 색상 코드 커서로 식별됩니다.
Figma와 FigJam의 차이점은 무엇인가요?
Figma는 픽셀 수준의 제어, 컴포넌트, auto layout을 갖춘 UI/UX 작업용 정밀 디자인 도구입니다. FigJam은 더 따뜻한 색상 팔레트, 물리 효과가 있는 스티키 노트, 스탬프, 리액션, 타이머 및 투표와 같은 진행 도구를 갖춘 아이디어 발상을 위한 협업 화이트보드입니다. 둘 다 무한 캔버스 패러다임을 공유하지만 디자인 프로세스에서 서로 다른 목적을 수행합니다.
Figma Variables는 디자인 시스템에서 어떻게 작동하나요?
Variables는 3단계 아키텍처를 따릅니다: 프리미티브(원시 값, 예: blue-500: #2563EB), 시맨틱 토큰(맥락적 의미, 예: interactive-default → blue-500), 컴포넌트 토큰(특정 용도, 예: button-background → interactive-default). 이러한 계층 구조는 라이트/다크 테마를 위한 모드 전환과 반응형 값을 가능하게 하면서 단일 진실 공급원을 유지합니다.
Dev Mode란 무엇이며 누구를 위한 것인가요?
Dev Mode는 디자인 의도를 프로덕션 준비 코드로 변환하는 전용 개발자 작업 공간입니다. 디자이너가 프레임을 "ready for dev"로 표시하면 주요 수정이 잠기고 변경 사항 추적이 활성화됩니다. 개발자는 생성된 CSS, Swift 또는 기타 코드 스니펫, 컴포넌트 참조, 그리고 마지막 검토 이후 변경된 내용을 보여주는 diff 뷰를 확인할 수 있습니다.
Figma는 왜 페이지 대신 무한 캔버스를 사용하나요?
무한 캔버스는 페이지 기반 도구가 부과하는 인위적인 제약을 제거합니다. 디자이너는 전체 사용자 플로우를 나란히 배치하고, 다양한 확대/축소 수준에서 변형을 비교하며, 페이지 탐색을 관리할 필요 없이 아이디어를 탐구할 수 있습니다. 확대/축소 수준은 각각 다른 목적을 수행합니다: 100% 이상은 픽셀 작업용, 25-50%는 페이지 수준 검토용, 10% 미만은 전체 조감도 탐색용입니다.