Handing over designs to engineers is one of the most critical moments in the lifecycle of a design story. The specificity and completeness of a design handoff decide how easy it is to translate the design piece into a working product feature by an engineer.

Using Cosmos in your designs makes the handover process more accessible.

Cosmos closely aligns design and engineering APIs: Variables that refer to design standards inside Cosmos are named the same in both the Figma design and code library.

Even the interface to standard web components matches both worlds using the same name for properties and their values.

A tilde (~) in front of component properties indicates that this property is design-only and not available in code. Here’s an example of the Cosmos Select component which has its 'opened' property marked as available only in design: