Figma

今日はFigmaについてまとめて行きたいと思います。Figmaとはブラウザ上で簡単に使用出来るデザインツールで、開発の際の画面イメージなどをオンラインでデザイナーと開発者が共有することを可能にする物になります。少ないプロジェクト数なら無料で使えるので、実際に利用しながら使い方などをまとめて行きたいと思います。

基本的な使い方としては、プロジェクトとファイルを作成した後に開発に用いるデバイスの種類(iphoneやmacbook~インチ)などを選択し、キャンバスと呼ばれる擬似的なデバイスの画面に要素を配置していくといった使い方になります。

ページ全体の色やボタンを模した図形の挿入、複数要素のグループ化なども可能になっており実際に用件を画面のイメージとして作成した際にどうなるのかといったプロトタイプを作成する事が可能になっています。

また、画面遷移を伴うシステムの場合プロトタイプ機能を用いることによって、実際にボタンが押下された際にどのように画面遷移が行われるのかといったイメージまで作成する事が可能です。下記の場合だと「次の画面に遷移」ボタンと画面2が関連付られており、ボタンをタップすることで画面1から画面2に遷移する挙動まで確認する事が可能です。

基本的な機能を触った感想としては、以前個人の開発で使っていたAndroidstudioに近いものがあるのかなといった形でした。Figmaは開発を伴うツールではないので、コードをこのツールに書き込んだりバックエンドの処理を保持することはないのですが、よりデザインを詳細に行えたり実機の動きに近いイメージを作成するための機能が複数存在している印象を受けました。

今日は以上です。