Updates

What's new?

See what's new in the latest version of Ant Design System Products

August 16, 2022

Ant Design System for Figma 2.5

Ant Design System for Figma (version 2.5) takes full advantage of the Figma Tokens plugin, allowing you to change the style of the entire UI kit in a few minutes.

What’s new

  • Added more Figma Tokens support to the Figma tokens plugin
  • Added Text / Base - Regular and Text / Base - Semibold styles
  • Added Text / Small - Regular and Text / Small - Semibold styles
  • Added Text / Large - Regular and Text / Large - Semibold styles
  • Added Title / H1, Title / H2, Title / H3, Title / H4 and Title / H5 styles
  • Added Primary color group that references the Daybreak Blue color group in the Figma tokens plugin
  • Added success-color-outline to Effect Styles
  • Added Figma Tokens automatic documentation feature to the documentation frames in the Documentation page
  • Added Padding tokens to the Spacing documentation frame
  • Added new tutorial: Customize with Figma Tokens

What’s changed

  • Redesigned the Text Styles to match the Ant Design documentation
  • Improved Figma Tokens experience within Ant Design System for Figma
  • Renamed tokens in the Figma Tokens plugin to match the names of the variables in the Ant Design less file
  • Adjusted Figma Tokens accordingly to match the new Text Styles
  • Changed the naming of Effect styles to match Ant Design’s less variables naming

What’s fixed

  • Minor bug fixes and improvements
July 21, 2022

Ant Design System for Figma 2.4

Version 2.4 introduces more tokens support in the Figma Tokens plugin: padding, height, border radius, and box shadow + minor changes and bug fixes

What’s new

  • added new tokens support in Figma Tokens plugin - Version 2.4 introduces more tokens support in the Figma Tokens plugin: padding, height, border radius, and box shadow. It means that you can now easily change the value of each token inside the plugin, and it will affect all elements in the file that use this token. View tutorial 📼

What’s changed

  • Renamed color styles names in the Extra group to match the exact names in the React code stylesheet

What’s fixed

  • minor bug fixes and improvements
May 26, 2022

Ant Design System for Figma 2.3

I’ve updated most components with the new Figma features, added new Ant Design components from versions 4.18+, and minor bug fixes and improvements. What is more, the UI kit now supports the Figma Tokens plugin.

What’s new

  • added new Component Properties feature to the most of the components
  • redesigned most of the components to match the new Figma features
  • updated components with new Auto Layout features
  • added new component Segmented
  • added new component Spin
  • added new component Anchor
  • added new component Image
  • added new Layout: Fixed Header
  • added Figma Tokens plugin support - now you can use the plugin to change the theme of the UI kit with a few clicks - more details here
  • added new color styles to support the Figma Tokens plugin theme switch
  • Extra / white - the style is used in elements that need to stay white when changing the theme from Light to Dark
  • Extra / gray-11 - the style is used as a background color in all menus, popout menus, and modals
  • Extra / tooltip-bg - the style is used for Tooltip component background
  • Extra / segmented-bg - the style is used for the selected state of the Segmented item component
  • Extra / segmented-bg-group - the style is used for the background of the Segmented group component
  • added a new demo to the Figma Community

What’s changed

  • redesigned Form components to match the Ant Design docs
  • Form components are now easier to use and create Forms
  • added the new Stroke feature to the components that were using box-shadow properties
  • redesigned the Table components
  • redesigned Welcome page
  • most of the variant groups on the Main pages have now auto-layout applied
  • removed state labels from Main pages
  • added new Extra color styles to components to support theme switch

What’s fixed

  • minor bug fixes and improvements
April 11, 2022

Ant Design Mobile for Figma 1.0

The powerful UI kit with mobile components for Figma based on the Ant Design Mobile library. Create mobile designs in no time.

What's new

  • Added Ant Design Mobile for Figma as a separate product
  • Added Ant Design Mobile for Figma to Full package: Solo license
  • Added Ant Design Mobile for Figma to Full package: Startup license
  • Added Ant Design Mobile for Figma to Full package: Enterprise license
January 4, 2022

Ant Design System for Figma 2.2

I've updated most of the components with the hover and click interactions and fixed minor bugs.

What's new

Added hover interactions to:

  • Button
  • Affix
  • Breadcrumb
  • Dropdown
  • Menu
  • Pagination
  • DatePicker
  • Input
  • InputNumber
  • Rate
  • Slider
  • TimePicker
  • Upload
  • Calendar
  • Table
  • Tree

Added click interactions to:

  • Checkbox
  • Radio
  • Select (Menu Item)
  • Switch
  • Collapse
  • Tabs
  • Tag (Checkable)

What's fixed

  • Input Focus States now use Effect Styles
  • Fixed padding issue in Switch component from 3px to 2px
  • More minor bugs and improvements

Preview Light Theme

Preview Dark Theme

September 13, 2021

Ant Design Charts for Figma 1.0

The powerful library of charts and graphs based on the Ant Design Charts react library. Design dashboards, analytics, presentations, and more with the set of the most common data visualization patterns that are simple to use and customize.

