Figma/XDからSketchへ：プロの現場で「資産」を確実に守り抜く移行術
こんにちは。UI/UXの最前線で走り続けていると、「どのツールが最強か」という議論によく遭遇します。しかし、真のプロフェッショナルはツールに振り回されません。ツールはあくまで「デザインシステムの思想を体現するための筆」に過ぎないからです。
今回は、FigmaやAdobe XDからSketchへの移行という、一見リスキーで地味な作業を、「資産の完全なる継承」というクリエイティブなプロセスへと昇華させるための極意を伝授します。
—
1. なぜ、あえて「Sketch」を選ぶのか？
Figmaが主流の今、なぜSketchへ戻るのか？ それは「ネイティブアプリとしての圧倒的な安定性と、OS（macOS）との深い統合」にあります。Sketchは単なるベクターツールではなく、Macのポテンシャルを最大限に引き出すための「デザインエンジニアリング環境」です。
移行を成功させる鍵は、「レイヤーを移動させる」のではなく、「構造を移植する」という意識改革にあります。
—
2. 安全な移行のための「黄金のワークフロー」
FigmaやXDからSketchへ移行する際、最も恐ろしいのは「レイヤーの崩壊」と「スタイル情報の消失」です。これを防ぐための、現場の鉄板手順を公開します。
ステップ1：中間言語「SVG」による構造の平坦化を避ける
SVGは万能ですが、複雑なオートレイアウトやスタック構造を一撃で破壊します。まずは「SVGの限界を知る」ことがスタートです。
- Adobe XDの場合: `.xd`ファイルそのものをSketchで開く機能がありますが、複雑なコンポーネントは崩れます。
- Figmaの場合: コピー＆ペーストではなく、一度「SVG」としてエクスポートし、それをSketchのプラグイン経由で読み込むのが最も「ゴミ」が出ません。
ステップ2：神プラグイン「SVG Import」の導入
SketchでSVGを扱うなら、ただドラッグ＆ドロップしてはいけません。レイヤー構造を維持し、パスを整理してくれるプラグインを使いましょう。
導入の儀式:
1. [Sketch Runner](https://sketchrunner.com/) をインストールします（これがないと始まりません）。
2. `Runner`を開き、`SVG Import`と検索してインストール。
3. 読み込み時に「Group layers」のオプションを必ず有効にしてください。これにより、Figmaのフレーム構造をSketchのグループ構造として「再解釈」させます。
—
3. HelloWorld的動作確認：移行の精度を測る「テスト用コンポーネント」
移行が成功したかを確認するための、私流の「儀式」を紹介します。これさえ通れば、大規模なデザインシステムを移行しても大丈夫です。
確認項目:
1. シンボルの入れ子構造: ボタンの中にアイコンが入っているコンポーネントを移行し、Sketch上でインスタンスを上書きできるか。
2. テキストスタイル: フォントファミリーとウェイト、行間がピクセル単位で一致しているか。
3. パスの結合状態: 複雑なシェイプが「Flatten（フラット化）」されず、編集可能なベクターとして残っているか。
動作確認用スクリプト（Sketchの「Run Script」で実行）
コンポーネントの構造が正しく維持されているか、一瞬でチェックする簡単なJSです。
// 選択したレイヤーが正しくグループ化されているか確認するスクリプト
var selection = context.selection;
selection.forEach(function(layer) {
if (layer.class() == “MSLayerGroup”) {
log(“成功: ” + layer.name() + ” はグループとして正しく移行されました。”);
} else {
log(“警告: ” + layer.name() + ” はフラット化されています。再構成が必要です。”);
}
});
—
4. 現場で震えるほど役立つ「移行後の仕上げ」
移行した直後は、まだ「生データ」に過ぎません。ここからが真のプロの仕事です。
- 「Shared Styles」への再定義: 移行したテキストやカラーは、Sketchのスタイル機能に必ず紐付け直してください。これを怠ると、後で修正が効かない「地獄のファイル」になります。
- シンボルの命名規則: `Figma/Button/Primary` のような階層構造を、Sketchの `/` 区切り（`Button / Primary`）に変換します。これにより、Sketchの強力なシンボルメニューが機能し始めます。
—
最後に：道具はあなたを裏切らない
移行作業は退屈に思えるかもしれません。しかし、コンポーネントの構造を一つひとつ見直すプロセスは、自分の作ったデザインシステムを再評価する絶好の機会でもあります。
「面倒な作業」を「設計の再定義」と捉え直すことができれば、あなたはもう一流のUIエンジニアです。Sketchという強力な相棒と共に、より洗練されたプロダクトを創り出してください。
毎日の作業が、今日から少しだけ「心地よいもの」に変わるはずですよ。応援しています！