Figmaでフレームを作成する手順を紹介します。
デザインファイルの編集画面を表示します。
画面下部のツールバーの左から2番目の[＃]のアイコンのボタン(フレームボタン)をクリックします。
フレームボタンが選択され、右側にプリセットされたフレームの種類の一覧が表示されます。
今回は、PCの画面サイズのフレームを作成します。右側のエリアの[デスクトップ]の項目をクリックして開きます。
子要素の[デスクトップ]の項目をクリックします。
背景が白色の矩形が表示されました。こちらがフレームになります。
スマートフォンのフレームも作成してみます。フレームボタンをクリックして選択し、右側のエリアの[スマホ]の項目の子要素の
[iPhone 16]の項目をクリックします。
縦長の白い矩形が表示されました。スマートフォンの画面サイズのフレームです。
プリセットにあるサイズではない、任意のサイズのフレームを作成する場合の手順です。
画面下部のツールバーの左から2番目の[＃]のアイコンのボタン(フレームボタン)をクリックして選択します。
編集エリアをドラッグして作成したいフレームのサイズを決めます。
ドラッグを終了すると、ドラッグした範囲の大きさのフレームが作成できます。
同じ操作で複数のフレームを作成できます。
フレームが作成できました。
作成したフレームに名前を設定できます。
作成したフレームの左上にフレーム名画表示されています。
マウスポインタをフレーム名の位置に移動しフレーム名をダブルクリックします。
フレーム名のテキストが編集状態になります。
フレーム名を編集します。
[Enter]キーを押すか、別のオブジェクトを選択すると編集内容が確定します。
別の方法として、左側の[レイヤー]のパネルで編集する方法もあります。
レイヤーパネルで名前を編集したいフレームの項目をダブルクリックします。
フレーム名のテキストが編集状態になります。
フレーム名を編集します。
[Enter]キーを押すか、別のオブジェクトを選択すると編集内容が確定します。
フレーム名を変更できました。
