AIニュース最前線
最新ニュースAI日報Hacker日報週報動画AIツールトレンド企業

AIニュース最前線

世界中のAI最新情報を日本語で毎時更新

最新ニュース日報トレンド企業このサイトについてRSS
© 2026 ainew.jp
お問い合わせ特定商取引法に基づく表記
ニュース一覧元記事を開く
TechCrunch AI·2026年6月25日 01:15·約4分で読める

Figma が新アップデートでコードレイヤーやアニメーションサポート、さらに AI 機能を追加

#生成 AI#プロダクト開発#Figma#コード生成#デザインシステム
TL;DR

デザインツール「Figma」が新アップデートでコードレイヤーの直接編集、アニメーション機能強化、および新たな AI 機能を導入し、デザイナーと開発者の連携をさらに深化させた。

AI深層分析2026年6月24日 17:03
4
重要/ 5段階
深度40%
4
関連度30%
5
実用性20%
5
革新性10%
3

キーポイント

1

コードレイヤーの導入

開発者がデザインファイル内で直接編集可能なコードレイヤーが追加され、デザインから実装への移行プロセスが簡素化された。

2

アニメーション機能の強化

複雑なインタラクションやアニメーションをより直感的に作成・管理できる機能がサポート強化され、プロトタイピングの質が向上した。

3

AI 機能の実装

生成 AI を活用したデザイン支援やコード変換などの新機能が追加され、作業効率の大幅な改善が期待される。

影響分析・編集コメントを表示

影響分析

今回のアップデートは、UI/UX デザインとフロントエンド開発の境界を曖昧にし、プロダクト開発サイクル全体を加速させる重要な転換点となります。特に「デザインからコードへ」の変換プロセスにおける摩擦が大幅に減少することで、スタートアップや大企業問わず開発スピードの向上に寄与すると考えられます。

編集コメント

Figma の進化は、AI が単なる補助ツールを超え、開発プロセスそのものを再定義する段階に入ったことを示唆しています。今後はコードの品質保証やセキュリティ面での AI 連携が次の注目点となるでしょう。

Figma は水曜日、新しいコードレイヤーの追加、モーションやシェーダーへの対応、AI を活用してさまざまなタスク用のカスタムプラグインを作成できる機能を含むアップデートを発表しました。

このデザインプラットフォームは、ツールにコード統合をもたらす取り組みを長年行ってきました。昨年には AI プロンプトベースのプロトタイピングツール「Figma Make」を発表し、以来、コーディングとデザインの引き継ぎを改善するために Claude Code や Codex との統合を開始しました。

同社は現在、共同作業キャンバスに直接コードレイヤーを追加し、チームがリポジトリをクローンしたり、コードからフローを抽出してテスト用のデザインレイヤーに変換したりできるようにしています。

imageimage画像クレジット: Figma

Figma の最高製品責任者である Yuhki Yamashita 氏は、コードレイヤーにより、デザイナー、プロダクトマネージャー、プログラマーが本番環境に投入するための完璧なコード作成に集中するのではなく、アイデアの反復を容易に行えるようになると述べています。

「私たちはマルチプレイヤーキャンバスが非常に強力だと考えています。なぜなら、これはコードの品質についてあまり気にする必要がない環境だからです。急速に探索したり、多くの新しい方向性を試したい場合でも、この空間的な方法で実現できます。この機能は、デザイナーだけでなくエンジニアや PM とも異なる振る舞いを生み出すことを願っています」と、彼は電話会議の中で語りました。

Figma は now、アニメーション、トランジション、3D トランスフォームのサポートも追加されました。以前は、デザイナーが他のソフトウェアでアニメーションを作成し、アプリが理解できるコードに変換する必要がありました。しかし今では、デザイナーはアニメーションとトランジションを Figma に直接統合できるようになりました。

imageimage画像クレジット:Figma

AI を使用してこれらのアセットの一部を作成することも可能になり、今回のアップデートでは AI を用いたシェーダー効果や塗りつぶしの追加サポートも追加されました。

昨年、Figma は ノードベースのツール Weavy を買収しました。これはデザイナーが異なるモデルを通じてワークフローを実行し、出力を比較できるようにするものでした。現在は、両アプリのより良い統合に取り組んでいます。年内に展開されるアップデートでは、ユーザーは Figma 内で直接 Weawy のワークフローを生成できるようになります。

