
Figmaの「Little Big Updates」で公開された32の機能(2023年3月)
今回は、2023年3月29日にFigmaから公開された「Little Big Updates」で紹介された32の機能について、公式ツイートやリリースノートからかいつまんで解説します。
Little Big Updates are here… and they're BIG.
— Figma (@figma) March 28, 2023
Introducing 30+ new quality-of-life updates for Figma and FigJam to help improve your workflow.
Hint: You’re definitely going to want to check out the full thread 😉 https://t.co/8qtCShYoIZ? pic.twitter.com/AvpcSKdHvr
同日に全てが一気にリリースされたわけではなく、最近のアップデートをまとめて紹介する位置付けのプロモーション施策のようです。
以下、公開された各内容のタイトルについては公式リリースノートの日本語訳を参照しています。
※もし誤りがありましたら、@wentz_designまでお知らせください。
1. 新しいオンキャンパスプレビュー機能により、レイヤーブレンドモードなどにカーソルを合わせたときに、キャンバス上にプレビューが表示されるようになりました。
色のブレンドモードで、プルダウンメニューをマウスオーバーすると、どのようになるかプレビューが表示されるようになるよ うです。
1/32 On-canvas preview
— Figma (@figma) March 28, 2023
Hover over design panel options to preview different settings and properties before committing to them.
(Font preview is in the works!) pic.twitter.com/4NiSj2r9Zl
2. 輝度マスクがサポートされました。
マスクの種類で、「ルミナンス(輝度使用)」が選択できるようになります。輝度の他には「ベクトル(シェイプアウトライン使用)」と「アルファ(透過度使用)」が選べるようです。
2/32 Luminance mask support
— Figma (@figma) March 28, 2023
Create masks based on image or object brightness. pic.twitter.com/WxNpseCfTZ
使い分けを説明すると以下の通りです。
アルファ:裏側のオブジェクトの透明度を参照してマスクする
ベクトル:裏側のオブジェクトのアウトライン(パス)を参照してマスクする
ルミナンス:裏側のオブジェクトの輝度を参照してマスクする
ツイートのデモでは、植物のフルカラー画像と2値化画像(白黒)を用意して、ルミナンスでマスクすることで背景を切り抜くような使い方をしているようです。
簡単に比較した様子は以下の通りです。
A. 種類別のシェイプで画像をマスクするパターン
左からマスク画像(シェイプ)、アルファ適用時、ベ クトル適用時、ルミナンス適用時です。
B. 画像の輝度でシェイプをマスクするパターン
左からマスク画像(猫)、以降はルミナンス適用時です。
3. 検索置換や編集体験を向上させる複数選択機能。
ファイル内のテキスト検索で、Command + クリック
などで任意のオブジェクトを複数選択できるようになったようです。
3/32 Multi-select search
— Figma (@figma) March 28, 2023
Use Shift + Click or Cmd (Windows: Ctrl) + Click to select specific search results to edit or replace. pic.twitter.com/31UOMjD3w6
4. テキストボックスのサイズを必要最小限にする先頭トリミング機能。
テキストボックス内のテキストとボックスの間の上下の余白をカットできるようです。CSSのleading-trim
プロパティに対応するものと考えられます。
4/32 Leading trim
— Figma (@figma) March 28, 2023
Align and style your text just the way you want it by trimming that extra spacing. pic.twitter.com/ltSLeZXTzm
5. 番号付きリストの先頭に「1」以外を使用できるようになりました。
テキスト入力時に、番号付きの箇条書きリストで「5.」のように入力することで途中の番号からリストを始められるようになったようです。
5/32 Non-1 lists
— Figma (@figma) March 28, 2023
Format your number lists no matter where they begin. pic.twitter.com/SquYxUGMnx
6. 引用符やブラケットなどの約物をテキストボックスの外側にぶら下げることができます。
約物(カッコや引用符)を、主に文頭でテキストボックスからはみ出して表示す ることができるようになったようです。
6/32 Hanging punctuation
— Figma (@figma) March 28, 2023
Preserve the flow of your text by letting punctuation, like quotation marks, hang outside of the text box. pic.twitter.com/xheJmZsYCa
7. デスクトップで新しいタブを開始するとき、ファイルが検索されます。
デスクトップアプリ版のタブからファイルを新規作成する時のインターフェースで、ファイル検索ができるようになったようです。
7/32 Search in new tab on desktop
— Figma (@figma) March 28, 2023
Quickly find and jump into the right file no matter where you are. pic.twitter.com/wfiswfVhmE
8. デスクトップのタブにカーソルを合わせてプレビューを表示して、探しているものを見つけることができます。
デスクトップアプリ版のタブをマウスオーバーすると、サムネイルがポップアップ表示されるようになったようです。
8/32 Desktop tab hover previews
— Figma (@figma) March 28, 2023
Know what you're getting into by hovering over your tabs for quick file previews. pic.twitter.com/aLisQn2fNG
9. デスクトップアプリのトラックパッドの ハプティクス(触覚フィードバック)が新しくなりました。
デスクトップアプリ版の、主にFigJamでマウスカーソルを通したハイタッチやスタンプアニメーションの使用時に、Macのトラックパッドの触覚フィードバック(振動)が適用されるようです。
9/32 Haptics on desktop app (Mac)
— Figma (@figma) March 28, 2023
Feel design and collaboration coming together with new haptics when you emote, high-five in FigJam, and more.
(And if you don't like it, you can turn it on/off in Preferences) pic.twitter.com/9YVbEL7krk
10. コメントの文字を太字や斜体にしたり、リンクを追加したりできます。
コメント機能でテキスト入力時に、テキストのスタイルとリンクを追加できるようです。
ちなみに、ツイートのデモではコメントモードでファイル上をドラッグしてコメントが指す領域を範囲指定しています。
10/32 Rich text in comments
— Figma (@figma) March 28, 2023
Get more across by bolding, italicizing, and adding links.
To hyperlink your comments, select the text then hit Cmd + K (Ctrl + K on Windows). pic.twitter.com/cWOunN79eO
11. 統合された通知メールにより、ファイルへの最新のコメントを常に把握できます。
ファイルへの最新コメントが、一つの通知メールにある程度まとめてスレッド形式で表示するようになったようです。
11/32 Batched comment notification emails
— Figma (@figma) March 28, 2023
Stay updated on design feedback without the unnecessary distractions with consolidated email notifications. pic.twitter.com/23VKeMfQev
12. 右クリックでプロジェクトを素早く移動および統合できます。
ファイルを右クリックする時のメニューで、「ファイルを移動」が追加され、セクションやプロジェクトやチームなど移動先を指定できるようになったようです。
12/32 Updates to move project
— Figma (@figma) March 28, 2023
Stay organized with easier ways to move and consolidate Figma projects. pic.twitter.com/2YggHjDy4S
13. 公開ネストインスタンスのようなコンポーネントプロパティ機能が、すべてのユーザーでデフォルトでオンになりました。
これまでβ版だった、コンポーネント内のネストされたインスタンスのプロパティ表示機能が全てのユーザーにデフォルトで有効化されたようです。
13/32 Component properties: exposed nested instances
— Figma (@figma) March 28, 2023
The ability to bubble up properties of nested instances is now default turned on for everyone. pic.twitter.com/YMmyySqCLN
コンポーネント内のネストされたインスタンスのプロパティ表示機能については以下の記事を参考にしてください。
14. 優先インスタンスのような追加コンポーネントプロパティ機能が、すべてのユーザーでデフォルトでオンになりました。
コンポーネントのプロパティの一つのスワップ・インスタンスで、優先的に表示するインスタンスを指摘できるようになったようです。表示させたいアイコンが決まっている場合などに便利です。
14/32 Component properties: preferred instances
— Figma (@figma) March 28, 2023
Everyone can also use instance swapping with more confidence by defining a list of preferred instances. pic.twitter.com/tROO8sVddN
15. サイズの変更中、アスペクト比が完璧になる瞬間に画像がスナップします。また、Ctrlキーを押しながらサイズを変更することで、すべてのスナップ動作を一時的に無効にすることもできます。
画像を縦横に引き伸ばすときに、元画像のアスペクト比と一致する値になった時にスナップ(ピタッと吸い込まれるように止まる挙動)するようになったようです。
15/32 Better snapping (or no snapping!)
— Figma (@figma) March 28, 2023
Size your images just right with on-canvas snapping whenever you vertically or horizontally resize and hit the perfect aspect ratio.
If you want to disable snapping all together, just hold Ctrl. pic.twitter.com/dvAa9kj5vM
16. 特定の塗りレイヤーを選択し、すべての塗りを上書きすることなく、画像や動画の貼り付けや置き換えが可能です。
塗りの値(色や画像)を別のオブジェクトからコピーしてくるときに、コピー先の値がクリアされてコピー元の値で上書きされていたものが、部分的なコピーに対応したようです。
16/32 Pasting improvements
— Figma (@figma) March 28, 2023
Only make edits where you want them—paste images and videos into a specific fill without replacing all fills in a layer. This also works when you try pasting and replacing with another fill! pic.twitter.com/WNNzzkzlKb
17. 編集モードでも画像の配置を変更できます。
画像の編集モード(レタッチ中)でも、画像の配置を変更できるようになったようです。
17/32 Re-align during image editing
— Figma (@figma) March 28, 2023
Reposition your images using the alignment options even while in editing mode. pic.twitter.com/WIOYauOXdl
18. ネストしたインスタンスを基準にしてインスタンス以外のレイヤーの配置を簡単に調整できます。
コンポーネント内のネストされたインスタンスの位置を参照して、レイヤーの整列ができるようになったようです。
18/32 Align to nested instances
— Figma (@figma) March 28, 2023
Now you can select layers to align to nested instance sublayers. pic.twitter.com/WTiPisRhLW
19. ルーラーを右クリックして、ルーラーとすべての垂直ガイドを素早く削除できます。
縦・横の直線ガイドを、ルーラーの右クリックメニューからそれぞれ一括削除できるようになったようです。
19/32 Right click to remove rulers
— Figma (@figma) March 28, 2023
Quickly hide rulers and remove vertical guides by right-clicking and selecting from new dropdown menu. pic.twitter.com/kTmkenK2v8
ルーラー・ガイドの基本的にな使い方は以下の記事を参考にしてください。
20. ライブラリアップデートを1つのインスタンスやスタイルに適用できるようになりました。
コンポーネント・ライブラリのアップデートをファイルに取り込む際に、アップデートを部分的に選択して適用できるようになったようです。
20/32 Library update improvements
— Figma (@figma) March 28, 2023
Don't forget: You can now more confidentally approve library updates with a visual preview of the changes and the ability to apply them to individual instances and layers. pic.twitter.com/CMp1ExmZjt
21. クリップパスのサポート、余分なパスセグメントの問題の修正など、SVGインポート機能が改善されました。
SVGファイルをインポートする際に、余分なパスが生成されてしまいファイルの表示が崩れてしまう問題が改善したようです。
21/32 SVG import bug fixes
— Figma (@figma) March 28, 2023
Import SVGs with a greater peace of mind knowing clip paths are supported and you'll no longer run into that weird bug that resulted in extra path segments. pic.twitter.com/vcY3RaHAFB
22. プラグインにFetch APIを使うことで、ネットワークリクエストを簡略化できます。
プラグイン開発でFetch APIを利用できるようになったようです。
22/32 New Fetch API for plugins
— Figma (@figma) March 28, 2023
Build better Figma plugins with easier ways to make requests. pic.twitter.com/WENYp2h7yU
23. プラグインにcreateImageAsync APIを使うことで、画像を簡単に作成できます。
プラグイン開発で、createImageAsync APIが利用できるようになったようです。
23/32 New createImageAsync API for plugins
— Figma (@figma) March 28, 2023
And easier ways for Figma plugins to create images. pic.twitter.com/NrM1ixwqBx
24. 写真撮影ウィジェットにミラーリングされた画像が表示されるようになりました。
ウィジェットのPhoto Boothで、カメラ入力のプレビュー画像に対して反転して出力されていたものが、反転しなくなったようです。
24/32 Photo booth widget shows mirror image
— Figma (@figma) March 28, 2023
Taking FigJam selfies now shows mirror image. pic.twitter.com/P3WcfP2q8O
25. FigJamシェイプに透明塗りオプションが追加されました。
FigJamのシェイプの塗りに透過を指定できるようになったようです。
25/32 Transparency for FigJam shape fill
— Figma (@figma) March 28, 2023
Apply transparency for your shape fills to add more mystery or pizzazz to your FigJams. pic.twitter.com/YcYQQarej5
26. ツールバーからFigJamシェイプのデフォルト色を設定できます。
FigJamのツールバーのオブジェクトのデフォルトカラーをツールバー上で選択できるようになったようです。
26/32 FigJam shape colors in toolbar
— Figma (@figma) March 28, 2023
Set the default FigJam shape color directly in the toolbar. pic.twitter.com/BKc2AyMm1a
27. FigJamの付箋とシェイプを見分けられるように、いくつかのアニメーションエフェクトが追加されました。
FigJamのツールバーで、シェイプと付箋を視覚的に区別しやすいように、付箋がめくれるアニメーション演出を追加したようです。
27/32 FigJam sticky note animation
— Figma (@figma) March 28, 2023
Is it a square is it a sticky note? Now you know with the new curl animation for stickies. pic.twitter.com/9vtyUmzb69
28. プロトタイプ作成で縦方向にスクロールする際、エレメントを上部に固定できるようになりました。
プロトタイプで、スクロール時に表示位置を上部に固定して表示するオプション(CSSでいうstickyにあたる機能)を指定できるようになったようです。
28/32 Sticky scrolling in prototyping
— Figma (@figma) March 28, 2023
Keep what’s important up top, like a persistent banner, using new sticky scrolling option. pic.twitter.com/HRB4pgikXB
29. プロトタイプ作成の設定でアーカイブされたフレームを選択できるようになりました。
プロトタイプ作成時のデバイス選択で、過去にアーカイブされたフレームサイズを選択できるようになったようです。
29/32 Archived frames in prototype settings
— Figma (@figma) March 28, 2023
Older device frames now also available when you prototype. pic.twitter.com/aj5EHR549l
30. オーバーレイフレーム上の背景ぼかしエフェクトがプロトタイプで正しく表示されるようになりました。
プロトタイプで、エフェクトで「背景のぼかし」を指定したフレームを指定すると、オーバーレイ使用時にぼかし表現が反映されるようになったようです。
30/32 Background blur effects in overlays
— Figma (@figma) March 28, 2023
Now when you add an overlay with background blur in prototyping, things actually get a little fuzzy. pic.twitter.com/0Z7xUgfdiy
31. プロトタイプリンク(他のページからのリンク)を同じタブで開けるようになりました。
ファイル内の別ページ間のプロトタイプをリンクできるようになったようです。これまではページが違うとプロトタイプの再生も別タブで開いていたので便利になりそうです。
ページのリンク先の設定方法は、リンクしたいプロトタイプのURLを指定すればよいみたいです。
31/32 Prototyping URLs open in same tab
— Figma (@figma) March 28, 2023
Link to prototypes across pages and open them in the same tab for a more seamless experience. pic.twitter.com/QWlnathCSa
32. 忘れてはいけないのは、プロトタイプ作成ヌードルを複数作成できるようになったことです。
プロトタイプの遷移先を指定する矢印パスを一括選択で追加・変更できるようになったようです。
32/32 Multi-create prototyping
— Figma (@figma) March 28, 2023
And finally: Don't forget this major life hack launched over the holiday! No more creating interactions one-by-one. Just select multiple frames to create them all at once. pic.twitter.com/uDuxmYIIaA