みんなのちりつも課題を解決する Dev Mode / デザイナーとエンジニアのためのFigma活用セミナー

3.8K Views

August 29, 24

#デザイン #figma #uiux #デザインシステム #フロントエンド #Figma #DevMode #デザイン開発連携 #プロダクト開発

スライド概要

デザイナーとエンジニアのためのFigma活用セミナーに登壇した際の資料です。デジタルプロダクトの開発の場において、Figmaを活用しデザインと開発のプロセスをどのように改善できるのかについて発表しました。

シンプレクス株式会社

@Simplex

スライド一覧

シンプレクスは1997年の創業以来、メガバンクや大手総合証券を筆頭に、日本を代表する金融機関のテクノロジーパートナーとしてビジネスを展開してきました。現在では、金融領域で培った豊富なノウハウを活用し、金融機関以外の領域でもソリューションを展開しています。2019年3月にはAI企業のDeep Percept株式会社、2021年4月には総合コンサルティングファームのXspear Consulting株式会社がグループに加わり、創業時より付加価値の創造に取り組んできたシンプレクスとワンチームとなって、公的機関や金融機関、各業界をリードする企業のデジタルトランスフォーメーション（DX）の推進を支援しています。

またはPlayer版

埋め込む »CMSなどでJSが使えない場合

（ダウンロード不可）

関連スライド

JJUG CCC 2024 Spring：テストコードが根付くチームを立ち上げるために考えたいこと

java jjug_ccc

シンプレクス株式会社 84.3K

JJUG CCC 2023 Fall : クライアントワークでドメイン駆動設計を活用してみてた

ドメイン駆動設計 ddd java

シンプレクス株式会社 17.8K

JJUG CCC 2024 Fall：Spring ModulithによるDDDとEvent-driven Architectureの実践

jjug_ccc java spring spring-boot spring-modulith modular-monolith アーキテクチャ ddd イベントドリブン

シンプレクス株式会社 16.6K

Gradleと仲良くなる第一歩　～小規模PJから大規模PJへ～

java jjug_ccc gradle

シンプレクス株式会社 15.4K

JJUG CCC 2022 Spring_保険基幹システムのアーキテクチャ_シンプレクスの技術的チャレンジ

基幹システム保険 camunda スキーマレス・アーキテクチャ

シンプレクス株式会社 11.3K

Gaugeで学ぶ実行可能ドキュメントの価値

java jjug_ccc

シンプレクス株式会社 10.9K

各ページのテキスト

みんなのちりつも課題を解決する Dev Mode シンプレクス株式会社 / UIUX Design Office Alceo 中野純也デザイナーとエンジニアのためのFigma活用セミナー @名古屋 2024/08/29

01 自己紹介 / Simplex紹介 02 みんなのちりつも課題 AGENDA 03 みんなでデザインシステムを作る 04 エンジニアチームが自走するまで 05 ラップアップ！ 06 プロモーション 1

01 自己紹介 / Simplex紹介中野純也 UIUX Design Studio Alceo 滋賀県出金融系システムのエンジニアからPMになり、デザイナーシンプレクスによるデザイン組織（Alceo）立ち上げのメンバー今の興味はデザイナーとエンジニアでどういいチームを作れるか UIデザインもやります。UXデザインもやります。たまに仕様書も書きます。主なプロジェク野村證券株式会社『NOMURA』アプデジタル庁マイナポータル新フロント（Webアプリ）← Now 2

01 自己紹介 / Simplex紹介 Simplex ? DXに必要なのはハイブリッドなパートナーシンプレクスは1997年の創業以来、メガバンクや大手総合証券を筆頭に、日本を代表する金融機関のテクノロジーパートナーとしてビジネスを展開してきました。現在では、金融領域で培った豊富なノウハウを活用し、金融以外の領域でもソリューションを展開しています。 2019年3月には「AI企業のDeep Percept株式会社」、2021年4 月には「総合コンサルティングファームのXspear Consulting 株式会社」がグループに加わり、また「CX/UX/UIデザインを提供するAlceo」が生まれ、創業時より付加価値の創造に取り組んできたシンプレクスとワンチームとなって、公的機関や金融機関、各業界をリードする企業のDXの推進を支援しています。 3

