Figmaで自由な図形の作成

基本図形に慣れてきたら、次は 自由な図形 を作れるようになる練習です。

Figmaには、長方形・楕円・多角形・星などの図形に対し、“形を自由にゆがませる・部分的に変える” ための便利な機能があります。ここでは、UIデザインとアイコン制作でよく使う機能をまとめて紹介します。

Contents

新しいフレームを作成

横スクロールでも可能ですが、スペースキーを押したままマウスをドラッグすると、マウスが手の形になり、画面をずらすことができます。右側の空いたところに最初より広めの新しいフレーム（1000px * 1000pxぐらい)を作成しておきましょう。

長方形ツールを使って、200px * 200pxの正方形を描いておきます。塗りは任意です。描いた長方形を選択し、右側のプロパティパネルの外見＞角の半径で角を丸くする（radius）を設定できます。
角の半径横の「個別の角」をクリックすると、別々の半径を指定できます。

楕円ツールを使って、200px * 200pxの正円を描いておきます。塗りは任意です。描いた円を選択しすると、円の中に○(円弧）をクリックしたまま動かすと円弧になります。その時の動いた角度がスイープとなります。

上の円をコピーして使います。Altキーもしくはoptionキーを押しながらコピードラッグするとコピーができます。
円弧の開始位置・比率・終了位置を変えてみましょう。

円弧は、単純な円の変形だけでなく UI の表現でよく使われます。

特に スイープ（角度の量） を調整できる点は、他のツールよりも柔軟です。

多角形ツールを使って、200px * 200pxの三角形を描いておきます。塗りは任意です。多角形ツールを使うと、三角形〜十角形以上まで自由に作れますので、外見＞数から五角形に変更してみましょう。最大60角形まで可能です。

数を４とし、角の半径を25にします。そのあと、同じ図形をコピーし、大きさを120px * 120pxにし、中央に重ねるように配置します。塗りは白とし、角の半径は17に変更します。

星ツールを使って、200px * 200pxの星を描いておきます。塗りは任意です。星ツールは、多角形よりも細かい設定ができます。比率を変えることで、ふっくらとした印象の星に変わります。また多角形と同様に個数も変えることができます。

以下を作成してみましょう。色は任意です。

Figmaのパワフルな図形合成機能が ブール演算 です。複数の図形を選択し、「合体したり、切り抜いたり」が可能です。

両方とも、250px*250pxの四角形・正円を描いておきます。色は任意です。選択ツールで囲むようにドラッグするか、shiftキーを押しながらクリックすると２つの図形が選択できます。（１つではできませんので、必ず複数選択します）右側のプロパティパネルのブール演算

ブール演算されたあとも図形の上をダブルクリックして選択できるので、あとか図形の位置や形を変えたり、増やしたりすることは可能です。統合すると、ダブルクリックして個別選択はできなくなります。

ミニ課題：楕円・円弧・合体を使って下記のイラストを描いてみましょう。サイズや色は任意です。