同社はまた、AI アシスタント を共同作業キャンバス上でより有用にするための新しいスキルを追加しています。ユーザーはテキストプロンプトを使用して、AI エージェントが再利用可能なスキルを作成できるようになりました。また、Notion、Granola、Excel、GitHub などのツールを接続したり、ファイルを添付して AI ボットに実行したい内容の文脈を提供することも可能です。

同社はさらに、レイアウトジェネレーターやベクトルパストレーサーなど、プロンプトを使用してカスタムプラグインを作成するための機能も追加しています。

当記事内のリンクを通じてご購入いただいた場合、私たちは少額のコミッションを獲得する可能性があります。これは私たちの編集の独立性には影響しません。

Ivan は TechCrunch で世界の消費者技術動向をカバーしています。彼はインドに拠点を置き、以前は Huffington Post や The Next Web などの出版物で働いていました。

Ivan に連絡したり、 outreach の真偽を確認するには、im@ivanmehta.com へメールを送るか、Signal で ivan.42 経由の暗号化メッセージをご利用ください。

プロフィールを見る

原文を表示

Figma on Wednesday showed off an update that adds a new code layer, support for motion and shaders, and the ability to create custom plug-ins for various tasks using AI.

The design platform has been working on bringing code integration into its tool for a while. Last year, it unveiled an AI prompt-based prototyping tool, Figma Make, and has since launched integrations with Claude Code and Codex to improve the hand-off between coding and design.

The company is now adding code layers directly to the collaborative canvas, helping teams clone repositories and extract flows from code to design layers for testing.

Image Credits:Figma
Image Credits:Figma

Figma’s chief product officer, Yuhki Yamashita, said code layers make it easier for designers, product managers, and programmers to iterate on ideas rather than focus on creating pristine code that goes into production.

“We think the multiplayer canvas is really powerful because this is an environment where you don’t really care about the quality of the code. If you’re rapidly exploring or need to kind of explore a bunch of new directions, you can do that in this spatial way. We hope that this feature produces different behavior not just with designers, but also with engineers and PMs,” he said over a call.

Figma now also supports animations, transitions, and 3D transforms. Previously, designers had to create animations in other software and convert it to code that the app could understand. Now designers can integrate animations and transitions directly into Figma.

Image Credits:Figma
Image Credits:Figma

You can now use AI to create some of these assets, and the update is adding support for adding shader effects and fills using AI, too.

Last year, Figma acquired node-based tool Weavy, which helped designers run workflows through different models to compare outputs, and is now working to integrate the two apps better. In an update rolling out later in the year, users will be able to generate Weavy workflows directly within Figma.

The company’s also adding new skills to make its AI assistant more useful with its collaborative canvas. Users can now write text prompts to create repeatable skills that AI agents can use. You can also connect tools like Notion, Granola, Excel, and GitHub, or attach files to give the AI bot more context about what you want it to do.

The company is also adding a feature to help users create custom plug-ins, like layout generators or vector path tracers, with prompts.

*When you purchase through links in our articles, we may earn a small commission. This doesn’t affect our editorial independence.*

Ivan covers global consumer tech developments at TechCrunch. He is based out of India and has previously worked at publications including Huffington Post and The Next Web.

You can contact or verify outreach from Ivan by emailing im@ivanmehta.com or via encrypted message at ivan.42 on Signal.

View Bio

この記事をシェア

関連記事

The Verge AI★42026年6月25日 18:06

Facebook のクリエイタースタジオが AI コンパニオンアプリとして復活

Meta は、Facebook クリエイターページマネージャーを「再設計」したスタンドアロンの AI コンパニオンアプリとして復活させ、クリエイターが視聴者とつながりやすくし、Facebook での成長方法を具体的に示すことを目指している。

The Verge AI★42026年6月25日 04:36

議員がスタッフによる AI 使用を否定、法案作成には使っていないと主張

アメリカのアンナ・パウリーナ・ルナ下院議員は、スタッフが大規模防衛法案の修正案要約でスペルチェックに AI を利用したことを認めつつも、法案本文の作成には AI を使用していないと否定し、「立法は決して AI で起草されない」と強調しました。

TechCrunch AI★32026年6月25日 02:16

Facebook がクリエイター向け AI コンパニオンアプリをリリース

Facebook(メタ)が、クリエイターの支援を目的とした新しい AI コンパニオンアプリの提供を開始した。

今日のまとめ

AI日報で今日の重要ニュースをまとめ読み

ニュース一覧に戻る元記事を読む