Terry Lin

June 8th: Design systems, AI icons, and frontend struggles.

June 8, 2025 (2w ago)0 views

Published: June 8, 2025

This week I've been focusing on redesigning the frontend of the iOS application. My backend is mostly done, and now I've fine tuning the user experience end-to-end.

✅ What Went Well

Design system breakthrough: Finally got my Figma setup dialed in with proper typography hierarchy (headers to captions) and color tokens. No more hard-coding every text size and color—everything references the system now.

Figma design system with typography styles and color tokens

AI-generated icons: Used GPT-4 to generate all my workout equipment icons (barbells, treadmills, etc.). The key insight was using consistent prompts with the same color schema to maintain visual cohesion. It's wild that you don't need to design from scratch anymore—AI handles the heavy lifting while you focus on the system and consistency.

AI-generated workout equipment icons showing consistent design style

❌ What Didn't Go Well

Frontend design continues to be my biggest challenge:

Light mode and dark mode was a massive struggle: When I simply inverted colors for dark mode, it failed spectacularly—what looked good in light mode became completely unusable. I spent way too much time trying to make both modes work perfectly.

Eventually I realized for V1, I don't need to overwhelm myself by designing the application twice. I decided to focus on getting the app looking right in light mode first, then tackle dark mode later. Sometimes the best decision is knowing when to scope down and keep moving forward.

App screenshots showing light and dark mode design comparison

💡 What I Learned

Move slow to go fast: When it comes to Figma designs, taking the time upfront to define your design system—typography, colors, and general shields—is a lot of work initially. But once you get this foundation down, it's exponentially faster to prototype based on a set of universal rules for the frontend. The investment in systematic thinking pays dividends later.

What I'm Doing Next Week 🚀

Figma state mapping: I'm realizing that building out the full design system requires more effort than I initially thought. I need to think through all the different UI states systematically.

My plan is to create a state table with four columns:

This will help me map out every interaction and ensure I'm designing for all the edge cases, not just the happy path. It's more methodical design work, but it should prevent the scrambling I've been doing when I realize I missed a state.