Figmaの基本的な使い方を理解する

1. はじめに

• Windowsクライアントアプリを開発するために、デザイン性が良いUIスケッチが作成したい
• デザインシートを作成して、画面のガイドラインを統一したい

2. 開発環境

• Windows10
• Figma DeskTop版

3. 事前準備

3.1. Figmaのインストール

• Web版、DeskTop版があり、Mac, Windowsのどちらでも使用できる

3.2. フォント

Mac版

• SF Pro 英数字 ※20pt以上:Display、16Pt以下:Text

  https://developer.apple.com/fonts/

• Hiragino Sun 日本語

• Not Sans JP 日本語

  https://fonts.google.com/specimen/Noto+Sans+JP

Windows版

• Roboto 英数字

  https://fonts.google.com/specimen/Roboto

• Not Sans JP 日本語

  https://fonts.google.com/specimen/Noto+Sans+JP

4. Figmaの基本操作

4.1. フレームの作成

• #フレームを選択する(ショートカット：F)
  

• ドラッグ&ドロップする
  

4.2. ページの作成

• フレームを集約することで、Webページ別にわけることができる

• Page1の下の + ボタンをクリックする
  

• 新しいページが作成できる
  

4.3. キャンバスの移動

• スペースキーを押すとアイコンが手のマークになり、キャンバスを移動することができる
  

4.4. 画面の拡大/縮小

• 拡大：Ctrl + + ( + Shift)
• 縮小：Ctrl + -

4.5. Codeの表示

• インスペクト > コード を選択すると、CSS/iOS/Androidの確認ができる

4.6. 図形描画の方法

• 下記メニューから各種図形が作成できる
• Shiftキーを押したままドラッグ&ドロップすると正方形などが作成できる

4.7. 楕円の編集

• 右中心の〇をドラッグ&ドロップする

• 真ん中の〇をドラッグ&ドロップする
  

4.8. 多角形の作成

• デザインの下記の数字を編集すると多角形が作成できる

4.9. テキストの作成

• Tボタンをクリックする
  

• Frame上でドラッグ&ドロップし、文字を入力する

4.10. 複数図形の拡大/縮小

• 複数の図形をドラッグ&ドラッグで選択する
  

• 四角の端にある□をドラッグ&ドロップする
  

• 上記の場合、三角形のみ大きくなり文字の大きさが変わらない。その場合、下記の拡大/縮小をクリックする

• 三角形、文字ともサイズが拡大/縮小できる
  

4.11. 図形の縦横比を変える

• デザイン > 下記マークをクリックして、縦横比の固定を解除する
  

• Width と Height を別に値に設定できる
  

4.12. 図形を回転する

• 図形の少し外側にカーソルを置くと、回転マークが表示される
  

• ドラッグ&ドロップすると図形が回転する

• Shiftキーを押したままドラッグ&ドロップすると15度毎に回転する
  

4.13. 図形の反転

• 元の図形
  

• 水平方向: Shift + H
  

• 垂直方向: Shift + V
  

• インスペクト > コード を選択すると、CSS/iOS/Androidの確認ができる
  

5. 参考文献