Alceo（アルセオ） 01 自己紹介 / Simplex紹介多様なバックボーンを持つデザイン集団ビジネス・デザイン・開発を一気通貫で提供開発にコミットしたデザイン多様なバックボーンを持つデザインチームがデザインパートナーとして伴走プロフェッショナルが集結し、コレボレーションすることで戦略、設計、デザイン、開発、グロースを一気通貫で提供机上の空論ではなく、実現性・実用性を考慮した課題解決力のあるサービス、プロダクトをデザインブランディング Business マーケティング Profitable B リサーチ Design Partner サービスデザイン技術企画 (MOT) UX/UI デザインプロダクト開発エンジニアリング T 戦略・企画・マーケティングサービスプロダクトデザインエンジニアリング UIデザイン Technology Feasible サービスデザインブランディング C デザインユーザー中心 Creativity Useful Technology Feasible Alceo Design Creativity Useful 実現性・実用性を考慮した、課題解決力のあるデザイン 4

01 自己紹介 / Simplex紹介 02 みんなのちりつも課題 AGENDA 03 みんなでデザインシステムを作る 04 エンジニアチームが自走するまで 05 ラップアップ！ 06 プロモーションデザイナーとエンジニアの垣根がより低く 5

02 みんなのちりつも課題デザイナー、エンジニア、マネージャーみんながプロダクト開発においていくつかの課題をかかえている 6

02 みんなのちりつも課題デザイナーが抱えていた課題 7

デザイナーが抱えていた課題 02 みんなのちりつも課題レイアウト少しずれてるな... そこまで大きな差は無いし今後のリリースで改善してもらう今はもっとやることあるし... 8

10.

02 みんなのちりつも課題デザイナーが抱えていた課題（リリースされているプロダクトを見て）画面ごとになんで違うんだろう... コンポーネント使ってくれてないのかな... まぁ利用者はきっと気づかないくらいの差だしタイミング見て直してもらおう 9

11.

デザイナーが抱えていた課題 02 みんなのちりつも課題文言の変更やリストの並び替えインスタンスのプロパティの変更などエンジニアでデザインできるところもありそう... やってくれると嬉しいな〜 10

12.

02 みんなのちりつも課題エンジニアが抱えていた課題 11

13.

エンジニアが抱えていた課題 02 みんなのちりつも課題このデザインデータのパディング16pxかということは、（脳内変換して）lg だなよし、lgと… （はじめからlgって見えたらいいのに） 12

14.

エンジニアが抱えていた課題 02 みんなのちりつも課題いちいちデザイナーに細かい修正をやってもらうの申し訳ないな... 時間かかる時もあるしちょっとめんどくさいな... 先に実装やっちゃうか 13

15.

エンジニアが抱えていた課題 02 みんなのちりつも課題いつもデザイナーにアセットの書き出しやプラグインの実行お願いしてる... 自分たちでもできるとお互い効率的になりそう 14

16.

17.

マネージャーが抱えていた課題 02 みんなのちりつも課題デザイナーのコストをもっと効果的なところにかけたいな... 継続的にエンジニアとコミュニケーション取るのは大事だけど勿体無いところないのかな... けど、一緒に動いてもらった方が安心だしな... 16

18.

マネージャーが抱えていた課題 02 みんなのちりつも課題スプリントレビューなど実機で開発された画面を見た時になんかちょっと違う気がする... デザイナーに聞きたい... いない...また聞こう... （忘れる） 17

19.

マネージャーが抱えていた課題 02 みんなのちりつも課題そもそも。もっと効率よく一貫性を保った開発できないのかな 18

