更新日: 2023 / 12 / 12

Figmaテンプレートの使い方

Figmaテンプレートの使い方を解説します。

Figmaテンプレートの使い方

FigmaテンプレートはFigma向けのデザインファイルです。

Figmaでアカウントを作成したあと、ダウンロードファイルに含まれるデザインファイルをインポートすることで使用できるようになります。

Figmaの基本的な使い方については以下のドキュメントをご覧ください。

UIコンポーネントの使い方

FigmaテンプレートではLPでよく使われるUIパーツをコンポーネント化しています。

LP-UIKITの特徴 UIコンポーネントの使い方1

コンポーネントはUIページにあるものをコピーしたり、左のパネルにあるアセットタブからドラッグして使用することができます。

LP-UIKITの特徴 UIコンポーネントの使い方2

設置したコンポーネントは右パネルでレイアウトパターンを選択することができます。

LP-UIKITの特徴 UIコンポーネントの使い方3

選択するとコンポーネントタイプが自動的に切り替わります。

LP-UIKITの特徴 UIコンポーネントの使い方4

コンポーネントの種類

コンポーネントには次のような種類のものがあります。

  • テキスト: text
  • 見出し: headline
  • ボタン: button
  • ラベル: label
  • ヘッダー: header
  • フッター: footer
  • ファーストビュー: hero
  • CTA: cta
  • ギャラリー: gallery
  • 背景パターン: bg
  • 選ばれる理由: reason
  • 問題・課題: problem
  • 機能一覧: feature
  • サービス内容: service
  • 流れ: flow
  • よくある質問: faq
  • 事例: case
  • お客様の声: voice
  • 価格: price

UIブロックの使い方

UIページの下部にはコンポーネントを組み合わせてコンテンツとしてまとめたブロックがあります。

LP-UIKITの特徴 UIブロックの使い方1

ブロックもコンポーネントなのでコピーしたり、左のパネルのアセットタブからドラッグして使うこともできます。

LP-UIKITの特徴 UIブロックの使い方2

ブロックはコンテンツ単位でまとめられているので素早くワイヤーフレームを作成する場合に向いています。

ブロックも右側のパネルからコンテンツタイプを選択することができます。

LP-UIKITの特徴 UIブロックの使い方3

ブロック内のコンポーネントを選択した状態で、右側のパネルからコンポーネントのタイプを選択することができます。

LP-UIKITの特徴 UIブロックの使い方4

ブロックの種類

ブロックには次のような種類のものがあります。

  • ヘッダー: header
  • フッター: footer
  • ファーストビュー: hero
  • CTA: cta
  • ギャラリー: gallery
  • 背景パターン: bg
  • 選ばれる理由: reason
  • 問題・課題: problem
  • 機能一覧: feature
  • サービス内容: service
  • 流れ: flow
  • よくある質問: faq
  • 事例: case
  • お客様の声: voice
  • 価格: price

テンプレートの使い方

Figmaテンプレートにはワイヤーテンプレートとデザインテンプレートがそれぞれのページに含まれています。

LP-UIKITの特徴 テンプレートの使い方

こちらはデザインテンプレートです。ワイヤーテンプレートにスタイルを当てたものになります。

LP-UIKITの特徴 テンプレートの使い方2

ワイヤーテンプレートはUIコンポーネントやブロックを組み合わせて作られているので、別のパターンに変更したり、追加することができます。

LP-UIKITの特徴 テンプレートの使い方3

デザインテンプレートはワイヤーテンプレートにスタイルを当てたものですが、こちらもUIコンポーネントを追加したり、ブロックを追加してカスタマイズすることができます。

LP-UIKITの特徴 テンプレートの使い方4