実装しやすいFigmaファイルの作り方

こんにちは、UI/UXデザイナーのカヒブンです。中国出身です。

今回の記事では、実装しやすいFigmaファイルの作り方について、具体的なポイントを挙げながら説明したいと思います。

Figmaは、デザインからプロトタイプ作成までを一貫して行える強力なデザインツールです。特に、開発チームとデザインチームの間で円滑にコミュニケーションを取るために、実装しやすいFigmaファイルを作成することが重要です。

 

デザインシステムの導入

コンポーネントの利用

Figmaには「コンポーネント」という機能があり、これを活用することで一貫性のあるデザインを作成できます。コンポーネントは再利用可能なデザインパーツで、ボタンや入力フィールドなど、複数の場所で使用する要素を一つにまとめて管理できます。変更が必要な場合は、元のコンポーネントを修正するだけで全てのインスタンスが自動的に更新されます。

スタイルガイドの作成

スタイルガイドを作成し、色、フォント、間隔、アイコンなどのデザイン要素を一元管理しましょう。これにより、デザインの一貫性が保たれ、開発者も実装時に迷うことが少なくなります。Figmaではスタイルを定義し、それをプロジェクト全体で適用することができます。

テキスト：日本語・英数字を別に指定する。スタイルはCSSセレクターに準拠した名称にする：例 H1，H2，Label，Bodyなど

カラー：Primary / Secondary / UI / Text / Stateなど

シャドウ：ドロップシャドウなど

レイヤーとフレームの整理

明確な命名規則

レイヤーとフレームには明確な命名規則を設けましょう。例えば、ボタンであれば「btn-primary」や「btn-secondary」のように命名し、開発者がその役割を一目で理解できるようにします。グループやフレームにも意味のある名前を付け、全体の構造を把握しやすくします。

フレームの使い方

フレームはレスポンシブデザインの基盤となり、さまざまなデバイスサイズに適応したデザインを作成するのに役立ちます。各画面のフレームは、実際のデバイスサイズに合わせて設定しましょう。

 

オートレイアウトの活用

オートレイアウト機能を使用することで、レスポンシブデザインを簡単に実現できます。これにより、異なるデバイスサイズでもデザインが崩れないように調整することができます。

オートレイアウトの設定

親コンテナと子要素の間のスペースを設定し、要素の追加や削除に柔軟に対応できるようにします。

フィルの設定

要素間のスペースを均等に保つために、フィルオプションを利用します。

ネストされたオートレイアウト

複雑なレイアウトでも、ネストされたオートレイアウトを使うことで管理しやすくなります。

 

ステータスの整理

まれな状態

まれな状態とは、通常ではあまり起こらない珍しい状態です。

【タイトルが長すぎる場合】
全てをテキストで表現せず、「…」を使用して表示します。（2行目の後に「…」を使用することもあります。）

【実際の画像に対する画像の比率が正しくない場合】
比率外の部分を切り取る方法で対応します。カードデザインの画像比率が16：9で、一部のユーザーの画像が1：1や9：16で表示される場合でも、同様です。

空っぽい状態

テキスト、タイトル、画像などがない状態ではどう表示しますか。ユーザーがアカウントを作成したばかりで、情報のないページがたくさんあります。その場合はUIの表示はどうなりますか？

多くのデザイナーはこれらの状況を考慮しないことがよくあり、モックアップは理想的なUI表示で作ってしまった場合があります。開発者も注意しないと、そのままモックアップを実装され、本番環境で違った表示をしてしまう場合があります。この方法では、実際のアプリケーションに適用できません。

読み込みステータス

データがロードされていない場合は、Placeholderを使用して実行できます。最近、いくつかの偽のUIを作成してそこに配置することがトレンドでしたが`background-positionは実際にレイアウトとペイントを行います。多用するのは良いことではないので、代わりにスピナーやgifなど使えばよいです。

エラーが発生した場合

・UIは400、404、401、402を処理できますか？ユーザーがフォームを入力している場合、ポップアップなどの表示とかしましたか？データはlocalStorageにもしくは他の方法で保存しましたか？データがなくなった場合、ユーザーは落ち込むことが多いので注意が必要です。

・入力の検証は正しいですか？（対応するエラーメッセージを設計したり、考えられるエラーをカバーしたりしていますか？たとえば、パスワードの長さ、電子メールの長さ…）

・エラーメッセージは十分気づかれますか？（ユーザーは簡単にエラーを発見できますか？ユーザーが次のステップに進むことができるように、完全な情報とフォローアップができますか？ユーザーが次のステップに進むことができるように、完全な情報とフォローアップができますか？APIが呼び出されたときにUIがすぐに応答できますか？）
・APIが呼び出されたときにUIがすぐに応答できますか？（リクエストを呼び出すとき、ロード中、保留状態とかUIに反映していますか？

・コンテンツ次第でUIが変化するもの：入力フォームに入りきらない文字がある場合のパターンなど

・リンク・ボタン・チェックボックスなど違う状態があるもの：Normal，Disabled，Checked

 

プロトタイピングの実施

プロトタイピング機能を活用することで、デザインの動作を視覚的に確認できます。これにより、デザインの意図を開発チームに伝えやすくなります。

インタラクションの設定

ボタンのクリックやホバーなど、ユーザーインタラクションを設定し、実際の動作をシミュレーションします。

フローの作成

ページ遷移やモーダルの表示など、ユーザーフローを作成し、デザインの流れを視覚化します。

テストとフィードバック

プロトタイプをチームメンバーやステークホルダーに共有し、フィードバックを収集して改善します。

 

最後に

以上は実装しやすいFigmaファイルの作り方をまとめました。Figmaを最大限に活用し、チーム全体で効率的にデザインと実装を進めていきましょう。

読んでくださりありがとうございました！