20.

21.

02 みんなのちりつも課題ちりつも課題小さい課題は少しずつ積もり改善したいものに 20

22.

それぞれが抱えている課題 02 みんなのちりつも課題デザイナーレイアウトが少しずれていても後回しにしてしま少しの修正はエンジニアでもできるようになってくれると楽だコンポーネントをせっかく作ったのに実装と違う定義になっている ©2024 Simplex Inc. エンジニアこのデザインデータのパディング16px かということは、（脳内変換して）lg だなよし、lgと…（はじめからlgって見えたらいいのにちょっとしたメモをFigmaに書きたいけどコメントだと見えずらいしデザインファイルいじると壊しちゃいそうスクショしよマネージャーデザイナーのコストをもっと効果的なところに配置したいな、けどエンジニアと一緒に動いてもらった方が安心だしなんかちょっと違わない？デザイナーどうなの？いないじゃん。。また聞こもっと効率よく、一貫性を保った開発できないのかな。 21

23.

02 みんなのちりつも課題鍵となるDevModeの機能 1. 2. 3. プログラミング時に使う変数やプコンポーネントが取りうるパター Dev Mode では一部のプラグインロパティーがFigma上で確認できンを⁩Playground Viewで見ることが実行できます。るので、脳内変換の時間やミスがができます。開発に特化したプラグインもあり減り、デザインされたものとの違コンポーネントの実装がしやすくますし、variablesをトークンとしいが限りなく小さくなる。なり、デザイナーがコンポーネンて出力することも編集権限がなくトのパターンをみやすく可視化すとも実行できます。 Inspect Playground Plugin る工数が減ります。 22

24.

01 自己紹介 / Simplex紹介 02 みんなのちりつも課題 AGENDA 03 みんなでデザインシステムを作る 04 エンジニアチームが自走するまで 05 ラップアップ！ 06 プロモーションデザイナーとエンジニアの垣根がより低く 23

25.

03 みんなでデザインシステムを作るデザインシステムの構築フロー歩み寄り UIデザインコンポーネント開発デザインシステムの構成検討 FigmaでUIデザインこういうフロントエンド開発構成にしたいをぶつけ合うスタイル定義作成、コンポーネント作成スタイル定義・コンポーネント開発 Figmaで定義(表現)できること StoryBookで定義(表現)できることを共有定義されたスタイルとコンポーネントで UIデザインアクセシビリティテスト何を定義しどこまで共通化するかをすり合わせ新しいコンポーネントやスタイルが必要な場合チケットのステータス更新デザイナーレビュー StoryBook作成画面開発プロダクトコード開発画面開発すり合わせ用のスタイル定義とコンポーネントのを作成 24

26.

03 みんなでデザインシステムを作るデザインシステムの構築フロー歩み寄り UIデザインコンポーネント開発デザインシステムの構成検討 FigmaでUIデザインこういうフロントエンド開発構成にしたいをぶつけ合うスタイル定義作成、コンポーネント作成スタイル定義コンポーネント開発 Figmaで定義(表現)できること StoryBookで定義(表現)できることを共有定義されたスタイルとコンポーネントで UIデザインアクセシビリティテスト何を定義しどこまで共通化するかをすり合わせ新しいコンポーネントやスタイルが必要な場合チケットのステータス更新 StoryBook作成・画面開発プロダクトコード開発画面開発ナレビューデザイーすり合わせ用のスタイル定義とコンポーネントのを作成 25

27.

03 みんなでデザインシステムを作る構成検討時の活用変数やプロパティを実装のイメージが持ちやすい FigmaのUIをみながらどのようにデザインシステムを構築すべきかエンジニアとデザイナーが一緒に検討できる。 26

28.

