FigmaをProfessional Teamにアップグレードしたらいいことしかなかった&運用方法のおはなし #yjdesignlt
6.1K Views
July 27, 20
スライド概要
2020年7月21日に開催した、勉強会のぞき見企画「Design LT」の登壇資料です。
イベントページ URL はこちらです。
https://yj-meetup.connpass.com/event/181360/
いつもはヤフー社員のみで開催しているLT会の様子を配信でお届けする当企画 （※LTとはライトニングトークの略で、短い時間で行うプレゼンテーションのことです） 業務における課題、それぞれが取り組んでいるデザインなど、さまざまなことをフリーテーマで話します。
2023年10月からSpeaker Deckに移行しました。最新情報はこちらをご覧ください。 https://speakerdeck.com/lycorptech_jp
関連スライド
各ページのテキスト
FigmaをProfessional Teamに アップグレードしたらいいことしかなかった & 運用方法のおはなし ヤフオク! 統括本部 デザイナー 平井 智子
平井 智子 @tohirai 2016年にデザイナーとして新卒入社 ~ 2019年9月 マーケティング系部署でデザイン業務を担当 2019年10月 ヤフオク! の部署に異動 現在はヤフオク! アプリのデザインを担当 女性アイドルが好きです！
おはなしすること • デザインツール周りのおはなし • Figmaのおはなし ü Figmaを使うならProfessional Teamがおすすめ ü Professional Teamでの運用方法（ヤフオク! 編）
ヤフーのデザインツール事情 指定のデザインツールは特にない（という認識）
デザインツール選定の粒度 サービス ・ プロダクト Web App PC/SP iOS/Android ▲ ヤフオク! はこの状況でした チーム 案件ごと
デザインツールの選定の粒度 サービス ・ プロダクト Web App PC/SP iOS/Android ヤフオク! 全体でデザインの管理をFigmaに一貫 チーム 案件ごと
なんでFigma？ デザイン システムの 作成・管理 デザイン プロト 企画への共有 タイピング作成 作業 エンジニアへの 共有 複数のツールを使う必要があった
なんでFigma？ デザイン 企画への共有 デザイン プロト 作業 タイピング作成 システムの 作成・管理 エンジニアへの 共有 Figmaひとつで完結する
なんでFigma？ ü デザインファイルのバージョン管理をしなくていい ü 同時に複数人で編集可能 ü URLを共有するだけでデザインを確認してもらえる （Windowsユーザーでも大丈夫） ü もちろん基本的なコンポーネント管理やライブラリ機能もある ※コンポーネント：SketchのSymbol機能のようなもの …etc
本題1 Figmaを使うならProfessional Teamがおすすめ
本 題 1 Figmaを 使 う な ら Professional Teamが お す す め
ヤフオク!でのFigma利用状況 ヤフオク! デザイナー 代表者 試験的に 導入してみる！ ヤフオク! ヤフオク! iOS Android File File Draft Project
ヤフオク!でのFigma利用状況 ヤフオク! デザイナー 代表者 ヤフオク! デザイナー ヤフオク! ヤフオク! iOS Android File File Draft Project ヤフオク! デザイナー
ヤフオク!でのFigma利用状況 ヤフオク! デザイナー 代表者 ヤフオク! ヤフオク! iOS Android File File Draft Project
ヤフオク!でのFigma利用状況 利用をはじめてわかったこと① 開けません問題 Figmaで作業する人が増える 👇 フレーム（アートボード的なもの）数が増える 👇 ファイルのメモリ制限ギリギリになるとパフォーマンスが悪くなる ファイルのアクティブなメモリ制限は2GB😫
ヤフオク!でのFigma利用状況 利用をはじめてわかったこと① 開けません問題 Figmaが開くまでに時間がかかる メモリエラーのメッセージ 👉 デザイナーの作業効率に支障が出る Figmaの共有リンク押したらPCうなりだした PCの電源落ちる 👉 企画や開発がFigmaでデザインを確認するのが手間になる、確認できなくなる フレームが正しく表示されるまでに時間がかかる 👉 zoomで画面共有をする際に表示したいデザインをみせるまでに時間がかかってしまう
ヤフオク!でのFigma利用状況 利用をはじめてわかったこと② 管理体制問題 ヤフオク! デザイナー 代表者 代表者になにか あったらデータが 全部消えてしまう… Draft Project
ヤフオク!でのFigma利用状況 利用をはじめてわかったこと③ 領域横断でのデザイン統一不可能問題 コンポーネントProject Design System 今のままだと できない Libraryとして読み込み 案件別のProject Web App トップ画面のProject トップ hogehoge画面のProject hoge hoge
本 題 1 Figmaを 使 う な ら Professional Teamが お す す め Professional Teamにアップグレード ＆ Adobe XDを利用していたWeb系のデザインもFigmaに順次移行 とはいえ移行作業はコストがかかるので… Professional Teamで利用開始するのがおすすめ
本題2 Professional Teamでの運用方法（ヤフオク! 編）
本 題 ２ Professional Teamでの運用方法（ヤフオク! 編） ①アカウントについて 有料アカウント（Can Edit） 無料アカウント（Can View） オーナー（偉い人） 企画・PM 他部署関係者 ヤフオク! デザイナー 開発
本 題 ２ Professional Teamでの運用方法（ヤフオク! 編） ② Team内のProject構成について 新規でProjectを 作れるのは 各領域のリーダー （代表者）のみ Team yahuoku Project コンポーネント 共通で利用 トップ 出品 検索結果 各プロダクトの出面別Project … 落札者領域 出品者領域 各領域別の作業用Project …
本 題 ２ Professional Teamでの運用方法（ヤフオク! 編） ② Team内のProject構成について コンポーネントProject ü Library用のFileを格納する場所 ü WebとAppごとにLibraryを作成＆更新
本 題 ２ Professional Teamでの運用方法（ヤフオク! 編） ② Team内のProject構成について 各プロダクトの出面別Project ü 提供している機能別にProjectを作成 • • • • • • トップ画面 出品画面 検索画面 商品詳細画面 マイオク画面 オプション（設定）画面 … ü リリース済みの画面のみをここに格納する
本 題 ２ Professional Teamでの運用方法（ヤフオク! 編） ② Team内のProject構成について 各領域別の作業用Project ü 組織カットの領域別にProjectを作成 • • • バイヤー（落札系）領域用 セラー（出品系）領域用 ストア領域用 … ü 進行or検討中の案件ごとにProjectを作成し、 リリースされたら出面別Projectの方に移行 する
本 題 ２ Professional Teamでの運用方法（ヤフオク! 編） ② Team内のProject構成について 各領域別の作業用Project 👉 案件別にFileを作成することで 企画・開発側も確認が必要なFileだけを 読み込めばいいので 「開きません問題」が解決された
本 題 ２ Professional Teamでの運用方法（ヤフオク! 編） （おまけ）最近の作業内容 各領域別の作業用Project コンポーネントProject Libraryとして 読み込む 案件A App 案件B 案件独自の コンポーネントは 案件のFile内で管理 共通で利用可能な コンポーネントはApp側 でマスター化 Web
EOF ご意見、ご質問お待ちしています
登壇者への質問 アンケートのお願い https://www.sli.do/ で # 65338 を⼊⼒ イベント終了後、もしくは 途中で視聴をやめる⽅へお願いです。 本⽇の感想を教えてください︕ 登壇者への個別質問はメンション （@◯◯さん）を付けてください。 なんでも気軽にどうぞ︕ 良かった点、悪かった点、⼀⾔でも 構いません︕ 今後、オンラインで 開催して欲しいイベントなどもぜひ︕