Practical Technomancy
IMG_7592.jpeg

Blog

Thinking out loud

Fun with Design Systems

I've been spending some time learning to put together component libraries in Sketch, by studying existing UI Kit files from InVision like Form.

The main block here uses smart layouts, embedded library icons, and multiple symbol overrides.

Xnip2019-12-07_11-03-13.png

I arranged symbols using the Atoms/Molecules/Organisms pattern seen in InVision's Form wireframe libraries and tutorials.

I'm pretty sure the exact way to arrange them doesn't matter as much as consistency, so using an existing taxonomy made that easier.

Xnip2019-12-07_11-09-25.png

The Witch Lights are best shown in the dark, so I used a darker color palette, with a few bright accent colors for important alerts and eye-catching elements.