フレームはFigmaにおける最も重要な概念です。Webページやスマートフォン画面のサイズを定義する「器」として機能します。
フレームの作成方法は2つあります。ツールバーのフレームアイコン(F キー)を選択し、キャンバス上でドラッグするか、右側のプリセットから選択します。
シェイプツール(R キー)では、四角形・円・線・多角形・星形などの基本図形を描画できます。
テキストツール(T キー)でテキストを配置します。フォント・サイズ・行間・文字間隔などをプロパティパネルで調整できます。
日本語フォントの推奨設定は以下の通りです。
すべてのオブジェクトには「塗り(Fill)」と「線(Stroke)」を設定できます。プロパティパネル右側で色・透明度・グラデーションを自由に調整しましょう。
複数のオブジェクトを選択すると、上部ツールバーに整列オプションが表示されます。左揃え、中央揃え、均等配置などを活用して、正確なレイアウトを実現しましょう。
1. 1440×1024のデスクトップフレームを作成してください
2. 四角形でヘッダー(幅1440×高さ80)を作成し、背景色を#1a1a2eに設定してください
3. ヘッダー内に白色テキストでサイト名を配置してください
4. シェイプを使ってシンプルなボタンを作成してください
フレーム・シェイプ・テキストはFigmaの三大基本要素です。これらを自在に操作できるようになることが、すべてのデザインワークの土台となります。ショートカットキーを覚えて、効率的に操作できるよう練習を重ねましょう。