XDの便利な機能を使ってみよう2WEB2023年1月20日こんにちは。XD」について解説していきます。前回のブログでは・リピートグリッド・コンポーネントの2つの機能を解説させていただきました。XDの便利な機能を使ってみよう!今回は、要素を簡単に等間隔に並べられたり、ボタンなどを作成する際にとても便利な・スタック・パディング2つの機能をご紹介します!1.スタック例えばこのようなオブジェクトを横並びに等間隔に並べたい場合、いちいち1つ1つを調節して揃えていくのは面倒ですよね。そんなときにこのスタック機能がとても役立ちます。↓この機能を使用すると、あっという間に等間隔にさらにもう1クリックするだけで横位置も全てきれいに並びました。この間隔を保ったまま縦にも簡単に並び替えができます!もちろんこの間隔も希望の数値を入力すれば自動で広げることができます!間隔がバラついている要素はこのスタック機能でスッキリ簡単に整理整頓していきましょう!【スタックの使用方法】1オブジェクトを用意2そのオブジェクトをグループ化3そのオブジェクトを選択した状態で右の「スタック」をクリック4縦並びか横並びかを選択、希望の数値を入力とっても簡単ですね!私はコンテンツ毎の間隔を一気に揃えたいときに多用しています。あとは横並びのメニューなどが途中で1つ増えたり減ったりして間隔を調整しないといけなくなった時なども、この機能でパパっと並びなおしています。2.パディング次は、便利すぎてillustratorやPhotoshopにもあったらいいのに...と思ってしまう機能、パディングの機能をご紹介します。こんなよくあるボタン。このボタン内の文言を「詳しく見る」から「こちらをクリック」に変更したい場合、下の画像のように長くなった文言に合わせて、黒いオブジェクトも長くしなければいけません。同じ仕様にしたいボタンが複数あり、中に入る文言がそれぞれ違うとき、間隔をそれぞれまた調整しなければいけません。そんなときに使いたいのが、このパディングの機能です!パディングの機能を使えば、縦横上下の間隔を数値入力で簡単に設定でき、文字が増えても設定した間隔を保ったままオブジェクトを一緒に拡大してくれます!↑文字を変更すると自動で黒長丸部分も一緒に伸び縮みします!【パディングの使用方法】1オブジェクトを用意2そのオブジェクトをグループ化3そのオブジェクトを選択した状態で右の「パディング」をクリック4縦横上下、希望の数値を入力こちらもとても簡単です!スタックとパディングは近い位置にあるので覚えやすいと思います。↓スタックとパディングと有効活用すればこのようなページは簡単にできてしまいますね!XDはこのように作業の効率化に便利な機能がたくさんあります。私自身ももっとXDを有効に活用し、作業を効率化した時間でより良いデザインを産み出せるようにこれからも頑張ります!次回は更に一歩進んだ内容をご説明したいと思っているのでよければまたチェックしてみてください!最後まで読んでいただきありがとうございました!【その他デザインに関するブログ記事】デザイナーに必要なスキルとは?デザインにとって重要なこと季節を感じる色についてデザイナーってどんな仕事?前の記事へブログ一覧へ次の記事へ07historyラフデザインの歴史08memberラフメンバー09officeオフィス紹介10company会社概要contactお問い合わせサービスやお見積りのご相談を承っております。お気軽にお問い合わせください。サービスやお見積りのご相談を承っております。お気軽にお問い合わせください。