{"id":4682,"date":"2021-03-15T19:37:56","date_gmt":"2021-03-15T19:37:56","guid":{"rendered":"https:\/\/www.wendyzhou.se\/blog\/?p=4682"},"modified":"2021-03-26T08:48:04","modified_gmt":"2021-03-26T08:48:04","slug":"best-figma-plugins-design-systems-developers","status":"publish","type":"post","link":"https:\/\/www.wendyzhou.se\/blog\/best-figma-plugins-design-systems-developers\/","title":{"rendered":"8 Best Figma Plugins (2021) Design Systems & Developers"},"content":{"rendered":"\n

Here\u2019s the 8 best Figma plugins that are available (2021), in my opinion. Both for design system, developers, and for productivity.<\/strong><\/p>\n\n\n\n

See also: 6 Best Free Figma Community Files<\/a><\/p>\n\n\n\n

Best Figma Plugins for Design Systems<\/h2>\n\n\n\n

One thing Figma is great at compared to other design software is all their built-in features for design systems. But to make the work process even more effective, you can install plugins that help you manage your design systems between different teams and documents.<\/p>\n\n\n\n

1. Figma Chat <\/h3>\n\n\n\n

This first one is a Figma chat, that allows you to communicate with your team members!<\/p>\n\n\n\n

Figma Chat Plugin ><\/strong><\/a><\/p>\n\n\n\n

\"Figma<\/figure>\n\n\n\n

2. Team Library Component Attacher<\/h3>\n\n\n\n

This plugin helps you make sure that all your components are synced and attached to the correct files.<\/p>\n\n\n\n

Team Library Component Attacher ><\/strong><\/a><\/p>\n\n\n\n

\"Best<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n

Best FIGMA Plugins for Developers<\/h2>\n\n\n\n

Designer-developer handoffs can be a tricky thing. Collaborative tools in Figma and other softwares have made the process easier. At least in terms of being able to share files and for developers to inspect paddings, margin, hex-colors and such. But the next level of the game is automatically generated code from design, that can be used by developers as components. It saves both time, money, and confusion.<\/p>\n\n\n\n

3. React Figma<\/h3>\n\n\n\n

This React plugin turn your Figma designs into React components that can be downloaded. <\/p>\n\n\n\n

React Figma ><\/a><\/strong><\/p>\n\n\n\n

\"Best<\/figure>\n\n\n\n

4. CopyCat (Swift UI)<\/h3>\n\n\n\n

This second plugin for developers take designs in Figma files and generate good SwiftUI code.<\/p>\n\n\n\n

Copycat ><\/a><\/strong><\/p>\n\n\n\n

\"Best<\/figure>\n\n\n\n

5. HtmlGenerator<\/h3>\n\n\n\n

Render any selected element into HTML and CSS that you can copy and paste. <\/p>\n\n\n\n

HtmlGenerator ><\/a><\/strong><\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

useful Figma plugin resources<\/h2>\n\n\n\n

The community of course offers many more useful plugins than those for design systems and developers. Here\u2019s a few that I find super useful!<\/p>\n\n\n\n

6. Unsplash<\/h3>\n\n\n\n

Who doesn\u2019t love all the gorgeous and free-to-use images from unsplash? You won\u2019t need to change tabs all the time anymore with this plugin that brings Unsplash images straight into your Figma design screen.<\/p>\n\n\n\n

Unsplash ><\/a><\/strong> <\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

7. Remove BG<\/h3>\n\n\n\n

This plugin is useful for removing the background on images!<\/p>\n\n\n\n

Remove BG Plugin ><\/strong><\/a><\/p>\n\n\n\n

\"Remove<\/figure>\n\n\n\n

8. Iconfy <\/h3>\n\n\n\n

A huge collection of icons available for you! No more googling icons and copy-pasting all the time.<\/p>\n\n\n\n

Iconfy ><\/a><\/strong><\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Recommended: Best Figma Fonts | Find Modern Google UI Fonts<\/a><\/p>\n\n\n\n

<\/p>\n","protected":false},"excerpt":{"rendered":"

Here\u2019s the 7 best Figma plugins that are available (2021). Both for design system, developers, and for productivity.<\/p>\n","protected":false},"author":1,"featured_media":3863,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_uag_custom_page_level_css":"","footnotes":""},"categories":[175,177],"tags":[],"class_list":["post-4682","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ui-design","category-ui-kits","entry","has-media"],"gutentor_comment":0,"uagb_featured_image_src":{"full":["https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2020\/12\/Best-Figma-Community-Files.png",1280,720,false],"thumbnail":["https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2020\/12\/Best-Figma-Community-Files-150x150.png",150,150,true],"medium":["https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2020\/12\/Best-Figma-Community-Files-300x169.png",300,169,true],"medium_large":["https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2020\/12\/Best-Figma-Community-Files-768x432.png",768,432,true],"large":["https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2020\/12\/Best-Figma-Community-Files-1024x576.png",1024,576,true],"1536x1536":["https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2020\/12\/Best-Figma-Community-Files.png",1280,720,false],"2048x2048":["https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2020\/12\/Best-Figma-Community-Files.png",1280,720,false],"ocean-thumb-m":["https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2020\/12\/Best-Figma-Community-Files.png",600,338,false],"ocean-thumb-ml":["https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2020\/12\/Best-Figma-Community-Files.png",800,450,false],"ocean-thumb-l":["https:\/\/www.wendyzhou.se\/blog\/wp-content\/uploads\/2020\/12\/Best-Figma-Community-Files.png",1200,675,false]},"uagb_author_info":{"display_name":"Wendy Zhou","author_link":"https:\/\/www.wendyzhou.se\/blog\/author\/wendy1111live-se\/"},"uagb_comment_info":0,"uagb_excerpt":"Here\u2019s the 7 best Figma plugins that are available (2021). Both for design system, developers, and for productivity.","_links":{"self":[{"href":"https:\/\/www.wendyzhou.se\/blog\/wp-json\/wp\/v2\/posts\/4682","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.wendyzhou.se\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.wendyzhou.se\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.wendyzhou.se\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.wendyzhou.se\/blog\/wp-json\/wp\/v2\/comments?post=4682"}],"version-history":[{"count":8,"href":"https:\/\/www.wendyzhou.se\/blog\/wp-json\/wp\/v2\/posts\/4682\/revisions"}],"predecessor-version":[{"id":4807,"href":"https:\/\/www.wendyzhou.se\/blog\/wp-json\/wp\/v2\/posts\/4682\/revisions\/4807"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.wendyzhou.se\/blog\/wp-json\/wp\/v2\/media\/3863"}],"wp:attachment":[{"href":"https:\/\/www.wendyzhou.se\/blog\/wp-json\/wp\/v2\/media?parent=4682"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.wendyzhou.se\/blog\/wp-json\/wp\/v2\/categories?post=4682"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.wendyzhou.se\/blog\/wp-json\/wp\/v2\/tags?post=4682"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}