Available for projects
Available for projects
Rolando
FERNANDEZ
Rolando
FERNANDEZ
Lead Design Engineer building scalable component libraries and design-to-code workflows.
Lead Design Engineer building scalable component libraries and design-to-code workflows.
Trusted automation experts leveraging AI to reduce costs through strategic consultation and implementation.
🇪🇺 Based in Europe
🇪🇺 Based in Europe
A systems-thinking designer who simplifies complexity
Overview
A systems-thinking designer who simplifies complexity
What I do
User Interface Design
Design Systems
Prototyping
Responsive Design
Frontend Development
Design Tokens
I build design systems that eliminate friction between design and development. With 20 years bridging strategy, design, and engineering, I create scalable component libraries, establish design token architectures, and implement workflows that help teams ship faster without compromising quality. I lead by making complex systems accessible. From establishing governance frameworks to mentoring engineers and prototyping new patterns, my focus is removing obstacles so teams can do their best work. I bring deep expertise in React, TypeScript, and Figma combined with strategic thinking about how design systems serve business goals.
I build design systems that eliminate friction between design and development. With 20 years bridging strategy, design, and engineering, I create scalable component libraries, establish design token architectures, and implement workflows that help teams ship faster without compromising quality. I lead by making complex systems accessible. From establishing governance frameworks to mentoring engineers and prototyping new patterns, my focus is removing obstacles so teams can do their best work. I bring deep expertise in React, TypeScript, and Figma combined with strategic thinking about how design systems serve business goals.
About me
My story
My Experience
Education
Certifications
I'm a design systems engineer, originally from Venezuela and French citizen since 2015, based in the Netherlands. I've spent the last 20 years building bridges between design and engineering, working across Europe and Latin America for companies ranging from startups to enterprise.
My background is unconventional. I started in Business Process consulting, moved into Product Development, and eventually found my home at the intersection of Design and Code as a Design Engineer.
Outside of work, I volunteer with electronic music festivals, handling websites, mobile apps and mailing campaigns. I love to travel and I'm trilingual (Spanish, French, English), which has shaped how I think about communication and collaboration across cultures.
My story
My Experience
Education
Certifications
I'm a design systems engineer, originally from Venezuela and relocated to Europe in 2010. I've spent the last 20 years building bridges between design and engineering, working across Europe and Latin America for companies ranging from startups to enterprise.
My background is unconventional. I started in Business Process consulting, moved into Product Development, and eventually found my home at the intersection of Design and Code as a Design Engineer.
Outside of work, I volunteer with electronic music festivals, handling websites, mobile apps and mailing campaigns. I love to travel and I'm trilingual (Spanish, French, English), which has shaped how I think about communication and collaboration across cultures.
My Experience >
I'm a design systems engineer, originally from Venezuela and relocated to Europe in 2010. I've spent the last 20 years building bridges between design and engineering, working across Europe and Latin America for companies ranging from startups to enterprise.
My background is unconventional. I started in Business Process consulting, moved into Product Development, and eventually found my home at the intersection of Design and Code as a Design Engineer.
Outside of work, I volunteer with electronic music festivals, handling websites, mobile apps and mailing campaigns. I love to travel and I'm trilingual (Spanish, French, English), which has shaped how I think about communication and collaboration across cultures.
My story
My story
My Experience
Education
Certifications
I'm a design systems engineer, originally from Venezuela and relocated to Europe in 2010. I've spent the last 20 years building bridges between design and engineering, working across Europe and Latin America for companies ranging from startups to enterprise.
My background is unconventional. I started in Business Process consulting, moved into Product Development, and eventually found my home at the intersection of Design and Code as a Design Engineer.
Outside of work, I volunteer with electronic music festivals, handling websites, mobile apps and mailing campaigns. I love to travel and I'm trilingual (Spanish, French, English), which has shaped how I think about communication and collaboration across cultures.
Case studies
Featured Case Studies
Modernizing Pillar UI Library
Enterprise Design System Transformation
Design tokens
SCSS architecture
Team leadership
Led the transformation of PROS's 2016 component library into a modern, token-based design system without breaking production. Architected a three-layer token system that bridges Figma KIT to production code, enabling true design-to-code parity. Built and led a distributed team of UX engineers across 4 countries, implementing quarterly release cycles with 40 components migrated. Pioneered AI-assisted development workflows using Windsurf IDE and MCP servers, reducing migration time by 25% while improving accessibility compliance.
60+
Static and dynamic design tokens created
40/50
Components migrated to SCSS (80% complete)
45
New SCSS files using token architecture
Multi-Brand Design System for PROS Digital Retail
Scalable White-Label Component Library for the airlines industry
Figma variables
Atomic design
Design systems
Architected a four-layer token system that eliminated code duplication across airline brands while enabling complete visual customization. Mirrored token architecture 1:1 between Figma Variables and SCSS, creating true design-code parity. Established systematic design operations including Storybook documentation, office hours, and self-service onboarding playbooks that empowered developers across multiple product teams.
9+
Unique airline themes from single codebase
50+
Components with dynamic theming and WCAG compliance
40%
Onboarding reduced for new airlines
Easy Builder | RunMyProcess (Fujitsu)
No-Code Application Platform
Product strategy
User research
React
Led product strategy and design for a no-code platform that democratized application development at RunMyProcess. Conducted comprehensive user research with presales professionals to understand mental models, then designed a visual drag-and-drop interface abstracting technical complexity. Built complete product from concept through launch as Product Owner and Senior Frontend Developer, establishing React as the standard framework and creating reusable patterns adopted across the organization.
75%
Reduction in prototype development time
50+
Applications built by presales teams in first 18 months
50%
Increase in presales efficiency
Fertinitro BPM Transformation - Grupo Kimetic
Digital Transformation of Procurement Operations
BPM
Workflows automation
Project Management
Led end-to-end BPM implementation transforming procurement operations at a state-owned petrochemical company. Conducted on-site immersion and 40+ stakeholder interviews to design a five-stage workflow system with automated document generation and approval routing. Managed project across discovery, design, development, and deployment while coordinating between client, development partner, and executive stakeholders. Created comprehensive documentation that became a template for other enterprise implementations.
60%
Reduction in procurement cycle time
40%
Increase in department capacity
4
Months for full project implementation
Pillar modernized from 95 legacy LESS files to a token-based SCSS architecture serving 50+ engineers across multiple SaaS products
Finense streamlined onboarding and boosted their compliance accuracy by 21% within six months.
Empowered non-technical presales teams to build working prototypes in hours instead of weeks.
Transformed a procurement bottleneck into an enabler through systematic BPM implementation in 4 months.
Previous
Next
Case studies
Featured Case Studies
Modernizing Pillar UI Library
Enterprise Design System Transformation
Led the transformation of PROS's 2016 component library into a modern, token-based design system without breaking production. Architected a three-layer token system that bridges Figma KIT to production code, enabling true design-to-code parity. Built and led a distributed team of UX engineers across 4 countries, implementing quarterly release cycles with 40 components migrated. Pioneered AI-assisted development workflows using Windsurf IDE and MCP servers, reducing migration time by 25% while improving accessibility compliance.
Case studies
Featured Case Studies
Modernizing Pillar UI Library
Enterprise Design System Transformation
Design tokens
SCSS architecture
Team leadership
Led the transformation of PROS's 2016 component library into a modern, token-based design system without breaking production. Architected a three-layer token system that bridges Figma KIT to production code, enabling true design-to-code parity. Built and led a distributed team of UX engineers across 4 countries, implementing quarterly release cycles with 40 components migrated. Pioneered AI-assisted development workflows using Windsurf IDE and MCP servers, reducing migration time by 25% while improving accessibility compliance.
60+
Static and dynamic design tokens created
40/50
Components migrated to SCSS (80% complete)
45
New SCSS files using token architecture
Writing Highlights
Sharing insights on design systems, UX engineering, and the bridge between disciplines
A practical guide for designers to leverage flexbox concepts in Figma for better handoff.
How MCP Servers are changing the game for UX/UI Designers
A practical guide for designers to leverage flexbox concepts in Figma for better handoff.
How MCP Servers are changing the game for UX/UI Designers
A practical guide for designers to leverage flexbox concepts in Figma for better handoff.
How MCP Servers are changing the game for UX/UI Designers
Exploring how AI-powered tools bridge design and development with real examples from PROS.
Integrating Flexbox principles with Figma auto layout
Exploring how AI-powered tools bridge design and development with real examples from PROS.
Integrating Flexbox principles with Figma auto layout
Exploring how AI-powered tools bridge design and development with real examples from PROS.
Integrating Flexbox principles with Figma auto layout
Playground
Code experiments and side projects
Not everything needs a case study. This is where I test new patterns, play with emerging tools, and share the experiments that don't fit anywhere else. Some are polished prototypes, others are quick sketches. All of them represent learning something new or solving a problem that caught my attention.
See more examples in:
Cyprus Airways Loading Spinner
Branded loading spinner with dual counter-rotating rings and Cyprus Airways' leaf icon. Smooth animations powered by React and motion libraries.
+ Code Sandbox
Giphy Search with TanStack Query
GIF search and selection interface built with TanStack Query. Demonstrates data fetching, caching, and state management patterns.
+ Code Sandbox
Animated Burger Menu Icon
Interactive hamburger menu icon that smoothly transforms into an X. Built with pure CSS animations using SCSS pseudo-elements and transitions.
+ code Sandbox
Figma-to-Production Pipeline
GitHub Actions pipeline that automatically processes Figma design updates and deploys to production. Features custom Vite plugin for seamless Figma asset integration.
GitHub + Figma Sites
Cyprus Airways Loading Spinner
Branded loading spinner with dual counter-rotating rings and Cyprus Airways' leaf icon. Smooth animations powered by React and motion libraries.
+ Code Sandbox
Giphy Search with TanStack Query
GIF search and selection interface built with TanStack Query. Demonstrates data fetching, caching, and state management patterns.
+ Code Sandbox
Animated Burger Menu Icon
Interactive hamburger menu icon that smoothly transforms into an X. Built with pure CSS animations using SCSS pseudo-elements and transitions.
+ code Sandbox
Figma-to-Production Pipeline
GitHub Actions pipeline that automatically processes Figma design updates and deploys to production. Features custom Vite plugin for seamless Figma asset integration.
GitHub + Figma Sites
Cyprus Airways Loading Spinner
Branded loading spinner with dual counter-rotating rings and Cyprus Airways' leaf icon. Smooth animations powered by React and motion libraries.
+ Code Sandbox
Giphy Search with TanStack Query
GIF search and selection interface built with TanStack Query. Demonstrates data fetching, caching, and state management patterns.
+ Code Sandbox
Animated Burger Menu Icon
Interactive hamburger menu icon that smoothly transforms into an X. Built with pure CSS animations using SCSS pseudo-elements and transitions.
+ code Sandbox
Figma-to-Production Pipeline
GitHub Actions pipeline that automatically processes Figma design updates and deploys to production. Features custom Vite plugin for seamless Figma asset integration.
GitHub + Figma Sites
Cyprus Airways Loading Spinner
Branded loading spinner with dual counter-rotating rings and Cyprus Airways' leaf icon. Smooth animations powered by React and motion libraries.
+ Code Sandbox
Giphy Search with TanStack Query
GIF search and selection interface built with TanStack Query. Demonstrates data fetching, caching, and state management patterns.
+ Code Sandbox
Animated Burger Menu Icon
Interactive hamburger menu icon that smoothly transforms into an X. Built with pure CSS animations using SCSS pseudo-elements and transitions.
+ code Sandbox
Figma-to-Production Pipeline
GitHub Actions pipeline that automatically processes Figma design updates and deploys to production. Features custom Vite plugin for seamless Figma asset integration.
GitHub + Figma Sites
Playground
Code experiments and side projects
Not everything needs a case study. This is where I test new patterns, play with emerging tools, and share the experiments that don't fit anywhere else. Some are polished prototypes, others are quick sketches. All of them represent learning something new or solving a problem that caught my attention.
See more examples in:
Cyprus Airways Loading Spinner
Branded loading spinner with dual counter-rotating rings and Cyprus Airways' leaf icon. Smooth animations powered by React and motion libraries.
+ Code Sandbox
Giphy Search with TanStack Query
GIF search and selection interface built with TanStack Query. Demonstrates data fetching, caching, and state management patterns.
+ Code Sandbox
Animated Burger Menu Icon
Interactive hamburger menu icon that smoothly transforms into an X. Built with pure CSS animations using SCSS pseudo-elements and transitions.
+ code Sandbox
Figma-to-Production Pipeline
GitHub Actions pipeline that automatically processes Figma design updates and deploys to production. Features custom Vite plugin for seamless Figma asset integration.
GitHub + Figma Sites
Cyprus Airways Loading Spinner
Branded loading spinner with dual counter-rotating rings and Cyprus Airways' leaf icon. Smooth animations powered by React and motion libraries.
+ Code Sandbox
Giphy Search with TanStack Query
GIF search and selection interface built with TanStack Query. Demonstrates data fetching, caching, and state management patterns.
+ Code Sandbox
Animated Burger Menu Icon
Interactive hamburger menu icon that smoothly transforms into an X. Built with pure CSS animations using SCSS pseudo-elements and transitions.
+ code Sandbox
Figma-to-Production Pipeline
GitHub Actions pipeline that automatically processes Figma design updates and deploys to production. Features custom Vite plugin for seamless Figma asset integration.
GitHub + Figma Sites
Cyprus Airways Loading Spinner
Branded loading spinner with dual counter-rotating rings and Cyprus Airways' leaf icon. Smooth animations powered by React and motion libraries.
+ Code Sandbox
Giphy Search with TanStack Query
GIF search and selection interface built with TanStack Query. Demonstrates data fetching, caching, and state management patterns.
+ Code Sandbox
Animated Burger Menu Icon
Interactive hamburger menu icon that smoothly transforms into an X. Built with pure CSS animations using SCSS pseudo-elements and transitions.
+ code Sandbox
Figma-to-Production Pipeline
GitHub Actions pipeline that automatically processes Figma design updates and deploys to production. Features custom Vite plugin for seamless Figma asset integration.
GitHub + Figma Sites
Cyprus Airways Loading Spinner
Branded loading spinner with dual counter-rotating rings and Cyprus Airways' leaf icon. Smooth animations powered by React and motion libraries.
+ Code Sandbox
Giphy Search with TanStack Query
GIF search and selection interface built with TanStack Query. Demonstrates data fetching, caching, and state management patterns.
+ Code Sandbox
Animated Burger Menu Icon
Interactive hamburger menu icon that smoothly transforms into an X. Built with pure CSS animations using SCSS pseudo-elements and transitions.
+ code Sandbox
Figma-to-Production Pipeline
GitHub Actions pipeline that automatically processes Figma design updates and deploys to production. Features custom Vite plugin for seamless Figma asset integration.
GitHub + Figma Sites
Playground
Code experiments and side projects
Not everything needs a case study. This is where I test new patterns, play with emerging tools, and share the experiments that don't fit anywhere else. Some are polished prototypes, others are quick sketches. All of them represent learning something new or solving a problem that caught my attention.
See more examples in:
Cyprus Airways Loading Spinner
Branded loading spinner with dual counter-rotating rings and Cyprus Airways' leaf icon. Smooth animations powered by React and motion libraries.
+ Code Sandbox
Giphy Search with TanStack Query
GIF search and selection interface built with TanStack Query. Demonstrates data fetching, caching, and state management patterns.
+ Code Sandbox
Animated Burger Menu Icon
Interactive hamburger menu icon that smoothly transforms into an X. Built with pure CSS animations using SCSS pseudo-elements and transitions.
+ code Sandbox
Figma-to-Production Pipeline
GitHub Actions pipeline that automatically processes Figma design updates and deploys to production. Features custom Vite plugin for seamless Figma asset integration.
GitHub + Figma Sites
Cyprus Airways Loading Spinner
Branded loading spinner with dual counter-rotating rings and Cyprus Airways' leaf icon. Smooth animations powered by React and motion libraries.
+ Code Sandbox
Giphy Search with TanStack Query
GIF search and selection interface built with TanStack Query. Demonstrates data fetching, caching, and state management patterns.
+ Code Sandbox
Animated Burger Menu Icon
Interactive hamburger menu icon that smoothly transforms into an X. Built with pure CSS animations using SCSS pseudo-elements and transitions.
+ code Sandbox
Figma-to-Production Pipeline
GitHub Actions pipeline that automatically processes Figma design updates and deploys to production. Features custom Vite plugin for seamless Figma asset integration.
GitHub + Figma Sites
Cyprus Airways Loading Spinner
Branded loading spinner with dual counter-rotating rings and Cyprus Airways' leaf icon. Smooth animations powered by React and motion libraries.
+ Code Sandbox
Giphy Search with TanStack Query
GIF search and selection interface built with TanStack Query. Demonstrates data fetching, caching, and state management patterns.
+ Code Sandbox
Animated Burger Menu Icon
Interactive hamburger menu icon that smoothly transforms into an X. Built with pure CSS animations using SCSS pseudo-elements and transitions.
+ code Sandbox
Figma-to-Production Pipeline
GitHub Actions pipeline that automatically processes Figma design updates and deploys to production. Features custom Vite plugin for seamless Figma asset integration.
GitHub + Figma Sites
Cyprus Airways Loading Spinner
Branded loading spinner with dual counter-rotating rings and Cyprus Airways' leaf icon. Smooth animations powered by React and motion libraries.
+ Code Sandbox
Giphy Search with TanStack Query
GIF search and selection interface built with TanStack Query. Demonstrates data fetching, caching, and state management patterns.
+ Code Sandbox
Animated Burger Menu Icon
Interactive hamburger menu icon that smoothly transforms into an X. Built with pure CSS animations using SCSS pseudo-elements and transitions.
+ code Sandbox
Figma-to-Production Pipeline
GitHub Actions pipeline that automatically processes Figma design updates and deploys to production. Features custom Vite plugin for seamless Figma asset integration.
GitHub + Figma Sites
How I work
Answers that move things forward
Design engineering is about bridging vision and execution. I approach projects systematically, align stakeholders, collaborate across functions, and mentor teams to build sustainable systems. Here's my process and philosophy.
I start with discovery, not solutions
Every project begins with understanding the full landscape: business goals, user needs, technical constraints, and team dynamics. I invest time upfront interviewing stakeholders, auditing existing systems, and mapping pain points before proposing solutions. This research phase prevents building the wrong thing and creates buy-in from day one.
I start with discovery, not solutions
Every project begins with understanding the full landscape: business goals, user needs, technical constraints, and team dynamics. I invest time upfront interviewing stakeholders, auditing existing systems, and mapping pain points before proposing solutions. This research phase prevents building the wrong thing and creates buy-in from day one.
I start with discovery, not solutions
Every project begins with understanding the full landscape: business goals, user needs, technical constraints, and team dynamics. I invest time upfront interviewing stakeholders, auditing existing systems, and mapping pain points before proposing solutions. This research phase prevents building the wrong thing and creates buy-in from day one.
I align stakeholders around shared outcomes
I align stakeholders around shared outcomes
I align stakeholders around shared outcomes
I partner with Product to bridge strategy and execution
I partner with Product to bridge strategy and execution
I partner with Product to bridge strategy and execution
I work embedded with both design and engineering
I work embedded with both design and engineering
I work embedded with both design and engineering
I mentor teams to scale impact beyond myself
I mentor teams to scale impact beyond myself
I mentor teams to scale impact beyond myself
I measure impact through system health and team velocity
I measure impact through system health and team velocity
I measure impact through system health and team velocity
Open to opportunities
Currently exploring opportunities in the Netherlands where I can bring my experience building scalable design systems. If you're working on interesting problems at the intersection of design and engineering, I'd love to hear from you.
Send me a message
Send me a message