[ss48]

Our interfaces are simpler and bespoke compared to others. We create a document showing different components, how the components should be dimensioned, and also detailing of different interaction, theming, and animation conventions to be implemented. We try to provide enough detail so that a developer can reimplement in their tool of choice, and will schedule several meetings or screencasts with feedback as they proceed through their adaptation of what is documented. This document guides us in creation and modification of existing components. In several cases, need for new components can drive a complete rethinking of the system.

In separate document, we put the application screens, and navigation between screens only. We try to detail out all possible states of the application, elaborating them in writing in the file.

Finally, we have one more page showing variations of the interface to illustrate all conventions.

Biggest benefit is that all design assets can be exported in SVG format and used in actual application so the app is as close to the Figma as well.

Once you have working prototypes, I strongly suggest including videos of the actual implementation for reference and accommodations for limits of the tech stack used, because it may not match perfectly with the Figma.

For more complex design systems, you may want to look at design kits by larger companies. Examples below: * https://www.figma.com/community/file/1035203688168086460/Mat... * https://material.io/blog/material-3-figma-design-kit * https://www.figma.com/community/file/1159947337437047524 * https://www.figma.com/community/file/1248375255495415511/App...