UIデザインツール「Figma」 2018年7月以降のアップデートまとめ
吉川 奈美
2017年にUIデザインツール「Figma」をプロジェクトに取り入れてから、早1年半。
その間、Adobe XD（以下、XD）の勢いはさらに増し、勉強会やセミナーで聞くところによると、非デザイナーの方のXD使用率も増えているようです。さて、Figmaも今日までアップデートを続け、さまざまな機能が強化されて、いっそう柔軟になりました。
2018年6月に実施された「Figma3.0」の主なアップデート内容は、次の3点でした。
- プロトタイピング機能の追加・改善
- スタイル機能の大幅な拡充
- 組織やチームで共同作業するための管理機能とセキュリティの強化
すでにインターネット上に、これらのまとめ記事がいくつかあります。ここからは、それ以降に実施されたアップデートにふれていきます。*
＊すべてのアップデート内容の紹介でなく、「よくぞ対応してくれた！」と私が感じた点を挙げています。
＊アップデート情報は、2019年2月18日時点のFigma公式Webサイトをもとにしています。
2018年7月以降で気になったFigmaのアップデート
1. スマートセレクション
キャンバス上に整列する2つ以上のオブジェクトの配置や間隔を簡単に調整する機能です。Figma3.0以降、ディレクターにとって最も利便性の高いアップデートの一つではないでしょうか。
XDのリピートグリッドと同じ操作感の機能もあります。個人的な印象では、XDのリピートグリッドは、オブジェクトを「複製して」効率的に操作するための機能。比較すると、Figmaのスマートセレクションはその名の通り、「すでに作成した」オブジェクトから選んで効率的に操作することに特化した機能だととらえました。
使用イメージ：
■オブジェクトの間隔を調整する
オブジェクトの間隔が、ハンドル操作によって直感的に一括で変更できます（ピンクの部分）。
■オブジェクトを並べる
オブジェクトのピンクの●をドラッグし、「Menu2」を「Menu3」の場所に移動すると、自動的に「Menu3」と入れ替わります。
■オブジェクトの間隔を調整する
スマートセレクションで選択後、オブジェクトの大きさを調整できます（icon_Bの部分）。
大きさを調整した後も、スマートセレクションは継続されています。
2. Tidy Up
ざっくり言うと、「ばらばらに置かれたオブジェクトをうまい具合に整列してくれる」機能。Tidy Upでオブジェクトを整列し、先ほどのスマートセレクションでさらにオブジェクトを操作――といった使い方をすると、作業効率がよいです。
3. その他ネタ
Community Resources Hub
入門向けのチュートリアルビデオ、アイコン・UIキットや拡張機能などが一箇所にまとまったライブラリです。今までもFigmaのオフィシャルブログ で、各機能の情報は紹介されていたものの、TwitterやFacebookの公式アカウントをフォローしていないと、更新に気づかないことがありました。こうして一箇所にまとまったライブラリができると、「こんなものないかな？」と思ったとき、すぐに探せて助かります。
ショートカットキー一覧のUI変更
正確には2018年10月以前のリリースのようですが、うれしい改善ポイントだったので、ピックアップしました。
以前の一覧は、作業画面にオーバーレイで表示され、作業画面を見ながら一覧画面も参照することはできませんでした。この変更により、作業画面下部に一覧がパネルで表示されるようになりました。操作に慣れないうちはパネル表示したまま作業し、分からない操作が出てきたらキー操作を探せます。使用したことのあるショートカットキーは青色で表示され、自分のキー使用の偏りが一目瞭然。もっとショートカットを使おう！
フォントフォールバック
フォントフォールバックとは、使用しているフォントにない文字が指定された場合、それを持っている別のフォントで代替して表示する仕組みです。この機能が実装される以前は、表示したい文字に合わせて、テキストボックスのフォントを選び直す必要がありました。地味ながらも、格段に便利になったポイントだと思います。
まだまだFigmaも
プロジェクトでXDを使用している人が社内に多いため、ファイル共有のしやすさを理由に、私自身も最近、XDを使う機会が増えてきました。並行してまだまだFigmaも使っていますので、これからも引き続き動向を追っていきます。そして、いつかXDファイルとの互換性がサポートされますように、願っています……
過去記事
ディレクターがUIデザインツール「Figma」をプロジェクトで使ってみた
Figma公式サイト（英語）
Figma: the collaborative interface design tool.
《関連サービス》
Webサイト設計・構築
ユーザーニーズの把握をはじめ、Webの主管部署や関係部署との調整やその後の運用も考慮し、設計・構築のお手伝いをいたします。
