Skip to contentSkip to navigationSkip to topbar
Paste assistant Assistant

Design Guidelines for Paste

Get started with Paste design tools to create your own Twilio customer experiences and prototypes.

For Twilio customers

For Twilio customers page anchor

This section is for Twilio customers only!

If you're a Twilio employee, check out the section below this for guidelines on how to work within Twilio's Figma organization.

Welcome to Paste! To get started using Paste's Figma library:

  1. Download and install Twilio Sans Mono(link takes you to an external page), Twilio's open-source monospace typeface.
  2. Add the Twilio Paste Components(link takes you to an external page) library from the Figma Community to your Figma team.
  3. Once the library is added, swap all missing fonts to the Inter typeface, which is provided by default through Figma. Learn more about managing missing fonts.(link takes you to an external page)
  4. You'll most likely be using the default theme, which means you'll have to open the Variables modal(link takes you to an external page), and right-click to delete all existing modes until only the "Default" one is left.
  5. From here, publish your library and explore Paste's components. If you run into issues, reach out to us on Github Discussions(link takes you to an external page). We're excited to see what you build!

Access to Figma

Access to Figma page anchor

As a Twilio Designer, you have access to Figma. Join the Twilio organization by requesting an account through ServiceNow(link takes you to an external page). When you have access to Figma, you can learn more by reviewing our Working with Figma guide(link takes you to an external page).

How to turn on libraries

How to turn on libraries page anchor

Paste libraries are turned on by default in Figma. If you want to control libraries per file, go to the “Assets” tab on a file, where you can also drag components into your file. Click the book icon in the upper corner. From the modal, you can turn libraries on and off. Learn more about managing libraries(link takes you to an external page).

The following are the main libraries we recommend you have enabled for each Figma file. Any time a library is updated, you’ll get a notification in your project asking if you’d like to update.

Paste libraries
Paste libraries page anchor
Twilio community libraries
Twilio community libraries page anchor

The main Paste Components Figma library includes variables in our most-used themes as modes. Check out Figma's documentation on switching modes(link takes you to an external page) to learn how to swap from the default "Twilio" theme mode to other modes like "Evergreen" for the Segment transition and "Default" for the legacy visual style.

As long as every part of your UI (even the white background fill on your frames) is referencing our design tokens in Figma, swapping between modes (i.e., themes) will work smoothly. Your design files will be 1-to-1 with the components your engineering team uses, which makes upgrading, migrating, and switching visual themes in both code and design effortless.

Switching modes won't work for detached components that use raw hex codes, for example, because Figma won't know what to swap them to and you are no longer using Paste.

We release library updates continuously and use Figma’s version history to keep track.

We demarcate changes with hints which you can see in the description of each update:

  • 🚀  New: [summary of a new thing]
  •   Improved: [summary of an improved thing]
  • 🐛  Fixed: [summary of a bug fix]
  • ❗️  Breaking: [summary of a breaking change]

Fonts in Paste are preloaded into Figma so you don't need to download or install any font files.


Are you a Twilio customer?

Only Twilio applications are licensed to use Twilio Sans Text and Twilio Sans Display. If you are not building an application for Twilio, use the default and dark themes which use the open-source typeface Inter(link takes you to an external page).

Twilio Sans Text is used for UI text.

Twilio Sans Display for headlines.

Twilio Sans Mono(link takes you to an external page) is an extensive open-source monospace typeface for programming experiences.