• 概要
• SignUp
• 初期画面
• デフォルトページ名を変更
• Examplesを追加
• Layout gridを確認
• 備考
• 参考

1. 概要

Figma helps design and development teams build great products, together.

今回はFigmaにサインアップして、ウェブとモバイルのサンプルを入れ、レイアウトグリッドの確認までをやってみます。

2. SignUp

いくつか答えてスタート

1. What is your name?
2. What kind of word do you do?
3. Do any of these describe your work?
4. Who do you usaully collaborate with?
5. Want to invite some collaborators?
6. What brings you to Figma today?
7. Have you used Figma products before?
8. Which plan would you like?
9. What would you like to do first?

3. 初期画面

3-1. 初期画面

• Layers
• Assets
  • iOS 18 and iPadOS 18
  • Material 3 Design Kit
  • Simple Design System

3-2. UI Kits

• iOS 18 and iPadOS 18
  • Appleのデザインリソース – Apple Developer
  • iOS 18 and iPadOS 18 | Figma
• Material 3 Design Kit
  • Material Design
  • Material 3 Design Kit | Figma
• Simple Design System
  • GitHub – figma/sds: Simple Design System (SDS) is a base design system that shows how Figma’s Variables, Styles, Components, and Code Connect can be used alongside a React codebase to form a complete picture of a responsive web design system.
  • Simple Design System | Figma

4. デフォルトページ名を変更

• 修正前
  • Page 1
• 修正後
  • FirstTouch

5. Examplesを追加

• ウェブ
• モバイル

6. Layout gridを確認

6-1. Responsive layout gridを確認

• Introducing Material Design Guidance for Large Screens – Material Design

6-2. Layout gridの確認（表示）方法

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

6-3. ウェブ

6-4. モバイル

7. 備考

ツールの使い方を覚えるのは大変そうですが、一度覚えると応用して効率的に作業ができると思うので、もう少し触ってみたいと思います。

8. 参考

• 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)

【Figma】Layout Gridを作成（PC・Tablet・Mobile）

投稿者プロフィール

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)