Figmaで図形を使用する

1. はじめに

• Windowsクライアントアプリを開発するために、デザイン性が良いUIスケッチが作成したい
• デザインシートを作成して、画面のガイドラインを統一したい
• 「Webデザイナー独学入門」を参考にFigmaで実際にデザインしてみたい

2. 開発環境

• Windows10
• Figma DeskTop版

3. 図形をまとめる

3.1. グループの作成

• オブジェクトをドラッグ&ドロップで選択する

  

• Ctrl + G または、右クリックで「選択範囲のグループ化」を選択する

3.2. オブジェクトの結合

3.2.1. 選択範囲の結合

• 複数の図形を結合できる
• 画面上部より 選択範囲の結合 を選択する

3.2.2. 選択範囲の型抜き

• レイヤ最上部の図形の一部を型抜きすることができる
• 画面上部より 選択範囲の型抜き を選択する

3.2.3. 選択範囲の交差

• 複数図形の重複部分のみを切り出すことができる
• 画面上部より 選択範囲の交差 を選択する

3.2.4. 選択範囲の中マド

• 複数図形の重複部分以外を切り出すことができる
• 画面上部より 選択範囲の中マド を選択する

3.2.5. 選択範囲を結合

• 結合した図形を1つの図形として扱うことができる
• 画面上部より 選択範囲を結合を選択する

• 1つの図形をして加工することができる

3.3. フレームの作成

• オブジェクトをドラッグ&ドロップで選択する

  

• Ctrl + Alt + G または、右クリックで「選択範囲のフレーム化」を選択する

• フレーム外のコンテンツを切り抜くことができる

• レイアウトグリッドを使用することができる

4. 立方体を描く

• Rectangleを2つ作成する

• 上のRectangleを選択して、Enterキーをクリックする(頂点編集モード)

• Rectangleの上部2つの角を選択して、右へドラッグする

• もう一度Enterキーをクリックして、頂点編集モードを解除する

• 同様にRectangleを追加して、側面を作成する

5. カスタムシェイプを描く

• 画面上部より ペン を選択する

  

• 点をクリックすると通常の図形以外の図が描ける
  

• ポイントをドラッグ&ドロップすると図形を変形できる
  

6. ベジ字曲線を描く

• ペンツールでドラッグ&ドロップすると曲線が描ける
  

• Enterキーで頂点編集モードにすることで傾きを編集できる
  

• Mirror Angle ・・・ 左右対称になる

• No Mirroring ・・・ 左右対称にならない

• Mirror angle and Length ・・・ 傾きと長さが同期する

7. テキストを追加する

• 画面上部のTを選択する

• デスクトップ版の場合、インストールしているフォントを使用することができる

• サイドパネルでフォントをプロパティを変更できる

  

  

8. パスをアウトライン化する

• Ctrl + /キーを押す

  

• 線のアウトラインの表示を選択する

• テキストを画像として扱うことができる

• 頂点編集モードで画像として変更することができる

  

9. 最適な画像サイズ

• RESIZE IMAGE ・・・ 画像のサイズを変更する
• COMPRESS IMAGE ・・・ 画像ファイルを圧縮する

10. 画像を読み込む

10.1. ドラッグ&ドロップする

• 画像ファイルをドラッグ&ドロップでFigmaへ配置する
  
  

10.2. ツールバーから読み込む

• 画面上部より画像/動画を配置...をクリックする
  
• 対象の画像を選択して開くボタンをクリックする
  
• Figmaに配置して終了
  

10.3. シェイプの塗りで画像を指定する

• 画面上部より長方形をクリックする
  
• 長方形を配置する
  
• デザインの塗りから単色から画像に変更する
  
• 画像を選択する
  
• 対象の画像を選択して開くボタンをクリックする
  • Tips: ファイルを複数選択すると連続で作業できる
    
    

11. 参考文献