[{"data":1,"prerenderedAt":95},["ShallowReactive",2],{"navigation":3,"\u002Fblog\u002Fhow-i-built-my-own-design-system-from-scratch":30,"\u002Fblog\u002Fhow-i-built-my-own-design-system-from-scratch-surround":90},[4],{"title":5,"path":6,"stem":7,"children":8,"page":29},"Blog","\u002Fblog","blog",[9,13,17,21,25],{"title":10,"path":11,"stem":12},"From Mockup to Market: My End-to-End Product Design Process","\u002Fblog\u002Ffrom-mockup-to-market","blog\u002Ffrom-mockup-to-market",{"title":14,"path":15,"stem":16},"How I Built My Design System from Scratch","\u002Fblog\u002Fhow-i-built-my-own-design-system-from-scratch","blog\u002Fhow-i-built-my-own-design-system-from-scratch",{"title":18,"path":19,"stem":20},"现在开始你应该如何去思考和设计软件","\u002Fblog\u002Fhow-you-should-think-about-and-design-software-from-now-on","blog\u002Fhow-you-should-think-about-and-design-software-from-now-on",{"title":22,"path":23,"stem":24},"The Psychology of Color in UI Design","\u002Fblog\u002Fpsychology-of-color-in-ui-design","blog\u002Fpsychology-of-color-in-ui-design",{"title":26,"path":27,"stem":28},"The Case for Slow Design in a Fast-Paced Digital World","\u002Fblog\u002Fslow-design-in-fast-paced-digital-world","blog\u002Fslow-design-in-fast-paced-digital-world",false,{"id":31,"title":14,"author":32,"body":36,"date":81,"description":82,"extension":83,"image":84,"meta":85,"minRead":86,"navigation":87,"path":15,"seo":88,"stem":16,"__hash__":89},"blog\u002Fblog\u002Fhow-i-built-my-own-design-system-from-scratch.md",{"name":33,"avatar":34},"Emma Thompson",{"src":35,"alt":33},"https:\u002F\u002Fimages.unsplash.com\u002Fphoto-1701615004837-40d8573b6652?q=80&w=1480&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",{"type":37,"value":38,"toc":77},"minimark",[39,43,46,49,52,68,71,74],[40,41,42],"p",{},"After years of starting each project with a blank Figma file, I finally took the plunge and created my own comprehensive design system. The process was both challenging and incredibly rewarding, and I wanted to share my approach for other designers considering the same journey.",[40,44,45],{},"I started by auditing five of my recent projects, identifying common patterns and components that appeared across different designs. This revealed inconsistencies in my work that I hadn't noticed before—seven slightly different button styles, inconsistent spacing rules, and text styles that varied without clear purpose.",[40,47,48],{},"Rather than creating a rigid system upfront, I built it iteratively through a real client project. For the EcoTrack app, I documented each component as I designed it, creating a living system that evolved with the project's needs.",[40,50,51],{},"The core of my system includes:",[53,54,55,59,62,65],"ul",{},[56,57,58],"li",{},"A flexible color system with semantic naming conventions",[56,60,61],{},"Typography scales based on the golden ratio",[56,63,64],{},"Component variants with clear usage guidelines",[56,66,67],{},"Spacing and layout rules that maintain consistency across devices",[40,69,70],{},"The biggest challenge wasn't technical but psychological—learning to trust the system instead of reinventing solutions for each new problem. But the payoff has been enormous: my design process is now 40% faster, client revisions have decreased significantly, and handoff to development is much smoother.",[40,72,73],{},"If you're considering building your own system, my advice is to start small with core elements, test them on real projects, and document as you go. A good design system should feel like a trusted collaborator, not a set of restrictions.",[40,75,76],{},"I've attached a template of my component documentation method below—feel free to adapt it for your own workflow!",{"title":78,"searchDepth":79,"depth":79,"links":80},"",2,[],"2025-03-05","A practical guide to creating your own design system, from initial audit to implementation, and the lessons learned along the way.","md","https:\u002F\u002Fimages.pexels.com\u002Fphotos\u002F196644\u002Fpexels-photo-196644.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",{},6,true,{"title":14,"description":82},"v4KwBTVJ90ic2ZwJ_5bpusUulPf4DMyWsNxXMwW-oUQ",[91,93],{"title":10,"path":11,"stem":12,"description":92,"children":-1},"A detailed breakdown of my iterative design methodology, from initial research to final handoff, with practical tips for designers at every stage.",{"title":18,"path":19,"stem":20,"description":94,"children":-1},"Naval:\"Software went from desktop-first to mobile-first, now going to agent-first.\"",1779983696046]