Skip to contentSkip to navigationSkip to topbar
Figma
Star

Paste Design System Newsletter - September 2022 Edition

Paste
Paste

📣 What's new in Paste

📣 What's new in Paste page anchor

ALL the new components!

ALL the new components! page anchor

Switch

Switch page anchor

The Switch component makes interacting with binary states a breeze. Our Switch incorporates animation and icons to make its pressed/unpressed state visually clear, while its built-in accessibility features communicate the state clearly to users. Take it for a spin!

Check out the Switch docs

If your snippet of code is small and inline with the rest of your text, Inline Code is the way to go. Its contents stand out with a subtle background and monospace font. Use it for code, ID's, and keys.

Check out the Inline Code docs

Presenting Code Block! This component allows you to display code with syntax highlighting for 13 programming languages. It features tabs to show different blocks of code in the same area, a copy code button, and an optional external link button leading to the source code.

Check out the Code Block docs

With five different variants to choose from, all your imperative, static information will be hard to miss inside of the Callout component! Don't forget to set its heading level according to the outline of your page for the best user experience.

Check out the Callout docs

As part of our Conversations UI kit, we've added the Minimizable Dialog component. Its power lies in its flexibility; use it with a static button, a floating button, or use its included state hook for full control of its internal state. Making a chat log has never been easier with Paste.

Check out the Minimizable Dialog docs

42 new icons, including a full suite of contact center icons!

42 new icons, including a full suite of contact center icons! page anchor

We've got new icons! A full suite of contact center icons and more are now available. Thanks to Fazle Jahangir, Isabela Razetti, and Porlin Chin for their close collaboration on these icons.

View the full list of new icons and search through our full icons list

Conversations UI Kit added to Figma

Conversations UI Kit added to Figma page anchor

Our Conversations UI Kit, which includes all of Paste's chat components and the new minimizable dialog, is now available in Figma. The components in this kit work together seamlessly for designing conversational UI, no matter the complexity.

Start designing with the Conversations UI Kit

Let's toggle! To make a button a toggle simply add the pressed prop to a secondary button or secondary icon button.

Check out the Button toggle docs

Sticky headers in Table and Data Grid (contribution)

Contributed by Mark Yang from the Billing Platform team, sticky headers for our Table and Data Grid components are now available! Use this functionality to make perusing data easier, especially on mobile viewports. Thanks Mark! 🎉

Check out sticky headers in the docs

Components we supportRepositories using PasteComponent instances in production
4814855,394

The Design Systems team keeps a pulse on Paste users with our annual CSAT survey(link takes you to an external page). Thank you to each of the 68 Twilions who provided feedback on their Paste experience! Our survey used a scale of 1-5 (1 being strongly disagree, 5 being strongly agree). We are excited to the share the following insights:

When asked how strongly they agreed to Paste being easy to use to design and build customer interfaces, our participants averaged 4.00/5.

When asked how strongly they agreed to being proud of the behavior of their products when using Paste, our participants averaged 4.18/5.

In addition, some participants specified:

It's great to have a standardized component library that lines up with Twilio standards. It allows me to focus on my business logic.

I really appreciate how approachable Paste is - it's really easy to get up and running.

These results are music to our ears 🎶

✨ Pastemates™ spotlight

✨ Pastemates™ spotlight page anchor
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.

Since our last update, Ramona Thompson joined the One Twilio BPM(link takes you to an external page) crew to partner with us in our user research efforts. Ramona collaborated with us to help us dig into what customers consider friendly, clean, and more importantly what feels like Twilio. She led research to measure how a new visual design direction performed against existing customer ratings of live Twilio products, as well as how different brand expressions (think typography, color, and illustration) impact our customers' perception and preferences. Ramona was a 🌟superstar🌟 in our research phase and we are grateful for her efforts.

BPMStatus
Establish Paste as a leading Next-Gen Monorepo through tooling and infrastructure improvements🟢 Green: Migrated our Visual Regression Testing suite from Applitools to Percy, improving test times by over 20% while additionally testing in each browser.

Expanded on our DangerJS PR checks to verify dependencies are pinned to prevent inconsistencies in builds.
Evolve the Twilio design language to support the vision of “One Twilio”🟢 Green: After syncing with stakeholders and brand, along with reviewing the research findings, we narrowed down our visual design concepts to a single direction and have been eagerly working on creating revamped components in the new design language.

Next, we'll be using these revamped components to do some product stress testing that will help us
  • refine the language and correct inconsistencies
  • identify and document edge cases
  • cultivate an expert understanding of how the new design language should be used and implemented
Lay the groundwork for our new program management, content, and visual design disciplinesDe-scoped due to changing priorities.
Build a UI kit for the Twilio Conversations API🟢 Green: The Conversations UI Kit components are now included in the Paste Components library in Figma! We have also released circular button sizes and the minimizable dialog component in code.
Paste goes international✅ Done: 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.

For more information, check out our full BPM document(link takes you to an external page).

FeatureDescription
Multi-select Combobox and Combobox refinedImprovements to the existing combobox component, with a design refresh and added functionality to select multiple items.
Avatar component, entity variantA new variant for the Avatar Component that makes it a square shape representing an entity.
Button Group componentA group of related Buttons, ex: buttons in a toolbar.
Conversations API UI KitAll Conversations UI Kit components will be ready to use, along with a landing page s on the Paste website
Radio Button GroupA Radio Group that looks like a Button Group
File Picker componentInput component used to upload or attach files
Side Modal componentDialog that covers one side of the screen
Finalize One Twilio design direction for implementationThe One Twilio design direction includes product prototypes in the new design language and component-by-component comparisons of upcoming changes. This iteration of the design direction gets it ready for implementation in Figma and code (scheduled for a 2023 Q1 release). Further stress testing and workshops with product teams will happen in parallel with implementation in 2022 Q4.

See you next time! 👋

— The Design Systems Team

Continued from 42 new icons

Continued from 42 new icons page anchor
  • AcceptIcon
  • BusinessIcon
  • CallActiveIcon
  • CallAddIcon
  • CallFailedIcon
  • CallHoldIcon
  • CallIcon
  • CallIncomingIcon
  • CallOutgoingIcon
  • CallTransferIcon
  • ChatIcon
  • ClearIcon
  • DialpadIcon
  • DirectoryIcon
  • DocumentationIcon
  • DoNotIcon
  • DragHorizontalIcon
  • DragIcon
  • DragVerticalIcon
  • EmailIcon
  • EmojiIcon
  • FileAudioIcon
  • FileImageIcon
  • FileVideoIcon
  • FileZipIcon
  • FlagIcon
  • LogOutIcon
  • MenuIcon
  • NotificationIcon
  • ProductContactCenterAdminIcon
  • ProductContactCenterAssessmentsIcon
  • ProductContactCenterQueuesIcon
  • ProductContactCenterTasksIcon
  • ProductContactCenterTeamsIcon
  • ProductPayConnectorIcon
  • ShareIcon
  • SMSIcon
  • StarIcon
  • SystemStatusIcon
  • TranslationIcon
  • UploadIcon
  • VoicemailIcon