Figmaが2025年6月10日、ベータ版で提供中のWebサイト構築ツール「Figma Sites」に、コードレイヤー機能を追加したと発表した。この新機能により、デザイナーは従来のビジュアルデザインに加えて、カスタムHTML、CSS、JavaScriptコードを直接組み込むことが可能になった。これにより、複雑な機能やアニメーション、外部サービスとの連携を必要とするWebサイトの構築が大幅に容易になる。
コードレイヤー機能は、Figmaの直感的なデザインワークフローを保持しながら、開発者レベルのカスタマイゼーションを実現する画期的な機能だ。デザイナーはビジュアルエディタでレイアウトを作成した後、必要な部分にコードレイヤーを挿入し、JavaScript関数やCSS アニメーション、外部APIとの連携などを実装できる。これまでデザインツールとコード開発環境を行き来する必要があった作業が、単一のプラットフォーム内で完結することになる。
具体的な機能として、カスタムJavaScriptによるインタラクティブ要素の作成、外部サービスとのAPI連携、高度なCSSアニメーションの実装、フォーム処理やデータベース接続などが可能になった。また、コードレイヤーはFigma Sitesの既存機能と完全に統合されており、レスポンシブデザインの自動調整や、ライブプレビュー機能も引き続き利用できる。キャンバス上でHTMLのライブプレビューを確認しながら、そのままWebに公開することも可能だ。
Figmaはこれらの機能追加により、デザインツールの枠を超えて包括的なWeb開発プラットフォームへの進化を加速させている。従来のデザイン専用ツールから、デザイン、プロトタイピング、開発、公開までを一元化したエコシステムの構築を目指しており、Web開発ワークフローの根本的な変化を促す可能性がある。
