Figmaのプラグイン「コーディングパネル」は、デザイナーやコーダーの作業効率を高める便利なプラグインです。今回は、「コーディングパネル」の主な機能と活用方法について紹介します。
コーディングパネルとは？
「コーディングパネル」は、Figma上のデザイン情報を視覚的に整理・表示してくれるプラグインです。選択したレイヤーのテキスト情報やスタイル、エフェクトなどを確認しやすい形で一覧表示できるため、コーディング作業に役立ちます。
Figmaには「開発モード」という公式機能もありますが、これは有料プランでの提供です。そのため、「そこまで本格的な開発環境が必要なわけではない」「個人利用で課金まではしたくない」といった方には、このプラグインが手軽ですので、選択肢にいれてみるのも良いかと思います。
主な機能
【タイポグラフィ】
テキストレイヤーを選択すると、以下の情報を表示します。
- フォント名
- フォントの太さ
- 文字サイズ
- 行間
- 字間
- テキストの揃え（上下・左右）
- テキスト内容（文言）
【コンテンツ】
要素全体のスタイル情報を取得できます。
- 幅・高さ
- 不透明度
- ブレンドモード
- 塗り
- 線
【エフェクト】
シャドウなどのエフェクト情報を表示します。
- インナーシャドウとドロップシャドウは詳細情報を表示
- その他のエフェクトは、名称のみ表示されます
まとめ
「コーディングパネル」は、Figmaのレイヤー情報を素早く確認し、コーディングに活かすことができる便利なプラグインです。有料の開発モードを使うほどではないけれど、デザイン情報を効率よく確認したいという方にとっては、便利なプラグインだと思います。
デザインモードのまま手軽に使えるので、一度試してみてはいかがでしょうか。
