HapInS Developers Blog

HapInSが提供するエンジニアリングの情報サイト

トップ > テックブログ > Figmaの導入～書き出し

Figmaの導入～書き出し

テックブログ


このページでは、Figmaの導入からデータ書き出しの工程や基本機能を要約して記載
深堀りすると情報量が膨大になるため、基本的な項目に絞って要約しています

はじめに

  • Figmaの公式サイトでアカウント登録だけ先にしておくと後述の作業がスムーズ
  • Figmaは非常に動作も軽く、MacとWindowsなど異なる複数デバイスで使用する場合も、同一アカウントで管理できる
  • 無料版の場合の注意
    • project（フォルダ分けして管理）でページを作成すると「ページ枚数制限」が「3ページまで」となっている
      • 個人利用であればDraftからページを新規作成すると良い
        • 理由は、Draftであれば「ページ数無制限」で作成できるため
        • デメリットは、フォルダ分けしてで管理できないこと
    • 他者との共有は無限にできるが、編集作業は自分以外に1人までしか編集権限を付与することができない

①インストール

※オンラインで利用の場合、この項目はスキップ※

  1. 右上のアカウントメニュークリック
  2. Get desktop app からPCにDLする

DLすると容量を使うので、要領が少ないPCの場合は、ブラウザ版でもOK

ブラウザ版使用の場合、アカウント登録＞サインイン後は表示に従って進むだけ

②プラグインの導入（任意）

  1. 左上メニュー（アカウント名のところ）クリック
  2. Communiy>plugIn>検索で「Iconify」をインストール

いろいろなパーツデザインアセットが使用できるので入れておくと便利

自身で保存した色がすぐに反映できるため、Figmaを使う場合は入れておくと効率良い

③日本語フォントの有効化

通常設定の場合、英語フォントのみ使用可能である状態であるため必要な作業

操作方法

アプリ版の場合

  1. 公式サイトから「Font installers」をダウンロード
    1. ダウンロード方法はこちらのサイトを参照
  2. タスクバーの検索メニューから「コントロールパネル」と検索する
  3. 「デスクトップのカスタマイズ」をクリックする
  4. 「フォント」をクリックしてフォントの一覧を確認する
  5. インストールしたいフォントをドラッグアンドドロップ

ブラウザ版の場合

以下のデフォルトで使用できるフォント4種類は、日本語に対応している

  • Noto Sans JP
  • Noto Serif JP
  • Nico moji
  • Nikukyu

デフォルト使用における問題点は、選択して入力表示しないと文字のイメージを確認できないため、とてもストレスであり、効率が悪い

この解決方法は、フォント表記が反映された状態で選択ができるようになる機能を利用する

プラグイン検索から、Better Font Pickerを入れると良い

④画像ファイルのインポート

操作方法

  1. 編集ページ左上メニュー（Figmaのアイコン）クリック
  2. ファイル>画像を配置を選択（Ctrl + Shift + K）
  3. 任意のファイルを指定

⑤新規ファイルの作成

操作方法

  1. デザインのために必要なフレームは、すでに登録されているのでサイズ設定は不要
  2. New file項目の「Design file」を開く
  3. ツールバー左から3番目のフレームアイコンを選択（Fキー）
  4. 右側にフレームのデバイスが表示されるので任意のデバイスを選択

⑥図形の描画

操作方法

ツールバー左から4番目の図形アイコンを選択（■：Rキー、〇：Oキー、線：L）

  • ヘッダーの形状を描画するときに多用
  • frameの角は、丸くするほどやわらかな印象を与える
  • 画像挿入もこのツールメニューから選択可能

⑦図形に色をつける

操作方法

右側のパネルから「Fill」or「stroke」を選択

  • 16進数でカラー設定をメモしておくと後で便利
  • 不透明度もここで設定可能

⑧テキスト入力

操作方法

ツールバー左から5番目のテキストアイコンを選択（Tキー）

  • 長文テキストの場合、右側パネルから「paragraph spacing」で調整する

よく使うテキスト設定（フォントスタイル、色）は、以下の方法で保存しておくと便利

  1. 右側のパネルから「Text」メニューの右側にある点4つのアイコン（Style）を選択
  2. 「＋」で保存・追加

⑨画像挿入と最適化

画像の挿入方法

Figma上にdrug＆dropするだけ または、「④画像ファイルのインポート」で先述した「Ctrl＋Sift＋K」で挿入

インターネットに接続して使用するツールであるため、素材（特に画像）は可能な限り圧縮しておくこと

  • プラグインUnsplashを使用すると、とても便利
  • 挿入後、画像の加工（明るさ調整、ドロップシャドウ等）も可能
  • ドロップシャドウは、深度が深いほど「浮遊感」が表現できるため、UIの表現を立体的に見せたり、際立たせたいときにも有効な効果

画像の最適化方法

以下のようなオンライン圧縮ツールで、画像の品質保持したまま画像圧出して軽くする

