2018.05.18

Web制作

Figmaの矩形作成方法

figmaの矩形制作のキービジュアル

今回はマ◯クスファク◯リーのアレではない、UIデザインブラウザアプリ「Figma」の矩形の作成方法をご紹介したいと思います。

1.矩形アイコンを選択

Figmaの矩形アイコン選択画面

まずは左上にある「矩形」アイコンを選択します。

Figmaの矩形プルダウンメニュー画面

ちなみにこのアイコンの右側にある小さな下矢印をクリックすると、四角、ライン、矢印付きライン、円、三角、星などのあらかじめ用意されている矩形が出てきます。

プルダウンメニュー最後の「Place Image」は画像を読み込むためのものです。

2.矩形を作成する

Figmaの矩形配置画面

次にフレーム内に任意で矩形を配置します。クリックすると100×100pxの矩形が作成されますが、フレーム内でマウスドラッグで任意のサイズで作成することもできます。

ちなみにPhotoshopのようにクリック時に数値入力できるような機能は無いようです。一旦矩形を配置してから後で数値を設定しなければいけないようです。

3.数値を入力し大きさを変える

Figmaの矩形数値入力画面

矩形は任意で大きさを変えることができます。矩形を選択後、右側のメニューからW(横)、H(高さ)を数値で指定してください。

W、Hの右側に付いてる鎖のようなマークを選択すると、比率の固定、解除ができます。

SHARE

この記事の筆者

デザイナー 芳村 明文

デザイナー 芳村 明文

カテゴライズしたらきっとデザイナーのはず。音楽(洋楽をジャンル問わず雑多に貪る)、欧米テレビドラマ(シットコム)が好き。時々バンド活動。

WEBSITE DESIGN REQUEST

ホームページ制作・リニューアルの
ご相談はお気軽に

TEL 06-6537-9941 平日 9:00〜19:00

〒550-0012 大阪府大阪市西区立売堀2-5−41

ホームページ制作を相談する