MENU
カテゴリー

【2022年版】AdobeXDで角丸図形を作る方法!

【2022年版】AdobeXDで角丸図形を作る方法!

takato(@n8takato)です!

XDで角丸の図形を作りたい

この記事では上記の課題に向けて作成しています。

XDでは角丸の図形を簡単に作成出来ます。

この記事を読んで角丸にする方法をマスターしましょう。

この記事を読むメリット

  • XDで角丸図形の作り方がわかる

この記事を書いた人

この記事を書いた僕はこんな人です!

  • 都内制作会社でwebデザイナーとして勤務
  • webデザイナー3年目
  • web制作現場で学んだことを発信している人
目次

XDで角丸図形を作る方法

早速XDで角丸図形を作る方法を説明します。

XDで角丸図形を作る手順

  1. 図形を作成する
  2. 図形の角を丸くする

図形を作成する

始めに図形を作成します。

XDの左側にあるメニューから図形を作成します。

今回は長方形を作成します。

①長方形ツールを選択する。②アートボード上に長方形を作成する。
長方形の作成

図形の角を丸くする

作成した図形を選択した状態で右側にある「すべての角丸に同じ半径を使用」を選択します。

図形を選択した状態で右側にある「すべての角丸に同じ半径を使用」を選択します。
「すべての角丸に同じ半径を使用」の選択

続いて「すべての角丸に同じ半径を使用」の右側にある数値を変更します。

初期設定は「0」となっています。

数値が増えれば増えるほど角が丸くなります。

①「すべての角丸に同じ半径を使用」の右側にある数値を増やす。②図形の角が丸くなる。
図形の角が丸くなる

一部の角を丸くする方法

XDでは一部の角を丸くすることも出来ます。

図形を選択した状態で「各角丸に異なる半径を使用」を選択します。

数値の変更箇所が4つ表示されます。

①「各角丸に異なる半径を使用」を選択します。②変更出来る数値が4つ表示されます。
「各角丸に異なる半径を使用」の選択

丸くしたい箇所の数値を増やすことで部分的に角を丸くすることが出来ます。

一部の数値だけ変更することで部分的に角丸が作成できる。
部分的に角が丸くなる

※左から「左上」「右上」「右下」「左下」の角を変更することが出来ます。時計回りで覚えてください。

部分的に角を丸くすることが出来ます。

XDでは簡単に角丸図形を作成出来る!

最後にまとめです。

XDで角丸図形を作る手順

  1. 図形を作成する
  2. 「すべての角丸に同じ半径を使用」または「各角丸に異なる半径を使用」で数値を調節する

上記の方法で図形の角を丸くすることが出来ます。

是非やってみてください。

XDに関する他の記事はこちら

あわせて読みたい
【2022年版】AdobeXDで文字を縦書きにする方法を紹介! XDで文字を縦書きにする方法を知りたい。 この記事は上記の課題に向けて作成しております。 現時点ではXDのデフォルト機能で文字を縦書きにする方法はありません。 その...
あわせて読みたい
【2022年版】AdobeXDで波線を作る方法を紹介! XDで波線を作る方法を知りたい この記事は上記の課題に向けて作成しています。 web制作をしていると波線を作ることがたまにあります。 僕も最近波線を作成しました。 そ...
あわせて読みたい
【2022年版】AdobeXDでボタンホバーを作成する方法! XDでボタンホバーを作成する方法を知りたい この記事は上記の課題に向けて作成しています。 XDはカーソルを合わせると変化するボタンホバーが簡単に作成出来ます。 XDで...
あわせて読みたい
【簡単】AdobeXDで点線を作る方法を紹介! XDで点線を作る方法を知りたい。 この記事では上記の課題に向けて作成しています。 XDでwebデザインを制作していると点線を活用する機会があります。 実はXDでは簡単に...
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次