Figmaを使い始めると
「同じ作業を何度もしている」
「配置がうまくいかなくて時間ばかりかかる」
と感じることが多いと思います。
実はそういうときのための機能がFigmaにはいろいろ用意されています。 機能を知ることで解決できることがたくさんあります。
ここでは初心者がハマりがちな「時間のムダ」と「効率化の方法」をまとめました。
こちらも参考に
よくある困りごとと効率化のヒント
同じボタンを何度もコピーしている
画面のあちこちに同じボタンを貼り付けていると、修正のたびに全部直さないといけません。
そんな時は「コンポーネント」にまとめておくと、一か所の修正で全部に反映されます。
ちょっとした複製ならショートカットも便利です。
・Alt（MacはOption）＋ドラッグ：その場に複製
・Shift＋Alt＋ドラッグ：まっすぐ揃えて複製
・Ctrl＋D（MacはCmd＋D）：直前の複製を繰り返す
文字を増やすたびに背景の図形を手作業で伸ばす
ボタンの中に文字を追加すると、枠からはみ出してしまう…というのは初心者あるある。
オートレイアウトで「中身に合わせて伸びる（Hug）」を設定すれば、文字数に合わせて自動で調整されます。
ロゴは左、メニューは右に置きたいけど最適な配置がわからない
ヘッダーにロゴを左、メニューを右に置くのは定番ですが、
「余白はどれくらい？」
「画面幅を広げたらどうなる？」
と配置の基準がわからなくなりがちです。
そこで使えるのがオートレイアウトの「両端揃え」。
親フレームを横並びにしてこの設定にすれば、ロゴは左端、メニューは右端に自動で配置され、真ん中の余白も自動で調整されます。
リストを追加すると間隔がバラバラになる
縦に並べたリストに項目を足すたびに手で位置を直していませんか？
親フレームを縦方向のオートレイアウトにして「アイテム間隔」を数値で指定すれば、追加しても削除してもきれいに整います。
色やフォントがページごとに違ってしまう
毎回カラーピッカーやフォントを選んでいると、デザインがバラつきがちです。
「スタイル」として登録しておけば、呼び出すだけで統一できます。
ブランドカラーの変更も一括で反映されます。
ボタンの通常・ホバー・押下を全部作っている
状態が違うボタンを1個ずつ作るのは非効率。
バリアントでまとめれば、ひとつのコンポーネント内で状態を切り替えるだけで済みます。
素材探しに時間がかかる
ブラウザを行き来してアイコンや写真を探すのは時間のムダ。Figmaのプラグインを使えば、UnsplashやMaterial Iconsをそのまま挿入できます。
画像やテキストを一括で差し替えたい
ダミーテキストや画像を1つずつ貼るのは大変です。
Content ReelやGoogle Sheets Syncなどのプラグインを使えば、まとめて流し込めます。
カードやリストを手で整列している
カードを複製して手で位置合わせしていませんか？
親フレームにオートレイアウトを設定して、均等配置やアイテム間隔を数値で指定すれば自動で揃います。
影や角丸を毎回設定している
ボタンに影をつけたり角丸を調整したりするのを毎回やるのは手間です。
効果をスタイル登録しておけば、ワンクリックで同じ見た目を再利用できます。
まとめ
「Figmaは難しい」と感じるのは、便利な機能を知らないまま手作業を繰り返しているから。
コンポーネントやオートレイアウト、スタイルを少しずつ取り入れるだけで、作業時間は大きく減らせます。
困ったときは「同じ作業を繰り返していないか？」を思い出してみてください。
ホームページ無料診断1000社チャレンジ
↓↓↓↓↓
「ホームページをどうすればいいのか分からない」とお考えの中小・個人企業に寄り添い、WEB集客やホームページに関して困ったことのご相談を受けたり、ホームページ制作や運営サポートを行ったりしています。
宝塚とTHE ALFEEとスピリチュアルが好き。
