Figmaで画面を作っていると、
「この2つをきれいに揃えたい」
「ボタン同士の間隔を同じにしたい」
「左右の位置を揃えたい」
という場面が頻繁に出てきます。
こうしたときに使うのが、
Alignment（整列）とSpacing（間隔）です。
Figmaでデザインをする場合、
Objectを適当に配置するだけでは、どうしても
画面が不揃いになります。
逆に、
位置や間隔に一定のルールを持たせるだけで、かなり整った画面になります。
今回は、Figmaの「並べる」という操作を通して、
Object同士の
位置関係を考えてみます。
Alignmentとは？
Alignmentは、日本語では「整列」です。
複数のObjectを選択して、同じ位置に揃える操作です。
例えば、3つのRectangleがバラバラに置かれているとします。
Figmaでは複数のObjectを選択すると、右側のプロパティから整列操作を行えます。
選択されたObjectの上下位置をそろえるボタンを押してみます。
綺麗に配置できましたね。
同じ手順で、左右を揃えたり、
右、左、天、地に沿って揃えたりもできます。
サンプル
タイトル、説明文、ボタンが配置されている、Frameを想定して、Alignmentを使って整列させてみたいと思います。
作る時は適当にササッと置いていて構いません。
右側の「位置」の「左揃え」ボタンを押すと、一番左の座標Objectに合わせて、全部のObjectが整列します。
あとは、まとめて、いい感じの場所に移動させれば、綺麗に整った表示になります。
Spacingとは
また、一番右のボタンは、「均等配置」するボタンで、flexなどの項目を等間隔に並べる場合に使えます。
次の図のように、Objectを数個コピーして、適当に置いてある状態でも。
整列させたいObjectを全部選択して、
右パネルの、「縦揃え」を選択して、「均等配置」を選択すると、ご覧の通り。
等間隔に並べる作業は、デザインをする際には頻繁に行うと思うので、この手順は覚えておくと効率的に作業ができますね。
デザインは「位置関係」と「余白」で決まる
デザインがよくわからない人が作るホームページは、
文字がギッシリと、敷き詰められてしまいます。
少し広くとりすぎたぐらいの余白を置けるデザインが作れるようになると、
落ち着いたデザインとして、安定した見栄えになるというのは、個人的な価値観ですが、
あながちハズレていないと思いますよ。
あと、余白をとるだけではなく、どこに配置するかという位置決めも、色選びと同じぐらい重要なので、
デザインがまだまだ苦手という人は、整ったホームページなどをみて、位置と余白を学習してみるといいでしょう。
あとがき
今回は、整列と感覚についての操作方法を学習しましたが、
複数配置した、ObjectやFrameなどの端が揃うだけで、
見た目が安定するというのは、よくあるデザインの整え法則です。
部屋の整理整頓と似たような感覚もありますが、
デザインは、何を綺麗にするのかというと、まずココからという事を覚えておくといいでしょう。
0 件のコメント:
コメントを投稿