October 24, 2022

Ant Design System for Figma 3.0

Version 3.0 introduces new features that will boost designer and developer workflow. It will help you and your team develop projects faster than ever!

What's new?

Sync Figma Tokens with code

This new additional feature will allow you to sync Ant Design System for Figma with the Ant Design React (v 4.23) repository and push token changes directly from Figma to code. I spent hundreds of hours rebuilding the structure of the tokens in the Figma Tokens plugin to match the official code. Learn more about Figma Tokens Sync here.

Improved components Inspect panel

Each component and icon now has a React code sample and a link to documentation in the Inspect panel in Figma. Developers can copy the sample code of the component directly from Figma or go to the Ant Design documentation by clicking on the View documentation button.

Redesigned documentation

I’ve decided to move the documentation of the components from one page to separate pages. Now, each component has a dedicated page with main components and documentation. It also lowered the file size, making it quicker to work with on slower machines.

Slot, Space, and Grid components

I’ve added new components to help you build your layouts without detaching components. Space and Grid components also have the sample code in the Inspect panel that developers can use in their React implementation.

Figma Tokens features

Version 3.0 also takes full advantage of the Figma Tokens plugin, allowing you to change the style of the entire UI kit in a few minutes. You can also switch from a light to a dark theme.

Video Overview

download

How to get the new updates?

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

Learn how
Get Ant Design System for Figma today

Speed up your design and development process

Stop wasting time on creating everything from scratch for every new project you start. Use pixel-perfect and handcrafted elements to design and implement your next Ant Design app efficiently.