Design Kits v5.16.0

Febr 19, 2024

Figma

Material UI

• Sync with @mui/icons-material
• Added the MUI X Charts
• Updated the MUI X Data Grid
• Updated the MUI X Date Picker
• Updated to Figma Variables
• Fixed a couple of issues; find them in this GitHub milestone.

Joy UI

No updates.

Material UI Sync v0.1

April 3, 2024

Initial release

Please visit the Figma Community page to try out the plugin

Design Kits v5.15.0

Oct 8, 2023

Figma

Material UI

No updates.

Joy UI

This version was built around Joy UI v5.0.0-beta.8. The changes:

• Update the look & feel to better match the latest Joy UI release

Design Kits v5.14.0

Jul 26, 2023

Figma

Material UI

This version was built around Material UI v5.14.3.

The library is now fully designed with local variables.

• Added variables
• Fixed a couple of issues; find them in this GitHub milestone.
• Improved the Data Grid support

Joy UI

No updates.

Design Kits v5.11.1

Mar 1, 2023

Figma

Material UI

This is a small release to fix a couple of small bugs reported by designers in v5.11.0.

• Fixed a couple of issues, find them in this GitHub milestone.
• Improved the <Typography> component to have the font style changes with all the typography variants.
• Improved the support of the data grid, with more features like toolbar actions, tree data, and column panels.
• Fixed a couple of typos in the name of the design tokens for Token Studio.

Joy UI

No updates.

Design Kits v5.11.0

Jan 5, 2023

Figma

Material UI

Get an overview of the changes on this video! Given this release includes many changes, we suggest designing new screens using this new version instead of swapping instances to update existing screens.

Breaking changes

• Components have been separated into smaller APIs — which means the Figma component names have been changed as well. This naming also helps to filter more accurately. (e.g., searching <Button> will give you the first result of the component itself). It's easier to identify a Figma component vs. a regular element.

Changes

• Fixed a couple of issues; find them in this GitHub milestone.
• Add support for the Tokens Studio plugin. With a single click, you can now switch a group from the light to the dark mode.
• Add early preview for the Joy UI React library #71.
• Add support for slots with nested instances and subcomponents. More details in this Figma 22 Schema talk #112.
• Add new Space and Stack components.
• Add support for text properties #114
• Fix small bugs, thanks to your reports on GitHub.
• Redesign components documentation.
• Fix outdated links in the docs.

Joy UI

No updates.

Design Kits v5.4.1

Dec 14, 2022

Sketch

• Fix TextField and Select resize regression with the latest version of Sketch
• Add all shadows

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