Back to blog

Ant Design System for Figma 6.2

New version based on Ant Design v6.2 is now available!

New components added to Ant Design

  • Added a new component Masonry.
  • Added Panel Steps component.
  • Added Progress / Value Position component.
  • Added Descriptions / Basic component.
  • Added Timeline / Horizontal.

New components added to Ant Design X:

  • Think
  • CodeHighlighter
  • FileCard
  • Sources
  • FileCard has been extracted from the Attachments component and moved to a separate component.

Added/updated component variables

  • Added a new variable VerticalMarginInline to Divider Vertical.
  • Added itemPaddingInline in the Menu component.
  • Added new variables to the Menu component: horizontalLineHeight, itemActiveBg, itemPaddingInline, dangerItemColor, dangerItemHoverColor, dangerItemSelectedColor, dangerItemActiveBg, dangerItemSelectedBg, darkDangerItemColor, darkDangerItemSelectedBg, darkDangerItemHoverColor, darkDangerItemSelectedColor, darkDangerItemActiveBg.
  • Added navArrowColor component to Steps.
  • Added component variables to Tabs: cardHeight, cardHeightLG, cardHeightSM.
  • Added new variables to the Skeleton component: blockRadius, paragraphLiHeight, paragraphMarginTop, titleHeight.
  • Added lineBorderRadius variable to the Progress component.
  • Added handleFontSize to the InputNumber component.
  • Added controlItemWidth to the Mentions component.
  • Added variables to the Rate component: starBg, starColor, starSize, starSizeLG, starSizeSM.
  • Added variables to the Slider component: handleActiveOutlineColor, handleLineWidth, handleLineWidthHover.
  • Added maxWidth to Tooltip.
  • Added variables to Switch: innerMaxMargin, innerMaxMarginSM, innerMinMargin, innerMinMarginSM.
  • Added actionsColor and pictureCardSize to Upload.
  • Added variables to the Avatar component: groupBorderColor, groupOverlapping, iconFontSize, iconFontSizeLG, iconFontSizeSM.
  • Added miniContentHeight and actualized Calendar size.
  • Added new variables: arrowOffset, arrowSize, dotGap, dotOffset.
  • Added borderlessContentBg variable to the Collapse component.
  • Added variables to the Descriptions component: colonMarginLeft, colonMarginRight, itemPaddingBottom, itemPaddingEnd.
  • Added variables to the Table component: expandIconBg, rowExpandedBg, rowSelectedBg, selectionColumnWidth, stickyScrollBarBg.
  • Added tailWidth to the Timeline component.
  • Added and used the actionsBg variable in the Card component.

New variants / sizes / states

  • Added a new variant in component InputNumber / Spinner.
  • Added Error status in the Menu component.
  • Added Large size to Pagination items.
  • Added Center variant to Steps / Steps Item / Horizontal.
  • Added Size variant to the Rate component.
  • Added solidTextColor to the Tag component.
  • Added variants to Tag / Status.

Naming changes / standardization

  • Changed name from Input / Pre Post Tab to InputNumber / Pre Post Tab.
  • Changed the name from Direction to Orientation in the Space component.
  • Changed the name from Direction to Orientation in the Splitter component.
  • Changed the name of the variable from resizeSpinnerSize to splitBarDraggableSize.
  • Changed the name from Description to Description Title in Steps / Steps Item / Horizontal component settings.
  • Changed the name from Position to Placement in the Tabs component.
  • Changed the name to dotPlacement from dotPosition and changed Left and Right to Start and End.
  • Changed the name from Expand Icon Position to Expand Icon Placement in the Collapse / Collapse Item component.
  • Changed the name in settings from Text Position to Text Placement in the Timeline component.
  • Standardized names of Select component items and made them all start with Select / Select Input.
  • Standardized naming and changed names from Input to, for example, Input / Input Item / Outlined.

Fixes & improvements

  • Deleted unused Splitter component variables.
  • Fixed table and cell settings and linked the Action 2 boolean property to the correct item.
  • Fixed and linked component variables to the appropriate global variables where they were missing.
  • Updated Pagination / Pagination Item settings by adding an Active variant as a separate item, adding a hover variant for the Active state, and adding Disabled to State.
  • Changed the height of Tabs Items.
  • Changed border radius SM and LG in DatePicker.
  • Fixed the background color of the Dashed Button disabled state to dashedBgDisabled and the disabled Ghost to colorBgContainerDisabled.
  • Fixed text position in the Progress component.
  • Fixed variables in DatePicker: cellHoverWithRangeBg, cellRangeBorderColor, paddingInlineLG, and actualized components.
  • Actualized and added to the Select component: multipleItemHeight, multipleItemHeightLG, multipleItemHeightSM.
  • Actualized Slider Handle settings with updated variables.
  • Fixed Tooltip background.
  • Fixed margin inside the TimePicker input.
  • Fixed extra node in Collapse.

Nested instances / structural updates

  • Added a link to the Masonry component in the Style Guide.
  • Added Footer to the Drawer component.
  • Added nested instance Select / Select Input to the Cascader component.
  • Added nested instance settings for Transfer / Transfer Buttons and a boolean to delete Arrow Back.
  • Added a nested instance to the AutoComplete component.
  • Added a nested instance option to the suffix in TimePicker and added a prefix.

Visual & UI adjustments

  • Changed Tag / Colorful settings from Border boolean to Type: Filled / Solid / Outlined.
  • Actualized Tag component colors from level 6 to 7 to improve contrast.
  • Removed the border option from the Tag component and the dashed border from Add New; updated icon color and internal margins, added an instance swap for the closeable icon, and updated the component background.

Deprecated Components

  • The List component has been deprecated and removed from the document.

Speed up your design and development process

Stop starting from scratch for every project. Use pixel-perfect elements to efficiently design your next Ant Design app.

Get access