今回は社内の案件で、デザインツールのひとつである「Figma」に触れる機会を得られたので、Figmaの特徴と使用した所感についてまとめてみたいと思います。
本ブログの内容
- どんなデザインツール？
- 使ってみて得られた気づき
- 今後の展望とまとめ
どんなデザインツール？
Figma（フィグマ）は、ウェブブラウザ上で動作するクラウドベースのデザインツールであり、UI／UXデザインやプロトタイプ制作に利用されています。複数名のチームメンバーがリアルタイムで協力してプロジェクトを進めるのに便利なプラットフォームとして知られています。
以下にFigmaの特徴的な部分を記載します。
クラウドベース
ウェブブラウザ上で動作するため、デスクトップアプリのインストールが不要です。また、デバイスや場所を問わずにアクセスでき、複数のデバイスで同時に作業することができます。そのためスマートフォンアプリのデザインも実機で確認することが可能です。
リアルタイム性に優れている
Figmaでは、複数のユーザーが同じプロジェクトに同時にアクセスして編集することができます。
リアルタイムでの共同作業が可能なため、チーム全体でプロジェクトを進めることができます。また、コメントやチャット機能もあり、メンバー間によるフィードバックなどのコミュニケーションを円滑も期待できます。
プロトタイピング機能
Figmaにはプロトタイピング機能も組み込まれており、作成したデザインに適応することで、実際の動作に近い挙動をブラウザで確認することができます。作成したプロトタイプは、協業者やユーザーと共有することもでき、ユーザーエクスペリエンスのテストやフィードバックの収集が容易になります。
コンポーネント機能
コンポーネントは複数のデザイン間で再利用できる要素です。プロジェクト（フォルダ）内の複数ページ間でも再利用可能であり、異なるプロジェクト間でも「チームライブラリ」にすることで再利用可能になります。そのため、複数のプロジェクトがあっても一貫性のあるデザインを作成して管理することができます。
このコンポーネント機能を上手く活用することで以下の利点があります。
コンポーネントの再利用性が高まる
デザインを繰り返し作成する手間を省くことができる。
デザインの効率化が可能
一度作成したコンポーネントは変更や更新が比較的容易
デザインの一貫性を維持できる
同じコンポーネントを使用することで、異なる画面や部分でも同じスタイルやデザインが適用できる
メンテナンスの容易化
コンポーネントを使うことで、デザインの変更や更新を行う際の作業量が軽減できる
オートレイアウト機能
Figmaのオートレイアウト機能は、UIデザインのレイアウトを自動的に調整することができます。コンテンツをグループ化して配置し、親要素のサイズや配置が変更された際に、自動的にコンテンツの間隔や位置を調整します。これにより、異なる画面サイズやデバイスに対応したレスポンシブなデザインを作成できます。
使ってみて得られた気づき
オートレイアウトは重要
オートレイアウトを使用せず、各コンテンツやパーツを絶対位置で固定することで、そのページでは問題は無いように見えます。しかし、このようなコンテンツを、サイズやデバイスが異なる場面で使用するとデザインが崩れてしまったり、あとからの変更に弱くなってしまう場合がありました。
そのため、グループ化されたパーツの中から、どのパーツに、どのようなオートレイアウト設定をするのか？といったことを予め決めておくほうが良いと感じました。
コンポーネント作成にはルールが必要
複数回使用するパーツはコンポーネント化すると、複数ページ・別のプロジェクトでも利用できるようになります。しかし、どのパーツにどのようなオートレイアウトをつけるべきか、フォントやテキストサイズはどうするか、プロトタイプの設定はどうするか、などといった事項をメンバー間で意識合わせしておく必要があると感じました。どういう構成のコンポーネントにするかを事前に共有しておくほうが後々楽になると思います。
フォントの変更には注意が必要
同じプロジェクト内で、ページ毎にコンポーネントで適用されているフォントやテキストサイズの一括変更が難しい場面がありました。 Figmaの機能で、ある特定のフォントのみを検索することは可能です。検索したフォントに対して、別のフォントに変更したり、テキストサイズを変更することも可能ですが、ページ内には複数のフォントが存在するため、反映漏れが生じてしまいました。 また、前述のオートレイアウトの関係で、テキストサイズを大きくすると、ラベルのテキストがはみ出たり、良くない折り返しが発生してしまうこともありました。
今後の展望とまとめ
今回社内の案件でデザインツール「Figma」に触れ、機能として便利な反面、その機能を十分に活かすための知見が少なく、手探りで作業を進める場面が多くありました。 上手くFigmaを活用できるようになれば、アプリケーションの画面イメージの共有や、仕様変更のコストも下げられると感じる部分もあったため、今後も定期的に触れる機会を作りたいと感じました。 また、今回はFigmaの開発モードに触れることが出来なかったので、今後の課題として開発モードからソースコードの生成にチャレンジしてみたいと思います。
