基本的なFigmaのデザイン管理を紹介

Fgma

こんにちは。仙台オフィスでデザインとマークアップ、Nuxtで少しTsを書いてるOです。

今回はデザインツールのFigmaのデザイン管理について述べたいと思います。
Figmaはワイヤーフレームからデザイン、プロトタイプまで簡単に一元管理できる便利なツールである反面、 チームで共同作業をする場合は管理ルールを定めないと煩雑になりがちです。 ですので、この数ヶ月間にFigmaを使用した中で考えたオススメの管理方法をご紹介します。
基本的には以下で述べる構成にして案件やチームの環境で使い方をカスタマイズすれば良いでしょう。
1000ページを超えるようなボリュームのあるWEBやアプリの場合は別の管理が必要かもしれませんのでご了承ください。

1.機能単位でファイルを作成する[File]

機能単位でファイルを作成

こうすることで以下のメリットが得られます。

  • ファイル名で何を作成しているファイルかが一覧で理解できる。
  • カラースタイル、親コンポーネントが集約されているので整頓しやすくなる。
  • ファイルを複数開く場合、タブで開けるのでデザインの比較がしやすくなる。
  • ファイルを検索しやすくなる。
  • 他人数で同じファイルを編集した際に発生するloadingを少なくできる。


2.ページの使い方[Pages]

ページは現状以下のような使い方をしています。

ページの使い方

機能の中の機能で分ける

例えば会員登録の場合は無料、有料などの機能パターンがあるのでこのパターン毎にページを作成します。 こうすると大まかな機能として会員登録があり、それに有料、無料登録機能が紐づいていることが理解しやすくなります。
レスポンシブデザインの場合はページごとに各デバイスのデザインを作成すると良いでしょう。

デバイスごとのデザインで分ける

レスポンシブデザインを主軸に置いたページの分け方です。
PC、SP、TABとページを分けることで各デバイスのデザインを比較確認しやすくなります。各デバイスのデザインがページに煩雑に並びにくくなるので、マークアップをする際にも便利です。

ページ数が多くなると目当てのデザインを探すのが困難になりますし、動作が重くなるので出来うる限り最小限に抑えて管理しましょう。

以上、今回は[File],[Pages]の管理についてご紹介しました。今後はフレーム、レイヤー名等の命名規則についても最適な管理を考えていこうと思います。