FD4B: ベクター編集モードを使用してシェイプを変更

スクイッシュ・シェイプを作成

次のシェイプでは、ベクターパスを修正するためのベクトル編集モードの使用を探ります。

1. シェイプ4フレーム内に46 X 48の四角形を追加します。
2. フレーム内で中央に配置します。
3. ベクター編集モードに入るには:
   • 四角形を選択してEnterを押します。
   • 四角形をダブルクリック
4. シェイプの上部パスの中央にカーソルをホバーさせてください。Figmaはパスの中央に新しいポイントを表示します。
5. クリックしてパスに新しいポイントを追加します。

このポイントをシェイプの中心に向かって移動させたいです。ポイントを移動するにはいくつかの方法があります:

• カーソルでポイントをクリックしてドラッグする
• 矢印キーを使用して調整する
• (このレッスンの推奨事項) 右サイドバーで位置の値を変更  

それでは、一緒に3つ目のオプションを確認しましょう:

1. 追加したポイントを選択します。
2. 右サイドバーの位置セクションのYフィールドで、+15と入力します。
3. Enterを押します。

ポイントは形状の中心に向かって15ピクセル移動します。

目指すボウタイの見た目を作るために、形状の下側のパスでも同じ操作を行う必要があります:

1. ホバーして形状の底辺パスの中心にマウスカーソルを合わせ、クリックして新しいポイントを追加します。
2. ポイントを選択し、 Yフィールドに-15を入力し、Enterを押します。
3. Enterを押してベクター編集モードを終了します。
4. シェイプの角の半径を8に変更します。
5. フレームの名前をスクイッシュに変更します。

数式を使用して値を調整する

このレッスンでは、ベクターポイントを移動させるために、位置フィールドで数式を使用することを推奨します。Figma Designでは、位置、寸法、回転などの一部のプロパティの値を変更する際に、数式を使用できます。これは非常に便利なワークフローで、正確かつ柔軟に大きな計算にも対応できます。数式を使って値を調整する方法について詳しく学びましょう。

もし使用した値が少し逆に感じられる場合、それはFigma Designや他のデザインツールでは従来の座標系と異なり、Y軸が反転しているためです。つまり、値が増えるとノードは上ではなく下に移動します。したがって、Y値を増やす+15は上部ポイントを15ピクセル下に動かし、Y値を減らす-15は下部ポイントを15ピクセル上に動かしました。

知識を確認しましょう