[{"data":1,"prerenderedAt":121},["ShallowReactive",2],{"navigation":3,"blog-post-\u002Fen\u002Fblog\u002Fhow-i-built-my-own-design-system-from-scratch":53,"\u002Fen\u002Fblog\u002Fhow-i-built-my-own-design-system-from-scratch-surround":114},[4,31],{"title":5,"path":6,"stem":7,"children":8,"page":30},"En","\u002Fen\u002F","en",[9],{"title":10,"path":11,"stem":12,"children":13,"page":30},"Blog","\u002Fen\u002Fblog\u002F","en\u002Fblog",[14,18,22,26],{"title":15,"path":16,"stem":17},"FrYasdlkahsdlklnto Market: My End-to-End Product Design Process","\u002Fen\u002Fblog\u002Ffrom-mockup-to-market\u002F","en\u002Fblog\u002Ffrom-mockup-to-market",{"title":19,"path":20,"stem":21},"How I Built My Design System from Scratch","\u002Fen\u002Fblog\u002Fhow-i-built-my-own-design-system-from-scratch\u002F","en\u002Fblog\u002Fhow-i-built-my-own-design-system-from-scratch",{"title":23,"path":24,"stem":25},"The Psychology of Color in UI Design","\u002Fen\u002Fblog\u002Fpsychology-of-color-in-ui-design\u002F","en\u002Fblog\u002Fpsychology-of-color-in-ui-design",{"title":27,"path":28,"stem":29},"The Case for Slow Design in a Fast-Paced Digital World","\u002Fen\u002Fblog\u002Fslow-design-in-fast-paced-digital-world\u002F","en\u002Fblog\u002Fslow-design-in-fast-paced-digital-world",false,{"title":32,"path":33,"stem":34,"children":35,"page":30},"Fa","\u002F","fa",[36],{"title":10,"path":37,"stem":38,"children":39,"page":30},"\u002Fblog\u002F","fa\u002Fblog",[40,44,47,50],{"title":41,"path":42,"stem":43},"سلام جیگر من چطوری؟: My End-to-End Product Design Process","\u002Fblog\u002Ffrom-mockup-to-market\u002F","fa\u002Fblog\u002Ffrom-mockup-to-market",{"title":19,"path":45,"stem":46},"\u002Fblog\u002Fhow-i-built-my-own-design-system-from-scratch\u002F","fa\u002Fblog\u002Fhow-i-built-my-own-design-system-from-scratch",{"title":23,"path":48,"stem":49},"\u002Fblog\u002Fpsychology-of-color-in-ui-design\u002F","fa\u002Fblog\u002Fpsychology-of-color-in-ui-design",{"title":27,"path":51,"stem":52},"\u002Fblog\u002Fslow-design-in-fast-paced-digital-world\u002F","fa\u002Fblog\u002Fslow-design-in-fast-paced-digital-world",{"id":54,"title":19,"author":55,"body":59,"date":104,"description":105,"extension":106,"image":107,"meta":108,"minRead":109,"navigation":110,"path":111,"seo":112,"stem":21,"__hash__":113},"blog\u002Fen\u002Fblog\u002Fhow-i-built-my-own-design-system-from-scratch.md",{"name":56,"avatar":57},"Reza Akbarpour",{"src":58,"alt":56},"\u002Fimages\u002Fme_dark.avif",{"type":60,"value":61,"toc":100},"minimark",[62,66,69,72,75,91,94,97],[63,64,65],"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.",[63,67,68],{},"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.",[63,70,71],{},"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.",[63,73,74],{},"The core of my system includes:",[76,77,78,82,85,88],"ul",{},[79,80,81],"li",{},"A flexible color system with semantic naming conventions",[79,83,84],{},"Typography scales based on the golden ratio",[79,86,87],{},"Component variants with clear usage guidelines",[79,89,90],{},"Spacing and layout rules that maintain consistency across devices",[63,92,93],{},"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.",[63,95,96],{},"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.",[63,98,99],{},"I've attached a template of my component documentation method below—feel free to adapt it for your own workflow!",{"title":101,"searchDepth":102,"depth":102,"links":103},"",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,"\u002Fen\u002Fblog\u002Fhow-i-built-my-own-design-system-from-scratch",{"title":19,"description":105},"pCBJl65xcwdNzlC3lZaPQpKRK64zV9V6rOI65_SaWro",[115,118],{"title":15,"path":116,"stem":17,"description":117,"children":-1},"\u002Fen\u002Fblog\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":23,"path":119,"stem":25,"description":120,"children":-1},"\u002Fen\u002Fblog\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.",1780581733095]