iLoveIMG | 画像編集用オンラインツール

  • 基本、jpg形式で使用する。理由は、データが軽いため
  • png形式を使用する時
    • 背景透過して使用したい画像の時
    • jpg、pngはビットマップ画像
  • svg形式を使用する時
    • ロゴやアイコンのようなシンプルな形状のオブジェクトや「線」と「塗り」で表現されたイラストレーション画像の時
    • svgは、ベクター画像

⑩グリッドを引く

操作方法

右側のパネルから「Layout Grid」の「＋」を選択してグリッドを表示させる

  • グリッドのメモリサイズがデフォルトだと「10px」なので、「8px」に変更する
    • ２進数だからということが根本にあるため
  • 「Layout Grid」の左にある9つの点をクリックでメモリサイズの設定変更が可能

⑪グループ化

操作方法

  1. 一つのグループにしたいレイヤーを、Shiftをおしながらクリック選択
  2. 右クリックでメニューを表示させる
  3. このメニュー内にある「Group Selection」を選択する

補足：ショートカットキー

「Ctrl＋G」でグループ化

「Ctrl＋D」で複製

⑫自動調整（オートレイアウト）

テキストに合わせて図形も拡縮させることができる機能

操作方法

  1. 右側のパネルから「Auto Layout」のメニューの「＋」をクリックして有効にする
  2. 有効にしたレイヤー名に表示されているアイコンが「Ⅱ」に変われば、自動調整が有効になっている

自動調整を有効にしたレイヤーの操作方法

  1. Fボタンを押す
  2. 任意のフレーム位置でクリック
  3. 図形が描画される
  4. Tボタンを押す
  5. テキストモードになる
  6. 任意のテキストを打つ
  7. 「Auto Layout」のメニューの「＋」をクリック
  8. 完了

長いテキストを入れてみると、テキストに合わせて図形も変形する仕様になっていることが確認できる

⑬パーツの自動整列

Tidy Up

右側のパネル最上部右の「More options」から選択するだけ

操作方法

  1. 整列させたいパーツをDrugで囲む
  2. Tidy upを選択する

  3. 整列完了

  4. パーツ毎の間隔をクリックして動かすと、目視で間隔調整ができる

  5. パーツ中央の点をクリックして動かすと、場所の入れ替えができる

⑭カラーパレットの作成

カラーパレットで前もって決めている配色を作っておくと、作業効率UPだけでなく、デザインの統一感を最後まで保持できる

作成方法

  1. カラーパレット用のフレームを作る（Ｆキー）
  2. カラーパレット用フレーム内に、3つ同じ図形を置く（形は任意）
  3. この3つの図形の色に、base color,main color,accent colorを設定する
  4. 右側のパネルから「Fill」メニューの右側にある点4つのアイコン（Style）をクリック
  5. 「＋」で保存/追加

使用方法

  1. 作成したカラーパレットの色にしたいパーツを選択
  2. 右側のパネルから「Fill」メニューの右側にある点4つのアイコン（Style）をクリック
  3. 保存されている色一覧が表示される
  4. 使用したい色を選択

カラーパレットで複数パーツを選択して一気に色変更できると、作業の時短になる

一括選択による色変更の方法

  1. カラーパレットで作成・反映させたものの、「色を調整したい」という時の便利な方法
  2. 右側のパネルから「Fill」メニューの右側にある点4つのアイコン（Style）をクリック
  3. Color Styles右３つあるアイコンの真ん中（Show as list)をクリック
  4. 色を調整したい色の右にアイコン（Edit Style）が表示される
  5. クリックして色を調整
  6. 完了

すでに配置・反映させたパーツを一つ一つ動かすことなく、カラーパレットの変更を行うだけで、調整したい色が使用されているすべてのパーツに対して一括変更で反映されるため、とても便利

⑮共通パーツ（コンポーネント）の作成

作成することで、すべてのページ及び画面で共通して使用されるパーツは仕組化される

  • ただし、「一つ基本形となるFrameデザイン」を決めておくことが前提
  • テキスト、色、図形、画像等、配置可能なすべてのパーツは共通パーツ（コンポーネント）として扱う

作成方法

  1. 新規で「基本形となるFrameデザイン」を作る（Fボタン→新規Frame作成）
  2. 「共通パーツ（コンポーネント）」として、各パーツレイヤーの「親」となる
  3. 共通パーツ（コンポーネント）にしたいパーツのレイヤー上で、右クリック
  4. 「Create Component」を選択
  5. レイヤーのテキスト表示とアイコンが変色・変化する
  6. 共通パーツ（コンポーネント）完了

⑯エクスポート

操作方法

  1. 選択したパーツ、Frameごとに「画像データとして」出力する
  2. Frame全体を一枚の画像として出力したい場合
  3. Frame名をクリック選択
  4. ツールバー左アイコンクリック
  5. File→Exportを選択（または、右側のパネルから「Export」を選択）

画像の「書き出し倍率」の設定変更も、この書き出し設定で変更できる

  • デフォルトは等倍（100%）で設定されている