pro
Olawale Balo
Product Designer | UI/UX, Design Systems, Framer Expert
I've always loved interaction, that moment a UI responds and just feels right. That curiosity pulled me into WebGL, shaders, and GSAP.
This time I went further: a fully 3D, walkable portfolio.
I didn't know Three.js or React Three Fiber going in. Used AI to learn fast enough to actually ship it.
Walk the gallery, approach exhibits, open full case studies, no page ever leaves the scene.
Still a WIP. Next: refining the 3D models.
https://x.com/walebuilds_/status/2087446204170785007?s=20
1
40
Design tokens are the DNA of your design system.
They establish a single source of truth for every visual decision including color, typography, spacing, radius, shadow, and more.
A few examples:
🎨 Color → color-bg-brand
🔠 Typography → text-heading
📏 Spacing → space-4
🔵 Radius → radius-md
🌑 Shadow → shadow-xs
With Figma Variables, token to code mapping is seamless.
Update a value once in Figma → sync to code → the entire product updates automatically.
No manual overrides
No inconsistencies
No design drift
Design tokens remove guesswork and enforce consistency across teams, platforms, and releases. Before you build components, build a solid token architecture.
👉 What’s the hardest part about setting up your tokens?
1
336
Instagist - Room Based Social Media App
1
21
Cravely – Mood Based Recipe Discovery
1
17