Skip to content
Change the site theme

Design Guidelines for Paste

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

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
  • New
    Paste Components(link takes you to an external page)
    includes the latest updated components that use the updated design language themes. All new components and component updates will be made in this library.
  • New
    Twilio Paste Theme(link takes you to an external page)
    includes the newest design language token updates (color, text, and shadow styles), needed for the Paste Components library.
  • New
    Twilio Paste Dark Theme(link takes you to an external page)
    includes the newest token updates for the dark theme.
  • Paste Patterns(link takes you to an external page)
  • Brand Illustrations(link takes you to an external page) includes illustrations for empty states, sections, etc
  • Asset Documentation(link takes you to an external page) includes helpful utilities for marking up designs, like sticky notes and cursors
  • File and Cover Sheet Template(link takes you to an external page)
👉 Our recommendations for using the new Figma libraries

Use the new libraries for net-new designs, rather than trying to swap older design files to the new libraries, as things could be detached and our new components library has some updated structuring.

Product-specific libraries

Product-specific libraries page anchor

Paste uses 2 theme libraries.

When you have a theme library linked, you'll have access to:

  • Text styles (font families, font weights, and font sizes)
  • Color styles (fill and stroke for background, border, and text colors)
  • Effect styles (drop shadows, etc.)
Menu in Figma when you can navigate through tokens for the Default theme

Components are UI elements that can be reused across your designs. They help you create and manage consistent designs across projects.

You can drag and drop components into your project via the Assets panel on the left, and swap to different variants for a given component via the Design panel on the right.

Check out our tips and tricks(link takes you to an external page) for more helpful hints about using the Paste Components library.

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.

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 programming font.

Additional questions or concerns

Additional questions or concerns page anchor

If you have any questions for us that weren’t covered by this guide, or you are running into problems using our design resources, please reach out!