デザイン→実装の作業がラクになるFigmaの活用法。エンジニアとデザイナーの垣根をなくす方法とは？

Figmaとノーコードツールは役割が異なるため、直接的な比較は難しいですね。ノーコードツールは、視覚的にデザインしたものをコードを書かずに機能するものをつくる目的なので、実装コストの削減や、リソース不足の解消、短期的なページ作成などに使われることが多いです。

一方で、Figmaはプロダクト全体の設計、例えばアイデア出しやワイヤーフレームの作成から、具体的なUIデザインやプロトタイプの作成、そしてそのデザインを元にしたコード生成まで、より多様な用途に対応できます。そのため、中長期的に運用・拡大していくサービスやアプリ、複数の関係者が関わるプロジェクトでもスムーズに連携して進められるのが特徴です。またFigmaは様々なツールとの連携もあり、ノーコードツールと連携させることで、Figmaで作ったデザインを元にノーコードツールを介して公開するところまで進めることもできます。

最新のデザイン仕様をFigmaに集約できるので、もしユーザーのフィードバックから改善すべきポイントを指示するにしても、わざわざドキュメントツールに画像のキャプチャを貼り付けて修正指示を書いて...などをしなくても、直接Figma上にコメント機能でコメントを書いたり、あるいは編集権限があれば簡単な文言修正ならばデザイナーでなくても対応することができます。そうしたデザインへのアクセスのしやすさが大きな強みといえます。

先ほどのノーコードツールとの連携でいうと、例えば、「Studio」というノーコード・ローコード系のツールがありますが、FigmaのデザインをStudioにエクスポートできるプラグインもあります。これにより、FigmaでデザインしたものをStudioに反映させて、簡単に実装を進められます。

ブラウザ上でもスムーズに動作し、macOSなどのネイティブアプリと同等のパフォーマンスでコラボレーションできる点です。この共同編集のしやすさがFigmaの核となる体験の一つです。当初はデザイナー向けツールとしてスタートしましたが、先ほども触れた通り現在ではプロダクト開発全体をサポートする機能も充実しています。

例えば「FigJam」というホワイトボードツールは、プランナーやプロダクトマネージャー、リサーチャーなど、多様な職種の人々がアイディアを出し合う場として機能します。

また、2023年には「開発モード（以下、Dev Mode）」を追加し、デザインからコードへの引き継ぎ（デザインハンドオフ）を円滑にする機能も提供。Figmaは、単なるUIデザインツールにとどまらず、プロダクトの構想段階からコード化までを一貫して支援しているのが特徴です。

特にエンジニアの方々に多く利用されています。デザインデータを参考にしながらコードを書くプロセスは、昔からPhotoshopなどでも行われていましたが、Figmaでも同様の流れが一般的です。実際、Figma全体のユーザーのうち、約3分の2はデザイナー以外の方が占めており、エンジニアを含む幅広い職種に利用されていることがわかります。

エンジニアからよく聞くのは、デザイナーが作成したデザインデータに触れることへの恐怖心です。「データを壊してしまいそう」といった不安を抱えている人が多いですね。「閲覧権限」や「Dev Mode」で見ているだけなら、触ってもデザインを壊す心配がないのでこの点をまず理解することが大切です。

従来のプロセスでは、デザイナーが作業完了するまでエンジニアはその内容を把握できないことが多いです。例えば、上流工程で仕様が決まってデザインが完成。その段階でエンジニアが実装の依頼を受けたとしても、「このデザインでは実装が難しい」と手戻りにつながるケースも。もしくは、実現がかなり困難でもエンジニアが対応せざるを得ないこともあります。

Figmaでは、ブラウザを使ってデザインデータに簡単にアクセスできるので、エンジニアは途中段階のデザインを確認することができます。これにより、デザイナーが作成段階のアイデアに対して、エンジニアがコメントを送ることも。また、実装に必要なデザインデータが不足している場合にも、すぐにコミュニケーションを取れるので生産性向上につながります。

そうですね、全体を俯瞰して見れるのはエンジニアにとっても大きなメリットだと思います。例えば、自分が実装する画面でエラーが出たときにどんな画面が表示されるのかなど、必要な情報をすぐに確認可能。ファイルを探す手間がなくなることで、作業を効率化できるのではないでしょうか。

まず重要なのは、実際に触ってみてFigmaの基本的なインターフェイスとナビゲーションを理解することです。どこをクリックすれば色が見れるのか、などデザインの情報をどこで見るのかなどを確認していくことで、デザインデータをスムーズに閲覧できるようになります。

まず、デザイナーとのやり取りですが、エンジニア側が「閲覧権限」のみで内容を編集できない場合でも、コメント機能を使ってスムーズにコミュニケーションを取れます。例えば、エンジニアがデザインに「表示件数は最大3件」などとコメントを入れて、それをデザイナーが確認するような流れですね。

閲覧権限でも使えるコメント機能だけでもデザイナーと連携はできますが、Dev Modeという機能（有料）を使用すると、より見やすいかたちになります。Dev Modeには「アノテーション」という注釈の機能があるんですけど、これを使うと静的なデザインデータ上ではわからない細かい仕様や寸法、コンテキストなどを一目でわかるかたちで共有できます。

