Figmaガイドライン

Figmaのガイドライン作成

Design / Illustrator

なぜガイドラインを作ったのか

いずれ2人目のデザイナーが来ることを考えて、Figmaの運用ルールを定めたガイドラインを作りました。

課題を整理する

作るガイドラインは、この課題を解決する事を軸として考え、設計していきました。


直面している課題

  • デザイナーとエンジニアで見ているデザインデータが違い、誤ったデザインがプロダクトに反映されてしまう事があった
  • 最新のデザインデータが、どこにあるかわからない事が多々あった

ガイドラインを作成する目的

  • 今後新しいデザイナーが入ってきても、正しいルールでサービスを運用・保守し続ける
  • デザイナーとエンジニアでデザインデータの認識を合わせて、サービスを正しく更新し続ける
  • デザインデータを適切に管理し続ける

Figmaのディレクトリ構造と運用ルールを可視化する

ガイドラインはデザイナー以外も使うので、まずFigmaのディレクトリ構造をスプレッドシートで可視化しました。

Figmaのディレクトリ構造を可視化

Figmaのファイル名、Page、Frameの命名規則を決める

Figmaのファイルの命名規則とPage、Frameの命名規則を決めました。

社内はJIRAを使っていますので、ファイル番号はJIRAの番号としました。


ワークフローを可視化する

実際の運用ルールに則り、ワークフローを可視化しました。


変更点を視覚化できるものやUIフローを作る

デザインデータの変更点や、UIフローを視覚化する為のものを作成しました。

一部freecracyさんのデザインスペックを使い、自分達が使うだろうものだけ残しました。


バージョン管理は使わない

理由としては、

  • 都度バージョン管理をすると生産性が落ちると思った為
  • branchを切れないので、バージョン管理には向いていない
  • Historyはほとんどデザイナー専用の機能となってしまっている
  • デザインデータ自体がバージョン管理に向いていない
  • 使うケースが少なかった