Skip to content
Paste
UX Platform
Change the site theme
information:

Design Guidelines for Paste

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


Access to Figma#

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


Using libraries#

How to turn on libraries#

👉  Ideally, you won’t have to worry too much about turning libraries on if you’re joining an existing team. A "Team Owner" (or "Admin") should have already gone through the steps of turning on default libraries (like the Paste and Console Navigation libraries) with these steps: setting up a Figma teamlink takes you to an external page.

If you want to control libraries per file, go to the “Assets” tab on a file. This is also where you can drag in components to your file. Click the book icon in the upper corner. From the modal, you can turn libraries on and off.

Buttons to click in Figma to open the library selector

Modal in Figma where you can select the Paste components library to link to your project

Main libraries#

The main libraries we recommend you have enabled for each file are:

Any time a library is updated, you’ll get a notification in your project asking if you’d like to update.


Using themes#

Paste currently has Default Themelink takes you to an external page and Dark Themelink takes you to an external page libraries.

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

  • Text styles (font families, font weights, and font sizes)
  • Colour styles (fill and stroke for background, border, and text colors)
  • Effect styles (shadows, etc.)

Menu in Figma when you can navigate through tokens for the Default theme

You should be using components from Paste to compose your UIs whenever possible, but the text and layer styles will be helpful when you need to compose something more custom.

This can be anything from setting a piece of text next to an icon to creating a custom stepper component.


Using components#

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.

Any layer with a ⚙️ emoji indicates that there are nested variants available.

Any layer with a ✏️ emoji indicates an editable layer.

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


Library updates#

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#

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

Inter#

Interlink takes you to an external page is a free Google font and our typeface for UI text.

Fira Mono#

Fira Monolink takes you to an external page is a free Google font and our monospace typeface for code.

SF Pro Text#

SF Pro Textlink takes you to an external page is the system font for Apple platforms. We represent native web element styles (like option lists in Select) in our design assets in macOS styles.

Whitney#

Whitneylink takes you to an external page is the Twilio brand typeface. Reach out to us in #help-design-system if you need access to the Whitney font files for work outside of Figma.


Additional questions or concerns#

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!

Black lives matter.