We base our guidelines on fundamental design principles, communicated through clear directives. Following them ensures better accuracy with just a few minor adjustments.
Accurate Component Identification
Fewer manual changes in the code
BEFORE
Component is inaccurately generated due to lack of grouping. Text elements are not wrapped to it’s height and width.
AFTER
Elements are properly arranged and grouped inside one parent component. Individual elements, like text within a component, are wrapped to its width and height. Learn more
BEFORE
The text field is misidentified as a 'row,' resulting in incorrect code generation and the absence of essential functionality. As a result, users could not interact with the form as expected.
AFTER
With the component correctly identified, it generates accurate code and full functionality. You can consider tagging a component in Figma for easier identification. Learn more
BEFORE
When the component is incorrectly identified, the generated code will not support the functionality of the component.
AFTER
If the component is tagged or designed properly, it will always generate accurate output wherever used. Learn more
BEFORE
Illustrations and vectors were all over the place because they weren't grouped together.
AFTER
By grouping the illustrations and applying an image tag, they are now neatly organized and displayed correctly. You can learn how to apply the image tag here
Personalized report for any 1 screen of your
Figma file, analyzed by our design experts.
Write to us at product@dhiwise.com
Learn about the basic design principles to follow to achieve more accuracy and better output.
Read guidelines
Discuss your projects with our experts for top design strategies
Upgrade
.png?w=3840&q=75)
.webp?w=3840&q=75)
.webp?w=3840&q=75)
