Warp Design System

Appearance

Warp Figma Component Library updates

We’ve made several updates to the WARP Component Library in Figma to better align with implementation and improve usability.

Toast ​

  • Updated for consistency with web. You can now edit the text and toggle the close button from Figma’s right side panel.
  • Set a min width of 328px and max of 420px for improved readability on wide viewports.
  • Updated Figma component description with a link to the WARP Portal.
  • Updated WARP Portal documentation - Toast documentation

One screenshot of the toast component in Figma and the new toolbar options to toggle the close button and input text. Another screenshot of the toast with the minimum width of 328px and the maximum width of 420px

Slider and Range slider ​

  • Updated the Single slider and added a new Range slider.
  • Improved accessibility with a text field and tooltip, along with a refreshed visual design.
  • Deprecated the old version of the Single slider.
  • Updated Figma component description with a link to the WARP Portal.
  • Updated WARP Portal documentation - Slider documentation and Range slider documentation

Figma screenshot of the Slider and Range slider component with input fields, both in light and dark mode

  • Updated Figma usage guidelines: how to apply Link as a style.
  • Updated Figma component description with a link to the WARP Portal.
  • WARP portal documentation is still a work in progress and will be updated soon.

Figma screenshot displaying a snapshot of designers guidelines on how to use the link style in Figma

As always, let us know if anything looks off or if you have feedback. Thanks!