![]() Designers and developers design and build the design system’s components in a workshop environment like Storybook, Pattern Lab, Fractal, or any number of other tools.Let’s take the following graphic and break it down: I know this because I’ve been building increasingly-complex visuals! But it all checks out, I swear. Consuming the components directly helps ensure the components can successfully power real software applications, rather than simply as abstract components floating around in the ether.Īs I mentioned earlier, there are a lot of moving parts to a design system.Changes were made to the button or card component? Run npm update design-system-components in the Gatsby style guide project to pull the latest and greatest into the style guide. That means there’s almost no friction to get updates to the components into the style guide site. ![]() This allows the team to trial the workflow for deploying the design system into a working application via npm packages.The design system’s presentational components can be ingested and used directly by the Gatsby style guide website, meaning that the style guide site is powered by the very components it displays (the ultimate dogfooding!).Building the style guide website in React provides several advantages for teams who have chosen to build their design systems in React: The project serves as a style guide website boilerplate for teams authoring their design systems with React. So! That’s why built Style Guide Guide, Gatsby Edition. However, those tools are designed for the working group’s productivity, which serves a much different purpose than a style guide website, which needs to serve many, often less-technical audiences. Like a lot of people, we’ve been doing a lot more work in React lately. Tools like Storybook and React Styleguidist are fantastic workshop tools that help teams visualize and build the design system’s components. We’ve built style guide websites using Jekyll, which led to the creation of the original Style Guide Guide project ( demo here). In addition to displaying design principles, guidelines, processes, and other helpful info, the storefront showcases complete UI components alongside useful information for users to better understand what a component does, and how to properly implement it. The “storefront” environment is the style guide website that serves as the happy home for all the ingredients of a design system. The “workshop” is the environment designed for teams to be creative ( playful, even) and productive. It is in the workshop where new components are established, explored, iterated upon, tested, and ultimately packaged up for production. We’ve found it helpful to break down two important environments of a design system into the “workshop” and the “storefront”. ![]() ![]() There are lots of moving parts, tools, and environments involved in making a design systems take shape. We’re happy to announce Style Guide Guide, Gatsby Edition! You can check out the demo here. ![]()
0 Comments
Leave a Reply. |
Details
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |