• 概要
• フレームの作成
• Layout Gridの作成
• 3つのレイアウトグリッド
• Layout gridを確認
• 備考
• 参考

【Figma】Figmaを使ってみる

1. 概要

今回はLayout Gridを作成する内容となります。前回のサンプルを削除し、真っ白にしてフレームから作成していきます。

• PC
• Tablet
• Mobile

2. フレームの作成

2-1. フレームを選択

2-2. PC

2-2-1. Desktopを選択

• Design – Frame – Desktop -Desktop

2-2-2. Frameが表示

• 1440 × 1024

2-2-3. Frame名を変更

• 「Desktop – 1」⇒「PC」

2-3. Tablet

2-3-1. Tabletを選択

• Design – Frame – Tablet -iPad mini 8.3

2-3-2. Frameが表示

• 744 × 1133

2-4. Mobile

2-4-1. Phoneを選択

• Design – Frame – Phone -Android Large

2-4-2. Frameが表示

• 360 × 800

3. Layout Gridの作成

3-1. PC

3-1-1. Layout Gridを作成

• Design – Layout grid – 「+」をクリック

• Layout Grid Settingsをクリック
  • 下記を変更
    • 「Grid」⇒「Columns」
    • Count「12」
    • Color「5」%
    • Type「Center」
    • Width「64」
    • Gutter「32」

3-1-2. このPC版のみLayout Gridをもう一つ追加

• Layout Grid Settingsをクリック
  • 下記を変更
    • 「Grid」⇒「Columns」
    • Count「Auto」
    • Color「10」%
    • Type「Left」
    • Width「32」
    • Gutter「0」

3-1-3. スタイルとして登録

• Design – Layout Grid – Stylesをクリック

• Grid styles – 「+」をクリック
  • Name「Layout-grid-PC」入力後、Create style

3-2. Tablet

3-2-1. Layout Gridを作成

• Layout Grid Settingsをクリック
  • 下記を変更
    • 「Grid」⇒「Columns」
    • Count「8」
    • Color「5」%
    • Type「Center」
    • Width「64」
    • Gutter「24」

3-2-2. スタイルとして登録

• Grid styles – 「+」をクリック
  • Name「Layout-grid-Tablet」入力後、Create style

3-3. Mobile

3-3-1. Layout Gridを作成

• Layout Grid Settingsをクリック
  • 下記を変更
    • 「Grid」⇒「Columns」
    • Count「4」
    • Color「5」%
    • Type「Center」
    • Width「64」
    • Gutter「16」

3-3-2. スタイルとして登録

• Grid styles – 「+」をクリック
  • Name「Layout-grid-SP」入力後、Create style

4. 3つのレイアウトグリッド

• PC
• Tablet
• SP

5. Layout gridを確認

5-1. Layout gridの確認（表示）方法

• 「Shift」＋「G」を同時に押す
  • Toggle

6. 備考

今回はLayout Gridを作成する内容でした。

7. 参考

• Figma: The Collaborative Interface Design Tool
• Material Design
• Introducing Material Design Guidance for Large Screens – Material Design
• Start Here: 5 Exercises to Prepare Your App for Large Screens – Material Design
• Understanding layout – Material Design
• グリッドを使用したよくあるレイアウトの実現 – CSS: カスケーディングスタイルシート | MDN (mozilla.org)
• WEBデザイン・プログラミング関連の情報発信を手掛ける STAND4U (stand-4u.com)

【Figma】NextJSのソースコードを自動生成(Locofy.ai)

投稿者プロフィール

Sondon

開発好きなシステムエンジニアです。
卓球にハマってます。

最新の投稿

• 【Figma】2024年10月1日【Figma】NextJSのソースコードを自動生成(Locofy.ai)
• 【Figma】2024年9月16日【Figma】Layout Gridを作成（PC・Tablet・Mobile）
• 【Figma】2024年9月16日【Figma】Figmaを使ってみる
• 【Node.js】2024年9月7日【NodeJS】Crawleeを使ってみる(Scraping with TypeScript)