Figmaが大型アップデートを発表しました#
デザインと開発の壁、まだ感じていませんか？
Figmaが2026年6月24日に発表した新アップデートは、 その壁を大きく取り除く内容となっています。
📌 この記事で分かること
- コードレイヤーとは何か、何ができるのか
- アニメーション・3Dトランスフォームへの対応内容
- AI機能の強化ポイント（カスタムプラグイン・スキル作成など）
- Weavy統合の最新動向
⏱️ 約6分で読めます
この記事を読むことで、Figmaの最新アップデートの全容と、デザイン・開発ワークフローへの影響を把握できます。
【結論】重要ポイント3選#
コードレイヤーが共同キャンバスに追加 リポジトリのクローンやコードからデザインレイヤーへの抽出が可能になりました。
アニメーション・3D対応が内蔵化 これまで外部ソフトが必要だった作業が、Figma単体で完結します。
AIでカスタムプラグインやスキルを作成可能に テキストプロンプトだけで、繰り返し使えるスキルやプラグインを生成できます。
Figmaコードレイヤーとは？基本概念の解説#
コードレイヤーとは、Figmaの共同キャンバス（マルチプレイヤーキャンバス）上に コードを直接統合する新機能です。
主にできることは以下の通りです。
- Gitリポジトリのクローン
- コードからデザインレイヤーへのフロー抽出
- テスト目的でのデザインとコードの往来
FigmaのチーフプロダクトオフィサーであるYuhki Yamashita氏は、 この機能の意義をこう説明しています。
「マルチプレイヤーキャンバスは非常に強力な環境です。本番コードの品質を気にせず、 新しい方向性を素早く探索できます。この機能はデザイナーだけでなく、 エンジニアやPMの行動様式にも変化をもたらすと期待しています。」
つまり、完璧なコードを書くことではなく、アイデアの素早い反復に 焦点を当てた機能設計となっています。
主な新機能と技術仕様#
以下に今回のアップデートの主要機能を整理します。
| 機能カテゴリ | 内容 |
|---|---|
| コードレイヤー | キャンバス上でのリポジトリクローン・フロー抽出 |
| アニメーション | トランジション・3Dトランスフォームの直接統合 |
| シェーダー | AIによるシェーダーエフェクト・フィル生成 |
| AIスキル | テキストプロンプトで再利用可能なスキルを作成 |
| 外部ツール連携 | Notion・Granola・Excel・GitHubなどと接続可能 |
| カスタムプラグイン | プロンプトでレイアウトジェネレーターなどを作成 |
| Weavy統合 | 年内のアップデートでFigma内からワークフロー生成可能に |
業界への影響とメリット#
デザインと開発の連携が進化#
Figmaはこれまでも開発連携を強化してきました。
昨年にはFigma Make（AIプロンプトベースのプロトタイピングツール）を発表し、 その後Claude CodeやCodexとの統合も実施しています。
今回のコードレイヤー追加は、その流れをさらに加速させるものです。
アニメーション対応で外部ツールが不要に#
これまでFigmaでアニメーションを扱うには、 外部ソフトで作成→コード変換→Figmaへ読み込みという手順が必要でした。
今回のアップデートにより、 アニメーション・トランジション・3Dトランスフォームを Figma内で直接統合できるようになります。
ワークフローの簡略化という点で、大きなメリットと言えます。
AI活用の幅が広がる#
今回のAI強化のポイントは3つです。
- シェーダーエフェクト・フィルをAIで生成できるようになった
- 繰り返し使えるスキルをプロンプトで作成し、AIエージェントが活用できる
- Notion・GitHub・Excelなどの外部ツールをAIアシスタントに接続可能になった
また、ファイルを添付してAIに追加コンテキストを渡すことも可能です。
Weavy統合：今後の注目ポイント#
Figmaは昨年、Weavy（ノードベースのワークフローツール）を買収しました。
Weavyはデザイナーが複数のAIモデルを通じてワークフローを実行し、 出力を比較できるツールです。
年内にリリース予定のアップデートでは、 Figma内からWeavyワークフローを直接生成できるようになる予定です。
具体的なリリース時期や詳細については、詳細は元記事を参照ください。
よくある質問（FAQ）#
Q. コードレイヤーは本番コードの作成に使うものですか？
A. いいえ。Yuhki Yamashita氏によると、 コードの品質よりもアイデアの素早い探索・反復を目的とした機能です。 本番コードの品質を追求する場面ではなく、 デザイナー・エンジニア・PMが一緒にアイデアを試す場として想定されています。
Q. アニメーション機能を使うために外部ソフトは必要ですか？
A. 今回のアップデート以降は不要になります。 アニメーション・トランジション・3Dトランスフォームを Figma内で直接統合できるようになりました。
Q. AIアシスタントに接続できる外部ツールは何ですか？
A. ソース記事に記載されているものとして、 Notion・Granola・Excel・GitHubが挙げられています。 ファイルの添付によるコンテキスト追加も可能です。
Q. Weavyとの統合はいつ使えますか？
A. 「年内に展開予定のアップデート」と記載されていますが、 具体的な日程は詳細は元記事を参照ください。
まとめ：押さえておくべき重要ポイント#
今回のFigmaアップデートを5点でまとめます。
- コードレイヤーが共同キャンバスに追加され、チームでのコード・デザイン連携が強化
- アニメーション・トランジション・3DトランスフォームがFigma内で直接使用可能に
- AIでシェーダーエフェクトやフィルを生成できる機能が追加
- カスタムスキル・プラグインをプロンプトで作成し、AIエージェントに活用させることが可能
- Notion・GitHub等の外部ツール連携でAIアシスタントの実用性が向上
Figmaはデザインツールから、デザインと開発をつなぐAIプラットフォームへと 進化を続けています。
デザイナー・エンジニア・PMすべてのロールにとって、 ワークフロー見直しのきっかけになるアップデートと言えるでしょう。
参考元: Figma adds code layers, support for animations, more AI features in new update
