Design Kits v5.4.0

Feb 3, 2022

Figma

Breaking changes

Before moving forward with the new library, you must make a few changes. Some names have been changed in 5.4.0, and since Swap Library identifies the components based on their names, you need to make sure the current component library matches the names of the new library. Skipping this step will leave the old components in your file. You can learn more about it in the migration introduction video.

• Alert

  • Separate variants into three parts “Alert/Filled“, “Alert/Outlined“, “Alert/Standard“;

• AppBar

  • Combine “DesktopAppBar“ and “MobileAppBar“ into a single “AppBar“ part;

• Badge

  • Change name from “Badge/W.Icon“ to “Badge W. Icon“;

• Button

  • Separate variants into three parts “Button/Filled“, “Button/Outlined“, “Button/Text“);

• ButtonGroup

  • Separate “ButtonGroup/Horizontal“ and “ButtonGroup/Vertical“ into three parts “ButtonGroup/Contained“, “ButtonGroup/Outlined“, “ButtonGroup/Text“;

• Chip

  • Separate variants into “Chip/Filled“, “Chip/Outlined“;

• List

  • Separate “ListItem“ into “ListItem/Simple“, “ListItem/With Icon“, “ListItem/With Checkbox“, “ListItem/With Avatar“;

• Menu

  • Change name from “MenuExamples“ to “Examples“;
  • Change name for “Menu/Native“ to “Menu Native“;

• Progress

  • Change name from “Linear“ to Progress/Linear;
  • Change name from “Circular“ to Progress/Circular;

• Step

  • Change name from “Step/Elements“ to “Step Elements“;
  • Change name from “Stepper/W. Content“ to “DesktopStepper“;

Changes

• Add dark mode as a variant to each component to avoid having two separate Figma files.
• Add interactive states for many components
• Sync dark theme colors with the default React theme
• Group tokens into light and dark — we used these names to increase
• Sync the Figma icons with @mui/icons-material to include the latest ones
• Rename variant names (e.g., Resting -> Enabled, Hover -> Hovered, etc.)
• Add Material Design 2014 colors as tokens
• Delete unused icons from the main Figma file for better performance (see guide on how to access the whole icon library)
• Add new screen examples for each breakpoint
• Add new color variants (Inherit, Default)
• Add coverage for the Focused state on the components
• Improve/change Card component
• Improve/change List component
• Improve/change Menu component
• Add Hover state to Text Field, Select, Autocomplete, Multiline
• Add Multiline component
• Add Layout component
• Fix Paper elevation in dark mode

Sketch

• Sync dark theme colors with the default React theme
• Sync the Sketch icons with @mui/icons-material to include the latest ones
• Delete unused icons from the main Sketch file for better performance
• Add new color variants (Inherit, Default)
• Add multiline support for the text field component
• Add Card component
• Improve/change Text field, Select, Multiline, Autocomplete to fix Adoronment issue
• Improve/change Slider component
• Improve/change Menu component
• Fix Button, Button group, Toggle, etc opacity bug caused by the new Sketch updates
• Fix Paper elevation in dark mode
• Fix outdated links to docs

Design Kits v5.0.1

Nov 23, 2021

Figma

• Remove the wrong “This is a preview, after purchase you will be able to access the components.“ mention

Design Kits v5.0.0

Sep 8, 2021

Figma

• Update the design to match @mui/material v5
• Add MUI X components
• Add Timeline component
• Polish small details (typos, design value, etc.)

Sketch

• Upgrade the design tokens and style to match with the React v5 version.
• Change layers and slots names to a consistent text case.
• Remove the number prefix in the component that make it hard to find the component alphabetically.
• Add missing components (Timeline, Stepper).
• Add MUI X components (Data Grid, Data Grid Pro).

Adobe XD

• Update the design to match @mui/material v5, e.g. the style of the Slider changed.
• Add dark mode support
• Add MUI X components, e.g. the new data grid component
• Add Timeline component
• Polish small details (paddings, new component states, inconsistencies, etc.)

