I wanted to design the app I had in mind using Figma, so I tried learning it. But honestly, what I made didn't quite feel like a well-designed product.
So I figured that to use Figma well, I'd need to understand UI design fundamentals first.
Think of this as a post about the intent behind design decisions rather than how to use Figma!
Understanding Resolution and Units#
There's a difference between physical pixels (PX) and logical pixels (DP).
On the web, CSS recognizes px as logical pixels, and relative units like em and rem are also used.
Resolution and Screen Size
Resolution: The total number of pixels on a screen (width x height) e.g., 1920x1080, 1280x1024
Inches: The diagonal length of the screen (1 inch = 2.54cm) e.g., 24, 27, 32 inch monitors
Pixel Density
PPI (Pixels Per Inch): Number of pixels per inch
DPI (Dots Per Inch): Number of pixels in the actual screen area
Design Units
DP (Density-independent Pixels): Android's size unit
SP (Scale-independent Pixels): Android's text unit
PT (Point): iOS's size unit
At 1x DPI, things often look blurry, so it's better to export as PNG at 2x.
For illustrations and icons, using vector SVG files prevents pixelation.
8px Grid System#
The 8px grid system is a method that increases design consistency and developer-friendliness.
It means setting all element sizes and spacing in multiples of 8.
e.g., Icon base sizes: 16, 24, 32, 64px, etc.
If you set all your design asset sizes, spacing, and values in units of 8, you can create developer-friendly designs that don't break across any device. Since screen sizes evolved based on 8-bit (1 byte), using 8 as the base ensures images render cleanly.
You don't have to strictly stick to multiples of 8 -- use 4px or 2px increments when needed.
Examples of where the 8px grid system can be applied to UI: Font size, Line height, Padding, Margin, Radius, Fixed width/height, etc.
If you're not concerned about supporting every environment, you don't necessarily have to follow the 8px grid strictly.
In Figma, you can easily apply this by setting Preferences > Nudge amount to 8px.
Understanding the Box Model#
Every element exists within a box area. All UI elements can follow the box model.
- Content: The actual content
- Padding: The space between the content and the border
- Border: The boundary of the element
- Margin: The spacing between elements
Content and padding exist inside the border, while margin exists outside the border.
Padding handles the spacing between the content and the border, and margin handles the space between the border and the box area.
The recommended touch area is generally 44 x 44px or larger, though it can be smaller depending on the situation.
Fonts#
Default fonts can vary by operating system.
If you want a consistent font experience, it's a good idea to set fonts in your design/app ahead of time.
- Android: Noto Sans CJK KR (Korean), Roboto (English)
- iOS: Apple SD Gothic Neo (Korean), SF Pro Display (English)
Consider readability and brand consistency when choosing fonts.
Leveraging Design Systems#
I recommend using established design systems for consistent design!
- Material Design System
- Apple Human Interface Guidelines
If you need to create new components, it's best to start from well-made designs and gradually modify them.
Referencing these guidelines enables platform-specific design considerations.
Responsive Design#
It's good to consider responsive design for various devices.
- Apply responsive properties to components
- Set minimum/maximum sizes per device
- Mobile: min, max
- Tablet: min, max
- Desktop: FHD, QHD, 4K, etc.
Various devices to consider for responsive design:
Mobile, Tablet, Desktop, Watch, Car, VR
Asset Management#
- Figma can only export assets in sRGB color space
- Use vector formats (SVG) to create resolution-independent icons and illustrations
- For raster images, exporting as PNG at 2x DPI is recommended
Additional things to think about
Maintain design consistency using components and styles.
Use Auto Layout for flexible responsive layouts.
Test interaction designs before development using prototyping features.
In development, improve team collaboration efficiency using version control and collaboration features.
A man is great by deeds, not by birth.
— Chanakya