Dev Modeを使えば、デザイン完了したファイルに「開発準備完了」というフラグを表示できます。さらにフィルター機能で「開発準備完了」だけを抽出することも。コーディングするときに他の画面を見なくてもいいので、集中して作業に取り組むことができます。

まず、通常の閲覧権限の場合はデザイン上のUIをクリックしたとき、右側にPixelの値や色のコードが表示されるので、それを元に実装を進められます。

ここでDev Modeに切り替えると、さらにリッチな情報が表示されるんです。CSSやiOS、Androidなどで推奨されるコードスニペットを生成してくれるので、ゼロからコードを書くよりも、かなり楽になります。この機能により、デザインから実装までのワークフローを大きく効率化できます。

画像の書き出しについても、プレビューが表示されて簡単にエクスポートできます。PNGの書き出しや高解像度での書き出しもできるので、デザイナーに画像の書き出しを依頼する手間がなくなります。画像に関しては基本的にエンジニア側で完結できるのではないでしょうか。

コーディングをさらに効率化するなら、コードエディター「Visual Studio Code（以下、VS Code）」との連携がおすすめです。VS Code向けの拡張機能を使用することで、デザインファイルをテキストエディターに取り込むことができます。つまり、VS CodeのなかでFigmaのデザインデータを見れるということです。

従来の操作では、ブラウザやアプリでFigmaを見て、出てきたコードなどをコピー、その後でVS Codeのエディターを開いてペーストするなど、切り替え作業が発生します。一方でVS Codeの拡張機能を使うと、コードを書くエディターのすぐ横にFigmaが表示されるので、コピー＆ペーストが簡単。しかも、サジェストの設定を有効にすれば、エディター上でコードを予測表示することも可能です。

注意点としては、サジェスト機能で表示されるコードがデザインデータから解釈している内容なので、精度は高いもののプロダクトの全ブロックを書くのは難しいということ。細かい部分の修正などが発生すると思いますが、作業の効率が飛躍的に高まるのは間違いありません。

リクエストをたくさんいただいているので、現在検討中です。ニーズとして高いのは、iOS開発であればXcode、Androidの場合はAndroid Studioですね。具体的にいつ対応するのかなど、方向性はまだ決まっていませんが実現する可能性はあるかもしれません。

単純なデザインに対するフィードバックであれば、コメント機能でディレクションすることが多いと思いますが、それに加えてオートレイアウト機能を使うと、フレーム内の要素を規則的に並べて、構造的なデザインを組むことができます。

例えば、上記のような画面の場合、要素が増えたときに自動で幅が伸びたりすることはないのですが、オートレイアウト機能を使うと、自動的にレイアウトが切り替わります。

構造的なデザインにすると、Dev Modeを使用したときのコードスニペットでも、内容を解析しやすくなるんです。

例えば、上図の2つのデザインを見てもらったときに見た目はそんなに変わらないですが、左のようにデザインデータがフラットな状態になっていると、どこが親子関係になっているのかわかりづらく、コーディングに時間がかかってしまいます。 一方で、右のようにオートレイアウトで構造的なデザインを組んでおくと、階層的なコードを出してくれるので効率良く実装を進められます。

つまり、Dev Modeで機械的に解釈するとき、単純にグループ化してただ並べているだけでは構造的なコードを出すのが難しい（上図の①）ということです。そのため、オートレイアウトなどで構造的なレイアウトにすることをおすすめします（上図の②）。

そうですね。そもそもデザイナーの誰もが構造的なデザインを熟知しているとは限りません。Figmaも活用しながら構造的なデザインを作ってもらえるようにコミュニケーションを取れると、エンジニアの作業をより効率化できると思います。

Figma上で新しい画面を作成する場合、デザイナーが用意したコンポーネントセットやボタンなどを共有してもらうのが便利です。エンジニアに編集権限が付与されていれば、それらを組み合わせてワイヤーフレームを作成したり、画面を微調整したりすることができます。

独自のUIキットを持っていない場合でも、Figmaが公式で提供しているUIキットを活用すれば、誰でも手軽に画面を作成できます。UIキットのなかにはAppleと提携して作られたものもあるので、基本的なデザインの構築が可能です。

私自身の実装経験を踏まえてなんですけど、まずデザインデータをFigma上で公開して、関連したメンバーで「閲覧権限」を持った人なら誰でもアクセスできる状態にしておく。そして、途中経過でデザインのレビューなどを適宜入れられるようにして、デザイナーとエンジニアの関係性を作ることが重要だと思います。その上で、デザイナーがFigmaのコンポーネントセットを共有するなど、より効率的に進められる体制を構築することが大切です。

命名規則のすり合わせが非常に大切だと考えています。例えば、デザインデータ上で表示される「薄いベージュ」や「グリーン」といった色をバリアブル機能で管理し、カラーコードで共通の命名規則を持つようにしておく。そうすると、デザインデータをコードへスムーズに転用でき、再確認の手間が減ります。

細かい部分ですが、アンダーバーを使うのか、ハイフンを使うのか、スペースを空けるのかなどの細かいルールを決めておく。色の命名についても「ブランドカラー」や「サブカラー」などを命名しておくとスムーズに作業を進められます。エンジニアが初期段階からデザインに関わるケースも増えているので、Figmaを活用してより良いアウトプットを生み出していただけたらと思います。