03 みんなでデザインシステムを作る変数定義の例 Variablesを使って変数定義ができます。どういった変数が定義されているか DevModeのプラグインを使って開発者自身で出力できる。結果、デザイナーからエンジニアへの効率の悪いコミュニケーションを削減。 27

29.

03 みんなでデザインシステムを作るコンポーネントのプロパティーコンポーネントのパターンをDevModeのPlaygroundのViewで Storybookなどエンジニア目線のUIコンポーネントライブラリーと同じような見た目で見える。 28

30.

31.

03 みんなでデザインシステムを作るコンポーネント開発時の活用 DevModeでUIを見ると、定義された変数が画面上に確認できる。それにより、エンジニアが脳内変換するコストを減らせる。変数をデザイナーが適用していない場合、正いかをデザイナーに確認するフローも生まれプロダクト全体としてより一貫性が保たれる。 30

32.

01 自己紹介 / Simplex紹介 02 みんなのちりつも課題 AGENDA 03 みんなでデザインシステムを作る 04 エンジニアチームが自走するまで 05 ラップアップ！ 06 プロモーションデザイナーとエンジニアの垣根がより低く 31

33.

04 エンジニアチームが自走するまでエンジニアチームが自走してデザインを進めるサポート UIデザインレクチャーデザインシステム構築伴走デザインレビュー 32

34.

04 エンジニアチームが自走するまでモブデザインしながら UIデザイン方法をレクチャーエンジニアにデザインシステムが組まれた状態で既存の変数やコンポーネントを使ってUIデザインをすることは実際のコーディングに近い。 Figmaを使ったUIデザインをレクチャーする時に大事なことは UIの構造やどの単位がコンポーネントなのかを伝えることが大事。 33

35.

04 エンジニアチームが自走するまでデザインレビューのコストが圧倒的に低いここまで来ると、開発チームの中でも Figmaでのデザインやデザインシステムの理解が深くなる。お互いの共通言語が出来上がっているので短いデザインレビューの時間の中で “本質的な”利用者目線のFBや、細かいUIのFBも効率的に可能。 34

36.

01 自己紹介 / Simplex紹介 02 みんなのちりつも課題 AGENDA 03 みんなでデザインシステムを作る 04 エンジニアチームが自走するまで 05 ラップアップ！ 06 プロモーションデザイナーとエンジニアの垣根がより低く 35

37.

Dev Modeで課題を解決 Dev Modeを活用することでエンジニアがよりFigmaを触る時間が増えることでデザインに対する興味が強くなった感覚があります。 Inspect Viewなどで開発しやすくなることはもちろん。開発チームが自らデザインするようになることでチームとしてデザインに対する意識が高くなりました。 36

38.

05 ラップアップ! Figmaを通じてデザインがより身近なものになり UIUXデザインを意識するメンバーが自然と増えるより効率よく、より効果的なプロダクト開発のチームに 37

39.

01 自己紹介 / Simplex紹介 02 みんなのちりつも課題 AGENDA 03 みんなでデザインシステムを作る 04 エンジニアチームが自走するまで 05 ラップアップ！ 06 プロモーションデザイナーとエンジニアの垣根がより低く 38

40.

06 プロモーションあらゆる事業のWeb2.0からweb3へのアップデートを加速させる「web3統合プラットフォームソリューション」特長 01. SaaS型で直ぐにweb3ビジネスを立ち上げ 02. サービスと組み合わせ企画・PoCで終わらせない 03. 他のソリューションと組み合わせることで事業を拡大 04. デジタルアセットを安心・安全に管理 39

41.

06 プロモーション “自分たちらしさをカタチに、ゲストが笑顔” をコンセプトに SMASEKIは招待状・席次表をスマホに詰めこみました特長 01. 招待状との連携で、ゲストの入力が楽々 02. 何度でも・直前まで編集可能。直前の出欠席変更や修正も安心 03. お式当日のアルバム作成、チャット投稿 04. アルバムに投稿された写真をスクリーンに投影 40

42.