Home
ウェブ制作
ウェブデザイン
ウェブデザイン

Figma Config 2022で大幅アップデート 新機能を全てまとめてみた

 

チームでの共同デザインプロジェクトに最適なツールとして呼び声の高い、デザインアプリ Figma（フィグマ）。

 

はじめてでも迷わない簡単なFigmaの使いかたはもちろん、用途に合わせて自分好みにアプリの使いやすさを便利プラグインも人気の理由でしょう。

 

先日、Figmaのアップデートイベント Config 2022 が開催され、数多くの新機能が追加、発表されました。これまでFigmaによるデザインで気になっていた多くの点を解消してくれる大型アップデート。

 

今回は、Figmaに追加された新機能について詳しくみていきましょう。

 


コンテンツ目次

 

1. ダークモードの導入

 

今回のアップデートは、「ダークモード」がデスクトップ版およびWeb版でそれぞれ選択可能となり、システム設定に合わせたテーマの切り替えにも対応しました。

 

Figma ダークモードへの変更方法：

  1. Figmaデザインファイルをどれでも良いので開きます。
  2. ツールバー左上にある「Figmaロゴ」をクリック
  3. 環境設定（Preferences）>テーマ（Themes）に進む
  4. テーマ一覧からオプションを選択すれば完了

Figmaデザインファイルとブラウザが、選択したテーマカラーにリアルタイムで変更されます。

 

 

2. より使いやすくなった Auto Layout

 

今回のアップデートの目玉と言えるのが、より柔軟で使いやすくなったAuto Layout機能。

  1. プロパティパネルのUIデザインのアップデート
  2. 余白などをカンバスから直接調整、コントロールできるように
  3. 絶対配置（Absolute Positioning）が可能に
  4. 要素が重なり合うネガティブスペースの適用ができるように

 
余白やマージンをカンバスから直接調整

プロパティパネルではなく、キャンバスからAuto Layoutの要素間のマージンやパディングを、ドラッグで直接変更できるように。直感的に利用できて便利。

 

また、お互いの要素が重なり合う「ネガティブ・スペース（Negative Space）」ができるようになりました。

 

 

絶対配置（Absolute Positioning）が可能に

たとえばアイコンにバッジなどの要素を追加したいけど、Auto Layout で適用できない、そんなかゆいところに手が届く便利なアップデート。

 

 

3. コンポーネントのプロパティ

 

入力するテキストを組み込んだり、Boolean値の設定、インスタンスのカスタマイズがコンポーネントに追加されました。デザインシステムを簡素化し、よりスムーズなデベロッパー向けハンドオフを作成できます。

 

特にチーム間でプロジェクトを進めるとき、一貫性をもたせるのに役立つBoolean値。ここでは、画像表示をトグルで切り替えできます。

 

 

 

4. 他のユーザーに追尾してもらうスポットライト機能

 

この機能が追加されたことで、デザインレビューを複数人で行うときに、「ついてきてますか？」とマウスを振らなくてもアピールできるようになりました。

 

どのファイルでも自分にスポットライトを当てるだけで、チーム全員が同じ部分を見ることができます。FigmaとFigjam、どちらでも利用可能。

 

 

5. Figjam ウィジェットの追加

 

チーム間でのタスク管理が捗る便利ウィジェットが追加されました。@Githubは利用しているユーザーも多いので、よりユニークな使いかたができるようになるかも。

 

 

6. 可変フォントが利用可能に

 

Figmaでは、ひとつのフォントファイルであらゆるスタイルが収録された可変フォントが利用可能になりました。

 

文字ウェイトや文字間、傾きなどをスライダーをつかって、手軽に調整できるようになっています。英語フォントに比べてまだ数は少ないですが、日本語フォントにもきちんと対応しています。ここでは源ノ角ゴシックをチョイス。

 

先日リリースされたRoboto Flexも利用できます。

 

 

 

7. ポヨンとしたバネのようなスプリングアニメーションの追加

 

プロトタイプのトランジションアニメーションを、より自然でスムーズにできます。

 

スマートアニメーションにバネのような自然なバウンス、動きが設定できるようになりまりました。「Gentle（やさしい）」、「Quick（速く）」、「Bouncy（バウンス）」などの新しいプリセットから選択できます。

 

 

8. ストローク線を一面ずつ設定できるように

 

これまでは、ドロップシャドウをつかった裏技テクニックで表現していたストローク線も、自由にカスタマイズできるようになり、リスト間に下線を追加するのもより手軽でシンプルとなりました。

 

 

この他の注目アップデートポイントまとめ

 

この他にも、コミュニティーで要望の多かった機能が追加、改善され多数リリースされています。

 

9. ブランチ機能（有料プランのみ）にレビューステータスが表示できるように

レビュー中やレビュー済み、マージ済み、修正提案なといったステータスを追加表示できるようになりました。

 

 

10.アウトラインモード機能のアップデート

非表示にしているオブジェクトの表示/選択ができる他、X線を通して見ているような要素の全体像をすばやく家人し、編集をより高速化できます。

 

 

11. 新しいインターナショナル向けキーボードショートカットに対応

日本語キーボードにも対応したことで、「¥」「゛」等を使ったかな入力キーボードでショートカットが入力できるようになりました。

 

 

12. 共有したプロトタイプにパスワード設定が可能に

他のチームやクライアントと共有したプロトタイプのリンクにパスワード設定ができるようになり、外部を気にすことなより安心に。

 

 

13. よく利用する「お気に入り」ファイルを瞬時に呼び出し

星🌟マークをつけておけば、いつでもお気に入りのファイルを呼び出すことができる、地味に便利な機能が追加されました。

 

 

14. デスクトップアプリのタブ周りの使いやすさアップ

タブを左側に固定、ピンしたり、タブをドラッグしてウィンドウを開くなど、より直感的に作業を進めることができる機能もアップデート。

 

 

15. ウィジェットコード変換ジェネレーター

新しいプラグインを使えば、Figma APIやReactのベテランプログラマーでなくても、ボタンをクリックするだけでデザインをウィジェットコードに変換できます。詳しい使いかたドキュメントもアップデートされています。

 

 

Figmaの基本の使いかたからプロトタイプ作成まで、詳しく紹介した基本ガイドも参考にどうぞ。

はじめてのFigma使い方ガイド 基本からプロトタイプ共有まで完全デザイン【2022年版】

 

Figmaのプラグインをうまく活用して、自分好みの使い心地を追求してみても良いでしょう。

Figmaを最強デザインツールにする便利な無料プラグイン、ツールまとめ

 

Related