スポイトツールを使う - Adobe XDのチュートリアル

このレッスンでは、 スポイトツールの使用方法について 説明します。 XD 独特の挙動を理解し、 正確に活用しましょう。 教材として エクササイズファイルのフォルダーにある 04 フォルダーの中の 04_02.xd を使います。 まず１枚目のアートボードの左上にある この角丸長方形の塗り、 今薄めのグレーですが、 この色を右の縁の水色を スポイトツールで吸い取って こちらの角丸長方形の塗りの色を 水色に変更する ということをしたいと思います。 角丸長方形を選択ツールでクリックして 選択します。 プロパティインスペクタの 「塗り」の右にある スポイトツールをクリックします。 スポイトツールに切り替わりました。 円の水色の上でクリックします。 そうすると塗りに 水色が反映されました。 続いてこの角丸長方形の線の色、 今濃い目のグレーですが、 この線の色を スポイトツールを使って 変更したいと思います。 角丸長方形を選択している状態で、 線の右にある スポイトツールをクリックします。 右の上から２つ目の ピンクの円の上でクリックします。 ここが Illustrator と 挙動が違うので、 違和感を感じる方も いらっしゃるかもしれません。 Illustrator のスポイトツールは 塗りの色は塗りに、 線の色は線に 反映するという挙動ですが、 XD はスポイトツールで クリックした地点の色を それが塗りか線かにかかわらず 吸い取って反映する という挙動になります。 なので今回は クリックした地点が ピンクだったので 線の色に塗りの色が反映されました。 続いて今度は 円のオレンジ色の線の色を 角丸長方形の 塗りに反映させるということを してみましょう。 角丸長方形を選択し、 変更したいのは 塗りなので、 「塗り」の横にある スポイトツールをクリックします。 そして円の線の色、 オレンジの上でクリックしましょう。 そうすると、 円の線の色のオレンジを 角丸長方形の塗りに 反映するということができました。 もうひとつ Illustrator と挙動が違う点があります。 ここに塗りが緑色の円を 用意してあります。 緑色の円を選択し、 「アピアランス」の「不透明度」を 50%に下げましょう。 スライダーをドラッグするか、 直接 50 と入力します。…