AntD Figma Review

Current Design System

Icons

We could be using a separate system for icons that would allow us to use different icons for different projects. For example you can see the font awesome icons in a community file here: https://www.figma.com/file/pa27G0ZdjdXfkFH1Mvwo5t/Font-Awesome-Icons---Regular%2C-Solid%2C-Brands-(Community)?type=design&node-id=33%3A0&mode=design&t=IOVYaD48zyGRqCwx-1

Figma Layout

The layout in Figma is not the best presented or easy to navigate. While the elements are sorted alphabetically this is not the most useful order for them, ideally, we would have more commonly used components towards the top for quick access.

Splitting the library by styles, tokens, patterns and components may be the best solution for this be it all within the same document are within different libraries for each of them.

Continuing from this point the layout on the pages themselves could be improved upon by grouping elements into categorised pages in order to save space and setting them out in a more aesthetically pleasing fashion along with some form of documentation so anyone using the design system knows their use case.

Alerts

The custom actions toggle adds 2 buttons to the alert, do we need to better consider how these fit in the design? Would they be better suited horizontally aligned?

Buttons

Several variants of the accessible buttons are missing.

Would it be best to split each button style out into it’s own separate component?

I’m not a fan of the glow/shadow on the primary button as it gives an un-needed elevation.

Checkbox

The error state on the checkbox has text that feels too large. Should we standardise error messaging across all inputs for a more consistent experience?

Form

Do we need both horizontal and vertical alignment for the forms or is this adding an unneeded layer of complexity?

Inputs

Basic inputs component is broken, variant options are there with no selections because of this figma wont show it in the library.

Image

For consistency we need to consider the ratio of images. We should think about adding ratio shapes to allow us to work with specific ratios.

Input number

This kind of selection is very dated and not a good UX at all, especially when considering mobile

Menu

We need to better consider horizontal padding here for group titles as it currently sits right at the edge.

Illustrations

We should consider a separate library for illustrations with meaningful names and a wider selection

Documentation

Motion and interaction

Guidelines for animations and interactions would be nice to give developers and designers something to reference. We should also consider adding animations for loaders so they are visible in prototypes

Examples & Spec

I’m unsure what this page is showing

Other considerations

Type

We should have a page showing the available typestyles
It’d be a good idea to break the type styles up and name them by use case (e.g  Heading,  Sub heading, paragraph, caption/label etc)

Colour

We should have a page displaying all colours, Again it’d be helpful to break these colours into where they can and cannot be used this can be done using figma variables. This would also allow for easyh translation between light and dark modes

We should include elevation colours for light and dark modes

Some colours are missing from the styles for example the darker navy we added for the mobile app

Shadows

We should have several different shadow elevation available in the styles

Spacing and corner radius

This is something we should be setting up using variables to ensure consistency, ideally we’d work in a 4px baselines b-1, b-2, b-3, b-4, b-6, b-8, b-10, b-12 and b-15

Excess components and styles

Is there a genuine use case for all the components in the design system or are they overcomplicating, we should remove anything we don’t thing we will legitimately use in designs.

The AntD colours should be removed as this causes confusion and there is never a case where we should be using these

Proper documentation

Similar to the likes of material or any other established design system we should have a repository of guidelines and standards for using the design system correctly. This will offer best practices.

Mobile

We should consider what design changes will be made on mobile as not all components in the system are well suited for mobile. I did find this which might be some help https://www.figma.com/file/NwaeZltezMTkhmp0Z5zCsB/Ant-Design-Mobile?type=design&node-id=0%3A1&mode=design&t=2llnFyvbgtm3iowc-1

Component/Pages that need styling

1. Button (A)

1. -Card

1. -Carousel

1. -Cascader

1. Collapse

1. Comment

1. Descriptions

1. Empty

1. FloatButton FAB (A)

10)  Form

11)  Layout

12)  List

13)  Page header

14)  Progress

15)  Skeleton

16)  Slider

17)  Spin

18)  Steps

19)  Time Picker

20)  Transfer

21)  Tree

22)  Tree Select

Progressive steps for improvement

1. Decide if we need all the current components

1. Break icons into a separate library and other elements if decided

1. Organise and group pages in a logical way

1. Clearly structure pages so browsing is intuitive

1. Add needed colours, spacing/corner radius and shadows

1. Name colours and type according to use case

1. Make noted changes to existing components

1. Style the un-styled components

1. Create documentation (ongoing)