Skip to contentSkip to navigationSkip to topbar
Figma
Star
  • 2024.02.20
  • 2024.04.02 Candidate
  • 2024.05.14 Candidate
  • 2024.06.25 Candidate
  • 2024.08.06 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.

2024.02.20

2024.02.20 page anchor
FeatureDescriptionStatus
Card highlight variant
In progressIn progress
Design AI-related components for Chat LogDesign for components that enable new AI experiences at Twilio, mainly focused around chat.
In progressIn progress
Figma AI UI kitComponents that enable new AI experiences at Twilio, mainly focused around generative AI and chat.
In progressIn progress
Ordered List component, stylized variant
To doTo do
Page Header componentCompositional examples of headings, breadcrumbs, and page level actions
CompleteComplete
Paste Docs AI ChatChat GPT powered support bot for getting help with building and designing with Paste
In progressIn progress
Summary Detail component
To doTo do
FeatureDescriptionStatus
AI UI kitComponents that enable new AI experiences at Twilio, mainly focused around generative AI and chat.
To doTo do
Callout component, refinedA component that can be used to highlight important, inline information in long page content
To doTo do
Card Layout patternA collection of patterns related to creating Card based user interfaces and layouts
To doTo do
Complex filters pattern
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
Elevation foundations
To doTo do
Illustration foundations, refined
To doTo do
UI size tokens
To doTo do
FeatureDescriptionStatus
Interaction foundations
To doTo do
Keyboard Shortcut componentA component use to represent a keyboard key
To doTo do
Loading patternDefines when to use Spinner, Skeleton Loader, and Progress Bar.
To doTo do
Menu component, refinedA menu presents a list of menu items that a user can choose to perform an action with.
To doTo do
Table of Contents component
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
Data Grid component, refinedInteractive data tables, that include selection, sorting, editing
To doTo do
FeatureDescriptionStatus
Tree Grid primitiveA primitive to create a table with rows that can expand and show more rows
To doTo do
FeatureDescriptionStatus
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 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
Alert dialog primitive componentAn unstyled functional primitive used to build accessible alert dialogs
To doTo do
Blockquote componentA component used to display quotes
To doTo do
Breadcrumb component, refinedA component to show navigation hierarchy and provide a means to navigate to parent pages
To doTo do
Button Group, refinedA group of connected Buttons
To doTo do
Card actions patternPatterns 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
Chat Log components, refinedA Rich Text Editor used to compose chat messages in conversational UI
To doTo do
Checkbox Button and Checkbox Button Group componentsA group of checkboxes that look like a Button Group
To doTo do
Code Block component, refinedNon-editable block of text, formatted in the code text style and with syntax highlighting.
To doTo do
Color Picker componentA component used to pick and select a color
To doTo do
Composite primitive componentAn unstyled functional primitive used to build accessible grids and listboxes
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
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 upload patternHow to move a file or dataset out of Twilio
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
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
Date Picker component, refinedA component that allows users to pick a single date from a calendar
To doTo do
Date Range Picker componentAllows users to pick a date range from a calendar
To doTo do
Description List component, refinedThe classic Description List component. The pairing of a Term and a Description, often in a key, value pair
To doTo do
Detail Text component, refinedComponent for creating supplementary UI text
To doTo do
Directional Modal component
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
Disclosure of information pattern
To doTo do
Display Heading component, refinedTypographic guidelines for large text meant to be used for marketing, storytelling, or attention-grabbing contexts, like displaying numbers on a dashboard layout. These typically fall outside of the normal use cases for the standard Heading component.
To doTo do
Drag and Drop PatternPatterns for creating Drag and Drop user interface experiences
To doTo do
Dropzone componentA component used as the visual target for a drag and drop interaction
To doTo do
Edit pattern
To doTo do
Email pattern
To doTo do
Emoji component
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
File Picker component, refinedInput component used to upload or attach files
To doTo do
File Uploader component, refinedComponent used to upload a collection of files to an application
To doTo do
Form fields connected 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
Iconography foundations
To doTo do
Icons, country flags
To doTo do
Image component
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
Inline Edit pattern
To doTo do
Insights pattern
To doTo do
Label, optional variant
To doTo do
Live Region primitive
To doTo do
Manage List pattern
To doTo do
Media player pattern
To doTo do
Minimizable Dialog component, refinedA small, minimizable non-modal dialog that is fixed or anchored to the bottom of the screen
To doTo do
Modal component, full screen variant
To doTo do
Motion systemAdds standardized visual effects to a component
To doTo do
Nested / hierarchical data pattern
To doTo do
Onboarding pattern
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
Promotional messaging pattern
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
RTL language support for i18n
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 guidelineA pattern to help you decide when to use a Select, Menu or Combobox
To doTo do
Side Modal component, refinedModal Dialog that covers one side of screen
To doTo do
Side panel component
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
Status Badge component, refined
To doTo do
Status Menu component, refined
To doTo do
Switch component, refinedUsed to toggle a feature on or off
To doTo do
Template list patternA page layout that lists templates for customers to choose from.
To doTo do
Time Picker component, refinedA component that allows users to pick a single time from a picker.
To doTo do
Timeline componentA component used to display a list of events that occurred in chronological order
To doTo do
Tokens for React NativeProvide React Native developers a way to use Paste Design Tokens
To doTo do
Toolbar ComponentA component used to group related actions
To doTo do
Toolbar Primitive
To doTo do
Tree componentA component to display, interact with and navigate hierarchical data
To doTo do
Tree Grid componentA component used to display, interact with and navigate hierarchical tabular data
To doTo do
Treeview primitivePrimitive for creating expandable sections that show hierarchical data
To doTo do
Truncated list pattern
To doTo do
Unstyled list component
To doTo do