Skip to content
Change the site theme
Figma
(information)
  • 2023.01.10
  • 2023.02.21 Candidate
  • 2023.04.04 Candidate
  • 2023.05.16 Candidate
  • 2023.06.27 Candidate
  • Backlog

Roadmap

Here's a glimpse of what is coming up in future releases of Paste. Unless explicitly mentioned, all release candidates are tentative and subject to change.

2023.01.10

2023.01.10 page anchor
FeatureDescriptionStatus
Conversations API UI KitOfficial launch of the Paste Conversations API UI kit
In progressIn progress
Design Form componentA group of components with sensible defaults used to quickly layout forms in a consistent manor
In progressIn progress
File UploaderComponent used to upload a collection of files to an application
In progressIn progress
One Twilio: Design language update in FigmaLaunch of the new One Twilio Design Language update that will be available via Paste. A cohesive design language to unify Twilio, Segment and SendGrid products
In progressIn progress
Create Form componentA group of components with sensible defaults used to quickly layout forms in a consistent manor
To doTo do
Create a Caption Text componentComponent for creating supplementary UI text
To doTo do
Description List componentThe classic Description List component. The pairing of a Term and a Description, often in a key, value pair
To doTo do
Listbox primitiveComponent used to create accessible Listboxes that can be styled to create interactive, list based components
To doTo do
One Twilio: Design language guidelinesUpdating existing Design Guidelines to accompany the new One Twilio Design Language
To doTo do
Page spacing and layout guidelines
To doTo do
FeatureDescriptionStatus
Menu component, refinedA menu presents a list of menu items that a user can choose to perform an action with.
To doTo do
One Twilio: Design global navigation compositionsA collection of components that can be used to build shared, global navigation patterns for Twilio, Segment and SendGrid applications.
To doTo do
Popover component, refinedA Popover is used to display some content on top of another. It is typically invoked by a click action.
To doTo do
Send out H2 2022 CSAT surveyCheck in with our internal customers to gauge our customer satisfaction
To doTo do
Tabs component, refinedTabs are used to separate content into different logical sections.
To doTo do
Tokens for React NativeProvide React Native developers a way to use Paste Design Tokens
To doTo do
Treeview primitivePrimitive for creating expandable sections that show hierarchical data
To doTo do
FeatureDescriptionStatus
Data Grid component, refinedInteractive data tables, that include selection, sorting, editing
To doTo do
Drag and Drop PatternPatterns for creating Drag and Drop user interface experiences
To doTo do
Navigation UI KitUI Kit to create cohesive and consistent application navigation
To doTo do
Navigation UI Kit for FigmaUI kit used to design Twilio application navigation
To doTo do
One Twilio: Global Navigation componentsA collection of components that can be used to build shared, global navigation patterns for Twilio, Segment and SendGrid applications.
To doTo do
Tooltip component, refinedA Tooltip is a small contextual overlay that allows you to give further clarification to text or UI controls.
To doTo do
FeatureDescriptionStatus
Alert Dialog component, refinedUsed to confirm an action made by the user. Used to prevent exiting a form in a modal without saving changes
To doTo do
Avatar component, refinedAvatar is a pictorial representation of a user or object 👩‍🎤. It can accept an image or initials.
To doTo do
Breadcrumb component, refinedA component to show navigation hierarchy and provide a means to navigate to parent pages
To doTo do
Checkbox Button Group componentA group of checkboxes that look like a Button Group
To doTo do
Copy to Clipboard patternHow to enable a user to copy a snippet of text, such as an API key or code block.
To doTo do
Date Picker component, refinedA component that allows users to pick a single date from a calendar
To doTo do
Time Picker component, refinedA component that allows users to pick a single time from a picker.
To doTo do
FeatureDescriptionStatus
Callout component, refinedA component that can be used to highlight important, inline information in long page content
To doTo do
Code Block component, refinedNon-editable block of text, formatted in the code text style and with syntax highlighting.
To doTo do
Disclosure component, refinedA Disclosure is a button like component that is used to progressively show content that it controls.
To doTo do
Inline Code component, refinedA component used to display important inline code snippets, such as SIDs, IDs and API keys
To doTo do
Skeleton Loader component, refinedA component that gives users a hint of what type of information will be loaded on a page and helps reduce the perceived time a page takes to load.
To doTo do
Toggle Button component, refinedA Button that supports two states, pressed and unpressed similar to a like button
To doTo do
Toggle Switch component, refinedUsed to toggle a feature on or off
To doTo do
FeatureDescriptionStatus
Layout guidelines
To doTo do
Accordion componentUsed to expand and collapse a collection of grouped sections of content
To doTo do
Accordion primitiveAn unstyled functional primitive that is used for the Accordion component, or to roll your own implementation.
To doTo do
Address validation patternA pattern to handle address validation consistently
To doTo do
Alert / Status primitiveA primitive component used to create Alerts or Status components
To doTo do
Alert dialog primitive componentAn unstyled functional primitive used to build accessible alert dialogs
To doTo do
Badge, small variantA Badge component variant for small, compact spaces
To doTo do
Blockquote componentA component used to display quotes
To doTo do
Build Design Foundations - Layout/Spacing
To doTo do
Build Design Foundations - Typography
To doTo do
Card Layout patternA collection of patterns related to creating Card based user interfaces and layouts
To doTo do
Card actions group Patterns to use when displaying actions that be placed upon a single or group of Cards
To doTo do
Carousel componentA component used to display a collection of images or graphics
To doTo do
Checkbox buttonA checkbox that looks like a Button
To doTo do
Code Editor / Code Editor themeA component used to create editable, syntax highlighted blocks of code
To doTo do
Color Picker componentA component used to pick and select a color
To doTo do
Complex filters pattern
To doTo do
Composite primitive componentAn unstyled functional primitive used to build accessible grids and listboxes
To doTo do
Corner ornament componentA component that can be used to decorate the corner of another element with a count or status
To doTo do
Creation flow pattern
To doTo do
Data Grid sort
To doTo do
Data Grid table actionsA composition of components to use when wanting to perform an action on a single row
To doTo do
Data Grid with fixed/locked column
To doTo do
Data Visualization patternPatterns and guidelines around the types of charts, colors, and treatments that can be used when creating Data Visualizations
To doTo do
Data Visualization, Maps patternA pattern surrounding the data visualization of geographic data
To doTo do
Data upload patternHow to move a file or dataset out of Twilio
To doTo do
Date Range Picker componentAllows users to pick a date range from a calendar
To doTo do
Date and Time Picker componentA component that allows users to pick a single date and time from a calendar
To doTo do
Date and Time Range Picker componentA component that can be used to set a value that represents a range between two dates and times
To doTo do
Design Foundations - Layout/SpacingCreate guidelines for using spacing and creating layouts within Twilio products.
To doTo do
Design Foundations - TypographyCreate guidelines for using typography and creating hierarchy within Twilio products.
To doTo do
Design Toolbar ComponentA component used to group related actions
To doTo do
Directional Modal component
To doTo do
Disclosure of information pattern
To doTo do
Edit pattern
To doTo do
Email pattern
To doTo do
Emoji component
To doTo do
Errors, error states and warning states patternCan be used in situations where data is empty error states
To doTo do
Feed primitive
To doTo do
Feedback widget component
To doTo do
Field checkbox component
To doTo do
Field combobox component
To doTo do
Field input componentAn input component with sensible defaults so you can use the component a with minimal effort
To doTo do
Field radio component
To doTo do
Field select component
To doTo do
Field textarea componentA textarea component with sensible defaults
To doTo do
Form fields connect componentLays out connected, related form fields that make up a single, logical unit of entry
To doTo do
Form fields, small
To doTo do
Go to docs pattern
To doTo do
Hyphenate component
To doTo do
Icons, country flags
To doTo do
Illustration component
To doTo do
Image component
To doTo do
Inline Edit pattern
To doTo do
Insight page pattern
To doTo do
Keyboard Shortcut componentA component use to represent a keyboard key
To doTo do
Label, optional variant
To doTo do
List view pattern
To doTo do
Live Region primitive
To doTo do
Loading patternDefine Spinner vs. Skeleton Loader
To doTo do
Media player pattern
To doTo do
Meter componentA component used a to show a unit of measure between two defined values
To doTo do
Modal component, full screen variantModal Dialog that covers then entire screen
To doTo do
Motion systemAdds standardized visual effects to a component
To doTo do
Nested / hierarchical data pattern
To doTo do
Number Input component with stylized buttonsInput that limits data to number entry and has styled +/- buttons
To doTo do
Onboarding pattern
To doTo do
Ordered List component, stylized variant
To doTo do
Page Header patternCompositional examples of headings, breadcrumbs, and page level actions
To doTo do
Permissions pattern
To doTo do
Portal componentA primitive component used to render transitory elements outside the main DOM hierarchy
To doTo do
Positioner libraryA utility library used to position floating elements on the screen in relation to the window and other elements that may have triggered its appearance
To doTo do
Progress Bar componentCommunicates task or loading completion
To doTo do
Progress Stepper componentLabels and communicates steps and progression through a linear workflow
To doTo do
Promotional messaging pattern
To doTo do
RTL language support for i18n
To doTo do
Radio vs. Toggle vs. Checkbox vs. Tabs vs. Select vs. Combobox guidelinesA pattern to help inform you how to choose between using a Radio, Toggle, Checkbox, Tab set, Select or Combobox
To doTo do
Rich text editor componentAllows users to enter, style, and format freeform text
To doTo do
Scroll to patternA pattern used to enable app users to quickly scroll back to the top of the page
To doTo do
Search PatternPatterns that can used to create a variety of common search UIs
To doTo do
Select vs. Menu vs. Combobox guidlineA pattern to help you decide when to use a Select, Menu or Combobox
To doTo do
Side panel component
To doTo do
Slider componentDraggable input over a range of numbers
To doTo do
Summary Detail component
To doTo do
Tabs, nested variantA set of tabs that can be used inside of another tabset that can create distinct visual hierarchy of that tabbed content
To doTo do
Timeline componentA component used to display a list of events that occurred in chronological order
To doTo do
Toolbar ComponentA component used to group related actions
To doTo do
Toolbar Primitive
To doTo do
Tree Grid componentA component used to display, interact with and navigate hierarchical tabular data
To doTo do
Tree Grid primitiveA primitive to create a table with rows that can expand and show more rows
To doTo do
Tree componentA component to display, interact with and navigate hierarchical data
To doTo do
Truncated list pattern
To doTo do
Unstyled list component
To doTo do
Visual Picker component
To doTo do
Wizard patternHow to take a user through a multi-step flow.
To doTo do

Black lives matter.