figma-little-big-updates-2023-03
公開日: 2023.03.31 　|　更新日: 2023.04.03

Figmaの「Little Big Updates」で公開された32の機能

FigmaFigJam

今回は、2023年3月29日にFigmaから公開された「Little Big Updates」で紹介された32の機能について、公式ツイートやリリースノートからかいつまんで解説します。

同日に全てが一気にリリースされたわけではなく、最近のアップデートをまとめて紹介する位置付けのプロモーション施策のようです。

以下、公開された各内容のタイトルについては公式リリースノートの日本語訳を参照しています。

※もし誤りがありましたら、@wentz_designまでお知らせください。

1. 新しいオンキャンパスプレビュー機能により、レイヤーブレンドモードなどにカーソルを合わせたときに、キャンバス上にプレビューが表示されるようになりました。

色のブレンドモードで、プルダウンメニューをマウスオーバーすると、どのようになるかプレビューが表示されるようになるようです。

2. 輝度マスクがサポートされました。

マスクの種類で、「ルミナンス（輝度使用）」が選択できるようになります。輝度の他には「ベクトル（シェイプアウトライン使用）」と「アルファ（透過度使用）」が選べるようです。

使い分けを説明すると以下の通りです。

  • アルファ：裏側のオブジェクトの透明度を参照してマスクする

  • ベクトル：裏側のオブジェクトのアウトライン（パス）を参照してマスクする

  • ルミナンス：裏側のオブジェクトの輝度を参照してマスクする

ツイートのデモでは、植物のフルカラー画像と２値化画像（白黒）を用意して、ルミナンスでマスクすることで背景を切り抜くような使い方をしているようです。

簡単に比較した様子は以下の通りです。

A. 種類別のシェイプで画像をマスクするパターン

左からマスク画像（シェイプ）、アルファ適用時、ベクトル適用時、ルミナンス適用時です。

LBU2

B. 画像の輝度でシェイプをマスクするパターン

左からマスク画像（猫）、以降はルミナンス適用時です。

LBU3

3. 検索置換や編集体験を向上させる複数選択機能。

ファイル内のテキスト検索で、Command + クリックなどで任意のオブジェクトを複数選択できるようになったようです。

4. テキストボックスのサイズを必要最小限にする先頭トリミング機能。

テキストボックス内のテキストとボックスの間の上下の余白をカットできるようです。CSSのleading-trimプロパティに対応するものと考えられます。

5. 番号付きリストの先頭に「1」以外を使用できるようになりました。

テキスト入力時に、番号付きの箇条書きリストで「5.」のように入力することで途中の番号からリストを始められるようになったようです。

6. 引用符やブラケットなどの約物をテキストボックスの外側にぶら下げることができます。

約物（カッコや引用符）を、主に文頭でテキストボックスからはみ出して表示することができるようになったようです。

7. デスクトップで新しいタブを開始するとき、ファイルが検索されます。

デスクトップアプリ版のタブからファイルを新規作成する時のインターフェースで、ファイル検索ができるようになったようです。

8. デスクトップのタブにカーソルを合わせてプレビューを表示して、探しているものを見つけることができます。

デスクトップアプリ版のタブをマウスオーバーすると、サムネイルがポップアップ表示されるようになったようです。

9. デスクトップアプリのトラックパッドのハプティクス(触覚フィードバック)が新しくなりました。

デスクトップアプリ版の、主にFigJamでマウスカーソルを通したハイタッチやスタンプアニメーションの使用時に、Macのトラックパッドの触覚フィードバック（振動）が適用されるようです。

10. コメントの文字を太字や斜体にしたり、リンクを追加したりできます。

コメント機能でテキスト入力時に、テキストのスタイルとリンクを追加できるようです。

ちなみに、ツイートのデモではコメントモードでファイル上をドラッグしてコメントが指す領域を範囲指定しています。

11. 統合された通知メールにより、ファイルへの最新のコメントを常に把握できます。

ファイルへの最新コメントが、一つの通知メールにある程度まとめてスレッド形式で表示するようになったようです。

12. 右クリックでプロジェクトを素早く移動および統合できます。

ファイルを右クリックする時のメニューで、「ファイルを移動」が追加され、セクションやプロジェクトやチームなど移動先を指定できるようになったようです。

13. 公開ネストインスタンスのようなコンポーネントプロパティ機能が、すべてのユーザーでデフォルトでオンになりました。

これまでβ版だった、コンポーネント内のネストされたインスタンスのプロパティ表示機能が全てのユーザーにデフォルトで有効化されたようです。

コンポーネント内のネストされたインスタンスのプロパティ表示機能については以下の記事を参考にしてください。

Figmaでコンポーネントに内包されたインスタンスのプロパティを効率的に変更する方法

今回は、子インスタンスを内包（ネスト）した親コンポーネントを作成する際に、親のインスタンス内で子のプロパティを効率的に設定する方法を紹介します。テキストの説明だけだとやや難解なので、記事内の動画もあわせて参考にしてください。 ... 続きを読む

figma-nested-instance-property-setting

14. 優先インスタンスのような追加コンポーネントプロパティ機能が、すべてのユーザーでデフォルトでオンになりました。

コンポーネントのプロパティの一つのスワップ・インスタンスで、優先的に表示するインスタンスを指摘できるようになったようです。表示させたいアイコンが決まっている場合などに便利です。

