Back to Plugins
VRT

VRT

<p>Easily track changes across your entire Figma file and avoid accidentally breaking something.</p><p><br></p><h2><strong>Step 1: Snapshot your current file</strong></h2><p>The first thing you'll want to do is set your baseline. This will go through all of your pages and create snapshot images for each of them. If your file has many pages, you can select or deselect individual pages.</p><p><br></p><h2><strong>Step 2: Go make some changes</strong></h2><p>Once you've got your baseline snapshots set, go forth and make some changes. For example, you may be curious what will happen if you change a specific color. When you're finished, click 'Take Snapshot'</p><p><br></p><h2><strong>Step 3: Compare Results</strong></h2><p>At a glance, pages that have any visually noticeable changes will be shown as failed. The baseline snapshot is compared against the comparision snapshot to produce a diff image. Any changes will be marked red.</p><p><br></p><p>------------------------------------</p><p><br></p><p><a href="https://github.com/markacianfrani/figma-vrt-plugin" rel="noreferrer noopener nofollow ugc" target="_blank">Completely open source</a>. </p>

diffvrtvisual regressionregressionsnapshot

Plugin Preview

VRT preview

About this plugin

Easily track changes across your entire Figma file and avoid accidentally breaking something.


Step 1: Snapshot your current file

The first thing you'll want to do is set your baseline. This will go through all of your pages and create snapshot images for each of them. If your file has many pages, you can select or deselect individual pages.


Step 2: Go make some changes

Once you've got your baseline snapshots set, go forth and make some changes. For example, you may be curious what will happen if you change a specific color. When you're finished, click 'Take Snapshot'


Step 3: Compare Results

At a glance, pages that have any visually noticeable changes will be shown as failed. The baseline snapshot is compared against the comparision snapshot to produce a diff image. Any changes will be marked red.


------------------------------------


Completely open source.

Plugin Details

Version3
CreatedApril 6, 2022
Last UpdatedApril 10, 2022
CategorySoftware development
CreatorMark Cianfrani
Stats121 installs, 23 likes
PricingFree

Technical Details

  • API:1.0.0
  • UI:dist/ui.html
  • main:dist/code.js
  • Editor Types:
    figma