最新ツールを駆使したデザインから実装、そして プロトタイプまでのシームレスな流れ SIer/情シス向け「ITとデザインは仲良し︕」シリーズ 第9回 2021/12/9 デザインとフロントエンド最先端！

1. スピーカーの紹介 2. 登場⼈物（ツール）のご紹介 3. デザイン・実装課題 4. デザインから実装までのプロセス 5. まとめ 今⽇の内容

● Moreno Quiroga Jacobo => モレノ キロガ ハコボ ● コロンビア（南⽶）出⾝で2013年来⽇ ● デザインの背景を持つエンジニア ● Fixel株式会社でフロントエンド実装、デザインシステム実装に努める スピーカー

今⽇の登場⼈物（ツール）のご紹介

UXHub デザインシステム制作と 運用のための SaaSプラットフォーム Fixel Design System 業務システム向け汎用的 デザインシステムの テンプレート UXPin Merge 実装したUIコンポーネントを使 ったプロトタイピングツール & https://www.uxpin.com/merge https://uxhub.tokyo UXPin Merge https://uxhub.tokyo & 今⽇使⽤するツール

● Fixel Design Systemの略 ● Fixel株式会社が開発している汎⽤的なデザインシステムのテンプレート ● 汎⽤的なデザインガイドラインと再利⽤できるUIコンポーネントのコードを 提供 FDSとは

● デザインシステムを⼿軽に制作・運⽤できるSaaSプラットフォーム ● FDS、または他の既存のデザインシステムを複製してカスタマイズすること で、デザインシステムの量産ができる ● ⾃由にカスタマイズ可能 ● Figmaのスタイルをインポートすることでデザインを変更 ● UXHubのUIでデザイントークンを変更することでデザインを変更 ● デザインシステムの管理に必要な機能を提供 ● 履歴管理 ● バージョン管理 ● UIコンポーネントのダウンロードなど UXHubとは

● コーディングされたUIコンポーネントを使って⼿軽にプロトタイピングを作 成できる ● 既にあるUIコンポーネントを使って、デザイナーだけではなく、ビジネスパ ーソンやエンジニアでもプロトタイプを作成可能 UXPin Mergeとは

デザイン・実装課題 ● FDSをカスタマイズして、UXPin Mergeに使えるようにする ● UXPinで作った画⾯をコードに使う

デザインから実装までのプロセス

❶ デザインの カスタマイズ ❷ UIコンポーネントに デザインの変更を 適用 import ❸ プロトタイピング 実コード に適用 ❹ UIコンポーネント の構成 ❺ UIコンポーネント プロダクト デザイン 適用

❶ デザインのカスタマイズ︓ FDSのFigmaテンプレートを使ってデザインをカスタマイズする その流れ： 1. FDSのFigmaファイルを複製する。 2. Figma上でDesign Tokensを好きなように変更する。 <実装/>

❷ UIコンポーネントにデザインの変更を適⽤︓ UXHubにデザイントークンを登録する その流れ： 1. UXHub上でFDSを複製する。 2. 「Figma連携」ツールを使用して、デザイントークンをインポートする。 <実装/>

❸ プロトタイピング︓ UXPin Mergeと繋いだFDSを更新して、プロトタイピング その流れ： 1. FDSが入ったUXPinのboilerplateを更新する 2. デザイナーはFDSのコンポーネントの見た目や属性を変えたり、画面上に配 置して、プロトタイプを作成 3. エンジニアはプレビューのSpecのタブから、実装に必要なコードを入手 <実装/>

❹ UIコンポーネントの構成︓UXPin ❺ UIコンポーネント︓UXHub プロダクトのコードに反映： 1. UXHubからUIコンポーネントを入手して反映 2. UXPinからUIコンポーネントのレイアウトされたコードを入手して反映 <実装/>

まとめ

❶ デザインの カスタマイズ ❷ UIコンポーネントに デザインの変更を 適用 import ❸ プロトタイピング 実コード に適用 ❹ UIコンポーネント の構成 ❺ UIコンポーネント プロダクト デザイン 適用

今⽇お⾒せしたことは、 ● FDS、UXHub、UXPin Mergeを駆使すると、ほぼノーコードでフロントエンドのコー ドが作成できる ● ただし、UXPin Mergeは事前準備をきちんとしておく必要はある ● デザイナーとエンジニアの密な協業が必要 ● デザイナーとエンジニア間のハンドオーバーの課題を解決できる⽷⼝は⾒えてきた ● 今回はデモのために全部繋いだけど、各ツールを適材適所に使うこともあり︕ ● FDS︓デザインシステムのテンプレート ● UXHub︓デザインシステムの制作、管理を⼿軽に ● UXPin Merge︓誰でもプロトタイピング︕ ● 将来に期待︕

最後に

20 Fixelのデザインシステムの作成・運⽤⽀援サービス • デザインシステムカスタマイズ • デザインシステム公開 • デザインテーマ変更機能 • コメントなどフィードバック • 公開・編集などの権限管理 • バージョン管理・履歴管理 UXHub デザインシステムプラットフォーム • 必要なガイドライン、UI部品が揃 っている • 複製&カスタマイズすることで新 しいデザインシステムを瞬時作成 可能 Fixel Design System 業務システム向け汎用的 デザインシステムのテンプレート • 多数の実績からのノウハウ • UXHubとFDSを有効活用し、費 用低減・工期短縮 プロフェッショナルサービス デザインシステム作成・運用支援 ＋ ＋ https://fixel.co.jp/lp/design-system/ https://uxhub.tokyo

MAKE DESIGN EASY SIer/情シスのデザインパートナー Q&A

最後に ● デザインシステムに興味があるデザイナーを募集しております。 ● 業務システムのUX/UIデザインに興味があるデザイナーを募集しています。 ● 周りに興味のありそうな⽅に、 是⾮ご紹介ください。 ● 申し込みは弊社のウェブサイトから お願いします︕ https://fixel.co.jp/blog/recruit-20210929/

MAKE DESIGN EASY SIer/情シスのデザインパートナー ありがとうございました︕ アンケート記⼊のお願い