{"id":935,"date":"2026-07-30T18:46:20","date_gmt":"2026-07-30T18:46:20","guid":{"rendered":"https:\/\/benjamin-muenster.de\/?page_id=935"},"modified":"2026-07-31T08:51:44","modified_gmt":"2026-07-31T08:51:44","slug":"zeiss-figma-library-transition","status":"publish","type":"page","link":"https:\/\/benjamin-muenster.de\/index.php\/zeiss-figma-library-transition\/","title":{"rendered":"Zeiss Figma library transition"},"content":{"rendered":"\n<div class=\"wp-block-group alignfull case-study-pattern is-layout-constrained wp-container-core-group-is-layout-2db4f2d6 wp-block-group-is-layout-constrained\" style=\"margin-top:0;margin-bottom:0;padding-top:var(--wp--preset--spacing--60);padding-right:0;padding-bottom:var(--wp--preset--spacing--60);padding-left:0\">\n<div class=\"wp-block-columns are-vertically-aligned-center is-layout-flex wp-container-core-columns-is-layout-679ddeda wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\">\n<h2 class=\"wp-block-heading has-text-align-left has-huge-font-size\">ZEISS Figma library transition<\/h2>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\">\n<p class=\"has-text-align-right has-large-font-size wp-block-paragraph\">2023\/2024<\/p>\n<\/div>\n<\/div>\n\n\n\n<figure class=\"wp-block-image size-full has-custom-border is-style-rounded\" style=\"margin-top:var(--wp--preset--spacing--50);margin-right:0;margin-bottom:var(--wp--preset--spacing--50);margin-left:0\"><img loading=\"lazy\" decoding=\"async\" width=\"1996\" height=\"1124\" src=\"https:\/\/benjamin-muenster.de\/wp-content\/uploads\/2026\/07\/Zeiss_logo-1.png\" alt=\"\" class=\"wp-image-938\" style=\"border-top-left-radius:16px;border-top-right-radius:16px;border-bottom-left-radius:16px;border-bottom-right-radius:16px;aspect-ratio:16\/9;object-fit:contain\" srcset=\"https:\/\/benjamin-muenster.de\/wp-content\/uploads\/2026\/07\/Zeiss_logo-1.png 1996w, https:\/\/benjamin-muenster.de\/wp-content\/uploads\/2026\/07\/Zeiss_logo-1-300x169.png 300w, https:\/\/benjamin-muenster.de\/wp-content\/uploads\/2026\/07\/Zeiss_logo-1-1024x577.png 1024w, https:\/\/benjamin-muenster.de\/wp-content\/uploads\/2026\/07\/Zeiss_logo-1-768x432.png 768w, https:\/\/benjamin-muenster.de\/wp-content\/uploads\/2026\/07\/Zeiss_logo-1-1536x865.png 1536w\" sizes=\"auto, (max-width: 1996px) 100vw, 1996px\" \/><\/figure>\n\n\n\n<div class=\"wp-block-group is-layout-constrained wp-container-core-group-is-layout-18a83455 wp-block-group-is-layout-constrained\">\n<div class=\"wp-block-group is-layout-constrained wp-container-core-group-is-layout-8d5352f2 wp-block-group-is-layout-constrained\">\n<h3 class=\"wp-block-heading wp-elements-1\">While working for ZEISS, I was part of the <a href=\"https:\/\/beyond.zeiss.com\/d\/V6diyrWaeh1V\">&#8220;Beyond for online&#8221;<\/a> design team, creating guidelines and assets for online experiences at ZEISS, for example website components. <mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-medium-gray-color\">The beyond online team transitioned older design libraries and their components from Sketch or Adobe XD to Figma while simultaneously reviewing their design and usability to rework them.<\/mark><\/h3>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-679ddeda wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-container-core-column-is-layout-dd60b241 wp-block-column-is-layout-flow\">\n<h5 class=\"wp-block-heading\"><strong>Overview<\/strong><\/h5>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Component design:<\/strong> Created fully responsive Figma components and prepared their documentation and presentation for the Beyond for Online Experiences website.<\/li>\n\n\n\n<li><strong>Interaction design and prototyping:<\/strong> Enhanced components with interactive behaviors and variants in Figma, enabling them for usability testing and design validation.  <\/li>\n\n\n\n<li><strong>Design evluation and development review:<\/strong> 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.<\/li>\n<\/ul>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:25%\">\n<p class=\"wp-block-paragraph\"><\/p>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-group is-layout-constrained wp-container-core-group-is-layout-8d5352f2 wp-block-group-is-layout-constrained\">\n<div class=\"wp-block-group is-vertical is-layout-flex wp-container-core-group-is-layout-7abf0dae wp-block-group-is-layout-flex\">\n<h4 class=\"wp-block-heading\">Component library at ZEISS<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6aa78f831fc74&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6aa78f831fc74\" class=\"wp-block-image size-full has-custom-border wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"2542\" height=\"1274\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/benjamin-muenster.de\/wp-content\/uploads\/2026\/07\/ZeissBeyondOnline2.png\" alt=\"\" class=\"wp-image-950\" style=\"border-radius:10px;box-shadow:6px 6px 9px rgba(0, 0, 0, 0.2)\" srcset=\"https:\/\/benjamin-muenster.de\/wp-content\/uploads\/2026\/07\/ZeissBeyondOnline2.png 2542w, https:\/\/benjamin-muenster.de\/wp-content\/uploads\/2026\/07\/ZeissBeyondOnline2-300x150.png 300w, https:\/\/benjamin-muenster.de\/wp-content\/uploads\/2026\/07\/ZeissBeyondOnline2-1024x513.png 1024w, https:\/\/benjamin-muenster.de\/wp-content\/uploads\/2026\/07\/ZeissBeyondOnline2-768x385.png 768w, https:\/\/benjamin-muenster.de\/wp-content\/uploads\/2026\/07\/ZeissBeyondOnline2-1536x770.png 1536w, https:\/\/benjamin-muenster.de\/wp-content\/uploads\/2026\/07\/ZeissBeyondOnline2-2048x1026.png 2048w\" sizes=\"auto, (max-width: 2542px) 100vw, 2542px\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\tdata-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.thisImage.buttonRight\"\n\t\t\tdata-wp-style--top=\"state.thisImage.buttonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6aa78f8321b94&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6aa78f8321b94\" class=\"wp-block-image size-full has-custom-border wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"2541\" height=\"1271\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/benjamin-muenster.de\/wp-content\/uploads\/2026\/07\/ZeissBeyondOnline.png\" alt=\"\" class=\"wp-image-951\" style=\"border-radius:10px;box-shadow:6px 6px 9px rgba(0, 0, 0, 0.2)\" srcset=\"https:\/\/benjamin-muenster.de\/wp-content\/uploads\/2026\/07\/ZeissBeyondOnline.png 2541w, https:\/\/benjamin-muenster.de\/wp-content\/uploads\/2026\/07\/ZeissBeyondOnline-300x150.png 300w, https:\/\/benjamin-muenster.de\/wp-content\/uploads\/2026\/07\/ZeissBeyondOnline-1024x512.png 1024w, https:\/\/benjamin-muenster.de\/wp-content\/uploads\/2026\/07\/ZeissBeyondOnline-768x384.png 768w, https:\/\/benjamin-muenster.de\/wp-content\/uploads\/2026\/07\/ZeissBeyondOnline-1536x768.png 1536w, https:\/\/benjamin-muenster.de\/wp-content\/uploads\/2026\/07\/ZeissBeyondOnline-2048x1024.png 2048w\" sizes=\"auto, (max-width: 2541px) 100vw, 2541px\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\tdata-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.thisImage.buttonRight\"\n\t\t\tdata-wp-style--top=\"state.thisImage.buttonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n<h5 class=\"wp-block-heading\">Anatomy visualisation of the carousel component<\/h5>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6aa78f83220ed&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6aa78f83220ed\" class=\"wp-block-image size-full has-custom-border wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"2560\" height=\"1435\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/benjamin-muenster.de\/wp-content\/uploads\/2026\/07\/ZeissCarouselAnatomy-scaled.webp\" alt=\"\" class=\"wp-image-952\" style=\"border-radius:10px;box-shadow:6px 6px 9px rgba(0, 0, 0, 0.2)\" srcset=\"https:\/\/benjamin-muenster.de\/wp-content\/uploads\/2026\/07\/ZeissCarouselAnatomy-scaled.webp 2560w, https:\/\/benjamin-muenster.de\/wp-content\/uploads\/2026\/07\/ZeissCarouselAnatomy-300x168.webp 300w, https:\/\/benjamin-muenster.de\/wp-content\/uploads\/2026\/07\/ZeissCarouselAnatomy-1024x574.webp 1024w, https:\/\/benjamin-muenster.de\/wp-content\/uploads\/2026\/07\/ZeissCarouselAnatomy-768x431.webp 768w, https:\/\/benjamin-muenster.de\/wp-content\/uploads\/2026\/07\/ZeissCarouselAnatomy-1536x861.webp 1536w, https:\/\/benjamin-muenster.de\/wp-content\/uploads\/2026\/07\/ZeissCarouselAnatomy-2048x1148.webp 2048w\" sizes=\"auto, (max-width: 2560px) 100vw, 2560px\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\tdata-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.thisImage.buttonRight\"\n\t\t\tdata-wp-style--top=\"state.thisImage.buttonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-wide\"\/>\n\n\n\n<h4 class=\"wp-block-heading\">Interaction design and development review<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">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.<\/p>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6aa78f8322c59&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6aa78f8322c59\" class=\"wp-block-image size-full has-custom-border wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"1469\" height=\"1210\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/benjamin-muenster.de\/wp-content\/uploads\/2026\/07\/ZeissGalleryInteraction.png\" alt=\"\" class=\"wp-image-953\" style=\"border-radius:10px;box-shadow:6px 6px 9px rgba(0, 0, 0, 0.2)\" srcset=\"https:\/\/benjamin-muenster.de\/wp-content\/uploads\/2026\/07\/ZeissGalleryInteraction.png 1469w, https:\/\/benjamin-muenster.de\/wp-content\/uploads\/2026\/07\/ZeissGalleryInteraction-300x247.png 300w, https:\/\/benjamin-muenster.de\/wp-content\/uploads\/2026\/07\/ZeissGalleryInteraction-1024x843.png 1024w, https:\/\/benjamin-muenster.de\/wp-content\/uploads\/2026\/07\/ZeissGalleryInteraction-768x633.png 768w\" sizes=\"auto, (max-width: 1469px) 100vw, 1469px\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\tdata-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.thisImage.buttonRight\"\n\t\t\tdata-wp-style--top=\"state.thisImage.buttonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>ZEISS Figma library transition 2023\/2024 While working for ZEISS, I was part of the &#8220;Beyond for online&#8221; design team, creating guidelines and assets for online experiences at ZEISS, for example website components. The beyond online team transitioned older design libraries and their components from Sketch or Adobe XD to Figma while simultaneously reviewing their design [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"iawp_total_views":2,"footnotes":""},"class_list":["post-935","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/benjamin-muenster.de\/index.php\/wp-json\/wp\/v2\/pages\/935","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/benjamin-muenster.de\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/benjamin-muenster.de\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/benjamin-muenster.de\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/benjamin-muenster.de\/index.php\/wp-json\/wp\/v2\/comments?post=935"}],"version-history":[{"count":9,"href":"https:\/\/benjamin-muenster.de\/index.php\/wp-json\/wp\/v2\/pages\/935\/revisions"}],"predecessor-version":[{"id":955,"href":"https:\/\/benjamin-muenster.de\/index.php\/wp-json\/wp\/v2\/pages\/935\/revisions\/955"}],"wp:attachment":[{"href":"https:\/\/benjamin-muenster.de\/index.php\/wp-json\/wp\/v2\/media?parent=935"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}