Figma：Dev Mod（開発モード）ってなに？
| 所要時間 5分 | 難易度 ★☆☆☆☆ | 製作者 すん |
Dev Mod（開発モード）とは
デザインファイルを動かさず、vscodeでコーディングする際の、サポートをしてくれるシートです。
機能一覧
- コード生成言語
- 使用しているカラー一覧
- アセット・イメージ・エクスポート
- レイアウト（幅・高さ）の確認
- タイポグラフィー（使用したフォント・フォントサイズ・太さなど）
- テキスト情報
- 測定
他に、私はこの機能便利でよく使っています！という機能があればコメントから、教えてくれると嬉しいです。
目次
制作
1_ Dev Mod（開発モード）に変更
＜説明＞
“<\>”を押すかショートカットでDev Modに変更できます。
＜ショートカット＞
Mac: shift+D
2_コード生成言語
＜説明＞
ここでは、フィグマが考えた、マージンやパディングをこう作ったらいいのでは？という提案を見れます。
リストで、選択した写真オブジェクトの幅・高さをチェックできます。
レイアウトで、フィグマが考えたCSSが表示されます。
フィグマのコードをコピペして使用すると、レスポンスに対応していないデザインのコードだったりするので、参考程度にみよう！
3_ 使用しているカラー一覧
＜説明＞
赤枠で、デザインで使用したカラーを確認できます。
一つ一つのアイテムのカラーを見たり、フレームを選択するとフレーム内で使用したカラーを一眼で確認できます！
コピーしたいカラーコードをクリックするだけで自動でカラーコードがコピーされるので、CSSを書いている時に便利です。Hex以外のカラーでも確認できるので、便利ですね！！
4_ タイポグラフィー・テキスト情報
＜タイポグラフィー＞
＜説明＞
使用したフォント、フォントウェイト、スタイル、サイズなどCSSで設定する際に、必要な情報がまとめられているのでわかりやすいです！
行間、文字間隔など細かい設定もチェックできます。
＜テキスト情報＞
＜説明＞
自分が打った文字情報もここから、コピーできるので今までメモやテキストエディットをいちいち開いてコピーする手間が省けますね！
5_ 測定
＜説明＞
左の画像で赤枠で囲んでいる定規マークを選択します。
こっからここまでの距離が知りたいと、線を引くと右の画像のように矢印と数値が出てきます。今まで右の写真に載っているようにグレーの図形を出して測っていましたが、いらなくなりましたねww
わかりやすくてオススメです！
