Developer Friendly UI Component Design

As we product and user interface designers working on the front-end environment, our end-products define the development effort. We, designers, can reduce the development effort by just simply following some simple rules. Frames th2at we use defines the HTML structure, where frame names actually equals to corresponding CSS class. Today, Figma allow us to define properties, states, actions of a component while designing where Component Driven Design is gaining popularity within the design world. Figma Dev Mode is a trending product among developers while developing components and interfaces. Hand-off tools like Zeplin allow to view specs of a UI element. Component Driven Design approach requires well-taught component structures to implement widely in digital products. I believe, as a designer, it is my responsibility to think about my component’s development process which is also help development team the reduce their effort.