レイヤー入門: レイヤータイプの検討

Figmaデザインでは、いくつかの異なるタイプのレイヤーを作成できます。ここでは基本について説明しますが、他にも検討すべきレイヤーがあります。

フレーム

フレームはFigmaの基本的な構成要素です。他のオブジェクトを中に入れることができるコンテナとお考えください。レイヤーを整理して、まとまりのあるデザインにすることができます。

フレームには定義されたサイズがあり、独自のプロパティをサポートできます。また、コンポーネント、オートレイアウト、プロトタイプ作成など、Figmaの強力な機能にもアクセスできます。

フレームプリセットを使用すると、一般的なサイズのフレームをすばやく作成できます。これには、iPhoneやApple Watchのようなスクリーンやデバイス、あるいはソーシャルメディアの投稿やバナーのようなアセットサイズが含まれます。

この画像には、iPhone 14および15 Pro Maxのサイズのフレームプリセットがあります。フレームツールを選択すると、右サイドバーでフレームプリセットを選択できます。

テキスト

ほとんどのインターフェースデザインにとって、タイポグラフィーは重要です。効果的なタイポグラフィーは、情報を伝達し、注目を集め、階層を構築し、感情を呼び起こすことができます。

テキストツールTを使用してテキストレイヤーを作成し、テキストを入力して追加します。テキストのフォーマットとスタイルを設定するには、右サイドバーの[タイポグラフィー]セクションを使用します。また、[塗り]などの他のセクションを使用して、テキストの色など、他の側面を変更できます。

Figmaには、すぐに使える数百種類の無料Googleフォントが用意されていますが、独自のフォントを追加して使用することもできます。

このカードデザインのテキストでは、Figmaで誰でも利用できる無料のGoogleフォント「Space Grotesk」が使用されています。

シェイプ

長方形R、楕円O、多角形などのシェイプを使用すると、目に楽しく、個性的なデザインを作成できます。

複数のシェイプを組み合わせてアイコンなどを作成することもできます。ペンツールPは、直線や曲線、カスタムシェイプやイラストの作成にも役立ちます。

上の図は多角形ツールを使用して作成した八角形です。[デザイン]セクションの[数]フィールドを使用して、多角形の辺の数を調整できます。

イメージ

写真、スクリーンショット、その他のビジュアルアセットをデザインに追加したい場合もお任せください。Figmaデザインには、画像、GIF、動画も追加できます。

Figmaデザインでは、画像と動画がレイヤーではなく、塗りの一種として認識されます。これにより、フレーム、シェイプ、さらにはテキストなど、塗りおよび線プロパティをサポートする任意のレイヤーに画像を追加できます。

画像をファイルにドラッグアンドドロップするか、コピーアンドペーストします。Figmaは、新しい長方形レイヤーの塗りとして画像を追加します。画像による塗りが必要なシェイプをすでにお持ちの場合は、右サイドバーの[塗り]セクションから直接追加できます。