2022年上半期のFigmaアップデート個人的TOP10!

## はじめに

この記事ではFigmaの2022年上半期（2022年1月から6月までを指してます）のアップデートをランキング形式で振り返っています。
ランキングは飽くまで個人的な推しや使用頻度に基づいているので、この人はこの機能が好きなんだな〜！という感じでお読みください:pray:

また、すべてのアップデートを紹介はできていないので、どんなリリースがあったのか全部見たいよという方は公式のリリースノートをお読みください！

https://releases.figma.com/

## 2022年上半期のFigmaアップデートを個人的TOP10

早速ですがFigmaアップデートを個人的TOP10です！！

1. :trophy: `Stroke`を4方向それぞれに設定できるようになった
1. コンポーネントプロパティに`Boolean`を設定できるようになった
1. `Auto lyaout`内のアイテムに`Ablsolute position`のアイテムを追加できるようになった
1. 置き換えペーストができるようになった（`Command + Shift + R`）
1. コンポーネントプロパティに`Instance swap`を設定できるようになった
1. コンポーネントプロパティに`Text`を設定できるようになった
1. ResourcesタブとWidgetが追加された
1. テキストのはみ出し部分を「...」で省略できるようになった
1. 親に上がるショートカットが使えるようになった（`Shift + Enter`）
1. `Auto layout`の`Space between`ににマイナスの値を設定できるようになった

## アップデートのここが良い

それぞれ、具体的にどんなシーンで使っているのかなど、どこが良いのかをご紹介していきます！

### 1. `Stroke`を4方向それぞれに設定できるようになった

控えめに言って神アップデートです！！

Figmaではオブジェクトに対して「`Stroke`」、CSSでいうところの`border`、`outline`を指定することができます。
以前まではこの`Stroke`を「4方向全部」にしか指定できなかったため、ヘッダーやテーブルのデザインで使いずらく、Border用に別途オブジェクトを用意しなければいけない場面がありました。

こうするとコード上と乖離が生じますし、デザインを調整する時の手間も地味に面倒でした。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/577501/02d3fcc4-37aa-3608-1423-940a3a4a4234.png" />

しかしこのアップデートによって`Stroke`を指定する方向を選べるようになり、「Borderを表現するためのオブジェクト」が必要なくなりました！
よりFigmaデータがコードと近づきますし、メンテナンス性も向上する、とても嬉しいアップデートでした :raised_hands:

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/577501/e97297b2-1db1-64f3-1d97-ced346a41733.png" />

### 2. コンポーネントプロパティに`Boolean`を設定できるようになった

Figmaでは作成したデザインを再利用できる「`Component`」を作成することができます。

この`Component`には「`Variant`」というバージョン違いを作成することができ、「`Default`-`Hover`-`Focus`」や「`Blank`-`Ideal`-`Partial`-`Error`」と言ったステータスの違いを表現することができます。

今までは`Component`上の「ボタンのアイコンのあるなし」や「フォームのエラーメッセージのあるなし」といった「ちょっとした要素のあるなしの違い」を、この`Variant`を作成して表現していました。

しかし、`Component`に「`Boolean`」というプロパティが追加されてレイヤーのON-OFFを設定できるようになり、`Variant`を軽量化できるようになりました！

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/577501/0a7bdc39-2c5b-c599-e9fc-72890981198b.png" />

こちらも非常に嬉しいアップデートで、詳細は別途記事を書いているので是非お読みください！

https://qiita.com/kabechiyo13/items/c2d12ab95197d8f961e2

### 3. `Auto lyaout`内のアイテムに`Ablsolute position`のアイテムを追加できるようになった

`Auto layout`を親要素に設定すると、指定した`Padding`と`Space between`（gap）、並び順の通りに子要素を自動でレイアウトしてくれます。

`Auto layout`はボタンのような小さなコンポーネントからページのレイアウトまで、様々な場面で大活躍してくれるのですが、「指定した通りにレイアウトする」という特性上、通知アイコンのバッジやドロップダウンといった、CSSで「position: absolute」を指定するようなオブジェクトを設置したい場合は`Auto layout`を解除するか、さらにFrameで囲う必要がありました。

しかし、`Auto layout`内のオブジェクトに「`Absolute position`」を指定することで、例外的に自由な位置に配置できるようになりました！

「`Absolute position`」は、右サイドバーの「Design」タブから設定することができます！

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/577501/e9ae4eaa-9c03-08d7-a7de-5314204ee768.png" />

### 4. 置き換えペーストができるようになった（`Command + Shift + R`）

