The design system collects the product's repetitive visual and behavioral decisions in a common order. Instead of just preparing a collection of buttons, I define in what situation and how the components will be used. I organize the Figma library so that the product team can use it in screen production.
Scope of the study
- Color, typography and spacing variables
- Components, variants and interaction states
- Usage examples and design–code mapping notes
Design process
Preparation, design and delivery
I scan existing screens and identify duplicates. I try the priority components in a real-time, eliminate the deficiencies, and deliver the library and usage notes together.
Deliveries
- Edited Figma library
- Status and variant definitions
- Usage and versioning notes
Frequently asked questions
Does the Figma library automatically update code?
No. The design file and code components are separate entities. Matching and updating responsibilities should be determined with the development team.
How is the scope of the proposal determined?
The number of products, theme needs, variety of components, and existing inconsistencies change the scope.
Let's determine the scope of the project together
The number of products, theme needs, variety of components, and existing inconsistencies change the scope.