Pro
Olawale Balo
Product Designer | UI/UX, Design Systems, Framer Expert
- 5.00
- Rating
- 26
- Followers
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
34
Instagist - Room Based Social Media App
1
2
Cravely – Mood Based Recipe Discovery
1
4
I’m thrilled to introduce Easy Zakat, a web and mobile app I created to streamline the collection of zakat, sadaqah, and waqf endowments. The app ensures all charitable donations are managed in strict accordance with Islamic principles, making it easier for both individuals and organizations to give and distribute charity efficiently.
3
3
277
Seamless connections, clean and intuitive Integrations
1
185
Easy Zakat - Zakat Collection and Distribution
1
2
Expathia connects expats with trusted professionals in Poland, enabling meaningful interactions and seamless transactions. To support this mission, I designed and built an intuitive, professional messaging experience entirely in @Figma, created to keep conversations smooth, confident, and reliable for both sides. Which part of a messaging flow do you believe has the biggest impact on user confidence?
2
179
Expathia – Immigration Services for Poland
1
1
PropaPay – Real Estate Payment Gateway
1
0
I just designed a clean, user-friendly sign-up page for Textive.
The goal: keep onboarding simple, intuitive, and conversion-focused.
Would love your thoughts below 👇
1
2
276
Built a clean, modern landing page for Clarity AI, an AI writing tool with real-time suggestions and tone control.
Entry for the Design Challenge by @marina_uiux (https://x.com/marina_uiux), sponsored by @framer (https://x.com/framer). Designed & built entirely in Framer → https://clarityai.framer.ai
(https://clarityai.framer.ai)#budarinachallenge (https://x.com/hashtag/budarinachallenge?src=hashtag_click) #framer (https://x.com/hashtag/framer?src=hashtag_click) #ai (https://x.com/hashtag/ai?src=hashtag_click)
1
105