Skip to contentSkip to navigationSkip to topbar
Figma
Star

Paste Design System Newsletter - July 2022 Edition

Paste
Paste

📣 What's new in Paste

📣 What's new in Paste page anchor

The new tokens page is live!

The new tokens page is live! page anchor

We are extremely excited to announce that we have released a new version of the tokens list page! It has a streamlined and improved design with the ability to search through token names and values, quick copy buttons for each token, and switch between JavaScript and CSS formats. You can also watch our walkthrough of the new features(link takes you to an external page).

We hope that you find the new tokens page easier to use. Please send us any feedback and suggestions(link takes you to an external page) about how we can continue making our site work better for you.

Check out the new tokens page

On July 28th, there was a big Figma release that introduced the concept of Slots. Slots are placeholder components that can be nested inside container components. They’re intentionally empty so that you can swap them out for your own custom content. It’s now easier for you to place custom content inside of existing Paste container components (e.g. Card, Modal, Disclosure, etc.) without having to detach them! It’s as easy as swapping out variants.

Watch the Slot components demo(link takes you to an external page)

New Chat Log documentation

New Chat Log documentation page anchor

We’ve been quietly releasing components in the Chat Log package for the Conversations UI Kit and they’re finally ready for the big time! More components and documentation are coming next release, so watch this space!

Read more about the Chat Log components

The Form Pill Group gets a design update

The Form Pill Group gets a design update page anchor

Form Pill Group has new and improved styles for each state. We’ve introduced a new error variant, added support for disabled Form Pills, and updated the documentation page to share how to use them in Figma along with more examples of the states.

Check out Form Pill Group

New

New page anchor

👋 New Paste team members!

👋 New Paste team members! page anchor

Nick Sands (he/him/his) has joined the UX Infrastructure team as a Staff Product Designer!

Nick started his career as an elementary school teacher. His passion for helping people, solving hard problems, and building led him to a career in UX. He previously worked as a product designer building research and teaching tools for ITHAKA and a design prototyper at Delta Dental of California. He loves to work at the intersection of design and engineering, believing we can deliver the best user experience when they are tightly aligned.

Nick enjoys 3D printing, hockey, cats, and smoothies. He is a collector of hobbies. Nick and his wife Angela are expecting their first child (a boy!) in October.

✨ 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.

Our August Pastemate is none other than the original Paste prototyping pioneer, Andy Doyle. Andy is a Product Designer on the Billing team, based in Ireland. Upon joining Twilio, Andy jumped right into the Paste world and asked how he might go about Designing in the Browser(link takes you to an external page). Andy’s comfort and experience with web-based technologies has led him to participate in the research and testing of the Paste Prototyping Kit(link takes you to an external page) and is still one of the most active users. When asked about why he loves prototyping his design ideas he said:

I love building prototypes that are as close to the real thing so I can see how my designs adapt at different screen sizes and how our customers interact with something that feels real. It’s never been easier to create web based prototypes with CSS Grid and Flexbox (and Paste 😉)!

Andy has also been heavily involved in helping the UX Infrastructure team develop and conduct a “Prototyping with Codesandbox”(link takes you to an external page) workshop series, aimed at teaching folks how to use Paste to prototype and validate product ideas with customers quickly, with realistic interactive prototypes. Better yet, the code is directly transferable to production environments, empowering our team of builders to get their ideas to market quickly.

Andy’s contributions have not only influenced greater (and easier) prototyping, but have also demonstrated how to establish stronger partnerships between engineers and product designers. Which in turn, have helped facilitate better hand-offs and product development discussions.

Did you know that we have data on Paste usage? We track:

  • # of repositories that import Paste packages
  • Which components are used in code
  • What props people use on each component

Since January 1, 2022, of the repositories using 300 or more components:

  • Console has gone from using 18,378 components to 30,778! This is a 67% increase in total usage.
  • SendGrid has gone from using 1,847 components to 5,090! This is a 175% increase in total usage.
BPMStatus
Establish Paste as a leading Next-Gen Monorepo through tooling and infrastructure improvements🟢 Green: Completed an initiative to run accessibility testing through Storybook for better coverage. Also continuing to identify and close gaps in testing coverage.
Evolve the Twilio design language to support the vision of “One Twilio”🟢 Green: After developing four design directions based on design concept workshops, One Twilio project principles, and Think Week explorations, the One Twilio team has implemented feedback and narrowed their focus on two final design directions which are going into user testing in August.
Lay the groundwork for our new program management, content, and visual design disciplinesWork on this priority will start later this year. Stay tuned!
Build a UI kit for the Twilio Conversations API🟢 Green: The ChatLog and its related components are all completed and the documentation page is now live!
Paste goes international🟢 Green: Paste has met Twilio’s 2022 internationalization goals by supporting all Priority 1 languages. 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 ComboboxImprovements to the existing Combobox component, with a design refresh and added functionality to select multiple items.
Code BlockA non-editable block of text, formatted in the code text style with syntax highlighting.
One Twilio Concept ResearchWe’ll be conducting user research to gain an understanding of our customers’ impressions of visual design quality, cohesiveness, and brand alignment of the proposed design language directions. This research will be used as an input for creating a final design direction.
Toggle SwitchA component meant for users to toggle a feature on or off.
Toggle ButtonA Button variant that supports two states, pressed and unpressed.
Non-Modal DialogA dialog that can be opened, closed, or minimized.

See you next time! 👋

— The Design Systems Team