概要
- Figma初のデザインシステムを扱ったオンラインイベント
- 事前に登録して招待される形だった
- デザインマネージャー向けを想定してそう
- "デザインシステムマネージャー" なタイトルな人が多い
- 関連カンファレンス
- JST 10/8 0:30~6:30という日本的にはキツい時間帯
- 当日リアルタイムではDiscordとかもあったらしい
- 参加者はFigma Communityで自己紹介カード的なものを作ってた
Conference Kickoff
Sho Kuwamoto, Director of Product at Figma
- 1997年、Macromediaでオーサリングツールを作るチームにいた
- 「HTMLとはPostScriptでは？」
- Postscriptはプリンタ用のプロトコル
- 昔は手書きしていたが、次第にドローイングツール (イラレ) を使うようになり、手書きする人はいなくなった
- DreamWeaverはデザインとコードを行き来するのがビジョンだった
- Postscriptとイラレの関係性は不可逆だった
- DreamWeaverの設計時には再利用性と一貫性を重視した
- 当時はカラーや行間などテキストの扱いがメインだった
- それを実現するためにアセットパネルを作った
- これは先史のデザインシステムであり、現代のFigmaに通じる
- DreamWeaverを作ったものの、人々はPsでデザインし、それをさらにDwでデザインし直していた。奇妙に思った
- DwでできることはHTMLでできること全て
- 逆に言えば、ドローイングツールならドラッグ一つで済むことが、手間がかかる
- だからまずはフリーフォームでPsでデザインし、Dwで構造をデザインし、最後に手でコードを書いて手直しをしていた
- Freeform Design ↔ Structured Design
- 左脳と右脳の違いのように、デザインには非構造化と構造化の2つのプロセスがある
- 2015年。Figmaのビジョンは、ブラウザベース、協調、そしてFreeform DesignにもStructured Designにも使える
- 当時はMaterial、Atomic、Lightning (SFDC) など、構造化の話題が出始めた頃
- デザインシステムを強化することに決めた
- Figmaはツールではなく、シェルのようなもの
- 構造化デザインのための機能を拡充したが、フリーフォームとのバランスには気をつけた
- FreeformとStructuredをスムーズに行き来することはFigmaの大切な原則
- 例えばカラーを自由に使ってから、定義と命名ができる
- 2021
- デザインシステムマネージャーの仕事は、デザイナーを助けること
- デザインシステムから逸脱する (detatchやoverwriteとか) はイライラするが、ときには許容すべき
- 右脳を使った創造的なFreeformのデザインも大事
- FreeformとStructuredを行き来するFigmaは、さらにStructuredとCodeの行き来も助けたい
- Codeに関しては「少し考えなきゃいけない」
- ただ3つの掛け合わせはデザインシステムマネージャーにとって関心事であり、注力したい
Guidance over governance
Jen Yee, Lead Product Designer at Netflix
Luca Orio, Design Manager at Netflix
- 既存UI要素を新しいUIコンポーネントとして取り組む仕組み <ホーキンス>
- ゼロからUIを作らなくても良い
- 膨大な既存アセットカタログみたいな
- 任意の言語による体験を、別の言語でプレビューしてチェックできる
- 会社にとって馴染みのある名前が大事
- ホーキンスProfessionalはスタジオが使う
- C向けのホーキンス、B向けのホーキンスProfessionalの2つのデザインシステム
- タイポグラフィやカラーなどは共通しているが、用法は違ったりする
- C向けはPure Blackを背景に、B向けはDark Grayを。目がつかれるから
- ホーキンスは最初はボランティアベースで作られた
- プロダクト付のデザイナーが数個のコンポーネントを作ってくれた
- Hawking Design SystemのFigmaの中身
- Project: Core, Platform
- Core Project: C向けMobile、C向けTV、C向けWeb、B向けWeb、Foundations
- Foundations: Color, Icons, Textures, "Fun Page"
- Figmaの操作に慣れてもらうためのWSをやったときにつかった
- Platform Project: TV, Web, Mobile
- Coreはデザインシステムチームが、Platformは各プラットフォームチームがメンテしている
- Platfrom Projectは、より各プラットフォーム固有のUI
- TVだったらテレビ用のシークバーなど
- そんなに量は無い
- UIコンポーネントの分け方はよくある感じ
- コンポーネントごとに「Published」「In Progress」とか表記
- メタデータには気配り。Likeアイコンは、Heart, Love, Save, Favでも引っかかるように
- コンポーネントをただ並べるのでなく、ユースケースも添える
- XD Template
- 実際の画面テンプレート集？
- "Moria" Figma Plugin
- Netflix用のアセットパネル
- 韓国映画のアセットだけとか、言語で絞り込める
- 画像だけでなく、あらすじテキストなども差し込める
- イカゲームのタイトル用画像みたいな感じで、用途ごとにアセットがワンクリックで差し込める
- Figmagic
- オンボーディングのコンテンツ集
- 動画あったり、手順書があったりドキュメントが超充実
- FigmaとHawkinsを使ってもらうためにワークショップを何度もした
- Figmaのビギナー向け、エキスパート向けなどでドキュメント用意
- エンジニア向けのドキュメントも
- 派手そうに見えてやってることは超地道
- コンポーネントに何が必要かなど、ホーキンスへのアンケートも四半期ごとにやっている
- 必要なコンポーネントは、プロダクトデザイナーからの投票制で決めている
- 投票が多いほど、優先度が上がる
