Freelance Design System
Freelance Design System
Creating this design system has been a journey of thorough benchmarking against industry-standard systems - Porsche, Google’s M3 and Figma’s design kit, combined with my personal insights and experience as a Product designer.
https://www.figma.com/community/file/1449392799977820126/freelance-design-system
Why I decided to build a design system
I decided to build it as a way to simplify my own design process and provide a resource that can help other designers maintain consistency and efficiency, both in independent projects and within company workflows.
This system is more than just a tool—it’s a learning opportunity to master the accurate use of design systems and their individual components.
My goal is to gather honest feedback from potential users, both positive and critical.
I want to understand how to interpret that feedback through the lens of a product designer, continuously improving not just the system but also my approach to design.
key Features Include;
Local Variables: The design system uses linked local variables throughout, ensuring easy customization. By adjusting the primitive variables—the basic building blocks—you can tailor the entire system to match your brand’s ideal.
Style Illustrations: The styles section includes visual guides illustrating how variables influence the components, providing clarity on their purpose and application.
Component Classification: To streamline navigation, components are categorized into eight sections: Branding, Buttons, Content, Feedback/Status, Inputs, Layout, Navigation, and Sheets.
How it works
Find Components: Determine the category a component belongs to or use Figma's search bar to locate it directly.
Customization: Components can be adjusted to fit your project or company needs. Variants can be added, but deleting them is discouraged to maintain their versatility for various design scenarios.
Usage Guidance: Each component includes use-case documentation to help you apply it correctly in different scenarios.
Here's the Figma link to the design system
https://www.figma.com/community/file/1449392799977820126/freelance-design-system
A glimpse of the design system
1. Variable Building Blocks
2. Style Guidelines
3. Component Classification
4. Use cases
5. Variable Modes - Light mode/Dark Mode
6. Break point responsiveness
Feedback
I’d love to hear your thoughts on the Freelance Design System. If you have feedback, suggestions, or ideas for improvement, feel free to reach in the following ways;
For direct inquiries or collaboration opportunities, feel free to email me at: catherinekathembe34@gmail.com
You can also share your thoughts through the Google Form linked below!