Figmaの利用方法

概要

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

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

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

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

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

作成したファイルを全公開しない（Shareで、Anyone with the linkを「can view」にする）
- 原則、社内でFigmaアカウントのないメンバーに公開したい場合は、お手数ですがFigmaアカウントの発行を申請してください。
- やむをえず全公開をする場合は、目的達成後ただちに設定を戻してください。
- 理由は以下にまとめてあります。
  - Figmaを埋め込む際のセキュリティ的な懸念の検証 | Docbase

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

Figmaについて相談やお困りごとがある場合は、社内Slack#design_productsチャンネルで聞いてみてください。

以下のSlackチャンネルにFigmaを使い始めたユーザーが集まっていますので、興味のある方はお気軽にご参加ください。

有志で勉強会も開催しています。希望があれば社内Slack#design_productsチャンネルでリクエストしてください。