Developer Meetup Osaka - Twilio Pasteのご紹介

Twilio Developer Meetup @ 大阪 Twilio Paste LT〜 2022/6/24 hmasaki@twilio.com (プロダクトマーケ担当)

自己紹介 ➔ ➔ ➔ ➔ ➔ Twilioに入社して、1.5年強が経過 プロダクトマーケティングを担当（マーケティング部門に所属） コミュニケーションとかコンタクトセンターとかの経歴 Developerではないのでコードは書きません（が、読めます） ❝LT❞するのは今日が初めてで、お作法とか守れていないかもです😁

本日お話ししたいこと〜Twilio Paste ★ ★ ★ https://paste.twilio.design/ 最近Twilioで利用開始されている UI/UXのデザインシステム Twilioコンソール、Twilio Flex 2.0等での利用 皆さんもフロントエンド開発の際にご利用可能です！ 👈 なので今日ご説明しています ..

• https://paste.twilio.design/

Twilio Pasteを‘感じる’ (via デフォルトテーマ) Twilioコンソール (現行版) Flex (‘UI2.0’ 版)

Figmaでデザイン⇒Twilio Pasteの要素を実装⇒Pasteを利用 Twilioのスタッフ Twilioのスタッフ 皆さま @twilio-paste/core @twilio-paste/icons など FigmaでPasteをデザイン ReactアプリでPasteを利用

Twilio Paste で具体的に提供されるもの Figma向けコンポーネント React向けコンポーネント UIプリミティブ ❏ React UIに視覚的にマッチす るFigmaコンポーネントのコレ クション ❏ 視覚的な探索やプロトタイ プの作成に使用 ❏ React UI向けコンポーネントの スイート ❏ ウェブベースのユーザー体験 はこのコンポーネントを利用し て構成 ❏ アクセシビリティ性の高い UIインタラクショ ンまたは振る舞い (低レベルの素材 ) ❏ 特定のUIニーズの出発点として使用 パターン プロトタイプツール 共通で再利用性の高い拡張 可能なTwilio UXのパターン素材 〜 まず既存パターンを検討 し、その後レイアウト、コンポー ネント、プリミティブと検討を進 めることになりそう CodeSandboxesやUI Kitsを利用し、 チームメンバー間でデザイン のアイデアを共有・具現化 トースト ポップオーバー ❏ コンポーネント - https://paste.twilio.design/components/ , ❏ パターン - https://paste.twilio.design/patterns/ セレクト

Components [コンポーネント] ★ Twilio Pasteのなかで頻繁に利用するアイテムかもしれません。定義説明するよりも例を見ていただいた方 が自明かと思いますので、以降で幾つかの例を示します。

コンポーネント例: Alert, Combobox, Data Grid, Date Picker 等

コンポーネント例: Icons, Pagination, Tabs, Toast 等

Patterns [パターン] ★ ★ Componentsの集合です。 「Data export」「Delete」といったパターン名が、ある程度パターンの存在を「説明」してくれているかなと思いま す。

Twilio Paste Remix 〜 実験的なアプリケーション https://paste-theme-designer.netlify.app/ ★ 皆さまのブランディングにマッチするテーマも作成可能

• https://paste-theme-designer.netlify.app/

FIN