見出し画像

小さな組織でのFigma活用 - Figma導入phase3

「デザイナー組織が整っていない環境で、Figmaをどのように活用していこう?」
「そもそもデザインチームで働いたことないし、どこから始めたらわからない!」

弊社では半年ほど前にFigmaを導入して、こんな悩みを抱えながら少しずつ整備を進めてきました。まだまだ絶賛常時模索中ですが、今回その模索から一旦ここ数ヶ月色々と試してようやくある程度型ができてきました。

(これまでの模索)


今回これらの模索期間を経て、一旦辿り着いたデザイナー組織が整っていない環境ならではの、以下についてまとめていきたいと思います!

0. はじめに


ちなみに弊社の組織はこんな感じです(人、全然足りてない…)
私はプロダクトBのデザイナーのところの人です。

チーム組織

1. ノンデザイナー(エンジニア、ビジネスメンバー)へのFigma操作方法オンボーディング


日頃Figmaを使用しているデザイナーからすると、Figmaは直感的で使いやすいですが、やはり初見で見るとデザインツールなのでノンデザイナーからすると、どこを触るべきかはわからないかと思います。

ただ、たくさんの機能を触りながら実際に画面を作っていくのはデザイナーだけで、ノンデザイナーのメンバーはデザイナーが作成したデザインを確認するためにFigmaを開きます。
そのため、最低限使って欲しい機能・操作を「Figma基本操作」というファイルにまとめてみました。

ページの切り替え方法

1施策1ファイルでデザインしているのですが、その中でページを以下のように使い分けています。

FIX
デザイナー以外に見てもらう、最新のデザイン確認場所

ワークスペース
ボツにしたデザインも見返せるように、作成過程で作ったものが転がっています。デザインはここで作成します。

--cover
サムネイル

見て欲しいのはFIXのページですが、時々FIX以外のページが開かれてしまい、迷子になられてしまうことがありました。
替え方法は意外とわかりづらいのだな、ということでページ切り替え方法をキャプチャを貼り付けて説明しています。

プロトタイプの確認方法

以前はプロトタイプの共有URLから確認をお願いしていたのですが、複数案あるときにそれぞれ各自で確認してもらいたいという課題が出てきました。

そこでプロトタイプの開き方と、どこから開いて欲しいのかがわかるように説明することにしました。

確認方法の説明を共有したことで、都度プロトタイプのURLを共有しなくても、アートボードから複数案のプロトタイプを各自で確認してもらえるようになりました。

プロトタイプの開始場所を示す

コードの確認方法

弊社の場合フロントは基本デザイナーが行っていますが、プロダクト専任のデザイナーがいないプロダクトでは小さな改修だとエンジニア(バックエンドメイン)が実装することもあります。

バックエンドメインのエンジニアだとフロントまわりも形にはできるのですが、flex周りが苦手だったりするのでFigma上でコードが確認できるのはヒントになるのではないかとコード確認方法も説明しています。

もちろんFigma上のコードだとまだあまいところはあるのですが、一応ほぼAuto Layoutで組んでいるのでヒントにする分には割と良さそうな気がしました。

2. ファイル管理


Figmaのプロジェクトごとの課金プランで契約していないため、1プロジェクト内で複数サービスをラベリングによって分類しています。

サービスに携わるノンデザイナーメンバーもファイルを確認するため、たくさんファイルがあるなかで迷子にならないように、「★進行中」のフォルダだけ見れば今動いている施策がまとまっている状態をつくりました。

また、マーケの方には「バナー」も共有していて、デザイナーが作成したバナーなどで、一部だけ文言を変えて使いまわしたい…といった場合にも対応できるようにしています。(デザイナーの手が空いていればもちろんデザイナーが対応するのですが、デザイナーがいないプロダクトもあるためデザイナー以外も触れるようにしました)

タスクのステータスはFigmaコミュニティーで見つけたテンプレートで、ラベルを変更しながら管理しています。


3. スタイルガイド作成と活用


今まで歴代のデザイナーが思い思いにローカル環境(photo shopやXD)でデザインしていました。そのためサイト全体で統一性がなかったり、masterデータもないため都度施策の影響範囲のページをスクショで撮って作成したデザインを組み合わせたりしていました。

そこから脱却する目的もあってFigmaを導入してデザインを蓄積できる環境にしてきたのですが、せっかくFigmaを使っているのに個別でデザインしていてはもったいないため、以下の2つを目的としてスタイルガイドを作成することにしました。

・デザイナーが変わってもスタイルが崩れないようにルールを定める
・コンポーネントを管理することで作業効率をあげる
・不要なコンポーネントを炙り出して整理/統一する

他社のデザインシステムから学ぶ

まずは有名なPolarisやSmartHRのデザインシステムなどを見てどんな項目あがあるか見ていきました。
また、noteでもデザインシステムを作成した系の記事がたくさんあったので
とても参考になりました。

特にこの記事は神
NewsPicks UIデザイナーのFigma利用フロー大公開!

自社にあった作成範囲について考える

本当はがっつりデザインシステムを作成したい気持ちもあったのですが、現実的に弊社で運用されるイメージがわかなかったので、まず優先して抑えるポイントに絞りこんでいくことにしました。

作成範囲で選んだのは以下です。

・カラーコード
・ボタン
・ラベル
・カードUI
・テキストサイズ
・余白

■カラーコード
既にSassで命名されているカラーコードはあったのですが、数が多すぎることと名前に統一性がありませんでした。
そのため以下の分類で分け直し、必要なカラーと不要なカラーを整理しました。

・アクセントカラー
・テキストカラー
・バックグラウンドカラー
・ボーダーカラー

命名するカラーコード旧新

■ボタン
ボタンに関しては、バックエンドで共有化されているものの、それをデザイナー側で把握しておらず手戻りが多々ありました。あと微妙にスタイルが違う同じボタンが複数ありました。
これを解決するために、ボタンをコンポーネント化させ統一させるボタンを作成しました。

(まだできていないですが、これをもとにbutton.cssみたいなものを作ってデザインもバックエンドの環境も対応できるようにしたいです。)


4. おまけ(もっと便利に使うために)


READ ME の作成

フォルダごとに、目的・格納されているファイル・招待される人をまとめておきました。
また、Figmaの課金形態はややこしくうっかり編集権限で招待してしまうと課金となってしまうため備考で記載しました。

コミュニケーション用のコンポーネント作成

デザインについてアートボード上で説明したり表現するのに、コンポーネントをあらかじめ作成しておいて時間短縮しています。(ここはまだ発展途上です。)

最後まで読んでいただきありがとうございました!

デザイナーが1人だとなかなかFigmaの管理まで手が行き届かないかと思いますし、デザインチームを経験したことのないデザイナーだとどこから初めていいのかわからないことも多いかと思います。
この記事を読んでそんな同じ悩みを抱えた方にこれくらいならできそう、初めてみようというきっかけになれば幸いです。


この記事が気に入ったらサポートをしてみませんか?