[{"data":1,"prerenderedAt":103},["ShallowReactive",2],{"navigation":3,"\u002Fblog\u002Fhow-i-built-my-own-design-system-from-scratch":38,"\u002Fblog\u002Fhow-i-built-my-own-design-system-from-scratch-surround":98},[4],{"title":5,"path":6,"stem":7,"children":8,"page":37},"Blog","\u002Fblog","blog",[9,13,17,21,25,29,33],{"title":10,"path":11,"stem":12},"2026년 7월 10일 테스트1 파일","\u002Fblog\u002F2026-7-10-1","blog\u002F2026년-7월-10일-테스트1",{"title":14,"path":15,"stem":16},"2026년 7월 10일 테스트2 파일","\u002Fblog\u002F2026-7-10-2","blog\u002F2026년-7월-10일-테스트2",{"title":18,"path":19,"stem":20},"From Mockup to Market: My End-to-End Product Design Process","\u002Fblog\u002Ffrom-mockup-to-market","blog\u002Ffrom-mockup-to-market",{"title":22,"path":23,"stem":24},"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":26,"path":27,"stem":28},"The Psychology of Color in UI Design","\u002Fblog\u002Fpsychology-of-color-in-ui-design","blog\u002Fpsychology-of-color-in-ui-design",{"title":30,"path":31,"stem":32},"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",{"title":34,"path":35,"stem":36},"테스트입니다.","\u002Fblog\u002Fslow-design-in-fast-paced-digital-world-copy","blog\u002Fslow-design-in-fast-paced-digital-world-copy",false,{"id":39,"title":22,"author":40,"body":44,"date":89,"description":90,"extension":91,"image":92,"meta":93,"minRead":94,"navigation":95,"path":23,"seo":96,"stem":24,"__hash__":97},"blog\u002Fblog\u002Fhow-i-built-my-own-design-system-from-scratch.md",{"name":41,"avatar":42},"Emma Thompson",{"src":43,"alt":41},"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":45,"value":46,"toc":85},"minimark",[47,51,54,57,60,76,79,82],[48,49,50],"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.",[48,52,53],{},"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.",[48,55,56],{},"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.",[48,58,59],{},"The core of my system includes:",[61,62,63,67,70,73],"ul",{},[64,65,66],"li",{},"A flexible color system with semantic naming conventions",[64,68,69],{},"Typography scales based on the golden ratio",[64,71,72],{},"Component variants with clear usage guidelines",[64,74,75],{},"Spacing and layout rules that maintain consistency across devices",[48,77,78],{},"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.",[48,80,81],{},"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.",[48,83,84],{},"I've attached a template of my component documentation method below—feel free to adapt it for your own workflow!",{"title":86,"searchDepth":87,"depth":87,"links":88},"",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":22,"description":90},"v4KwBTVJ90ic2ZwJ_5bpusUulPf4DMyWsNxXMwW-oUQ",[99,101],{"title":18,"path":19,"stem":20,"description":100,"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":26,"path":27,"stem":28,"description":102,"children":-1},"Exploring how strategic color choices can influence user behavior, evoke emotions, and enhance the overall user experience of digital products.",1783688214743]