Skip to contentSkip to navigationSkip to topbar
Figma
Star

Paste Design System Newsletter - April 2022 Edition

Paste
Paste

🚀 What's new

🚀 What's new page anchor

Paste goes international!

Paste goes international! page anchor
An example of Paste's form-pill-group component in French

To better support Twilio’s global efforts, Paste now supports all P1 languages. This includes a mechanism to swap the font for non-latin character sets, such as Japanese, to get a really crisp UI.

There are some components that need a bit of extra attention when being used for multiple languages (for example, Anchor requires an additional prop for i18n). Look for an "internationalization" example on component docs pages to know whether a given component needs any updates in order to be translated into other languages.

Paste Dark theme is ready for you!

Paste Dark theme is ready for you! page anchor
An screenshot of the dark theme toggle on the Paste website, with dark theme selected

We are excited to share that the Dark theme is coming out of early preview and is ready for general availability! We incorporated your feedback (buttons are fixed, y’all!), and we brought the Dark theme up to our accessibility and inclusive design standards. The Dark theme improvements are now live on the Paste site, so head on over and switch the toggle in the topmast to “Dark” to check it out.

Check out the Dark Theme

The Badge component enters Stage 2

The Badge component enters Stage 2 page anchor
The new and improved Badge component in Paste

A big Badge component update improves the look in both the default and dark themes, as well as improving the interactivity for clickable Badges. We’ve also introduced “decorative” variants that can be used for attributes that don’t have a semantic meaning but would still benefit from the visual hierarchy of a Badge.

Check out the Badge component

Introducing the Filter Group pattern

Introducing the Filter Group pattern page anchor
Screenshot of a Filter Group pattern example

Many of Twilio’s interfaces involve displaying data in tables. Some tables are so complex that our users need an easy way to navigate the data. Introducing the Filter Group pattern; with this guidance we hope to better serve the customer by improving consistency in filtering throughout Twilio products. Thank you to our committee members for working through this complex design challenge with us!

Check out the Filter Group Pattern

New Data Visualization foundations

New Data Visualization foundations page anchor
Screenshot of a line chart using Paste data visualization tokens

Representing data with visualizations is a tremendous UX improvement when used appropriately, however it’s a challenge getting the UI right. Paste is ramping up guidance and tooling to make building beautiful and accessible data visualizations less difficult. Thank you to the Voice & Video team and our committee members for their feedback and care as we work through this problem space.

Check out the Data Visualization Foundations

Pastemates are individuals and teams who have been critical contributors to Paste, through advocating for adoption within their products and channeling important feedback and contributions back into the system.
Photo of this month's Pastemates. Left: Kate Hsiao. Center: Tess Hannel. Right: Zach Kuzmic.

We couldn’t keep it to just one Pastemate this time around; our Pastemates this release are Kate Hsiao, Tess Hannel, and Zach Kuzmic! This Twilio Segment dream team is leading UX Infrastructure’s “One Twilio” priority(link takes you to an external page) this year, and they’ve been working tirelessly to pave the way for a unified One Twilio experience across all of our current and future product UI.

They’ve performed audits and gap analyses, written software design docs, and interviewed internal stakeholders on their vision for “One Twilio”, and that’s only the beginning. Their work this year will help to evolve the Twilio product design language and establish the playbook for new companies to adopt Paste as the product design language, to ensure seamless user experiences across all Twilio’s products.

BPMStatus
🟢 Paste goes international
  • Paste now fully supports Twilio’s internationalization efforts for Q1.
  • Paste components are capable of supporting translated content and do not rely on any hard-coded strings.
🟢 Evolve the Twilio design language to support the vision of “One Twilio”
  • We’re wrapping up our first phase of research for this work (Evergreen gap analysis, ecosystem audit, market research, and customer research are nearly complete) and will be moving into concept designs starting in April.
  • We’ll be giving a readout of our research during the last week of April; if you’re interested in attending, let us know!
🟢 Establish Paste as a leading Next-Gen Monorepo through tooling and infrastructure improvements
  • Made improvements in our build pipeline and testing framework to reduce false negatives.
  • Lay the groundwork for our new program management, content, and visual design disciplines
  • Work on this priority will start later this year. Stay tuned!
🟢 Scale Design System onboarding and support for both internal consumers and external customers
  • The “onboarding and tooling” survey is underway. Keep an eye out for it and please fill it out when you receive it!
🟢 Build a UI kit for the Twilio Conversations API
  • Design explorations are wrapping up and a couple of our early Chat components have been completed.
(information)

Roadmap delays inbound

We are observing a Heightened Awareness Period (HAP). As such, the following items may not be released according to our initial roadmap projections.

NameDescription
Upgrading our CSS frameworkOne of the underpinnings of Paste’s success is our CSS framework (EmotionJS). We are working on updating the framework which is a large undertaking as minor discrepancies can occur and need to be caught during our testing to not negatively affect customers.
Releasing Paste design tokens for React NativeProviding React-Native developers with Paste’s design tokens will empower consistent, accessible designs across platforms.
Conversations UI KitWe will continue to design and implement a Conversations specific UI Kit featuring design assets and components.
Token documentation improvementsBased on findings from our user research, we will implement improvements to our Tokens page for an enhanced user experience.
Design Multiselect ComboboxDesign the Multiselect Combobox component and make design and usability improvements to Combobox overall.
Run Onboarding and Tooling surveySend a survey to internal customers on their experience with Paste onboarding and tooling.
Synthesize learnings from One Twilio design language researchSynthesize and present learnings from the first phase of “One Twilio” design language research before moving into concepting.

We're excited to share that we have two open roles on our UX Infrastructure team.

We're hiring for a Staff Product Designer role, who will help define and design accessible, easy-to-use, and reusable components, patterns, and services for Twilions and Twilio customers alike. We're looking for someone who has experience working closely with, or on, a design system, component library, or style guide. An ideal candidate for this role is comfortable with ambiguity, passionate about detailed high-quality UI design, and thrives on candid feedback from a diverse set of stakeholders and collaborators.

Take a look at the job description(link takes you to an external page), and reach out to Sarah Li with any referrals.

Twilio is looking for a Staff UX Engineer to join the UX Infrastructure team. In this role, you will help guide a best-in-class, usable, and inclusive-by-default UX platform, Paste, that helps designers and developers build sophisticated user experiences. Your work will involve leading and collaborating with Engineering and Design teams to build new features and maintain existing ones for our Design System, implementing performance optimizations, and improving upon the infrastructure, tooling, testing, and delivery strategies that give Twilio the confidence to continuously deploy the highest quality software. You’ll be building a critical product and thinking platform-first. You’ll prioritize frequent communication, great documentation, and optimizing for clarity. You’ll be an integral part of creating a UX platform to power the next generation of Twilio’s customer engagement platform, which is used by internal and external Twilio customers.

Check out the job description(link takes you to an external page), and reach out to Jade Pennig with any referrals.

See you next time! 👋

— The Design Systems Team