![](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>)
01
Install the Extension or the Figma Plugin
Add Design Diff to your Chrome browser or run the plugin right in Figma.
Select a frame to start
In the extension or on the plugin, pick your Figma frame you want to compare the implementation against.
02
03
Provide the implementation URL and hit start diff
Enter the URL or Navigate to the site you want to compare against your Figma design and open Design Diff by Floto
Review the Results
See every difference — colors, spacing, typography, sizing — overlaid on the page.
04
05
Deep Inspect Every Element.
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.
