Ep.1320 Figma、「Figma Motion」とコードレイヤーを発表──デザインキャンバスを開発環境へ統合する垂直統合戦略（2026年6月25日配信）

Failed to add items

Sorry, we are unable to add the item because your shopping cart is already at capacity.

Add to basket failed.

Please try again later

Add to wishlist failed.

Please try again later

Remove from wishlist failed.

Please try again later

Adding to library failed

Please try again

Follow podcast failed

Unfollow podcast failed

Ep.1320 Figma、「Figma Motion」とコードレイヤーを発表──デザインキャンバスを開発環境へ統合する垂直統合戦略（2026年6月25日配信）

Listen for free

View show details

タイトルFigma、「Figma Motion」とコードレイヤーを発表──デザインキャンバスを開発環境へ統合する垂直統合戦略このエピソードで登場するキーワードを説明します。Figma: ブラウザベースで協働できる世界的なデジタルデザインプラットフォーム。2025年7月に企業価値200億ドルで新規株式公開（IPO）を果たしている。Figma Motion: 年次カンファレンス「Config 2026」で発表された新機能。外部ツールを使わずに、デザインキャンバス上でタイムラインベースのアニメーションや画面遷移を直接制作・編集できる。コードレイヤー (Code Layers): GitHubのリポジトリをFigma上に直接クローンし、実行可能なコードとデザイン要素をシームレスに相互変換できる次世代のキャンバス機能。Yuhki Yamashita (山下優樹): Figmaの最高製品責任者（CPO）。マルチプレイヤーキャンバスを中心とした製品戦略と、デザイン・エンジニアリング間の分断を解消する開発を指揮する。それでは解説に入ります。デジタルプロダクトデザインのデファクトスタンダードであるFigmaが、デザインとエンジニアリングの境界線を完全に消失させる強力な垂直統合へ舵を切りました。同社は2026年6月24日、米国サンフランシスコで開催された年次カンファレンス「Config 2026」のオープニング基調講演において、ネイティブのモーション制作環境「Figma Motion」およびキャンバス上でコードを実行・編集できる「コードレイヤー」機能を一挙に発表しました。今回発表された「Figma Motion」は、これまでAfter EffectsやLottieといった外部ツールへの依存を余儀なくされていたアニメーションやトランジションの制作ワークフローを、Figmaの共有キャンバス内へ完全に内包するものです。Blenderなどの3Dソフトウェアに着想を得たタイムラインインターフェースを搭載し、テキストのモーフィング、カラーチェンジ、イージングといった複雑な動的エフェクトをチームで共同編集しながらリアルタイムにプレビューできます。さらに、WebGPUを活用したAIシェーダー機能により、プログラミングの専門知識がなくとも「すりガラス調」や「粒子パターン」といった高度な視覚効果をテキストプロンプトから生成し、タイムライン上で制御することが可能になりました。このモーション進化と一対をなす最重要アップデートが「コードレイヤー」です。開発者はGitHubのリポジトリをデザインキャンバスへ直接クローンし、Reactベースのコンポーネントをコードのまま配置できます。このコードレイヤーからは視覚的に編集可能なデザイン要素をドラッグアウトして調整でき、加えた変更は即座にコードへ逆変換されます。最高製品責任者のYuhki Yamashita氏は、プロダクトマネージャー、デザイナー、エンジニアがコードの品質に過度に縛られることなく、同一の空間でアイデアを高速に形にできる新しい協働のあり方を提示しています。この戦略の背景には、生成AIの急速な進化によるデザインツールの存在意義への挑戦があります。市場ではOpenAIのCodexやCursor、Replitといった「Vibe Coding（プロンプト主導の開発）」ツールが台頭しており、さらにAnthropicの「Claude Design」のようにテキストから直接動作するUIを出力するエフェクトが強化されています。こうした「デザインファイルを介さない開発」への対抗策として、Figmaは自らの強みである「すでに構築されたデザインシステムとトークン」が最初からロードされているキャンバス自体にコードとモーションを吸収させる道を選びました。Figmaの直近の業績は、第1四半期売上高が前年同期比46%増の3億3,300万ドル、ネットドルリテンション率が139%と極めて堅調です。しかし、外部のAIモデル利用に伴う推論コストの増加が利益率を圧迫しているという構造的課題も抱えており、ワークフローの効率化によるトークン消費の抑制は経営上の急務でもありました。今回の「Figma Motion」と「コードレイヤー」のリリースは、単なる機能拡充にとどまらず、プロダクト開発の始点から終点までをFigma上で完結させることで、競合AIベンダーによるバイパスを阻止し、プラットフォームとしての参入障壁をさらに強固にする極めて野心的...

No reviews yet