XD にトグルステートが追加されたので触ってみる
こんにちは。
アプデ頻度の早いXDと、成長のスピードを競っている新卒デザイナー、櫻田です。（言うだけタダ）
脅威のアップデートスピード、XD
Adobeから出ているプロトタイピングツール、XD。
感覚的に使いやすく、プロトタイプに特化した機能を備えています。
そんなXDですが驚異のアップデート速度で知られています。
同じくAdobeのIllustratorは1987年にリリースされ、2021年現在v 25である一方、XDは2017年の10月にリリースされてからわずか4年ほどでv 40が発表されています（もちろん両ツールとも細かいアップデートはされていますが）
余談ですが、この開発スピードは従来のAdobeらしからぬ開発フローによるものだそうです。従来の伝統的なAdobeの開発フロードでは最初に経営陣のGOサインをもらい、って意的なリサーチを経て要件を完璧に定義し、実装してからリリースしてきましたが、XDでは社内外のフィードバックを得て機能を載せていくスタイルによってスピーディーな開発を可能にしているとのこと。
正式リリースされる前の古い記事ですが、XDのツールとしての精神が見えて興味深いインタビューです↓
Adobe XDはUIデザインツール戦国時代を制するか？ 次期機能をこっそり聞いた – WPJ
https://www.webprofessional.jp/adobe-xd-new-feature/
さて、今回は2021年5月にリリースされた新機能、「トグルステート」を使ってみようと思います！
XD v40の新機能とは？
その前に、2021年5月10日にリリースされたXD v40の機能を見てみましょう。XD v40では主に6つの新機能があります。
New Product Updates & Latest Version Features | Adobe XD
01｜アートボードのクイックシェア
デザインカンバスから直接、選択したアートボードをすばやく共有する新しい方法を追加
02｜共同編集のためのライブカーソル機能
共同編集で、チームメイトがデザインファイルのどの場所で作業しているかを確認できる「ライブカーソル」機能を追加
03｜設定メニュー
macOSとWindowsの両方でXDをカスタマイズできる新しい「環境設定」メニュー
04｜プラグインの刷新
XDプラグインを一元管理するための新しい「ホーム」、ならびにWorkfront、Asana、Monday.comと統合するための新しいプラグインを追加
05｜M1チップ搭載デバイス向けXD（ベータ版）
macOSアプリでのAppleシリコンのネイティブサポートをベータ版として提供開始。このベータ版アプリは、M1チップを搭載したデバイスを持つmacOSユーザーのみが利用できます
06｜トグルステート
コンポーネントのインタラクティブなトグル状態を即座に作成する新しいショートカットの追加
参照↓
Adobe XDの最新版に、ライブカーソルなど新しいコラボレーション機能が登場
https://blog.adobe.com/jp/publish/2021/05/11/cc-new-ways-to-collaborate-adobe-xd.html#gs.1k6mwt
トグルボタンとは？
トグルボタンとは、押すとON/OFFが入れ替わるボタンのことです。
UIやWebにおいては、設定画面などによく使われます。
iOSの設定画面
新機能トグルステートを使ってみる
トグルステートでは、下の画像のような押すとONとOFFが入れ替わる表示を簡単に作ることができます。
01｜長方形を作る
先ほどのiOSのトグルを参考に色をつけた長方形を作成します
02｜角丸をつける
途端にやわらかグラフィックになりましたね。かわいい。
03｜中の丸を作る
この丸が動くことで色に頼らずON/OFFを判断することができます。
04｜ コンポーネントにする
コンポーネントにしたいアイテムを選択し、画面右側のプロパティインスペクターからコンポーネントを新規作成します。
「初期設定のステート」の横の＋ボタンを押すと「新規ステート」「ホバーステート」「トグルステート」が表示されるので、今回はトグルステートを選択します。
05｜ONの状態を作る
「コンポーネント」画面から、「トグルステート」を選択し、ONの状態を作ります。
背景色を緑色にし、丸のボタンを右側に移動させます。
コンポーネントから再び初期状態に戻し、ONとOFFが切り替えられればOKです！
06 ｜完成！
完成したら、実際にプレビュー画面で使ってみましょう。
うまくできていればこのようにボタンを押すとONとOFFが切り替わるボタンができます。
さいごに
正直XDを使い慣れている人なら、「今までのコンポーネント機能とそんなに変わらないのでは…?」と思う方もいるかもしれません。
そうなんです。実際、トグルボタンは今までのXDでも作れたし、ユーザーにとって目新しいものではありません。
しかしながらUIでは欠かせないトグルボタン、超簡単に作成できるショートカットができたのはなかなか便利なのでは？
新機能もバンバン使いこなして、良いXDライフを！
