UI/UXデザインツール『Figma』入門

4-1. 位置・サイズを変更する

  • UIデザイン
  • UXデザイン
  • プロトタイピング
  • Webデザイン

プロパティパネルの上部には、キャンバス上のオブジェクトの位置・サイズを変更するためのツールがあります。幅・高さ・回転の角度・角の半径を変更したり、x座標とy座標を変更することが出来ます。このレッスンではそれらの操作方法を解説していきます。

公開日:2019/08/21最終更新日:2021/08/04

1.位置を変更する

プロパティパネル上部に位置する図1赤枠部分からx座標とy座標を変更することが出来ます。

オブジェクトを選択すると、左上を基準としてx・y座標がプロパティパネルに表示されます。プロパティパネルから数値を入力することで、位置を変更することが可能です。

図1 位置の変更

スクラブ入力

スクラブ入力は、数値を手動で入力するよりも直感的にサイズを変更できる入力方法です。

まずサイズを変更したいオブジェクトを選択し、入力の横にある、数値ラベルにマウスカーソルを図2のようにクリックし、ドラッグすると数値を変更することが可能です。

図2 スクラブ入力

2.サイズを変更する

サイズを変更するには、図3赤枠から変更することが出来ます。

オブジェクトまたはフレームを選択すると、プロパティパネルが表示されます。Wは横幅・Hは縦幅を示します。上記でも説明しましたが、スクラブ入力、カーソルを↓↑で動かすことで1px単位でサイズを変更することが出来ます。

基本的には、1px単位でサイズが変更されますが、少数点や%での入力も可能となっています。

また青枠をクリックすると、サイズの固定比率/自由比率を切り替えることが出来るので用途に応じて変えていきましょう。

図3 サイズ変更

3.回転の角度と角の半径を変更する

回転の角度

オブジェクトの角度を変更するには、図4赤枠から変更することが出来ます。

オブジェクト選択すると、プロパティパネルが表示され、数値を入力することで、角度を変更することが可能です。

角の半径

角の半径を変更するには、図4青枠から変更することが可能です。

オブジェクトを選択すると、プロパティパネルが表示され、数値を入力することで、オブジェクトの角の半径を変更することが出来ます。

図4 角度、角の半径の変更

また、個別に角の半径を調整したい場合は、図4黄枠をクリックすると図5のプロパティパネルが表示されます。
左から、左上、右上、右下、左下の数値入力欄になっています。図5青枠からは、コーナーを滑らかにする設定を行うことが出来ます。

図5 個別の角の半径変更

理解度チェック





UI/UXデザインツール『Figma』入門

1. Figmaの概要とインストール

2.Figmaの基本操作

3.ツールバーの操作

4. プロパティパネルの操作

5. プロトタイピング

6. 共有とバージョン管理

7. 料理写真投稿アプリを作ってみよう



このレッスンの著者