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

iCAREにおけるデザイナーとフロントエンドエンジニアのコラボレーション

watsuyo_2
October 20, 2021
6.1k

 iCAREにおけるデザイナーとフロントエンドエンジニアのコラボレーション

【iCARE Dev Meetup #26】 デザイナーとフロントエンドエンジニアを繋ぐ技術
https://icare.connpass.com/event/224693/

Twitter: https://twitter.com/watsuyo_2
iCAREの採用情報: https://herp.careers/v1/icare

watsuyo_2

October 20, 2021
Tweet

More Decks by watsuyo_2

Transcript

  1. 現状の iCARE が抱えているデザインフロー課題 XD の数値(px 等) がアバウトなままフロントエンドに渡ってくる フロントエンドはお気持ちを汲んで実装している デザインファイルはGoogle Drive

    でフォルダー管理している バージョンによってURL が変わるため見ているバージョンが人によって 異なる場合がある フロントエンドエンジニアとデザイナーの両方を統括するリーダーがいない #icare_meetup | iCARE ではエンジニアとデザイナーを募集中 「iCARE 採用 herp 」 11
  2. Storybook の理想と現実 理想 フロントエンドエンジニアはStorybook のドキュメントを見て実装する デザイナーはStorybook のコンポーネントを確認してデザイン実装する 現実 一部のフロントエンドエンジニアだけが、Storybook のドキュメントを整備

    し、参考にして実装をする 一部のデザイナーがStorybook の規定をしたり、参考にデザインを実装をする #icare_meetup | iCARE ではエンジニアとデザイナーを募集中 「iCARE 採用 herp 」 25
  3. メンバーへの Storybook 普及に何をしたら良いだろう か ? 実際にStorybook 上ででコンポーネントを試しに使える機能がある Storybook Docs Addon:

    https://storybook.js.org/docs/react/writing- docs/introduction #icare_meetup | iCARE ではエンジニアとデザイナーを募集中 「iCARE 採用 herp 」 30
  4. デザインシステム PJ で Figma を試した コンポーネント設計をフロントエンドエンジニアとデザイナーで行い、ホワ イトボードに書いた設計図を簡素化してFigma に転記 転記は2 度手間になるので直接、Figma

    上で完結できるのが理想ではある Figma 内のコンポーネントからあコピペで設計できる環境が理想 #icare_meetup | iCARE ではエンジニアとデザイナーを募集中 「iCARE 採用 herp 」 34
  5. デザインシステム PJ で Figma を試した フロントエンドエンジニアがデザインツールを触ることによって、他のフロ ントエンドメンバーに設計を伝えやすくなった master のデザインファイルではないので、誰でも編集ができてURL も固定な

    ので嬉しい デザインをレイヤーごとに管理できる コンポーネント管理ができるのでデザインの一貫性が保てる バージョン管理できる #icare_meetup | iCARE ではエンジニアとデザイナーを募集中 「iCARE 採用 herp 」 35