開発者のためのFigma活用術(7) 1つのファイルで完結 - 開発効率を上げる情報共有のポイント

Figmaの基本的な利用方法から実務に役立つTipsまで紹介する本連載。第7回となるこの記事では、元デザインエンジニアで、現在は Figma Japan にてDA(デザイナーアドボケート) を務める谷が、開発効率を上げるための情報共有のポイントを紹介します。

アプリケーションやWebサイトの開発過程で、エンジニアはデザイナーやPM(プロジェクトマネージャー)から多くのフィードバックを受け取ります。フィードバックの共有方法としては、デザインカンプ(デザインの完成イメージ)を印刷して赤入れした修正指示書や、書き出したPDFなどを利用するのが一般的です。

ファイルの共有方法もさまざまで、メールへの添付、ファイル転送サービスやクラウドストレージ、メッセージアプリなどを利用するほか、書類が手渡しされることもあります。従来のように、複数のファイルとチャネルを使ったコミュニケーションではフィードバックが散在してしまい、エンジニアの開発効率が悪くなってしまいます。

それでは、Figmaを使って開発効率を上げる具体例を解説します。

URLの共有で、「本当の最新版」を探す時間を削減

Figmaはブラウザベースのデザインツールです。そのため、「作業中のURLを共有する」というシンプルなアクションで、デザインプロジェクトに関わるすべての人が同じデザインファイルにアクセスし、フィードバックを集約することができます。

開発作業を進める中で、デザインカンプや変更依頼がさまざまな共有方法で送られてくると、どれが最新版か分からなくなるものです。例えば、印刷されたデザインカンプを手渡しで受け取った後、「h3の文字サイズを14pxに変更してください」との変更依頼メールがあったとします。しかし、その後Slackで、「やっぱり16pxで」とメッセージが届くと変更依頼を取り違えるリスクがあります。

Figmaでは、クラウド上で常に最新のデザインファイルが保持されています。そのため、フィードバックを1つのファイルに直接記載していくことで、修正・変更を取り違える心配がありません。

右上の「共有」をクリック

共有画面が開くので「リンクをコピーする」をクリック

開発に必須な4つの資料作成を効率化

Figmaは、Webサイトやアプリ開発に関わるメンバーの情報共有プラットフォームとして利用できます。これまで作成に時間がかかっていた資料をFigmaで代替すれば、エンジニアの開発効率を高めることも可能です。

コピーや文章などのテキストを直接編集

サイトやアプリ上に表示するテキスト情報は、開発段階に入ってからもUXライターやコピーライターがブラッシュアップして更新していくことが少なくありません。テキストファイルが更新されるたびに、ライターがデザイナーに修正を渡し、さらにデザイナーがエンジニアへ共有するというフローでは、開発側でアップデートするスピードも落ちてしまいます。

そこで、ライターが書いた文章をデザイナーがデザインカンプに流し込んだら、あとはライターにFigmaファイルの編集権限を渡して直接修正作業をしてもらいましょう。

テキストはテキストボックスから直接編集することができます。また、コンポーネントを使ってデザインが作成されている場合には、コンポーネントのプロパティからテキストを差し替えることができるため、デザインの破壊を防ぐことができます。

コンポーネントのプロパティからテキストを編集する場合、画面左のレイヤーパネルからアセットを選択します。その後、テキストを編集したいコンポーネントを選択し、右側のデザインパネルからテキストを編集することができます。

コンポーネントでデザインが作成されている場合、プロパティからテキストを編集することで、デザインデータの崩れを防げる

画像書き出しの再依頼を省略

レスポンシブなサイトや複数デバイスに対応したアプリを開発したりする際、デザイナーの画像の書き出し方が異なるために、書き出しを何度も依頼することがあります。

例えば、デザイナーに書き出してもらった画像でコーディングしようとすると、表示環境によってはサイズや画質が合わないといった問題が起きます。

開発を担当するエンジニアは書き出しをやり直してもらうため、「なぜ今の画像ではダメなのか」を説明しなければいけません。そのためには、開発における専門的な内容も説明する必要があり、デザイナーへの依頼をまとめるのに時間がかかるものです。

そうした場合には、エンジニアがデザインデータから画像を書き出してしまえば、開発をスピーディに進められるでしょう。画像の書き出しは、エディタ画面の右側にあるデザインパネルの「エクスポート」からサイズや形式を設定して、「imageをエクスポート」ボタンをクリックします。

書き出したい画像を選択し、右側デザインパネルの「エクスポート」からサイズや形式を設定して書き出せる

インスペクトモードでレイアウト指示書は不要に

サイトやアプリを開発する際、フォントサイズや余白情報などを記載したレイアウト指示書をデザイナーが作成し、エンジニアがそれを基に開発を進めます。しかし、レイアウト指示書の作成にはかなりの工数がかかるため、エンジニアが開発に着手するまでに時間のロスが発生することもあります。

インスペクトモードを使って、フォントサイズや余白情報の数値を確認することで、レイアウト指示書が不要になります。

数値を確認するには、右側のデザインパネル上部からインスペクトモードに切り替えます。数値を確認したいテキストボックスやフレームを選択すると、右側のデザインパネルに数値が表示されます。

右側デザインパネル上部からインスペクトモードに変更すると値を確認できる

レイアウト指示書があった方が作業しやすいという場合には、Figmaコミュニティで公開されているプラグインを活用することで仕様書を生成できます。例えば、EightShapesが作成している Specs というプラグインでは、仕様書を起こしたいコンポーネントを選択し、プラグインを実行するだけで仕様書が作れます。