なぜ今必要？Figma×SmartHR×DMM.com×一休エンジニア視点で考えるデザインシステム

Slide 1

Slide 1 text

#Offers_DeepDive Figmaで効率化するデザインシステム開発と運用 Hiroki Tani Designer Advocate, Figma

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

Figma https://www.figma.com

Slide 4

Slide 4 text

Figma Design FigJam Dev Mode Figma Slides

Slide 5

Slide 5 text

デザインシステムとは？

Slide 6

Slide 6 text

“Salesforce Lightning Design System（SLDS）は、あらゆるアプリケーションにおいて、一貫性があり効率的で美しいユーザー体験を提供できるようにする、アクセシブルかつクロスプラットフォームなデザインツールをチームに提供します。” Lightning Design System, Salesforce

Slide 7

Slide 7 text

“PrimerはGitHubのデザインシステムです。ガイドラインやコンポーネント、ツールを通じて、GitHubのチームが一貫性があり、アクセシビリティに配慮したプロダクト体験を構築できるよう支援します。” Primer, GitHub

Slide 8

Slide 8 text

“NeptuneはWiseのデザインシステムで、基礎的なスタイルやコンポーネント、ガイドラインを提供し、世界中の顧客に向けて魅力的かつ一貫した体験を構築するための仕組みを整えています。” Neptune Design System, Wise

Slide 9

Slide 9 text

“SLDSを使用することで、、Lightning Experienceの外観と操作感を備えたアプリケーションを構築できます。” 1行も CSSを書くことなく “Primerを用いることで、GitHub内のすべてのインターフェイスに共通のデザイン言語を適用し、します。” 開発スピードの向上・一貫したユーザー体験・保守しやすいコードベースを実現 “Neptuneを使うことで、製品チームは、機能を素早く提供し、毎回デザインパターンを作り直すことなく国際送金など金融サービスの体験向上に集中できるようになります。” ブランドアイデンティティを統一しつつ What ARE their purpose?

Slide 10

Slide 10 text

デザインシステムの定義と目的はそれぞれ。 ...とはいえ構成する要素として共通したものがある

Slide 11

Slide 11 text

Figma で出来ること Variables & Styles Components Documentation Code Connect

Slide 12

Slide 12 text

What can Figma do? Variables & Styles s 色などの要素を変数のように一元管r s 意図を明確にした命名で用途を理H s プラグインやAPIを用いてコードと同期

Slide 13

Slide 13 text

What can Figma do? Components p 再利用可能なUIをライブラリとして  一元管E p インスタンスを組み合わせてUIを構2 p コンポーネントプロパティやバリアント  でパターンを定義

Slide 14

Slide 14 text

What can Figma do? Documentation Y コンポーネントやスタイルなどの  説明を記S Y ドキュメントへのリン) Y コンポーネント仕様の設定（優先インスタンスの設定）

Slide 15

Slide 15 text

What can Figma do? Code Connect I Figmaのデザインコンポーネントと  実装コンポーネントを同) I コンポーネントの実装の有無を  インスペクトから確認

Slide 16

Slide 16 text

Figmaをどう活用するかも各社それぞれ。

Slide 17

Slide 17 text

矢澤明佳さん株式会社一休高井実さん合同会社DMM .com uknmrさん SmartHR このあと皆さんからの話をお楽しみに！ #Offers_DeepDive