AdobeXDから、マインドマップや付箋、カスタマージャーニーマップなど多くのテンプレートやエレメントを備えたリアルタイム共同編集機能プラグインがリリースされました。
新型コロナウィルス感染症(COVID-19)にて在宅勤務を強いられたAdobeデザインチーム（International Designチーム）が会議やディスカッションを円滑に行うために開発したとのことです。

AdobeXD「Whiteboard」プラグインのインストール

XDを起動し、プラグインから「Whiteboard」を検索してクリックします。

ポップアップが表示されるので、「インストール」をクリックします。

AdobeXD「Whiteboard」プラグインを使ってみる

左サイドバーのプラグインアイコンをクリックして「Whiteboard」をクリックします。

「Whiteboard」が起動し、サイドバーに「テンプレート」「オブジェクト」「スケッチ」が表示されます。

ファイルは適当な名前をつけてクラウドドキュメントとして保存します。

ドキュメントを共有して作業する場合はチームメンバーのIDかメールアドレスを入力して「共同編集を有効にする」をクリックします。

豊富なテンプレートが揃っています。
オンライン作図ツール「CACOO」のようなイメージです。

ブレーンストーミング、デバイスモックアップ用のワイヤーフレームスケッチ、マインドマップ含めたフローチャート図などが用意されています。

ポストイットや感情アイコン、ノートブック、フローチャートのコネクターやボックスなどのオブジェクトが使えます。もちろんライブラリからオリジナルのオブジェクトを持ってくることも可能です。

マウスやペンタブ、iPadのSidecar等を利用してスケッチや注釈を書き込むことができます。
スケッチタブを押し、アートボードを選択します。

「書き始めて下さい」をクリックすると指定したアートボードがポップアップします。

書き込んだ先はベジェ曲線に変換される様子です。

リアルタイムで利用する場合はZoomやTeams、Slack等のコミュニケーションツールの補助としても活躍すると思います。

投稿 AdobeXD:テレワーク同士のホワイトボードプラグインリリース-一人でも便利！ は studioDoghands に最初に表示されました。

Adobe XDでページ内リンク(アンカーリンク)を設定してみます。
以前から要望の多かった機能のひとつで、2020年3月アップデートで実装されました。

アンカーリンクは主に縦長のサイトで、特定の位置にユーザーを導くためのリンクのひとつで、シングルページLPでよく見かけます。
殆どの場合、スムーススクロール（するすると上下に動くスクロール）効果と共に使われます。

Adobe XDでページ内リンクを設定

「デザインモード」の「レイヤー」タブで作業を行います。

適当に縦長のサンプルを作ります。

「予約する」ボタンから

同じページの「予約フォーム」までリンクしてみます。

Adobe XDでページ内リンクを設定

モードを「デザイン」から「プロトタイプ」に切り替えます。
「予約する」ボタンを選択すると青い矢印のハンドルが表示されます。XDではこのハンドルをドラッグして表示されるワイヤーで画面遷移の指定を行います。

ハンドルをドラッグしてワイヤーを引き出します。

そのまま下の「予約フォーム」に接続します。

これでページ内リンクが貼られました。

右上の「デスクトッププレビュー」ボタンを押して確認してみます。

「予約する」ボタンを押すと

「予約フォーム」までスクロールされます。

ページ内リンクの設定項目

ページ内スクロールにはいくつか設定可能な項目があります。

ワイヤーを選択した状態で右側の「プロパティインスペクター」を確認してみます。

トリガーの設定

「タップ」「キーとゲームパッド」「音声」が選択可能です。
通常は「タップ」のままで良いでしょう。

Y-オフセットの設定

固定ヘッダーにリンク先のテキストが隠れてしまう場合に利用します。
例えば-70とすると、リンク先テキストの70px上部でスクロールが停止します。

アニメーション設定

イージングと速度が設定できます。
「イーズアウト」がだんだん早く、「イーズイン」がだんだん遅く、です。

Adobe XDでページ内リンクを設定まとめ

LPサイトやカテゴリーの多いアーカイブページのモックアップ制作に便利な機能です。
操作は簡単なので、ぜひ使ってみましょう。

関連記事
Adobe XDの新機能『CSS書き出し』を使ってみよう

投稿 Adobe XDでページ内リンクを設定してみよう は studioDoghands に最初に表示されました。

Adobe XD、1月アップデートの機能のひとつ、「コンテンツに応じたレイアウト」（CONTENT-AWARE LAYOUT）を使ってみます。
ウェブサイトやアプリのプロトタイプやモックアップの制作では、ちょっとした変更が他の要素に影響し、いつしか面倒な作業になってしまうことがよくあります。
例えば、仮で入れておいたボタンのテキストを変更すると妙に空白が目立ったり、文字がボタンからはみ出してしまったり。
自社内での確認であれば、コーディングの時点で解消されるので無視しても良いのですが、他人が確認する場合はちょっと修正しておきたいものです。
そんなときに便利な機能です。

関連記事:Adobe XDの新機能『CSS書き出し』を使ってみよう

Adobe XDの新機能「コンテンツに応じたレイアウト」をざっくりと体感

「今すぐ予約」ボタンを配置したモックアップ。
この「今すぐ予約」ボタンのラベル（テキスト）を「今すぐ会議室を予約」に変更してみます。

今までは

テキストがはみ出るので、ボタンのサイズを調整しなければいけません。

新機能「コンテンツに応じたレイアウト」なら