What's new

  • Added Ant Design Charts for Figma as a separate product
  • Added Ant Design Charts for Figma to Full package: Solo license
  • Added Ant Design Charts for Figma to Full package: Startup license
  • Added Ant Design Charts for Figma to Full package: Enterprise license
July 13, 2021

New website

I redesigned the antforfigma.com website from scratch to improve the experience and added some more features. Pricing is now more clear.

What's new

  • Added Tutorials page
  • Added Updates page
  • Added Become an Affiliate page
  • Added Pricing page
  • Added Customers page

July 13, 2021

Ant Design System for Figma 2.1

I fixed minor bugs and faults to improve the experience of using the UI kit for both themes. A huge thanks to Keven Lupien, who contacted me and pointed out some of these issues.

What's fixed

  • Icons are now flattened, and all icons are using one style - now, changing the color of the icon is even easier
  • fixed the inconsistencies in text styles in some components
  • fixed the Button's text auto-layout to use the new auto-layout feature
  • aligned the Buttons horizontally on the Button page
  • changed the Ghost's button height to 40px (was 42px)
  • fixed the icon in Input / Pre Post Tab / Item to use the icon from the internal library
  • changed the text in the Table frame from Borderless=False to Borderless=True on the Documentation page
  • changed the text in Form frame from Size=Default to Size=Small on the Documentation page
  • removed the empty image on the Avatar page (it shouldn't be there)
December 8, 2020

Ant Design System for Figma 2.0

I've redesigned the UI kit from scratch to make sure all components take the most out of Auto Layout V3 and Variants feature. I've also added all missing components from Ant Design and fixed bugs that were caused by the previous Auto Layout.

What’s new

  • redesigned the whole UI kit from scratch
  • the UI kit uses now SF Pro Text font
  • each Main Component sits now on its own page
  • components are now built with auto layout v3 and variants
  • added 'Documentation' page
  • added 'Layouts' page
  • added 'Welcome' page
  • added more details to 'Getting Started' page
  • added 'Layout', 'Spacing' and 'Elevation' pages to the 'Documentation'
July 7, 2020

UX Toolkit for Figma

Everything you need at an early stage of your UX design process. Visualize the hierarchy and structure of a future product or website based on Ant Design!

What's new

  • Added UX Toolkit for Figma as a separate product
  • Added UX Toolkit to Ant Design System for Figma (Startup, Agency, Enterprise and Enterprise Plus License)
March 4, 2020

Ant Design System for Figma 1.2

Added Dark theme and redesigned the UI kit to match Ant Design for React v4

Changes

  • changed the base rounded corners from 4px to 2px
  • redesigned error Button to match ant.design documentation
  • redesigned Menu component to match ant.design documentation
  • redesigned example screens
  • changed naming in color styles from Grey / grey-x to Neutral / gray-x
  • deleted space between value and px in typography styles naming

What's new

  • added back input plates
  • added Result component;
  • added Dark Theme;
  • added Layouts;
  • added Layouts color styles;

Small fixes

  • cleaned up layers;
  • minor component fixes;
February 26, 2020

Ant Design System for Figma 1.12

Added missing icons to the icon library and did some minor icon fixes

Minor fixes

  • Changed icon from icon/download to icon/upload in Upload button
  • Added missing icons to the library
February 24, 2020

Ant Design System for Figma 1.11

Added the new stretch feature to the some of the components.

What's new

  • Applied Stretch feature to: Buttons, Dropdown menu, Select menu, Input, Textarea, Collapse, Card, Popover, Tooltip, Alert, Modal, Notification
  • Added new component: PageHeader

Minor fixes

  • applied Auto Layout to ‘tag/colorful’ components
  • fixed component label misspells in Popconfirm
December 11, 2019

Ant Design System for Figma 1.10

Updated some of the components with the new auto layout feature.

What's new

The components that has been updated with the auto layout feature:
Button, Breadcrumb, Dropdown, Pagination, Checkbox, Rate, Radio Button, Select, Upload, Input, Textarea, Badge, Comment, Collapse, Card, Popover, Tooltip, Timeline, Tag, Tabs, Alert, Drawer, Modal, Message, Notification, Popconfirm

The list of components that are not updated:
Components that are fixed width or need manual resizing:
Affix, Menu, Date Picker, Switch, Slider, Transfer, Input Number, Avatar, Calendar, Empty, Progress
Components that are too complex to update with the current state of Auto Layout feature: Steps, Table

August 28, 2019

Video Tutorial

I've recorded a short tutorial on how to use Ant Design System for Figma

Video tutorial

In the video you will learn:

  • how to import .fig file and set up the UI kit
  • how to publish the UI kit to your Team Library
  • how to use Ant Design components and styles
  • how to create a simple UI
  • what Figma plugins are useful to create this UI and how to use them

Notice:

You don't need to use Button Resizer plugin anymore. Ant Design UI kit supports auto layout now :)

June 24, 2019

Ant Design System for Figma 1.0

The UI kit is released!

Get all the new files

After each update you will get an e-mail with the updated files. You can also get the new files via Gumroad's library.

Learn how
speed up your design process

Get Ant Design System Today

Stop wasting time on creating everything from scratch for every new project you start. Use this set of handcrafted elements to design your next product efficiently.

Purchase now
Ant for Figma UI