variable modeが導入されデザインワークフローが大幅に効率化されました！

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

Introducing variable modes

‍

バリアブルモードを使用すると、個々の変数に複数の値を定義し、サイト全体で簡単に切り替えて適用できる明確な値のセット（モード）を作成できます。

これにより、作成および管理する変数の数が少なくなり、デバイス間でのレスポンシブデザインの作成からサイト全体への異なるテーマの適用まで、デザインワークフローが大幅に効率化されます。

‍

ロックが解除されるバリアブルモード

‍

デバイスを問わず、レスポンシブなデザインを自動的に実現

タブレット、モバイルランドスケープ、モバイルポートレートのブレークポイントに、レスポンシブな変数値を自動的に設定できます。

これにより、スタイルをあれこれ探したり、ブレークポイントごとに面倒な手動調整を行ったりすることなく、デバイス間で一貫性のある洗練されたエクスペリエンスを実現できます。

変数を更新すると、そのブレークポイント固有の値もサイト全体でグローバルに更新されます。

‍

サイト全体のテーマ設定を合理化

‍バリアブルモードにより、サイトごとに異なるデザインテーマの作成と管理がこれまで以上に簡単になります。

例えば、「ブランド - プライマリ」テーマを作成し、標準的な色、タイポグラフィ、間隔でサイトのコアブランディングを反映できます。

また、「ウィンターホリデー」テーマの追加モードを導入し、より華やかな色彩で、特定のページ、セクション、または要素に適用することも可能です。

‍

変数管理を簡素化

‍デザインシステムが拡張したり複雑になったりすると、変数の管理が煩雑になることがあります。

変数とバリアブルモードを整理し、自分やチームメンバーが簡単にアクセスできるように、「カラーパレット」や「タイポグラフィ」などのカスタムコレクションに追加できるようになりました。

‍