Figmaデザインの基本的なシェイプツール

この機能を使用できるユーザー

すべてのチームまたはプランでサポートされます。

デザインファイルの編集可アクセス権があるユーザーは、基本的なシェイプツールを使用できます。

シェイプは、デザインでレイヤーの大部分を構成します。Figmaには、ビルディングブロックとして使用できるいくつかの基本的なシェイプが用意されています。

• 長方形
• 線
• 矢印
• 楕円
• 多角形
• 星

ツールバーの[シェイプツール]メニューから基本的なシェイプにアクセスできます。[長方形]の横にある矢印をクリックすると、シェイプツールメニューが開きます。

独特なシェイプまたは複雑なシェイプが必要なデザインでは、Figma固有のペンツールを使用して、独自のベクターネットワークを作成できます。

長方形

長方形ツールでは、長方形と正方形の両方を作成できます。

1. ツールバーから[長方形]ツールを選択するか、キーボードショートカットのRを押します。
2. キャンバス上の特定の位置をクリックしてドラッグし、長方形を作成します。下辺の下に長方形の寸法が表示されます。
   

   

3. シェイプの各角にはハンドルがあり、このハンドルを使ってシェイプのサイズを変更できます。

角の半径の調整

長方形には、標準ハンドルの他に、各角の内側に4つの円形のハンドルがあります。このハンドルを使用して、角を調整して長方形の角を丸くすることができます。詳細については、「角の半径とスムージングの調整」を参照してください。

線

直線ツールでは、線を任意の方向に作成できます。線は、デザイン内でコンテンツを分割する場合や、CSSのボーダーをシミュレーションする場合に便利です。

1. シェイプツールから[線]ツールを選択するか、Lキーを押します。

   

2. キャンバス上の特定の位置をクリックして任意の方向にドラッグし、線を作成します。
   

   

3. 右側のサイドバーの[線]セクションで外観を変更できます。これには、色、位置、線幅、スタイル、終点の先端や端が含まれます。[線]プロパティ →

破線の作成

破線の長さと、それらの間隔の両方を指定できます。

1. 線を作成または選択します。
2. 右側のサイドバーの[線]セクションで、 を選択して、[線の詳細設定]メニューを開きます。
3. 破線の長さと間隔を入力します。

矢印

矢印ツールでは、一方向矢印と両方向矢印を描画できます。矢印の終点の先端や端をカスタマイズできます。

1. シェイプツールメニューから[矢印]ツールを選択するか、ショートカット⇧ Shift Lを使用します。
2. キャンバス上の特定の位置をクリックして任意の方向にドラッグし、矢印を作成します。
3. 線ツールと同様に、[線]プロパティを調整できます。
4. [線]セクションで始点と終点の両方を個別に更新します。
5. 2つのフィールドの間のスペースにカーソルを合わせ、2つの矢印をクリックして、始点と終点を入れ替えます。[線]プロパティ →

楕円と円

楕円ツールを使用して、楕円と円の両方を描画できます。楕円と円はそのまま使用することも、編集して曲線のあるカスタムシェイプを作成することもできます。

1. シェイプツールメニューから[楕円]ツールを選択するか、Oキーを押します。

   

2. キャンバス上の特定の位置を選択して任意の方向にドラッグし、楕円を作成します。シェイプの寸法は、レイヤーの下に青色で表示されます。
   

   

3. 楕円を囲む青色のバウンディングボックスが表示され、各角にハンドルが表示されます。このハンドルを使用して、シェイプのサイズを変更できます。

多角形

[多角形]ツールを使用して、任意の数の直線からなる閉じたシェイプを描画できます。

多角形ツールのデフォルトのシェイプは三角形ですが、オブジェクトに頂点を追加して、独自の多角形を作成できます。

1. シェイプメニューから[多角形]ツールを選択します。
   

   

2. キャンバス上の特定の位置を選択してドラッグし、多角形を作成します。シェイプの寸法は、オブジェクトの下に青色で表示されます。
3. このシェイプを囲む青色のバウンディングボックスの各角にハンドルが表示されます。このハンドルを使用して、シェイプのサイズを適切に変更できます。
4. 多角形レイヤーをダブルクリックすると、オブジェクト編集モードに切り替わります。このモードでは、多角形に頂点を追加し、各頂点を個別に操作できます。
   

   

5. 多角形の角を丸くすることもできます。半径が表示されるまで角のハンドルの上にカーソルを置きます。 ハンドルをクリックしてオブジェクト中央に向けてドラッグし、角を丸くします。

多角形とバウンディングボックス

多角形(この例では三角形)を描画すると、シェイプを囲む青色のバウンディングボックスが、シェイプの下端より下に表示されます。

これにより、多角形に頂点が追加されても、バウンディングボックスが一貫性のあるシェイプまたはサイズを維持できます。バウンディングボックスをシェイプの実際の境界線にスナップするには、シェイプを統合します。

シェイプを右クリックして[統合]を選択するか、次のキーボードショートカットを使用します。

• Mac: Command</kbd E
• Windows: Ctrl + E

星

星ツールでは、星形の多角形を作成できます。星レイヤーを作成する場合、デフォルトでは10個の辺と5つの頂点がある星が作成されます。

1. シェイプツールメニューから[星]ツールを選択します。
   

   

2. キャンバス上の特定の位置を選択して任意の方向にドラッグし、星を作成します。
   

   

3. 星を操作するために使用できる3つのハンドルがあります。
   
   • 数: 星の頂点の数が指定されます。最小値は3つで、最大値は60です。
   • 比率: 星の中央から内側の点までの距離です。これは、星全体の直径に対するパーセンテージとして表示されます。
   • 半径: これを使用して頂点を丸くすることができます。これは、長方形での角の半径の動作に似ています。