Figma で役立ったTIPS 2021年4月[レイヤー一括編集 など]


こんにちは、Gaji-Labo UIデザイナーの今西です。

UIデザイン制作で Figma を使っていて、最近役立ったことをまとめてみます。

レイヤーの一括編集

テーブルのデザインに コンポーネントと Auto Layout をガシガシつかっています。

ある列のカラムを一括の幅をプロパティ変更したい時、一括で同様のレイヤーを選択出来ると一気に作業がしやすくなります。

もともとのFigma についている選択機能 Edit > Select All with Same ... でも同じようなレイヤーを一括で選択できます。 Edit > Select All with Same ... で同じ コンポーネントの同じ インスタンスまで指定で選択できますがデザインしていると Instance 以下のパターンも増えています。もっと細かいところまで指定したい。

Similayer

https://www.figma.com/community/plugin/735733267883397781/Similayer

レイヤー名やサイズ(幅 / 高さ)や 位置(相対位置と絶対位置)、Auto Layout のプロパティなど、選択しているレイヤーと同じプロパティを細かく指定してレイヤーを探し出すことができます。

レイヤーを探す範囲をフレーム内とページ全体(フレームのルート)とで指定できるので、全体的な変更をする場合にも対応しやすいです。

ちまちました作業を一気にできること。このプラグインで時間のかかる変更の作業を効率よく進められるようになりました。

地味に役立つこまごま

チームの並び替え

以前まではチーム名のテキストの順番にならんでいるのみで順番は変えられませんでした。 案件によってチームが違う場合、たくさんのチームに参加している時に過去のチームよりも進行中のチームを優先的に見えるようにしたい時がこれまでにもあったと思います。

サイドバーでのチームがドラッグ&ドロップで移動できるようになりました。

位置が変えられることで、ホームからのチームへのアクセスがしやすくなりました。また、見え方が気になるようなときにも動かせると便利ですね。

Quick Action

command + /(Macの場合。Windowsは control + / )でプラグインやアクションへのアクセスがしやすくなりました。

あまりちゃんとキーボードショートカットを覚えていなかった私は大助かりです。

プラグインもプラグイン名で選択できるので特に便利になりました(プラグインの名前をちゃんと覚えておく必要がありますが)

Similayer を使うと出番が減るかも知れませんが、 Edit > Select All with Same ... もここから選べるので便利です。

リスト(箇条書きリスト、番号付きリスト)

この機能はまだタイミング的に試せていません。

が、エイプリルフールで先行リリースされていた際に一瞬出てきてぎょっとしました。マークダウンで書いた箇条書きの記号が絵文字のピザ🍕 になっていて…。お客さんとのデザインデータだったので、流石にピザは…と、その時は使えないままでした。

4/2の正式リリースではマークダウン形式のようなテキスト入力で箇条書きリスト、番号付きリストが書けるようになっています。

https://help.figma.com/hc/en-us/articles/360040449773-Bulleted-and-numbered-lists

Figma の進化を眺めるのもおもしろい

Figma はこまごまアップデートされるものがあって面白いです。

プラン改定もあったりするためか、ヘッダーやサイドバーのUIが変更されました。 メンバーとコミュニティ表示の切り替えの動きが変わったので、もう少し慣れは必要そうですが、変更のした位置や挙動の変更について考えるとなるほどと思うところもあります。検索窓へのアクセスは前よりもよくなったかなあと感じています。

ちょうど来週は Figma のカンファレンスイベント Config もありますね。 新しい機能のロードマップなどの発表があったりするかもしれません。

日本時間は夜中の午前1〜6時のイベントなのでリアルタイム参加は難しいですが、後日イベントをチェックしたいと思います(Youtubeにアップされるらしいですね!)

Gaji-Laboでは、UIデザイナーを募集しています

弊社では手ざわりのいいUIを通して事業に貢献したいUIデザイナー、一緒にお仕事をしてくださるパートナーさんの両方を募集しています。大きな制作会社や事業会社とはひと味もふた味も違うGaji-Laboを味わいに来ませんか?

パートナー契約へのお問い合わせもお仕事へのお問い合わせも、どちらもいつでも大歓迎です。まずはオンラインでのリモート面談からはじめましょう。ぜひお気軽にお問い合わせください!

求人応募してみる!

投稿者 Imanishi Emi

UIデザイングループリード。
制作会社でプロモーションサイトや広告のデザイン制作、受託開発会社にてサービスのUIデザインを経験し、Gaji-Laboに参加。ユーザーが使いやすいインターフェースデザインづくりと、フロントエンドで実現するUIデザインの橋渡しについて考えます。
実際にインターフェースを試したりフィクションの世界のUIにヒントをもらいながら、心地よく使えるデザインを考えるのが好き。