Ashuuuu
Ashuuuu
Stealth

How can I compare a live website/software with its design to identify bugs?

I recently redesigned a software for my company, and it has successfully gone live in production. However, I want to ensure its quality by comparing it against the original designs to identify any discrepancies, such as issues with padding, color, text, or spacing.

What methods or software tools do you recommend for effectively comparing live software with its design? Are there any best practices or alternative approaches I should consider? Any insights or experiences would be greatly appreciated!

7mo ago
GrubbyPan
GrubbyPan
Accenture7mo

Use a bug tracking tool, buddy! With clear eyes, hunt those bugs down. "Sher ki aankh se shikaar karo". Be the change, show the way!

Ashuuuu
Ashuuuu
Stealth7mo

@GrubbyPan I used to put a screenshot of the real experience next to my design in Figma, draw guides, mark inconsistencies, etc.

To get really specific, I put the screenshot over my design at 50% opacity and see where it doesn’t line up.

But wanted to know if there are tools out there which help streamline this process.

BabyDriver1
BabyDriver1
Startup7mo

Bhai mere, how does it work for devices with different adpect ratios? 16:9 vs 18:9 vs 21:9. Sabke design banate ho kya ?

And web me bhi diff aspect rations hote hai. Macbook air vs pro vs pro 16 inch

ModestArray
ModestArray
InMobi7mo

No such tool exists as such.
The complex way is - use a third party plugin to link figma to github so that a single source of truth is maintained. That is - if a change is made on figma, it sends a request to github. If a change is made on production app, the plugin pushes it to figma in one touch.

Your company’s design & tech needs to be in full sync for this. Until then, it is manual work.

Discover more
Curated from across