こんにちは、コンスキです。
AdobeXDで何か図形を作ってから書き出そうと思ったら、レイヤーごとに別の画像として保存されてしまって困ったことはありませんか?
今回は複数のレイヤーの画像を1つの画像として書き出すときに注意する点を紹介します。
バラバラに保存されてしまう
まずはどんなことが問題なのかをはっきりさせておきましょう。
例えば次のような3つのレイヤーを書き出すとします。

3つのレイヤーを全て選択します。

Ctrl+Eまたはcommand+Eを押して、書き出し先のフォルダを選択して書き出します。

本当は書き出した後に次のような画像として保存されてほしいです。

しかし、ここまでの手順で書き出すとレイヤーごとに書き出されてしまいます。
長方形 1.jpg 長方形 2.jpg 長方形 3.jpg
対策方法
レイヤーごとに画像が書き出されるのを防ぐ方法があります。
それは、あらかじめ複数のレイヤーをグループ化しておくことです。
先ほどの例を使って説明します。
まずは、1つの画像として書き出したいレイヤーを全て選択します。

Ctrl+Gまたはcommand+Gを押してそれらのレイヤーをグループ化します。

この状態で書き出しをします。
Ctrl+Eまたはcommand+Eを押して書き出し先のフォルダを選択してください。
すると3つのレイヤーが1つの画像ファイルとして保存されています。

おわりに
僕も最初複数の画像ファイルに分かれてしまうことに困っていました。
選択しているレイヤーが複数であっても、1つの画像として保存されるのだと勘違いしてたんです。
AdobeXDで複数のレイヤーを1つの画像として保存するには、複数のレイヤーをグループ化しておく必要があると覚えておきましょう。
コメント