![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 284 90" xmlns="http://www.w3.org/2000/svg"><path d="M 38.213 0 C 39.293 0 40.167 0.875 40.167 1.954 L 40.167 9.591 C 40.167 10.67 39.293 11.545 38.213 11.545 L 14.221 11.545 C 13.142 11.545 12.267 12.42 12.267 13.499 L 12.267 29.916 C 12.267 30.995 13.142 31.87 14.221 31.87 L 37.251 31.87 C 38.331 31.87 39.206 32.745 39.206 33.824 L 39.206 41.461 C 39.206 42.54 38.331 43.415 37.251 43.415 L 14.221 43.415 C 13.142 43.415 12.267 44.29 12.267 45.369 L 12.267 78.262 C 12.267 79.341 11.392 80.215 10.313 80.215 L 1.954 80.215 C 0.875 80.215 0 79.341 0 78.262 L 0 1.954 C 0 0.875 0.875 0 1.954 0 Z" fill="rgb(255, 57, 86)" height="80.21549px" id="dpKDk1DJc" transform="translate(79.463 7.456)" width="40.16749999999999px"/><path d="M 0 1.954 C 0 0.875 0.875 0 1.954 0 L 9.832 0 C 10.911 0 11.786 0.875 11.786 1.954 L 11.786 85.718 C 11.786 86.797 10.911 87.672 9.832 87.672 L 1.954 87.672 C 0.875 87.672 0 86.797 0 85.718 Z" fill="rgb(255, 57, 86)" height="87.6718px" id="NZd7rpVJB" transform="translate(126.629 0)" width="11.785999999999987px"/><path d="M 7.697 7.576 C 12.908 2.525 19.362 0 27.059 0 C 34.756 0 41.17 2.525 46.301 7.576 C 51.512 12.547 54.118 18.921 54.118 26.698 C 54.118 34.395 51.512 40.809 46.301 45.94 C 41.17 50.991 34.756 53.517 27.059 53.517 C 19.362 53.517 12.908 50.991 7.697 45.94 C 2.565 40.809 0 34.395 0 26.698 C 0 18.921 2.565 12.547 7.697 7.576 Z M 16.115 38.604 C 18.841 41.491 22.489 42.934 27.059 42.934 C 31.629 42.934 35.277 41.491 38.003 38.604 C 40.729 35.638 42.092 31.709 42.092 26.819 C 42.092 21.447 40.609 17.398 37.642 14.672 C 34.756 11.946 31.228 10.583 27.059 10.583 C 22.89 10.583 19.322 11.946 16.356 14.672 C 13.469 17.398 12.026 21.447 12.026 26.819 C 12.026 31.709 13.389 35.638 16.115 38.604 Z" fill="rgb(255, 57, 86)" height="53.51709999999999px" id="RRf3o92Se" transform="translate(145.833 35.718)" width="54.117999999999995px"/><path d="M 25.737 27.39 C 25.737 28.469 24.862 29.344 23.783 29.344 L 18.671 29.344 C 17.592 29.344 16.717 30.219 16.717 31.298 L 16.717 67.197 C 16.717 68.276 15.842 69.151 14.763 69.151 L 6.885 69.151 C 5.806 69.151 4.931 68.276 4.931 67.197 L 4.931 31.298 C 4.931 30.219 4.056 29.344 2.977 29.344 L 1.954 29.344 C 0.875 29.344 0 28.469 0 27.39 L 0 20.474 C 0 19.395 0.875 18.52 1.954 18.52 L 2.977 18.52 C 4.056 18.52 4.931 17.646 4.931 16.567 L 4.931 1.954 C 4.931 0.875 5.806 0 6.885 0 L 14.763 0 C 15.842 0 16.717 0.875 16.717 1.954 L 16.717 16.567 C 16.717 17.646 17.592 18.52 18.671 18.52 L 23.783 18.52 C 24.862 18.52 25.737 19.395 25.737 20.474 Z" fill="rgb(255, 57, 86)" height="69.1513px" id="hOEYqSNge" transform="translate(202.87 18.52)" width="25.736999999999995px"/><path d="M 7.697 7.576 C 12.908 2.525 19.363 0 27.059 0 C 34.756 0 41.17 2.525 46.302 7.576 C 51.513 12.547 54.119 18.921 54.119 26.698 C 54.119 34.395 51.513 40.809 46.302 45.94 C 41.17 50.991 34.756 53.517 27.059 53.517 C 19.363 53.517 12.908 50.991 7.697 45.94 C 2.566 40.809 0 34.395 0 26.698 C 0 18.921 2.566 12.547 7.697 7.576 Z M 16.116 38.604 C 18.841 41.491 22.489 42.934 27.059 42.934 C 31.629 42.934 35.277 41.491 38.003 38.604 C 40.729 35.638 42.092 31.709 42.092 26.819 C 42.092 21.447 40.609 17.398 37.643 14.672 C 34.756 11.946 31.229 10.583 27.059 10.583 C 22.89 10.583 19.323 11.946 16.356 14.672 C 13.47 17.398 12.027 21.447 12.027 26.819 C 12.027 31.709 13.39 35.638 16.116 38.604 Z" fill="rgb(255, 57, 86)" height="53.51709999999999px" id="Pye3oJlt5" transform="translate(229.11 35.718)" width="54.11899999999997px"/><path d="M 10.627 53.772 C 9.446 55.129 7.389 55.271 6.032 54.091 L 1.119 49.815 C -0.238 48.634 -0.381 46.577 0.8 45.22 L 39.18 1.119 C 40.36 -0.238 42.417 -0.381 43.774 0.8 L 48.687 5.076 C 50.044 6.257 50.187 8.314 49.006 9.67 Z" fill="rgb(255, 57, 86)" height="54.89060968995816px" id="SpCvxFVo6" transform="translate(1.338 1.99)" width="49.80627291931596px"/><path d="M 10.627 34.294 C 9.446 35.651 7.389 35.794 6.032 34.613 L 1.119 30.337 C -0.238 29.156 -0.381 27.099 0.8 25.742 L 22.229 1.119 C 23.41 -0.238 25.467 -0.381 26.824 0.8 L 31.737 5.076 C 33.094 6.257 33.236 8.314 32.056 9.67 Z" fill="rgb(255, 57, 86)" height="35.41285534370931px" id="xokD4o5k8" transform="translate(13.402 31.839)" width="32.85559051071707px"/><path d="M 10.627 14.566 C 9.446 15.923 7.389 16.066 6.032 14.885 L 1.119 10.609 C -0.238 9.429 -0.381 7.372 0.8 6.015 L 5.061 1.119 C 6.242 -0.238 8.299 -0.381 9.655 0.8 L 14.569 5.076 C 15.925 6.257 16.068 8.314 14.887 9.67 Z" fill="rgb(255, 57, 86)" height="15.685110571548435px" id="nakOBCBce" transform="translate(37.198 72.125)" width="15.687351794573836px"/><path d="M 2.255 11.442 C -0.467 9.09 -0.767 4.977 1.585 2.255 C 3.937 -0.467 8.05 -0.767 10.772 1.585 C 13.494 3.937 13.794 8.05 11.442 10.772 C 9.09 13.494 4.977 13.794 2.255 11.442 Z" fill="rgb(255, 57, 86)" height="13.026732849986963px" id="VjIKEIE1e" transform="translate(26.674 63.229)" width="13.026732849986978px"/><path d="M 2.255 11.442 C -0.467 9.09 -0.767 4.977 1.585 2.255 C 3.937 -0.467 8.05 -0.767 10.772 1.585 C 13.494 3.937 13.794 8.05 11.442 10.772 C 9.09 13.494 4.977 13.794 2.255 11.442 Z" fill="rgb(255, 57, 86)" height="13.026732849986978px" id="trVT4BGyL" transform="translate(42.323 21.5)" width="13.026732849986978px"/></svg>)
Step 1
Add Design Diff to your Chrome browser or run the plugin right in Figma.
Step 2
In the extension or on the plugin, pick your Figma frame you want to compare the implementation against.
Step 3
Enter the URL or Navigate to the site you want to compare against your Figma design and open Design Diff by Floto
Step 4
See every difference — colors, spacing, typography, sizing — overlaid on the page.
Step 5
Hover over any component to see a side-by-side overlay of Figma specs vs. your actual CSS implementation. Import your figma variable library to compare against your design tokens.
