Abstract
For UIUX beginners digging in the path of Figma’s variety of functions. As an obsessive designer, I need to control every details in pixels — which become a disaster when you want to add a little different into the final design. God heard our pray and give us Auto Layout — which is, in the other way, path to (coding) hell. Auto Layout will be your greatest weapon to explain your designs’ transition and animation on the prototype. The hell is, Auto layout is built according to CSS logic, so you might want to check your understanding on CSS’s theories before moving into the great world of Auto Layout.
Responsive mindset
When you are newbie to the UI world, designing interface is like drawing on a fixed canvas — draw a rectangle here and pick a circle there. Now you have to accept a totally new concept. Your canvas is going to change all the time, and you need to make sure all your components can be perfectly match with your design all along.
Things go messy now. When someone is squeezing along the x-axis (that’s mean making the screen narrow), how will you approach your components? Do you want to close the sidebar, or hiding some unnecessary functions? Will some components move along according to the y-axis? You need to consider them all and don’t let the programmer decided for your design.
Box Model
Margin, boarder, padding and their friends.
The most abundant elements in design, white space. You are not going to “reserve” space for your design. Instead, you need to pay attention to the space surrounding your design elements, and measure them, so that you can allow fixed margin.
- Flexbox
- Justify content