Figma Config 2026——MotionとCode Layersが変えるデザインワークフローの未来

※ 本記事は2026年6月時点の公開情報に基づきます。機能の提供状況やスケジュールは変化するため、最新情報は各社公式発表等をご参照ください。

デザインツールの世界で、大きな節目となる発表がありました。Figmaは2026年6月24日、年次カンファレンス「Config 2026」の基調講演で、アニメーション制作機能「Figma Motion」、デザインレイヤーを動くコードに変換する「Code Layers」、自然言語からシェーダー（質感や光の表現）を生成するAI機能などの大型アップデートを発表しました（出典: Figma公式ブログ）。

Figma Motionはタイムライン・キーフレーム・ばねの動きを再現するスプリング物理に対応し、MP4・GIF・WEBM・Animated SVGなどの形式やコードで書き出せます。全プランのFullシート向けにオープンベータとして提供が始まりました（出典: Figma Learn）。Code Layersはレイヤーをワンクリックでインタラクティブなコードに変換する機能で、2026年7月から順次展開されると案内されています。

さらに、欲しい表現を言葉で記述するとエージェントがシェーダーを構築する「AIシェーダー」や「Generative Plugins」、Notion・Slack・GitHubなどへの外部コネクタとスキル機能を備えたFigma Agentの強化も発表されています。クリエイティブを預かる立場から、この発表の意味を考えます。

「動き」がデザインツールの中で完結する

これまでUIアニメーションや短い動画は、Figmaで静止画を作り、動きは別の専門ツールで仕上げるのが一般的でした。ツールをまたぐたびに受け渡しと修正の往復が生じ、そこが外注コストと時間の温床でした。

Figma Motionはこの「動きの工程」をデザインと同じ場所に取り込みます。SNS用の短いアニメーションやサイトの演出を、専門ツールの習得や外注なしに内製できる可能性が広がったということです。全プランでのオープンベータという提供の仕方にも、裾野に届けようという姿勢がうかがえます。

デザインとコードの境界が薄くなる

Code Layersはもうひとつの統合です。デザイン画面をワンクリックで動くコードに変えられれば、試作品を「見せかけの動き」ではなく実際に触れる形で確認でき、エンジニアへの引き渡しの往復が減ります。

AIシェーダーやGenerative Pluginsも同じ方向で、開発知識が必要だった表現やツール作りが言葉で手に入ります。さらにFigma AgentがNotionやGitHubの情報を参照しながら動けば、デザインは業務フローの孤島ではなくなります。今回の本質は個々の新機能より、デザイン・動き・コードがひとつの場所に集まる制作フローの再編にあると私たちは見ています。

中小企業経営者への示唆

1. 外注していた「ちょっとした動き」に内製の余地 バナーのアニメーションなど少額でも積み重なる外注費は、まずオープンベータで試し、どこまで自社でまかなえるか見極める価値があります。

2. ツールは「数」ではなく「往復回数」で考える 制作の遅さの原因は、ツールの性能よりツール間の受け渡しにあることが多いものです。自社の制作フローで「ファイルが行き来している場所」を一度数えてみてください。

3. ベータ機能は小さく試して線を引く オープンベータは仕様変更があり得ます。本番フローに一気に組み込まず小さな案件で試し、任せる範囲と人が仕上げる範囲の線引きを自社なりに決めることが品質を守ります。

まとめ

• FigmaがConfig 2026基調講演でFigma Motion・Code Layers・AIシェーダー等の大型アップデートを発表（2026年6月24日）
• Figma Motionはタイムライン・キーフレーム・スプリング物理対応。MP4/GIF/WEBM/Animated SVG等に書き出せ、全プランでオープンベータ
• Code Layersはレイヤーをワンクリックでインタラクティブなコードに変換。2026年7月から順次展開
• 本質は個々の機能ではなく、デザイン・動き・コードが1か所に集まる制作フローの再編

道具が増えることと、作る流れが変わることは別物です。新機能を追いかける前に、自社のクリエイティブがどこで往復し、どこで止まっているか。その流れを見直すきっかけとして、この節目を活かしていただければと思います。