002 — Responsive components
From Minimal Musings, sharing on design systems —
Last weekend, I had a wonderful and delicious banh mi with juicy BBQ pork inside. Having great food around the town reminds me how lucky I’m to live in the present. 🙏
Responsive design between a website and a mobile website may sound straightforward. Who doesn’t care about it? I thought the exploration wouldn’t be that bumpy.
The idea of responsiveness is simple but complex. The design scales up and down. Users feel the experience is seamless and accessible. Yet, this circumstance requires your typography and your detailed UIs to be responsive, and even your bigger UIs to be adaptive. Yes. The interface, the function, and the structure should be well-connected between smaller and larger screens to make sure the experience in any aspect is seamless.
2 lessons I learned while working on this topic:
- Components should configure their responsiveness within the components. End-users like developers and designers should not worry about how it scales. So we could make product development easier.
- When we want to code responsiveness inside components, the rem and em unit in CSS come in handy and they are future-proofing when we change the base font size in the product. Like from 14px to 16px. However, it’s not worthwhile when we’re not gonna implement it everywhere. Using a pure px unit gives us clarity instead.
✨ Great moment(s) with Figma
- Use Cmd+drag to select multiple inner layers. The time it can save from multiple selections by Shift+click is self-evident.
- Use the plugin “Find in page” to select a group of layers by using word search. It’s so useful when it comes to replacing a few checkboxes in my mockup without thousands of clicks. Ah, I forgot to mention the combination of the plugin and the “Paste to replace” feature in Figma is a killer.
