本記事は Webデザイン事業部ウィーク 2024 4日目の記事です。
🌈 3日目 ▶▶ 本記事 ▶▶ 5日目 💐

Figma開発モードにお金を払う価値はあるのか

Figmaの「開発モード（Dev Mode）」はベータ版が終了し、有料となりました。
~~正直まだまだ無料ベータ期間が良かったなぁ…~~
料金プランが変わったということは、チームのアカウントの見直しが必要になります…！

これまで無料のベータ版の期間が長かったこともあって正直抵抗があるチームも結構多いのでは…と思います。

エンジニアを抱える開発リーダーの方や、管理者の方は「本当にお金を払う価値があるの？」「閲覧者権限じゃ作業はできないの？」という疑問が生まれているハズ…
上長を説得しないといけない立場の人もいるのではないでしょうか？

私はデザイナーで開発者ではないのですが、HTMLマークアップやCSSの知識にはそれなりに自信があります。社内でHTMLの研修講師をしたり、普段の業務でもソースレビューを行ったりと、開発者寄りのデザイナーだと自負しています。
そんな私が実際に開発モードを触った所感と、社内のエンジニアのメンバーの話も聞きつつ、Figmaの開発モードについて整理してみました！

今回はあまり開発モードの深い機能には触れず、簡単な機能に絞って、「閲覧者権限との作業スピードの比較」に重点を置いてみました。参考になるかわかりませんが、この記事が同じような悩みを抱えている方の一助となれば幸いです。

結論：「閲覧者」権限でも作業は全然できるが「開発モード」のほうが作業は早い

早速結論となりますが、「開発モード」のほうが開発者の作業は確実に早くなります。

そりゃあそうです、Figmaが有料で売ってる機能です。便利に決まってます！
気になるのはやはり、「どのくらい早くなるのか」ですよね。

「閲覧者」権限でも、開発時に必要な「サイズや色の値の取得」は問題なくできます。

ただ、「開発モード」に比べると時間が多くかかりますし、なにより、「自分で考えて記述する時間」が増えてしまう…と感じました。
ではここから、「開発モード」だとどのくらい早くなるのか比較しながら見ていきたいと思います！

【比較】余白や幅の値を取得するとき

比較しやすいように、左右で作業を並べてみました！

開発モードにすると、クリックの回数、キーボードの操作回数が大幅に減ります！
クリックでオブジェクトを選ぶ操作って実は結構な時間を使います。小さな作業ですが、かなり値取得時のストレスが軽減されるポイントかと思います！

【比較】テキスト、行間の情報を取得するとき

フォントサイズの取得は「閲覧者権限」でも比較的簡単ですが、実際にCSSに書くときは「単位：rem」で指定することも多いのではないでしょうか。
開発モードは単位の変換をしてくれるので、計算の手間が省けます。

続いて「line-height」です。デザイナーは行間の指定を固定値で入力していることも多いのですが、実際マークアップエンジニアがCSSを書くときは「1.5」などの倍率で入力することが多いです。
（世のデザイナーさん、Figmaには「150%」とかで書いてあげてください、きっと喜ばれると思います…）
そんなことせずとも、開発モードは固定値で入力されているデザインも、％表記を横に並べて書いてくれています。ここでも計算の手間が省けます！

【比較】色、グラデーションの情報を取得するとき

色の取得は「閲覧者」でもあまり変わりません。

グラデーションも「閲覧者」でCSSの値を取得可能です。開発者モードだとあらかじめソースを見ることができます。

【比較】画像の情報を取得するとき

画像はどちらの権限でもエクスポートは可能です。
PNG形式などの画像はそれほど使い勝手は変わりません。

SVG画像の場合は、開発モードではSVGのソースコードを表示してくれます。
閲覧者権限でも右クリックから取得は可能ですが、貼り付けるまでコードの中身が分からないため、ちょっと使い勝手が悪いです。
SVGは「インラインSVG」での配置は最も一般的ですし、ソースコードが簡単に取得できるのはありがたいですね。

【比較】使える言語の種類

さきほど紹介したグラデーションのように、「閲覧者」権限でも一部CSSの値を取得できます。これはとても便利ではあるのですが、「閲覧者」権限は基本的に「CSS」言語の記述をベースにしています。
一方で、開発モードは開発言語ごとに取得できるソースコードを切り替えることができます。例えばReactであればJSXの形で出力できます！
開発言語がCSS以外の場合は開発モードに圧倒的に軍配が上がります。

【機能紹介】開発準備完了状態

ここからは比較ではないのですが、開発モードですぐに使える機能を少し紹介します。

Figma上には検討途中のデータや、ボツになったデザインが並びます。そういったフレームは開発者にとってはノイズでしかありません。
「開発準備完了」マークをつけることで、開発者は最終デザインをすぐ判断することができます！
「最新どれですか？」ってやり取り、本当に多いと思うので、結構効果が実感できる機能ではないでしょうか。

【機能紹介】測定ツールとアノテーションツール

「測定ツール」と「アノテーションツール」は開発モードのときだけ使えるツールです。

「アノテーション」はデザイナーから開発者へ向けてのメモとして活用できます！
Figmaにはコメント機能がありますが、コメント機能はデザインや仕様検討のフェーズでのやり取りに使われることが多く、検討段階のやり取りが多いため、開発者にとってはノイズとなります。
開発者への指示にはアノテーションを活用するほうが良さそうです。

「測定」は値を記述することができる機能です。
正直、開発モードを使いこなせるとあまり出番はない機能なのかな？という印象を持っています。Figmaの扱いに慣れていない人に向けての指示書としては使えるかも…？（もし有用な使い方を知っている方がいたら教えて下さい！）

「開発モード」は細かい作業をラクにできる！

……作業の比較は以上です。いかがでしたでしょうか？
こうして見ると、閲覧者権限でも十分なものもありますが、結構細かい作業の積み重ねで、大きな時間短縮になりそうな気がしてきますね。
特にReactなど、CSS以外の開発言語の場合はありがたみが大きいように思いました。

値段相応？

開発モード利用のみの値段は
ビジネスプランの場合は、1シート当たり月額$25
エンタープライズプランの場合は、月額$35
です。
※2024年4月時点

どこまで有用に感じるかは導入チームやプロジェクト次第かなと思いますが、個人的には作業の効率化ができて、十分元が取れそうだなーと思いました。

この記事で記載した内容は開発モードの一部ですが、なんとなくこの記事で各作業がどのくらいスピードアップするのかの判断材料になれば幸いです。
お財布の相談にも本記事をぜひ使ってください。

私の著書『UIデザインのアイデア帳アプリ・Web制作の現場で使える基本＋実践ノウハウ83』が、Amazonなど各書店で好評発売中です。
アプリやWeb制作に使えるTIPSを沢山詰め込んだ一冊となっていますので、UI/UXのヒントを知りたい方はぜひお手にとってみてください！
FigmaのTIPSもコラムで紹介しています！