Sign in

Designer. Tutor. Created Cabana Design System for Figma & Sketch
A blue and purple gradient background with the words ‘UI & UX Micro Tips: The Ultimate Collection’ in white.

1. Make your elements appear more defined with a subtle border.

2 ‘Empty State’ examples. One shown with a short paragraph of text, and the other with helpful text and a button to guide you.

2 Typography examples. Both using a 4pt Baseline Grid for measuring line spacing between the text.

2 Mobile design examples. One shown without a Tab Bar, and the other with a visible Tab Bar.

1. Try to keep the Tab Bar a constant within your Mobile App.

2 Card design examples. One showing a title with a lot of line height, and the other with much less line height applied.

1. It’s ok the bend the rules sometimes when it comes to Type Scales and Grids.

A blue/purple gradient with the words ‘Discover Figma’ in white

Checking out the Figma interface.

2 Card design examples. One with non-matching shapes, text styles etc., and the other with matching shapes, text styles etc.

1. Be consistent with your design elements.

The words ‘The UI & UX Tips Collection: Volume Two’ in blue against a black background.

2 Card design examples. One with mismatching text styles, and the other with text styles that have the correct weight, colour and size together.

1. Want to speak in a more informal tone? Try going all lowercase.

Blue background with the words ‘Creating a design system in Figma’ in white

Marc Andrew

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store