\u00a0A fast recap<\/strong><\/p>\n The choices we made concerning the design and construction of the system in 2019 had been a mirrored image of the panorama we would have liked to construct for.\u00a0<\/p>\n We needed to serve greater than 45 completely different platforms that had been being created by over 2,000 engineers and 200 designers.<\/p>\n When we disbanded GLUE, our previous design system group, many grassroots techniques spun up as a replacement. We managed to seek out a formidable 22 distinct design techniques.<\/p>\n And lastly, we put loads of thought into how we\u2019d go about making a system made up of guidelines, patterns, and requirements that may match inside our tradition of autonomy.<\/p>\n (re)Introducing Encore<\/strong><\/p>\n<\/div>\n Encore was our reply to this advanced panorama of merchandise, groups, and methods of working at Spotify.<\/p>\n It represented the consolidation of present initiatives \u2014 some official and plenty of grassroots. It supplied a single, unified framework that may substitute the 22 distinct design techniques that existed beforehand.<\/p>\n Encore was designed for Spotify\u2019s numerous set of use instances, throughout many platforms and experiences.<\/p>\n So we launched what we referred to as \u201ca family of systems\u201d or what\u2019s identified within the design techniques house as a \u201csystem of systems\u201d, reasonably than one single monolithic design system.<\/p>\n<\/div>\n The Encore mannequin because it was at lunch in late-2019<\/p>\n<\/div>\n Each a part of the Encore household is managed by a distributed group and usually inherits from one other Encore system, ranging from Foundation and dealing its manner out.\u00a0<\/p>\n This made all the pieces extra versatile \u2014 and match higher with Spotify\u2019s autonomous tradition.<\/p>\n Spotify has grown since then\u2026<\/strong><\/p>\n But that was three years in the past and so much has modified.<\/p>\n<\/div>\n Spotify\u2019s progress between late-2019 and 2022<\/p>\n<\/div>\n As our R&D group has grown, our design system has wanted to assist extra use instances, extra platforms, and most significantly \u2014 extra folks.<\/p>\n We know that the built-in flexibility has<\/strong> enabled autonomy to some extent, however as Encore has gained adoption and recognition, we discovered that we would have liked to encourage standardization with a purpose to obtain higher consistency.<\/p>\n All of this progress, plus a rise in each native techniques and frameworks for varied merchandise, has challenged the Encore organizational mannequin and its capacity to scale.<\/p>\n<\/div>\n The Encore mannequin has developed right into a little bit of a spiders internet<\/p>\n<\/div>\n We mixed our information of Spotify\u2019s design and engineering methods, and our sturdy relationships to get a transparent sign on how we may enhance our mannequin shifting ahead.<\/p>\n Now that you simply see the place we have been, let’s break it down into some classes we\u2019ve learnt alongside the way in which.<\/p>\n Lesson #1 \u2013 Reinforce our design targets, reasonably than our organizational mannequin<\/strong><\/p>\n Since launching Encore, it has quickly change into an excellent instance of Conway\u2019s legislation<\/u><\/a> or, in different phrases designing techniques that replicate the org mannequin. In our case, the thought of \u201clocal systems\u201d, a key precept for Encore\u2019s layered mannequin, inspired the system to replicate our org construction.<\/p>\n<\/div>\n In a bid to create autonomy and drive utilization, we created a system which conforms to our hierarchy reasonably than embracing a extra cross-platform, experience-driven mind-set.<\/p>\n We received\u2019t obtain our present enterprise and design targets by working like this, however because of collaborating with our native system companions, we\u2019re now actively engaged on evolving this mannequin and hope to share extra with you early subsequent yr.<\/p>\n Lesson #2 \u2013 Define and observe success<\/strong><\/p>\n Back in 2019, our manner of monitoring design system adoption was largely a box-ticking train. We had been fairly actually ticking bins in a desk. <\/p>\n<\/div>\n An previous handbook Coda desk in comparison with our present Data Studio dashboard <\/p>\n<\/div>\n Fast ahead to 2022 and we now have knowledge pipelines with dashboards for our key techniques. We question repositories throughout the corporate every day to unearth precisely the place and what number of occasions tokens and parts are used, how typically clients are upgrading, and to determine tendencies and patterns that assist us plan future roadmaps.<\/p>\n Our subsequent step is to evolve our analytics system in order that we will determine alternatives in codebases the place tokens and parts could possibly be used, however aren\u2019t but.<\/p>\n We are additionally establishing key metrics alongside adoption which inform a extra full image of Encore\u2019s Usage, Contribution, Coverage, and Satisfaction.<\/p>\n Lesson #3 \u2013 Balance the scales of reusability by investing in native parts<\/strong><\/p>\n When designing our system for cell, we put the give attention to flexibility. Our native experiences are the place the vast majority of new options and experimentations happen, groups right here want to maneuver shortly, so we wished to offer them most flexibility.<\/p>\n On internet, we took a extra conventional method, making a library of reusable parts. We\u2019ve seen enormous adoption and utilization; groups are in a position to construct and ship utilizing our parts.<\/p>\n<\/div>\n Numerous requests for reusable cell parts from designers and engineers.<\/p>\n<\/div>\n As the cell system has developed, we\u2019ve seen a rising sentiment amongst the designers and engineers engaged on our native platforms that they need, want, and anticipate extra pre-built parts that may be merely configured, composed, and consumed similarly to what we\u2019ve seen achieve success for our internet system.<\/p>\n It\u2019s clear that we swung somewhat too far within the path of flexibility and we\u2019re now balancing the scales by enabling extra reusability on our native platforms. At the start of the yr, we created a devoted group to construct a reusable set of parts for cell, with the objective of attaining a degree of parity with what we at present supply on internet.<\/p>\n Lesson #4 \u2013 Non-semantic design tokens supply restricted worth<\/strong><\/p>\n Our preliminary token system centered on being non-semantic, containing issues like our shade palette, spacers, and typography scales.<\/p>\n However, we shortly realized the restricted worth that these extremely generic tokens supply as we discovered ourselves unable to securely change them with out inflicting some alarming downstream regressions.<\/p>\n<\/div>\n Our earlier non-semantic shade tokens utilization, in comparison with our present semantically named shade system<\/p>\n<\/div>\n For instance, as half of a giant accessibility drive in late 2020, we wished to regulate the worth of our most vital shade, Spotify Green, to enhance distinction<\/u><\/a>. We knew the Spotify Green token was getting used hundreds of occasions throughout iOS, Android, and internet, however we didn\u2019t know the place or how.<\/p>\n With this in thoughts, we\u2019ve been investing closely in introducing semantic layers into our token system in order that we will higher perceive the context by which our tokens are getting used, giving us the boldness to securely change values understanding the influence.<\/p>\n Lesson #5 \u2013 Power our system with robots, algorithms, and automation<\/strong><\/p>\n Even with the extremely sensible group of parents engaged on Encore, it was going to be very difficult for us to manually implement and preserve all the pieces we wished on the scale we would have liked.<\/p>\n This gave us a possibility to work smarter, not tougher.<\/p>\n So, we constructed a complicated design token integration with Figma. We created a bot that we name Figgy, to routinely synchronize modifications made in our code supply of reality throughout hundreds of Figma information in minutes. This means design and code are at all times stored in sync.<\/p>\n<\/div>\n Figgy Bot routinely synchronizing modifications made in code with our Figma toolkits<\/p>\n<\/div>\n To construct the semantic token layers we talked about within the earlier lesson, we developed a color-theming algorithm that, given a number of enter values, can generate a complete shade theme with assured accessible shade distinction.<\/p>\n We\u2019re persevering with to speculate on this method and at the moment are within the means of growing a brand new algorithm to generate format and spacing themes, which is able to allow our parts to scale and adapt to completely different gadgets and person modes.<\/p>\n Lesson #6 \u2013 Strengthen our numbers and create advocates<\/strong><\/p>\n In the early days of Encore, the web-based group acknowledged an elevated degree of curiosity and enthusiasm from the broader internet group in key choices we had been making.<\/p>\n So we leaned closely into the Spotify embed program the place a person contributor can be part of one other group for 2 weeks, and as much as a number of months, to assist them ship tasks or simply study and contribute.<\/p>\n<\/div>\n Various paperwork which are a part of our Encore embed program.<\/p>\n<\/div>\n The Encore embed program has now change into a well-known addition to our general evangelization technique. In 2022, we\u2019ve had somebody embedded on an Encore group each single day of the yr.\u00a0<\/p>\n The main cause for internet hosting embeds is to construct a stronger group of possession across the system. As an additional benefit, we get to enhance our onboarding processes, strengthen our documentation, and assist our teammates meet new colleagues in a distant local weather.<\/p>\n We\u2019ve had folks be part of our groups from all around the world, not solely bringing their numerous experiences and backgrounds but in addition serving to us find out about what they do of their nook of Spotify.<\/p>\n What\u2019s subsequent for Encore?<\/strong><\/p>\n Going into 2023, we’ll evolve our layered system mannequin to handle the constraints and alternatives we now have recognized.<\/p>\n Encore has grown organically right into a little bit of a spider\u2019s internet and we have to simplify and refine with a purpose to guarantee we proceed to assist our inner communities and ship on our design aspirations. We\u2019ll focus much less on platforms and extra on the experiences we\u2019re attempting to create.<\/p>\n Be certain to observe us on Twitter<\/u><\/a> and Instagram<\/u><\/a> and maintain an out on this weblog for extra updates within the close to future.<\/p>\n Credit: header illustration by Jael Umerah-Makelemi<\/i><\/p>\n<\/div>\n Engineering Manager<\/span><\/p>\n Shaun leads engineering for Spotify\u2019s Design System, Encore. Originally from the UK, Shaun has been dwelling in Stockholm for the previous couple of years along with his pug Ned.<\/p>\n![\"Encore](\"https:\/\/images.ctfassets.net\/c1zhnszcah7h\/6NfR5PD8WrlDlChObCkymb\/1732b7013ebcdaaede40f48f76a0de98\/Encore_2.png?w=250&h=138&q=96&fm=webp)
<\/picture><\/noscript><\/div>\n<\/div>\n<\/figure>\n<\/div>\n![\"Encore](\"https:\/\/images.ctfassets.net\/c1zhnszcah7h\/tUIbV8ti3DSiALPPtdAWH\/6fe45ea9fda2fd7f2c9c239a7795053f\/unnamed__13_.png?w=250&h=141&q=96&fm=webp)
<\/picture><\/noscript><\/div>\n<\/div>\n<\/figure>\n![\"Encore](\"https:\/\/images.ctfassets.net\/c1zhnszcah7h\/2b7hslBkkfQULwBa1YoMWM\/658a60b3508e3dfcea57c66e6d02545d\/encore-growth.gif?w=250&h=132&q=96&fm=webp)
<\/picture><\/noscript><\/div>\n<\/div>\n<\/figure>\n![\"Encore](\"https:\/\/images.ctfassets.net\/c1zhnszcah7h\/3bTRHgEHPnBPweLIatuqGU\/b261569771d6ec0ef36494672e9876dc\/growth-challenged-model.png?w=250&h=141&q=96&fm=webp)
<\/picture><\/noscript><\/div>\n<\/div>\n<\/figure>\n![\"Encore](\"https:\/\/images.ctfassets.net\/c1zhnszcah7h\/68II9e4BitQ7X3SvAJn0SH\/af192a3ff2f55bff74d70c3aed407f7e\/systems-not-org-charts.png?w=250&h=132&q=96&fm=webp)
<\/picture><\/noscript><\/div>\n<\/div>\n<\/figure>\n<\/div>\n![\"Encore](\"https:\/\/images.ctfassets.net\/c1zhnszcah7h\/B0n1fqj0qf4mwVcnJyFVj\/8dc381f6ea6efb18a629b9211b76ffc9\/coda-to-analytics.png?w=250&h=132&q=96&fm=webp)
<\/picture><\/noscript><\/div>\n<\/div>\n<\/figure>\n![\"Encore](\"https:\/\/images.ctfassets.net\/c1zhnszcah7h\/5vQ5DYpImav1XTDwPQcRc3\/69fa88435866bf04612ff5581000083b\/slack-popins.gif?w=250&h=132&q=96&fm=webp)
<\/picture><\/noscript><\/div>\n<\/div>\n<\/figure>\n![\"Encore](\"https:\/\/images.ctfassets.net\/c1zhnszcah7h\/7z00Z4nLCCqDZW4BEmYzje\/66429244b553446c6d21d9bfa47aaa23\/semantic-tokens.png?w=250&h=132&q=96&fm=webp)
<\/picture><\/noscript><\/div>\n<\/div>\n<\/figure>\n![\"Encore](\"https:\/\/images.ctfassets.net\/c1zhnszcah7h\/5U0H28Fe8XQukiynMGRdp2\/11f71d5a8dc1bb717e030919409fc93c\/figgy-in-action.gif?w=250&h=147&q=96&fm=webp)
<\/picture><\/noscript><\/div>\n<\/div>\n<\/figure>\n![\"Encore](\"https:\/\/images.ctfassets.net\/c1zhnszcah7h\/4jcnU8M7ZlO2qISoEHOA5P\/f5c790c81212bbc58c5b79d40cee9794\/embeds.png?w=250&h=132&q=96&fm=webp)
<\/picture><\/noscript><\/div>\n<\/div>\n<\/figure>\nCredits<\/h2>\n
![\"Shaun](\"https:\/\/images.ctfassets.net\/c1zhnszcah7h\/4se0dl0LXhhxn1qE2G5i0q\/5ff663bb944caf72845098660bf9b4b5\/Shaun_Bent.png?w=60&h=68&q=96&fm=webp)
<\/picture><\/noscript><\/div>\n<\/div>\nShaun Bent<\/h3>\n
<\/picture><\/noscript><\/div>\n<\/div>\nShaun Bent<\/span><\/p>\n<\/div>\n Tyce Clee<\/span><\/p>\n<\/div>\n<\/div>\n For an audio firm, you\u2019re awfully quiet. We final spoke publicly about what Spotify is doing within the design system house in 2019 once we launched a brand new system referred to as Encore. Since then it has been radio silence. We haven\u2019t actually mentioned a lot or talked publicly regardless of being requested about it. We\u2019ve had our heads down studying, pondering, and transport. So, possibly you\u2019re curious. What have we been as much as? How has Encore grown and developed in the previous couple of years? And what have we realized?<\/p>\n \u00a0A fast recap<\/strong><\/p>\n The choices we made concerning the design and construction of the system in 2019 had been a mirrored image of the panorama we would have liked to construct for.\u00a0<\/p>\n We needed to serve greater than 45 completely different platforms that had been being created by over 2,000 engineers and 200 designers.<\/p>\n When we disbanded GLUE, our previous design system group, many grassroots techniques spun up as a replacement. We managed to seek out a formidable 22 distinct design techniques.<\/p>\n And lastly, we put loads of thought into how we\u2019d go about making a system made up of guidelines, patterns, and requirements that may match inside our tradition of autonomy.<\/p>\n (re)Introducing Encore<\/strong><\/p>\n<\/div>\n![\"\"](\"https:\/\/images.ctfassets.net\/c1zhnszcah7h\/JZdnVDNc860jM5c4xIaM4\/4e8e5e711d37d0f1449100d5f85ffa7b\/Tyce.png?w=60&h=68&q=96&fm=webp)
<\/picture><\/noscript><\/div>\n<\/div>\n