こちらは[Figmaでよく使うコマンドリスト](https://qiita.com/kabechiyo13/items/467adc107bde2c07195c#%E5%85%A5%E3%82%8C%E6%9B%BF%E3%81%88%E3%81%A6%E3%83%9A%E3%83%BC%E3%82%B9%E3%83%88%E3%81%99%E3%82%8B)でも紹介したコマンドです。

`Command` + `Option` + `Shift` + `V`　または　`Command` + `Shift` + `R` で、コピーしたアイテムとペースト先のアイテムと入れ替えることができます。

これによって、今までは「コンポーネントをAからBにアップデートしたから置き換える」というときに「Aの下にBをペーストしてAを削除する」という手順で行っていたのが、「AにBを置き換えペーストする」だけで済むようになりました。

Figmaのプラグインの[Similayer](https://www.figma.com/community/plugin/735733267883397781/Similayer)で対象となるオブジェクトを一括選択して、`Command + Shift + R`で一括置き換えペーストの組み合わせがとても便利です。


### 5. コンポーネントプロパティに`Instance swap`を設定できるようになった

こちらも`Component`のプロパティのアップデートです！

Figmaの`Component`には「`Swap instans`」という機能があり、`Component`内に他の`Component`の`Instance`がある時に別の`Component`の`Instance`に変更することができます。

これによって、ボタンのアイコンを変更するなど、コンポーネントを自由度高く拡張することができます。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/577501/789ab6d1-6703-56dd-3095-4a5af8e46248.png" />

このままでも十分便利なのですが、今までは`Swap instans`を行いたいときは直接`Instance`を選択する必要がありました。

アップデートでプロパティに「Instance swap」を設定できるようになったことで、`Component`を選択するとあらかじめ「`Instance propaty`」設定された`Instance`が表示され、変更できるようになりました。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/577501/70f08af3-4d79-e2f4-0a52-cde9f078798c.png" />

これによって`Swap instans`がよりスムーズに行えるようになりました！

さらに、`Swap instans`を行いたい要素にプロパティを設定しておくことで、本来`Swap instance`を想定していない要素の無闇な置き換えも防ぐことができます。

[Instance swapプロパティについての公式ヘルプ・使い方はこちら](https://help.figma.com/hc/en-us/articles/5579474826519-Create-and-use-`Component`-properties#Instance_swap_property)


### 6. コンポーネントプロパティにTextを設定できるようになった

こちらも同じく`Component`に追加されたプロパティです。

以前まではレイヤー構造などによっては、`Variant`を切り替えた時に変更したラベルが失われてしまうことがありました。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/577501/251d8cfc-739e-7fb1-b269-a2881d9658d0.png" />

`Component`にTextのプロパティを追加し、適用したい文字列に設定することで、`Variant`を変更したり`Master component`を変更しても、文字列が維持されるようになりました！

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/577501/0743dadf-5a2f-52e3-4476-87712d556896.png" />

[テキストプロパティについての公式ヘルプ・使い方はこちら](https://help.figma.com/hc/en-us/articles/5579474826519-Create-and-use-`Component`-properties#Text_property)

### 7. ResourcesタブとWidgetが追加された

画面上部のツールバーに新たに「Resources」タブが追加され、`Component`sやPluginにアクセスしやすくなりました！

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/577501/d0fc1916-798f-ad7e-e269-b0dddb34ec9d.png" />

さらに「Widget」機能が追加され、Figmaファイル内に様々なコンテンツを埋め込めるようになりました！
こちらは6月29日にリリースされたばかりで私もまだ活用方法を模索中なのですが、Figma上でのコミュニケーションの可能性がより広がりそうです！

現在公開されているWidgetは[Figma communityのwidgetsページ](https://www.figma.com/community/widgets)で確認できます。

### 8. テキストのはみ出し部分を「...」で省略できるようになった

今まではコンポーネントでテキストが一定以上になったら省略記号を表示したいときに、手打ちで「...」と入力していました。

しかし、この方法だとFrameのサイズが変わった時などにテキストがはみ出したり余白ができてしまいます。
（ちょうどよく「...」で切れるテキストを作るのも地味に面倒です）

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/577501/8f6261d5-3cef-05d5-fe41-96bfeb6a9e4c.png" />

しかし、Text settingsに「`Truncate text`」が追加され、HeightをFixedにしてこのプロパティを選択することで、はみ出し部分を自動で省略記号で省略できるようになりました。

これによって、わざわざ手打ちで省略記号を打たなくてもよく、Frameのサイズが変わっても省略記号が意図した位置に表示できるようになりました！

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/577501/8e141a1c-e3c6-8285-7ec6-1d3cfe3880cb.png" />


### 9. 親に上がるショートカットが使えるようになった（`Shift + Enter`）

こちらも[Figmaでよく使うコマンドリスト](https://qiita.com/kabechiyo13/items/467adc107bde2c07195c#%E9%81%B8%E6%8A%9E%E3%81%97%E3%81%A6%E3%81%84%E3%82%8B%E3%82%AA%E3%83%96%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E3%81%AE%E8%A6%AA%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC%E3%82%92%E9%81%B8%E6%8A%9E%E3%81%99%E3%82%8B)でも紹介したコマンです。

子レイヤーに下がるコマンドの`Enter`と組み合わせるとキーボード操作だけでレイヤーを行き来できるのでとても便利です。

私はよくコンポーネントを選択したいときに、「どこか選択しやすい箇所をCommand + クリックで直接選択して一個上に移動する」のような使い方をします。

### 10. `Auto layout`の`Space between`にマイナスの値を設定できるようになった

今までは`Auto layout`内のアイテム間の`Space between`（CSSでいうgap）には0以上の値しか設定することができず、重なりのあるUIを表現したいときは`Auto layout`を使うことができませんでした。

今回のアップデートで`Space between`に負の値を設定できるようになり、重なりのあるUIにも`Auto layout`を使えるようになりました！

さらに、今までは`Auto layout`内のオブジェクトの重なり順は縦並びの時は上->下、横並びの時は右->左から変更できなかったのですが、重なり順を逆にすることもできるようになりました。

重なり順は、`Auto layout`のメニュー内の「`Canvas stacking`」から変更できます！

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/577501/d803de30-63a7-1b9c-4837-4d52a1989665.png" />