この記事は、2023年2月2日にあった社内勉強会で発表した内容を必要に応じてリライトした内容です
Figmaの入門記事はかなり擦られたコンテンツだと思いますが
社内勉強会では初めて取り上げるので悪しからず！
Figmaとは？
2016年9月に正式リリースされたUIデザインツール
最近日本語版がローンチされたことと、Adobeが買収したことで話題
ローカルでの保存は「.fig」
Figmaのいいところ
- リアルタイムにコラボレーションできる機能
- モブデザインできる
- クロスOSでも問題なし（ブラウザで動くため）
- 実機プレビューができる（FigmaMirrorというアプリが別途必要）
- プラグインが豊富 - 後述
-
格段にアツい
チュートリアルやる
基本操作はXDとほぼ変わらない？
チュートリアルの動画は英語だけど、実際の画面を操作しながら説明しているのでわかりやすかった（ベクター画像の作り方まで解説してくれた）
全部で6本の動画、すべて再生しても1時間満たないくらいなのでサクッと入門できる
プラグインを漁る
Figmaの良いところの一つとして「プラグインの豊富さ」がよく挙げられるので、良さげなのを入れてみる
デザインタブ単位でプラグイン導入できるので気軽に試せる
もちろん気に入ったのはストックすることもできる
プラグインの使用方法
- プラグインを使用したいデザインのツールバーの「リソース」をクリックして、「プラグイン」タブで検索かける
- すぐに使用する場合は「実行」をクリック
- ストックしたい場合は実行ボタンの横のミートボールメニューから「保存」をクリック
てかこのタイプのメニューってミートボールメニューって名前なの初めて知った
良さげなプラグイン集
Instance Finder
ファイル内で使用されているコンポーネントを検索できる
Breakpoints
ライブプレビューできるレスポンシブフレームが作成できる
使い方の詳細は
※動画です※
Unsplash
商用利用可能な写真素材を検索、使用できる
ダミー画像とかにいいかも
Better Font Picker, Japanese Font Picker
テキストボックスでプレビューしながらフォントを選択できる
Downsize
ファイル上で画像の圧縮やリサイズができる
Chart
さまざまなチャートがすぐに使用でき、実際にデータをインポートしたチャートも生成することができる
Mockuuups Studio
モックアップにデザインフレームを指定し配置することができる