How to build a design system with React components? ft Gary Meehan | Prismic
Gary Meehan (front-end developer at Distilled SCH) explained to us how to build a design system with React components and the creation process.
More videos on react: • Dive into React
Example repository to show how it’s tied together:
https://github.com/garmeeh/example-co...
Example of a brand using the components from that library:
https://codesandbox.io/s/pjlm3nqoy7
Gary's website: https://www.garymeehan.ie
Mentioned tools:
Storybook: https://storybook.js.org/
styled-components https://www.styled-components.com/
Lerna.js: https://lernajs.io/
---
As a developer, you should build websites using your favorite Jamstack framework.
Prismic allows you to build website sections, that you can connect to a website builder for your client or team. They will create pages from there and you get that content back to your code through our fast API.
► [Tutorial] Build a full website with Next.js 13, Prismic, Tailwind and Typescript:
• Next.js Full Website Tutorial Course ...
► [Tutorial] Build a full website with Nuxt 3 and Prismic's new Page Builder:
• Nuxt 3 Crash Course - Full Website Tu...
► [Starters] Try Slice Machine on Nuxt: https://prismic.club/nuxt-starters
► [Starters] Try Slice Machine on Next.js: https://prismic.club/nextjs-starters
► [Learn more about Slice Machine]: https://prismic.club/slice-machine
---
► Find us also on:
Twitter: / prismicio
Instagram: / prismicio
LinkedIn: / prismic-io
► [Who are we?] : Prismic is a headless Website Builder, for Next.js and Nuxt.js developers.
---
00:00 Intro
00:20 How does your company manage design systems?
01:05 Separating the function of a component from the design
01:50 How does a designer work with these React components?
02:25 How to manage a library like this?
03:04 How does the entire process look like?
05:05 How to reuse components in different contexts?
05:41 Why the designers don't have to worry about how to program an image gallery?
06:08 Do you use these components for everything?
06:53 How do you manage different versions?
#Prismic #React #WebDevelopment