15. サイズの変更中、アスペクト比が完璧になる瞬間に画像がスナップします。また、Ctrlキーを押しながらサイズを変更することで、すべてのスナップ動作を一時的に無効にすることもできます。

画像を縦横に引き伸ばすときに、元画像のアスペクト比と一致する値になった時にスナップ（ピタッと吸い込まれるように止まる挙動）するようになったようです。

16. 特定の塗りレイヤーを選択し、すべての塗りを上書きすることなく、画像や動画の貼り付けや置き換えが可能です。

塗りの値（色や画像）を別のオブジェクトからコピーしてくるときに、コピー先の値がクリアされてコピー元の値で上書きされていたものが、部分的なコピーに対応したようです。

17. 編集モードでも画像の配置を変更できます。

画像の編集モード（レタッチ中）でも、画像の配置を変更できるようになったようです。

18. ネストしたインスタンスを基準にしてインスタンス以外のレイヤーの配置を簡単に調整できます。

コンポーネント内のネストされたインスタンスの位置を参照して、レイヤーの整列ができるようになったようです。

19. ルーラーを右クリックして、ルーラーとすべての垂直ガイドを素早く削除できます。

縦・横の直線ガイドを、ルーラーの右クリックメニューからそれぞれ一括削除できるようになったようです。

ルーラー・ガイドの基本的にな使い方は以下の記事を参考にしてください。

Figmaでグリッドやガイド（ルーラー）を表示・非表示する方法

今回はFigmaでルーラー（定規）やグリッド（升目）を表示・非表示したり、アウトライン表示などの見た目を切り替える方法を紹介します。ガイドを作成したい場合や、誤ってショートカットキーを押してしまって元に戻したい時などの参考になればと思います。 ... 続きを読む

figma-ruler-and-grid-view-tips

20. ライブラリアップデートを1つのインスタンスやスタイルに適用できるようになりました。

コンポーネント・ライブラリのアップデートをファイルに取り込む際に、アップデートを部分的に選択して適用できるようになったようです。

21. クリップパスのサポート、余分なパスセグメントの問題の修正など、SVGインポート機能が改善されました。

SVGファイルをインポートする際に、余分なパスが生成されてしまいファイルの表示が崩れてしまう問題が改善したようです。

22. プラグインにFetch APIを使うことで、ネットワークリクエストを簡略化できます。

プラグイン開発でFetch APIを利用できるようになったようです。

23. プラグインにcreateImageAsync APIを使うことで、画像を簡単に作成できます。

プラグイン開発で、createImageAsync APIが利用できるようになったようです。

24. 写真撮影ウィジェットにミラーリングされた画像が表示されるようになりました。

ウィジェットのPhoto Boothで、カメラ入力のプレビュー画像に対して反転して出力されていたものが、反転しなくなったようです。

25. FigJamシェイプに透明塗りオプションが追加されました。

FigJamのシェイプの塗りに透過を指定できるようになったようです。

26. ツールバーからFigJamシェイプのデフォルト色を設定できます。

FigJamのツールバーのオブジェクトのデフォルトカラーをツールバー上で選択できるようになったようです。

27. FigJamの付箋とシェイプを見分けられるように、いくつかのアニメーションエフェクトが追加されました。

FigJamのツールバーで、シェイプと付箋を視覚的に区別しやすいように、付箋がめくれるアニメーション演出を追加したようです。

28. プロトタイプ作成で縦方向にスクロールする際、エレメントを上部に固定できるようになりました。

プロトタイプで、スクロール時に表示位置を上部に固定して表示するオプション（CSSでいうstickyにあたる機能）を指定できるようになったようです。

29. プロトタイプ作成の設定でアーカイブされたフレームを選択できるようになりました。

プロトタイプ作成時のデバイス選択で、過去にアーカイブされたフレームサイズを選択できるようになったようです。

30. オーバーレイフレーム上の背景ぼかしエフェクトがプロトタイプで正しく表示されるようになりました。

プロトタイプで、エフェクトで「背景のぼかし」を指定したフレームを指定すると、オーバーレイ使用時にぼかし表現が反映されるようになったようです。

31. プロトタイプリンク(他のページからのリンク)を同じタブで開けるようになりました。

ファイル内の別ページ間のプロトタイプをリンクできるようになったようです。これまではページが違うとプロトタイプの再生も別タブで開いていたので便利になりそうです。

ページのリンク先の設定方法は、リンクしたいプロトタイプのURLを指定すればよいみたいです。

32. 忘れてはいけないのは、プロトタイプ作成ヌードルを複数作成できるようになったことです。

プロトタイプの遷移先を指定する矢印パスを一括選択で追加・変更できるようになったようです。

当サイトの読者限定で、ITやデジタル領域のプロダクトデザイナーを志望しているまたはやり始めた方を対象に、プロダクト開発上のお悩み・UIデザインのお悩み・キャリアなどの相談会を期間限定（5~6月の間）の無料お試しで実施します。
最新の記事を見る
広告
この記事を書いた人
うえんつ

うえんつ

Twitter
B2B領域のSaaS・アプリケーション開発などを組織で取り組むことが得意なプロダクトデザイナーで、このブログのオーナーです。
今の関心事
Figma・UIデザイン・UXリサーチ・QOL・旅行
当サイトの読者限定で、ITやデジタル領域のプロダクトデザイナーを志望しているまたはやり始めた方を対象に、プロダクト開発上のお悩み・UIデザインのお悩み・キャリアなどの相談会を期間限定（5~6月の間）の無料お試しで実施します。
広告