Figmaの利用方法

SmartHR社内でFigmaを利用する方に向けたサポートマニュアルです。

概要

Figmaというデザインツールを社内で普及していくために、関連する知見をまとめたドキュメントです。

2021年5月現在、メインのデザインツールをSketchからFigmaへの移行しています。新規で利用する場合はFigmaの利用を推奨します。

利用開始

1. Figmaのアカウント作成する方法

  • Slackの#gs_service_deskまたは#gs_johsys_requestでの申請方法にしたがって、Figmaアカウント(Edit権限)の発行を依頼してください。
  • Gmailなどで自分でアカウント作成すると、SmartHRチーム内のリソースにアクセスできないので、上記のチャンネルで招待してもらうように依頼してください。

2. Figmaのインストール

  • ブラウザ版はインストール不要です。
    • チケットからデザインを確認したい場合などはこちらで十分です。
    • PCのローカルフォントを利用したい場合はヘルパーをインストールする必要があります。
    • パフォーマンスはブラウザ版の方が良いという声もあります。
  • デスクトップアプリ版もあります。
    • 独立したデスクトップアプリケーションなので、ブラウザと分けて利用したい場合はこちらを推奨します。
    • ローカルフォントはヘルパーなしでそのまま利用できます。
    • ブラウザ版とUIが少し異なり、タブやホームボタンが使いやすいという声もあります。
  • アプリやヘルパーは以下よりダウンロードできます。

Figmaの使い方

以下のドキュメントに詳しい使い方やライブラリを紹介していますので、参考にしてください。

利用上のルール

守って欲しいルール

  • 作成したファイルを全公開しない(Shareで、Anyone with the linkを「can view」にする)
    • 原則、社内でFigmaアカウントのないメンバーに公開したい場合は、お手数ですがFigmaアカウントの発行を申請してください。
    • やむをえず全公開をする場合は、目的達成後ただちに設定を戻してください。
    • 理由は以下にまとめてあります。

推奨ルール

  • プロジェクトのフォルダの命名パターン
    • {プロダクトコード}_{プロジェクト名またはフィーチャー名}
      • プロジェクトやフィーチャー単位で取り組んでいるファイルの作業場など
    • {チームまたはユーザー名}_sandbox
      • チームやユーザーに関するファイルを集めた雑多な作業場を作りたい場合など

社内のサポート体制

Figmaについて聞きたい

Figmaについて相談やお困りごとがある場合は、#design_productsで聞いてみてください。 以下のSlackチャンネルにFigmaを使い始めたユーザーが集まっていますので、興味のある方はお気軽にご参加ください。

  • #勉強会_figma
  • #pj_エンジニアデザイナー化計画

Figmaについて学びたい

有志で勉強会も開催しています。希望があれば#design_productsでリクエストしてください。

資料集

© 2021, SmartHR, Inc.