Figmaの「Little Big Updates」で公開された機能(2023年11月分)
今回は、2023年11月にFigmaから公開された「Little Big Updates」で紹介された機能について、公式ツイートやリリースノートからかいつまんで解説します。
以下の9〜10月分からの続きになっていますので、あわせて参考にしてください。
同日に全てが一気にリリースされたわけではなく、最近のアップデートをまとめて紹介する位置付けのプロモーション施策のようです。前回は2023年3月に実施されています。
おそらく、今回分でラストと思われますが、追加分があれば更新します。
※もし誤りがありましたら、@wentz_designまでお知らせください。
最終週:QOLの向上に関する改善
22. フォントのスタイル適用をその場でプレビュー可能に
フォントファミリーを選択中に、選択中のテキストオブジェクトでフォントが適用された状態をプレビューできるようになりました。フォントの種類だけでなく、サイズやウエイトもプレビューできます。便利ですね。
I’m excited to kick off the season finale of #LBUWeekly with #22, a little BIG update to the font picker: On-canvas previews!
— Katie Dillon (@KatieDillo69579) November 16, 2023
Now you can preview what different font families and their size and style options would look like without having to make any selections. pic.twitter.com/jPpKexik2u
23. スペルミスをTabキーで自動校正
スペルミスで赤い波線がついたテキストに対して、Tabキーを押すと最初の修正候補が適用できるショートカットが追加されました。
Update #23 is a fun shortcut to fix typos: Just press tab on a misspelled word and we’ll autocorrect the typo to the first suggestion in the spell check list. Try it out in Figma and FigJam! pic.twitter.com/x5OYwYTKAT
— Katie Dillon (@KatieDillo69579) November 16, 2023
24. SF Symbolsのレンダリング(表示)改善
AppleのアイコンライブラリであるSF Symbolsが、Figmaのレイヤーやフレーム名などで適切に表示されるようになったようです。
Update #24 is for the icon lovers: SF Symbols will now render correctly wherever you want to use them in Figma. pic.twitter.com/BG4DisLbmf
— Katie Dillon (@KatieDillo69579) November 16, 2023
25. テキストオブジェクトの上下サイズ変更時のスナップ
テキストオブジェクトを上下サイズ変更する際にhugの位置でスナップするようになったようです。左右幅は従来通りで、枠をダブルクリックするとhug相当に拡大・縮小できます。
Update #25: Is there anything more satisfying than a good snap target? We certainly don’t think so, which is why we’ve added them to text boxes and… pic.twitter.com/swEyuQ9QN1
— Katie Dillon (@KatieDillo69579) November 16, 2023
26. フレームのサイズ変更時のスナップ
フレーム内にオブジェクトが存在する時、フレームのサイズを変更時に、オブジェクトが中心になる位置でスナップするようになったようです。
…containers! Update #26 means both text boxes and containers, like frames and sections, will snap to center around their text or children when resizing. pic.twitter.com/AUAu5Os8WM
— Katie Dillon (@KatieDillo69579) November 16, 2023
27. 閲覧権限(Viewer)でもテキストを直接選択可能に
閲覧権限(Viewer)でも、テキストオブジェクトを直接選択した際に、テキストを選択・コピーできるようになったようです。
Update #27 should be handy to anyone in Dev Mode: You can now select text from the canvas in View-only mode. pic.twitter.com/PnexGfUXPr
— Katie Dillon (@KatieDillo69579) November 16, 2023
28. テキストの表示に関する不具合修正
単語内の色やその他のフォントプロパティを変更すると、テキストの一部がずれたり一部の言語で誤動作を起こす不具合が修正されたようです。
Update #28: We’ve fixed an issue where changing colors or other font properties within a word caused some of the text to shift or misbehave.
— Katie Dillon (@KatieDillo69579) November 16, 2023
Now, kerning pairs and contextual cursive fonts (like Arabic scripts) won’t break when changing properties within a word. pic.twitter.com/zCEjOVuuHN
29. ネストされたコンポーネントのプロパティの更新
ネストされたコンポーネントのプロパティが、開発者モード(Dev mode)を含めコンポーネントプレイグラウンドに表示されるようになったようです。
Last but not least, we have #29, an update to nested component props! Now nested component properties are visible in both the component playground… pic.twitter.com/5IdXZVYpIV
— Katie Dillon (@KatieDillo69579) November 16, 2023
…and in Dev Mode! pic.twitter.com/YTL3Ug4ZTB
— Katie Dillon (@KatieDillo69579) November 16, 2023
30. コメント内に画像ファイルなどを送信可能に
コメントに5つまでの画像やGIFを追加できるようになったようです。クリップボードから貼り付けるか、クリックすると拡大縮小してフルサイズで表示できます。
#LBUWeekly collab bundle lets go! 👏
— Miggi ✌🏽 (@miggi) November 16, 2023
#30 Media in @figma comments is my new BFF.
Add up to 5 images/GIFs in a comment, paste from clipboard, or click to open full size with pan and zoom. Even right-click download or copy as PNG, easily.
It just works the way you want it to! pic.twitter.com/LQRdAlo9eL
31. コメントへのリアクション(スタンプ)に絵文字が追加
FigmaとFigJamでコメントするときに、他の人のコメントに対するリアクション(スタンプ)で絵文字を利用できるようになったようです。
#31 Now when commenting in @Figma and FigJam, you have the full gamut of emoji reactions to others’ comments.
— Miggi ✌🏽 (@miggi) November 16, 2023
Me personally, I’m food motivated, so:
🌮 means I wanna ‘taco bout it.’
🧇 when I’m waffling on an idea.
🍞 when I loaf it! pic.twitter.com/2WjJZ2h8nP
32. スポットライト(画面追従モード)を要求可能に
複数人でファイル閲覧中に、スポットライト(画面追従)を他のメンバーから要求することができるようになったようです。要求された人は承認すると、ファイル内のメンバーがスポットライトに参加できます。
32. Need to quickly nudge 👉 someone to share their view in a @figma file? Presenting at all hands and want to tag in a colleague?
— Miggi ✌🏽 (@miggi) November 16, 2023
Now you can nominate someone to spotlight, and see what they see, instantly! pic.twitter.com/E3c7y89WCZ
33. FigJamでマインドマップの標準機能を追加(予定)
FigJamで標準機能としてマインドマップ・ノードが追加されるようです。これまでマインドマップを作成したい際は、サードパーティのプラグインやウィジェットを使用する必要がありました。
#33 🧠🗺️ Mind maps in FigJam (coming soon!) are a brainstorm game changer. They auto arrange and adjust to fit your text, you can move whole branches around, and anything can be added as a node! pic.twitter.com/27MfFj9ijY
— Miggi ✌🏽 (@miggi) November 16, 2023
34. FigmaモバイルアプリのUI変更
FigmaのモバイルアプリのUIが変更されたようです。
#34 The new updated Figma mobile app 🤳🏽 experience makes it so much easier to browse and find your files. Great for reviewing designs, and leaving a comment on the go. pic.twitter.com/uxkcEfKXj3
— Miggi ✌🏽 (@miggi) November 16, 2023
35. Asanaウィジェットの改善
Asanaのプロジェクトを FigJam または Figma ファイルにインポートする挙動が変更されたようです。 ポートフォリオ全体をリンクをインポートすると、内包されるプロジェクトのウィジェットを一括取り込みできるようです。
#35 Dropping @Asana projects into a FigJam or Figma file has never been easier.
— Miggi ✌🏽 (@miggi) November 16, 2023
You can now drop a whole portfolio 📂 of projects into a file with a single link to quickly and visually have the single source of truth in the context of your actual work. pic.twitter.com/AmHBbhcLkY
36. Jiraウィジェットの改善
Jiraウィジェット上でissue上に添付された画像ファイルがプレビューされるようになったようです。
#36 NGL, having images unfurl into my @Figma and FigJam docs from the @Jira widget is going to save so much time, big pain point solved. Goodbye multiple tabs 👋🏽, I won’t miss you! pic.twitter.com/T7L8tszlW6
— Miggi ✌🏽 (@miggi) November 16, 2023
37. プロトタイプのマウス・インタラクションの改善
プロトタイプ機能の「マウスエンター」と「マウスリーブ」のインタラクションが適切に動作するようになったようです。デモでは、オブジェクト上のマウスオーバーのIN/OUTによってトリガーされるようになった様子が確認できます。
Very excited to close out the season finale of @figma's #LBUWeekly with a bundle of new prototyping updates!
— Garrett Miller (@heyitsgarrett) November 16, 2023
Up first, #37: a fix so that “mouse enter” and “mouse leave” interactions work the way you expect them to. pic.twitter.com/BiwppWJkGQ
38. プロトタイプ編集時の挙動の安定性向上
プロトタイプの遷移設定時の編集ポップアップが表示される挙動の安定性が改善したようです。
Next, #38: The prototyping modal now pops up right when you need it, like when you release the mouse after dragging or selecting. pic.twitter.com/qNJOcQHVzb
— Garrett Miller (@heyitsgarrett) November 16, 2023
39. プロトタイプの編集ポップアップをShiftキーで非表示に
プロトタイプの遷移設定時の編集ポップアップが、Shiftを押下中は非表示にできるようになったようです。
Update #39: We’ve also built a simple way to temporarily hide the edit modal when you don’t need it: just hold shift! pic.twitter.com/iuY47ZVCql
— Garrett Miller (@heyitsgarrett) November 16, 2023
40. プロトタイプで複数のアクションの存在を示す表現を追加
プロトタイプの編集ポップアップのアクションが複数存在する場合、インタラクションのアイコン(インジケーター)に影表現がつくようになったようです。
Update #40 makes it clear when you have multiple actions tucked into an interaction by adding a small shadow to the on-canvas indicator. pic.twitter.com/1tkUelNc0s
— Garrett Miller (@heyitsgarrett) November 16, 2023
41. インラインプレビューで表示中のフレームに追従できるように
プロトタイプをインラインプレビューする際に、表示中のフレームへ画面追従できるオプションが追加されたようです。修正箇所を発見した際に該当画面まで移動する手間が省けますね。
I’m really excited about update #41 — the inline preview can follow the current frame, orienting the canvas automatically for you. This is super handy for debugging and understanding prototypes. pic.twitter.com/WvPQbqWWYr
— Garrett Miller (@heyitsgarrett) November 16, 2023
42. プロトタイプの追従スクロールの改善
プロトタイプのスクロール時にオブジェクトを画面追従させるオプション(Stickey)で、従来通りの画面全体の追従以外に、指定したオプションの属するフレーム内に限定して追従できるオプションが追加されました。
特定のセクション内でのみ追従させる挙動が表現しやすくなりますね。
And finally, #42, our last Little Big Update of the season: Sticky scrolling improvements! Now you can nest sticky scrolling elements inside each other for even higher fidelity experiences, such as stacking multiple scrolled elements. pic.twitter.com/ciHWEW26hW
— Garrett Miller (@heyitsgarrett) November 16, 2023