新卒2年目のデザイナーの梶原です。
10月末に普段から業務で使用しているデザインツール「Figma」のオンラインイベントに参加してきました。
こちらは一般的なテックイベントとは一味違っていて、なんと夜の21時から朝の5時まで夜通しでFigmaの活用法を学ぶことができるという驚きの内容になっています...！
「朝までFigma」という名前の通り8時間というかなりの長丁場にも関わらず、申し込み数は3,000人超、総視聴数は7,931人という大盛況ぶりを博していました。
私自身も眠気を恐れつつ参加してみたのですが、興味深い内容が盛りだくさんでしっかり朝まで観てしまいました笑
この記事ではイベントに参加してみた感想と、特に印象に残ったセッションについてご紹介していきたいと思います！
イベント概要
「朝までFigma」は23組のスピーカーが10分ずつセッションを行う形式です。
このイベントはシリーズものになっていて「朝までイラレ」「朝までマークアップ」などが過去に開催されてきていました。
今回はFigmaがテーマということで、発表スライドも多くが最近実装された新機能の「Figma Slides」で作られていました。
どのスライドもデザイン性が高く非常に凝った作りになっていたのもすごく良かったです☺️
特に印象的だったのは、全セッションが実演形式で行われたことです。
実務に直結する具体的なデモが多く、視覚的に理解しやすくとてもありがたかったです。
登壇者には国内外のFigmaに精通したデザイナーが揃い、実践的な内容からトリビア的な知識まで幅広く学ぶことができました。
イベントの進行役はFigma Japanの方が担当されていて、コメントの質問に直接お答えいただいたり、Figmaの裏話を伺えたりといった充実した内容に加え、オープニングではFigmaのラップ(!?)が披露されるなど、8時間があっという間に感じられるプログラム構成でした。
印象に残ったセッション
中でも特に印象に残った2つのセッションについてご紹介します。
今回学んだ内容をもとに、実際にFigmaで手を動かしてみました。
💡「エンジニアに伝わる実装しやすいモックアップのつくりかた」
このセッションでは、
・デザインの基本は「構造化」であること
・エンドユーザーだけでなくプロダクトを一緒に作るメンバーにも正しく分かりやすく情報を伝えるべき
・そのために実装しやすいモックアップを作成することが重要
であると紹介されました。
Connector Line 機能
他メンバーに画面フローを分かりやすく伝える機能の一つとして紹介されていたのが「Connector Line」機能です。
矢印を生成するツールなのですが、
・画面や要素を移動しても矢印が自動で追従する
・矢印上にテキストを追加して、条件分岐やステップをわかりやすく可視化できる
といった特徴があります。
実はこちらはFigmaの機能ではなくホワイトボードツール「Figjam」の方の機能らしいのですが、コピペすることでFigmaでも使えるようになるとのことでした。
以下実際に使ってみました。
Before
今まで作成していた画面フローは、
・矢印とそのメモ、コメントなどの要素が複雑でごちゃごちゃしている
・画面を移動する際、矢印やコメントも手動で移動する必要がある
など修正のたびに手間もかかるし、他にFigmaを見るメンバーの方々にとっても親切な設計ではないなあと感じていました。
After
今回「Connector Line」機能を使って画面フローを再度作成してみました。
→ Connector Lineが要素に自動で追従するので、移動や編集がスムーズになった
→ テキストやリンクを入れられるので条件分岐や遷移先が直感的に理解できる
画面をかなりシンプルで分かりやすい構成にすることができました！
今まではちまちまと要素を手動で動かしていたので、自動で追従する機能はかなりありがたかったです🙏
💡「デザインシステムの実例から見るFigma Component設計の流儀」
このセッションでは、
・デザインシステムを作る上で「Figma利用者の使いやすさ」を第一に考えて最適解を模索することが大切
・FigmaにはさまざまなPropertyの作り方があるが、「Figma利用者の使いやすさ」にフォーカスしてFigmaの機能を使い分けていくべき
といった見る人が分かりやすいコンポーネント設計についての内容が展開されました。
Before
セッションでは、「任意」「必須」のバッジが付与された入力フォームを作成するパターンで紹介されていました。
一般的な作り方として、「none」(バッジ非表示)「optional」(任意バッジあり)「callout」(必須バッジあり)といった複数のバリアントを作成する、といった方法が挙げられます。
ですが、これだとプロパティパネルを開いてもそれぞれの選択肢のテキストのみが表示されるため「どのバリアントがどの状態を表しているのか」が直感的に理解しづらいという課題がありました。
改善策
この課題を解決するために、以下の2つの機能を組み合わせた設計が鍵となります。
Boolean property:
Booleanとは、表示・非表示を切り替えられる機能です。
Figmaではこれで設定されたプロパティはトグルボタンで簡単に表示のオンオフを切り替えることができます。
Instance swap property:
Instance swapは、コンポーネント内のインスタンスを明示的にスワップ（入れ替え）できる機能です。
どのインスタンスに切り替え可能かをプレビューで確認しながら入れ替えることができます。
以下の手順でこの機能を使用してみます。
-
「必須」と「任意」バッジのコンポーネントをそれぞれ作成
-
Text Fieldのコンポーネントにインスタンスとして代入する
-
このインスタンスに Boolean propertyを設定
-
さらに Instance swap (インスタンスの入れ替え)を設定。
※このときにプロパティ名を 「 └ Text」 とするのがポイント！
After
改善の結果、以下のような設計を実現することができました。
・Boolean propertyによって、表示・非表示の切り替えがトグルボタンで直感的に行える
・Instance swapによって、バッジの種類をプレビューで確認しながら簡単に変更できる
・さらにプロパティ名を 「 └ Text」 として擬似的に階層を示すことで上部のトグルボタンとの関連を示せる
Boolean propertyで必須バッジの表示・非表示を切り替えつつ、Instance swapでバッジの種類を選択可能にする。さらに、Property名を擬似階層化することで直感的な操作をすることが可能になりました。
業務を行う中で、Figmaファイルをエンジニアやディレクターの方々だけでなく、クライアントをはじめとした外部の関係者に共有される機会が増えてきました。
この2つのセッションのようにFigmaの機能をフル活用して、どの人が見てもスムーズに内容を理解できるよう、Figmaの構成を整えておくことは非常に重要であると改めて実感しました！
今回学んだ画面フローの作り方やコンポーネント設計のコツを活かして、見る人が理解しやすいデザインシステムの構築を少しずつでも進めていこうと考えています💪
「朝までFigma」に参加してみて
「8時間は途中で挫折してしまうかもな...」と参加前は思っていたのですが、時間が過ぎるのがあっという間に感じるほど大満足な内容でした！
イベント後、学んだ知識をもとにFigmaを触ってみたのですが、以前よりも視野が広がってサクサク動かせている感じがしたのも嬉しかったです。
イベントを通じてFigmaの可能性を改めて実感しました。
Figmaの持つ設計の柔軟性を存分に活かせるよう、今後とも知見を深めていきたいです。
また、次回は2025年1月に「朝までマークアップ2 (CSS編)」というイベントが開催されるそうなのでこちらも覗いてみようかと考えています。
気になる方はぜひチェックしてみてください！
https://cssnite.doorkeeper.jp/events/179874