Figma: コラボレーションキャンバス
Figmaがリアルタイムマルチプレイヤーデザインを構築した方法：プレゼンスインジケーター、無限キャンバス、Dev Mode、デザイントークン。CSSとJavaScript実装パターン付き。
Figma：コラボレーションのキャンバス
「Figmaのやり方として、私たちはAIをマルチプレイヤーにしたかったのです。コラボレーションは常に私たちのすべての取り組みの中心にありました。」— Figmaチーム
Figmaはデザインを孤独な作業からチームスポーツへと変革しました。ライブコラボレーション編集機能を備えた初のデザインツールとして、Figmaは複雑なクリエイティブツールでも、デザイナーが求める精度を維持しながら、Google Docsのように流動的に使えることを証明しました。
Figmaが重要な理由
Figmaは単にデザインツールにマルチプレイヤー機能を追加しただけではありません。デザインのあり方そのものを再構築したのです。コラボレーションを基盤に組み込むことで、Figmaはワークフロー、チームダイナミクス、そしてデザインから開発へのパイプライン全体を変革しました。
主な成果： - リアルタイムマルチプレイヤー編集を実現した初のデザインツール - UIパラダイムとしての「無限キャンバス」を先駆的に導入 - デザインシステムをすべてのチームに開放 - Dev Modeでデザインと開発を橋渡し - コラボレーションで200億ドルのクリエイティブ帝国を築いた
重要なポイント
- マルチプレイヤーにはシンプルさが必要 - Figmaは操作変換よりもシンプルな独自ソリューションを構築した。シンプルなシステムの方がデバッグと保守が容易だから
- 無限キャンバスは探求を促す - ページベースのツールとは異なり、オープンエンドなキャンバスは反復を促進し、人為的な制約を防ぐ
- コンテキスト対応インターフェースは認知負荷を軽減 - 選択に応じて適応するツールバーとパネルは関連するコントロールのみを表示
- デザイントークンはデザインとコードを橋渡し - プリミティブ→セマンティック→コンポーネントレイヤーの変数がデザイナーと開発者の共通言語を作成
- Dev Modeは専用ワークスペース - 開発者ツールとデザインツールを分離することで、異なるメンタルモデルとワークフローを尊重
コアデザイン原則
1. 基盤としてのマルチプレイヤー
Figmaは操作変換（OT）のような従来のアプローチよりもシンプルな独自のマルチプレイヤーソリューションを構築した。その目標は明確さ：システムは必要以上に複雑であるべきではない。
その哲学： Figmaはテキストエディタではないため、OTの能力は必要なく、より複雑でないもので十分だった。 シンプルなシステムは、理解、実装、デバッグ、テスト、保守が容易です。
マルチプレイヤー向けの視覚パターン：
PRESENCE INDICATORS:
┌─────────────────────────────────────────────────────────────────┐
│ Canvas │
│ │
│ ┌──────────────────────────────────────┐ │
│ │ Component: Button │ (o) Alice │
│ │ ┌────────────────────┐ │ <- Live cursor │
│ │ │ Primary Button │ │ │
│ │ └────────────────────┘ │ │
│ └──────────────────────────────────────┘ (*) Bob │
│ <- Selection ring │
│ │
│ ┌──────────────────────────────────────┐ │
│ │ Input Field (+) Carol │ <- Editing mode │
│ │ ┌────────────────────────────────┐ │ │
│ │ │ | │ │ │
│ │ └────────────────────────────────┘ │ │
│ └──────────────────────────────────────┘ │
└─────────────────────────────────────────────────────────────────┘
カーソルのデザイン:
┌─────────────────────────────────────────────────────────────────┐
│ │
│ カーソルの構造: │
│ │
│ ▲ │
│ ╱ ╲ │
│ ╱ ╲ ← 矢印（ユーザーの色） │
│ ╱_____╲ │
│ ┌─────────┐ │
│ │ Alice │ ← 名前ラベル（ホバー/アクティブ時に表示） │
│ └─────────┘ │
│ │
│ 状態: │
│ • 待機中: カーソルのみ │
│ • アクティブ: カーソル + 名前ラベル │
│ • 編集中: カーソル + 名前 + "編集中..." バッジ │
│ • 離席中: フェードしたカーソル（50%不透明度） │
│ │
└─────────────────────────────────────────────────────────────────┘
実装原則: - ユーザーは名前だけでなく、色でも識別される - 選択リングで誰がどこで作業しているかを表示 - カーソル移動はパフォーマンスのためにデバウンス処理される - ユーザーがアイドル状態になるとプレゼンスインジケーターがフェードアウトする
2. 無限キャンバス
Figmaのキャンバスは、高速なイテレーションを可能にするオープンエンドで柔軟な環境です。ページベースのツールとは異なり、無限キャンバスは探索を促します。
キャンバス操作パターン:
NAVIGATION:
┌─────────────────────────────────────────────────────────────────┐
│ Space + drag キャンバスをパン │
│ Scroll 垂直方向にパン │
│ Shift + scroll 水平方向にパン │
│ 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 {
/* 現在の表示領域 */
border: 2px solid var(--color-primary);
background: rgba(255, 255, 255, 0.1);
cursor: grab;
}
.minimap-content {
/* 全フレームの簡易レンダリング */
opacity: 0.6;
}
3. コマンドセンターとしてのツールバー
Figmaのツールバーは段階的開示を体現しています：一見シンプルでありながら、探索するほど強力な機能が現れます。
ツールバーアーキテクチャ:
FIGMAツールバーの構造:
┌─────────────────────────────────────────────────────────────────┐
│ │
│ ┌─────┬─────┬─────┬─────┬─────┬─────────────────┬───────────┐ │
│ │ [=] │ [>] │ [R] │ [O] │ [-] │ T (H) [...] │ Share v │ │
│ └──┬──┴──┬──┴──┬──┴──┬──┴──┬──┴────────┬────────┴─────┬─────┘ │
│ │ │ │ │ │ │ │ │
│ メニュー 移動 フレーム シェイプ ライン テキスト/ハンド/ コラボレーション │
│ ツール ツール コメント │
│ │
│ フライアウトパターン: │
│ ┌─────┐ │
│ │ [R] │ ← プライマリツール（クリック） │
│ └──┬──┘ │
│ │ ┌─────────────────────────┐ │
│ └──│ [R] Rectangle R │ ← 長押しでオプションを表示 │
│ │ [O] Ellipse O │ │
│ │ [^] Polygon │ │
│ │ [*] Star │ │
│ │ [I] Place image Cmd+K │ │
│ └─────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────┘
**コンテキスト対応ツールバー:**
選択内容に応じてツールバーオプションが動的に変化：
選択なし: [移動] [フレーム] [シェイプ] [ペン] [テキスト]
フレーム選択時: [移動] [フレーム] [オートレイアウト ▼] [グリッド ▼]
テキスト選択時: [移動] [フォント ▼] [サイズ ▼] [ウェイト ▼] [配置]
コンポーネント選択時: [移動] [バリアント] [プロパティ] [デタッチ]
4. プロパティパネル：コンテキストインテリジェンス
右パネルは選択に基づいて完全に適応し、関連するコントロールのみを表示します。
パネルアーキテクチャ：
PROPERTIES PANEL STATES:
┌─────────────────────────────────────────────────────────────────┐
│ │
│ NO SELECTION: FRAME SELECTED: │
│ ┌────────────────────┐ ┌────────────────────┐ │
│ │ Design Prototype │ │ Design Prototype │ │
│ ├────────────────────┤ ├────────────────────┤ │
│ │ │ │ Frame │
│ │ Select something │ │ W: 375 H: 812 │ │
│ │ to see properties │ │ 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 & Design Tokens
2025/2026年までに、最も先進的なチームはFigma Variablesを基盤としたシステムを完全に構築しています：デザインとコードを橋渡しするアトミックなデザイン決定です。
トークンアーキテクチャ：
VARIABLE STRUCTURE:
┌─────────────────────────────────────────────────────────────────┐
│ │
│ PRIMITIVES (Raw values) │
│ ├── colors/ │
│ │ ├── blue-50: #EBF5FF │
│ │ ├── blue-100: #D1E9FF │
│ │ ├── blue-500: #2563EB ← Brand primary │
│ │ └── ... │
│ ├── spacing/ │
│ │ ├── 4: 4px │
│ │ ├── 8: 8px │
│ │ ├── 16: 16px │
│ │ └── ... │
│ └── radius/ │
│ ├── sm: 4px │
│ ├── md: 8px │
│ └── lg: 16px │
│ │
│ SEMANTIC (Contextual meaning) │
│ ├── 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 (Specific usage) │
│ ├── button/ │
│ │ ├── background: → interactive/default │
│ │ ├── text: → colors/white │
│ │ └── radius: → radius/md │
│ └── card/ │
│ ├── background: → surface/elevated │
│ ├── padding: → spacing/16 │
│ └── radius: → radius/lg │
│ │
└─────────────────────────────────────────────────────────────────┘
Figma変数からのCSSカスタムプロパティ：
/* Figma Variablesからエクスポート */
:root {
/* プリミティブ */
--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);
}
/* バリアブルモードによるダークモード */
[data-theme="dark"] {
--color-text-primary: #F9FAFB;
--color-surface-primary: #1F2937;
}
6. Dev Mode：デザインとコードの架け橋
FigmaのDev Modeは、デザインの意図を本番環境で使えるコードに変換する、開発者専用のワークスペースです。
Dev Modeのワークフロー：
DESIGN → DEV HANDOFF FLOW:
┌─────────────────────────────────────────────────────────────────┐
│ │
│ 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時間前 │ [Copy] [Switch to Swift] │ ││
│ │ └──────────────────────────────────┘ ││
│ └─────────────────────────────────────────────────────────────┘│
│ │
│ 3.
CHANGE COMPARISON │
│ ┌─────────────────────────────────────────────────────────────┐│
│ │ 前回のDev表示からの変更: ││
│ │ ││
│ │ - 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);
/* インタラクティブ */
--color-primary: #0D99FF; /* 選択、フォーカス */
--color-primary-hover: #0085EB;
--color-success: #14AE5C;
--color-warning: #FFCD29;
--color-error: #F24822;
/* マルチプレイヤーカラー（ユーザーに割り当て） */
--cursor-1: #F24822; /* 赤 */
--cursor-2: #FF7262; /* コーラル */
--cursor-3: #FFCD29; /* 黄 */
--cursor-4: #14AE5C; /* 緑 */
--cursor-5: #0D99FF; /* 青 */
--cursor-6: #9747FF; /* 紫 */
--cursor-7: #FF00FF; /* マゼンタ */
}
/* ダークモード */
[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のタイポグラフィシステム */
:root {
--font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
/* タイプスケール */
--text-xs: 11px; /* ラベル、メタデータ */
--text-sm: 12px; /* 本文、プロパティ */
--text-md: 13px; /* 見出し */
--text-lg: 14px; /* セクションタイトル */
/* ウェイト */
--font-regular: 400;
--font-medium: 500;
--font-semibold: 600;
/* 行の高さ */
--leading-tight: 1.2;
--leading-normal: 1.4;
--leading-relaxed: 1.6;
}
/* 適用 */
.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のモーション原則 */
:root {
/* 持続時間 */
--duration-instant: 50ms; /* ホバー状態 */
--duration-fast: 100ms; /* トグル、小さな変更 */
--duration-normal: 200ms; /* パネルトランジション */
--duration-slow: 300ms; /* ページトランジション */
/* イージング */
--ease-out: cubic-bezier(0, 0, 0.2, 1);
--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
}
/* パネルのスライドイン */
.panel {
transform: translateX(100%);
transition: transform var(--duration-normal) var(--ease-out);
}
.panel[data-visible="true"] {
transform: translateX(0);
}
/* 選択時のハイライト */
.layer-item[data-selected="true"] {
background: var(--color-primary);
transition: background var(--duration-fast) var(--ease-out);
}
/* カーソルプレゼンスのフェード */
.remote-cursor {
transition: opacity var(--duration-slow) var(--ease-out);
}
.remote-cursor[data-idle="true"] {
opacity: 0.5;
}
主要なイノベーション
FigJam：キャンバスメタファーの拡張
FigJamはFigmaのキャンバスをホワイトボード機能へと拡張し、無限キャンバスがピクセル単位の作業だけでなく、アイデア出しにも有効であることを証明しました。
デザイン上の判断： - 温かみのある遊び心のあるカラーパレット vs. Figmaのニュートラルなトーン - 物理演算付きの付箋（「投げる」ことができる） - 非同期フィードバック用のスタンプとリアクション - ファシリテーションのためのタイマーと投票機能
Variables：ネイティブなデザイントークン
Figma Variablesによりデザイントークンがファーストクラスの機能となり、以下が可能になりました： - モード切り替え（ライト/ダーク、ブランドテーマ） - レスポンシブトークン（モバイル/デスクトップ値） - プロトタイピングロジック用の数値変数
AI統合（2025年以降）
FigmaのAIアプローチはコラボレーションを中心に据えています： - トークン準拠のためのAI駆動リンティング - 予測的な変数サジェスト - レイアウト最適化の推奨事項 - Weaveでのジェネレーティブデザイン探索
実装への教訓
1. 初日からマルチプレイヤーを前提に構築する
// プレゼンスシステムのアーキテクチャ
class PresenceManager {
constructor(roomId) {
this.users = new Map();
this.localUser = null;
this.socket = new WebSocket(`wss://collab.example.com/${roomId}`);
// カーソル更新をデバウンス
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 });
}
// アイドル状態のユーザーをフェードアウト
checkIdleUsers() {
const now = Date.now();
const IDLE_THRESHOLD = 30000; // 30秒
this.users.forEach(user => {
user.isIdle = (now - user.lastActivity) > IDLE_THRESHOLD;
});
}
}
2. コンテキスト対応インターフェース
// 選択に基づくパネルコンテンツ
function getPropertiesForSelection(selection) {
if (selection.length === 0) {
return { type: 'empty', message: 'プロパティを表示するには何かを選択してください' };
}
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. ツールバーにおける段階的開示
<!-- フライアウトバリアント付きツール -->
<div class="tool-button" data-tool="shape">
<button class="tool-primary" title="長方形 (R)">
<svg><!-- 長方形アイコン --></svg>
</button>
<div class="tool-flyout" hidden>
<button data-variant="rectangle">
<svg></svg> 長方形 <kbd>R</kbd>
</button>
<button data-variant="ellipse">
<svg></svg> 楕円 <kbd>O</kbd>
</button>
<button data-variant="polygon">
<svg></svg> 多角形
</button>
<button data-variant="star">
<svg></svg> 星形
</button>
<hr>
<button data-variant="image">
<svg></svg> 画像を配置 <kbd>Cmd+Shift+K</kbd>
</button>
</div>
</div>
<script>
// 長押しでフライアウトを表示
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は従来のOperational Transforms（OT）よりもシンプルな独自ソリューションを構築しました。Figmaはドキュメント内のテキストではなくキャンバス上のオブジェクトを扱うため、より複雑でない競合解決システムを使用できました。変更はWebSocket接続を通じて同期され、パフォーマンスのためにカーソル位置は50msの間隔でデバウンスされます。ユーザーは色分けされたカーソルで識別され、アクティビティ時には名前ラベルが表示されます。
FigmaとFigJamの違いは何ですか？
Figmaはピクセルレベルの制御、コンポーネント、オートレイアウトを備えた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、その他のコードスニペット、コンポーネント参照、そして前回の確認以降に何が変更されたかを示す差分ビューを見ることができます。
なぜFigmaはページではなく無限キャンバスを使用するのですか？
無限キャンバスは、ページベースのツールが課す人為的な制約を取り除きます。デザイナーはユーザーフロー全体を並べて配置し、異なるズームレベルでバリアントを比較し、ページナビゲーションを管理することなくアイデアを探求できます。 ズームレベルは目的に応じて使い分けます：100%以上はピクセル単位の作業、25〜50%はページレベルのレビュー、10%未満は俯瞰的なナビゲーションに適しています。