I help early-stage (SaaS) startups grow and engage their user base with full-stack product design, so they can gain traction and build a sustainable business.
I really appreciate that you've summarised this process.
I wonder what would you recommend as a workflow to actually author those components?
What I mean is that I'd never develop a design system in isolation. I usually need my whole app/website to see the context and make adjustments if necessary, but - obviously - I don't want to include any of that into the final commit of the design system.
So what do you recommend to seamlessly bring together the development of a main application and the belonging design system locally?
That's a great question, I want to make sure I'm understanding it properly.
I can only speak personally, since we work with a designer, all of our design work is done in advance in Figma so the overall picture & theming of everything can be designed together, then I turn those designs into components and use Storybook to validate that the components match the intention of the designs.
If I were working alone or without a designer I would probably create a few helper components that are meant to group components together (but not actually exported as part of the library). Something that would allow me to wrap unrelated components and compare them in proximity with one another with some padding between. Something along the lines of the Stack from Material-UI (which is basically just a convenient wrapper around a flex element). Then I could drop all my components inside of it and use Storybook to make a story where I can see them.
That said, since I am not skilled at design (and don't pretend to be) I would definitely encourage anyone else who has an opinion on this to respond as well!
I help early-stage (SaaS) startups grow and engage their user base with full-stack product design, so they can gain traction and build a sustainable business.
I really appreciate that you've summarised this process.
I wonder what would you recommend as a workflow to actually author those components?
What I mean is that I'd never develop a design system in isolation. I usually need my whole app/website to see the context and make adjustments if necessary, but - obviously - I don't want to include any of that into the final commit of the design system.
So what do you recommend to seamlessly bring together the development of a main application and the belonging design system locally?
That's a great question, I want to make sure I'm understanding it properly.
I can only speak personally, since we work with a designer, all of our design work is done in advance in Figma so the overall picture & theming of everything can be designed together, then I turn those designs into components and use Storybook to validate that the components match the intention of the designs.
If I were working alone or without a designer I would probably create a few helper components that are meant to group components together (but not actually exported as part of the library). Something that would allow me to wrap unrelated components and compare them in proximity with one another with some padding between. Something along the lines of the Stack from Material-UI (which is basically just a convenient wrapper around a flex element). Then I could drop all my components inside of it and use Storybook to make a story where I can see them.
That said, since I am not skilled at design (and don't pretend to be) I would definitely encourage anyone else who has an opinion on this to respond as well!
Cheers.
Thanks Alex sharing your take on this.
I also encourage everyone to read this article from the authors of Tailwind CSS / UI.
They've explained their process of designing components and then turning them into code.
Their high level overview with your practical article I think is a good starting point.