Upgrade to Pro — share decks privately, control downloads, hide ads and more …

デザインとフロントエンドの最先端! 最新ツールを駆使したデザインから実装、そしてプロトタイプまでのシームレスな流れ【第9回】

Fixel Inc.
December 14, 2021

デザインとフロントエンドの最先端! 最新ツールを駆使したデザインから実装、そしてプロトタイプまでのシームレスな流れ【第9回】

Fixel Inc.

December 14, 2021
Tweet

More Decks by Fixel Inc.

Other Decks in Design

Transcript

  1. • Moreno Quiroga Jacobo => モレノ キロガ ハコボ • コロンビア(南⽶)出⾝で2013年来⽇

    • デザインの背景を持つエンジニア • Fixel株式会社でフロントエンド実装、デザインシステム実装に努める スピーカー
  2. UXHub デザインシステム制作と 運用のための SaaSプラットフォーム Fixel Design System 業務システム向け汎用的 デザインシステムの テンプレート

    UXPin Merge 実装したUIコンポーネントを使 ったプロトタイピングツール & https://www.uxpin.com/merge https://uxhub.tokyo UXPin Merge https://uxhub.tokyo & 今⽇使⽤するツール
  3. • デザインシステムを⼿軽に制作・運⽤できるSaaSプラットフォーム • FDS、または他の既存のデザインシステムを複製してカスタマイズすること で、デザインシステムの量産ができる • ⾃由にカスタマイズ可能 • Figmaのスタイルをインポートすることでデザインを変更 •

    UXHubのUIでデザイントークンを変更することでデザインを変更 • デザインシステムの管理に必要な機能を提供 • 履歴管理 • バージョン管理 • UIコンポーネントのダウンロードなど UXHubとは
  4. ❶ デザインの カスタマイズ ❷ UIコンポーネントに デザインの変更を 適用 import ❸ プロトタイピング

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

    実コード に適用 ❹ UIコンポーネント の構成 ❺ UIコンポーネント プロダクト デザイン 適用
  6. 今⽇お⾒せしたことは、 • FDS、UXHub、UXPin Mergeを駆使すると、ほぼノーコードでフロントエンドのコー ドが作成できる • ただし、UXPin Mergeは事前準備をきちんとしておく必要はある • デザイナーとエンジニアの密な協業が必要

    • デザイナーとエンジニア間のハンドオーバーの課題を解決できる⽷⼝は⾒えてきた • 今回はデモのために全部繋いだけど、各ツールを適材適所に使うこともあり︕ • FDS︓デザインシステムのテンプレート • UXHub︓デザインシステムの制作、管理を⼿軽に • UXPin Merge︓誰でもプロトタイピング︕ • 将来に期待︕
  7. 20 Fixelのデザインシステムの作成・運⽤⽀援サービス • デザインシステムカスタマイズ • デザインシステム公開 • デザインテーマ変更機能 • コメントなどフィードバック

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