Design Kits v5.9.0

Jul 25, 2022

Figma

Breaking changes

Some names have been changed in 5.9.0 to quickly distinguish between elements and components. 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.

• Badge

  • Name change from Badge W. Icon to Badge with Component

Bottom Navigation

• Name change from BottomNavigationAction to BottomNavigation/Elements/Action

• Card

  • Name change from CardHeader to Card/Elements/CardHeader
  • Name change from CardActions to Card/Elements/CardActions
  • Name change from CardMedia to Card/Elements/CardMedia
  • Name change from CardContent to Card/Elements/CardContent

• Checkbox

  • Name change from CheckboxWformGroup to Checkbox/with Form Group

• DataGrid

  • Name change from DataGridHeader to DataGrid/Elements/Header
  • Name change from DataGridCell to DataGrid/Elements/Cell
  • Separate component DataGridRow to DataGrid/Elements/Row Header and DataGrid/Elements/Row Cell
  • Name change from DataGrid to DataGrid Table

• Dialog

  • Name change from DialogTitle to Dialog/Elements/DialogTitle
  • Name change from DialogContent to Dialog/Elements/DialogContent
  • Name change from DialogActions to Dialog/Elements/DialogActions

• Pagination

  • Name change from UnstyledPaginationItem to Pagination/Elements/UnstyledPaginationItem
  • Name change from PaginationItem to Pagination/Elements/PaginationItem

• Radio

  • Name change from Radio W. Form Group to Radio/with Form Group

• Rating

  • Name change from Star to Rating/Elements/Star

• Slider

  • Name change from Slider Track to Slider/Elements/Slider Track
  • Name change from Slider Rail to Slider/Elements/Slider Rail
  • Name change from Slider Mark to Slider/Elements/Slider Mark
  • Name change from Slider Thumb to Slider/Elements/Slider Thumb
  • Name change from Slider Value Label to Slider/Elements/Slider Value Label
  • Name change from Slider Label to Slider/Elements/Slider Label

• SpeedDial

  • Name change from SpeedDialItem to SpeedDial/Elements/SpeedDialItem

• Stepper

  • Name change from Step Elements to Stepper/Elements/Step Elements
  • Name change from Step to Stepper/Elements/Step

• Table

  • Name change from TableHead to Table/Elements/TableHead
  • Name change from TableCell to Table/Elements/TableCell
  • Name change from TableFooter to Table/Elements/TableFooter
  • Name change from TableHeadRow to Table/Elements/TableHeadRow
  • Name change from TableCellRow to Table/Elements/TableCellRow

• Tabs

  • Name change from TabItem to Tab

• Timeline

  • Name change from TimelineDot to Timeline/Elements/TimelineDot
  • Name change from TimelineItem to Timeline/Elements/TimelineItem

• Toggle Button

  • Name change from ToggleButton to ToggleButton/Elements/Button
  • Name change from ToggleButtonGroup to ToggleButton

Changes

• Fixed a couple of issues, find them in this GitHub milestone.
• Reduce the number of variants using the Boolean property
• Remove all click interactions inside components as they would interfere with the ability to add new click interactions
• Change all interaction animation to ‘Instant’ for better performance
• Add usage examples on each component’s page
• Add ‘Large’ variant to Checkbox and Radio components
• Add ‘Instance swap’ property to relevant components like Button, Icon, IconButton, etc.
• Add Spacer component
• Fix inconsistent padding

Adobe XD

• Merge the light and dark theme into the same Adobe XD file
• Add dark examples for all components
• Add “default“ and “inherit“ color variables for relevant components
• Add Card multiline component
• Update and polish all components
• Remove master components to improve the design experience and performance
• Remove severity colors to improve performance
• Add interactions to relevant components
• Match components variant names with the React components

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.