JMDCでアプリのデザインを5月から担当しているはんざわです。
Webやアプリのフロント開発者のみなさんはデザインツール Figmaをご存知でしょうか？ JMDCではこれまでAdobe XDをメインで使用していました、今年からFigmaに乗り換えました。 乗り換えに伴い、デザイナー以外のメンバーにもFigmaを操作できるようになるべく、勉強会を開催しました。 勉強会はオンラインで開催。Figmaで資料を作成、参加者に資料を開きながらGoogle Meetを繋げて詳細を説明していきました。 勉強会で使用した資料はFigmaのCommunityにアップしているのでぜひ見てみてくださいね。 www.figma.com
エンジニアがFigmaを触れるようになることのメリット
デザイナーに依存しない、デザイナー不在時でもデータ編集できる
議論の必要がない、文言などの細かい調整を毎回デザイナーを通す必要がありました。デザイナー不在時は誰も編集できずに、”待ち”の状態が発生することも…
Figmaを操作できる能力を持っていると、このロスを無くすことができます。
デスクトップアプリをインストールしなくてもデータが見れる・編集できる
Figmaの長所はデスクトップアプリをインストールしなくても、ブラウザでデータを編集可能な点です。デスクトップアプリのインストールは割とハードルが高く、導入コストがかかります。
ブラウザのみで完結できるFigmaは、URLで共有するだけのため部署をまたいで普及しやすいです。
ワイヤーフレームの制作に便利
図形を描くことが得意なツールのため、もちろんワイヤーフレームもFigmaで制作できます。UIパーツがコンポーネント化がされている場合、すでにデザインされているパーツを再利用してより具体的なワイヤーも制作可能です。（コンポーネントについては後述しています）
ほか、Figmaのページ機能を活用してデザインデータとワイヤーフレームなどの資料関連も一緒にまとめて管理すると、チーム全体としての生産性も向上するためおすすめです。ディレクターやPdMにはかなり助かるツールになると思います。
基本知識と基本操作
勉強会で使用した資料で詳細に説明しているので、こちらも見てみてください。この記事では勉強会の資料から使用頻度が高いもののみ抜粋して記載しています。 図形をつくる あらゆるUIパーツはこれらの図形の組み合わせから生み出されています。
かなり頻繁に使うので、ショートカットキーを覚えておくと楽です。Figmaの右側のパネルで図形のサイズや色の変更ができます。
レイヤーについて 図形を作成していると、Figmaの左側のパネルに何かが繁殖していることにお気づきでしょうか。
こちらはレイヤーと言い、要素の層を表しています。
ここで注意したいのが、レイヤーの整理です。整理されていないと第三者が触りづらいデータとなってしまいます。
図形を使えば使うほどレイヤーが増殖します。「この図形はなんだっけ…？」となる前に、名前を付けておく、適切なグループ化をしておく必要があります。
画像を挿入する
画像の挿入する方法は複数あります。
1.ドラッグ&ドロップ
2.コピー&ペースト
3.図形の塗りを画像に変更する
1と2はGoogleのスライドショーなどで定番の手法のため割愛します。
3の塗りを画像に変更する方法は、右側の操作パネルのFillの色編集UIから画像に変更できます。
画像以外にもグラデーションやパターンに変更できます。
コンポーネント
コンポーネントは画面を構成する要素のことを指します。人によっては「モジュール」とも呼んだりします。
このコンポーネントがきちんと管理・運用されているかどうかで、アプリケーション全体の美しさ・ユーザビリティが左右され、開発工数にも影響してくる、超重要なものになります。
コンポーネント化の方法
1. コンポーネント化したいUIの要素をグループ化（ ⌘ + G または Ctrl + G）する
2. 選択したまま ⌘ + K または Ctrl + K
3. コンポーネント名を編集
コンポーネントの親を作ったあとは、マスターをコピーし、子コンポーネントを使ってUIを作成していきます。
親を編集すると、子も編集が反映されます。 子は色やテキスト、要素の表示・非表示、サイズ等を変更することができます。基本のレイアウトは変更できません。コンポーネントはFigma左側の「Assets」内で一覧をみることもできます。使いたいコンポーネントをFrameなどにドラッグすると反映されます。
実装するために使う
エンジニア<->デザイナー間のコミュニケーションコストを削減できるので、エンジニアは要チェックです。
画像を書き出す
書き出したい要素を選択したまま、右下の「Export」の「+」を押すと書き出し設定が出現します。1xと書いてあるのは書き出し倍率で、解像度によって倍率を変えましょう。
書き出し形式はPNG, JPG, SVGなど変えることができます。書き出される画像名は、要素のレイヤー名に対応します。
Inspect機能を使う
右側の操作パネルで「Inspect」をクリックすると選択したオブジェクトのプロパティやタイポグラフィ、色情報が一気に見れます。一括コピーもできます。
1回クリックすると大きなかたまりが選択されますが、もっと細かいパーツのプロパティをみたい場合は ⌘ or Ctrl を押しながら任意のパーツに触れてみてください。
左側にあるレイヤーパネルからも、任意のパーツを選択して見ることができます。
commandを押したままオブジェクトに触れるとPaddingがわかります。
コメント機能を使う
デザインに直接コメントができる機能です。仕様の確認やフィードバックもすべてFigma上でやりとり可能です。コメントも解決・未解決で分けることができるため、コメント対応のステータスがわかりやすいです。
デザインシステムについて
JMDCではFigmaを利用してデザインシステム構築を進めています。
デザインシステムとは、プロダクト内のUIデザイン、体験を一貫したものにするため、デザインを仕組み化することです。
海外企業だと、GoogleのMaterial Design、ShopifyのPolarisやUberのBase Galleryでデザインシステムを実践しています。
内容は、プロダクトビジョンから落ちたデザイン原則、それらを実現するためのデザインのパーツや実装に必要なコード、運用方法など多岐にわたります。
具体例としては、「ボタンの角丸(丸み)はほげpx」「ボタンが押すことができる時は水色」「押すことができない時はグレー」「上下にほげpxの余白」…など、パーツや画面単位で細かいルールを定義し、それをさまざまな画面内で使い回しをできるようにします。
そうすることで、体験に一貫性が生まれるためユーザーが操作に関する学習コストが最小限になります。また、見た目が統一されるためブランディング的な観点でも良いことがあります。
ユーザー、ブランディング観点のほか、内部でのコミュニケーションコスト削減ができるというメリットがあります。しかし、システム化するためルール作りや管理を常に意識したデータづくりが必要という、立ち上げ時にかなりがんばらないといけないのがデザインシステムです。
Pepupでは以下のしくみを採用し、デザインシステムを構築し始めています。
そのほか便利な機能
Figma Community
便利なプラグインやUIのテンプレ、イラストやアイコン、デザインシステム等さまざまなリソースが公開されているコミュニティです。
作り込まれたデザインデータやデザインシステムが無料で見れてしまうので、作り方の参考になります。
FigJam
オンライン上のホワイトボード機能です。ブレインストーミングができたり、フィッシュボーンダイアグラムやユーザーペルソナ作成用のテンプレなども準備されています。UXの設計のタイミングで活用できそうな機能です。
さいごに
アプリケーションインストールなしで、無料で始められる素晴らしいツールなので、企業での導入前に個人で触ってみるのもおすすめです。
今回はデザイナーが制作したデータが触れるようになることを目的とした内容でしたが、Figmaはデザイン制作だけでなく、資料作りなどにも役立ちます。
Figmaを使いこなせられるようになって損はありません！
この記事がデザインツールのハードルの高さを取り除くものであれば幸いです。
