エンジニアのための Figma 速習メモ

最近プロトタイプの作成に Figma を試し始めたので、エンジニア目線でのチュートリアルを、メモも兼ねて残しておこうと思います。

なぜ Figma？

その前に、なぜ Figma を使い始めたのかについて軽く書いておきます。興味のない方はスキップしてください。

そもそもエンジニア的には、プロトタイプも生 HTML とかでガツガツ書いちゃうのはわりと選択肢です。エディタの恩恵を受けられるし、キーボードだけで作業できます。が、なんだかんだデザイン用のツールでマウスポチポチすると手数が少なくて、ラクなことに気づきました。

他のデザイン・プロトタイピングツールではなく Figma を使っているのは、最近勢いがありそうなのと、なにしろまともな無料枠があるのがありがたかったからです。 OSS など無償公開するツールは基本「あったら面白そうだから」というテンションだけで作っていくことになると思うので、あらかじめ運用コストをギリギリまで下げておかないと、あとで自分が飽きたときにツールの提供を維持できなくなります。 GitHub などには「 OSS 開発では無料で使える」プランがあるのでありがたいですが、デザインツールにはまだそういうものがなさそうなので、まともな無料枠があるツールは貴重です。今後「非営利・デザインデータ全公開してくれるなら無料でいいよ」みたいなツールが出てくると嬉しいですね。

基本は Auto Layout

デザインツールの操作感は基本パワポみたいな感じで、マウスでテキストボックスや四角形をポチポチ置いていくものです。が、それだけだと「たくさんの要素をぴったり 8px 間隔で設置する」みたいな、 UI では普通に出てくるパターンを作るのがとてもめんどいです。要素の追加・削除にも弱いです (全部手でずらさないといけない)。

これを解決してくれるのが Auto Layout で、むしろほとんどの部品は Auto Layout で置いていくのがいいと感じました。最初これに気づかなくて、無駄な作業をしてしまいました。

枠と要素を適当に置いて、全部選択、「Auto Layout」を追加すると自動的にシュッとなります (枠はなくても ok)。

要素を並べる方向、要素間のマージン、コンテナの padding などは自由に設定できます。

枠は中身に合わせて勝手に伸縮しますが、枠の Constraints を Fixed にすれば固定することもできます。このとき中身をどう配置するか (justify) も、パディングと同じところで設定できます。ほぼ Flexbox ですね。

一度 Auto Layout を設定すると、それ以降は要素を消したり足したりしても勝手にいい感じに配置されます。

唯一つらいのは、 Auto Layout の折り返しが現時点で使えないっぽいことです。複数行でレイアウトしたい場合は、縦方向の Auto Layout を入れ子にする必要がありそうです。

absolute な要素を置く

position: absolute な要素は Auto Layout では再現できません。

これを再現するためには、 absolute にしたい要素と、その親要素をひとつの Frame に入れます。その後、それぞれの要素ついて、 Frame 内のどこを基準に配置するか Constraints で指定すれば、相対座標でオブジェクトが固定されます。 CSS でいう top, right, bottom, left みたいな感じですね。

Frame に似た機能で Group というのもありますが、これはパワポの「グループ化」と同じような機能で、 UI のプロトタイプを作る時に使うことはほとんどなさそうです。これも最初ハマりました。

コンポーネントを管理する

React や Vue のように、繰り返し使う部品はコンポーネントにしておくことができます。

コンポーネントを管理する専用のページが１枚あると便利なので、ページを追加しておくのがおすすめです。

追加したページに、適当にボタンを作ってみます。

このような小物を作るときも、いちいち Auto Layout を使う癖をつけておくと、たとえばラベルの文字数に応じて枠が勝手に伸縮したりして便利です。

作ったボタンを選択して謎のマーク (Create Component) を押すと、これがコンポーネントの雛形になります。これはオブジェクト指向でいうクラスみたいなもの (もっというと、プロトタイプ指向のプロトタイプみたいなもの) です。

コンポーネントをコピペすると、インスタンスができます。

インスタンスを編集しても元のコンポーネントは書き変わりませんが、元のコンポーネントを編集すればすべてのインスタンスが更新されます。

作ったコンポーネントは Assets タブに追加されるので、ここからドラッグすればいつでも取り出すことができます。

コンポーネントは簡単に取り替えることができるので、色などのバリエーションもそれぞれコンポーネントとして定義しておくと便利です。コンポーネントを取り替えても、謎の技術によって編集は引き継がれます。

色・フォントの管理

色やフォントも変数みたいな感じで管理できます。

謎の４点マーク (Styles) を押すと、＋ボタンから新しい色やフォントを登録できます。

登録した色やフォントは一覧に追加されるので、次からは簡単に選ぶことができます。

紙芝居を作る

構成がなんとなくできてきたら、いくつかの画面を紙芝居にしてプロトタイプを作ることができます。

画面遷移に使うボタンを選択して、 Prototype タブを開き、

丸いハンドルから遷移先の画面に線を引きます。

線が引かれた状態で画面右上の再生ボタンを押すと、完成したプロトタイプで遊ぶことができます。

まとめ

エンジニア目線で Figma を最低限いい感じに使うための操作をまとめてみました。

まだまだ初心者なので、これも必修やで！という機能があればぜひ教えてください。