パーセンテージと数値の新たな変数タイプが保存できるようになりました！

包括的なデザイントークンのセットや、Webflowの変数は、大規模なデザインを行うための鍵となります。

変数を定義して共有することで、チーム全体が一貫したタイポグラフィ、寸法、効果、その他の詳細をデザインして構築できるようになります。

Webflowのアップデートによりデザインシステムの範囲を広げるために、変数に単位のない数値とパーセンテージを保存できるようになりました。

‍

‍

‍

‍

‍

‍

‍

‍

数値変数でタイポグラフィの詳細

新しいNumber型を使用すると、サイト上または共有ライブラリ内の変数に単位のない数値を保存できます。

これらは、特にタイポグラフィの値に便利です。

たとえば、サイトの本文を常に次のように構成する必要があるとします。

• フォントの太さ: 400
• フォントサイズ: 1rem
• 行の高さ: 1.4
• フォントファミリー: Inter

フォントの太さと単位のない行の高さを数値変数として保存できるようになりました。

フォントサイズにはSize変数タイプを使用し、フォントファミリー名にはFontタイプを使用します。

次のいずれかを実行できます。

• 変数パネルから数値変数を作成し、スタイルパネルのスタイルプロパティにリンクします。
• サポートされているスタイルプロパティに単位のない数値を入力し、プロパティから直接新しい変数を作成します。

数値変数を使用する場所

新しい Number変数タイプは、次のいずれかのスタイルにリンクできます。

• Flexの子プロパティ - 拡大と縮小
• 位置 - z-index。このスタイル プロパティは整数値のみを受け入れます。
• タイポグラフィ - フォントの太さ、行の高さ、バリエーション (可変フォントの場合)。フォントの太さは 1 ～ 1000 の整数値のみを取ります。可変フォントを使用していない限り、これは通常400や600などの100の倍数になります。
• 効果 - 不透明度

新しいパーセンテージ変数によるより柔軟なデザインシステム

新しいパーセンテージ変数タイプは、スタイルパネルがパーセンテージを単位として受け入れるあらゆる場所で使用できます。

これには、次のようなプロパティが含まれます。

• レイアウト - ギャップサイズ
• Flex子プロパティ — 基礎
• 間隔 - マージンとパディング: 上、下、左、右
• サイズ - 高さと幅の寸法（最小値と最大値を含む）
• 位置 — 上、下、左、右
• タイポグラフィ — フォントサイズ、行の高さ、テキストのインデント、列間隔
• 境界線 — 境界線の半径
• 効果 - 不透明度、さまざまなフィルター、背景フィルター: ぼかし、明るさ、コントラスト、彩度、グレースケール、反転、セピア、変換

特に優れたアプリケーションとしては、幅や高さなどの寸法、効果、境界線の半径などがあります。

新しい数値タイプと同様に、パーセンテージ変数は、変数パネルから、またはパーセンテージ値を入力した場所であればどこでも、スタイル パネルで直接作成できます。

新しいタイプを試してみる

今すぐ変数パネルにアクセスして、新しい数値とパーセンテージのタイプを試してみてください。

変数の使用について詳しくは、ヘルプセンターをご覧ください。

これらの新しい変数タイプが、Webflowのデザインシステムの効率、一貫性、ガバナンスの向上に役立つことを願っています。

‍