開発モードの活用

開発モードとは

Figma開発モードとは、デザインの各要素をコードに変換し、開発者がそのコードを直接使用できる機能です。
具体的には、デザインプロパティ（色、フォント、間隔、サイズなど）をCSSやHTMLとしてエクスポートすることが可能です。

※Figma開発モードを使用される場合
無料の開発モードベータの提供は1月31日で終了し、使用には有料シートが必要となります。開発モードを使用されたい場合は、各自で有料シートへのアップグレードをお願いいたします。

Figma開発モードには多くの便利な機能があります。

Figmaのプロジェクトを開いたら、右上の「開発モード」ボタンをクリックします。
これにより、開発モードが有効になり、デザインの各要素をコードとして表示できるようになります。

インスペクションしたい要素をクリックして選択してください。
例えば、ボタンをクリックすると、そのボタンの色、フォント、間隔、サイズなどのCSSプロパティが右側のパネルに表示されます。

コードをエクスポートするには、対象の要素をクリックし、右側の「コード」タブを選択します。ここで、HTMLやCSSのコードを確認でき、必要に応じてコピーして利用することができます。

以上、「開発モードの活用」について説明でした。

また、「パーツのコーディング」のステップも全て完了となります。
引き続き、別のステップも進めていきましょう。