[38;5;12m                                                                         [39m[38;2;255;187;0m[1m[4mAwesome Design Systems [0m[38;5;14m[1m[4m![0m[38;2;255;187;0m[1m[4mAwesome[0m[38;5;14m[1m[4m (https://awesome.re/badge-flat2.svg)[0m[38;2;255;187;0m[1m[4m (https://awesome.re)[0m

[38;5;11m[1m▐[0m[38;5;12m [39m[38;5;12mA curated list of bookmarks, resources and articles about design systems focused on developers.[39m


[38;5;12m  [39m
[48;5;235m[38;5;249m[49m[39m
[38;5;12m  [39m


[38;2;255;187;0m[4mContents[0m

[38;5;12m- [39m[38;5;14m[1mDesign systems[0m[38;5;12m (#design-systems)[39m
[38;5;12m- [39m[38;5;14m[1mUI Design tools[0m[38;5;12m (#ui-design-tools)[39m
[38;5;12m- [39m[38;5;14m[1mDesign tokens[0m[38;5;12m (#design-tokens)[39m
[38;5;12m- [39m[38;5;14m[1mPattern library[0m[38;5;12m (#pattern-library)[39m
[38;5;12m- [39m[38;5;14m[1mTesting[0m[38;5;12m (#testing)[39m
[38;5;12m- [39m[38;5;14m[1mBooks[0m[38;5;12m (#books)[39m
[38;5;12m- [39m[38;5;14m[1mTalks[0m[38;5;12m (#talks)[39m

[38;2;255;187;0m[4mDesign systems[0m

[38;5;12mA Design System is an ever evolving collection of reusable components, guided by rules that ensure consistency and speed, by being the single source of truth for any product development.[39m

[38;2;255;187;0m[4mDesign systems of some "known" companies[0m

[38;5;12m- [39m[38;5;14m[1mAtlassian Design Guidelines[0m[38;5;12m (https://atlassian.design/) - End-to-end design language to create straightforward and beautiful experiences.[39m
[38;5;12m- [39m[38;5;14m[1mFirefox Photon Design System[0m[38;5;12m (https://design.firefox.com/photon) - Launch recognizable, enjoyable Firefox products and features faster.[39m
[38;5;12m- [39m[38;5;14m[1mGitHub Primer[0m[38;5;12m (https://primer.style/) - Open-source it to allow the community to design and build their own projects.[39m
[38;5;12m- [39m[38;5;14m[1mGitLab Design System - Pajamas[0m[38;5;12m (https://design.gitlab.com/) - Resources, components, and design guidelines behind GitLab.[39m
[38;5;12m- [39m[38;5;14m[1mGoogle Material Design[0m[38;5;12m (https://material.io/design) - Create intuitive and beautiful products with Material Design.[39m
[38;5;12m- [39m[38;5;14m[1mIBM Carbon[0m[38;5;12m (https://www.carbondesignsystem.com/) - Carbon is IBM's open-source design system for products and experiences.[39m
[38;5;12m- [39m[38;5;14m[1mShopify Polaris[0m[38;5;12m (https://polaris.shopify.com/) - Our design system helps us work together to build a great experience for all of Shopify's merchants.[39m

[38;5;12mSee more design systems [39m[38;5;14m[1mhere[0m[38;5;12m (https://github.com/alexpate/awesome-design-systems)![39m

[38;2;255;187;0m[4mDesign systems articles[0m

[38;5;12m- [39m[38;5;14m[1mA design system governance process[0m[38;5;12m (https://bradfrost.com/blog/post/a-design-system-governance-process/)[39m
[38;5;12m- [39m[38;5;14m[1mA guide to collaborating on design systems[0m[38;5;12m (https://www.invisionapp.com/inside-design/collaborating-on-design-systems/)[39m
[38;5;12m- [39m[38;5;14m[1mBuilding a Design System? Start with a map[0m[38;5;12m (https://blog.prototypr.io/building-a-design-system-start-with-map-909aa4baf41f)[39m
[38;5;12m- [39m[38;5;14m[1mBuilding your design system[0m[38;5;12m (https://www.designbetter.co/design-systems-handbook/building-design-system)[39m
[38;5;12m- [39m[38;5;14m[1mDesign Systems are for People[0m[38;5;12m (https://publication.design.systems/design-systems-are-for-people-a484620b6988)[39m
[38;5;12m- [39m[38;5;14m[1mDesign Systems vs. Pattern Libraries vs. Style Guides – What's the Difference?[0m[38;5;12m (https://www.uxpin.com/studio/blog/design-systems-vs-pattern-libraries-vs-style-guides-whats-difference/)[39m
[38;5;12m- [39m[38;5;14m[1mHow Spotify organises work in Figma to improve collaboration[0m[38;5;12m (https://spotify.design/articles/2020-04-20/how-spotify-works-in-figma/)[39m
[38;5;12m- [39m[38;5;14m[1mHow to Build Design Systems[0m[38;5;12m (https://medium.muz.li/how-to-build-design-systems-3431560f51fb)[39m
[38;5;12m- [39m[38;5;14m[1mWhat is a Design System – Everything You Need to Know[0m[38;5;12m (https://uxmisfit.com/2019/03/26/what-is-a-design-system-everything-you-need-to-know/)[39m
[38;5;12m- [39m[38;5;14m[1mYour sketch library is not a design system[0m[38;5;12m (https://bradfrost.com/blog/post/your-sketch-library-is-not-a-design-system/)[39m

[38;2;255;187;0m[4mMore resources[0m

[38;5;12m- [39m[38;5;14m[1mDesign system checklist[0m[38;5;12m (https://designsystemchecklist.com/) - Build better design systems. An open-source checklist to help you plan, build and grow your design system.[39m
[38;5;12m- [39m[38;5;14m[1mDesign Systems Survey[0m[38;5;12m (https://designsystemssurvey.seesparkbox.com/) - Designers and developers from more than 20 industries tell us about their design systems and their uses.[39m
[38;5;12m- [39m[38;5;14m[1mDesign.system[0m[38;5;12m (https://design.systems/) - Resources for the design systems community.[39m
[38;5;12m- [39m[38;5;14m[1mSuper friendly[0m[38;5;12m (https://superfriendlydesign.systems/) - We help in-house teams make better digital products with design systems.[39m

[38;2;255;187;0m[4mUI Design tools[0m

[38;2;255;187;0m[4mDesign tools[0m

[38;5;12m- [39m[38;5;14m[1mFigma[0m[38;5;12m (https://www.figma.com/) - Helps teams create, test, and ship better designs from start to finish (cross-platform).[39m
[38;5;12m- [39m[38;5;14m[1mInVision[0m[38;5;12m (https://www.invisionapp.com/) - The digital product design platform powering the world's best user experiences.[39m
[38;5;12m- [39m[38;5;14m[1mSketch[0m[38;5;12m (https://www.sketch.com/) - A design toolkit built to help you create your best work from your earliest ideas, through to final artwork (for macOS).[39m
[38;5;12m- [39m[38;5;14m[1mAdobeXD[0m[38;5;12m (https://www.adobe.com/products/xd.html) - Share your story with designs that look and feel like the real thing. Wireframe, animate, prototype, collaborate, and more — it’s all right here, all in one UI/UX design tool.[39m
[38;5;12m- [39m[38;5;14m[1mMarvel[0m[38;5;12m (https://marvelapp.com/) - Marvel has everything you need to bring ideas to life and transform how you create digital products with your team. Placing the power of design in everyone’s hands.[39m
[38;5;12m- [39m[38;5;14m[1mUXPin[0m[38;5;12m (https://www.uxpin.com/) - Design and manage your entire UX/UI project in one tool.[39m
[38;5;12m- [39m[38;5;14m[1mPenpot[0m[38;5;12m (https://penpot.app) - Penpot is the first Open Source design and prototyping platform meant for cross-domain teams.[39m

[38;5;12mSee design tools plugins [39m[38;5;14m[1mhere[0m[38;5;12m (https://github.com/LisaDziuba/Awesome-Design-Tools/blob/master/Awesome-Design-Plugins.md)![39m

[38;2;255;187;0m[4mIntegrations[0m

[38;5;12m- [39m[38;5;14m[1mAbstract[0m[38;5;12m (https://www.abstract.com/) - Design collaboration without the chaos (for Sketch and XD on macOS).[39m
[38;5;12m- [39m[38;5;14m[1mAvocode[0m[38;5;12m (https://avocode.com/) - Helps you share design files, discuss changes, and code websites, mobile apps, & newsletters faster.[39m
[38;5;12m- [39m[38;5;14m[1mInVision Design System Manager[0m[38;5;12m (https://www.invisionapp.com/design-system-manager) - Powers creative and consistent design at scale with a central place to manage design and coded components.[39m
[38;5;12m- [39m[38;5;14m[1mZeplin[0m[38;5;12m (https://zeplin.io/) - The better way to share, organize and collaborate on designs—built with developers in mind.[39m

[38;2;255;187;0m[4mAccessibility (a11y)[0m

[38;5;12m- [39m[38;5;14m[1mAccessibility for developeres[0m[38;5;12m (https://www.invisionapp.com/inside-design/accessibility-for-developers/) - 5 simple ways developers can help improve and enforce website accessibility.[39m
[38;5;12m- [39m[38;5;14m[1mStark[0m[38;5;12m (https://www.getstark.co/) - Empowers you to design with accessibility in mind from conception of brand to fruition of product. Contrast checker, colorblind simulation and color suggestions.[39m
[38;5;12m- [39m[38;5;14m[1mThe A11Y Project[0m[38;5;12m (https://a11yproject.com/) - A community-driven effort to make web accessibility easier. See [39m[38;5;14m[1mresources[0m[38;5;12m (https://a11yproject.com/resources/) section.[39m

[38;2;255;187;0m[4mDesign tools articles[0m

[38;5;12m- [39m[38;5;14m[1mAdobe XD vs Sketch vs Figma vs InVision - How to Pick the Best Design Software in 2020[0m[38;5;12m (https://www.freecodecamp.org/news/adobe-xd-vs-sketch-vs-figma-vs-invision/)[39m

[38;2;255;187;0m[4mDesign tokens[0m

[38;5;12m- [39m[38;5;14m[1mDesign Tokens W3C Community Group[0m[38;5;12m (https://www.w3.org/community/design-tokens/) - View repository on GitHub [39m[38;5;14m[1mhere[0m[38;5;12m (https://github.com/design-tokens/community-group)![39m
[38;5;12m- [39m[38;5;14m[1mDesignTokens.dev[0m[38;5;12m (https://www.designtokens.dev/) - Ship your design tokens without managing infrastructure.[39m
[38;5;12m- [39m[38;5;14m[1mDiez[0m[38;5;12m (https://diez.org/) - Free & open-source developer toolkit for expressing visual styles that can be shared across codebases, native platforms, and teams.[39m
[38;5;12m- [39m[38;5;14m[1mDesign Tokens Validator[0m[38;5;12m (https://animaapp.github.io/design-token-validator-site/) - Validate your design tokens against the Design Token Community Group spec.[39m

[38;2;255;187;0m[4mPlugins[0m

[38;5;12m- [39m[38;5;14m[1mAbstract Connect[0m[38;5;12m (https://github.com/MichaelZaporozhets/abstractconnect) - A Design tokens extractor for devs using Abstract & JavaScript.[39m
[38;5;12m- [39m[38;5;14m[1mZeplin JSON export tokens[0m[38;5;12m (https://extensions.zeplin.io/berk/zeplin-json-extension) - Design tokens Zeplin extension to generate your tokens in JSON format.[39m

[38;2;255;187;0m[4mTools[0m

[38;5;12m- [39m[38;5;14m[1mFigmagic[0m[38;5;12m (https://github.com/mikaelvesavuori/figmagic) - Generate design tokens, export graphics, and extract design token-driven React components from your Figma documents.[39m
[38;5;12m- [39m[38;5;14m[1mStyle Dictionary[0m[38;5;12m (https://github.com/amzn/style-dictionary) - A Style Dictionary uses design tokens to define styles once and use those styles on any platform or language.[39m
[38;5;12m- [39m[38;5;14m[1mSuperposition[0m[38;5;12m (https://superposition.design/) - Extract design tokens from websites and use them in code and in your design tool. Use the design system you already have.[39m
[38;5;12m- [39m[38;5;14m[1mTheo[0m[38;5;12m (https://github.com/salesforce-ux/theo) - Theo is an abstraction for transforming and formatting Design Tokens.[39m

[38;2;255;187;0m[4mArticles[0m

[38;5;12m- [39m[38;5;14m[1mA designer's guide to the Figma API[0m[38;5;12m (https://medium.com/@danhollick/a-designers-guide-to-the-figma-api-64f2785969d8)[39m
[38;5;12m- [39m[38;5;14m[1mBuilding a Visual Studio Code Theme with Style Dictionary[0m[38;5;12m (https://dbanks.design/blog/vs-code-theme-with-style-dictionary/)[39m
[38;5;12m- [39m[38;5;14m[1mDesign tokens with Figma[0m[38;5;12m (https://blog.prototypr.io/design-tokens-with-figma-aef25c42430f)[39m
[38;5;12m- [39m[38;5;14m[1mDocumenting Design Tokens[0m[38;5;12m (https://dbanks.design/blog/documenting-design-tokens/)[39m
[38;5;12m- [39m[38;5;14m[1mHow to manage your Design Tokens with Style Dictionary[0m[38;5;12m (https://medium.com/@didoo/how-to-manage-your-design-tokens-with-style-dictionary-98c795b938aa)[39m
[38;5;12m- [39m[38;5;14m[1mManage design tokens with TypeScript and styled-components[0m[38;5;12m (https://www.erikverweij.dev/blog/manage-design-tokens-with-typescript-and-styled-components/)[39m
[38;5;12m- [39m[38;5;14m[1mTheo Design Tokens Using Node-Sass Importer For Any Build Method[0m[38;5;12m (https://basalt.io/blog/theo-design-tokens-using-node-sass-importer-for-any-build-method)[39m
[38;5;12m- [39m[38;5;14m[1mTokenize it[0m[38;5;12m (https://blog.prototypr.io/tokenize-it-2a544ef1413b)[39m
[38;5;12m- [39m[38;5;14m[1mTokens in Design Systems[0m[38;5;12m (https://medium.com/eightshapes-llc/tokens-in-design-systems-25dd82d58421)[39m

[38;5;12mSee more design tokens info [39m[38;5;14m[1mhere[0m[38;5;12m (https://github.com/sturobson/Awesome-Design-Tokens)![39m

[38;2;255;187;0m[4mCoding tools[0m

[38;5;12m- [39m[38;5;14m[1mBacklight[0m[38;5;12m (https://backlight.dev/) — With collaboration between developers and designers at heart, Backlight is a very complete coding platform where teams build, document, publish, scale and maintain Design Systems. [39m

[38;2;255;187;0m[4mPattern library[0m

[38;2;255;187;0m[4mStyleguides and documentation[0m

[38;5;12m- [39m[38;5;14m[1mStencil[0m[38;5;12m (https://stenciljs.com/) - Toolchain for building reusable, scalable Design Systems.[39m
[38;5;12m- [39m[38;5;14m[1mZeroheight[0m[38;5;12m (https://zeroheight.com/) - Create beautiful living styleguides and document all your design system resources in one place. _[39m[38;5;14m[1mLearn about this[0m[38;5;12m (https://medium.com/zeroheight/zeroheight-3-0-b6643c347596)_.[39m

[38;2;255;187;0m[4mDevelop isolated components[0m

[38;5;12m- [39m[38;5;14m[1mBacklight[0m[38;5;12m (https://backlight.dev/) - Collaborative platform to build Design Systems on the code side. Empower your front-end with an all-in-one solution to manage components. Quick start, speed-up collaboration. [39m
[38;5;12m- [39m[38;5;14m[1mPattern Lab[0m[38;5;12m (https://patternlab.io/) - Pattern Lab helps you and your team build thoughtful, pattern-driven user interfaces using atomic design principles.[39m
[38;5;12m- [39m[38;5;14m[1mReact Styleguidist[0m[38;5;12m (https://react-styleguidist.js.org/) - Isolated React component development environment with a living style guide.[39m
[38;5;12m-[39m[38;5;12m [39m[38;5;14m[1mStorybook[0m[38;5;12m [39m[38;5;12m(https://storybook.js.org/)[39m[38;5;12m [39m[38;5;12m-[39m[38;5;12m [39m[38;5;12mBuild[39m[38;5;12m [39m[38;5;12mbulletproof[39m[38;5;12m [39m[38;5;12mUI[39m[38;5;12m [39m[38;5;12mcomponents[39m[38;5;12m [39m[38;5;12mfaster.[39m[38;5;12m [39m[38;5;12mStorybook[39m[38;5;12m [39m[38;5;12mis[39m[38;5;12m [39m[38;5;12man[39m[38;5;12m [39m[38;5;12mopen[39m[38;5;12m [39m[38;5;12msource[39m[38;5;12m [39m[38;5;12mtool[39m[38;5;12m [39m[38;5;12mfor[39m[38;5;12m [39m[38;5;12mdeveloping[39m[38;5;12m [39m[38;5;12mUI[39m[38;5;12m [39m[38;5;12mcomponents[39m[38;5;12m [39m[38;5;12min[39m[38;5;12m [39m[38;5;12misolation[39m[38;5;12m [39m[38;5;12mfor[39m[38;5;12m [39m[38;5;12mReact,[39m[38;5;12m [39m[38;5;12mVue,[39m[38;5;12m [39m[38;5;12mand[39m[38;5;12m [39m[38;5;12mAngular.[39m[38;5;12m [39m[38;5;12mIt[39m[38;5;12m [39m[38;5;12mmakes[39m[38;5;12m [39m[38;5;12mbuilding[39m[38;5;12m [39m[38;5;12mstunning[39m[38;5;12m [39m[38;5;12mUIs[39m[38;5;12m [39m[38;5;12morganized[39m[38;5;12m [39m[38;5;12mand[39m[38;5;12m [39m
[38;5;12mefficient.[39m
[38;5;12m- [39m[38;5;14m[1mStyled System[0m[38;5;12m (https://styled-system.com/) - Styled System is a collection of utility functions that add style props to your React components and allows you to control styles based on a global theme object.[39m

[38;2;255;187;0m[4mStorybook addons[0m

[38;5;12m- [39m[38;5;14m[1mAccessibility[0m[38;5;12m (https://github.com/storybookjs/storybook/tree/master/addons/a11y) - Test component compliance with web accessibility standards.[39m
[38;5;12m- [39m[38;5;14m[1mActions[0m[38;5;12m (https://github.com/storybookjs/storybook/tree/master/addons/actions) - Get UI feedback when an action is performed on an interactive element.[39m
[38;5;12m- [39m[38;5;14m[1mBackgrounds[0m[38;5;12m (https://github.com/storybookjs/storybook/tree/master/addons/backgrounds) - Switch backgrounds to view components in different settings.[39m
[38;5;12m- [39m[38;5;14m[1mConsole[0m[38;5;12m (https://github.com/storybookjs/storybook-addon-console) - Show console output like logs, errors, and warnings in the Storybook.[39m
[38;5;12m- [39m[38;5;14m[1mDocs[0m[38;5;12m (https://github.com/storybookjs/storybook/tree/master/addons/docs) - Document component usage and properties in Markdown.[39m
[38;5;12m- [39m[38;5;14m[1mKnobs[0m[38;5;12m (https://github.com/storybookjs/storybook/tree/master/addons/knobs) - Interact with component inputs dynamically in the Storybook UI.[39m
[38;5;12m- [39m[38;5;14m[1mLinks[0m[38;5;12m (https://github.com/storybookjs/storybook/tree/master/addons/links) - Link stories together to build demos and prototypes with your UI components.[39m
[38;5;12m- [39m[38;5;14m[1mSource[0m[38;5;12m (https://github.com/storybookjs/storybook/tree/master/addons/storysource) - View a story's source code to see how it works and paste into your app.[39m
[38;5;12m- [39m[38;5;14m[1mStoryshots[0m[38;5;12m (https://github.com/storybookjs/storybook/tree/master/addons/storyshots) - Take a code snapshot of every story automatically with Jest.[39m
[38;5;12m- [39m[38;5;14m[1mViewport[0m[38;5;12m (https://github.com/storybookjs/storybook/tree/master/addons/viewport) - Build responsive components by adjusting Storybook's viewport size and orientation.[39m

[38;5;12mMore info to Storybook [39m[38;5;14m[1mhere[0m[38;5;12m (https://github.com/lauthieb/awesome-storybook)![39m

[38;2;255;187;0m[4mPattern libraries articles[0m

[38;5;12m- [39m[38;5;14m[1mDependency discovery in Storybook[0m[38;5;12m (https://medium.com/storybookjs/discover-dependencies-in-storybook-49264d361e21)[39m
[38;5;12m- [39m[38;5;14m[1mDesign systems workflow in Storybook[0m[38;5;12m (https://blog.hichroma.com/design-systems-in-storybook-2b2be06e394b)[39m
[38;5;12m- [39m[38;5;14m[1mHow design systems use Storybook[0m[38;5;12m (https://medium.com/storybookjs/how-design-systems-use-storybook-2ed735ad07a9)[39m
[38;5;12m- [39m[38;5;14m[1mHow packaging makes it dead simple to share UI components[0m[38;5;12m (https://blog.hichroma.com/how-packaging-makes-it-dead-simple-to-share-ui-components-29912593539d)[39m
[38;5;12m- [39m[38;5;14m[1mStorybook design system[0m[38;5;12m (https://github.com/storybookjs/design-system)[39m
[38;5;12m- [39m[38;5;14m[1mStorybook Docs sneak peek[0m[38;5;12m (https://medium.com/storybookjs/storybook-docs-sneak-peak-5be78445094a)[39m

[38;2;255;187;0m[4mTesting[0m

[38;2;255;187;0m[4mUnit & Regression test[0m

[38;5;12m- [39m[38;5;14m[1mChromatic[0m[38;5;12m (https://www.chromaticqa.com/) - Visual testing for React, Angular and Vue. Chromatic ensures consistency in UI components, down to the pixel. Every commit is automatically tested for visual changes in the cloud.[39m
[38;5;12m- [39m[38;5;14m[1mTesting library[0m[38;5;12m (https://testing-library.com/) - Simple and complete testing utilities that encourage good testing practices.[39m

[38;2;255;187;0m[4mBooks[0m

[38;5;12m- [39m[38;5;14m[1mAcing the System Design Interview[0m[38;5;12m (https://www.manning.com/books/acing-the-system-design-interview) - Book that gives the insights, skills, and practice needed to ace the toughest system design interview questions by Zhiyong Tan.[39m
[38;5;12m- [39m[38;5;14m[1mAtomic Design[0m[38;5;12m (https://atomicdesign.bradfrost.com/) - Atomic design methodology for creating design systems by Brad Frost.[39m
[38;5;12m- [39m[38;5;14m[1mBuilding Design Systems[0m[38;5;12m (https://www.apress.com/gp/book/9781484245132) - Unify user experiences through a shared design language by Sarrah Vesselov and Taurie Davis.[39m
[38;5;12m- [39m[38;5;14m[1mDesign systems[0m[38;5;12m (https://www.smashingmagazine.com/design-systems-book/) - A practical guide to creating design languages for digital products by Alla Kholmatova (Smashing Magazine).[39m
[38;5;12m- [39m[38;5;14m[1mFront-End Style Guides[0m[38;5;12m (https://www.maban.co.uk/projects/front-end-style-guides/) - Creating and maintaining style guides for websites by Anna Debenham.[39m
[38;5;12m- [39m[38;5;14m[1mFrontend Architecture for Design Systems[0m[38;5;12m (http://shop.oreilly.com/product/0636920040156.do) - A modern blueprint for scalable and sustainable websites by Micah Godbolt.[39m
[38;5;12m- [39m[38;5;14m[1mIntroduction to Design Systems[0m[38;5;12m (https://fem-design-systems.netlify.app/) - A practical introduction to design systems by using React, Figma and Storybook by Emma Bostian[39m
[38;5;12m- [39m[38;5;14m[1mModular Web Design[0m[38;5;12m (https://www.amazon.com/Modular-Web-Design-Components-Documentation/dp/0321601351/) - Creating Reusable Components for user experience design and documentation by Nathan Curtis.[39m

[38;2;255;187;0m[4mTalks[0m

[38;5;12m-[39m[38;5;12m [39m[38;5;14m[1mBuilding[0m[38;5;14m[1m [0m[38;5;14m[1mAccessible[0m[38;5;14m[1m [0m[38;5;14m[1mInterfaces:[0m[38;5;14m[1m [0m[38;5;14m[1mPatterns[0m[38;5;14m[1m [0m[38;5;14m[1mAnd[0m[38;5;14m[1m [0m[38;5;14m[1mTechniques[0m[38;5;12m [39m[38;5;12m(https://vimeo.com/331530115)[39m[38;5;12m [39m[38;5;12m-[39m[38;5;12m [39m[38;5;12mWill[39m[38;5;12m [39m[38;5;12mbe[39m[38;5;12m [39m[38;5;12mbuilding[39m[38;5;12m [39m[38;5;12mand[39m[38;5;12m [39m[38;5;12mrefactoring[39m[38;5;12m [39m[38;5;12mcommon[39m[38;5;12m [39m[38;5;12mUI[39m[38;5;12m [39m[38;5;12mcomponents,[39m[38;5;12m [39m[38;5;12mand[39m[38;5;12m [39m[38;5;12mshare[39m[38;5;12m [39m[38;5;12ma[39m[38;5;12m [39m[38;5;12mcouple[39m[38;5;12m [39m[38;5;12mof[39m[38;5;12m [39m[38;5;12mtechniques[39m[38;5;12m [39m[38;5;12mshe[39m[38;5;12m [39m[38;5;12moften[39m[38;5;12m [39m[38;5;12muses[39m[38;5;12m [39m[38;5;12mto[39m[38;5;12m [39m[38;5;12mbuild[39m[38;5;12m [39m[38;5;12mwith[39m[38;5;12m [39m[38;5;12maccessibility[39m[38;5;12m [39m[38;5;12min[39m[38;5;12m [39m[38;5;12mmind[39m[38;5;12m [39m[38;5;12mby[39m[38;5;12m [39m[38;5;12mSara[39m
[38;5;12mSoueidan.[39m
[38;5;12m-[39m[38;5;12m [39m[38;5;14m[1mDesign[0m[38;5;14m[1m [0m[38;5;14m[1mProcesses[0m[38;5;14m[1m [0m[38;5;14m[1m&[0m[38;5;14m[1m [0m[38;5;14m[1mSystems[0m[38;5;14m[1m [0m[38;5;14m[1min[0m[38;5;14m[1m [0m[38;5;14m[1mCraft[0m[38;5;12m [39m[38;5;12m(https://dotall.com/sessions/design-processes-systems-in-craft)[39m[38;5;12m [39m[38;5;12m-[39m[38;5;12m [39m[38;5;12mDesign[39m[38;5;12m [39m[38;5;12mshouldn't[39m[38;5;12m [39m[38;5;12mbe[39m[38;5;12m [39m[38;5;12ma[39m[38;5;12m [39m[38;5;12msiloed[39m[38;5;12m [39m[38;5;12mpractice,[39m[38;5;12m [39m[38;5;12mbut[39m[38;5;12m [39m[38;5;12ma[39m[38;5;12m [39m[38;5;12mcollaborative[39m[38;5;12m [39m[38;5;12meffort[39m[38;5;12m [39m[38;5;12mrooted[39m[38;5;12m [39m[38;5;12min[39m[38;5;12m [39m[38;5;12mprocess.[39m[38;5;12m [39m[38;5;12mHow[39m[38;5;12m [39m[38;5;12mdo[39m[38;5;12m [39m[38;5;12mwe[39m[38;5;12m [39m[38;5;12mget[39m[38;5;12m [39m[38;5;12mthere?[39m[38;5;12m [39m[38;5;12mIn[39m[38;5;12m [39m[38;5;12mthis[39m[38;5;12m [39m[38;5;12msession,[39m[38;5;12m [39m[38;5;12mwe'll[39m[38;5;12m [39m
[38;5;12mlook[39m[38;5;12m [39m[38;5;12mat[39m[38;5;12m [39m[38;5;12mhow[39m[38;5;12m [39m[38;5;12mwe[39m[38;5;12m [39m[38;5;12mcan[39m[38;5;12m [39m[38;5;12mreframe[39m[38;5;12m [39m[38;5;12mour[39m[38;5;12m [39m[38;5;12mdesign[39m[38;5;12m [39m[38;5;12mapproach[39m[38;5;12m [39m[38;5;12mto[39m[38;5;12m [39m[38;5;12mbe[39m[38;5;12m [39m[38;5;12mmore[39m[38;5;12m [39m[38;5;12mhuman-centric[39m[38;5;12m [39m[38;5;12mand[39m[38;5;12m [39m[38;5;12msystems-minded[39m[38;5;12m [39m[38;5;12mby[39m[38;5;12m [39m[38;5;12mCourtney[39m[38;5;12m [39m[38;5;12mBradford.[39m
[38;5;12m-[39m[38;5;12m [39m[38;5;14m[1mDesign[0m[38;5;14m[1m [0m[38;5;14m[1mSystems[0m[38;5;14m[1m [0m[38;5;14m[1m-[0m[38;5;14m[1m [0m[38;5;14m[1mThe[0m[38;5;14m[1m [0m[38;5;14m[1mState[0m[38;5;14m[1m [0m[38;5;14m[1mof[0m[38;5;14m[1m [0m[38;5;14m[1mthe[0m[38;5;14m[1m [0m[38;5;14m[1mWeb[0m[38;5;12m [39m[38;5;12m(https://www.youtube.com/watch?v=jpmeWXISU5E)[39m[38;5;12m [39m[38;5;12m-[39m[38;5;12m [39m[38;5;12mConversation[39m[38;5;12m [39m[38;5;12mabout[39m[38;5;12m [39m[38;5;12mthe[39m[38;5;12m [39m[38;5;12mrole[39m[38;5;12m [39m[38;5;12mof[39m[38;5;12m [39m[38;5;12mdesign[39m[38;5;12m [39m[38;5;12msystems[39m[38;5;12m [39m[38;5;12min[39m[38;5;12m [39m[38;5;12mmodern[39m[38;5;12m [39m[38;5;12mweb[39m[38;5;12m [39m[38;5;12mdevelopment[39m[38;5;12m [39m[38;5;12mand[39m[38;5;12m [39m[38;5;12mhow[39m[38;5;12m [39m[38;5;12mthey[39m[38;5;12m [39m[38;5;12mcan[39m[38;5;12m [39m[38;5;12mchange[39m[38;5;12m [39m[38;5;12mthe[39m[38;5;12m [39m[38;5;12mdynamics[39m[38;5;12m [39m[38;5;12mbetween[39m[38;5;12m [39m[38;5;12mdesigner[39m[38;5;12m [39m[38;5;12mand[39m[38;5;12m [39m[38;5;12mdeveloper[39m[38;5;12m [39m[38;5;12mby[39m[38;5;12m [39m[38;5;12mAdam[39m[38;5;12m [39m
[38;5;12mArgyle[39m[38;5;12m [39m[38;5;12m(Design[39m[38;5;12m [39m[38;5;12mAdvocate[39m[38;5;12m [39m[38;5;12mat[39m[38;5;12m [39m[38;5;12mGoogle).[39m
[38;5;12m- [39m[38;5;14m[1mDesign Systems[0m[38;5;12m (https://youtu.be/K8MF3aDg-bM?t=4750) - Women of React conf by [39m[38;5;14m[1mNeha Sharma[0m[38;5;12m (https://twitter.com/hellonehha).[39m
[38;5;12m- [39m[38;5;14m[1mHow To Build a Design System | UXPin[0m[38;5;12m (https://www.youtube.com/watch?v=h0MqkRJdaao) - Will teach you how to build a UX Design System using the UX Pin prototyping & design platform.[39m
[38;5;12m-[39m[38;5;12m [39m[38;5;14m[1mIntroducing[0m[38;5;14m[1m [0m[38;5;14m[1mDesign[0m[38;5;14m[1m [0m[38;5;14m[1mSystems[0m[38;5;14m[1m [0m[38;5;14m[1mInto[0m[38;5;14m[1m [0m[38;5;14m[1mChaos[0m[38;5;12m [39m[38;5;12m(https://youtu.be/FZSi1bK-BRM)[39m[38;5;12m [39m[38;5;12m-[39m[38;5;12m [39m[38;5;12mShares[39m[38;5;12m [39m[38;5;12mpractical[39m[38;5;12m [39m[38;5;12mexamples[39m[38;5;12m [39m[38;5;12mon[39m[38;5;12m [39m[38;5;12mwhere[39m[38;5;12m [39m[38;5;12mto[39m[38;5;12m [39m[38;5;12mbegin[39m[38;5;12m [39m[38;5;12mto[39m[38;5;12m [39m[38;5;12mset[39m[38;5;12m [39m[38;5;12mup[39m[38;5;12m [39m[38;5;12ma[39m[38;5;12m [39m[38;5;12mdesign[39m[38;5;12m [39m[38;5;12msystem,[39m[38;5;12m [39m[38;5;12mwhat[39m[38;5;12m [39m[38;5;12mto[39m[38;5;12m [39m[38;5;12mprioritize,[39m[38;5;12m [39m[38;5;12mand[39m[38;5;12m [39m[38;5;12mhow[39m[38;5;12m [39m[38;5;12mto[39m[38;5;12m [39m[38;5;12mmake[39m[38;5;12m [39m[38;5;12ma[39m[38;5;12m [39m[38;5;12mbig[39m[38;5;12m [39m[38;5;12mimpact[39m[38;5;12m [39m[38;5;12mto[39m[38;5;12m [39m[38;5;12mcustomers[39m[38;5;12m [39m[38;5;12mand[39m[38;5;12m [39m[38;5;12mcolleagues,[39m[38;5;12m [39m[38;5;12mto[39m[38;5;12m [39m[38;5;12mhelp[39m[38;5;12m [39m[38;5;12myou[39m[38;5;12m [39m
[38;5;12mintroduce[39m[38;5;12m [39m[38;5;12msystems[39m[38;5;12m [39m[38;5;12mthat[39m[38;5;12m [39m[38;5;12mbring[39m[38;5;12m [39m[38;5;12morder[39m[38;5;12m [39m[38;5;12mto[39m[38;5;12m [39m[38;5;12mchaos[39m[38;5;12m [39m[38;5;12mby[39m[38;5;12m [39m[38;5;12mDiana[39m[38;5;12m [39m[38;5;12mMounter[39m[38;5;12m [39m[38;5;12m(Design[39m[38;5;12m [39m[38;5;12mSystems[39m[38;5;12m [39m[38;5;12mLead[39m[38;5;12m [39m[38;5;12mat[39m[38;5;12m [39m[38;5;12mGitHub).[39m
[38;5;12m-[39m[38;5;12m [39m[38;5;14m[1mJina[0m[38;5;14m[1m [0m[38;5;14m[1mAnne[0m[38;5;14m[1m [0m[38;5;14m[1m-[0m[38;5;14m[1m [0m[38;5;14m[1mDesigning[0m[38;5;14m[1m [0m[38;5;14m[1ma[0m[38;5;14m[1m [0m[38;5;14m[1mDesign[0m[38;5;14m[1m [0m[38;5;14m[1mSystem[0m[38;5;12m [39m[38;5;12m(https://youtu.be/7hYOLLO2gc4)[39m[38;5;12m [39m[38;5;12m-[39m[38;5;12m [39m[38;5;12mWill[39m[38;5;12m [39m[38;5;12mshare[39m[38;5;12m [39m[38;5;12mstrategies[39m[38;5;12m [39m[38;5;12mfor[39m[38;5;12m [39m[38;5;12mhow[39m[38;5;12m [39m[38;5;12mto[39m[38;5;12m [39m[38;5;12mapproach,[39m[38;5;12m [39m[38;5;12mdesign[39m[38;5;12m [39m[38;5;12mand[39m[38;5;12m [39m[38;5;12mbuild[39m[38;5;12m [39m[38;5;12man[39m[38;5;12m [39m[38;5;12meffective[39m[38;5;12m [39m[38;5;12mdesign[39m[38;5;12m [39m[38;5;12msystem;[39m[38;5;12m [39m[38;5;12mhow[39m[38;5;12m [39m[38;5;12mto[39m[38;5;12m [39m[38;5;12msuccessfully[39m[38;5;12m [39m[38;5;12mmaintain[39m[38;5;12m [39m[38;5;12mthe[39m[38;5;12m [39m[38;5;12msystem[39m[38;5;12m [39m[38;5;12mto[39m[38;5;12m [39m[38;5;12mensure[39m[38;5;12m [39m[38;5;12mongoing[39m[38;5;12m [39m[38;5;12musefulness[39m[38;5;12m [39m[38;5;12mby[39m[38;5;12m [39m
[38;5;12mJina[39m[38;5;12m [39m[38;5;12m(Lead[39m[38;5;12m [39m[38;5;12mDesigner[39m[38;5;12m [39m[38;5;12mon[39m[38;5;12m [39m[38;5;12mthe[39m[38;5;12m [39m[38;5;12mDesign[39m[38;5;12m [39m[38;5;12mSystems[39m[38;5;12m [39m[38;5;12mteam[39m[38;5;12m [39m[38;5;12mat[39m[38;5;12m [39m[38;5;12mSalesforce[39m[38;5;12m [39m[38;5;12mUX).[39m
[38;5;12m- [39m[38;5;14m[1mLevel up your Design System with styled-system[0m[38;5;12m (https://youtu.be/K8MF3aDg-bM?t=7280) - Women of React conf by [39m[38;5;14m[1mTaley'a Mirza[0m[38;5;12m (https://twitter.com/TaleyaMirza).[39m
[38;5;12m-[39m[38;5;12m [39m[38;5;14m[1mMaintaining[0m[38;5;14m[1m [0m[38;5;14m[1mDesign[0m[38;5;14m[1m [0m[38;5;14m[1mSystems[0m[38;5;12m [39m[38;5;12m(https://aneventapart.com/news/post/maintaining-design-systems-by-brad-frost-aea-video)[39m[38;5;12m [39m[38;5;12m-[39m[38;5;12m [39m[38;5;12mHelps[39m[38;5;12m [39m[38;5;12myou[39m[38;5;12m [39m[38;5;12mlearn[39m[38;5;12m [39m[38;5;12mhow[39m[38;5;12m [39m[38;5;12mto[39m[38;5;12m [39m[38;5;12mkeep[39m[38;5;12m [39m[38;5;12myour[39m[38;5;12m [39m[38;5;12msystem[39m[38;5;12m [39m[38;5;12mand[39m[38;5;12m [39m[38;5;12mthe[39m[38;5;12m [39m[38;5;12mproducts[39m[38;5;12m [39m[38;5;12mit[39m[38;5;12m [39m[38;5;12mserves[39m[38;5;12m [39m[38;5;12min[39m[38;5;12m [39m[38;5;12msync[39m[38;5;12m [39m[38;5;12mand[39m[38;5;12m [39m[38;5;12munderstand[39m[38;5;12m [39m[38;5;12mhow[39m[38;5;12m [39m[38;5;12mto[39m[38;5;12m [39m[38;5;12mmaintain[39m[38;5;12m [39m[38;5;12mand[39m[38;5;12m [39m[38;5;12mevolve[39m[38;5;12m [39m
[38;5;12myour[39m[38;5;12m [39m[38;5;12mdesign[39m[38;5;12m [39m[38;5;12msystem[39m[38;5;12m [39m[38;5;12mto[39m[38;5;12m [39m[38;5;12mgive[39m[38;5;12m [39m[38;5;12myour[39m[38;5;12m [39m[38;5;12musers[39m[38;5;12m [39m[38;5;12mget[39m[38;5;12m [39m[38;5;12mthe[39m[38;5;12m [39m[38;5;12mbest[39m[38;5;12m [39m[38;5;12mpossible[39m[38;5;12m [39m[38;5;12mexperience[39m[38;5;12m [39m[38;5;12mby[39m[38;5;12m [39m[38;5;12mBrad[39m[38;5;12m [39m[38;5;12mFrost[39m[38;5;12m [39m[38;5;12m(Front-end[39m[38;5;12m [39m[38;5;12mdesigner).[39m

[38;2;255;187;0m[4mContributing[0m

[38;5;12mContributions welcome! Read the [39m[38;5;14m[1mcontribution guidelines[0m[38;5;12m (CONTRIBUTING.md) first.[39m
