FigmaとLinearの連携：コピペなしでデザインと開発を同期する
ネイティブ埋め込み、Figmaプラグイン、デザインと開発を同期するワークフローパターンでFigmaとLinearを連携する方法。
By Ellis Keane · 2026-03-15
昨年のどこかで、デザインからエンジニアリングへのハンドオフは職場の劇場の一ジャンルになってしまった。デザイナーはFigmaでコンポーネントを仕上げ、丁寧に書かれた3つのコメントを残し、Slackにリンクをペーストしてビルドするエンジニアにタグを付ける。エンジニアは2日後にリンクを開き、3つのコメントのうち2つを読み、バリアントを見逃し、QAまで誰も気づかないほど完成品に近いものを出荷する。
このような特定のミスコミュニケーションを経験したことがあるなら（私は繰り返し経験している）、解決策は「より良いコミュニケーション」ではないとすでに知っているはずだ。コンテキストが作業と一緒に移動するようにツールを接続することだ。ここでは、FigmaとLinearを連携する方法 – ネイティブ埋め込み、プラグイン、そして実際に接続を有用にする3つのワークフローパターン – を説明する。
LinearのFigmaインテグレーションが実際にできること
LinearはFigma埋め込みをしばらくサポートしており、基本機能は確かだ。FigmaのURLをイシューの説明やコメントに貼り付けると、Linearがデザインの埋め込みプレビューを生成する。これらのプレビューはデフォルトで静的だ – Linearはコンテキストを保持するために埋め込み時点でフリーズする。これは意図的な選択だ。編集モードで手動更新できるが、デザインが知らぬ間に変更されることはない。
FigmaリンクをイシューのAttachmentsとして添付することもできる。木曜日までに必然的に40メッセージに膨れ上がるコメントスレッドに埋もれるのではなく、サイドバーで整理された状態に保てる。
figma linearインテグレーションが双方向でないのは明らかだ。LinearはFigmaを見るが、FigmaはLinearを見ない。コメントは書かれた場所に留まる。ステータス変更は伝播しない。エンジニアがLinearでイシューを「完了」とマークしても、誰かが伝えない限りFigmaの誰も知らない – 実際には、Figmaの誰も知らないということだ。
FigmaとLinearを連携する方法：ステップバイステップ
セットアップは簡単だ（ありがたいことに – すべてが12ステップのOAuthダンスを必要とするわけではない！）。
ステップ1：インテグレーションを有効にする
Linearワークスペースの設定に移動し、インテグレーションを選択する。リストからFigmaを見つけて有効にするをクリック。接続を承認するためにFigmaにリダイレクトされる。アクセスを許可すれば、管理側の設定は完了だ。
ステップ2：フレームをイシューにリンクする
有効にすると、FigmaのURLをLinearイシューに貼り付けると埋め込みプレビューが生成される。最良の結果を得るために：
- ファイル全体ではなく、特定のフレームにリンクする。
figma.com/file/abc123?node-id=42:1337へのリンクは関連するコンポーネントを表示する。figma.com/file/abc123へのリンクはFigmaがデフォルトビューと判断したものを表示するが、通常はそれが望むものではない。
- 主要なデザインリファレンスにはイシューの説明を使用する。コメントはイテレーションに使えるが、説明はエンジニアがイシューを選んだときに最初に読むものだ。
- イシューがスプリントに入る前にFigmaリンクを追加する。 これは明白に聞こえるかもしれないが、エンジニアがすでに20分間探し回った後にデザインコンテキストが添付されることがいかに頻繁に起こるかに本当に驚く。
ステップ3：Figmaプラグインをインストールする
FigmaにはLinearプラグインがあり、デザイナーはキャンバスから直接Linearイシューを作成・更新できる。フレームを選択し、プラグインを開き、イシューのタイトルとチームを入力すると、あらかじめFigmaリンクが添付された状態でイシューが作成される。プラグインはFigmaを離れずにイシューのステータスと担当者の更新もサポートする。
これにより、デザインから開発へのハンドオフが「エンジニアがデザインを探す」から「デザイナーがデザインをエンジニアリングに送る」に変わる。私たちのチームの経験では、この一つの変化だけで「このデザインはどこにある？」というSlackメッセージがほぼ半減した。それだけでセットアップに5分かける価値があると信じてほしい！
ネイティブインテグレーションの限界
LinearとFigmaが構築したものを過小評価したくはない – 軽量な接続としては機能する。しかし、指摘する価値のあるギャップがある。存在しないふりをしていると、3ヶ月後に「インテグレーションがあるのに、なぜ何も同期していないのか？」という会話が生まれるからだ。
コメントは越境しない。 デザイナーがFigmaでフィードバックを残し、エンジニアがLinearで応答した場合、両方のツールを手動でチェックしない限り互いの応答を見ない。私たちの経験では、このコメントサイロがデザインから開発へのほとんどのミスコミュニケーションの原因だ – 不良な仕様からではなく、2つの場所で同時に起こっている会話からだ。
ステータスは一方向だ。 LinearでイシューをProgress（進行中）に移動しても、Figmaでは何も更新されない。デザイナーは自分のデザインがビルドされているかどうかを知るために、Linearをチェックするか（より現実的にはSlackで聞く）必要がある。
変更通知なし。 デザイナーがLinearイシューにリンクされたフレームを更新しても、そのイシューに割り当てられたエンジニアはLinearでアラートを受け取らない。プレビューはデフォルトで静的なので、エンジニアはすでに改訂されたバージョンのデザインに対してビルドしている可能性がある。誰かが手動で埋め込みを更新するか、Slackで何か言わない限り、更新は見えない。
ギャップを埋めるワークフローパターン
埋め込みはリファレンスの問題を解決する。これら3つのパターンは調整の問題を解決する – そして、FigmaとLinearのインテグレーションが実際にハンドオフを改善するか、単に誰も維持しない別のツール接続を追加するかを決定するのはこれらだ。
パターン1：デザイン準備完了のイシュー
デザインイシューがスプリントバックログに入る前に、Linearに3つのものを添付する必要がある：
- Figmaフレームリンク（ファイルではなく特定のフレーム）
- デザインノートは最後のイテレーション以降の変更点をまとめる（埋め込みプレビューは現在の状態を表示するが、何が新しいかは表示しないため）
- 受け入れ基準はデザインを具体的に参照する – 「Figmaフレームに一致する」は受け入れ基準ではない。「カードタイトルとサブタイトルの間に8pxスペーシングトークンを使用する」が受け入れ基準だ。
イシューごとにデザイナーが数分余分に準備する。その見返りは、Slackの考古学的調査なしにビルドを開始できるエンジニアだ。
パターン2：デザインレビューラベル
カスタムLinearラベルを作成する – 「デザインレビューが必要」のようなもの – そして、ビルドされたが、デザイナーが実装を確認する必要があるイシューに適用する。コツ（そして、これは痛いほど明白に聞こえることに気づいている）は、イシューのライフサイクルテンプレートの一部にして、イシューが「レビュー中」に移動したときに自動的にトリガーされるようにすることだ。経験から言うが – 私たちはまさにこのラベルを作成し、2スプリント間熱心に使ったが、誰もテンプレート化しなかったためひっそりと止めてしまった。冒頭でバリアントを見逃して「ほぼ完成品」を出荷したエンジニアを覚えているか？それはデザインレビューラベルの欠如だった。
パターン3：スプリントマップとしてのFigmaセクション
大きなプロジェクトでは、現在のスプリントのデザインにFigmaセクションまたはページを専用にする。各フレームは正確に1つのLinearイシューにマッピングされる。イシュー識別子に合わせてフレームを命名する – ENG-142 – Card Component Redesign – エンジニアが「フレーム247」と名付けられた40のアートボードをスクロールせずに正しいフレームを見つけられるようにする。
これらの習慣を定着させる
これを機能させているチームにはいくつかの共通点がある：デザイナーはイシューがスプリントに入る前に（エンジニアが文句を言った後ではなく）フレームをリンクし、エンジニアはイシューを完了とマークする前に（後から思いついたのではなく）レビューラベルを適用し、誰もSlackをデザイン決定の記録システムとして扱わない。
最後の点は、どんなインテグレーションよりも重要だ。「ボーダー半径を変更することを決めたあのスレッド」を15分間検索したことがあるなら、まさに私の言いたいことがわかるはずだ。Slackはデザインの会話が起こる場所であり、それらが消える場所でもある。スレッドでデザイン決定が行われた場合、誰かがFigmaファイルまたはLinearイシューを更新する必要がある – さもなければ3週間後には消えてしまい、デプロイアラートとランチプランの下に埋もれる。
「スレッドでデザイン決定が行われた場合、誰かがFigmaファイルまたはLinearイシューを更新する必要がある – さもなければ3週間後には消えてしまい、デプロイアラートとランチプランの下に埋もれる。」 attribution: Chris Calo
ネイティブのFigma-Linearインテグレーションは埋め込みとリファレンスをうまく処理する。コメント、ステータス、変更通知などの双方向の認識には、手動の規律か、両方のツール間でコンテキストを自動的に接続するレイヤーが必要だ。
FigmaとLinearだけでなく – SlackやGitHub、Notionも組み合わせている場合、すべてを同期させるための手動オーバーヘッドは急速に増大する。それは別の会話だが、次の「誰がこのデザインを変更して、なぜ誰も教えてくれなかったのか？」という事後検討の前に持つ価値がある。
Figma、Linear、Slack、GitHubを1つのナレッジグラフに接続 – デザインコンテキストが作業と一緒に移動するように。
Q: SugarbugはFigmaとLinearを自動的に連携しますか？ A: はい。SugarbugはFigmaとLinearの両方からシグナルを取り込み、デザインのコメントやファイルの更新とナレッジグラフ内のイシューステータス変更を関連付けます。デザイナーがフレームにフィードバックを残すと、Sugarbugは誰もURLをコピーすることなく、関連するLinearイシューと並べて表示できます。
Q: SugarbugはFigma、Linear、Slack間のデザインハンドオフを追跡できますか？ A: SugarbugはFigma、Linear、Slack、GitHub、Notionを単一のナレッジグラフに接続します。デザインフィードバック、エンジニアリングの議論、タスクステータスはすべて相関関係が保たれ、ハンドオフ中にコンテキストが失われません。
Q: LinearにはFigmaの組み込みインテグレーションがありますか？ A: はい。LinearのネイティブFigmaインテグレーションでは、FigmaのURLをイシューに貼り付けて埋め込みプレビューを作成したり、Figmaプラグインを使用してキャンバスからイシューを作成・更新したりできます。ただし、一方向のみです – コメントとステータス変更はツール間で同期しません。
Q: FigmaフレームをLinearイシューにリンクする方法は？ A: FigmaフレームのURLをLinearイシューの説明またはコメントに貼り付けます。Linearが埋め込みプレビューを生成します。LinearのFigmaプラグインを使用して、リンクを事前に添付した状態でキャンバスから直接イシューを作成することもできます。
Q: FigmaのコメントがLinearに表示されないのはなぜですか？ A: LinearのネイティブFigmaインテグレーションはデザインプレビューを埋め込みますが、ツール間でコメントを同期しません。デザイナーのFigmaコメントとエンジニアのLinearコメントは別々のサイロに存在します。Sugarbugのようなツールは、両方からシグナルを取り込み、共有ナレッジグラフでリンクすることでこのギャップを埋めます。