Style-guide Frontend Designer A component developer focuses on developing UI building blocks, whereas a application developer focuses on coding applications UI Developer Component Developer Application Developer Develop UI components UI Documentation in Storybook (living Style-guide) Integrate UI components by referring to living Style-guide Manage business logic / application logic
Designer Frontend UI Developer Style-guide a document that contains design guidelines for each repeatedly used design element, such as visual identity elements, icons, interface components, and their states, headings, etc Static Living
Designer Frontend UI Developer Static Style-guide Figma is a powerful web-based design tool that helps you create anything, websites, applications, logos, and much more.
Designer Frontend UI Developer Living Style-guide Storybook is a frontend workshop for building UI components and pages in isolation. Storybook provides a workshop to build UIs in isolation. It helps you develop hard-to-reach states and edge cases without needing to run the whole app.
Style-guide Frontend Designer UI Developer mail calendar meet drive Org Product A Product B Product C • GUI standards • Shareable components • Spacing system • Color system • …
Style-guide Frontend Designer UI Developer material.mail Calendar Team Meet Team Drive Team Material Design material.calendar material.meet material.drive Mail Team Design system • GUI standards • Shareable components • Spacing system • Color system • …
Component Library Design System Components are interactive building blocks for creating a user interface. The purpose of such a library is to keep reusable user interface components in a single place that can then be used for different projects.
Design System Standards Design guidance, specs, and tools to streamline the work of getting from Designer to finished products. Colours Motion Icons Shape Font