Design System First?

Hi, I’m a junior UI/UX designer in Indonesia, and still struggling to create a design system, and it makes my workspace sometimes feels messy, because I often dive in straight to mockup phase, designing high-fi design, skipping the brainstorm, wireframing, and design system process…

Can you please share how your design process? Did you create design system first then do the mockup, or do you craft the mockup first, exploring styles then make design system later?

That is not something to answer quickly here. If you want, I can help you. My email is

I built a design system around an existing website and brand. I went through the built website and inventoried the components and created guidelines on how to reuse all of those components. It will be much easier if you are building something from scratch to build it out before the design system but build it knowing that you will want to extract the reusable components to put in the design system. Once you know what all components need to be in the design system, I would just follow an example of one and fill the gaps with what you have. I just referenced ones online.

It’s one of those ‘it depends…’

Currently I like using my iPad (Concepts app) and my own TinyUX mobile app for low fidelity wireframing and visual brainstorming. But in a more formal setting, and a larger team, I used to like to create clickable prototypes with Axure.

Out of specific use-cases, wireframes for a flow that is super important, etc. Certain components seem to make sense to re-use, and a design system sort of emerges from that. It’s an iterative process.

I’d not do high-fi design before having stake-holders (or yourself :)) on board with low-fi wireframes. So the main purpoase of flow, pages, components is clear. If content can fit, what happesn if X, Y, etc.

1 Like