【adobe XD】一発で複数の写真を当て込む方法 | Dev Driven 開発・デザインチーム 【adobe XD】一発で複数の写真を当て込む方法 | 働くひとと組織の健康を創る iCARE

BLOG

【adobe XD】一発で複数の写真を当て込む方法

青木隆之
2020/10/07

一発で写真を入れ込む方法

お疲れ様です、どうもアオキタカユキです。

今回はデザインに写真を一発で入れ込む方法をご紹介いたします。UIって同じパターンを作成する場合が多いですよね。例えば不動産サイトの物件一覧でとかデザインは同じでも物件写真が違うものとか。同じ写真でも問題はないのですがどうせなら違う写真を入れ込んでおきたい。そうすることでデザインや情報のバランスが見えてきたりとなにかと判断できることはふえます。

昔は一枚一枚はめ込む作業をしておりました。まーめんどくさい作業です。やることでデザインのレベルはグッと上がるので渋々やっていた記憶があります。

しかし時代はかわって我らがXDがやってくれました。一発で複数の写真を入れ込んでくれる機能を作ってくれました。

まずはこのようなデザインをご用意

一発で写真を入れ込む方法

続いてリピートグリットで同じパターンのデザインを作成

入れ込みたい写真をもってきます。

ドラッグ&ドロップで該当箇所に当て込む

見事反映されました!

XDはUIに特化したツールなのでこういうニッチな機能を用意してくれてます!効率的にUIを作成してスピーディーにアウトプットしていきましょう!