Figma library transition
While working for ZEISS, I was part of the “Beyond for online” design team, creating guidelines and assets for the online experiences at ZEISS.
- Component design: Created fully responsive Figma components and prepared their documentation and presentation for the Beyond for Online Experiences website.
- Interaction design and prototyping: Enhanced components with interactive behaviors and variants in Figma, enabling them for usability testing and design validation.
- Design evluation and development review: Collaborated with ZEISS designers and art directors to review and validate component designs. Guided developers during implementation, provided design support and conducted final design reviews.
Anatomy visualisation of the carousel component
Component library
at ZEISS
The Beyond for Online Experiences guideline website serves as the central documentation platform for design system components, covering both their visual design and technical implementation. As part of the ZEISS design library transition, existing component documentation from Sketch and Adobe XD was migrated and consolidated into Figma. Each component was enhanced with multiple interactive states and comprehensive documentation to clearly communicate its behavior, usage, and implementation on the guideline website.
Interaction design and development review
Components that were redesigned or newly created underwent development reviews to ensure visual consistency, interaction quality, and accurate implementation. Throughout the development process, completed components were reviewed against the original Figma designs, and feedback was provided to developers to resolve any deviations.
For example, the Image Gallery component was enhanced with a new hover interaction that more clearly emphasized the hovered content while subtly de-emphasizing surrounding visual elements, resulting in improved visual hierarchy and user focus.