見出し画像

Figmaの新機能まとめ #Config 2022

Naoki Hashimoto

Figmaの大きなアップデートイベント Config 2022が開催されています。

僕自身業務でガツガツfigmaを使っているのですが、変更点は今まで気になっていたところを解消してくれる良いアップデートだなと思いました。

変更自体は figma公式のツイートのスレッド および それを訳している方 をみればざっとわかりますが、自分でも内容を噛み砕いて理解するために記事にまとめてみました。

内容は自分が気になった順に書いているので、番号が前後しているところがあります。

わかりやすく、柔軟に変更できるようにリデザインされたAuto Layout

今回の変更の目玉はAutoLayoutのリデザインでしょう。

Auto Layoutは便利ながらも、その機能性質上デザイン変更の自由度が低いところがありました。チームで「こうしたらどうかな？」と言われたときにAuto Layoutだとこの要素はここには置けないから一旦解除するか、みたいなことがありました。

今回の変更でそのあたりが解消されて、使いやすくなった印象です。

AutoLayout内への要素の絶対配置

「絶対配置にする」ボタンを押すと、要素がAutoLayoutフレーム内の決められた位置に配置できます。

バッジ的に要素をくっつけたい、でもAutoLayoutだとできない・・って悩みが解消されます。

余白の直接調整

キャンバスから要素間のマージンやパディングが直接変えられるようになりました。「ちょっと詰まってるかな？」と少し調整したい時に便利です😉

位置設定オプションの整理

リサイズパネルがポジションパネルに移動してすっきりしました。その分、レイヤー配置や余白設定が大きく表示されるようになりました。
正直、こっちを使うことのほうが多いので嬉しい変更です。

負のマージン

負のマージンがサポートされて、要素を重ね合わせられるようになりました。要素の重なり順も設定できます

レイヤー順の変更

あと、AutoLayoutでレイヤー順がキャンバスのそれと逆になる問題が解消されていたのは地味に嬉しいポイントです

取り上げなかったポイントも以下のビデオで解説されてるのでどうぞ（スクショもこのビデオやキーノートからの引用です）

コンポーネントのプロパティ設定がより使いやすくなり、シンプルに設計可能に

ボタンやナビゲーションバーのようなコンポーネントのバリエーションを、よりシンプルにかつ変更しやすくなったようです。

例えば以下のようにインスタンス上で簡単にアイコン（インスタンス）の変更や表示制御、ラベルの変更などができます。

キーノートではより複雑なカードコンポーネントもこれで制御しているような感じでした。

早速使ってみた人の声

Strokeを一面だけ設定できるようになった

iOSのTableViewのようなリストを作る時に、いままではいちいち下線を入れていたのが、フレームに下線だけつけるということができるようになったので、シンプルにデザインできるようになりました

みんなの視点を自分にあつめるスポットライト機能

見ている人の視点を自分の視点に固定することができるようになりました。デザインをレビューしてもらう時に、ここにいるよってマウスを振り回してアピールする必要がなくなったので地味に嬉しいです笑

Figjamウィジェットの追加

タスク管理系のウィジェットが追加されました。
うちはGithubを使っているので、選んだものをIssueにするウィジェットは便利そうな気もしました（認証がGithubになっているのでGithub Enterpriseで使えるのかは微妙そうですが）

バリアブルフォントのサポート

従来のフォントはウェイトや字幅ごとに異なるフォントになっているのが常でしたが、バリアブルフォントはそれを1つのファイルにして、外部から調整ができるようにしたものです。

今回、これがサポートされたことで太さやコンデンストみたいなものをfigma上から自由に変更できるようになりました。

代表的なフォントとしては源ノ角ゴシックや先日リリースされたRoboto Flexですね。

よく使うファイルをすぐに呼び出せるようになった

いままでもteamの中でPinしたりはできましたが、★することで左側のパネル（Favorite files）に直接出てくるようになりました。

teamを切り替えなくても必要なファイルを呼び出せるのは結構嬉しいですね。

リンク共有したプロトタイプにパスワード設定ができるようになった

外部でプロトタイプのユーザーテストをする時にあるとより安心ですね。

ダークモードに対応

私はダークモードを使ってないんですけど、嬉しい人はどのアプリも対応してほしいはずなので嬉しいはず・・

そのほかのアップデートポイント

デスクトップアプリのタブ周りが便利に

少し前からすでに使えてましたが地味によいアップデート

プロトタイプでのバウンスアニメーションの追加

ちょっとエモくなりましたね。

ブランチにレビューステータスを表示できるようになった

個人的にはデザインを新旧並べて比較したいタイプなのでブランチ機能は使ってないのですが、使うタイミングでは欲しい機能ではありますね。

アウトラインモードがより便利に

実はこの機能があったことに初めて気づいたので、ちょっと使ってみようと思いました・・（Commnad + Ctrl + Y）

キーボードショートカットが日本語キーボードなど国際キーボードにも対応

うちは英語キーボードだけど、日本語キーボードの人は気になっていた問題が解消されたはず・・

ウィジェットを作りやすくなる機能の追加

言われてみれば、ウィジェットもデザインから始まると思うので、Creatorにとっては良いアップデートな気がします

アップデートポイント雑感

全体として着実な機能のブラッシュアップが図られていて、機能を活用していた人なら嬉しいと思えるポイントが多かったです。

特に Auto Layout は利用の柔軟性が増して、デザインの初期段階でも使いやすくなりましたし、Component properties はデザイントークンをよりシンプルかつ多様に表現できるようになりました。

また、やや余談ですが、フロントエンド実装をちょくちょくやる身としては、figmaが実装時の考え方に近いデザインツールになってきたなという印象が強くなりました。

例えば、Component Propertiesはオブジェクト指向プログラミングにおけるオブジェクトの表現に近いものですし（そもそもMaster/Instanceという構造がそれですが）、Auto Layoutの絶対配置もCSSでカードにバッジを付けるときの実装感覚に近いものです。

こうしてデザイナーのデザイン感覚が実装者に近づくことで、「実装に疎いから実現ができないデザインをしてしまう」みたいなことが減っていくでしょうし、それはデザイナー・エンジニアのチームワークを考える上では重要な要素だろうと思います。

ということで長くなりましたが、お読みいただきありがとうございます😉

この記事が気に入ったらサポートをしてみませんか？