Figma designs comparison
Use Percy with Figma designs for visual comparison.
Percy’s support to configure Figma designs enables you to validate designs and detect visual discrepancies. It streamlines your design-to-development process by providing:
- Real-time screenshot comparisons for pixel-perfect accuracy.
- One-click setup to link Figma to Percy.
- Preview and interactive modes for design comparison.
- Collaborate with stakeholders and request changes and approvals.
New to Percy? Get started by creating a Percy Web project. For more information, see Create a Project. Once your project is created & build is triggered you are ready to perform visual testing with Percy.
High-level steps
- Upload Figma design file link.
- Map the snapshots with the required build snapshots.
- Compare designs and validate visual differences.
- Support is currently available only for Percy Web.
- The allowed width for the snapshots is between 120px and 2000px (inclusive).
- Ensure the snapshot width matches the design. For more information, see set the snapshot width using the CLI.
Explore further
We're sorry to hear that. Please share your feedback so we can do better
Contact our Support team for immediate help while we work on improving our docs.
We're continuously improving our docs. We'd love to know what you liked
We're sorry to hear that. Please share your feedback so we can do better
Contact our Support team for immediate help while we work on improving our docs.
We're continuously improving our docs. We'd love to know what you liked
Thank you for your valuable feedback!