[{"data":1,"prerenderedAt":102},["ShallowReactive",2],{"category":3,"\u002Fnews\u002Fhow-i-built-my-own-design-system-from-scratch":28,"\u002Fnews\u002Fhow-i-built-my-own-design-system-from-scratch-surround":91},{"id":4,"extension":5,"meta":6,"stem":26,"__hash__":27},"category\u002Fcategory.json","json",{"category":7},[8,12],{"title":9,"icon":10,"path":11},"Home","i-lucide-home","\u002F",{"title":13,"children":14},"商品",[15,18,20,22,24],{"title":16,"path":17},"ALL","\u002Fitem",{"title":19},"螺旋　8㎜刺",{"title":21},"螺旋　6㎜クロス刺",{"title":23},"螺旋【覇国】　4.5㎜クロス刺",{"title":25},"快　6mmクロス刺ジャージ剣道具","category","jmFhR0uYBfutq6L_M5HsVPRqcdzJyGRPMkIPD5zVFsc",{"id":29,"title":30,"author":31,"body":35,"date":80,"description":81,"extension":82,"image":83,"meta":84,"minRead":85,"navigation":86,"path":87,"seo":88,"stem":89,"__hash__":90},"news\u002Fnews\u002Fhow-i-built-my-own-design-system-from-scratch.md","How I Built My Design System from Scratch",{"name":32,"avatar":33},"Emma Thompson",{"src":34,"alt":32},"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":36,"value":37,"toc":76},"minimark",[38,42,45,48,51,67,70,73],[39,40,41],"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.",[39,43,44],{},"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.",[39,46,47],{},"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.",[39,49,50],{},"The core of my system includes:",[52,53,54,58,61,64],"ul",{},[55,56,57],"li",{},"A flexible color system with semantic naming conventions",[55,59,60],{},"Typography scales based on the golden ratio",[55,62,63],{},"Component variants with clear usage guidelines",[55,65,66],{},"Spacing and layout rules that maintain consistency across devices",[39,68,69],{},"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.",[39,71,72],{},"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.",[39,74,75],{},"I've attached a template of my component documentation method below—feel free to adapt it for your own workflow!",{"title":77,"searchDepth":78,"depth":78,"links":79},"",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,"\u002Fnews\u002Fhow-i-built-my-own-design-system-from-scratch",{"title":30,"description":81},"news\u002Fhow-i-built-my-own-design-system-from-scratch","mJvIhyiv_B1TYJqcKZE81tTNgQiyxSaKKu26WAWpqdU",[92,97],{"title":93,"path":94,"stem":95,"description":96,"children":-1},"From Mockup to Market: My End-to-End Product Design Process","\u002Fnews\u002Ffrom-mockup-to-market","news\u002Ffrom-mockup-to-market","A detailed breakdown of my iterative design methodology, from initial research to final handoff, with practical tips for designers at every stage.",{"title":98,"path":99,"stem":100,"description":101,"children":-1},"The Psychology of Color in UI Design","\u002Fnews\u002Fpsychology-of-color-in-ui-design","news\u002Fpsychology-of-color-in-ui-design","Exploring how strategic color choices can influence user behavior, evoke emotions, and enhance the overall user experience of digital products.",1774002397896]