【Adobe XD】飾り枠素材の作成②

2021年4月14日 16:09

こんにちは、シキラボのデザイナーyuhです。
前回に引き続き、飾り枠の作成方法について書いていきます。
今回作成するものはこちら。
ラインがパターンになっている枠の作成方法についてです。

以前紹介した内容を前提にしているので、まだ読んでいない方は
こちらをチェックしてみて下さい！

素材を用意する

最初に枠の素材を作成します。
角と縦横のライン、計3つのパーツを用意して、
Illustratorで作成してXDへ持っていきます。

各パーツをコンポーネント化したら、
前回と同様に縦横パーツの反転素材をステートで作成。
デザインによっては、反転素材は必要ない場合もありますので、
必要な場合に適宜追加して下さい。

枠の形にコンポーネントを配置してグループ化します。

その後は各パーツにレスポンシブの設定をするのですが、
前回と同じように設定してしまうと、パーツが伸びてしまいます。
今回はパーツのサイズを引き伸ばすだけだと形が崩れてしまうので、
パーツを繰り返すように配置しないといけません。

XDで繰り返す機能といえば…
そう、リピートグリッドです！

縦と横ラインの素材にリピートグリッドを適用します。
適用後はグリッドを一旦伸ばして、間隔が0になるよう調整。
ここまで終わったら、前回と同じようにレスポンシブ設定を行います。

これを縦横ライン全ての箇所に全て行って完成です！

ここまで読んでいただきありがとうございました！
一見複雑そうな素材を、どう作ればXDで活用出来るようになるかなーと
考えるのが最近楽しいです。
また何か記事に出来れば良いと思うので、見て頂ければ嬉しいです。

過去の記事

前回の記事

XDの記事

その他