【Figma】開発モードを使わずにコーディングする方法

開発者向けの「開発モード」は有料プラン限定のため、無料プランでは詳細なコードの取得やエクスポートが難しくなります。

そこで本記事では、Figmaの開発モードを使わずにデザインをコーディングする方法について解説します。開発モードなしでも適切なツールや手法を駆使すればスムーズにコーディングできます。

本記事の対象者

1. Figmaの無料プランを使用しているフロントエンドエンジニア
2. 開発モードなしでデザインデータを読み取る方法を知りたい人
3. デザイナーとの協業を円滑に進めたい人

Figmaの基本的な情報を取得する

Figmaではデザイン要素の詳細を開発モードなしでも確認することが可能です。以下の方法を活用しましょう。

インスペクターパネルを活用する

Figmaの右側にあるインスペクターパネルでは選択した要素のサイズ、間隔、色、フォント情報を確認できます。

確認できる情報

• サイズ（width / height）
• 座標位置（X / Y）
• フォント情報（フォントファミリー、サイズ、ウェイト、行間）
• 色（HEX / RGB / HSL）
• ボーダー・シャドウなどのスタイル

開発モードがなくてもこのパネルを活用すれば基本的なスタイル情報は取得可能です。

グリッドとレイアウトを表示する

デザインの整列や間隔を確認するために「レイアウトグリッド」機能を使うのも有効です。

1. 要素を選択
2. インスペクターパネルから「レイアウトグリッド」を有効化
3. 余白や間隔をチェック

これによりマージンやパディングの適切な設定が可能になります。

CSSスタイルを手動で取得する方法

Figmaの開発モードではCSSコードが自動生成されますが、無料プランでは手動で取得する必要があります。

カラーコードを取得する

要素を選択
インスペクターパネルの「塗りつぶし」セクションを確認
カラーコードをコピーし、CSSに適用
例:

.button {
  background-color: #FF5733;
}

フォント情報を取得する

テキスト要素を選択
フォントの種類・サイズ・行間を確認
CSSに適用
例:

h1 {
  font-family: 'Roboto', sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.5;
}

ボーダーとシャドウを取得する

ボーダーやシャドウの情報もインスペクターパネルで確認できます。
例:

.card {
  border: 1px solid #ddd;
  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.1);
}

スペーシングとレイアウトを再現する

マージンとパディングを計算する

デザイン内の余白（paddingやmargin）は要素間の距離を測ることで設定できます。
option（alt）キーを押しながら要素を選択すると他の要素との距離が表示されます。

例:

.container {
  padding: 20px;
  margin-bottom: 16px;
}

FlexboxやGridを活用する

レスポンシブなデザインを再現するためにFlexboxやCSS Gridを活用しましょう。
例:

.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

画像・アイコンをエクスポートする

開発モードを使わずに画像やアイコンを取得する方法もあります。

画像をエクスポート

1. 対象の画像を選択
2. インスペクターパネルの「エクスポート」セクションを開く
3. PNG / JPG / SVG 形式でダウンロード

SVGコードを直接取得

アイコンなどのベクター画像は、SVGコードを直接コピーして使用することも可能です。

• アイコンを選択
• 右クリック →「コピー」→「SVGとしてコピー」
• HTMLに貼り付ける

例:

<svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red"/>
</svg>

プラグインを活用して効率化する

Measure Plugin

要素の寸法や間隔を素早く測定できるプラグイン。

インストールはこちらから→

Figma to HTML and CSS

選択した要素のCSSコードを自動生成するプラグイン。

インストールはこちらから→

Iconify

無料でアイコンを取得できるプラグイン。

インストールはこちらから→

デザイナーとの円滑な連携方法

開発モードなしでもデザイナーとスムーズにやり取りすることが重要です。

コメント機能を活用する

デザインに関する質問がある場合Figmaのコメント機能を使ってデザイナーに質問できます。

スタイルガイドを共有してもらう

デザイナーにフォント・色・間隔などのスタイルガイドを作成してもらうとより正確にコーディングできます。

まとめ

開発モードがなくてもFigmaのインスペクターパネルや各種ツールを駆使すれば、コーディング作業は十分可能です。

1. 要素のサイズ・カラー・フォント情報を手動で取得
2. スペーシングやレイアウトを確認して適切にCSSを適用
3. プラグインを活用して作業を効率化
4. デザイナーと連携しコメントやスタイルガイドを活用

これらの方法を活用しFigmaの無料プランでも効率的にコーディングを進めていきましょう！