v4.14.0

Jun 2, 2021

Figma

• Add dark mode support.
• Fix TextField visual bugs.
• Improve design token structure and naming to better match the React implementation.
• Fix auto-layout in many places.
• Fix FAB size.
• Polish, fix naming issues.
• Fix icon color inheritance.
• Fix missing usage of design token in the components.
• Components now retain customisations when changing a variant.

v4.13.1

Apr 27, 2021

Sketch

• Add suppport for Dark mode
• Add new screen examples
• Bug fixes for Accordion, Rating, and a few other components
• Add more Divider variants
• Rename a few styles to use the same terminology between Sketch variables and React components

v4.13.0

Jan 12, 2021

Figma

This a large release. This new version isn't backward compatible with the previous ones. All the components have been migrated to leverage the Figma variant feature. We have also taken this as an opportunity to further polish the components.

• Migrate the components to use Figma variants.
• Improve usage of auto-layout.
• Fix theme design token usage.
• Add Autocomplete component.

Sketch

We have redesigned most of the components from scratch to make sure all components show their CSS properties using inspection tools such as Sketch Cloud Inspect tool. Because the components are now using Variables, replacing the library with this version will not work as expected. We recommend building your screens from scratch or replacing components manually.

• Redesigned most components with variables feature and fix handoff.
• Responsive bug fixes.
• Fix design tokens in the “Layer Styles“ and “Color Variables“ views.
• Better follow the Material Design spec in the table. Fix auto layout issue.
• Fix TextField variant name line -> standard.
• Update the theming guide. For instance, fix naming of Pallete to Palette.
• Components are now sorted based on their importance and relevance (e.g a. Resting, b. Hover, etc).
• The default theme is now in synced with @material-ui/core.
• States are now generated automatically.
• Add new components variants. For instance, add missing TextField value + disabled state.

Adobe XD

• Redesign Table for more complex interactions and to enable responsiveness
• Redesign List component to enable text secondary toggle
• Fix performance issues, especially with the Table component
• Add missing Alert variants
• Add Checkbox indeterminate state
• Fix auto layout issues, e.g. with the data table
• Update the design token structure to better match the React components.
• Fix the usage of design tokens in the components

v4.12.0

Oct 21, 2020

Figma

This is the second major iteration on the Figma components. This release includes new components, better coverage of the low-level components and how they can be composed together. For instance, you will find a “table header checkbox“ component as well as an example where it's used to build a full table.

• Document frequently asked questions.
• Add Accordion component.
• Add AppBar component.
• Add Rating component.
• Add Smart table (auto-layout).
• Add Stepper component.
• Add TreeView component.
• Fix duplicated colors in the Material Design color palette.
• Fix usage of theme.typography.button in the Button component.

Adobe XD

Initial release

v4.11.0

Aug 3, 2020

Sketch

• From 581 to 1,258 symbols matching the React components. We have more than doubled the coverage!
• Use color Tints, available since Sketch v64
• Cover most states: hover, disabled, active, error
• [Alert] Reference the typography design tokens correctly
• [AppBar] Closer to React implementation
• [Avatar] Add group support
• [Breadcrumbs] Add icon prefix support
• [Button] Add support for the group component (vertical, sizes, etc)
• [Checkbox] Add size support
• [Pagination] Add outlined and size support
• [Stepper] Add vertical support
• [Switch] Add size support
• [Table] Add support for row selected state
• [theme] Only use the font defined in the theme
• [TreeView] Add component
• And many more. As you can imagine, doubling the number of symbols means a lot more improvement.

v4.10.0

Jun 11, 2020

Figma

• Move all icons style sets except “Filled“ into separate Figma files. It solves a performance issue and library uploading timeout error from Figma's servers.
• Add auto layout for the Bottom Navigation component.
• Add badges for easy spotting complex components and simple components.
• Add a documentation page that explains how to make the most of complex components.

v4.9.0

May 18, 2020

Figma

Initial release

Sketch

Initial release