The latest articles on DEV Community by Andrea (@mitochonndrea). https://dev.to/mitochonndrea https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F831019%2F3d9bdf7b-8661-4273-9101-9865deb217dd.jpg https://dev.to/mitochonndrea en Andrea Tue, 15 Mar 2022 12:20:02 +0000 https://dev.to/mitochonndrea/how-to-convert-figma-to-code-eei https://dev.to/mitochonndrea/how-to-convert-figma-to-code-eei <p>You can build UI faster than your competition with CopyCat, a figma plugin that turns figma to code instantly. Just copy production-ready code generated directly from Figma designs with the click of a button. It also reuses your existing components and works with mature codebases. </p> <h2> How to Setup CopyCat </h2> <p>(For a quick tutorial watch this video: <a href="https://www.youtube.com/watch?v=Z50x1GgJwUk" rel="noopener noreferrer">https://www.youtube.com/watch?v=Z50x1GgJwUk</a>)</p> <h3> Step #1: </h3> <p>Install CopyCat on your Figma account.<br> <a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fymjpyhnrh8va1drmgbi4.png" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fymjpyhnrh8va1drmgbi4.png" alt="Image description"></a></p> <h3> Step #2: </h3> <p>Open CopyCat plugin on your design. <br> <a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F7ie1j3clw8qgfashwzr1.png" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F7ie1j3clw8qgfashwzr1.png" alt="Image description"></a></p> <h3> Step #3 </h3> <p>: Select the frame you want to export and code will be generated automatically. <br> <a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ftoequfn072i8of9p8s1v.png" class="article-body-image-wrapper"><img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ftoequfn072i8of9p8s1v.png" alt="Image description"></a></p> <h3> And That's It! </h3> <p>Use CopyCat to convert your Figma designs to code and build faster. It eliminates the redundant work so you can focus on the challenges. Try it here: <a href="https://www.copycat.dev/figma-code" rel="noopener noreferrer">https://www.copycat.dev/figma-code</a>. </p>