I am writing this post to convey some information for my fellow designers using figma. I hope this will make my collaboration with them better. I am going to be updating it whenever I find something new.
Main Layout Sizes
Since nowadays we work with multiple screen sizes, it is good to consider for what platform we are building our project for. Here I have some sizes for each platform.
- Mobile : 600px
- Tablet : 960px
- Small Laptop / Large Screen Tablet : 1264px
- Large Laptop / Desktop : 1904px
These are not words of god so they can be changed. The key is to know the platform you choose.
I use 12 columns grid system which is used to make responsive UI elements. This video shows how to set these up :
Here are some default gutter sizes for major CSS frameworks:
Bootstrap : 30px (15px on each side of a column)
Vuetify : 24px (12px on each side of a column)
It’s also good to have a “center” grid type to always account for the empty spaces at start & end of the screen.
Positioning inside the grid
As a general rule :
- Decide how wide your content will need using column as unit.
- for instance : 2 column wide button, 1 column wide title
- Do not use the default padding (gutter) of the column as a starting or ending point of your content
- This will make the integration more difficult. It also breaks the definition of padding. Padding should be regarded as a space or empty space, not the content.
Is there a Navigation Drawer?
If you use a navigation drawer which is common in dashboard type designs, be careful not to include it in every page as it will make the integration more difficult. Create one page with the navigation drawer & only in that page describe everything related to it & the page in general.
As a general rule, do not go below 14px unless you know what you are doing. I have come across many designs that looked good on their own but when I implemented them, the texts were tiny & difficult if not impossible to read.