Operational Efficiency
Streamline the transition from Figma to Webflow using responsive components that eliminate the need for manual mobile redesigns.
About the Project
In my 4th year in Aspire, I was promoted to lead a design team of three. My first major initiative was building a comprehensive design system from the ground up. Previously, our web development workflow was entirely manual, leading to constant friction, inefficient back-and-forth, and a lack of organized assets. I collaborated closely with the website and digital marketing teams to establish a scalable foundation that transformed our production process into a faster and more effective engine for growth.
The project objectives are...
Unified Design Language
Standardize font styles, spacing, and components into a centralized source of truth to resolve friction between designers and developers.
Scalability & Organization
Establish a robust asset management system that enables bulk updates across 120+ pages while maintaining high performance.
Identifying the bottlenecks
I worked with the website team and digital marketing manager to break down the core issues — ensuring the system would also solve scalability and slow load times, not just the symptoms. Below is a preview of our working files.
The challenges we face...
- No centralized system. We manually copied and pasted similar elements from old Figma files.
- Without a system, the website would only grow more expensive and difficult to scale.
- Looking ahead, the lack of a system would make the website increasingly expensive and difficult to scale.
- Onboarding new team members became a major bottleneck.
Requires 10 working days
for every new page.
With no centralized system, we manually copied elements from old Figma files — dragging simple projects out to nearly two weeks each, with most of it avoidable rework.
For Designers
Constant confusion over "standard" font styles, spacing, and container sizes forced us to essentially build every new page from scratch.
For Developers
A total lack of sync with the design team resulted in repeating errors caused by unintentional changes and a struggle to understand existing classes or components.
For Project Mgrs
Development velocity slowed significantly, as a disproportionate amount of time was spent on maintenance and fixing avoidable design-to-dev discrepancies.
So,
we need to....
- Eliminate the 10-day "copy-paste" cycle by optimizing the Figma-to-Webflow workflow and aligning Figma components with Webflow classes, ensuring developers can easily understand and reuse existing structures to prevent manual errors and slow development speeds.
- Implement a strict technical source of truth using Figma variables and styles to automate spacing, typography, and color tokens, removing designer confusion over standard sizes and eliminating the need to build every new page from scratch.
- Create a scalable design-to-dev bridge where components are built once and synced across all sites, preventing site bloat and establishing a documented, high-performance system for efficient team onboarding.
Building the system
I began the building phase by mapping out all the foundational information regarding the tools and frameworks we use across the entire web development process.
First, I learn the structure...
Full audit of our existing Figma files to identify recurring patterns within the workflow and elements that needed standardization. Also measuring the baseline production time to build certain pages as a clear benchmark of the old system and workflow.
Understanding the sync between Figma features like variables and styles and Webflow classes and tokens to ensure a seamless technical translation from design to code.
Then I start building the new system...
I focused on syncable components — build once, update across multiple sites — stress-testing the handoff over several rounds with developers and constantly updating documentation from their feedback to eliminate repeating errors.
Source
Variables & styles define the single source of truth.
Figma
Library
Standardized, accessible, pre-defined component structures.
Relume
Output
Classes & tokens aligned 1:1 — build once, reuse everywhere.
Webflow
So, here's
how I built it...
- 1
Building the core library using Relume to provide a standardized and well-structured single source of truth.
- 2
Running several rounds of iterations with the development team to stress-test the workflow and ensure a truly seamless handoff.
- 3
Creating syncable components to allow building once and updating across multiple sites with minimal effort.
- 4
Constantly updating the documentation based on team feedback to eliminate repeating errors and ensure the system stays relevant.
2 weeks
of implementation
2 weeks
of refining
It took roughly 2 weeks to complete the final deliverable. After that, we spent another 2 weeks refining the system through continuous iterations before launching it and applying the standards across all 120+ web pages.
Final: The design system
Note: Full Figma files are confidential and cannot be shared publicly. Instead, I've provided high-level previews to showcase the system's architecture and core components.
The core deliverables are...
Color Variables & System Full token set incl. Dark mode
Typography Guideline Scales, weights & rules
Buttons & UI Elements Every interactive state
Spacing & Padding Every interactive state
Imagery Styleguide To maintain consistent look and feel
Components: Page Sections Figma component library
Other deliverables
- Shadows
- Effects
- Rounded Corners
- Iconography
- Logo Library
- Localisation
How it transforms our work
60-75%
Faster production end-to-end
<1second
Page loading time
+67%
CTR on core product pages
Here is the transformation...
Before & after, side by side
What the system actually changed, point by point.
Before
After
Production time
A single landing page averaged 10 working days (~4 design + ~6 dev).
Production dropped from 9 days to under 4, a 60–75% speed-up.
Responsiveness
Separate mobile versions added another 1–2 days of manual effort.
No separate mobile designs; components were already responsive.
Consistency
Colors and typography were inconsistent, with no standardized styles.
Global styles and variables kept consistency with minimal friction.
Performance
Long load times from redundant, overlapping component layers.
Most pages loaded in under 1 second thanks to a clean structure.
Collaboration
Undocumented, manual processes made stakeholder expectations unclear.
Synchronized workflows let the team collaborate and revamp faster.
Scalability
Revamping 120+ pages was nearly impossible without a central system.
Revamped pages drove a 67% increase in CTR on core product pages.
Other projects
See all projects
Kayn Argan Oil
Elevates Kayn Argan Oil with a sophisticated, premium aesthetic that reflects its authentic Moroccan origin with elegant touch to build a strong digital presence.
How Aspire Works
A dedicated landing page that pulls back the curtain on how Aspire actually works, turning complex fintech infrastructure into a clear, transparent narrative that replaces doubt with credibility.
NOBI Bakery
A digital storefront and landing page for NOBI Bakery, where time-honored Japanese baking meets modern flavors, wrapped in a seamless ordering experience for busy city dwellers.