Design SystemLorenzo Bocchi
I specialize in building, scaling, and maintaining design systems that bridge the gap between design and development. I work closely with product teams to ensure consistency, efficiency, and accessibility across digital experiences.
What's included
End-to-End Design System Development
Component Libraries – Scalable and reusable components in Figma, aligned with frontend frameworks. /// Tokens & Variables – Structured design tokens (color, spacing, typography, etc.) for seamless development handoff. /// Documentation & Guidelines – Clear documentation for adoption and usability.
Implementation & Developer Collaboration
Figma to Code Workflow – Working closely with engineers to ensure design tokens and components translate seamlessly into code. /// Design Tokens Integration – Support for tools like Style Dictionary, Tailwind, or CSS variables. /// Prototyping & Testing – Interactive prototypes and usability testing for real-world validation.
Optimized for Figma’s Latest Features
Variables & Modes – Leveraging Figma’s new variables for efficient theming and multi-brand support. /// Auto Layout & Component Properties – Streamlined, flexible components for rapid iteration. /// Advanced Prototyping – Creating realistic interactions to bridge the gap between static designs and coded implementations.
Accessibility & Scalability
WCAG Compliance – Ensuring accessibility best practices in colors, typography, and UI components. /// Scalability – Building systems that grow with the product and team.
FAQs
A design system is a centralized set of UI components, design tokens, and guidelines that ensure consistency across digital products. It speeds up design and development, improves collaboration, and maintains a unified user experience. If your team struggles with inconsistencies, slow design-to-development workflows, or scalability issues, a design system is the solution.
I work closely with developers to ensure Figma components align with frontend code. This includes:
Using design tokens for colors, typography, and spacing that can be directly mapped to CSS/JS variables.
Implementing Figma’s latest features (variables, auto layout, component properties) for structured and scalable designs.
Providing detailed documentation and code-ready assets to minimize rework.
Yes! Whether you’re starting from scratch or refining an existing system, I ensure a seamless integration. This includes:
Auditing your current UI and identifying gaps.
Creating a phased rollout strategy to implement components without disrupting development.
Ensuring backward compatibility with existing designs and codebases.
I follow WCAG accessibility standards to make sure all components are usable for everyone. This includes:
Color contrast compliance for readability.
Keyboard navigability for users who rely on assistive technology.
ARIA attributes and semantic HTML recommendations for developers.
Timelines depend on the complexity of your product and team needs. A minimum viable design system (MVP) with core components can be set up in 4–8 weeks, while a fully documented and scalable system may take 3–6 months. I work in agile phases, so your team can start using key elements early in the process.
Example work
Lorenzo's other services
Starting at$100 /hr
Tags
Figma
React
Vue.js
Design Systems Specialist
UI Designer
UX Designer
Service provided by
Lorenzo Bocchi Sydney NSW, Australia
- 2
- Followers
Design SystemLorenzo Bocchi
Starting at$100 /hr
Tags
Figma
React
Vue.js
Design Systems Specialist
UI Designer
UX Designer
I specialize in building, scaling, and maintaining design systems that bridge the gap between design and development. I work closely with product teams to ensure consistency, efficiency, and accessibility across digital experiences.
What's included
End-to-End Design System Development
Component Libraries – Scalable and reusable components in Figma, aligned with frontend frameworks. /// Tokens & Variables – Structured design tokens (color, spacing, typography, etc.) for seamless development handoff. /// Documentation & Guidelines – Clear documentation for adoption and usability.
Implementation & Developer Collaboration
Figma to Code Workflow – Working closely with engineers to ensure design tokens and components translate seamlessly into code. /// Design Tokens Integration – Support for tools like Style Dictionary, Tailwind, or CSS variables. /// Prototyping & Testing – Interactive prototypes and usability testing for real-world validation.
Optimized for Figma’s Latest Features
Variables & Modes – Leveraging Figma’s new variables for efficient theming and multi-brand support. /// Auto Layout & Component Properties – Streamlined, flexible components for rapid iteration. /// Advanced Prototyping – Creating realistic interactions to bridge the gap between static designs and coded implementations.
Accessibility & Scalability
WCAG Compliance – Ensuring accessibility best practices in colors, typography, and UI components. /// Scalability – Building systems that grow with the product and team.
FAQs
A design system is a centralized set of UI components, design tokens, and guidelines that ensure consistency across digital products. It speeds up design and development, improves collaboration, and maintains a unified user experience. If your team struggles with inconsistencies, slow design-to-development workflows, or scalability issues, a design system is the solution.
I work closely with developers to ensure Figma components align with frontend code. This includes:
Using design tokens for colors, typography, and spacing that can be directly mapped to CSS/JS variables.
Implementing Figma’s latest features (variables, auto layout, component properties) for structured and scalable designs.
Providing detailed documentation and code-ready assets to minimize rework.
Yes! Whether you’re starting from scratch or refining an existing system, I ensure a seamless integration. This includes:
Auditing your current UI and identifying gaps.
Creating a phased rollout strategy to implement components without disrupting development.
Ensuring backward compatibility with existing designs and codebases.
I follow WCAG accessibility standards to make sure all components are usable for everyone. This includes:
Color contrast compliance for readability.
Keyboard navigability for users who rely on assistive technology.
ARIA attributes and semantic HTML recommendations for developers.
Timelines depend on the complexity of your product and team needs. A minimum viable design system (MVP) with core components can be set up in 4–8 weeks, while a fully documented and scalable system may take 3–6 months. I work in agile phases, so your team can start using key elements early in the process.
Example work
Lorenzo's other services
$100 /hr