Component Canvasが利用可能になりました！

※この記事は2026年03月02日にWebflowが公開した下記アップデート情報・ニュースを日本語訳したものです（一部加筆・修正あり）

Component Canvas is now available

‍

コンポーネントはス拡張性があるデザインシステムの基盤ですが、複数のコンテキストにまたがるデザイン整合性の維持は、手間がかかり、規模が大きくなるほど管理も難しくなります。

例えば、ボタンのフォントサイズのような小さな変更でも、バリアントやブレークポイント、ステートごとに手動確認が必要になることがあります。

そこで Webflowは、新しいコンポーネント編集「Component Canvas」を開発しました。
デザインシステムの一貫性を保ちながら、よりスピーディーな制作を可能にします。

Component Canvasは、すべてのWorkspaceで利用可能になりました。

主な機能

コンポーネント専用のキャンバス

各コンポーネントをページ外の専用のキャンバスで設計・管理可能になり、全てのバリアントをまとめて確認ができます。

複数バリアントを並べて編集

複数のバリアントを横並びで編集しながら、変更の影響をリアルタイムで確認可能になりました。
これによりンテキスト切り替えを減らし、効率を向上します。

自動整理されたフレーム

フレームが自動で整理されるため、必要なコンポーネントをすぐに見つける事ができ、チームでの共同作業にも役立ちます。

直感的なキャンバス操作

スクロール、パン、ズームなどの操作に対応し、快適にナビゲーションできます。
これらにより、コンポーネントをスピーディーかつ安心して管理できる、専用の制作空間が実現します。

「Component Canvas によって、複数のバリアント管理が格段にしやすくなり、変更が各バリアントにどのような影響を与えるかも一目で確認できます。複雑なコンポーネントベースの制作において、非常に価値のある機能です。」
‍
— Joshua Fry, FryUX

今後はさらに、ブレークポイントやページ単位など、より多くのコンテキストへの対応も予定されています。

利用を開始するには、コンポーネント編集中に「Open component」をクリックするか、Componentsパネルから直接アクセスしてください。

詳細はヘルプセンターをご確認ください。

‍