FigmaのDev Modeを使ってみる

FigmaのDev Modeを使って、どういったことができるのかを確認してみます。

使い方

使用前の注意点として、Dev Modeは有料プランでDevシートまたはフルシートの場合に利用できる機能になります。
詳しくは公式サイトのプランをご確認ください。

Dev Modeへの切り替えですが、下部のアイコンをクリックするか、ショートカットの場合はShift + Dで切り替えることができます。

下部のアイコンがDev Modeに切り替わりました。

また、右側のサイドメニューもDev Modeの内容に切り替わります。

デザイン上のレイヤーを選択した状態にすると、その要素に関する情報が表示されます。

コンポーネント情報では、そのコンポーネントの確認を行うことができます。
コンポーネントの動作を参照をクリックします。

ポップアップでコンポーネントのプレイグラウンドが表示されました。
右側ではデザインで用意しているそのコンポーネントのバリエーションを選択でき、左側にプレビューが表示されます。

例として、Stateの値をDefaultからHoverに変更してみます。

左側のプレビューがHoverのバリエーションに切り替わりました。
このように、コンポーネントのプレイグラウンドではコンポーネントのバリエーションを確認することができます。

レイヤープロパティでは、そのレイヤーの詳細情報を確認できます。

レイアウトのコードは以下の通りです。

display: flex;
min-width: 136px;
min-height: 56px;
padding: 16px;
justify-content: center;
align-items: center;
gap: 4px;

スタイルおよび色のコードは以下の通りです。

border-radius: var(--border-radius-8);
background: var(--color-primitive-blue-900);

var(--color-primitive-blue-900)
var(--color-neutral-white)

コード内で使用されている変数については、クリックで詳細を確認することができます。

変数の一覧を確認したい場合は、レイヤーを未選択の状態にして、右サイドメニュー内のバリアブルテーブルを開くを選択します。

データ内で使用されている変数の一覧を確認することができます。

レイヤープロパティで使用されているサイズの単位が現状はpxですが、別の単位に変更することも可能です。
レイアウトの右上にあるプルダウンを選択します。

プルダウンの中にCSS向けの設定があるので、ここで単位をremに変更できます。

これで単位をremに変更できました。

先ほどのプルダウン内で「単位を設定…」を選択すると、rem変換時のルート要素のフォントサイズをいくつにするかと、remをテキストのみに適用するかの選択ができます。

選択しているレイヤー内にアセットが含まれる場合、レイヤープロパティの下にアセットの一覧が表示されます。
ここから直接エクスポートすることも可能です。