Figma
Figmaとは、ウェブサイトやモバイルアプリケーションなどのデジタルプロダクトの画面設計やプロトタイピングを、チームなどの複数人で共同編集できるコラボレーション性に特化した、クラウドベースのデザインツールである。
特徴として、デザイナー、エンジニア、プロダクトマネージャーなどの開発者が同じデザインファイルをブラウザやアプリケーション上で作業でき、変更はすべての共同作業者にリアルタイムで共有される。
また、Figmaの機能の1つとして「FigJam」と呼ばれるホワイトボードツールがあるが、これは主にチームでのブレインストーミングやワークショップといったディスカッションや情報共有を目的としたツールであり、デザインツールとしてのFigmaとは区別されることが多い。
代表的な機能
デザインデータの作成
Figmaでは、イラストレーションなどの画像や画面デザインなどのUIをベクターオブジェクトのデザインデータとして作成できる。ベクターデータの特徴として、オブジェクトごとに色・サイズ・位置といったプロパティを持ち、オブジェクトのサイズを変更してもピクセル化や解像度の荒さの影響を受けずに高品質なグラフィックを保つことができる。
プロトタイピングの作成
Figmaでは、作成した画面同士を繋ぎ移動させるためのインタラクションを設定することでプロトタイピングを作成できる。設定できるインタラクションの種類としては、移動のトリガーとなるクリックやドラッグ&ドロップといったマウス操作や、画面が切り替わる際のアニメーションとして、ワイプやディゾルブといったトランジションを指定可能。
作成したプロトタイピングの利用シーンとしては、ステークホルダーによるフィードバックやユーザビリティテストなどがある。
コンポーネント・ライブラリの公開
Figmaでは、作成したデザインデータのうち、複数の画面などで共通部品として使用するUIを、再利用可能なコンポーネントとして組織内に公開できるライブラリ機能がある。
SmartHRでは、プロダクト開発の生産性を向上するためのデザインシステムにSmartHR UIというコンポーネント・ライブラリを含めている。このコンポーネント・ライブラリは、プロダクト開発上で利用する「React版SmartHR UI」の実装と合わせて、命名や構造まで一致するように設計されている。