文字に合わせてボタンが勝手に伸び縮みしてくれます。

Adobe XDの新機能「コンテンツに応じたレイアウト」を使ってみる

使い方はとても簡単です。

まずボタンをグループ化、またはコンポーネント化します。

右側のプロパティインスペクターに今回新たに追加された「パディング」のトグルスイッチが表示されるのでクリックして適用します。

ちなみに2つの矩形ボタンは、右側が一括パディング指定、左側が上下左右個別指定となります。

テキストを変更したり、コンポーネント内にアイコンを追加しても、ボタンサイズが指定したパディングに応じて自動で変化してくれます。

公式チュートリアルはこちら

投稿 Adobe XD新機能:テキストを変えるとボタンサイズも自動で変化！「コンテンツに応じたレイアウト」を使ってみる は studioDoghands に最初に表示されました。

SNSやスタッフ紹介ページのデザインをしていると、モックアップやたたき用の顔写真が欲しいことがあります。
ダミー画像を用意しておくのが良いのですが、それよりも早いプラグインを紹介します。

Adobe XDプラグイン『This Person Does Not Exist』で顔写真を用意しよう

このプラグインは、「存在しない人物」の顔写真を自動で生成するウェブサービスhttps://thispersondoesnotexist.comからランダムに顔写真を取得、XDで選択中のオブジェクトに反映してくれる機能を持ちます。

https://thispersondoesnotexist.com
リロードする度に顔写真が生成されます。

サービス紹介記事。(https://www.producthunt.com/posts/this-person-does-not-exist)

プラグインのインストール

それでは、早速インストールしてみましょう。
プラグイン→プラグインを見つけるで開くポップアップ画面で『This Person Does Not Exist』を検索してインストールします。

『This Person Does Not Exist』プラグインを使ってみる

使い方はとても簡単です。
まず、適当なアートボードを用意しましょう。
今回はスタッフ紹介ページ的なレイアウトを作成してみます。

顔写真を埋め込みたいオブジェクト（矩形等）を選択して

プラグインを実行します。

すると数秒で顔写真が埋め込まれます！

もちろん続けて実行可能です。

人種や性別などの指定はありませんが、ボタンひとつでどんどん顔写真を反映できる便利なプラグインです。

投稿 Adobe XD:モックアップ作成時に秒速で顔写真を用意しよう！ は studioDoghands に最初に表示されました。

先日のADOBE XDのアップデートで地味ながらかなり便利になった機能のひとつ『コンポーネントバインドの改善』。
これは新規で利用する分には何も意識する事無く、直感的な範囲でパーツをコンポーネント化してくれる機能です。

『コンポーネントバインドの改善』をチェック

効果の適用時の問題の修正

気がついたらアップデートしてしまっていたので、以前のバージョンの再現はできませんが、アップデート前は下記のようにシャドウやグローエフェクトを使ったパーツをコンポーネント化した場合、それらのエフェクト込みで枠（コンポーネントバインド）が設定されました。これはボタンの整列や配置に不便です。

アップデート後は、シャドウ付きパーツをコンポーネント化した場合でも、きちんと本体にのみ枠が設定されます。

もし、以前のバージョンで作成したコンポーネントの枠を修正したい場合は『境界をコンテンツに合わせる』をクリックすると反映されます。

オブジェクトの再編成

また、下のようなコンポーネントがあったとして、もし「CheckBox3」を①から②の場所へ移動したいと思った場合、コンポーネントの外にパーツを移動すると、消える（コンポーネントの枠をクリックオフ、つまり別のパーツの編集に入る場合など）現象がありました。

アップデート後は、コンポーネント内のパーツを移動しても、新しいコンポーネントの境界線が自動的に適用されます。

移動中

移動後。パーツに合わせてぴったりとコンポーネントバインドが再定義されています。

旧バージョンで作成されたコンポーネントで同様の症状が出ている場合は『境界をコンテンツに合わせる』で修正することが可能です。

投稿 Adobe XDのアップデート『コンポーネントバインドの改善』を試してみる は studioDoghands に最初に表示されました。

AdobeのUX/UIデザインソフト‎「XD」。先日のアップデートで追加された「CSSコード自動生成」を試してみました。
プラグインの利用を含め、SketchやFigmaなどの類型ソフト/サービスでは実装されている機能です。
ローカルのソフト内ではCSSは生成されず、共有用にクラウド上に書き出したファイルを表示した際にこの機能が使えます。

関連記事:Adobe XD新機能:テキストを変えるとボタンサイズも自動で変化！「コンテンツに応じたレイアウト」を使ってみる

試してみる

使い方はとても簡単ですが、いくつか注意点があります。

なにか作る

適当にボタンを作ってみます。「すいか」ボタンを作ってみました。

共有リンク書き出し

共有用のリンクを書き出してみます。『開発用に共有』を選択しないとCSSが書き出されません。

また、書き出し先は『Web』である事が必要です。iOSやAndroidではだめです。私はずっと書き出し先をiOSにしていたのでここではまりました。

CSSの確認

生成された共有リンクをブラウザで確認します。CSSが生成されました！

ソフト内で確認したり、IdやClassの登録、SASSでの書き出しオプションなどいろいろと要望は出てくるでしょうが、そのうち実装される気がします。（根拠なし）

投稿 Adobe XDの新機能『CSS書き出し』を使ってみよう は studioDoghands に最初に表示されました。