{"date":"2022-07-27T06:04:59.586Z","plugins":[{"description":"<p>Themer enables you to create and swap themes from your *published* styles in your team library. Use it for color, text and effect styles.</p><p><br></p><p>How does it work?</p><p>Themer associates published styles with a theme name. When you have multiple themes, Themer will swap styles that match across themes: which means you need two styles with the same names in each theme.</p><p><br></p><p>In order for Themer to be used across your team, generic information about your styles is shared on a external service (<a href=\"http://jsonbin.io\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">jsonbin.io</a>). You will need an account with an API key to get started (You can easily sign in with Google, GutHub or Twitter).</p><p><br></p><p>Watch the setup video on YouTube:</p><p><a href=\"https://www.youtube.com/watch?v=aM8SkksBy3Y&amp;feature=youtu.be\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://www.youtube.com/watch?v=aM8SkksBy3Y&amp;feature=youtu.be</a></p><p><br></p><p>1. Insert your API key from JSONbin</p><p><br></p><p>2. Create your first theme, giving it a unique name, and then choose where you want to pull the styles from (all local styles, styles used on the page, or a selection).</p><p><br></p><p>*Tip*: If all of your styles exist within one document, you can also prefix your style names with 'theme1/' or 'theme2/' and set Themer to generate multiuple themes at once.</p><p><br></p><p>3. With your themes created, you can now apply them to a selection or the entire page. Remember, your design must make use of the same styles from one of the themes to work.</p><p><br></p><p>Privacy:</p><p>Themer stores information about your styles at a service external to Figma. For each theme, we store the name of the theme, the name of the style, the type of style (color, text, effect), and a unique key required to import your styles into a document from your team library. No other data from your file is sent to Jsonbin. Your unique API key is storred locally as well, so if you use Themer across devices, between team members, or between Figma Desktop and Figma in the browser, you will need to re-enter your API key and your Bin URL so that everyone/everywhere has access to the same list of Themes.</p><p><br></p><p>Remember to publish your styles before creating a Theme :)</p><p><br></p><p>Roadmap:</p><p>• Currently Themer does not yet work text boxes which contan multiple text styles, the plan is to enable this in the near future</p>","id":"731176732337510831","installCount":38090,"lastUpdateDate":"2022-07-12T12:57:41.259Z","likeCount":846,"name":"Themer","publisherHandle":"tom","publisherId":"35","publisherName":"Tom","runCount":24374,"viewCount":60759},{"description":"<p>Keep your design tidy by easily aligning, renaming and reordering your frames based on their canvas position.</p><p><br></p><p>Super Tidy aligns your frames to a given spacing grid of your choice. Additionally renames your frames and reorders them in the layers list by their position in the canvas.</p>","id":"731260060173130163","installCount":73957,"lastUpdateDate":"2022-01-19T20:55:46.153Z","likeCount":612,"name":"Super Tidy","publisherHandle":"basiclines","publisherId":"434","publisherName":"Ismael Gonzalez","runCount":41571,"viewCount":66579},{"description":"<p>Edit the text content in multiple layers, instances and components in Figma and FigJam files.</p><p><br></p><p>Content Buddy searches for text content in your selection and displays a list with each unique text content, then you can select each item individually and set a replacement text for all the layers where the original content appears.</p><p><br></p><p>Content Buddy works in instances, components, frames , groups and text shapes both for Figma and FigJam files.</p>","id":"731260490045684148","installCount":24034,"lastUpdateDate":"2022-01-19T20:56:26.781Z","likeCount":221,"name":"Content Buddy","publisherHandle":"basiclines","publisherId":"434","publisherName":"Ismael Gonzalez","runCount":17580,"viewCount":29204},{"description":"<p>Keep your Figma files organized, batch rename layers and frames.</p><p><br></p><h2><strong>**NEW FEATURE**&nbsp;</strong></h2><p>Quickly rename layers using the Figma quick actions launcher.</p><ul><li>Select the layers that you want to rename</li><li>Invoke the Figma launcher with ⌘/ on Mac or Control/ on PC</li><li>Search for \"quick rename\" and press enter</li><li>Type what you want to rename your layers (You can use any Rename It keywords, such as %N for sequence rename)</li><li>Press enter and choose the sequence order if needed.&nbsp;</li><li>Voila! The layers should be renamed.</li></ul><p><br></p><h2>Multiple Layers</h2><p>Rename Multiple layers at once.</p><p><br></p><h2>Sequence</h2><p>Sequentially rename layers in either ascending or descending order.</p><ul><li><strong>Keyword %N</strong> - Ascending numbered sequence</li><li><strong>Keyword %n</strong> - Descending numbered sequence</li><li><strong>Keyword %A</strong> - Alphabet sequence</li></ul><p><br></p><p>Additionally, you can choose the sequence order by:</p><ul><li><strong>Layer Panel</strong> - orders by the layer order in the panel</li><li><strong>Left to right, top to bottom </strong>- orders by canvas position starting from the left most selected layer</li><li><strong>Top to bottom, left to right </strong>- orders by canvas position starting from the top most layer</li></ul><p><br></p><h2>Current Layer Name</h2><p>The keyword<strong> %*</strong> will copy the current selected layer(s) name.</p><p><br></p><h2>Layer Name Case</h2><p>You can use the <strong>%*</strong> with combination of letters to convert the layer name case.</p><ul><li><strong>Keyword %*u%</strong> - Convert to UPPER CASE</li><li><strong>Keyword %*l%</strong> - Convert to lower case</li><li><strong>Keyword %*t%</strong> - Convert to Title Case</li><li><strong>Keyword %*uf%</strong> - Convert to Upper first word</li><li><strong>Keyword %*c% </strong>- Convert to camelCase (This will remove the spaces)</li></ul><p><br></p><h2>Add Width and Height</h2><p>Rename layer(s) with the width <strong>%W</strong> and height <strong>%H</strong> of a layer.</p><p><br></p><h2>Find &amp; Replace in Selected Layers</h2><p>Replace any word(s) or character(s) from selected layers.</p>","id":"731271836271143349","installCount":124119,"lastUpdateDate":"2022-04-10T03:26:25.757Z","likeCount":925,"name":"Rename It","publisherHandle":"rodi01","publisherId":"79218","publisherName":"Rodrigo Soares","runCount":75523,"viewCount":84964},{"description":"<p><strong>Quickly annotate your designs’ focus / tab order flow.</strong></p><p><br></p><p>Why? Because not everyone uses a mouse cursor to navigate through online experiences; some people use the keyboard and/or other input devices - so the flow of focused, interactive objects needs to be meaningful.&nbsp;&nbsp;</p><p><br></p><p><strong>With this plugin you can:</strong>&nbsp;</p><p><br></p><p>- Add accessibility annotations over your design</p><p>- Bulk add, remove, reorder, and update your annotations&nbsp;&nbsp;</p><p>- Create multiple annotation sets that can be named and styled with a different color</p><p>- Annotations are stored in a single layer group that can be toggled on / off&nbsp;&nbsp;</p><p><br></p><p><strong>Getting started:</strong></p><p><br></p><p>Learn about the plugin and see some examples in our <a href=\"https://www.figma.com/proto/MvwfJiAq2uQ9O1GYiTtNs4/Focus-Order?page-id=2386%3A7510&amp;node-id=2430%3A7961&amp;viewport=314%2C48%2C0.14&amp;scaling=contain&amp;starting-point-node-id=2430%3A7961&amp;fuid=675456040411035350\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">tutorial</a></p><p>To learn more about accessibility for the web visit <a href=\"https://www.w3.org/TR/wai-aria-practices-1.1/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">w3.org</a></p><p><br></p><p><strong>Thanks</strong></p><p><br></p><p>This plugin was built by the MetaDesign Studio for Microsoft Design. Thanks to Kelly Gorr, Tiffany Chen, Ben Truelove, Anita Mortaloni and Damien Aistrope.</p>","id":"731310036968334777","installCount":17746,"lastUpdateDate":"2022-05-04T21:03:20.587Z","likeCount":513,"name":"A11y - Focus Order","publisherHandle":"kegorr","publisherId":"1113517","publisherName":"Kelly Gorr","runCount":11793,"viewCount":31794},{"description":"<p>Map Maker allows you to make a customized map blazing fast.</p><p>It currently supports Google Maps.</p><p><br></p><p>We are planing to support other map hosting service as well.</p><p><br></p><p>■ Easy To Use</p><p><br></p><p>Select any layer including Rectangle, Ellipse or even Polygon, and run Map Maker.</p><p><br></p><p>■ Fully Customizable</p><p><br></p><p>These are the options you have to customize your Map!</p><p><br></p><p>[Google Maps]</p><p>1. Address</p><p>2. Map Types (including roadmap, satellite, hybrid, and terrain)</p><p>3. Zoom Level</p><p>4. Showing Marker</p><p>5. Custom JSON using Google Maps API's Styling Wizard or Snazzy Maps</p><p><br></p><p>■ Editable</p><p><br></p><p>What if you want to edit your address? or change the zoom level after making your map?</p><p><br></p><p>You can select and run Map Maker again.</p><p>It saves all your customization to your layer.</p><p><br></p><p>■ Live Preview</p><p>You can see the actual output live on your canvas, while editing your map.</p><p><br></p><p>---</p><p><br></p><p>■ Feeback</p><p>If you have any feeback please feel free to open an issue.</p><p><a href=\"https://github.com/kawamurakazushi/figma-map-maker/issues\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">https://github.com/kawamurakazushi/figma-map-maker/issues</a></p>","id":"731312569747199418","installCount":206007,"lastUpdateDate":"2021-12-02T05:47:29.203Z","likeCount":883,"name":"Map Maker","publisherHandle":"kawamurakazushi","publisherId":"945305","publisherName":"Kazushi Kawamura","runCount":164760,"viewCount":154158},{"description":"<p><strong>Scroll around a Figma document using your keyboard arrow keys.</strong></p><p><br></p><p>While zooming in and out of a Figma page is possible via a mouse / trackpad or keyboard shortcuts, the ability to scroll and pan around a Figma page is currently constrained to mouse / trackpad interactions and therefore somewhat inaccessible to users who don't use a mouse / trackpad input.</p><p><br></p><p>*This plugin is primarily meant for designers using voice recognition solutions who aren't able to scroll easily otherwise</p>","id":"731316515732442555","installCount":3127,"lastUpdateDate":"2019-08-07T15:22:59.858Z","likeCount":45,"name":"Keyboard Scrolling","publisherHandle":"microsoft","publisherId":"1500","publisherName":"Microsoft","runCount":1553,"viewCount":10814},{"description":"Sort selected Frames or Layers by names.\n\n■ Usage\n\n1. Select multiple frames or layers.\n2. Run Sort It, and select either alphabetical order (A-Z) or the opposite (Z-A).\n\n(It will only sort layers that are directly selected and not the layers within a frame)\n\n■ Feeback\nIf you have any feedback, please feel free to open an issue.\nhttps://github.com/kawamurakazushi/figma-sort-it/issues\n\n■ Support\nLike on Figma, or Star on Github is always a motivation :D\n\nhttps://github.com/kawamurakazushi/figma-sort-it","id":"731324768889901500","installCount":9074,"lastUpdateDate":"2020-07-08T01:08:57.024Z","likeCount":64,"name":"Sort It","publisherHandle":"kawamurakazushi","publisherId":"945305","publisherName":"Kazushi Kawamura","runCount":6261,"viewCount":10811},{"description":"Charts allows you to generate charts that can be added and edited within your Figma document. Choose from Line, Area, Pie, Doughnut, Scatter and Bar charts. Each chart comes with its own set of configurations such as number of points, max and min values.\n\nIf a frame is selected then the chart will be placed within the frame otherwise it will be placed at 0x0 coordinates and the viewport will move to that position","id":"731451122947612104","installCount":274793,"lastUpdateDate":"2019-09-04T12:29:26.206Z","likeCount":1243,"name":"Charts","publisherHandle":"samjbmason","publisherId":"1181025","publisherName":"Sam Mason de Caires","runCount":180674,"viewCount":185631},{"description":"<p><strong>Design layouts more efficiently by pulling text strings, images, and icons from one palette. Content Reel lets you create custom content and share it with other Figma users. Collaboration has never been easier!</strong></p><p><br></p><p><strong>Content:</strong></p><p>Browse or search content to find published collections of text strings, images, and icons. Having trouble finding what you need from existing content? You can create your own text and image content by using Add.</p><p><br></p><p><strong>Add:</strong></p><p>Create text categories and populate them with your own text strings. You can also upload up to 20 PNGs or JPEGs to create image content. As a creator, you may choose to share it publicly or keep it private. When you create content, it is automatically pinned to Home Screen for quick access (signed-in users only).</p><p><br></p><p><strong>Customize Your Home screen:</strong></p><p>Optimize your workflow by pinning the content that you use most to your home screen. Apply 1-click access to any content type with the switch of a toggle (signed-in users only). Drag and drop items on your home screen to suit your preferences.</p><p><br></p><h2><strong>How to use Content Reel:</strong></h2><p><br></p><p><strong>Find content:</strong></p><p>Access saved content from your Home Screen or navigate through the tabs to search or browse content. Pin it for ease of access to your Home screen.</p><p><br></p><p><strong>Applying text content:</strong></p><p>Select one or more text layers in your design to apply strings individually or apply them all. Use the original order provided or choose an order from the drop-down menu.</p><p><br></p><p><strong>Applying image content:</strong></p><p>Select one or more image layers or frames in your design, then apply the images individually or apply them all in random order.</p><p><br></p><p><strong>Applying icon content:</strong></p><p>Browse the collection or use the search bar to find an icon. Click on the icon or drag and drop it into your design. Change the format between glyph or SVG by clicking on the settings menu. You can also adjust the icon size to scale as needed. When using glyphs make sure the selected font is downloaded and installed in Figma.</p><p><br></p><p>Creating text and image content: Navigate to the Add tab, click Add, and select content type. Provide a Title that is relevant to your content. Set your content to Public or Private. See the terms and conditions regarding usage and rights.</p><p><br></p><p>—</p><p><br></p><p><strong>Got more ideas?</strong></p><p><strong> </strong>Send them our way at <a href=\"mailto:http://designtools@microsoft.com\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">designtools@microsoft.com</a></p><p>Or join the Spectrum community at <a href=\"https://nam06.safelinks.protection.outlook.com/?url=https%3A%2F%2Fspectrum.chat%2Fcontent-reel&amp;data=04%7C01%7Cyevgavr%40microsoft.com%7Cffe6ec56cfa04bf2494008d8d75fbb23%7C72f988bf86f141af91ab2d7cd011db47%7C0%7C0%7C637496153448141569%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C1000&amp;sdata=wKStTdqwAZ%2FunacbdmeNMZXMqAP7%2FQBLoZulvScGKTk%3D&amp;reserved=0\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://spectrum.chat/content-reel</a></p><p><a href=\"https://nam06.safelinks.protection.outlook.com/?url=http%3A%2F%2Fwww.contentreel.design%2F&amp;data=04%7C01%7Cyevgavr%40microsoft.com%7Cffe6ec56cfa04bf2494008d8d75fbb23%7C72f988bf86f141af91ab2d7cd011db47%7C0%7C0%7C637496153448151569%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C1000&amp;sdata=%2B5VmiserPG5CBLnyp1peAWADdSdWu%2Fd%2BrSKuWDqIAKs%3D&amp;reserved=0\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">www.contentreel.design</a></p><p><br></p><p><a href=\"https://contentreel.design/terms\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Microsoft’s Terms of Use</a></p><p><a href=\"https://privacy.microsoft.com/en-US/privacystatement\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Microsoft’s Privacy Policy</a></p><p>—</p><p><strong>© 2022 Microsoft. All rights are reserved.</strong></p><p><strong>Use of this plug-in is subject to the Terms and Conditions.</strong></p>","id":"731627216655469013","installCount":532196,"lastUpdateDate":"2022-05-02T18:15:46.511Z","likeCount":3669,"name":"Content Reel","publisherHandle":"microsoft","publisherId":"1500","publisherName":"Microsoft","runCount":398729,"viewCount":401145},{"description":"Extracts a colour palette of 5 different colours from the selected images.\n\nNote: This uses a median cut algorithm, which roughly approximates the most prominent different colours in the image. The algorithm is fast but can sometimes lead to unusual results, such as with low-colour images, images of vector graphics, and so on. The extracted colours may not exactly match the hex codes in the image.","id":"731841207668879837","installCount":249477,"lastUpdateDate":"2019-08-01T16:44:36.108Z","likeCount":1448,"name":"Image Palette","publisherHandle":"mattdesl","publisherId":"1349726","publisherName":"Matt DesLauriers","runCount":145935,"viewCount":128211},{"description":"<p>Make sure that your designs are covering a reasonable share of the market. Select one or more frames and Viewports will let you change their sizes to your preferred display. Simple!</p><p><br></p><p>Data source: <a href=\"https://gs.statcounter.com/\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">https://gs.statcounter.com/</a></p><p><br></p><p>Version 2 brings market segmentation and far better data coverage. All the background work is now automated and should deliver more accurate data and faster.</p>","id":"732240841094697441","installCount":54363,"lastUpdateDate":"2021-11-23T21:32:58.226Z","likeCount":649,"name":"Viewports","publisherHandle":"rojcyk","publisherId":"204237","publisherName":"Denis Rojčyk","runCount":29514,"viewCount":50176},{"description":"Write Arabic and RTL text in Figma with ease.  Just select a text layer, open the plugin and start writing.\n\nIt will also save the original text in case you wanted to update it.\n\n𝗙𝗘𝗔𝗧𝗨𝗥𝗘𝗦\n• Reshapes Arabic glyphs properly.\n• Handles mixed English & Arabic text.\n• Provides options/workarounds to fix Figma's limitations with Arabic fonts.\n• Supports multiline text.\n• Handles numbers in text.\n\n𝗟𝗜𝗠𝗜𝗧𝗔𝗧𝗜𝗢𝗡𝗦\n• Figma partially reshapes Arabic which causes unexpected results.\n• Line wrapping is not supported because it's not possible yet to hook into Figma's wrapping algorithm.","id":"732290356467065314","installCount":42153,"lastUpdateDate":"2020-01-15T07:32:27.673Z","likeCount":368,"name":"Arabic & RTL Support","publisherHandle":"cdes","publisherId":"26415","publisherName":"Ahmad Al Haddad","runCount":36121,"viewCount":44643},{"description":"<p>The suite of integrated accessibility tools for your product design and development team • Making the world’s products accessible.</p>","id":"732603254453395948","installCount":214455,"lastUpdateDate":"2022-07-25T17:46:22.095Z","likeCount":2062,"name":"Stark","publisherHandle":"Stark","publisherId":"970217","publisherName":"Stark","runCount":156590,"viewCount":199549},{"description":"Have you spent 45 minutes organizing a file after you’ve finished working on it? Think someone should automate the process? \n\nLayerMaid is here to save your time and your hair!\n\nLayerMaid will go through the entire layer panel and organize it; top to bottom, left to right. 

Have backgrounds? Don’t worry, LayerMaid is smart enough to know that backgrounds need to be in the back.\n\nOpen up the plugin and click run! It'll organize your page.","id":"732617369306910191","installCount":3013,"lastUpdateDate":"2019-08-22T19:56:19.888Z","likeCount":43,"name":"LayerMaid","publisherHandle":"1458460","publisherId":"1458460","publisherName":"Daniel Maddock","runCount":1908,"viewCount":3936},{"description":"Rename and number your frames based on their x,y position","id":"732772204922128885","installCount":7285,"lastUpdateDate":"2020-01-10T20:17:11.653Z","likeCount":52,"name":"Enumerator","publisherHandle":"zehfernandes","publisherId":"1828305","publisherName":"Zeh Fernandes","runCount":4168,"viewCount":6413},{"description":"<p>Figma Walker is a new launcher for Figma.</p><p><br></p><p>You can take any actions you want from a single input field.</p><p><br></p><p>1. Search through Frames / Components / Page and jumps to the location.</p><p>2. Insert component by searching through your Master Components.</p><p>3. Create Component from the selected nodes.</p><p><br></p><p>You can walk through your project without lifting your keyboard.</p><p><br></p><p>## Keybinding</p><p><br></p><p>- Select Down</p><p>Arrow Down Key / Ctrl + n</p><p><br></p><p>- Select Up</p><p>Arrow Up Key / Ctrl + p</p><p><br></p><p>- Action on selected row</p><p>Return (Enter) Key / Mouse Click</p><p><br></p><p>## Feedback</p><p><br></p><p>If there is any issue or feedback, Please feel free to open an issue!</p><p><a href=\"https://github.com/kawamurakazushi/figma-walker/issues\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">https://github.com/kawamurakazushi/figma-walker/issues</a></p>","id":"732773762837487095","installCount":14471,"lastUpdateDate":"2021-11-11T22:48:45.693Z","likeCount":230,"name":"Figma Walker","publisherHandle":"kawamurakazushi","publisherId":"945305","publisherName":"Kazushi Kawamura","runCount":10528,"viewCount":19549},{"description":"Figma Format let's you format your canvas by grouping them by the \n names.\n\n■ How it works\nIt will check the names of each layer and group them by the text before the separator (by default \"/\") and layout nicely by their groups.\n\n■ Customization\nYou can customize how you want to format your cavas.\n- Spacing for X and Y axis\n- Grouping seprator (by default \"/\")\n- Vertical or Horizontal Layout\n\n■ Example\nIf we have 5 frames named the following\n- \"Article/List\"\n- \"Article/List\"\n- \"Account/My Page\"\n- \"Account/Settings\"\n- \"Account/Settings\". \n\nAnd formats using this plugin, it will be layouted like this:\n\n| Account/My Page | Account/Settings | Account/SettingsB |\n| Article/Detail | Article/List |\n\n■ Feedback\nIf you have any feedback feel free to open an issue!\nhttps://github.com/kawamurakazushi/figma-format/issues\n\n■ Project Roadmap\n[x] Sort the Layers\n[ ] Customization Options\n  [x]  Spacing for x-axis and y-axis\n  [x]  Separator (default is\"/\")\n  [x]  Number of element in a row / column.\n  [x]  Horizontal / Vertical \n  [ ]  Postion of the seprator, for grouping (default is 1)\n\n■ Support\nLike on Figma, or Star on Github is always a motivation :D\n\nhttps://github.com/kawamurakazushi/figma-format","id":"732774680197470712","installCount":5711,"lastUpdateDate":"2020-07-08T01:04:13.642Z","likeCount":55,"name":"Figma Format","publisherHandle":"kawamurakazushi","publisherId":"945305","publisherName":"Kazushi Kawamura","runCount":2256,"viewCount":6662},{"description":"Confetti for Figma lets anyone create gorgeous confetti patterns.\n\n1. SELECT ONE OR MORE LAYERS\nThe selected layer(s) will become your confetti particles.\n\n2. CONFIGURE YOUR CONFETTI\nPlay around with the settings to create your perfect confetti pattern. Confetti lets you adjust transparency, rotation and size of the confetti particles.\n\n3. GENERATE YOUR CONFETTI\nHave a (confetti) blast!\n\nMAKE IT YOUR OWN\nCreate the confetti pattern you want by changing transparency, rotation, overlap, size, etc.\n\nWORKS WITH COMPONENTS\nUse Components instead of regular layers to instantly update your confetti particles without having to re-create the pattern.\n\nCONFETTI USES A GRID\nBy defining your grid in vertical columns and horizontal rows Confetti for Figma lets you create the perfect layout of confetti particles.","id":"732876968584257019","installCount":38568,"lastUpdateDate":"2020-03-19T10:11:41.732Z","likeCount":332,"name":"Confetti","publisherHandle":"yummygum","publisherId":"915626607654823474","publisherName":"Yummygum","runCount":30444,"viewCount":36244},{"description":"<p>Figmotion is an animation tool built right in Figma. This makes the entry into animation easier and more convenient as there is no need to switch to a completely separate motion tool such as Principle, Haiku or After Effects. Figmotion makes the animation hand-off to developers more manageable as well as it is built with web technologies in mind.</p><p><br></p><p>If you want to know more about Figmotion, please check out our knowledgebase</p><p><a href=\"https://freighter.gitlab.io/figmotion/knowledgebase/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://freighter.gitlab.io/figmotion/knowledgebase/</a></p>","id":"733025261168520714","installCount":355007,"lastUpdateDate":"2022-06-22T03:41:31.404Z","likeCount":2414,"name":"Figmotion","publisherHandle":"liam","publisherId":"74154","publisherName":"Liam Martens","runCount":232447,"viewCount":281244},{"description":"Dating provides two helpful commands for working with dates in Figma. \n\nThe first command `Dating > Create Calendar` lets you quickly generate a calendar for a chosen month and year. It will generate a set of components on the first run for the current page and then reuse those components if you generate a second calendar. Great for mocking up date pickers and date range pickers. \n\nThe second command `Dating > Relative Dates` lets you quickly copy common relative time frames to your clipboard.  All relative dates will be generated from the current day. This is great for mocking up date inputs and times where you want to show a set of common date ranges.","id":"733062631231847948","installCount":23339,"lastUpdateDate":"2019-11-29T18:39:49.121Z","likeCount":129,"name":"Dating","publisherHandle":"jhardy","publisherId":"194293","publisherName":"Jared","runCount":20835,"viewCount":24673},{"description":"Translate helps you test your UI against different languages to see what may break by using the Yandex Translate API to translate your text layers into other languages.\n\nThis plugin requires you to get a free Yandex Translate API key which you can do here https://tech.yandex.com/translate/ once you have the key, launch the app and paste it into the API key field. We never share your key or send it anywhere it is stored locally to your Figma app.\n\nCurrently supported languages:\nChinese\nDutch\nEnglish\nFrench\nGerman\nHindi\nItalian\nJapanese\nMalayalam\nPolish\nPortuguese\nSpanish\nSwedish\nTamil\nVietnamese","id":"733062974250826253","installCount":12997,"lastUpdateDate":"2019-09-03T17:15:47.761Z","likeCount":82,"name":"Translate","publisherHandle":"samjbmason","publisherId":"1181025","publisherName":"Sam Mason de Caires","runCount":8404,"viewCount":14389},{"description":"<p>Ensure your text is readable for users by adhering to WCAG (Web Content Accessibility Guidelines) standards.</p><p><br></p><p>This plugin checks the color contrast ratio of all visible text in a frame, and it provides feedback on whether it meets WCAG’s AA and/or AAA level compliance. It also provides color sliders that allow users to adjust the colors and understand how the corresponding contrast ratio changes in real-time.</p><p><br></p><p>Currently only supports single, 100% solid fills. Working on some known issues with background layer detection (this is due to currently only supporting the aforementioned).</p><p><br></p><p>Created by Tiffany Chen &amp; Ben Truelove</p>","id":"733159460536249875","installCount":139153,"lastUpdateDate":"2020-02-03T04:48:59.393Z","likeCount":1139,"name":"A11y - Color Contrast Checker","publisherHandle":"kegorr","publisherId":"1113517","publisherName":"Kelly Gorr","runCount":97910,"viewCount":115158},{"description":"Roto extrudes and rotates shapes in 3D. \n\nTo use Roto select a shape, run Roto, rotate your object by dragging the preview and play with Roto's properties. A shape with a stroke creates a wireframe. For solid shaded objects give your shapes a solid fill color. If you add an additional fill color you can customize the front color of your object.\n\nBuilt with Three.js","id":"733184376355671573","installCount":62533,"lastUpdateDate":"2019-07-19T03:24:28.078Z","likeCount":499,"name":"Roto","publisherHandle":"carlo","publisherId":"1688149","publisherName":"Carlo Jörges","runCount":46940,"viewCount":47683},{"description":"Color Blind allows you to view your designs in the 8 different types of color vision deficiencies. \nAll you need to do is make a selection and the plugin will clone it and create versions with the colors changed based on what each one would look like to a person with that type of color blindness. Each copy is contained within a group that is labelled with the color blindness type. \n\nYou can also choose to only view certain types of color blindness by toggling the checkboxes in the plugin UI.\n\nWe currently don't support converting image layers.","id":"733343906244951586","installCount":69278,"lastUpdateDate":"2019-08-12T11:59:14.672Z","likeCount":598,"name":"Color Blind","publisherHandle":"samjbmason","publisherId":"1181025","publisherName":"Sam Mason de Caires","runCount":42037,"viewCount":54622},{"description":"<p>Instant access to any company’s brand assets. Search from millions of logos, colors, fonts, and more.</p><p><br></p><p><strong>How does it work?</strong></p><p><br></p><ol><li>Type a company name.</li><li>Fetch its brand assets.</li><li>Click to insert into your designs.</li></ol><p><br></p><p><strong>What is Brandfetch?</strong></p><p><br></p><p>Brandfetch is the go-to-place to source digital assets, claim your brand profile today using our <a href=\"https://www.brandfetch.com\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">brand search engine</a>.</p><p><br></p><p><em>For any questions or feedback, feel free to ping us at support@brandfetch.io.</em></p>","id":"733590967040604714","installCount":125922,"lastUpdateDate":"2022-06-01T07:55:52.354Z","likeCount":801,"name":"Brandfetch","publisherHandle":"brandfetch","publisherId":"843","publisherName":"Brandfetch","runCount":95471,"viewCount":75876},{"description":"<p>Seamlessly sync frames from Figma to new or existing Marvel projects, allowing you to quickly create prototypes or get audio and video feedback using our new User Testing feature.</p><p>Automated syncing means less manual work for you and your team!</p><p><br></p><p>_____________________________</p><p><br></p><p>Sign up free here <a href=\"http://www.marvelapp.com/signup\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">www.marvelapp.com/signup</a></p>","id":"733702238760085035","installCount":14801,"lastUpdateDate":"2021-06-07T14:55:43.061Z","likeCount":107,"name":"Marvel - Prototyping and User Testing","publisherHandle":"max","publisherId":"175457","publisherName":"Maxime De Greve","runCount":9562,"viewCount":18167},{"description":"<p>Autoflow makes it easy to draw flows. Simply select 2 objects and a line will be magically drawn between them.</p><p><br></p><ol><li>Run Autoflow</li><li>Select any 2 shapes whille holding down ⇧SHIFT and a line will be drawn</li><li>Keep selecting until you're all wired up!</li></ol><p><br></p><p>Made by Yitong Zhang (@zhayitong) and David Zhao (@davidtzhao)</p>","id":"733902567457592893","installCount":493051,"lastUpdateDate":"2020-11-06T03:52:38.582Z","likeCount":3414,"name":"Autoflow","publisherHandle":"davidyitong","publisherId":"847147619847611003","publisherName":"David Zhao & Yitong Zhang","runCount":334529,"viewCount":361860},{"description":"With this plugin, you'll be able to setup components and resize their instances while maintaining the spacings that you've set in the master. This is done to maintain spacing for when the height of an element has changed in the instance, i.e. if you have text change from 1 line to 2. \n\nRequirements:\n\nMaster components are required to have a frame, the plugin looks for this. Within the frame you must have 2 elements; these are the ones that you'll fill up with content and will change from instance to instance. This usually is a \"header\" and \"body copy\" (see artwork picture above). \n\nThe frame must have the following settings:\n- Either contrained \"top and bottom\" or \"scale\" (vertical) \n\nThe top element must have the following settings:\n- Constrained to the top\n- Grow vertically (for text)\n- Align top (for text)\n\nThe bottom element must have the following settings:\n-  Contrained to the bottom\n- Grow vertically (for text)\n- Align bottom (for text)\n\nIf you've done this setup, open up the plugin modal, select the element or elements you want to resize and click \"run\". \n\nThe plugin will run it's magic. It will maintain the space between the two elements within the frame (in the example in the artwork, 20px). If you want to change the spacing, adjust the master, then select the elements and return the plugin. \n\nI will create an automatic resizer when figma allows for long lasting plugins. \n\nAny other feedback, feel free to email me at daniel_maddock@intuit.com","id":"734140091470043718","installCount":4135,"lastUpdateDate":"2019-08-13T17:04:30.561Z","likeCount":29,"name":"Dynamic Component Resizer","publisherHandle":"1458460","publisherId":"1458460","publisherName":"Daniel Maddock","runCount":2211,"viewCount":3849},{"description":"Time Machine saves and organizes work that you want to look back on. You'll no longer need to manually copy a version of what you're working on to a new page to reference for later.\n\nAny time you want to save a version, just make a selection and activate Time Machine. It'll send a copy of your selection to a page called \"Time Machine\" that keeps a chronological timeline of what you've saved.\n\nYour work is organized by date and time, so you can compare side by side as your work evolves.","id":"734492262527930956","installCount":26901,"lastUpdateDate":"2020-02-06T18:17:55.534Z","likeCount":335,"name":"Time Machine","publisherHandle":"CashApp","publisherId":"1609","publisherName":"Cash App","runCount":11694,"viewCount":18696},{"description":"Make it rain with confetti\n\n1. Select your pieces of confetti (make sure they're inside of a Frame)\n2. Enter the amount of confetti, and whether to randomize the opacity and rotation\n3. 🎉\n\nNote: Your selection must be inside of a parent Frame to randomize the placement of confetti","id":"734501601239074381","installCount":10525,"lastUpdateDate":"2020-01-31T21:12:34.061Z","likeCount":140,"name":"Sprinkle","publisherHandle":"CashApp","publisherId":"1609","publisherName":"Cash App","runCount":7320,"viewCount":11501},{"description":"<p>Chart is a plugin for Figma that uses real or random data to create the most popular charts. Chart supports copy-paste from editors like Excel, Numbers, Google Sheets, live connection with Google Sheets and remote JSON (REST API), local CSV and JSON files.</p><p><br></p><p>Key features:</p><p>— 16 types of charts out-of-the-box</p><p>— creating multiple chart instances</p><p>— generate random data with different trends</p><p>— import data from CSV, JSON, Google Sheets, REST APIs, type to table input or just paste from table processors like Excel</p><p>— customize charts with different options</p><p>— update charts</p><p><br></p><p>About Chart:</p><p><a href=\"https://chartplugin.com/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://chartplugin.com/</a></p><p><br></p><p>Customer support in Slack:</p><p><a href=\"https://bit.ly/2ZRLFtc\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://bit.ly/2ZRLFtc</a></p><p><br></p><p>Pricing:</p><p><a href=\"https://chartplugin.com/pricing.html\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://chartplugin.com/pricing.html</a></p>","id":"734590934750866002","installCount":228508,"lastUpdateDate":"2022-06-16T18:55:56.350Z","likeCount":1778,"name":"Chart","publisherHandle":"pavelkuligin","publisherId":"1114714","publisherName":"Pavel Kuligin","runCount":192782,"viewCount":251308},{"description":"<p>Create custom bulleted lists using components and save reusable bullet styles on your file.</p><p><br></p><p>NOTE: <strong>The plugin doesn't support the native Figma bullet styles.</strong> The intended behavior is to create a single instance layer for each list item.</p><p><br></p><p>—————</p><p><br></p><h2><strong>☞ HOW TO CREATE A BULLET STYLE</strong></h2><p><br></p><p>1. Create a Figma component with your preferred design for the bullet. Make sure to set Scale as constrain on the all component's children; The bullets instances on the list will inherit the size of this component, you may want to adjust its dimension according to your scenario.</p><p><br></p><p>2. Select the bullet component and click the plus icon on the plugin panel to save it as bullet style;</p><p><br></p><p>—————</p><p><br></p><h2><strong>☞ HOW TO APPLY A BULLET STYLE</strong></h2><p><br></p><p>1. Select at least one or more layers;</p><p><br></p><p>2. Click one of the bullet styles available to add one bullet instance for each selected layer on the canvas. The plugin will organize your layers into a list using Figma Auto-Layout.</p><p><br></p><p>—————</p><p><br></p><h2><strong>☞ HOW TO APPLY CHANGES TO THE BULLETS</strong></h2><p><br></p><p>1. Select the bullets instance layers via the new quick-select feature or manually.</p><p><br></p><p>2(A) - You can swap bullets by clicking on a different bullet style via on the plugin.</p><p><br></p><p>2(B) - You can change size of the bullets or the auto-layout spacing and alignment via the built-in Figma interface.</p><p><br></p><p>❧</p>","id":"734628505008435795","installCount":27232,"lastUpdateDate":"2020-05-03T01:05:23.696Z","likeCount":188,"name":"Bullets","publisherHandle":"mirkosantangelo","publisherId":"206939","publisherName":"Mirko Santangelo","runCount":20666,"viewCount":30179},{"description":"Able makes accessibility easy, while looking and feeling like Figma! \nAdd color contrast and color blindness to your workflow with as little effort as possible. Open Able and we will automatically compare the contrast between two layers you select. This way, you can keep Able open, and casually select layers to compare without re-running or updating the plugin!\n\n🤔 Want to know more? We were recently featured in this brilliant article by Thomas Lowry. Check it out: https://www.figma.com/blog/design-for-everyone-with-these-accessibility-focused-plugins/\n\n👋 You can also simulate different types of color blindness on your selected layers in the preview! \n\n👋 Copy the contrast ratio and scores and paste them into your color style descriptions as documentation!\n\nMade by\nPetter Iversen & Sondre Kvam","id":"734693888346260052","installCount":88250,"lastUpdateDate":"2020-01-17T22:09:09.803Z","likeCount":747,"name":"Able – Friction free accessibility","publisherHandle":"kvam","publisherId":"503922","publisherName":"Sondre Kvam","runCount":53287,"viewCount":92186},{"description":"1. Select a layer within a frame (or a frame itself)\n2. Run Plugin\n3. Enter the wished spacing between selection and the next layers below\n\n-> Shifts all layers below selection\n-> Optionally you can resize the frame accordingly\n-> Ignores layers that are locked or hidden\n\nGreatly boosts your workflow when having a lot of elements in one layout (vertically), if you need to move stuff around a lot and if you want to quickly change vertical spacings.","id":"734698706199517781","installCount":806,"lastUpdateDate":"2020-03-22T14:52:50.156Z","likeCount":17,"name":"Shifter","publisherHandle":"Alain","publisherId":"119920","publisherName":"Alain Groeneweg","runCount":310,"viewCount":2477},{"description":"This plugin will help you to quickly transform the names of your layers. This plugin could be helpful in a case when you need to export many icons or images but you need to have all layer names in lower or upper case. Also, this plugin will help you to replace spaces and add extra symbols to the names of your layers.\n\nFeatures:\n- Convert names to lower or upper case.\n- Join words with a symbol\n- Replace symbols in names\n- Add symbols\n- Remove symbol","id":"734746297902924375","installCount":4802,"lastUpdateDate":"2019-07-21T12:23:33.800Z","likeCount":45,"name":"Layer Names Transfom","publisherHandle":"PavelLaptev","publisherId":"134689","publisherName":"Pavel Laptev","runCount":2562,"viewCount":4757},{"description":"<p>Search for texts on your page and replace them just like a text editor.</p><p><br></p><p>You can search for objects on your page by either text content or layer name. Click on the ... button next to each section to display more settings.</p><p><br></p><p><strong>Keyboard shortcuts</strong></p><p>When focused on \"Find\":</p><ul><li><strong>Enter</strong>: Go to next result</li><li><strong>⇧ Enter</strong>: Go to previous result</li></ul><p><br></p><p>When focused on \"Replace with\":</p><ul><li><strong>Enter</strong>: Replace then go to next result</li><li><strong>⌘ Enter</strong>: Replace all</li></ul><p><br></p><p>Esc: Close plugin</p><p><br></p><p><strong>Use Find and Replace in Quick Actions</strong></p><ol><li>Open Quick Actions (⌘ + / )</li><li>Look for \"Find and Replace\" (but don't run it yet)</li><li>Press the Tab key</li><li>Enter your search term and hit Enter to start searching</li></ol><p><br></p><p>—————————————————————————————————</p><p><br></p><p>Find and Replace</p><p>© 2019 Microsoft. All rights reserved.</p><p><br></p><p>Microsoft Software License Terms</p><p><a href=\"http://contentreel.design/license-terms/Microsoft-Find-and-Replace-for-Figma-design-application.pdf\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">http://contentreel.design/license-terms/Microsoft-Find-and-Replace-for-Figma-design-application.pdf</a></p><p><br></p><p>Microsoft Privacy Statement</p><p><a href=\"https://privacy.microsoft.com/en-US/privacystatement\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://privacy.microsoft.com/en-US/privacystatement</a></p>","id":"735072959812183643","installCount":147557,"lastUpdateDate":"2022-05-11T15:45:30.025Z","likeCount":1269,"name":"Find and Replace","publisherHandle":"jackie","publisherId":"938135745447716877","publisherName":"Jackie Chui","runCount":112914,"viewCount":136449},{"description":"<p>Import Material Design Icons, FontAwesome, Jam Icons, EmojiOne, Twitter Emoji and many other icons (more than 100 icon sets containing over 100,000 icons) to Figma document as vector shapes.</p>","id":"735098390272716381","installCount":1188631,"lastUpdateDate":"2022-07-23T20:01:38.353Z","likeCount":4297,"name":"Iconify","publisherHandle":"iconify","publisherId":"4370511","publisherName":"Iconify","runCount":1100440,"viewCount":628282},{"description":"<p>With Change Text, you can bulk edit the text contents of multiple layers, groups and frames.</p><p><br></p><p>You can also replace text in the selected layers.</p><p><br></p><p>Coming soon, generate text using a generator function...</p><p><br></p><p>🐛 <a href=\"https://github.com/jenil/figma-plugins/issues\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">https://github.com/jenil/figma-plugins/issues</a></p>","id":"735148445325474400","installCount":24111,"lastUpdateDate":"2021-09-26T16:36:21.460Z","likeCount":221,"name":"Change Text","publisherHandle":"jenil","publisherId":"137602","publisherName":"Jenil Gogari","runCount":17943,"viewCount":25191},{"description":"<p>Blend plugin allows you to copy any object along the path.</p><p><br></p><p><strong>How it works </strong></p><ol><li>Select an object you want to clone, then select the path and the Blend Group will be created (it's a regular group but it stores useful data about the blend so it's not recommended to ungroup it).</li><li>Change the number of copies or the distance that you want to keep between them to make the composition fit your needs.</li><li>While the plugin is open you can also edit the blend path and you will see changes in real time.</li></ol><p><br></p><p>★ Check out the design &amp; development process of this plugin on Behance: <a href=\"https://www.behance.net/gallery/83421531/Blend-Plugin-for-Figma-Creation-Process\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">https://www.behance.net/gallery/83421531/Blend-Plugin-for-Figma-Creation-Process</a></p><p><br></p><p><strong>Features</strong></p><ul><li>You can click on layers to select them, they will also reflect which layer is currently selected on the canvas.</li><li>Replace blend path or object by clicking the pencil icon near them and selecting the object you want to change it to.</li><li>Click the Remove Blend button to quickly remove all copies and keep your original object and path.</li></ul><p><br></p><p><strong>Tips</strong></p><ul><li>Use an instance of a component as the main object to be able to easily change its properties.</li><li>Select an object and a path when opening the plugin and it may be able to automatically detect them and create the Blend Group.</li><li>Select an existing blend group when opening the plugin to edit it instead of creating a new one.</li></ul><p><br></p><p><strong>Known issues</strong></p><ul><li>If you edited the node you are copying, change the number of steps to update the copies.</li><li>If you use Cmd + Z it may break the blend and you will have to manually remove copies, reselect the missing object or restart the plugin.</li><li>You cannot use anything other than a simple vector object as a path. If you want to use a shape like an ellipse, flatten it first (Right-click -&gt; Flatten).</li></ul>","id":"735442706723922553","installCount":35048,"lastUpdateDate":"2019-10-23T15:04:03.415Z","likeCount":353,"name":"Blend","publisherHandle":"g","publisherId":"328","publisherName":"Gleb","runCount":25630,"viewCount":34877},{"description":"<p>Export png, nine-patch, adaptive icon in Android folder structure (drawable-xhdpi, etc..).</p><p><br></p><p>TIPS</p><p><br></p><p>- Run \"New PNG\" will add slice layers for every selected layers. You can aslo add slice layer by yourself, or add a export to layer.</p><p><br></p><p>- You must use \"New Nine-Patch\" to create a nine-patch asset, or duplicate a nine-patch asset then change the content.</p><p><br></p><p>- Before running \"Export PNG\" or \"Export Nine-Patch\", you can select some assets, they will be listed on plugin UI. And if have no selected layer in page, it will list all assets in document.</p><p><br></p><p>- You can use the \"Export PNG\" or \"Export Nine-Patch\" plugin button on the inspector panel to export assets.</p><p><br></p><p>- Click the preview image of asset on plugin UI, you can show the layer center in canvas.</p><p><br></p><p>- If you change the layer or asset name when plugin running, you need to run plugin again (cmd+alt+p) to apply the change.</p><p><br></p><p>- Run \"New App Icon\" will create icon template in a new page, you can create multiple icons. Select the app icon page, hide all icon grid layer then run \"Export App Icon\" to export it.</p>","id":"735452896889481850","installCount":36582,"lastUpdateDate":"2022-01-13T11:19:44.227Z","likeCount":197,"name":"Android Resources Export","publisherHandle":"ashung","publisherId":"56497","publisherName":"Ashung Hung","runCount":23040,"viewCount":52092},{"description":"‘QR Code Generator’ helps you to quickly create a Vector QR code.\nJust enter your content or URL then click ‘Place QR code’ — or CMD/Control + Enter.\n\nThis is also great for creating a QR code to share the Figma file link – or a link to your prorotype.\n\nTip: On iOS – the built in camera app can scan QR codes.","id":"735650288109030027","installCount":53239,"lastUpdateDate":"2019-07-30T23:09:31.738Z","likeCount":384,"name":"QR Code Generator","publisherHandle":"Dave","publisherId":"72","publisherName":"Dave Williames","runCount":28332,"viewCount":29161},{"description":"‘Color filters’ is a simple plugin that allows you to quick convert all the colors in you selected layers or frames.\nThis works with:\n• Images\n• Fills\n• Strokes\n• Shadows\n• Mixed text colors\n• Background colors\n\nThere’s no interface – just simply select the layers or frames you want to convert then select ‘Plugins > Color filters... > {The filter you want}’\n\nIt supports:\n• Greyscale\n• Invert\n• Sepia\n• Colorblind simulations\n      • Red-blind (Protanopia)\n      • Red-weak (Protanomaly)\n      • Green-blind (Deuteranopia)\n      • Green-weak (Deuteranomaly)\n      • Blue-blind (Tritanopia)\n      • Blue-weak (Tritanomaly)\n      • Monochromacy (Achromatopsia)\n      • Blue Cone Monochromacy (Achromatomaly)\n\nThis can be really helpful if you want to convert some mockups into ‘Greyscale’ for prototyping or user testing.","id":"735658738614175372","installCount":26641,"lastUpdateDate":"2019-07-24T00:46:45.685Z","likeCount":170,"name":"Color filters...","publisherHandle":"Dave","publisherId":"72","publisherName":"Dave Williames","runCount":15663,"viewCount":26452},{"description":"<p>Trace black and white bitmap images to turn them into a vector layer.</p><p><br></p><p>When you run Image tracer; it will take whatever layers you have selected and combine them together into one image (regardless of if they’re already a vector or not) — then it will convert it to ‘black &amp; white’ and attempt to trace it into a new vector layer.</p><p><br></p><p>You can view the image it is tracing, by changing the dropdown in the options popup from ‘Original image’ to ‘Processed image’.</p>","id":"735707089415755407","installCount":209101,"lastUpdateDate":"2021-01-06T11:23:59.425Z","likeCount":1616,"name":"Image tracer","publisherHandle":"Dave","publisherId":"72","publisherName":"Dave Williames","runCount":164856,"viewCount":152453},{"description":"Let you easy to use different fonts for Latin and CJK characters in selected text layers.\n\n您可以在选中的文本图层上轻松为中西文应用不同字体。\n\nYou can import rules from JSON file, also can export them for sharing.\n\n您可以从 JSON 文件导入规则，亦可将其导出用于共享。\n\n```\n[\n  {\n    \"group\": \"Android\",\n    \"fonts\": [\n      {\"family\":\"Roboto\",\"style\":\"Light\"},\n      {\"family\":\"Noto Sans CJK SC\",\"style\":\"Light\"}\n    ]\n  },\n  {\n    \"group\": \"Android\",\n    \"fonts\": [\n      {\"family\":\"Roboto\",\"style\":\"Regular\"},\n      {\"family\":\"Noto Sans CJK SC\",\"style\":\"Regular\"}\n    ]\n  }\n]\n```\n\nThe first item in fonts array in JSON is font for Latin characters, and the second item for CJK characters.\n\nJSON 中的 fonts 数组第一项为西文字体，第二项为中日韩字体。","id":"735711462872799891","installCount":7284,"lastUpdateDate":"2020-05-13T11:51:55.564Z","likeCount":113,"name":"MixFonts","publisherHandle":"ashung","publisherId":"56497","publisherName":"Ashung Hung","runCount":4143,"viewCount":9876},{"description":"<p>This plugin takes Figma’s in-built <em>‘Select all with...’</em> command to the next level. 🔥</p><p>Select similar layers; based on a whole range of properties.</p><p><br></p><h2>Select other layers...</h2><p>After selecting a layer, run this plugin to select all other layers based on specific properties.</p><p><br></p><h2>[NEW] Select within...</h2><p>If you select multiple layers first, you can choose which properties and values to reduce the selection.</p><p><br></p><p>---</p><p><br></p><p>A small favour — if you find this plugin helpful, why not support me by <a href=\"https://buymeacoffee.com/davew\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Buying me a Coffee</a></p><p><br></p><p>---</p><p><br></p><h2>Example use cases:</h2><p>• Selecting all instances of a specific component to swap out for a different one</p><p>• Changing all layers with a specific Text Style to a new one</p><p>• Selecting all ‘cards’ with the same corner radius and fill color</p><p>• etc.</p><p><br></p><p><br></p><h2>Supported properties</h2><p>Here's a full list of all the properties that this plugin supports. If there's one missing that you'd love to see. Let me know at <a href=\"mailto:david@williames.com\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">david@williames.com</a></p><p><br></p><p><strong>Components:</strong></p><ul><li>Other component instances</li><li>Other component variants</li><li>Component scale factor</li></ul><p><br></p><p><strong>Text</strong></p><ul><li>Text Style</li><li>Font size</li><li>Font family</li><li>Font style</li><li>Text case</li><li>Text decoration</li><li>Letter spacing</li><li>Line height</li><li>Horizontal alignment</li><li>Vertical alignments</li><li>Auto resize</li><li>Text characters</li><li>Paragraph style</li><li>Paragraph indent</li><li>Paragraph spacing</li></ul><p><br></p><p><strong>Fills</strong></p><ul><li>Fill Style</li><li>Fill color</li><li>Fill opacity</li><li>No fills</li></ul><p><br></p><p><strong>Strokes</strong></p><ul><li>Stroke Style</li><li>Stroke color</li><li>Stroke width</li><li>Stroke opacity</li><li>Stroke position</li><li>Stroke cap</li><li>Stroke join</li><li>Stroke dash pattern</li><li>No strokes</li></ul><p><br></p><p><strong>Effects</strong></p><ul><li>Effect Style</li><li>Effect radius</li><li>Shadow color</li><li>Shadow offset</li></ul><p><br></p><p><strong>Auto Layout</strong></p><ul><li>Has Auto layout?</li><li>Layout direction</li><li>Layout sizing (Primary direction)</li><li>Layout sizing (Counter direction)</li><li>Layout alignment (Primary direction)</li><li>Layout alignment (Counter direction)</li><li>Item spacing</li><li>Padding (All)</li><li>Top padding</li><li>Right padding</li><li>Bottom padding</li><li>Left padding</li></ul><p><br></p><p><strong>Layout</strong></p><ul><li>Size</li><li>Width</li><li>Height</li><li>Position (all)</li><li>X Position</li><li>Y Position</li><li>Absolute position (all)</li><li>Absolute X position</li><li>Absolute Y position</li><li>Rotation</li><li>Corner radius (all)</li><li>Top-left radius</li><li>Top-right radius</li><li>Bottom-right radius</li><li>Bottom-left radius</li></ul><p><br></p><p><strong>Layers</strong></p><ul><li>Layer name</li><li>Blend mode</li><li>Layer opacity</li><li>Layer type</li><li>Is locked?</li><li>Is mask?</li><li>Is visible?</li></ul><p><br></p><p><strong>Images</strong></p><ul><li>Image filters (all)</li><li>Image exposure</li><li>Image contrast</li><li>Image saturation</li><li>Image temperature</li><li>Image tint</li><li>Image highlights</li><li>Image shadows</li></ul><p><br></p><p><strong>Export settings</strong></p><ul><li>Export settings (all)</li><li>Export format</li><li>Export suffix</li><li>Export constraint</li><li>Export contents only?</li></ul><p><br></p><p><strong>Prototype</strong></p><ul><li>Prototype reactions (all)</li><li>Action destination</li><li>Action type</li><li>Navigation type</li><li>Trigger type</li><li>Prototype transition (all)</li><li>Transition type</li><li>Transition easing</li><li>Transition duration</li><li>Transition direction</li></ul>","id":"735733267883397781","installCount":81677,"lastUpdateDate":"2022-05-11T09:57:18.638Z","likeCount":1370,"name":"Similayer","publisherHandle":"Dave","publisherId":"72","publisherName":"Dave Williames","runCount":57825,"viewCount":71021},{"description":"<p>Sync content from Google Sheets directly into your Figma file.</p><p><br></p><p><em>This is not an official plugin created by Google • It is simply created with ❤️ by David Williames</em></p><p><br></p><p>If you want to support the continued development of this plugin, why not buy me a coffee at: <a href=\"https://buymeacoffee.com/davew\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">buymeacoffee.com/davew</a></p><p><br></p><p><strong>STEP 1:</strong></p><p>Make sure your Google Sheets file has a shareable link – click ‘Share &gt; Get shareable link’</p><p><br></p><p><strong>STEP 2:</strong></p><p>Name your figma layers appropriately</p><p>• Add a ‘#’ followed by the name of the value you want to sync</p><p>• For example: to get the value ‘Title’ – name your text layer ‘#Title’</p><p>(Note: it is not case sensitive, and will ignore ‘spaces’)</p><p><br></p><p><strong>STEP 3:</strong></p><p>Run this plugin, paste your shareable link, and click ‘Sync’</p><p><br></p><p>--------</p><p><br></p><p>More documentation: <a href=\"https://docs.sheetssync.app\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">https://docs.sheetssync.app</a></p><p><br></p><p>--------</p><p><br></p><p><strong>SPECIFYING A SPECIFIC SHEET IN THE WORKBOOK</strong></p><p><br></p><p>You can choose to use a specific sheet in the workbook by naming the page in your Figma file similar to how you’d name a layer – e.g. Naming your page ‘Page 1 //Properties’ will use the sheet named ‘Properties’ from your Google Sheet.</p><p>(This also works if you name a frame or group the name of the specific Sheet too.)</p><p><br></p><p>If you do not name your page accordingly, it will default to using the first Sheet in your Workbook</p><p><br></p><p>--------</p><p><br></p><p><strong>USING IMAGES</strong></p><p><br></p><p>To dynamically set an image fill on your layer — make sure the value in your Google Sheet for a specific property is an image URL (it must end with ‘.jpg’, ‘.png’ or ‘.gif’). Then make sure you name a Vector/Shape layer with the appropriate name – e.g. ‘#image’</p><p><br></p><p>--------</p><p><br></p><p>More details and documentation for advanced usage coming soon...</p>","id":"735770583268406934","installCount":111440,"lastUpdateDate":"2021-02-06T06:21:18.579Z","likeCount":2334,"name":"Google Sheets Sync","publisherHandle":"Dave","publisherId":"72","publisherName":"Dave Williames","runCount":64791,"viewCount":139434},{"description":"<p>Table Generator plugin automates the addition of tabular data. Copy paste the data(currently in supported CSV format) and that’s all, the table is generated. The plugin provides the custom options that can be configured to pre-define the table cell styles.</p><p><br></p><p>For updates to the plugin, please consider sponsoring the project - https://www.buymeacoffee.com/zwattic</p><p><br></p><p>Release notes</p><p>v1.0.0</p><p>- Configurable styling includes</p><p>- Cell width, height</p><p>- Cell Padding</p><p>- Text font size and line height</p><p>- Text alignment</p><p>- Table border radius</p><p>- Supported input data format - CSV(Comma separated values)</p><p><br></p><p>-----------------------------------------------------------------------</p><p>Feature Roadmap -</p><p>1. Add constraints to cell frame, for responsive behaviour</p><p>2. Text truncation on cell</p><p>3. Option for dynamic row and column sizing</p><p>4. Take a row/column/cell template to generate the table</p><p>5. Support multiple data formats</p>","id":"735922920471082658","installCount":91194,"lastUpdateDate":"2019-07-31T03:08:20.289Z","likeCount":460,"name":"Table Generator","publisherHandle":"zwattic","publisherId":"1713322","publisherName":"Zwattic","runCount":65307,"viewCount":78990},{"description":"Generate ‘Lorem ipsum’ to fill your text layers with dummy text.\n\nSelect all the text layers you want to generate ‘Lorem ipsum’ for then click ‘Generate’ — it will generate for each layer uniquely.\n\n‘Auto-generate’ will automatically fill the selected layers with the perfectly amount of ‘Lorem ipsum’ to fit their existing frame.","id":"736000994034548392","installCount":572201,"lastUpdateDate":"2019-10-05T10:15:15.714Z","likeCount":1624,"name":"Lorem ipsum","publisherHandle":"Dave","publisherId":"72","publisherName":"Dave Williames","runCount":411629,"viewCount":218166},{"description":"<p>Convert VS Code themes to Figma color libraries, create new themes via JSON, and swap themes automatically.</p><p><br></p><p>————————————</p><p>🎨 How to Use Kaleidocode</p><p>————————————</p><p><br></p><p>Generate</p><p>1. In the \"Generate\" tab, select the themes you'd like to create or select \"All themes.\"</p><p>2.Select \"Generate Themes\"</p><p>3.Your color guides are now available on your canvas and the color styles for each color have been added to your library.</p><p><br></p><p>Swap</p><p>1. Select the frame with all the components you'd like to swap.</p><p>2. Select the theme you'd like to switch to in the \"Swap\" tab.</p><p>3. Select \"Swap Theme\".</p><p>Note: The themes must be present in the file to switch themes.</p><p>To relink colors, the layers must have the same name as their desired color, so the side bar background layer would need to be named ---sideBar.background. This is what enables Kaleidocode to go find the color style for the desired theme and relink it.</p><p><br></p><p>Create</p><p>1. To create a custom theme, paste in the JSON for your theme into the text box.</p><p>2. Select \"Create Custom Styles\"</p><p>Note: this should match the formatting for all other VS Code color themes, where the colors are defined \"activityBar.background\": \"#fafafa\"</p><p>3. Your custom color guide is now available on your canvas and the color styles for each color have been added to your library.</p><p><br></p><p>————————————</p><p>👩‍💻 About</p><p>————————————</p><p><br></p><p>We created Kaleidocode because we saw a need to easily and quickly import and generate color themes from VS Code to Figma. Our design team has been slowly pulling our color libraries into Figma, and early on in the process, we realized this was a long and tedious task. Because the color themes for the products we work on can be quite extensive, manually creating color styles and a visual color guide takes a lot of time. We decided that Microsoft's Hackathon 2019 would be an excellent opportunity to team up and try and fix this problem. Over the course of three days, we built Kaleidocode to address the gap in our workflow and improve the design process not only for our team but anyone else designing for VS Code.</p><p><br></p><p>Kaleidocode's creators are Kaitlin Wilkinson, Miguel Solorio, and Pine Wu.</p>","id":"736060893363678891","installCount":3812,"lastUpdateDate":"2019-08-02T23:58:07.001Z","likeCount":55,"name":"Kaleidocode","publisherHandle":"microsoft","publisherId":"1500","publisherName":"Microsoft","runCount":1348,"viewCount":3287},{"description":"Tumble makes shapes fall down.\n\nPut your shapes in a frame, select them and run Tumble.\n\nBuilt with matter.js","id":"736084415195819692","installCount":9619,"lastUpdateDate":"2019-07-25T05:02:04.473Z","likeCount":111,"name":"Tumble","publisherHandle":"carlo","publisherId":"1688149","publisherName":"Carlo Jörges","runCount":5988,"viewCount":12310},{"description":"<p>Interplay imports your design system code repository and lets you design with code components and design tokens in Figma.</p><p><br></p><p>With the Interplay plugin you can browse all of your design system code components, add them to your design in Figma, edit their content and all of the Code Component properties.</p><p><br></p><p>Interplay generates a Figma component on the fly and keeps it connected with the related code component so that your design is always in sync with your production code.</p><p><br></p><p>You can use all your design tokens directly in Figma — including tokens for border radius, padding, gap, etc. with our plugin. Or, you can generate Figma styles from your color, shadow, and typography tokens, and use those if you prefer.</p><p><br></p><p><strong>What’s new?</strong></p><p><br></p><p>Live rendering on the canvas. You can now edit components that have already been added to the canvas.</p><p><br></p><p>On canvas editing. You can now edit content directly on the canvas. When you edit a text box on the canvas, the Code Component property will be updated automatically.</p><p><br></p><p>On canvas resizing. To resize a component, you can now resize it directly on the canvas in Figma. When you resize a component, Interplay renders the code component in a browser in the background, and translates that layout back into Figma.</p><p><br></p><p>UI Improvements. We’ve made lots of UI updates to make it easier to browse components and edit properties</p><p><br></p><p><strong>Quick Start</strong></p><p><br></p><p>1. So that you can try out Interplay straight away, we’ve configured some open source libraries for you to get started including BaseUI. Select a design system and start dragging components onto the canvas.</p><p><br></p><p>2. To edit content and Code Component properties, select any component on the canvas and the plugin will display all of the the available code properties for the component.</p><p><br></p><p>Using your own design system in Figma with Interplay</p><p><br></p><p>We are gradually rolling out access to the Interplay CLI tool and Design System Manager which lets can import your own design system to Interplay. We are gradually rolling out access to teams.</p><p><br></p><p>Sign up for updates from within the plugin or by going to <a href=\"http://interplayapp.com.\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">interplayapp.com</a></p>","id":"736368164448889527","installCount":13906,"lastUpdateDate":"2022-06-17T14:20:24.750Z","likeCount":208,"name":"Interplay","publisherHandle":"Interplay","publisherId":"1836","publisherName":"Interplay","runCount":7819,"viewCount":11345},{"description":"Polyglot is made for designers working on global products.\n\nWe wanted to help empower designers to think about their users at a global scale. By bringing localisation to the design phase, we hope to streamline the product development lifecycle.\n\nMade with ♥ by Canva Design","id":"736439252271864504","installCount":5317,"lastUpdateDate":"2019-07-26T04:58:43.467Z","likeCount":34,"name":"Polyglot","publisherHandle":"850196","publisherId":"850196","publisherName":"Jessica Edwards","runCount":2561,"viewCount":3834},{"description":"Never take a screenshot of a map again! With Mapsicle, you can quickly and seamlessly place maps in your mockups. An interactive map lets you pan to the perfect location, or you can search for a place anywhere in the world. Once you've placed a map in your designs, head back into Mapsicle to adjust the location, style, zoom level and more. Mapsicle uses Mapbox maps to give you a variety of customization options. Have fun! ✌️","id":"736458162635847353","installCount":263800,"lastUpdateDate":"2020-12-19T04:12:55.469Z","likeCount":1512,"name":"Mapsicle","publisherHandle":"chris","publisherId":"41801","publisherName":"Chris Arvin","runCount":179331,"viewCount":182771},{"description":"<p>Ever wanted to iterate upon an idea made with components without messing with existing ones and copy variations between its instances?</p><p><br></p><p>With component cloner, you can select component instances you want to copy and they'll be assigned to a new copy of their original master component.</p><p><br></p><p>You can also just make a clone of a component.</p><p><br></p><p>Now you can keep the text, images, and other variations in your instances without having to repeat yourself.</p>","id":"736564662640346811","installCount":39722,"lastUpdateDate":"2020-02-21T08:48:59.656Z","likeCount":312,"name":"Component Cloner","publisherHandle":"sagemiller","publisherId":"424801","publisherName":"Sage Miller","runCount":19878,"viewCount":26359},{"description":"Add emojis seamlessly onto your designs.\n\nSimply select the emoji you want and Figmoji will add the svg of the selected emoji.\n\nCurrently supporting only Twitter Emojis (https://github.com/twitter/twemoji).\n\nFuture roadmap:\n[x] Supporting different skin tones\n[  ] Different emoji styles (Apple, Android etc)\n\nThis plugin is open sourced:\nhttps://github.com/nitinrgupta/figmoji\n\nIf you have any issues or suggetions, hit me up on twitter(@nitinrgupta) or create an issue here: https://github.com/nitinrgupta/figmoji/issues","id":"736612173445813953","installCount":121911,"lastUpdateDate":"2020-01-24T20:23:59.727Z","likeCount":720,"name":"Figmoji","publisherHandle":"nitin","publisherId":"21180","publisherName":"Nitin Gupta","runCount":90768,"viewCount":104754},{"description":"Create a bar chart, scatter plot, or line chart easily with your own data! Or use a random set of data to quickly create shapes or dummy data (for example, sparklines for a dashboard mockup).\n\nWhen you upload your own data (CSV or JSON file), we'll grab any numeric keys and allow you to choose one for each relevant dimensions.\n\nFeel free to send me requests & feedback.","id":"736737028247625415","installCount":51042,"lastUpdateDate":"2022-02-01T02:17:08.457Z","likeCount":350,"name":"Datavizer","publisherHandle":"wattenberger","publisherId":"124411","publisherName":"Amelia Wattenberger 👋","runCount":39167,"viewCount":49134},{"description":"<p>Design with data from apps like Spotify, Wikipedia or your own custom data with this plugin. This plugin works with Coda, a tool for making documents. Simply create a table in Coda, and use the plugin to fill your designs with content from the tables.</p><p><br></p><p>→ To use this plugin</p><p>1. Create a Coda doc with a table in it, or use the example doc that's provided. The example doc already has data for you to get started with.</p><p>2. Fill individual layers by selecting the layer you want to change, and then select the relevant column in the plugin selector.</p><p>3. Group layers, or create a component, to keep related info together.</p><p>4. Select an entire frame or multiple groups to update all of the layers at once.</p><p><br></p><p>→ Live Data</p><p>To pull live data into your Figma designs, create a Packs Table in Coda. Using Packs you can pull in data from Wikipedia, Spotify, Intercom and more. Once you've set up your table, you can connect your design to that table and watch it fill up with real data.</p><p><br></p><p>→ Custom Data</p><p>To pull custom data into your Figma docs, create a Table in Coda. You can enter text, image URLs, formulas, and more. Then, connect your layers to that table, and watch your designs fill up with your own data.</p><p><br></p><p>See more info here: <a href=\"https://coda.io/d/Example-data-doc_dFOHtXx4pnz\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">https://coda.io/d/Example-data-doc_dFOHtXx4pnz</a></p>","id":"738264841927149297","installCount":16365,"lastUpdateDate":"2021-07-23T21:22:37.800Z","likeCount":373,"name":"Coda for Figma","publisherHandle":"carlo","publisherId":"1688149","publisherName":"Carlo Jörges","runCount":9044,"viewCount":27137},{"description":"<p>Insert beautiful images from Unsplash straight into your designs.</p><p><br></p><p>The <a href=\"https://unsplash.com/license\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Unsplash License</a> allows images to be used freely for both commercial and personal projects.</p><p><br></p><p>Learn more about Unsplash at <a href=\"https://unsplash.com/about\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://unsplash.com/about</a></p>","id":"738454987945972471","installCount":1192254,"lastUpdateDate":"2022-05-19T17:04:08.552Z","likeCount":4459,"name":"Unsplash","publisherHandle":"unsplash","publisherId":"1942533","publisherName":"Unsplash","runCount":986664,"viewCount":490929},{"description":"Design Inspo for Figma\n\nThe best way to quickly look for design inspiration while you work. Search with text and colour to get quick inspiration and colour palettes from across the web without ever leaving your artboard. \n\n🎨  Add colour palettes from images to your Figma files as swatches or local styles.\n\nTo use the colour picker:\nToggle the colour picker in the menu and select something on your artboard, the plugin takes either the fill or background colours of your elements.\n\nRoadmap:\n☑️ Convert image palette to local styles\n☑️ Draggable images\n⬜️ Bookmark items\n\nAnything you want to see? Contact me on the support email and let's chat. 🤘","id":"738775292786594626","installCount":7970,"lastUpdateDate":"2019-08-17T17:17:05.125Z","likeCount":88,"name":"Design Inspo","publisherHandle":"jamie","publisherId":"538235","publisherName":"Jamie Carr","runCount":3114,"viewCount":8277},{"description":"<p>Create numbered lists easily.</p><p><br></p><p>Usage instructions: select some text layers then go to the menu &gt; \"plugins\" &gt; \"Add numbers to texts\".</p><p><br></p><p>Featuring:</p><p>* Numbers</p><p>* Alphabetical numbering</p><p>* Roman numerals</p><p>* Re-use current text</p><p>* Numbering direction: bottom to top, top to bottom, left to right, right to left</p><p><br></p><p>Advanced usage:</p><p>* Type $nnn (multiple n's) to zero-pad the number</p><p>* Sequences of custom text</p><p>* Math expressions</p><p>- Use <code>n</code> for the number of the text</p><p>- Use round(random(10)) for a random number</p>","id":"738791203005929386","installCount":10747,"lastUpdateDate":"2021-12-13T08:50:05.013Z","likeCount":84,"name":"Add numbers to texts","publisherHandle":"37185","publisherId":"37185","publisherName":"Simon Epskamp","runCount":7380,"viewCount":10704},{"description":"<p>Generate styles and other cool stuff straight out of your tailwind config file? This plugin already supports adding your color styles and has more features coming up in the future ~</p><p><br></p><p>Usage:</p><p><br></p><p>Method 1 - Use the default values:</p><p>- Press \"Load default\" (next to \"Add Styles\")</p><p><br></p><p>Method 2 - Generate a resolved config:</p><p>- Navigate to your tailwind project</p><p>- Run npx <a href=\"http://tailwind.json\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">tailwind.json</a></p><p>- Grab the generated <a href=\"http://tailwind.json\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">tailwind.json</a></p><p><br></p><p>If you have any other issue or suggestion please make an issue :)</p><p><br></p><p><a href=\"https://github.com/ecklf/tailwindcss-figma-plugin\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">https://github.com/ecklf/tailwindcss-figma-plugin</a></p><p><br></p><p>Made with React, Tailwind CSS and ❤️</p>","id":"738806869514947558","installCount":17431,"lastUpdateDate":"2021-01-08T15:12:14.744Z","likeCount":240,"name":"Tailwind CSS","publisherHandle":"ecklf","publisherId":"886198","publisherName":"Florentin Eckl","runCount":10972,"viewCount":29449},{"description":"Spellchecker uses the Yandex API.Speller helps to find and correct spelling errors in Russian, Ukrainian or English text. Language speller models include hundreds of millions of words and phrases.\n\nThe plugin checks the selected text layer for spelling errors and offers to correct them.\n\nImportant. It is recommended to work with small texts.","id":"738839069237725273","installCount":68666,"lastUpdateDate":"2022-06-15T19:19:46.879Z","likeCount":345,"name":"Spellchecker","publisherHandle":"dremchee","publisherId":"38935","publisherName":"Vladimir","runCount":49848,"viewCount":44146},{"description":"Invert backgrounds, fills, strokes & effects colors. Apply change to multiple selected shapes, texts, frames etc.","id":"738840049488759901","installCount":20244,"lastUpdateDate":"2019-11-23T22:19:43.101Z","likeCount":53,"name":"Invert Color","publisherHandle":"934220","publisherId":"934220","publisherName":"Jakub Biesiada","runCount":17219,"viewCount":27532},{"description":"<p><strong>Replace all your font styles with just a few clicks.</strong></p><p><strong>Select your text layers &amp; run the plugin.</strong></p><p><br></p><p>How to use?</p><ol><li>Select your text layers (e.g. with cmd + a)</li><li>Launch the Font Replacer Plugin.</li><li>Choose which of the existing font families and font styles you want to replace with the new font.</li></ol><p><br></p><p><em>Font Replacer is a premium Figma plugin with a limit of 5 free replacements per Figma file.</em></p><p><a href=\"https://kristinbaumann.gumroad.com/l/figma-plugin-font-replacer\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\"><strong>Get a license to unlock unlimited replacements for just $5 →</strong></a></p><h2><br></h2><p>----</p><p><br></p><p>The plugin gives you an overview of your used font families and styles. Then you can easily try out a new font in your existing designs. This comes in handy when you’re doing a big re-design, don’t want to loose track of your fonts and see how this awesome new font might spice up your design.</p>","id":"738840446766071906","installCount":65693,"lastUpdateDate":"2022-07-22T11:32:32.323Z","likeCount":359,"name":"Font Replacer","publisherHandle":"kristin_baumann","publisherId":"499787","publisherName":"Kristin Baumann","runCount":59408,"viewCount":69959},{"description":"This plugin will reverse the order of the selected layers.\n\nSelect 2 or more layers within the same parent and run the plugin.","id":"738853407874474111","installCount":8105,"lastUpdateDate":"2019-08-20T06:37:05.635Z","likeCount":61,"name":"Reverse Layer Order","publisherHandle":"mike","publisherId":"601807","publisherName":"Mike Gowen","runCount":4014,"viewCount":5532},{"description":"<p>Based on our&nbsp;<a href=\"https://chrome.google.com/webstore/detail/shift-click-image-extract/aonflkdebcjkiimklgpgkclmjohclbbf\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">Chrome extension</a>, Shift Click allows you to extract parts of your Figma files and create sharable images for others to see. It's as simple as that.</p><p><br></p><p>Be prepared to save a Shiftload of time.</p>","id":"738857018732966026","installCount":208,"lastUpdateDate":"2020-11-27T20:04:06.236Z","likeCount":3,"name":"Shift Click","publisherHandle":"c248dea9_2e24_4","publisherId":"917795288798177947","publisherName":"Deux Huit Huit","runCount":202,"viewCount":730},{"description":"Archiving frames within a design lifecycle is good practice to ensure that design assets are not lost, while also not getting in the way of current work.\n\nArchiver is the best way to quickly and seamlessly archive frames in Figma.\n\nSimply select all the frames and layers you'd like to archive, run the plugin, and Archiver will create an 'Archive' page containing all the selected work, along with newly added time stamps.","id":"738907708841687244","installCount":3987,"lastUpdateDate":"2019-08-09T04:24:57.036Z","likeCount":46,"name":"Archiver","publisherHandle":"devraj","publisherId":"1066534","publisherName":"Dev Mukherjee","runCount":1873,"viewCount":3909},{"description":"<p>Figma plugin to copy &amp; paste plain text (without text styles) from selected layers.</p><p><br></p><p># Usage</p><p>## Copy Text</p><p>Select the Text Objects you want to copy and run `Copy Text`.</p><p>And then copied texts to clipboard.</p><p>(Not support selected range of text)</p><p><br></p><p>## Paste Text</p><p>Select the Text Objects you want to paste and run `Paste Text`</p><p>If you want to paste in cursor position, you should run default paste (⌘V) with unformmated text (you will get it with `Copy Text` plugin command !!).</p><p><br></p><p># Keyboard Shortcut (for Mac Desktop App)</p><p>About keyboard shortcut setting is wrriten on github repository: <a href=\"https://github.com/kudakurage/figma-copy-and-paste-text\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">https://github.com/kudakurage/figma-copy-and-paste-text</a></p><p><br></p><p># Supported Object</p><p>- Text</p><p>- Group</p><p>- Frame</p><p>- Component</p><p>- Instance</p><p><br></p><p># Issues</p><p>I know that plugin command doesn't work on browser app. (under consideration how to fix..)</p>","id":"738916553283875028","installCount":6457,"lastUpdateDate":"2021-11-09T02:24:44.522Z","likeCount":39,"name":"Copy and Paste Text","publisherHandle":"kudakurage","publisherId":"1050175","publisherName":"Kaz Motoyama @kudakurage","runCount":4165,"viewCount":13807},{"description":"<p>Remove the background of images automatically with just a single click - using the <a href=\"http://remove.bg\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">remove.bg</a> API.</p><p>Note: You will need a <a href=\"http://remove.bg\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">remove.bg</a> account for this plugin.</p>","id":"738992712906748191","installCount":511761,"lastUpdateDate":"2022-05-10T17:03:37.342Z","likeCount":2553,"name":"Remove BG","publisherHandle":"a","publisherId":"1951744","publisherName":"Aaron Iker","runCount":410159,"viewCount":369748},{"description":"Inverts your selection within the context of the parent group/frame. \n\nCurrently, Figma's Select Inverse command selects all objects, even those outside of a group. Select Inverse for Real lets you achieve the same result but stops at your parent group or frame. \n\nℹ How to use: \n\nSelect one or more objects.\nRun \"Select Inverse for Real\" command.\n\nIn the future, Figma will allow custom keyboard shortcuts for plugins to make this a menu-free experience, so watch for updates! :)","id":"739031302880873832","installCount":2091,"lastUpdateDate":"2020-01-20T02:35:14.756Z","likeCount":12,"name":"Select Inverse for Real","publisherHandle":"Telos","publisherId":"1515","publisherName":"Telos Corporation","runCount":435,"viewCount":1469},{"description":"Change line height based on the Golden Ratio. Just select one or more text layers. \n\nThe formula uses the width of the text layer, the font size, and the Golden Ratio: 1.6180.","id":"739046186899657111","installCount":7892,"lastUpdateDate":"2020-05-16T11:15:55.705Z","likeCount":66,"name":"Golden Line","publisherHandle":"yarikbright","publisherId":"59319","publisherName":"Yarik Bright","runCount":4932,"viewCount":6606},{"description":"<p>Easy way to split your text/list into small text pieces.</p><p><br></p><p>- Smart Split (horizontally and vertically)</p><p>- Split with symbols or regex</p><p>- Split to columns (Use 2 line-breakers to split column)</p><p>- Split word</p><p>- Group by alphabet</p><p>- Keep styles after text splitting</p><p>- Remove duplicates / Sort / Reverse / Shuffle</p><p>- Re-join them back</p><p>- Wrap into Auto layout</p><p><br></p><p>Feel free to contact me to offer your idea for the plugins.</p><p><br></p><p>We ❤️ Figma</p>","id":"739048247603902878","installCount":41794,"lastUpdateDate":"2022-03-05T02:14:55.869Z","likeCount":451,"name":"Nisa Text","publisherHandle":"gigantz","publisherId":"1405","publisherName":"Orkhan Jafarov 🦄","runCount":27459,"viewCount":31568},{"description":"To use:\n1. Add to the layer's or folder's name \"~visibility\" in the layer panel. Make sure \"~visibility\" is all lowercase as the plugin is case sensitive.\n2. Launch the plugin\n\nThe plugin will hide the layer or folder if it is visible and vice versa.","id":"739089407370404321","installCount":2298,"lastUpdateDate":"2020-04-23T21:29:59.108Z","likeCount":21,"name":"Visibility","publisherHandle":"egor","publisherId":"165656","publisherName":"Egor","runCount":699,"viewCount":2416},{"description":"Plugin for automating formatting of page names, frames, components, layers, etc. Enjoy it!\n\nIgnores name patterns:\n[number]-[name]-[...]\n[name or number]-[name or number]-[...]\n\n> 01-name\n> 375-frame-name\n> layer-name","id":"739106292828562948","installCount":4318,"lastUpdateDate":"2019-08-15T18:50:47.002Z","likeCount":61,"name":"namespaces","publisherHandle":"npi","publisherId":"136767","publisherName":"Pavel Neznanov","runCount":2267,"viewCount":6345},{"description":"Resize icons into a standard size and bounding box on your design. It's much easier to work when all your icons are the same size and have a square bounding box.\n\nSelect one or more frames, and set the icon and bounding box size. That's it!","id":"739117729229117975","installCount":34501,"lastUpdateDate":"2020-04-14T17:09:40.746Z","likeCount":246,"name":"Icon Resizer","publisherHandle":"arbel","publisherId":"121591","publisherName":"Idan Arbel","runCount":18519,"viewCount":19912},{"description":"<p>TextCutter is a lightweight plugin for Figma to split or join text layers.</p><p><br></p><p>This plugin avoids the manual splitting of text layers and makes you work faster.</p><p><br></p><p>There are two commands in the plugin:</p><p><br></p><ul><li>Split text</li><li>Join text</li></ul><p><br></p><p>There is no UI, you simply run the commands to have a smooth workflow.</p><p><br></p><p><strong>How to use Split text</strong></p><p><br></p><ul><li>Select a text layer with multiple lines of text</li><li>Run the plugin</li><li>Your results (new layers) will appear on your current page in the same spot</li></ul><p><br></p><p><strong>How to use Join text</strong></p><p><br></p><ul><li>Select multiple text layers (that are underneath each other)</li><li>Run the plugin</li><li>Your results (a merged layer) will appear on the page in the same spot</li></ul><p><br></p><p><strong>A tip</strong></p><p><br></p><p>It is handy to assign both commands to hotkeys and use it along with OCR software that helps extract texts from images, such as <a href=\"https://textsniper.app/\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">TextSniper</a>.</p><p><br></p>","id":"739131137116544548","installCount":9290,"lastUpdateDate":"2021-03-01T08:11:00.448Z","likeCount":108,"name":"TextCutter","publisherHandle":"wolfr","publisherId":"12832","publisherName":"Johan Ronsse","runCount":5988,"viewCount":8166},{"description":"A simple way to display your designs inside a variety of mobile devices and share them with anyone in the world.\n\nSimple steps:\n1) Select your layer\n2) Pick a device (Optional)\n3) Click the \"Share\" button\n\nShare your link with anyone in the world.\n\nOther features:\n- Your link will stay up for you to share a different layer.\n- Your image will not change if you switch to a different device.\n\nNote: Shared content stays available for 24 hours unless you change a link.","id":"739156579990080072","installCount":2931,"lastUpdateDate":"2019-10-29T20:49:03.869Z","likeCount":21,"name":"Display by WeScreen","publisherHandle":"57711","publisherId":"57711","publisherName":"WeScreen LLC","runCount":1975,"viewCount":3820},{"description":"<p>Change all visible unlocked text layers in selection to a new value in one go with this plugin</p><p><br></p><p>1. Select one or several text layers</p><p>2. Call the plugin</p><p>3. Paste or type a new value</p><p>4. Hit enter. Done!</p><p><br></p><p>• Plugin will change ALL nested text layers in selected groups, Components, Instances or Frames</p><p><br></p><p>• If all selected layers already have the same value, it will appear in the placeholder (handy for correcting typos)</p><p><br></p><p>• Input is preselected, so you can call the plugin and type right away</p><p><br></p><p>• Block some layers from changing by staring the layer name with minus sign</p><p><br></p><p>See demo and some details on working with plugins faster here: <a href=\"https://twitter.com/aswellasyouare/status/1161070905142984704\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">https://twitter.com/aswellasyouare/status/1161070905142984704</a></p>","id":"739192358533401183","installCount":3955,"lastUpdateDate":"2021-11-20T15:08:54.425Z","likeCount":41,"name":"Bunch Text Changer","publisherHandle":"vadim","publisherId":"779","publisherName":"Vadim Pleshkov","runCount":2902,"viewCount":5056},{"description":"<p>Create organic blob shapes with the click of a button. Every shape that is generated is unique to the last. You can control how unique a shape is along with how many points it has.</p><p><br></p><p>Shapes are created using SVG, so you get those oh-so-sweet bézier curves.</p>","id":"739208439270091369","installCount":363236,"lastUpdateDate":"2022-01-17T02:30:38.387Z","likeCount":2042,"name":"Blobs","publisherHandle":"dylanfeltus","publisherId":"210523","publisherName":"Dylan Feltus","runCount":296527,"viewCount":199484},{"description":"<p>Aspects is a little plugin that helps resize selected elements to fit a certain aspect ratio. This plugin is mostly designed for images, but works with any type of layer.</p><p><br></p><h2>USAGE</h2><p><br></p><ol><li>Select one or more layers and launch the Aspects plugin.</li><li>In the dialog box, type your desired aspect ratio.</li><li>Select which property you want changed to match the aspect ratio.</li><li>Click \"Apply\" to apply the resizing.</li></ol><p><br></p><h2>EXAMPLE</h2><p><br></p><ol><li>Let's imagine we have an image layer with the following dimensions: 160px by 160px.</li><li>In the “Aspect ratio” form field, type 16 and 9.</li><li>Select the height as the property to change.</li><li>Clicking \"Apply\" will resize the image's height to 90px.</li></ol><p><br></p><h2>THANK YOU!</h2><p><br></p><p>If you have any questions, feedback or anything Figma related, please reach us on Twitter <a href=\"http://twitter.com/intudio\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">@intudio</a> or shoot us an email at <a href=\"mailto:hello@intud.io\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">hello@intud.io</a>.</p>","id":"739222456238688882","installCount":10037,"lastUpdateDate":"2020-09-18T04:30:59.977Z","likeCount":107,"name":"Aspects","publisherHandle":"cosmin","publisherId":"29693","publisherName":"Cosmin Negoita","runCount":6502,"viewCount":9218},{"description":"<p>Create bulk color styles from selection. Simply select any objects that have a fill color, run the plugin, and it will generate the color styles for you automatically.</p><p><br></p><p>The color style name will be the same as your layer name. You can also add a \"/\" in your layer name to create color style groups. Styles will be sorted in from largest to smallest.</p>","id":"739237058450529919","installCount":30585,"lastUpdateDate":"2021-12-14T22:46:57.187Z","likeCount":343,"name":"Chroma Colors","publisherHandle":"miguel","publisherId":"39140","publisherName":"Miguel Solorio","runCount":25714,"viewCount":28876},{"description":"Guide Mate is a Figma plugin which helps you add complex guides to your design with ease. A great companion for grid based design systems. \n\nUsage:\n- Select a frame, group or shape.\n- Open Guide Mate from the plugin menu.\n- Click one of the icon in the shortcut panel on the top to add left, right, top, bottom or midpoint guides.\n- Enter details in the form and click on \"Add Guides\" to generate custom guides.\n\nMore information can be found at https://github.com/praneshr/guidemate\n\nLimitations:\n- At least one frame or group or shape should be selected while using the plugin\n- Multi selection is not supported. Instead, you can group the items and use the plugin\n- Any selected items should be inside a frame. Page level guides are not supported yet.\n\nPlease report any bug in the provided support url.","id":"739342962452731553","installCount":10478,"lastUpdateDate":"2019-08-06T14:00:39.961Z","likeCount":122,"name":"Guide Mate","publisherHandle":"837388","publisherId":"837388","publisherName":"Pranesh Ravi","runCount":7465,"viewCount":11425},{"description":"<h2>Figma Icon Automation Plugin</h2><p><br></p><p>Figma Icon Automation is a plugin that can help you convert your icons' SVG code to React component code and publish to NPM. It should be used with Github Actions and NPM.</p><p><br></p><h2>Requirements and limitations</h2><ul><li>need some development knowledge</li><li>a GitHub account.</li><li>a NPM account.</li><li>only works for React, I'm working on Vue</li></ul><p><br></p><h2>How it works?</h2><p>There are six steps here:</p><p><br></p><ul><li>Create Components: At first, you should create a file which contains your icons' components (this workflow only fetch components).</li><li>Create Pull Request in Plugin: Fill in the GitHub repository URL and token to push your updates to GitHub, which can create a Pull Request for you.</li><li>Merge PR, Trigger Actions: Now you can merge this PR, which will trigger the GitHub Actions workflow.</li><li>Process and Convert SVG code: GitHub Actions will fetch Figma components's SVG code through Figma's API and process it. After it, GitHub Actions will convert them into React component code.</li><li>Publish to NPM: Finally, it'll publish processed code to NPM.</li><li>Install or update from NPM: Developers can use them through terminal execution, which is familiar to them.</li></ul><p><br></p><h2>Usage</h2><p>For more details and docs you can visit <a href=\"https://github.com/leadream/figma-icon-automation.\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://github.com/leadream/figma-icon-automation</a></p><p>support: <a href=\"https://github.com/leadream/figma-icon-automation/issues\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://github.com/leadream/figma-icon-automation/issues</a></p>","id":"739395588962138807","installCount":4912,"lastUpdateDate":"2020-06-21T09:23:02.720Z","likeCount":97,"name":"figma-icon-automation","publisherHandle":"leadream","publisherId":"39","publisherName":"Hal Lee","runCount":3055,"viewCount":9763},{"description":"<p>The&nbsp;plugin&nbsp;generates&nbsp;shades,&nbsp;tints,&nbsp;and&nbsp;color&nbsp;harmonies&nbsp;based&nbsp;on&nbsp;select&nbsp;layers&nbsp;or&nbsp;local&nbsp;styles.&nbsp;You&nbsp;can&nbsp;also&nbsp;create&nbsp;a&nbsp;stepped&nbsp;gradient&nbsp;between&nbsp;two&nbsp;colors.</p><p><br></p><p>Main&nbsp;Features:</p><p>Generate&nbsp;tints,&nbsp;shades,&nbsp;and&nbsp;color&nbsp;harmonies</p><p>The&nbsp;plugin&nbsp;is&nbsp;integrated&nbsp;with&nbsp;user&nbsp;selection&nbsp;and&nbsp;local&nbsp;&nbsp;styles</p><p>Gradient&nbsp;Generator</p><p>Easy&nbsp;to&nbsp;use</p><p>The&nbsp;plugin&nbsp;support&nbsp;only&nbsp;solid&nbsp;fills.</p><p><br></p><p>Source Code: <a href=\"https://github.com/cyanpix/Colordesigner-Figma\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">https://github.com/cyanpix/Colordesigner-Figma</a></p><p><br></p><p>Note:</p><p>Do&nbsp;Not&nbsp;try&nbsp;to&nbsp;select&nbsp;too&nbsp;many&nbsp;layers.&nbsp;It&nbsp;may&nbsp;freeze&nbsp;Figma.</p>","id":"739475857305927370","installCount":48860,"lastUpdateDate":"2021-05-26T12:25:50.135Z","likeCount":434,"name":"Color Designer","publisherHandle":"wojeciech_banas","publisherId":"86703","publisherName":"Wojciech Banaś","runCount":37370,"viewCount":46817},{"description":"<p>Easily swap two selected objects.</p><p><br></p><p>- Swap any objects. Frames, groups, layers, whatever</p><p>- Keeps the original size of objects and their position</p><p>- Works with nested objects</p><p><br></p><p>How to use:</p><p><br></p><p>1. Select two objects</p><p>2. Use the plugin</p><p><br></p><p>Please feel free to suggest features to <a href=\"mailto:shevenionov@gmail.com.\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">shevenionov@gmail.com.</a> Peace!</p>","id":"739493471028643540","installCount":11008,"lastUpdateDate":"2021-01-31T18:41:39.708Z","likeCount":98,"name":"Swap","publisherHandle":"alexdsgn","publisherId":"53451","publisherName":"Alex","runCount":7359,"viewCount":9724},{"description":"<p>This plugin brings the amazing illustations library called Humaaans by Pablo Stanley to Figma.</p><p>With Humaaans you can either use the already premade people illustrations or mix-&amp;-match illustrations to create your own unique work.</p><p><br></p><p>— Other plugins by @tkmadeit</p><p><br></p><p><a href=\"https://www.figma.com/c/plugin/754026612866636376/SPELLL---Spell-Checking-for-Figma\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Spell checker for Figma &amp; Figjam</a></p>","id":"739503328703046360","installCount":191386,"lastUpdateDate":"2020-01-19T21:21:10.444Z","likeCount":1052,"name":"Humaaans for Figma","publisherHandle":"tkmadeit","publisherId":"156890","publisherName":"Tekeste Kidanu","runCount":132365,"viewCount":117659},{"description":"<p>Highlight text by adding the cool substrate with this simple plugin!</p><p><br></p><p>⚒ To create a substrate.</p><p>1. Select one or more text nodes;</p><p>2. Click \"Create.\"</p><p><br></p><p>⟳ To update a substrate.</p><p>1. Select one or more substrates (or their nodes);</p><p>2. Click \"Update.\"</p><p><br></p><p>× To remove a substrate.</p><p>1. Select one or more substrates;</p><p>2. Click \"Remove\". ⚠ The text node will be saved!</p><p><br></p><p>Life hack.</p><p>They created a substrate and decided to change the text -&gt; changed the text -&gt; updated the substrate.</p><p>I would like to correct a little more -&gt; we enter the text, periodically clicking on Ctrl + Alt + P (runs the last command, that is, the substrate update).</p><p><br></p><p>✅ Settings</p><p>With the help of \"Settings\" you can customize the substrates.</p><p>1. Color. From several colors random will be chosen.</p><p>2. Padding. The space around the line of text.</p><p>3. Base letter. The symbol on the basis of which the base of the substrate is built.</p><p>4. Corner radius and Smoothing.</p>","id":"739517744595900126","installCount":10505,"lastUpdateDate":"2022-03-24T13:58:03.443Z","likeCount":164,"name":"Substrate for text","publisherHandle":"Andreslav","publisherId":"629","publisherName":"Andreslav Kozlov","runCount":7768,"viewCount":21286},{"description":"Use Notepad to add a place for notes to your Figma documents. Jot down todos, ideas, research, meeting notes, and other bits of information relevant to your design work.\n\nNotes are automatically saved with your documents and accessible wherever you use Figma. And like your Figma documents, your Notepad notes too are accessible by other editors. So you can use Notepad as a shared space for documenting your project with your team.\n\n(Please keep in mind that changes made by other editors do not appear live while you have Notepad open. You will need to reopen Notepad to see their changes.)","id":"739527655081183968","installCount":19668,"lastUpdateDate":"2020-01-31T20:55:50.559Z","likeCount":139,"name":"Notepad","publisherHandle":"dustin","publisherId":"1206807","publisherName":"Dustin Mierau","runCount":14648,"viewCount":16867},{"description":"An easy way to find and apply color styles from your current document. Navigator will look through all of the layers in your document and find the ones with color styles. Simply select the layer that you want to apply a color styles to, run Navigator, find your color and select it. You can apply a color style to any vector, text, line, frame or group.\n\nNote: If you have a large amount of layers in your document, it might take a few seconds longer to load.\n\nYou can use this in conjunction with Chroma or Kaleidocode to create your styles and can keep those frames hidden. Due to limitations with the Figma API, we can only find styles that are on the canvas.","id":"739558587628004077","installCount":3989,"lastUpdateDate":"2019-11-08T17:12:55.336Z","likeCount":18,"name":"Navigator","publisherHandle":"miguel","publisherId":"39140","publisherName":"Miguel Solorio","runCount":1880,"viewCount":3767},{"description":"Add random user avatars to your designs with one click!\n\nSelect any type of element and run the plugin. It will fetch an avatar image and add it as a fill on your selected element.\n\nYou can also run the plugin without anything selected and it will add an element with an avatar.\n\nImages are aggregated by UIfaces.co from various sources including randomuser.me, tinyfac.es, imdb.com, donated images, and other sources.","id":"739659977030056719","installCount":229214,"lastUpdateDate":"2019-08-23T23:47:13.943Z","likeCount":657,"name":"Avatars","publisherHandle":"dylanfeltus","publisherId":"210523","publisherName":"Dylan Feltus","runCount":168059,"viewCount":110513},{"description":"Icon Zone helps create a square slice around your icons what is perfect center of the vectors or the group you selected. At the same times the slice will be ready to export as SVGs .\n\n🤔 How to use?\n\n- Select the vectors what is belong to the one icon and trigger the IconZone.\n- Or select the group what contain the vectors and trigger the IconZone.","id":"739711077384375064","installCount":4852,"lastUpdateDate":"2020-03-14T07:44:39.709Z","likeCount":27,"name":"Icon Zone","publisherHandle":"ziven27","publisherId":"846873","publisherName":"ziven27","runCount":3597,"viewCount":4314},{"description":"Flip RTL languages like hebrew and arabic.\nCan deal with mixed content and will adjust font and textbox size so you can understand wrapping.\n\nInstructions:\n\n1. Select a text layer\n2. Run the plugin\n3. Edit the text, text will change as you type\n**** new *****\n4. You can select any other text field on stage and edit it as you wish. \n5. If you resize the field, the text will keep its original wrapping. use the refresh button to sort the wrapping again\n\nHave fun. Hopefully this will get Figma to support this from the properties window....","id":"739739050044773150","installCount":14892,"lastUpdateDate":"2020-05-03T13:58:17.207Z","likeCount":68,"name":"RTL support","publisherHandle":"189493","publisherId":"189493","publisherName":"Red Interactive","runCount":13078,"viewCount":18296},{"description":"Simply generates a rectangle layer with the gradient selected. \nHave fun! ✌️\n\nP.S. The gradient library is always kept in sync with uigradients.com","id":"739800909357948721","installCount":12528,"lastUpdateDate":"2019-08-06T23:24:32.608Z","likeCount":24,"name":"GradientiMe","publisherHandle":"simonesalvucci_","publisherId":"1823970","publisherName":"Simone Salvucci","runCount":9078,"viewCount":9761},{"description":"<p>Quickly generate a simple typescale/modular scale.</p><p>This is an very early version.</p><p><br></p><p># What is a modular scale?</p><p><br></p><p>A modular scale in Typography is used to generate a visual rhythm in font sizes. This plugin helps to generate those sizes. Starting with a base-value, font-size increments and decrements from that size with a multiplier you set.</p><p><br></p><p># What can I do here?</p><p><br></p><p>This plugin lets you generate a modular scale. At this stage it’s fairly basic. Functions as you also could know them from websites about this topic.</p><p><br></p><p>1. Set a base-size</p><p>2. Set a multiplier</p><p>3. Set how many sizes you want above and below the base-size</p><p>4. Decide to round or not to round values. An addition many alternatives currently miss.</p>","id":"739825414752646970","installCount":33054,"lastUpdateDate":"2022-05-16T10:18:11.956Z","likeCount":583,"name":"Typescales","publisherHandle":"marvin","publisherId":"416341","publisherName":"Marvin Bruns","runCount":29442,"viewCount":33120},{"description":"<p>A plugin for easy measurement of sizes. The simple user interface allows you to add easily redlines for heights and widths, fill spaces, measure distances between elements and more.</p><p><br></p><h2>How to use?</h2><p>Click on the \"How?\" menu item in the upper right corner for more instructions.</p>","id":"739918456607459153","installCount":63700,"lastUpdateDate":"2022-04-23T10:21:37.490Z","likeCount":916,"name":"Measure","publisherHandle":"p","publisherId":"791757","publisherName":"Phil","runCount":52081,"viewCount":81763},{"description":"<p>Well... Like the name suggests, Better Font Picker helps you select fonts with a preview of how it looks.</p><p><br></p><p>Now you can skim through all those 1000s of fonts installed seamlessly as an alternative to the default font picker in figma!</p><p><br></p><p>Note: Better Font Picker shows ONLY the list of installed fonts in your system.</p><p><br></p><p>Roadmap:</p><p>- [ ] Add to favourites</p><p><br></p><p>This plugin is open sourced!</p><p>If you find any issues or have some ideas for this plugin, please hit me up on twitter(@nitinrgupta) or create an issue in github - <a href=\"https://github.com/nitinrgupta/figma-better-font-picker/issues\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://github.com/nitinrgupta/figma-better-font-picker/issues</a></p>","id":"739922281164562258","installCount":269157,"lastUpdateDate":"2020-03-19T02:34:17.119Z","likeCount":2006,"name":"Better Font Picker","publisherHandle":"nitin","publisherId":"21180","publisherName":"Nitin Gupta","runCount":194001,"viewCount":194546},{"description":"Get It helps in building Figma plugins by letting you prototype pieces of your plugin in Figma and copy their verbose syntax to your clipboard. \n\nWant to get the fill syntax for a hex value or a complex gradient to use in your plugin? Select a node with the fill you want and run `Get It > Get Fills` and you now have a usable fill syntax in your clipboard.\n\nWriting a complex drop shadow in your plugin? Quickly build it in Figma and run `Get It > Get Effects` and you have you’ll have the full effect syntax in your clipboard\n\nDon’t know the exact font name for the font you want to load? Create a text node and assign the font you want then run `Get It > Get Font` and, you guessed it, the correct font name syntax will be in your clipboard. \n\nCreating a layout grid within your plugin? Do it visually in Figma and run Get It > Get Layout Grid.  💥 Layout grid syntax in your clipboard.\n\nWhat you can currently get for a selected node:\n\n- Fills\n- Strokes\n- Effects\n- Font Name\n- Text Styles\n- Dimensions\n- Offsets\n- Layout Grids\n- Constraints\n\nNote: The selected node must have the property set on it to get it, for example, a rectangle node will not return a font name.","id":"739958206151827292","installCount":1954,"lastUpdateDate":"2019-08-06T23:41:10.894Z","likeCount":16,"name":"Get It","publisherHandle":"jhardy","publisherId":"194293","publisherName":"Jared","runCount":526,"viewCount":1514},{"description":"<p>A simple plugin to search for layers in your document. The plugin will select the layers containing your text and zoom to fit them. Great for maneuvering a large file with many page frames. Includes the ability to use regex and be case sensitive.</p>","id":"739978920241977182","installCount":27616,"lastUpdateDate":"2021-03-16T22:13:09.529Z","likeCount":264,"name":"Find / Focus","publisherHandle":"DanielNice","publisherId":"211630","publisherName":"Daniel Nice","runCount":23799,"viewCount":37450},{"description":"<p><strong>This feature has been integrated in the latest version</strong></p><p>see: <a href=\"https://help.figma.com/hc/en-us/articles/360049283914#individual\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">individual strokes</a></p><p><br></p><p>---</p><p><br></p><p>Quickly add single borders in Frame.</p><p><br></p><p>Usage:</p><p>1. Open 'Border' from the plugin menu.</p><p>2. Select one or more frames.</p><p>3. Click button to toggle borders.</p>","id":"740014625507871586","installCount":41252,"lastUpdateDate":"2022-05-23T10:05:18.022Z","likeCount":197,"name":"Border","publisherHandle":"203x","publisherId":"51515","publisherName":"203X","runCount":35240,"viewCount":81875},{"description":"This plugin contains a couple of tools that enpower you to fill your design with random dates, IDs, numbers, Chinese names or English names. It also includes a color palette and a mirror that connects an image to a certain frame.\n\n## Use Mirror Tool\n\nThis tool is useful to draw an interaction flow that won't mess up your original layer structure.\n\n1. Open the plugin\n2. Select a Rectangle layer\n3. Type in the name of an exsiting frame\n4. It will use the exported png of the frame to fill the rectangle layer.\n\n---\n\n## Use Table Tool\n\nThe table generator requires you to have [PingFang SC] & [Inter] fonts installed or it might not work well.\n\n1. Select a Rectangle layer as the placeholder of the output table\n2. Open the plugin\n3. Choose table\n4. Fill in the content\n5. Click \"Generate\"","id":"740040684939274087","installCount":3672,"lastUpdateDate":"2019-08-25T05:08:31.023Z","likeCount":31,"name":"Powerful Tools","publisherHandle":"yujie","publisherId":"870878","publisherName":"Yujie Li [UED-TikTok-UX China]","runCount":1757,"viewCount":3278},{"description":"Copy an image and paste it as a fill on your selected layers.\nYou can also paste in an image URL to load its image as a layer fill.\n\n—————————————————————————————————\nHow to use:\n\n1. Copy an image or image URL to your clipboard.\n2. Select one or more layers on the canvas.\n3. Run \"Paste to Fill\".\n4. Press ⌘V (Mac) or Ctrl + V (Windows) to paste the image as a fill.\n\n* If you have clicked outside the plugin window after launching the plugin, please make sure to click the window again before pasting.","id":"740097744539225981","installCount":10725,"lastUpdateDate":"2019-08-09T08:53:30.628Z","likeCount":74,"name":"Paste to Fill","publisherHandle":"jackie","publisherId":"938135745447716877","publisherName":"Jackie Chui","runCount":5795,"viewCount":11430},{"description":"Resize your button to fit its label width.\n\n—————————————————————————————————\nHow to use:\n\nResize Button:\n* Make sure your button label text layer is set to:\n- Constraints: Left & Right\n- Resizing: Fixed Size\n\n1. Enter a text in your button label.\n2. Select the button frame or component and run \"Button Resizer > Resize Button\"\n\nSet Min Width:\nYou can set a minimum width on your button so that the plugin will never resize below it. If you are using a button component it is recommended to set this on the master component so all instances will inherit the minimum width automatically.\n\n1. Select the button frame or component and run \"Button Resizer > Set Min Width\".\n2. Enter a number and click Set.","id":"740127005583346577","installCount":18979,"lastUpdateDate":"2019-09-17T06:11:30.731Z","likeCount":149,"name":"Button Resizer","publisherHandle":"23c6689f_45e0_4","publisherId":"815596","publisherName":"Damien Aistrope","runCount":8858,"viewCount":12490},{"description":"<p>Make blob and add it on your page.</p><ul><li>Set your complexity and contrast</li><li>Random blobs</li><li>Bulk blob</li></ul>","id":"740172168964577201","installCount":29972,"lastUpdateDate":"2022-03-06T17:52:39.592Z","likeCount":160,"name":"Make blob","publisherHandle":"gigantz","publisherId":"1405","publisherName":"Orkhan Jafarov 🦄","runCount":25643,"viewCount":20461},{"description":"<p>Find the best color from the world's best brands and cool apps</p><p><br></p><p>Fill beautiful colors from “Brands Colors plugin” straight into your design.</p><p><br></p><p>With Brands Colors for Figma, you can search for your favorite brand's colors or app's colors and apply it on your design and make it awesome</p><p><br></p><p>The Brands Colors allows being used freely for both commercial and personal projects.</p><p><br></p><p>Just Copy &amp; Fill to your amazing design projects.</p><p>Have fun! ✌️</p><p><br></p><p>Learn more about Brands Colors at <a href=\"https://colorsinspo.com\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">https://colorsinspo.com</a></p><p>(Colorinspo is a website that is design and developed by us)</p><p><br></p><p>Design &amp; Developed by Deep Joshi and Manthankumar Satani</p><p><br></p><p>Future Version 7.0</p><p>- Fill Color to component</p><p>- New Brands</p><p><br></p><p>Here we launch our first beta with some functionality for testing and feedback purposes.</p><p>We improve day by day and give you the best version of our product so you can work with color easily.</p>","id":"740232388085828578","installCount":26250,"lastUpdateDate":"2020-07-31T17:29:17.049Z","likeCount":253,"name":"Brands Colors","publisherHandle":"HexorialStudio","publisherId":"870959682079605985","publisherName":"Hexorial Studio","runCount":12987,"viewCount":22467},{"description":"<p>Instant easy access to the entire <strong>Material Design Icons</strong> library: 35,000+ icons in PNG and SVG at your fingertips.&nbsp;</p><p>&nbsp;</p><p>Search icons by name or scroll through the entire list. Filter by category, change style, size, and color. Available in all styles: outlined, filled, sharp, rounded, and two-tone.</p><p>&nbsp;</p><p><strong>What's inside</strong></p><ul><li><strong>6,800+</strong> free icons by <strong>Google</strong>. You can find them in the<a href=\"https://i.imgur.com/NcZMRg7.png\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\"> \"Google\" section</a>.</li><li><strong>28,000+</strong> free icons by <strong>Icons8</strong>. We offer an extensive free tier. All we ask is to<a href=\"https://icons8.com/license?utm_source=figma-plugin-material&amp;utm_medium=add-a-link-page\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\"> add a link</a> back to<a href=\"https://icons8.com/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\"> Icons8.com</a>, crediting us in the final work. If you don't want to add a link, consider<a href=\"https://icons8.com/pricing?utm_source=figma-plugin-material&amp;utm_medium=pricing-page\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\"> buying a license</a>. Additionally, you'll get access to all formats and sizes.</li></ul><p>&nbsp;</p><p>Original creator:<a href=\"https://grappex.com/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\"> Grappex.com</a></p>","id":"740272380439725040","installCount":735819,"lastUpdateDate":"2022-02-22T06:00:41.311Z","likeCount":3210,"name":"Material Design Icons","publisherHandle":"Icons8","publisherId":"1428660","publisherName":"Icons8","runCount":600092,"viewCount":587034},{"description":"<p>Paste random or real data into text layers and components easily. Data Lab supports Numbers, Names, Dates, Addreses, Phones, Emails and Lists with data from API or Google Sheet.</p><p><br></p><p>How to use:</p><p>1. Run Data Lab</p><p>2. Select text layers or components</p><p>3. Construct content query with any symbols and variables</p><p>4. Click Paste data</p><p><br></p><p>Advanced features:</p><p>1. Names, Dates and Geo locations in English and Russian</p><p>2. Upload data from API or shared Google Sheet via LIST variable</p><p><br></p><p>Roadmap:</p><p>1. [PRO] Customize formats for variables</p><p>2. [PRO] Add your own data sets and manage them</p><p>3. [PRO] Automatically generate content for layers based on layer name</p><p>4. Upload data from CSV and JSON</p><p><br></p><p>Feature requests and support:</p><p>Feel free to ping me on Twitter: <a href=\"https://twitter.com/pavelkuligin93\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://twitter.com/pavelkuligin93</a></p>","id":"740286071386014712","installCount":18563,"lastUpdateDate":"2022-05-30T04:16:33.520Z","likeCount":217,"name":"Data Lab","publisherHandle":"pavelkuligin","publisherId":"1114714","publisherName":"Pavel Kuligin","runCount":12478,"viewCount":20582},{"description":"Embrace data-driven design in your workflow. Understand how users look in your prototypes and how clear and aesthetically pleasing are your designs. \n\nSimulate user testing behavior based on historical data and pinpoint potential usability issues\n\n💡 How It Works?\n\nVisualEyes plugin works as simple as that: \n1. Select a Figma Frame \n2. Specify your target device (Desktop or Mobile)\n3. Run the appropriate command\n4. View the results at the plugin dialog\n5. Copy the selected result in your Frame *\n\n* Steps 5 is optional\n\n🔑 Where can I find my API key?  \n\nCreate your account and explore AI design era now:\nhttp://bit.ly/visualeyes-start-now\n\n⚡️Credits\n\nFrom now on, one image prediction (Clarity and Attention Map) is equivalent to one credit\n\n🤖 Technology\n\nWe combine leading neuroscience research with AI to accurately predict how people will react to your digital designs. You can check our prediction statement on the following link:\n\nhttp://bit.ly/visualeyes-accuracy\n\n👑 Features \n\n✅  Attention heatmaps\n✅  Areas of Interest\n✅  Clarity Score & Maps\n✅  Projects\n✅  Sharing Predictions\n\nEnjoy!!!","id":"740542057689267294","installCount":23215,"lastUpdateDate":"2020-07-14T07:33:54.169Z","likeCount":417,"name":"VisualEyes","publisherHandle":"dmraptis","publisherId":"632","publisherName":"Jim Raptis","runCount":15820,"viewCount":24308},{"description":"Pattern Hero enables you to place selected elements or frames in a grid to create patterns.\n\nThings you can do with Pattern Hero:\n ⦿ Re-organize all your elements in a NxM grid with optional padding\n ⦿ Shuffle and repeat elements to form a pattern\n ⦿ Create patterns by selecting any components and Pattern Hero will create instances of the selection instead of cloning the components. This allows you to easily tweak the master component to see the created pattern change accordingly\n\nHow to work:\n • Select an element or a group of elements which you want to organize or place them in a grid\n • Open up Pattern Hero, add the appropriate rows and columns\n • Choose to repeat or shuffle the elements\n • Hit Create Pattern and BAM!\n\nRoadmap:\n [x] Allow option to Group/Ungroup created pattern\n [x] Create instances if a component is repeated\n [  ] Templates - Allowing you to create various types of patterns like placing elements in different positions etc. Eg:  Confetti - Making elements go bonkers.\n\nThis plugin is open sourced:\nhttps://github.com/nitinrgupta/figma-pattern-hero\n\nIf you have any issues or suggetions, hit me up on twitter(@nitinrgupta) or create an issue here: https://github.com/nitinrgupta/figma-pattern-hero/issues","id":"740556241021336678","installCount":97424,"lastUpdateDate":"2020-02-06T18:51:37.518Z","likeCount":885,"name":"Pattern Hero","publisherHandle":"nitin","publisherId":"21180","publisherName":"Nitin Gupta","runCount":74764,"viewCount":94909},{"description":"This plugin allows you to convert svg code into icon and put it inside the figma.","id":"740559260731517035","installCount":14129,"lastUpdateDate":"2019-08-06T14:34:00.686Z","likeCount":66,"name":"PasteSVG","publisherHandle":"732973","publisherId":"732973","publisherName":"Ilya Mordasov","runCount":8287,"viewCount":12056},{"description":"Take any selection and send it to the top of the layer stack.\n\nIt is useful for unnesting elements that you want to reside above all of your frames/artboards. \n\nStarted from the bottom now we here! ✌️\n\nOpen-sourced on Github:\nhttps://github.com/thomas-lowry/send-to-top/","id":"740593880490123393","installCount":2449,"lastUpdateDate":"2019-08-06T23:36:42.530Z","likeCount":18,"name":"Send to Top","publisherHandle":"tom","publisherId":"35","publisherName":"Tom","runCount":706,"viewCount":1259},{"description":"<p>A simple way to count the number of characters, spaces and words inside a text layer or text selection.</p><p><br></p><p>Select a text layer or make a selection inside one and the plug-in will analyse it automatically.</p><p><br></p><p>Also includes limited FigJam support – can only work on text layers but not other objects with text inside them.</p><p><br></p><p>---</p><p><br></p><p>Upcoming:</p><ul><li>Count special and alphabetic characters</li><li>Analyse multiple text layers and groups</li><li>Better FigJam support</li></ul><p><br></p><p>Have an idea? <a href=\"mailto:todor@panev.net\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">Email</a> or <a href=\"https://twitter.com/todorpanev\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">DM me on twitter</a>!</p>","id":"740632514053994647","installCount":15895,"lastUpdateDate":"2021-11-17T13:22:37.081Z","likeCount":165,"name":"Text Counts","publisherHandle":"panev","publisherId":"781449","publisherName":"Todor Panev","runCount":12463,"viewCount":15653},{"description":"Automatically crop the extra space surrounding an image.\n\nAn image in Figma is actually a shape (typically a rectangle) with an image fill. This plugin supports cropping of 1 or more rectangle shaped images.","id":"740702788263758004","installCount":13301,"lastUpdateDate":"2019-09-27T03:51:36.717Z","likeCount":94,"name":"Autocrop","publisherHandle":"mike","publisherId":"601807","publisherName":"Mike Gowen","runCount":8240,"viewCount":8791},{"description":"You can resize multiple objects at once.","id":"740806995589371083","installCount":2086,"lastUpdateDate":"2019-08-16T09:47:04.096Z","likeCount":9,"name":"MultipleResizing","publisherHandle":"761366","publisherId":"761366","publisherName":"梅原淳志","runCount":837,"viewCount":1496},{"description":"<p>Find the best color palette from the huge list of best color palettes</p><p><br></p><p>Fill beautiful color from “Color Palettes plugin” straight into your design.</p><p><br></p><p>With Color Palettes for Figma, you can search for your favorite color code, palette number or name that you remember from Color Palettes plugin and apply it on your design and make it awesome</p><p><br></p><p>The Color Palettes allows being used freely for both commercial and personal projects.</p><p><br></p><p>Just Copy &amp; Fill to your amazing design projects.</p><p>Have fun! ✌️</p><p><br></p><p>Learn more about Color Palettes at <a href=\"https://colorsinspo.com\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">https://colorsinspo.com</a></p><p>(Colorinspo is a website that is design and developed by us)</p><p><br></p><p>Design &amp; Developed by Deep Joshi and Manthankumar Satani</p><p><br></p><p>Version History</p><p><br></p><p>Version 1.0</p><p>- Initial release</p><p>- Copy color</p><p>- Find color by code, number or name</p><p><br></p><p>Here we launch our first beta with some functionality for testing and feedback purposes.</p><p>We improve day by day and give you the best version of our product so you can work with color easily.</p>","id":"740832935938649295","installCount":134024,"lastUpdateDate":"2020-05-11T16:12:40.389Z","likeCount":863,"name":"Color Palettes","publisherHandle":"HexorialStudio","publisherId":"870959682079605985","publisherName":"Hexorial Studio","runCount":90524,"viewCount":117864},{"description":"Resize selected layer from any corner or direction.\n\nThe plugin behaves as if you are resizing with alt/opt key pressed, but with more options.\n\nHOW TO USE:\n1. Select any layer.\n2. Change the anchor to the desired one.\n3. Type the new dimensions in the the proper fields.\n\nPRO TIP:\nUse up & down to nudge the layer size.  Use it with shift to nudge by 10.","id":"740887843052935394","installCount":4123,"lastUpdateDate":"2019-08-11T00:41:05.404Z","likeCount":31,"name":"Anchor Resizer","publisherHandle":"cdes","publisherId":"26415","publisherName":"Ahmad Al Haddad","runCount":1853,"viewCount":1810},{"description":"Isometric allows you to create isometric layers without manually having to set them up.\n\nHow to Use Isometric:\n1. Choose Your Layer\n2. Right Click > Isometric\n3. Select Your Perspective\n\nThis project is open source and MIT licensed.","id":"741184519069077841","installCount":203171,"lastUpdateDate":"2019-08-08T16:12:56.365Z","likeCount":1335,"name":"Isometric","publisherHandle":"W","publisherId":"808761","publisherName":"Wilson Lam","runCount":142596,"viewCount":133151},{"description":"Font Scale is a quick tool to generate a harmonious and consistent typography hierarchy.\n\nThis is especially useful when you want to keep the prroportions between your body text and headings the same, whether it's on screen or paper.\n\nUsage\n\n1. Select a base size. For desktop, for example, usual practice is somewhere between 14px and 16px.\n2. Select a scaling factor. Major Third seems to create the best hierrarchy for bigger screens.\n3. Check the preview to see if you're happy with the result. You can see the pixel value of the size, as well as the em value relative to the base size (useful for all you devs out there)\n4. Hit \"Generate Layers\" to get text layers with the sizes applied so you don't have to do it manually.\n\nInspiration\n\nThis plugin has been inspired by Jeremy Church's www.type-scale.com","id":"741231992144144738","installCount":87761,"lastUpdateDate":"2019-11-19T21:35:35.728Z","likeCount":800,"name":"Font Scale","publisherHandle":"cosmin","publisherId":"29693","publisherName":"Cosmin Negoita","runCount":48272,"viewCount":61174},{"description":"Use this simple plugin to find complementary, split complementary, triad, tetrad, monochromatic, and analogous colors to a selected layer's fill.","id":"741291546405622147","installCount":2637,"lastUpdateDate":"2019-08-17T19:33:28.248Z","likeCount":16,"name":"Compliments","publisherHandle":"Andrew","publisherId":"246675","publisherName":"Andrew Goodwin","runCount":1156,"viewCount":1634},{"description":"Forgot to turn back on Snap to Pixel Grid? Not a problem. Select any layers you want to snap back to the pixel grid, and presto, their position and size are rounded back to nice round numbers.\n\nHow it works:\n1. Select layers you'd like to apply Pixel Perfect to.\n2. Pixel Perfect will run on all children of any selected frame or group, so you can simply select the top level frames.\n3. Run the Plugin\n4. Pixel Perfect will modify the position of size of each layer so its x/y position and width and height are on full pixels: 200 instead of 200.45\n5. By default Pixel Perfect won't affect shape anchor points, but you can turn that feature on and Pixel Perfect will also move the anchor points of any shape path selected.","id":"741300632449121669","installCount":49455,"lastUpdateDate":"2019-08-27T10:36:05.749Z","likeCount":397,"name":"Pixel Perfect","publisherHandle":"arbel","publisherId":"121591","publisherName":"Idan Arbel","runCount":35395,"viewCount":47132},{"description":"Use your selected layers as Mask for the image in your clipboard.\n\nHow to use:\n\n1. Copy an image to your clipboard (Right-click on the image - Copy image).\n2. Select one or more layers.\n3. Run the plugin.\n4. Paste your image.","id":"741413612560725424","installCount":3349,"lastUpdateDate":"2019-08-10T09:55:29.471Z","likeCount":13,"name":"Paste to Mask","publisherHandle":"1690168","publisherId":"1690168","publisherName":"Dario Ferderber","runCount":1129,"viewCount":1906},{"description":"Relink a frame to a component by searching for similar instances.\n\n---\n\nUse cases:\n• Copying a nested component\n• Moving the master component to a different file\n• Turning a set of similar frames into a component\n• Turning detached instances back into instances\n\n---\n\nHow it works:\n 1. Select frames (that used to be instances)\n 2. Click \"Plugin/Reattach instance\"\n 3. Plugin finds instances or master components with the same name\n 4. New instance is created for each corresponding frame\n 5. The selected frames are replaced by instances 🎉\n\n👉 NEW: Overrides will now be applied to instances!\n\n---\n\nKnown problems:\n• Relies too much on layer naming\n• Needs to have an instance/master as a reference on the same file\n• Doesn't work all the time with team libraries\n\nFeel free to contribute 😅\nhttps://github.com/renancamm/figma-reattache-instance","id":"741415678427267506","installCount":6618,"lastUpdateDate":"2019-11-14T11:21:37.146Z","likeCount":126,"name":"Reattach Instance","publisherHandle":"renancamm","publisherId":"1077045","publisherName":"Renan Cammarosano","runCount":5009,"viewCount":9277},{"description":"<p>It’s stupid simple, and yes you absolutely needs this!</p><p><br></p><p>Let’s be honest we’ve all at least once tried to skew things up a notch... and admit it, whatever hack you tried was just a dirty hack. Well now you can just say SkewDat! With our plugin you can skew anything &amp; everything in sight within the comfort of everyone's favorite design program, ehm ehm Figma. Skew settling for anything less than perfect! We here at Unfold feed off perfection (we will literally die if we don't eat enough perfection) so you know this plugin will be amazing.</p><p><br></p><p><br></p><p><br></p><p>Hopping to Illustrator, Sketch or using other hacks?</p><p>Hah, SkewDat!</p><p><br></p><p>Plug-in features:</p><p>• Live preview your adjustments</p><p>• Minimal interface, straight to the point</p><p>• Skew multiple objects at once</p><p>• Ability to revert back to original</p><p><br></p><p>Upcoming features:</p><p>• Isometric mode</p><p>• Advanced controls</p>","id":"741472919529947576","installCount":181952,"lastUpdateDate":"2019-08-09T18:19:38.081Z","likeCount":1601,"name":"SkewDat","publisherHandle":"unfold","publisherId":"862311559760360561","publisherName":"unfold","runCount":150646,"viewCount":135636},{"description":"For designers: Easily create a JSON file for your fellow developers with everything they need to create a custom Icon component using their favorite framework or library (React, Angular, Vue etc.). No exports, copying and pasting files, no code cleaning or additional optimizations. \n\nFor developers: Imagine that you receive a bunch of icons from your fellow designer. You have to extract needed data from all those SVG files... It's time consuming... Forget about it. Now you can easily export all icons data to a JSON file with one click! If you have a custom Icon component in React, Angular or Vue — that's all you need.\n\nHow it works:\n1. Create frames / components / instances with unique names (plugin seeks for every frame / components / instances in a current page)\n2. Draw icons or paste them from your favorite tool (like IconJar)\n3. Flatten them (if they are not already)\n4. Use the plugin to create a JSON with needed data\n5. Use data with your custom Icon component\n6. 🎉\n\nTip! Hidden frames, components or instances are skipped by the plugin\n\n=========================\nCustom components & examples:\n1. React — https://codesandbox.io/s/react-icon-component-3giqg\n2. Angular (by @foull) — https://codesandbox.io/s/angular-icon-component-pg7py\n3. Vue — https://codesandbox.io/s/vue-icon-component-neclt\n4. Svelte — https://codesandbox.io/s/svelte-icon-component-5qyr3\n=========================\n\nIcon data model:\n{\n  name: string;\n  paths: { windingRule: string, data: string }[];\n  size: {\n    width: number;\n    height: number;\n  };\n  fill: {\n    rgb: string;\n    hsl: string;\n    hex: string;\n  };\n  translate: {\n    x: number;\n    y: number;\n  };\n  viewBox: string;\n}","id":"741549820671978943","installCount":4513,"lastUpdateDate":"2019-09-11T09:23:59.657Z","likeCount":25,"name":"Icon2Code","publisherHandle":"panr","publisherId":"78835","publisherName":"Radek Kozieł (@panr)","runCount":4048,"viewCount":6114},{"description":"<p>Find all Instances of a Component used in your file.</p><p><br></p><p>Select a single Instance or Component, and the plugin will search all pages and all frames and create a list of all Instances used.</p><p><br></p><p>The list is split up into seperate pages for easy navigation. Clicking on any item will zoom in on the Instance.</p><p><br></p><p>💡 Tip: Use the left and right arrow keys to navigate between instances.</p>","id":"741895659787979282","installCount":30582,"lastUpdateDate":"2022-07-09T16:31:26.647Z","likeCount":361,"name":"Instance Finder","publisherHandle":"arbel","publisherId":"121591","publisherName":"Idan Arbel","runCount":24682,"viewCount":39731},{"description":"Locator helps you find all instances of a component and enables you to jump to each individual instance.\n\nUsage\n\n1. Select a master component.\n2. Launch the Locator plugin.\n3. View all instances of this component, the page where they're used and their direct parent.\n4. Click on one of the instances in the list to jump to it.\n\nNOTICE: When using the plugin on very large documents, it's gonna take a while to return the instances of a component.","id":"741935812012883481","installCount":5708,"lastUpdateDate":"2019-08-13T05:40:11.679Z","likeCount":83,"name":"Locator","publisherHandle":"cosmin","publisherId":"29693","publisherName":"Cosmin Negoita","runCount":4136,"viewCount":8070},{"description":"<p>Airtable &amp; Figma, kinda sounds like an unusual marriage, right? Sure, until you need to design an entire data table, or a dozen different cards of the same variety, at which point you’ll be wishing for an easier way to go about it. Luckily, now there is! This plugin allows you to effortlessly pull text and images from an Airtable database and inject them straight into your Figma components. Using the plugin is child’s play. First, you build your component in Figma, business as usual. Then, you load up the Airtable 2 Figma plugin, and map the Airtable data fields to the right layers in Figma. Finally, choose the layout you want your component to be laid out as and voilà, you just saved yourself a couple hundred clicks! You now have a nice set of data directly inserted&nbsp;into your designs.</p><p><br></p><p>Learn more at: https://figma.bothrs.com</p><p><br></p><p>This plugin is not under active maintenance or support, but you can discuss things at https://github.com/thgh/Airtable-to-Figma</p><p><br></p><p>Take a gander at the data types we can import directly from Airtable into Figma:</p><p><br></p><p>1. Single line text</p><p>2. Long text</p><p>3. Phone number</p><p>4. Email</p><p>5. Numeric</p><p>6. Image</p><p><br></p><p>Here’s a sample database (about cats) for you to experiment with: https://airtable.com/shr0hyEnBae0AKKfQ</p><p><br></p><p>Next, follow these steps, or watch a tutorial video over at https://figma.bothrs.com</p><p><br></p><p>1. Go to https://airtable.com and build or select your own table</p><p>2. In your Airtable of choice, click ‘Share’</p><p>3. Scroll down and click ‘Create a shared view’</p><p>4. Click ‘Share the current view’</p><p>5. Next, click ‘Create a shareable grid view’.</p><p>6. Then, copy the link and paste it in the plugin window.</p><p>7. Assign Airtable columns to text nodes or images.</p><p>8. Select the view you want to use and configure the rest</p><p>9. Done! For every row in your table, an instance will be created.</p><p><br></p><p>Sounds pretty cool, right?</p><p><br></p><p>Missing a particular feature? Hit us up at https://github.com/thgh/Airtable-to-Figma/issues</p>","id":"741940457537193498","installCount":5826,"lastUpdateDate":"2020-11-29T20:44:50.358Z","likeCount":160,"name":"Airtable to Figma","publisherHandle":"thomasgh","publisherId":"669615","publisherName":"Thomas Ghysels","runCount":3754,"viewCount":11857},{"description":"A plugin for sorting/reordering layers.\n\n• Sort by Position ( Left, Right -> Top, Bottom)\n• Sort Alphabetical Ascending (A -> Z)\n• Sort Alphabetical Descending (Z -> A)\n• Reverse order\n• Randomize order\n\nHow it works:\nSorter will take your selection and sort the layers using the ordering of your choice, relative to each items parent. This means you can have a mixed selection of top level frames, and child elements and the plugin will always sort them without throwing errors.\n\nIf you only want to sort children of your selection, enable the \"Sort Children Only\" option. Sorter will remember your selection for the next time you run the plugin in that file.\n\nOpen sourced on Github:\nhttps://github.com/thomas-lowry/sorter","id":"742038190980789811","installCount":25885,"lastUpdateDate":"2020-02-03T20:19:55.854Z","likeCount":347,"name":"Sorter","publisherHandle":"tom","publisherId":"35","publisherName":"Tom","runCount":17141,"viewCount":24247},{"description":"Lorem Ipsum Generator, with two clicks generates random text in Figma. You can set the count of sentences and after that customize it as a normal text in Figma.","id":"742039398983091764","installCount":15858,"lastUpdateDate":"2019-08-15T19:09:19.552Z","likeCount":39,"name":"Lorem Ipsum Generator","publisherHandle":"a_siekierski","publisherId":"982169","publisherName":"Adam Siekierski","runCount":15851,"viewCount":13510},{"description":"<p>This plugin won't fix the city's problems, but it will automatically apply the <a href=\"https://developer.apple.com/design/human-interface-guidelines/foundations/typography#tracking-values-ios\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">correct font variant and tracking</a> for selected texts using the San Francisco typeface.</p><p><br></p><h2>How to Use</h2><ol><li>Select a Frame or texts with “SF Pro”, “SF Pro Display”, “SF Pro Text”, \"SF Pro Rounded\", or \"New York\" fonts.</li><li>Run “Fix San Francisco” from Plugins menu.</li></ol><p><br></p><p>The plugin will find all relevant texts in your selections and apply the fix.</p><p><br></p><p><strong>Note:</strong> Texts with text style will not be changed.</p><p><br></p><p><strong>Note:</strong> For New York, only the tracking value is changed, not the font (Small, Medium, Large, Extra Large). If you know the font size range for each of the optical size variations, let me know.</p><p><br></p><h2>Context</h2><p>When texts with SF fonts are rendered on iOS, their variant and tracking (letter spacing) are adjusted based on their point size and the user's accessibility settings. In Figma, the tracking must be manually applied to get a more accurate representation. Hence, Fix San Francisco is here to automate this process for you ♥</p><p><br></p><p>Inspired by <a href=\"https://github.com/kylehickinson/Sketch-SF-UI-Font-Fixer\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Sketch-SF-UI-Font-Fixer</a>.</p>","id":"742063658553085504","installCount":9729,"lastUpdateDate":"2022-07-23T01:14:07.282Z","likeCount":101,"name":"Fix San Francisco","publisherHandle":"charliecm","publisherId":"29445","publisherName":"Charlie Chao","runCount":6247,"viewCount":17274},{"description":"<p>This plugin helps you to interact inside your files with other peoples.</p><p>It's a simple chat with the ability to send text and the current selections of frames or other elements. Just select the elements you want to send to other people and tick the checkbox.</p><p><br></p><p><strong>How to use?</strong></p><p><br></p><p>First of all, open the \"Figma Chat\" plugin inside your file.</p><p>The plugin generates a random room name and a secret key. These two strings are available to all editors inside the file.</p><p><br></p><p><strong>The room name: </strong>This string is used to let the server know where to send the messages to.</p><p><strong>The secret key: </strong>This string is used to en- and decrypt all messages.</p><p><br></p><p><strong>The plugin handles all the stuff for you!</strong></p><p><br></p><p>At the bottom of the plugin you can enter the user list and access the \"Settings\" page. Set an avatar and the color and if you want a custom server (<a href=\"https://github.com/ph1p/figma-chat-server\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">https://github.com/ph1p/figma-chat</a>).</p><p><br></p><p>An important function is to send your <strong>current selection</strong>. You can easily do this by selecting one or more elements and clicking the element that appears inside the chat bar.</p><p><br></p><p><strong>MY CHAT DOES NOT START :o</strong></p><p><br></p><p>If this is the case, please use the \"reset\" button. This will reset all data an generates new keys for you :)</p><p><br></p><p>---</p><p><br></p><p><strong>Always note:</strong> All messages are encrypted and can only be read by people who are able to run plugins inside your file.</p><p>Feel free to write me if you have any problems or feedback (:</p><p>Please use the <strong>GitHub Issues </strong>(<a href=\"https://github.com/ph1p/figma-chat/issues\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">https://github.com/ph1p/figma-chat/issues</a>) or follow me on twitter and write me a DM <a href=\"https://twitter.com/phlp_\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">https://twitter.com/phlp_</a></p>","id":"742073255743594050","installCount":90545,"lastUpdateDate":"2021-12-14T10:22:13.854Z","likeCount":805,"name":"Figma Chat","publisherHandle":"p","publisherId":"791757","publisherName":"Phil","runCount":65774,"viewCount":86968},{"description":"<p>The best plugin for writing RTL (Arabic, Persian, Hebrew, etc.) or bidirectional text in Figma or FigJam. Based on feedbacks 😎</p><p><br></p><h2>You can support my works on free Figma plugins with a coffee ☕️</h2><p><br></p><h2><a href=\"https://saeedalipoor.gumroad.com/l/FreeFigmaPlugins\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Pay with gumroad (USD)</a></h2><h2><a href=\"https://payping.ir/@saeedalipoor\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Pay with PayPing (IRR)</a></h2><p><br></p><p>It reverses the text to show it correctly and keeps the original text to restore it if someday Figma adds RTL support.</p><p><strong>Single and Batch Editor</strong></p><p><strong>Find &amp; Replace</strong></p><p><strong>Multi-layer reverse</strong></p><p><strong>reset</strong></p><p><strong>rewrap</strong></p><p><strong>handle special characters and braces</strong></p><p><strong>auto hide editor when no text selected</strong></p><p><a href=\"https://youtu.be/yGJ1IX4gAAo\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\"><strong>Quick Tutorial video on youtube</strong></a></p><p><br></p><p><s>If you only need the reverse command, you can also use&nbsp;</s><a href=\"https://www.figma.com/community/plugin/940631928923964752/RTL-PLZ-Reverse\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\"><s>RTL PLZ Reverse plugin</s></a><s>.</s></p><p><br></p><p><s>You can use the&nbsp;</s><a href=\"https://www.figma.com/community/plugin/947478767900326156/RTL-PLZ-Handoff\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\"><s>RTL PLZ Handoff plugin</s></a><s>&nbsp;to prepare text layers with original texts for handing off the design to developers.</s></p><p><br></p><p><strong>Ways to use</strong>:</p><ul><li>Create text layer &gt; enter RTL text &gt; Run RTL PLZ Reverse</li><li>Create/Select text layer &gt; Run RTL PLZ Editor &gt; Type/Paste text in the plugin window</li><li>If the width of the textbox is not auto, Run RTL PLZ Update Wrap after the textbox resizes.</li><li>If the plugin window is open, it will update lines when the text layer is resized.</li></ul><p><br></p><p><strong>Roadmap</strong>:</p><p>✅ Reverse text with diacritics or bidirectional text</p><p>✅ Live editor</p><p>✅ Handle Line wrapping</p><p>✅ Ability to reset text to the original</p><p>✅ Batch editing layers</p><p>✅ Handoff original text to developers</p><p>✅ Find &amp; Replace</p><p>🔲 Words dictionary</p><p>🔲 Dummy text</p>","id":"742121299910255177","installCount":25761,"lastUpdateDate":"2022-03-30T18:58:28.891Z","likeCount":433,"name":"RTL PLZ","publisherHandle":"saeed","publisherId":"689","publisherName":"Saeed Alipoor","runCount":23243,"viewCount":20243},{"description":"<p>A dead simple plugin that counts the number of words and characters in any selection.</p><p><br></p><p>To use:</p><p><br></p><ol><li>Select any number of Text elements or Frames or Groups with Text elements as children.</li><li>Run the Word Count plugin.</li><li>The count will appear as a message at the bottom of the screen.</li></ol><p><br></p><p>That's it!</p>","id":"742152456731717201","installCount":8459,"lastUpdateDate":"2021-11-03T22:49:52.542Z","likeCount":54,"name":"Word Count","publisherHandle":"jenny","publisherId":"4593","publisherName":"Jenny Wen","runCount":5811,"viewCount":6798},{"description":"A Figma plugin to export Frame nodes to .ico (Windows) and/or .icns (Mac) files.\n\nThese file types are often used for application, file or folder icons.\n\nVery easy to use:\n- Select square frame (for all use cases at least 512px)\n- Run the plugin\n- After compiling download your .icns / .ico file at the modal","id":"742318143106037364","installCount":15068,"lastUpdateDate":"2022-05-10T17:01:01.992Z","likeCount":187,"name":"icns/ico Generator","publisherHandle":"a","publisherId":"1951744","publisherName":"Aaron Iker","runCount":11826,"viewCount":18174},{"description":"Want to align layers to a specific layer, and have that layer stay fixed while the other layers move? You got it!\n\nHow it works:\n1. Select the layers you'd like to align\n2. Launch the Plugin\n3. You can select the layers when the plugin is already active, just click on \"Get Selection\" button.\n4. Select the layer you'd like to stay fixed.\n5. Click on the Alignment buttons.\n\nEnjoy.","id":"742450159822269057","installCount":7478,"lastUpdateDate":"2019-08-12T07:14:03.269Z","likeCount":66,"name":"Align To","publisherHandle":"arbel","publisherId":"121591","publisherName":"Idan Arbel","runCount":3846,"viewCount":5410},{"description":"Select Parent, lets you quickly select the parent object of whatever you have selected. It even works when you have multiple layers selected. \n\nTo use the plugin simply select at least one layer that is nested (either in a frame or group) and then run the plugin. The parent layers of whatever you had selected should now be selected, making it quick and easy to move, make adjustments, etc.\n\nSee a quick demo video here: https://twitter.com/aswellasyouare/status/1163492927559077889","id":"742536097587262088","installCount":1677,"lastUpdateDate":"2019-08-29T18:36:21.104Z","likeCount":22,"name":"Select Parent","publisherHandle":"vadim","publisherId":"779","publisherName":"Vadim Pleshkov","runCount":637,"viewCount":2629},{"description":"Palette helps you create the perfect color palette through machine learning from Colormind.\n\nUsage\n\nWhen you open Palette it will detect which shapes you have selected and use their fill colors (up to 5) or an image fill to seed your new color palette.\n\nColor palettes are generated automatically using machine intelligence. You can click on colors to lock them in as you generate new colors and drag colors to reorder. The order of colors in your palette can have a major impact on how the service decides to fill in the blanks. So, please remember to experiment with the order of your colors.\n\nThough the \"Normal\" color model is selected for you, you can try other models provided by Colormind. The \"Normal\" and \"UI\" models are always available but the rest of the list changes daily.\n\nOnce you stumble upon a color palette you are excited about, just click the checkmark and Palette will throw shapes filled with your new colors down on the page.","id":"742549221432366731","installCount":145104,"lastUpdateDate":"2019-10-10T06:14:00.962Z","likeCount":669,"name":"Palette","publisherHandle":"dustin","publisherId":"1206807","publisherName":"Dustin Mierau","runCount":78712,"viewCount":79549},{"description":"Select a FRAME from your design to easily make a \"Cover\" page for your design files.","id":"742583620684903056","installCount":3637,"lastUpdateDate":"2020-02-05T21:50:39.340Z","likeCount":29,"name":"Autocover","publisherHandle":"Andrew","publisherId":"246675","publisherName":"Andrew Goodwin","runCount":3136,"viewCount":5338},{"description":"Resize and position elements using Top, Bottom, Left and Right.\n\n—————————————————————————————————\nHow to use:\n\n1. Select one or more layers. (All layers need have a parent frame)\n2. Adjust either the Top/Bottom/Left/Right or the width and height values to position or resize your layers.\n\nChange position without resizing:\nSet the constraints to one side before changing the margin values.\n\nResize:\nSet the constraints to both sides (Left + Right/Top + Bottom) before changing the margin values.\n\nKeyboard shortcuts:\nUp/Down - Increase/decrease by the small nudge value.\nShift + Up/Down - Increase/decrease by the big nudge value.\n\nPresets:\nYou can create presets to quickly set margins and constraints by clicking the + button in the Presets section. By default the preset will include your current margin values.\n\nTo edit and rename a preset, click on its setting icon.\n\nOnly fields with values will be applied in the preset. For example, if you set only the Top and Right values and leave Left and Bottom blank, the preset will push layers to the top right without any resizing.\n\nHere are some ideas of what you could do with presets:\n- Place a close button at the top-right corner of a panel or dialog.\n- Resize layers to have 16px margins on all sides.\n- Resize a horizontal line to span full width.\n- Resize a vertical line to span full height.","id":"742639765059742358","installCount":7761,"lastUpdateDate":"2019-09-06T09:28:20.797Z","likeCount":77,"name":"Margins","publisherHandle":"jackie","publisherId":"938135745447716877","publisherName":"Jackie Chui","runCount":5472,"viewCount":26746},{"description":"<p>Generate CSS Preprocessors SASS/LESS from your local Figma styles</p><p><br></p><p>Easily generate CSS variables and mixins from a defined Figma styles.</p><p>The plugin reads all used local styles in a Figma document and let you export them into SASS/LESS</p>","id":"742750636238601912","installCount":17513,"lastUpdateDate":"2022-06-26T19:37:38.822Z","likeCount":274,"name":"CSSGen","publisherHandle":"oriziv","publisherId":"430332","publisherName":"Ori Ziv","runCount":11814,"viewCount":18840},{"description":"<p>Free Popular Wireframes library for everyone, Wireframe plugin is the best Figma plugin for creating beautiful wireframes, user flow, prototypes and basic structures, so no other kits, files or skills required! just drag and drop to add it on Figma, All the Wireframe can be used freely under creative commons license( We are thankful the creators and makers ), All files are SVG hence they are easily editable and the user can manage easily all wireframing and prototyping activities as per his/her needs. If you want more crazy stuff, just Follow us on Figma or go to our website <a href=\"https://hexorial.studio/?ref=figma-wireframe-description\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">hexorial.studio</a>. Need custom Design for your App/Website or Partnership with us/ Integrate your plugin/website or API or want to leave your valuable feedback just reach out to us on <a href=\"mailto:hello@hexorial.studio\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">hello@hexorial.studio</a>.</p><p><br></p><p>Why “Wireframe Plugin” Useful for you and your team?</p><p><br></p><p>1. Project Ideation and Brainstorming : Wireframe comes with collaboration in mind. Also, you can invite your co-worker on Figma and together in real-time design the user flow for your next project.</p><p><br></p><p>2. User flows and Wireframes Graphics: The wireframe has over 350+ custom build graphics/cards to use, which covers most the web and mobile elements, interactions, and usage cases.</p><p><br></p><p>3. No other skills and resources required: The wireframe is great and easy to use since you don't need to upload or use any other resources on Figma.</p><p><br></p><p><a href=\"https://docs.google.com/forms/d/e/1FAIpQLSes9U7ou1b3QsuzZbD05IWf-7_vqyyzOSckaORRBaWx1F0Vww/viewform?usp=sf_link\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Leave plugin feedback here</a></p>","id":"742764242781786818","installCount":370499,"lastUpdateDate":"2022-07-05T09:01:06.549Z","likeCount":2466,"name":"Wireframe","publisherHandle":"itsmnthn","publisherId":"1318299","publisherName":"Manthankumar Satani","runCount":289450,"viewCount":332324},{"description":"When collaborating on features with multiple designers and developers, it can be hard to keep track of which designs are ready to be implemented and what is still a work in progress.\n\nStatus for Figma brings order to the chaos by providing a simple way to mark the status of a design. Simple right-click on your frame, go to Plugins, Status, and select your desired status.\n\nSome tips:\n- You can select multiple frames at once. Each frame will get its own status badge.\n- Use the keyboard shortcut to quickly set a status: hit `cmd /` in Mac and `ctrl /` on Windows, type a Status (e.g. “Done”) and hit return.\n- Status for Figma is not limited to frames. It works with any object you can select.\n- You can optionally automatically group the selected element and status badge, so they can be moved around easily (see the plugin settings)\n\nStatus for Figma is open source. Feel free to contribute or to send suggestions. https://github.com/bramschulting/status-for-figma","id":"742769304454952644","installCount":6141,"lastUpdateDate":"2019-09-10T14:45:22.185Z","likeCount":92,"name":"Status ✅","publisherHandle":"bram","publisherId":"183797","publisherName":"Bram Schulting","runCount":5349,"viewCount":8567},{"description":"<p>Select text layers and run the plugin to populate them with random names, or just run the plugin and get a new text layer with a random name.</p><p><br></p><p>You can choose a gender and decide whether you want the random full name, first name or last name.</p><p><br></p><p>Buy me a coffee :)</p><p><a href=\"https://ko-fi.com/darioferderber\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">https://ko-fi.com/darioferderber</a></p>","id":"742770131320902341","installCount":32967,"lastUpdateDate":"2019-08-12T17:08:39.885Z","likeCount":105,"name":"Random Name Generator","publisherHandle":"1690168","publisherId":"1690168","publisherName":"Dario Ferderber","runCount":24989,"viewCount":18922},{"description":"This plugin brings the amazing collection of patterns called Hero patterns by Steve Schoger. They are a collection of repeatable SVG background patterns for you to use on your web or mobile projects.\n\nAll you have to do is select a layer and customize the color of the patterns using the handy color picker and click on your favorite pattern and it will get applied as a fill for that layer.\nYou can mix and match the patterns and stack them up by clicking again and again, this will place each new pattern on top of the other.\n\n— Other plugins by @tkmadeit\n\nhttps://www.figma.com/c/plugin/754026612866636376/SPELLL---Spell-Checking-for-Figma\n\nhttps://www.figma.com/c/plugin/739503328703046360/Humaaans-for-Figma","id":"743134103711120154","installCount":29333,"lastUpdateDate":"2020-01-19T21:18:35.367Z","likeCount":228,"name":"Hero Patterns for Figma","publisherHandle":"tkmadeit","publisherId":"156890","publisherName":"Tekeste Kidanu","runCount":24982,"viewCount":29932},{"description":"Masker allows you to easily overlay devices on selected layers in your project.  First, select one or more layers in your design file, then choose from the Masker palette to apply.\nWe recommend that you select layers that match the actual size of the device. The best way to do this is with the devices built into Figma.\n\nChoose from the following: \n— Iphone X\n— Iphone 8 Plus\n— Iphone 8\n— Google Pixel 2\n— Google Pixel 2 XL\n\nHow to use Masker. \n— For single layer selection: Select a layer in the project, then choose from the Maker palette to apply. If you have done everything correctly, the plugin will automatically select the device by size, if not, it will give you this choice.\n— For multiple selections with a layer: select multiple layers in the project, then choose from the Maker palette to apply. If you have done everything correctly, the plugin will automatically calculate the number of selected layers and select the device by size, if not, then give you the choice.\n— For select without a layer: open the Masker from the palette, and then select the desired device and the number of items. \nMinimum possible number: 1.\nMaximum possible number: 49.\nThe maximum limit is made to optimize Figma's performance. Please contact us if you need a larger limit 🙂\n\nIMPORTANT: When selecting a layer, make sure it does not have a device mask. Otherwise, an error will be displayed.\n\nIdeas for the next version: \n— Possibility of filling the screen with color and background selection from the gallery.\n— New devices such as watches, laptops, and desktops.\n— Automatic mask matching for different layers. \n\nAny other ideas? Send them to us at dudeinhoodie@gmail.com","id":"743170618365358883","installCount":7007,"lastUpdateDate":"2019-09-26T18:32:39.652Z","likeCount":60,"name":"Masker","publisherHandle":"1006","publisherId":"1006","publisherName":"Vyacheslav Myskov","runCount":4723,"viewCount":13183},{"description":"Copy paste layer properties\n\n1. select layer\n2. run copy to get its properties\n3. select another layer\n4. apply one of the following:\n\n- width\n- height\n- position\n- size\n- layer name\n- x (align left) \n- align right\n- y (align top)\n- align bottom\n- scale to align left\n- scale to align right\n- scale to align top\n- scale to align bottom\n\nTipp\nYou can either use the panel (Show panel) or the menu commands (which allows you to set system-shortcuts)\n\nGreatly improves the workflow of repeated copy paste tasks.","id":"743187242388663080","installCount":919,"lastUpdateDate":"2020-01-26T19:58:54.996Z","likeCount":36,"name":"Copy waste more","publisherHandle":"Alain","publisherId":"119920","publisherName":"Alain Groeneweg","runCount":351,"viewCount":1444},{"description":"<p>Create a thumbnail for your project in a few clicks with a visual editor. Set your brand colors, give it a status, choose an emoji with search and lots more! Take use of the \"Quick Create\" feature if you don't want to play around with personalization and make an instant thumbnail.</p><p><br></p><p>Don't want to be limited by our builder? Do the craziest thumbnail design and save it. It's going to be two clicks away at any time.</p><p><br></p><p>We've got you *covered*, get it?</p>","id":"743199058431264556","installCount":14555,"lastUpdateDate":"2022-05-29T10:57:06.564Z","likeCount":426,"name":"Better File Thumbnails","publisherHandle":"thepentool","publisherId":"4299881","publisherName":"thepentool.co","runCount":13438,"viewCount":29020},{"description":"Translator instantly translates the text in your Figma designs into other langauges. Backed by the engine that powers Google Translate, you can test your designs in up to 104 different languages.\n\nWorkflow\nSelect one or more text layers and select the language you'd like to translate to. In a moment the text of the selected text layers will be replaced with their translations. You can also select one or more Frames, Components, or Groups to translate all of the text layers within them.\n\nPro Tip\nWith one or more text layers selected, use Figma's menu search command (⌘+/) to quickly open the menu search field, then simply type the language you want to translate to and press return.","id":"743218037112142643","installCount":14619,"lastUpdateDate":"2019-08-20T04:56:26.236Z","likeCount":157,"name":"Translator","publisherHandle":"dustin","publisherId":"1206807","publisherName":"Dustin Mierau","runCount":11595,"viewCount":20747},{"description":"<p>A Figma plugin to quickly test your designs across multiple device sizes.</p><p><br></p><p>1. Select any frame, component, or instance</p><p>2. Menu &gt; Responsify️️ ⚡️ &gt; Select device sizes to test</p><p>3. Command + Shift + P to re-run</p><p><br></p><p>This code is open source: <a href=\"https://github.com/brianlovin/figma-responsify\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">https://github.com/brianlovin/figma-responsify</a> - contributions welcome!</p>","id":"743654854885744527","installCount":34523,"lastUpdateDate":"2021-07-23T14:21:34.478Z","likeCount":425,"name":"Responsify ⚡️","publisherHandle":"brian","publisherId":"22538","publisherName":"Brian Lovin","runCount":18628,"viewCount":26337},{"description":"Metaball plugin generates 2D-Metaball shapes from circle objects.\n\nHow to use:\n1. Draw some circles and select them\n2. Right Click -> Plugins -> Metaball\n3. Click on button \"Create\"\n\nThis project is based on Metaball script by SATO Hiroyuki (http://shspage.com/aijs/en/#metaball).\n\nThis project is open source and MIT licensed.","id":"743754408199479204","installCount":23595,"lastUpdateDate":"2019-10-02T10:53:57.865Z","likeCount":208,"name":"Metaball","publisherHandle":"girafic","publisherId":"812","publisherName":"Stas Haas","runCount":16173,"viewCount":20236},{"description":"We all know FIGMA is not for the print industry, but what if it could be?\n\nEver want to design a print file in FIGMA? \n\nNot sure what the DPI to Pixel conversion would be? \n\nWell fear no more as *DPI to Pixel* is here to help you turn the best cloud-based design tool into your next print project tool!\n\nStart making high resolution print files today based on a DPI you select and let’s show FIGMA that we want tools for cloud-based Print design too!","id":"743928147588245448","installCount":8831,"lastUpdateDate":"2019-09-06T17:00:35.202Z","likeCount":68,"name":"DPI 2 Pixels","publisherHandle":"floatingpoint","publisherId":"188671","publisherName":"Gabe Boisvert","runCount":6691,"viewCount":15448},{"description":"Quick access to Feather icons in Figma.\n\nWebsite: https://feathericons.com\n\nThis plugin is open source: https://github.com/feathericons/figma-feather\nContributions welcome!","id":"744047966581015514","installCount":361328,"lastUpdateDate":"2019-08-22T15:40:29.366Z","likeCount":1590,"name":"Feather Icons","publisherHandle":"cole","publisherId":"27955","publisherName":"Cole Bemis","runCount":304314,"viewCount":176567},{"description":"<p><strong>Seamlessly access over 4.5 Million+ Design assets within Figma</strong></p><p><br></p><ul><li>Search through highly customizable SVGs, Vector Icons, Illustrations, 3D Graphics &amp; Lottie Animations.</li><li>Worry-free simplified licensing for projects of any size</li><li>Over 30,000+ new assets added every week</li><li>Trusted by over 1.5 Million+ users worldwide</li><li>IconScout also has plugins for all popular Design tools.</li><li>Created with&nbsp;❤️&nbsp;for making designing simpler for everyone <a href=\"https://emojipedia.org/smiling-face-with-smiling-eyes/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">😊</a></li></ul>","id":"744098704933821409","installCount":139794,"lastUpdateDate":"2022-06-17T10:53:05.599Z","likeCount":900,"name":"Iconscout - Icons, Illustrations, 3D Assets & Lottie Animations","publisherHandle":"iconscout","publisherId":"2032346","publisherName":"Iconscout","runCount":141716,"viewCount":138827},{"description":"<p>Useful utilities for using the RIG Design System. Requires an invite to use.</p>","id":"744224581164869644","installCount":63,"lastUpdateDate":"2020-12-23T18:15:17.423Z","likeCount":2,"name":"RIG Buddy (v2)","publisherHandle":"royalbank","publisherId":"896065330343975849","publisherName":"RBC","runCount":188,"viewCount":305},{"description":"Generates colour palette from selected images. \n\nSelect an image (or multiple images) and run the plugin. \n\nPrefer rounded palette? Try Image Palette by Matt DesLauriers: https://www.figma.com/c/plugin/731841207668879837/Image-Palette","id":"744287694483504163","installCount":4224,"lastUpdateDate":"2019-08-16T20:14:04.913Z","likeCount":39,"name":"Photo to Palette","publisherHandle":"kns008","publisherId":"678","publisherName":"Kamal Nayan","runCount":2096,"viewCount":3323},{"description":"<p>Generate a palette from an image to magically populate your designs.</p><p><br></p><p>This plugin provides two core functions:</p><p><br></p><p>1. Generate utility palette: extracts the dominant color from an image, suggests high-contrast text colors, and includes additional complementary palette information.</p><p>2. Smart populate: takes your selection and intelligently sets layer fills and text colors based on nearby images.</p><p><br></p><p>Generating a dominant color palette</p><p><br></p><p>1. Select one or more layers in Figma that contain image fills.</p><p>1. Run the plugin Menu &gt; Dominant Color Toolkit 🎨 and your palette will be generated.</p><p><br></p><p>Note: To prevent overlapping frames from appearing in your designs, align your images 500px apart.</p><p><br></p><p>Smart populate</p><p><br></p><p>1. Select any frame, component, or instance</p><p>2. Menu &gt; Dominant Color Toolkit 🎨</p><p>3. Command + Shift + P to re-run</p><p><br></p><p>How does Smart Populate work?</p><p>- If you selected one or more frames which contain an image, shapes, and text, the plugin will use the first image it finds to automatically fill the shapes with the computed dominant color and set text layers to have a high-contrast fill against that dominant color.</p><p>- If you selected an image along with shapes and text layers, the plugin will use the selected image to populate selected shapes with the computed dominant color and set text layers to use the high-contrast fill color.</p><p>- If you selected shapes and text, but no image, the plugin will traverse outwards in your frame until it finds an image fill. This image will will then be used to populate the shapes and text with the dominant color and high-contrast text colors.</p><p><br></p><p>Note: This plugin supports both image fills and background fills, using the first valid fill it can find. As a result, a frame with a background fill that has children shape and text layers will populate successfully!</p><p><br></p><p>Secret options: If you'd like to text layers to the dominant color rather than high-contrast color, simply include the text \"dominant\" anywhere in the layer name!</p><p><br></p><p>This plugin is open source, contributions welcome: <a href=\"https://github.com/brianlovin/figma-dominant-color-toolkit\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">https://github.com/brianlovin/figma-dominant-color-toolkit</a></p><p><br></p><p>Credits</p><p><br></p><p>color-thief (<a href=\"https://github.com/lokesh/color-thief\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">https://github.com/lokesh/color-thief</a>) for finding dominant colors and generating palettes</p>","id":"744725347356614754","installCount":11573,"lastUpdateDate":"2021-10-15T22:49:50.442Z","likeCount":181,"name":"Dominant Color Toolkit 🎨","publisherHandle":"brian","publisherId":"22538","publisherName":"Brian Lovin","runCount":7139,"viewCount":10545},{"description":"Adds gradients to groups, text and frames in single click.\n\nSimply select the element to apply gradient and run the plugin. Chose from 350+ gradients to add to frames, groups, and texts in a single click.\n\nOffical figma plugin for www.uigradients.com","id":"744909029427810418","installCount":151283,"lastUpdateDate":"2019-09-04T22:40:03.396Z","likeCount":785,"name":"uiGradients","publisherHandle":"kns008","publisherId":"678","publisherName":"Kamal Nayan","runCount":95559,"viewCount":74742},{"description":"<p>Quickly apply a variety of performant layered shadows to your design. Always expected output, with limited knobs to turn and tweak.</p>","id":"744987207861965946","installCount":35977,"lastUpdateDate":"2022-05-22T11:17:23.015Z","likeCount":313,"name":"Shadowkit","publisherHandle":"M","publisherId":"574356","publisherName":"Mikael Weidenhielm","runCount":23630,"viewCount":24093},{"description":"A very simple plugin that takes a name,  description and status as input and generates a cover Image for your figma file.\n\nNow you can even update your project status by simply re running the plugin. The anme and description will be auto populated.\n\nStatus Update wont work for Covers generated with older versions. You need to run the plugin once agin to make it work.\n\nRoadMap\n- Workstream\n- Link to trello and Airtable.\n\nhttps://github.com/tushar7d/CoverGenerator-figma-plugin","id":"745146759001708690","installCount":3227,"lastUpdateDate":"2019-08-29T20:14:08.584Z","likeCount":16,"name":"Cover Generator","publisherHandle":"tushar","publisherId":"567","publisherName":"Tushar Debnath","runCount":2472,"viewCount":4970},{"description":"<h2><strong>Join thousands of users who use Figma and Zeplin together</strong></h2><p><br></p><p><strong>Stay in design flow, publish finalized designs for development</strong></p><p>Go further than specs by publishing finalized designs right from Figma. Developers get locked designs to build from, and you always have control&nbsp;of when versions are published.</p><p><br></p><p><strong>A limitless canvas designers love, the structured workspace the team needs</strong></p><p>Zeplin is an organized workspace that is friendly to the entire product team. Sections and Tags help the team easily understand designs, no need for extra documentation or design tool training.</p><p><br></p><p><strong>Take your design system further than ever before</strong></p><p>Extend your design system into the developer world with Zeplin. Showcase reusable components, including Figma Variants. Then, watch them go even further by connecting components to code.</p><p><br></p><p><strong>Zeplin provides a design workspace</strong>&nbsp;that helps teams deliver on the promise of design. It’s easy to&nbsp;publish finalized designs,&nbsp;and&nbsp;teams&nbsp;always have&nbsp;clarity on exactly what to build. Collaborating on designs is entirely different in Zeplin, which is accessible &amp; friendly to users without design backgrounds. Scale your design system into the developer world and connect component to code, all with Zeplin.</p><p><br></p><p><strong>TO GET STARTED:</strong></p><ol><li>Register for a Zeplin account:&nbsp;<a href=\"https://app.zeplin.io/signup\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://app.zeplin.io/signup</a>&nbsp;</li><li>Download the apps here:&nbsp;<a href=\"https://zpl.io/download-apps\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://zpl.io/download-apps</a></li><li>Watch&nbsp;<a href=\"https://youtu.be/SCtrpCY3AJI\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">our demo video</a>&nbsp;and publish your first design to Zeplin today!&nbsp;</li></ol><p><br></p><p><strong>📚&nbsp;Resources</strong></p><ul><li><a href=\"https://support.zeplin.io/en/articles/5225700-getting-started-with-figma-plugin\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Get Started with Figma Plugin</a></li><li><a href=\"https://support.zeplin.io/en/articles/5226179-figma-plugin-troubleshooting-guide\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Figma Plugin Troubleshooting Guide</a></li></ul><p><br></p><p>Check out the&nbsp;<a href=\"https://www.figma.com/community/file/1009889600441182642\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Design Delivery with Zeplin</a>&nbsp;file for a guided walkthrough, plus tips and tricks to optimize your workflow.</p><p><br></p><p>If you have any questions, feel free to reach out to us at&nbsp;support@zeplin.io.</p>","id":"745330164019088593","installCount":165580,"lastUpdateDate":"2022-07-26T15:19:05.055Z","likeCount":1260,"name":"Zeplin","publisherHandle":"zeplin","publisherId":"2","publisherName":"Zeplin","runCount":133636,"viewCount":184245},{"description":"This tiny faceless plugin will find and select for you all layers with missing fonts on current page.","id":"745394880974490845","installCount":6034,"lastUpdateDate":"2019-08-19T21:34:06.582Z","likeCount":32,"name":"Missing Font Selector","publisherHandle":"vadim","publisherId":"779","publisherName":"Vadim Pleshkov","runCount":3015,"viewCount":4623},{"description":"<p>Search and insert photos into your Figma files</p><p><br></p><p><strong>Features</strong></p><ul><li>Search and insert photos (including gifs) from Unsplash, Google, Flickr, Pixabay, Pexels, Giphy and Tenor</li><li>Select and insert multiple photos at once</li><li>Quickly insert a random set of photos</li><li>See which photos you have inserted and find back the original files</li></ul><h2><br></h2><p><strong>Free</strong></p><ul><li>20 photos per file from Unsplash, Pixabay, Pexels, Flickr, Giphy and Tenor</li></ul><p><br></p><p><strong>Basic account (</strong><a href=\"https://eminsinani.gumroad.com/l/figma-photos\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\"><strong>Subscription</strong></a><strong> or </strong><a href=\"https://eminsinani.gumroad.com/l/figma-photos-lifetime\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\"><strong>Lifetime</strong></a><strong>)</strong></p><ul><li>Unlimited photos from Unsplash, Pixabay, Pexels, Giphy and Tenor</li><li>20 photos per file from Flickr and Google</li></ul><p><br></p><p><strong>Pro account (</strong><a href=\"https://eminsinani.gumroad.com/l/figma-photos\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\"><strong>Subscription</strong></a><strong> or </strong><a href=\"https://eminsinani.gumroad.com/l/figma-photos-lifetime\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\"><strong>Lifetime</strong></a><strong>)</strong></p><ul><li>Unlimited photos from Unsplash, Pixabay, Pexels, Flickr, Google, Giphy and Tenor</li><li>Web photos: Load photos from any website link</li></ul><p><br></p><p><strong>Notes</strong></p><ul><li>Photo and user/info links can be found below the images</li><li>When using Google or Flickr photos, make sure to review the license information for both commercial and non-commercial use</li></ul>","id":"745428728979155171","installCount":61954,"lastUpdateDate":"2022-07-23T14:47:40.377Z","likeCount":217,"name":"Photos","publisherHandle":"eminsinani","publisherId":"649","publisherName":"Emin Sinani","runCount":53603,"viewCount":32746},{"description":"Figma plugin for making good typographic text.\n\nFeatures:\n— Removes hanging conjunctions.\n— Connects the number and the unit with non-breaking space.\n— Puts right quotes “outside and ‘inside’ proposals” instead of \" and '.\n— Removes double-spaces, double-dots.\n— Makes ©, ®, ™ from (c) and etc., -- turns to — , -> transforms to → mm3 turns to mm³.\n— And more...","id":"745519632050796775","installCount":8794,"lastUpdateDate":"2019-09-26T07:52:32.528Z","likeCount":101,"name":"Typograf","publisherHandle":"golmakov","publisherId":"407617","publisherName":"Aleksander Golmakov","runCount":6165,"viewCount":10436},{"description":"Get Waves is a free SVG wave generator to make unique SVG waves for your next design. Choose a curve, adjust the complexity, randomize!","id":"745619465174154496","installCount":249889,"lastUpdateDate":"2019-08-20T12:31:30.287Z","likeCount":1695,"name":"Get Waves","publisherHandle":"zimrick","publisherId":"1950387","publisherName":"Richard Zimerman","runCount":171665,"viewCount":170868},{"description":"Stacks provide extensive, semi-automated control over the spacing, direction and alignment of layers. \n\nHow-to:\nStacks are applied to a parent Frame or Component, and affect their child layers. To create a Stack, select either a single Frame or Component, or two or more layers, and choose ‘Create/Edit Stack’. When you make a change within a Stack, choose ’Update Selected Stacks’ or ‘Update All Stacks’ to update the layout. Pro tip: bind these to a keyboard shortcut to speed up your workflow.\n\nStack parameters:\n* Spacing: The amount of space separating layers.\n* Direction: Whether layers should be stacked horizontally or vertically.\n* Alignment: Whether layers should be aligned to the top, middle or bottom of their parent Frame or Component. This is optional, so layers can maintain their original alignment.\n* Anchoring: The corner to which the parent container resizes relative to.\n\nOther notes:\n* Stacks can be nested inside of other Stacks.\n* Stacks applied to Components also affect their instances. Instances cannot currently be overridden since Figma doesn't support overriding instance child layer positions.\n* Stacks carry over to different pages/documents if the element is copied and pasted to a different \n* Feature requests welcome :)\n\nRoadmap:\n[ ] If Figma adds support for triggering code on events, I’ll add functionality to update Stacks automatically when their contents are changed.","id":"745754288876102954","installCount":3335,"lastUpdateDate":"2019-09-03T11:22:32.741Z","likeCount":27,"name":"Stacks","publisherHandle":"rossupfield","publisherId":"431357","publisherName":"Ross Upfield","runCount":1749,"viewCount":5853},{"description":"This plugin helps you to create most common used export settings for iOS PNG icons, including a @2x size and a @3x size.\n\nEasy to use:\n\n Select items you wanna export, then click the button to add @2x and @3x export settings to them.","id":"745898698224781628","installCount":3692,"lastUpdateDate":"2019-10-29T08:35:16.244Z","likeCount":19,"name":"iOSPNGExporter","publisherHandle":"roxaosra","publisherId":"1836280","publisherName":"李大猫","runCount":1693,"viewCount":4366},{"description":"With «Wave & Curve» you can easily create a variety of waves and interesting patterns!\n\nFour modes are supported*: \n- with two control points (cubic curve); \n- with one control point (quadratic curve).\n- Arc curve.\n- Square curve.\n\nYou can choose the direction of the waves : Top and Bottom, Top, Bottom.\n\nLocks near the parameters (appear on hover) allow you to lock them for the Random.\n\n* This only matters at the time of generation, Figma converts all curves to cubic.","id":"745971189153303901","installCount":54811,"lastUpdateDate":"2020-03-20T07:28:10.245Z","likeCount":574,"name":"Wave & Сurve","publisherHandle":"Andreslav","publisherId":"629","publisherName":"Andreslav Kozlov","runCount":42619,"viewCount":60034},{"description":"List all font families and styles used in the document. And in which text layer.\nUseful to spot the oversights and keep a tidy fonts collection by showing all the fonts used in a glance.","id":"746097413727734148","installCount":63220,"lastUpdateDate":"2020-06-01T11:41:23.154Z","likeCount":529,"name":"Font Fascia","publisherHandle":"thenew","publisherId":"992366","publisherName":"thenew","runCount":55053,"viewCount":57164},{"description":"❖ OVERVIEW\nPaddi helps you to set paddings for a Group, a Frame, or a Component. When you specify the padding values in the component name you can change the elements inside the component and apply the paddings in one click. The component will automatically resize itself so that it surrounds all other elements within the component according to padding values.\n\nSpecify the padding values within the component group or frame name. E.g. button [12 24]. The format of the padding values is in the same order as CSS.\n\n❖ FEATURES\n✅ Paddi works with Groups, Frames, Components, Libraries.\n✅ Paddi is simple! The only thing you need to do is specify the paddings in the component name\n✅ Recognize components with paddings looking at their names. ⚡️ It works the same as in CSS.\n✅ Paddi is flexible. No limitation there, set the same padding for all sides [12] or different for each one [12 24 14 32].\n✅ Paddi uses a base element as a parent and calculates paddings from it.\n✅ Speed up your workflow! You don’t need to open plugin settings all the time you need to update paddings. You only need to rename the component and run the Paddi.\n✅ Natural master & instance behavior. If you change master component paddings, you don’t need to do anything else to update instances, Paddi will update all instances automatically.\n✅ Paddi works with libraries. Create a master component in your library file and apply the padding for all its instances in any project file. ⚠️ If you change padding for the master component in the library you will have to update all instances in the other files manually.\n\n❖ PADDINGS\nPadding values sets by clockwise from top to left sides. It works the same as in CSS. Examples:\n- [12] - padding for all sides - 12px\n- [12 24] - top&bottom - 12px, right&left - 24 px\n- [12 24 32] - top - 12px, right&left - 24px, bottom - 32px\n- [12 24 32 16] - top - 12px, right - 24px, bottom - 32px, left - 16px\n\n❖ FORMATS\nWe recommend to use space for separating padding values to keep it simple, however, you can use a comma as well. Examples:\n- [12 24]\n- [12, 24, 24, 12]\n\n❖ SET PADDINGS FOR A GROUP\n1. Create a rectangle. This element will be the base of the component\n2. Put some text or another shape inside the rectangle\n3. Group these elements\n4. Select the Group and whether rename the Group by adding e.g. [16 32] at the end of the name or just run Paddi to apply the default values - [12 24]\n5. Change text or resize elements inside the Group\n6. Select the Group and run Paddi again to apply the paddings\n\n❖ SET PADDINGS FOR A FRAME\n1. Write some text or create a shape\n2. Wrap it with a Frame\n3. ⚠️ In case you have only one element in the Frame the paddings will calculate from the Frame to its element. ⚠️ In case you have more than 1 element inside the Frame and want to use this Frame as the base you need to wrap all its elements with a Group\n4. Select the Frame and whether rename the Frame by adding e.g. [16 32] at the end of the name or just run Paddi to apply the default values - [12 24]\n5. Change text or resize elements inside the Frame\n6. Select the Frame and run Paddi again to apply the paddings\n\n❖ SET PADDINGS FOR A COMPONENT\n1. After you have a Group with some paddings create a master component from it\n2. Set constraints for the master component to make sure its instances will responsive correctly. Set Scale for the base and make sure all other elements have Left and Top\n3. Change elements and run Paddi. ⚠️ Because you can’t change elements position in an instance you will be able to change only the text elements and then apply the paddings\n\n❖ IGNORE\nTo ignore some elements in your component, rename the necessary ones with [ignore] or [nopaddi] at the end of its name.\n\n❖ IMPORTANT TO KNOW\n⚠️ The lowest element in a group or frame is going to be the base of the component! So don't forget to add a base.\n⚠️ The base element in your component will be marked as (base) in the layer name.\n⚠️ You can’t change paddings for instance because you can’t change its elements positioning. To handle it, go to the master component or detach the instance.\n⚠️ If you want to set a Frame as a base and specify paddings for it, wrap all elements inside this frame in a group to have only one element in the frame and then apply Paddi.\n\n❖ WHERE TO USE\n✅ Buttons\n✅ Tab items\n✅ Navigation items\n✅ Dropdown menus\n✅ Tags / Pils / Badges\n✅ Tooltips / Popovers\n✅ Icons\n✅ UI Cards\n✅ Modal dialogs\n✅ Sections\n✅ Etc.\n\n❖ SHORTCUT FOR MAC OS\nTo speed up your workflow add a shortcut to Paddi. It takes a minute to set up but keeps a lot of time later on.\nOpen System Preferences -> Keyboard -> Shortcuts tab -> App Shortcuts -> Add new:\n1. Application: Figma\n2. Menu Title: Paddi\n3. Keyboard shortcut: cmd+shift+P (You can use your own)\n\n---\n\n😎 MADE BY\nOleksandr Telnov & Mikhail Voloshin at Dumka.io","id":"746314565953874339","installCount":5099,"lastUpdateDate":"2019-10-25T10:50:34.888Z","likeCount":57,"name":"Paddi","publisherHandle":"dumkaio","publisherId":"1312969","publisherName":"Oleksandr Telnov","runCount":3747,"viewCount":4535},{"description":"Split your shapes, text layers, groups and frames into multiple instances. It's useful for when you need to generate columns and/or rows in a specific container without having to calculate the size manually. \n\n• Works with normal shapes, text layers, groups and frames\n• Add gutter in between those instances.\n• Add margin at the front and back.\n• Existing styles from the original shape (color, background image, etc) is preserved in all instances.\n\nIdeas & improvement:\n[✓] Remember previously entered option values\n[✓] No need to re-open plugin if you forgot to make a selection\n[   ] Turn those boring textfields into nicer numeric steppers\n[   ] Improve UI with icon / visual representation of each option\n[   ] ...?\n\nTweet at @gaddafirusli if you have other suggestions and ideas.\n\nSee usage examples & updates in my Twitter thread: https://twitter.com/gaddafirusli/status/1164894899453382656\n\n-------------------------------\nThis plugin is 100% inspired by kupe517's Sketch plugin of the same name: https://github.com/kupe517/sketch-split-shape","id":"746565487016656360","installCount":50340,"lastUpdateDate":"2019-08-29T01:45:11.376Z","likeCount":304,"name":"Split Shape","publisherHandle":"gaddafirusli","publisherId":"15141","publisherName":"Gaddafi Rusli","runCount":30565,"viewCount":30262},{"description":"<p>Avatars Generator creates unique, AI-generated photos of a fictional persons</p><p><br></p><p>How to use:</p><p>1. Select any shape (frame, rectangle, ellipse, polygon, star, vector, text, line, arrow)</p><p>2. Run the plugin and press \"Insert photos\" — it will fill a shape with a random photo</p><p><br></p><p>⚠️ Plugin supports multiple selection limited by 30 images at a time</p>","id":"746656816456492537","installCount":24879,"lastUpdateDate":"2022-03-08T16:32:16.986Z","likeCount":106,"name":"Avatars generator","publisherHandle":"kir_fesenko","publisherId":"215936","publisherName":"Kir Fesenko","runCount":24933,"viewCount":27646},{"description":"Make multiple renamed copies of components, frames or other layers in seconds.\n\n• Choose direction with command and create any amount of copies at a time\n• Completely keyboard accessible: name and create all of the copies in one approach to the keyboard.\n• The part after the last “/” is preselected automatically (use cmd/ctrl + a to select all if needed)\n• All copies would be selected and conveniently placed right under the prototype layer\n• Regulate distance between copies. Plugin remembers last value for the next time.\n\nHow to use:\n1. Select one layer that you want to copy. Works with Components, Frames and other types of layers.\n2. Call the plugin. The plugin has 4 different commands for cloning in all 4 directions.\n3. Name your copies. Use tab for creating another copy, so you can name all of them in one approach to the keyboard.\n4. (Optional) Hit Shift+Tab to focus on Shift input, then type the desired distance between the copies. The plugin will remember that value next time.\n4. Hit Enter to create your copies.\n\nAlso, visit this thread for video demo: https://twitter.com/aswellasyouare/status/1169334638805958658","id":"746805909751572002","installCount":3673,"lastUpdateDate":"2019-09-04T19:42:19.072Z","likeCount":66,"name":"Smart Cloner","publisherHandle":"vadim","publisherId":"779","publisherName":"Vadim Pleshkov","runCount":1505,"viewCount":3809},{"description":"When you delete a component, it can be still used in your mockups. On the other hand, unused components clutter up your document.\n\nSafely Delete Components does two things:\n\n🗑  Safe Delete\n\n1. Select a component you want to delete\n2. Go to Plugins > Safely Delete Components > Safe Delete (or ⌘+/ > \"Safe Delete\")\n3. This component will be deleted if there are no instances of it in the document\n\n🧹  Delete Unused Components\n\n1. Go to Plugins > Safely Delete Components > Delete Unused Components (or ⌘+/ > \"Delete Unused Components\")\n2. The plugin will find components with no instances and delete them\n\nWhen the plugin finishes its work, you'll see which components have been deleted.\n\nBe aware that this plugin can be very slow with large documents, especially when working with unused components.","id":"746849770992339499","installCount":4913,"lastUpdateDate":"2019-08-25T19:25:43.934Z","likeCount":48,"name":"Safely Delete Components","publisherHandle":"kondenko","publisherId":"135796","publisherName":"Vladimir Kondenko","runCount":3598,"viewCount":9373},{"description":"<p>Easily use the Golden Ratio just everywhere you need it. It's is a fantastic way to make harmonious layouts which look &amp; feel awesome. The plugin calculates the sizes and position of your selected items automatically!</p><p><br></p><h2>Features</h2><p>- Align your selection between the two parts of the Golden Ratio (Major &amp; Minor)</p><p>- Resize and align your selection to match the Major Golden Ratio part</p><p>- Round all size / position changes by multiplier of 8</p><p><br></p><p><br></p><h2>How to use it</h2><ol><li>Select a layer (it can be anything like Rectangles, Images, Text, Groups, Components, ...). Even multiple layers are supported</li><li>Right Click &gt; Plugins &gt; \"Golden Ratio Align &amp; Resize\"</li><li>Select one of the four methods</li></ol><p><br></p><p><br></p><h2>FAQ</h2><p><strong>What does the option \"Round by 8px\" mean?</strong></p><p>It rounds the automatically generated new position / size of your selection to the nearest multiplier of 8. This can be useful, if you work in the 8px Grid. E.g.: 90px -&gt; 92px, 87px -&gt; 88px, etc...</p><p><br></p><p><strong>What does the option \"Rotate direction\" does?</strong></p><p>It rotates the direction to either vertical or horizontal. The default setting is based on the width of your selection's parent frame. If its wider than tall, the direction of the Golden Ratio calculation is horizontal.</p><p><br></p><p><br></p><h2>Feature requests? 😊 Questions?</h2><p>Just hit me on Twitter (@madebyfabian), via mail (<a href=\"mailto:hello@madebyfabian.com\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">hello@madebyfabian.com</a>) or via an Issue on GitHub.</p><p><br></p><p>—</p><p><br></p><p>Made with ❤️ by Fabian B. in Nuremberg, Germany. Want to support me? Would appreciate that very much! <a href=\"http://buymeacoff.ee/madebyfabian\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">http://buymeacoff.ee/madebyfabian</a></p>","id":"747059755185517110","installCount":9508,"lastUpdateDate":"2020-10-29T07:02:54.600Z","likeCount":137,"name":"Golden Ratio Align & Resize","publisherHandle":"f","publisherId":"358726","publisherName":"Fabian B.","runCount":7275,"viewCount":11014},{"description":"This plugin automatically applies the correct export settings for every required iOS App Icon size and density. No more adding these settings manually, or looking up the latest size requirements from the iOS documentation.\n\nUsage\n\n1. Select a frame containing your app icon.\n2. Press `command + /` and search for 'iOS Export Settings'\n3. Run the plugin\n4. Press `command + shift + p` to re-run the plugin instantly","id":"747172434405306948","installCount":24077,"lastUpdateDate":"2019-11-20T01:58:33.858Z","likeCount":166,"name":"iOS Export Settings","publisherHandle":"brian","publisherId":"22538","publisherName":"Brian Lovin","runCount":13304,"viewCount":25324},{"description":"<p>Thank you very much and I would like it before the reviews and suggestions and I have any ideas about function.</p><p><br></p><p>This plugin <strong>make a previews for the fonts and colors </strong>used on the layouts or from your styles.</p><p>By default it used \"local styles\" but you can use \"from layouts\" option.</p><p><br></p><p>** Be careful with the \"from layouts\" option, it can be slow and pause the interface for a while</p><p>* For generate \"from layouts\" an additional option is also available, for skip elements with color \"#4C4C4C\" (default color for figma shapes)</p><p><br></p><p>need redesign for V2</p><p><a href=\"http://paypal.me/onfocus\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">paypal.me/onfocus</a><code></code></p>","id":"747227147599827533","installCount":32158,"lastUpdateDate":"2022-05-04T19:29:38.296Z","likeCount":106,"name":"UI Kit","publisherHandle":"focus_at","publisherId":"716615","publisherName":"Дмитрий","runCount":25381,"viewCount":42404},{"description":"Easily export assets from Figma directly into a .zip file.\n\nUsage\n\n1. Select anything in Figma\n2. Press `command + /` and search for 'Export .zip'\n3. Run the plugin - your selection and all export settings will be used\n4. `command + shift + p` to re-run the plugin instantly","id":"747228167548695118","installCount":5109,"lastUpdateDate":"2019-08-26T15:33:40.299Z","likeCount":60,"name":"Export .zip","publisherHandle":"brian","publisherId":"22538","publisherName":"Brian Lovin","runCount":2898,"viewCount":5926},{"description":"This plugin Generates a Scaffold for your Product design project in just 1 click.\n\nIt adds the following pages\n- Cover Page\n- Refference Page \n- UX approaches\n- Content Approaches\n-UI Approaches\n- Final UI\n- Prototype\n\nGithub Link - https://github.com/tushar7d/Project-Scaffold-Figma-Plugin","id":"747372158567878238","installCount":2970,"lastUpdateDate":"2020-02-02T04:15:20.601Z","likeCount":89,"name":"Project Scaffold","publisherHandle":"tushar","publisherId":"567","publisherName":"Tushar Debnath","runCount":1563,"viewCount":4469},{"description":"<p>Simple todo list plugin to check off your tasks inside Figma!</p><p><br></p><p><strong>Features</strong></p><ul><li>Add, check off or delete tasks</li><li>Updates instantly when other users make changes</li><li>Copy a list (or some stickies) and paste into the plugin to create multiple tasks</li><li>Easily minimize the window to focus on your work</li></ul><p><br></p><p><strong>Wishlist</strong></p><ul><li>Multiple lists</li><li>Sub tasks</li><li>Custom window / list title</li></ul>","id":"747822968977461925","installCount":50900,"lastUpdateDate":"2022-05-15T09:22:14.170Z","likeCount":497,"name":"Todo","publisherHandle":"eminsinani","publisherId":"649","publisherName":"Emin Sinani","runCount":39261,"viewCount":31618},{"description":"<p>Quicky jump to any page in your file with this handy utility plugin.</p><p><br></p><p>Ust CTL+ / to open the Figma search, type in 'Jump' to and launch the plugin.</p><p><br></p><p>Start typing the name of the page you'd like to go to -&gt; and jump to it.</p><p><br></p><p>You hands can stay on the keyboard =)</p><p><br></p><p>No need to browse through a long list of pages to find the one you want.</p><p><br></p><p>Feel free to contribute and fork  - https://github.com/arbel/Page-Jumper</p>","id":"747923738427824830","installCount":2320,"lastUpdateDate":"2021-12-18T17:07:17.083Z","likeCount":50,"name":"Page Jumper","publisherHandle":"arbel","publisherId":"121591","publisherName":"Idan Arbel","runCount":1259,"viewCount":3692},{"description":"<p>Convert Figma designs to high quality, responsive HTML, CSS, React, Vue, and more</p><p><br></p><p>* How does it work *</p><p><br></p><p>1) Install the plugin</p><p>2) In Figma hit cmd+/ and search \"html to figma\" and hit enter</p><p>3) Select a layer you want to export, or enter a URL you want to import</p><p><br></p><p>* Why? *</p><p><br></p><p>- Turn your design into responsive HTML+CSS, React, Vue, Liquid, Solid, and more</p><p>- Quickly turn real site components into design components</p><p>- Easily import real live site styles for a starting point for designs and prototypes</p><p><br></p><p><br></p><p>* Limitations *</p><p><br></p><p>Importing HTML layers to Figma and exporting designs to code are a best-effort process. Even getting 90% there can save you a ton of time, only having to clean up a few things.</p><p><br></p><p>A few known limitations:</p><p><br></p><p>- not all element types are supported (e.g. iframe, pseudoelements)</p><p>- not all CSS properties are supported or fully supported</p><p>- not all types of media are supported (video, animated gifs, etc)</p><p>- all fonts have to be uploaded to Figma or a best effort fallback will be used</p><p><br></p><p>If you find any issues or have feedback at all please make an issue or send a pull request for an improvement!</p><p><br></p><p>* Chrome extension *</p><p><br></p><p>Want to capture a page that you need to navigate to or is behind an auth wall? Then the Chrome Extension is for you!</p><p><br></p><p><a href=\"https://chrome.google.com/webstore/detail/html-to-figma/efjcmgblfpkhbjpkpopkgeomfkokpaim\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">https://chrome.google.com/webstore/detail/html-to-figma/efjcmgblfpkhbjpkpopkgeomfkokpaim</a></p><p><br></p><p>* Open Source *</p><p><br></p><p>This plugin is open source at <a href=\"https://github.com/builderio/html-to-figma\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">https://github.com/builderio/html-to-figma</a></p><p><br></p><p>Feedback and contributions welcome!</p><p><br></p><p>Made with ❤️ by <a href=\"http://Builder.io\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">Builder.io</a></p>","id":"747985167520967365","installCount":318329,"lastUpdateDate":"2021-11-30T22:45:23.108Z","likeCount":2686,"name":"Figma to HTML, CSS, React & more!","publisherHandle":"builder","publisherId":"911278770706459305","publisherName":"Builder.io","runCount":259778,"viewCount":411586},{"description":"Your perfect design needs the perfect gif.\n\nHOW TO USE:\n1. Search\n2. Find the perfect gif\n3. Click on it\n\nHave fun 🥳","id":"748092648919348948","installCount":27764,"lastUpdateDate":"2019-08-30T09:31:18.875Z","likeCount":88,"name":"Gifs","publisherHandle":"cdes","publisherId":"26415","publisherName":"Ahmad Al Haddad","runCount":21145,"viewCount":17082},{"description":"Integration plugin for respresso (https://respresso.io/), which is a collaborative asset management tool for multiplatform projects. You can send your digital assets (texts, images, colors, app icons) into Respresso with a single click.\n\nPlease read our documentation before you export assets from Figma: https://github.com/pontehu/respresso-figma\n\nRespresso is free for the time beign and we don't want to change this offer in short time :) Don't waste your time! Use Respresso.","id":"748148555375738597","installCount":1107,"lastUpdateDate":"2020-03-27T08:11:29.932Z","likeCount":20,"name":"Respresso","publisherHandle":"465039","publisherId":"465039","publisherName":"business.analyst","runCount":528,"viewCount":6726},{"description":"<p>Contrast makes it easy to check the contrast ratios of colors as you work. Select a layer and Contrast will immediately look for the color directly behind your selection and serve up the contrast ratio along with passing and failing levels from the Web Content Accessibility Guidelines (WCAG). If Contrast cannot find the background color, add another layer to your selection, and Contrast will compare them both.</p><p><br></p><p>Are you looking to give everything a once-over before finishing? Scan entire pages to generate a report of all text-based contrast issues. Step through them and fix issues as needed.</p><p><br></p><ul><li>Select elements to automatically find the color behind them</li><li>Scan entire pages to see all text-layer color issues</li><li>Works on any element, not just text</li><li>Extremely fast and responsive—keep it open as you work</li><li>Supports image and gradient backgrounds with Smart Sampling</li><li>Supports solid, transparent, blended fills, layered fills, and backgrounds</li><li>Live updates as you change the color, opacity, or blend of the selected element</li></ul><p><br></p><h2>Smart Sampling</h2><p>Contrast can compare an element’s color with the colors it finds in gradients and images in the background. It does this by taking a sampling of colors from the area directly behind the element and calculating the contrast ratio for each color. Contrast considers a color passing if all colors in the sample pass.</p><p><br></p><h2>Bugs</h2><p>If you have a situation where Contrast is not finding the right background, please let us know! Send us an example test case in Figma along with a short description of what you were expecting, and we’ll have a look.</p><p><br></p><h2>Known Issues</h2><ul><li>Element strokes are not yet supported</li></ul><p><br></p><h2>Smart Sampling Technique</h2><p>Contrast uses <a href=\"https://github.com/leeoniya/RgbQuant.js/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">RGBQuant</a> to analyze the selection of pixels behind an element. It looks for colors (pixels) that are represented two or more times within each sub-region (64x64) of the area tested. This method gives the best balance of speed and results. The time it takes Contrast to sample and analyze the colors is proportional to the size of the layer you are testing. I.e., Larger layers, in terms of area, will take longer than smaller areas. Sampling can temporarily block the interface in the same way that exporting a frame might—this shouldn’t be very noticeable for smaller layers.</p><p><br></p><h2>Credits</h2><p>Contrast was made by the Maark design team.</p>","id":"748533339900865323","installCount":171861,"lastUpdateDate":"2022-05-11T20:38:39.611Z","likeCount":1713,"name":"Contrast","publisherHandle":"6bf381fd_7d7d_4","publisherId":"984548590427335154","publisherName":"Maark","runCount":136289,"viewCount":145551},{"description":"<p>A simple plugin which helps you to replace any selection with components or instances</p><p><br></p><p>How to use:</p><p>Select any frame, object, component or an instance and chose from the list of components in the plugin to replace it with.</p><p><br></p><p>Note: The selection will be removed from the document after replacing with the new component/instance unless the \"Preserve Selection\" option is enabled from the settings pane.</p><p><br></p><p>The plugin has three configurable settings currently :</p><p><br></p><p>⦿ Preserve Selection : When enabled, the selection will not be removed from the document instead it stays below the replaced component/instance hidden</p><p><br></p><p>⦿ Replace with Instance : When enabled, the selection will be replaced with an instance instead of a cloned component</p><p><br></p><p>⦿ Show current page components: When enabled, the plugin lists only the components from the current page</p><p><br></p><p>Roadmap:</p><p>[x] Search components in the list</p><p>[ ] Visually represent the component heirarchy if the naming conventions are defined</p>","id":"748545064462894895","installCount":22701,"lastUpdateDate":"2020-03-29T10:21:36.862Z","likeCount":288,"name":"Component Replacer","publisherHandle":"nitin","publisherId":"21180","publisherName":"Nitin Gupta","runCount":20240,"viewCount":35657},{"description":"1. Select one or several instances\n2. Call the plugin\n3. Done! All first-level instances inside selection is now reset to the size of their Master Components\n\nThe plugin will reset the size of all top-level instances in selection. Instances inside of the other instances will remain unaffected, as well as frames, groups, components or any other layers within the selection.","id":"748762621505012566","installCount":1593,"lastUpdateDate":"2019-09-03T21:42:00.851Z","likeCount":12,"name":"Reset Size","publisherHandle":"vadim","publisherId":"779","publisherName":"Vadim Pleshkov","runCount":465,"viewCount":1575},{"description":"Open documentation pages from your components.\n\n—————————————————————————————————\nHow to use:\n\nAdd Link:\n1. Select a layer/component and run Link to Documentation > Add Link.\n2. Enter a URL to your documentation page.\n3. Optionally, you can check \"Add 📖  emoji to layer name\" so it will be easier to tell which layers have documentations links.\n4. Click \"Add Link\".\n\nIf you are adding a link to a component, it is recommended to add it to the master component so all its instances will have access to the same link.\n\nIf you are adding a link to a team library component, make sure to publish an update of the library so other files using this component will have access to the link as well.\n\nRemove Link:\n1. Select a layer/component and run Link to Documentation > Remove Link.\n\nView Documentation:\n1. Select a layer/component with a documentation link. (See above)\n2. Run Link to Documentation > View Documentation.\n\n—————————————————————————————————\nNote:\nPlugins are currenly not available to users with read-only access to files. To work around this limitation, have your read-only users duplicate the file as a draft and use the plugin on their own copies.","id":"748783469068559194","installCount":9296,"lastUpdateDate":"2020-02-04T19:55:58.821Z","likeCount":113,"name":"Link to Documentation","publisherHandle":"jackie","publisherId":"938135745447716877","publisherName":"Jackie Chui","runCount":5085,"viewCount":12033},{"description":"It’s easy for developers and designers to know exactly what color to use when your colors have semantic names. Primary600? That name doesn't mean much. PrimaryButtonLabel? That's clear as can be.\n\nThis plugin makes it simple to maintain a collection of semantically named colors that derive their color from your base palette. Not only does this allow you to increase clarity of usage, it also lays the foundation necessary for theming within your apps. \n\nFor more details on why you should implement your colors this way, read this blog post:\nhttps://dev.to/ynab/a-semantic-color-system-the-theory-hk7\n\nUsing Semantic Color Sync is simple. First, create your base palette. For each base palette color, add a consistent prefix, such as “.palette/”\n\nNext, create a series of semantically named colors. In the description for each semantically named color, add the base palette color it derives from (including the prefix). For example: “.palette/primary600”\n\nNext, when you decide to change your primary hue from blue to bright pink (good choice, btw), the Semantic Color Sync plugin will automatically search through every semantically named color and update their color to match the updates made in your base palette. \n\nNo need to update things by hand... Ugh. Just tweak your base palette and run this plugin to propagate the changes throughout all of your semantically named colors!\n\nAnd again, if you’re curious why this is useful, this blog post has it all laid out: \nhttps://dev.to/ynab/a-semantic-color-system-the-theory-hk7","id":"748971588750337968","installCount":1552,"lastUpdateDate":"2020-02-27T18:44:48.679Z","likeCount":83,"name":"Semantic Color Sync","publisherHandle":"YNAB","publisherId":"1890","publisherName":"Product","runCount":1031,"viewCount":3880},{"description":"If you prefer to keep your components on a separate page and are tired of carrying them manually, this plugin is for you.\n\n1. Select any number of Components. Frame, group, or just group selection will also work.\n\n2. Call up the plugin. All components from the selection will be transferred to a separate Components page and placed in a special Unsorted Components frame. The places occupied by the components will be substituted by their instances.\n\nThe plugin has two independent commands to choose from:\n\nSend to components page\n(For a quick search, print snc)\n\nWhen this command is invoked, the Components are sent to a separate page while staying on the same page.\n\nSend to components page and go to\n(for a quick search, print sngo)\n\nWhen this command is invoked, after moving components the focus is moved to the components page, and all newly transferred components are selected.\n\nAll components are placed in a special frame only for predictability, and you are welcome to extract the characters from the frame and organize them as you wish. See it as a predictable arrival point for new components.\n\nAlthough the presence of components in the frame will not prevent further calls (i.e. you can securely call the plugin several times in a row), the plugin looks up at the contents of the frame every time, so for better performance, it makes sense to keep it as empty as possible.\n\nA few details:\n\n- If you already have a page named \"Components\" or \"Symbols\", the plugin will use it to place its frame. If the page doesn't exist plugin will create it and use afterward.\n- If the page or frame has been deleted, the plugin will recreate the new ones at the next call\n- You can rename the components page or frame as you wish.","id":"749061307736645564","installCount":3162,"lastUpdateDate":"2019-09-09T21:36:26.499Z","likeCount":41,"name":"Send to Components Page","publisherHandle":"vadim","publisherId":"779","publisherName":"Vadim Pleshkov","runCount":1773,"viewCount":3987},{"description":"Use your own real JSON data to populate your text layers. No longer fill your designs with lorem ipsum or irrelevant names, objects, places and more.\n\nHow to use: \n1. Write your JSON as one big object containing arrays with a key as name. Example can be seen in the screenshot or on the git repo. \n2. Enter the url in the plugin and press save\n3. Select one or more text layers and press one of the buttons generated based on your JSON to replace the text layer(s).\n\nExtra:\nHost your JSON on some repo so it's easily maintanable. You could also use a free service such as 'myjson.com'. Your URL should be saved on this instance of Figma. However keep a backup of the url just in case you switch to a different computer or between browser/desktop often. \n\nRoadmap:\n- Better error handling\n- Support more JSON structures\n- Use local JSON/paste JSON","id":"749195619095691211","installCount":3342,"lastUpdateDate":"2020-01-06T11:44:23.444Z","likeCount":39,"name":"JSON Populate","publisherHandle":"bart","publisherId":"840937","publisherName":"Bart S.","runCount":2059,"viewCount":5428},{"description":"The first video game implemented as a Figma plugin is also the first video game ever: Pong. \n\nOnly one user needs to install and run the plugin. Invite a member of your team to join with Figma's multiplayer cursors and drag around the other paddle.","id":"749261072790710247","installCount":2709,"lastUpdateDate":"2020-03-04T07:55:51.590Z","likeCount":32,"name":"Multiplayer Pong Game","publisherHandle":"kevin","publisherId":"2337","publisherName":"Kevin Kwok","runCount":1794,"viewCount":3551},{"description":"Create a component (like you would in Sketch) that lives on a dedicated \"Components\" page.\n\nHow it works:\n1. Make a selection\n2. Run the \"Make Component\" function in the plugin\n3. A new Master Component will be created on the components page leaving an instance in place\n\nYou can even create multiple components from a selection all at once if you enable this option.\n\nThis plugin also has a secondary function called \"Collect stray components\". This function will find all master components outside of the dedicated components page, and move them to that page leaving an instance in place.","id":"749583881837062159","installCount":8992,"lastUpdateDate":"2020-02-11T13:51:26.295Z","likeCount":185,"name":"Component Page","publisherHandle":"tom","publisherId":"35","publisherName":"Tom","runCount":5786,"viewCount":12442},{"description":"<p>This plugins allows you to copy SVG code as a react component so that you don't have to transform it.</p><p><br></p><p>How to use:</p><p><br></p><p>- Click an icon or anything you want as a JSX with the right mouse</p><p>- Click plugins and then click on 'SVG to JSX'</p><p><br></p><p>JSX 🎉</p><p><br></p><p>GitHub: <a href=\"https://github.com/SaraVieira/svg-to-jsx\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">https://github.com/SaraVieira/svg-to-jsx</a></p>","id":"749818562498396194","installCount":6919,"lastUpdateDate":"2021-03-06T12:22:23.334Z","likeCount":84,"name":"SVG to JSX","publisherHandle":"SaraVieira","publisherId":"355456","publisherName":"Sara Vieira","runCount":3721,"viewCount":7329},{"description":"<p>Add country flags to your figma designs.</p><p><br></p><p>Features</p><p>- Search for flags by country name or code</p><p>- Choose between squared and non-sqared flags</p><p><br></p><p>Next steps:</p><p>- Configurable size</p><p><br></p><p>Build with <a href=\"http://flagicons.lipis.dev\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">flagicons.lipis.dev</a></p><p><br></p><p>Send feedback, suggestions or issues at <a href=\"https://github.com/herrmannplatz/figma-country-flags-plugin/issues\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://github.com/herrmannplatz/figma-country-flags-plugin/issues</a></p>","id":"749888869584535589","installCount":22457,"lastUpdateDate":"2022-03-08T12:04:59.314Z","likeCount":150,"name":"Flags","publisherHandle":"2120254","publisherId":"2120254","publisherName":"Rene Herrmann","runCount":20084,"viewCount":18952},{"description":"<p>Enables designers to display beautiful generated avatars 📸 in your design prototype.</p><p><br></p><p>---</p><p><br></p><p>Hello there 👋 🤓, I am excited to announce the User Profile plugin now also for Figma. Please treat it as an early start as something simple and easy to use. Reach out to 👉 <a href=\"http://www.janisrozenfelds.com/user-profile-plugin\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">www.janisrozenfelds.com/user-profile-plugin</a></p><p><br></p><p>Submit your ideas 😃 and suggestions:</p><p>✍️ <a href=\"https://userprofile.nolt.io\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://userprofile.nolt.io</a></p><p><br></p><p>As always, stay awesome 🙌.</p><p><br></p><p>---</p><p><br></p><p>👉 How to use plugin:</p><p>1. Select any shape</p><p>2. Run the plugin, and it will fill with a random photo 📸.</p>","id":"749945157855564842","installCount":96048,"lastUpdateDate":"2022-07-10T03:16:27.496Z","likeCount":395,"name":"User Profile","publisherHandle":"janisrozenfelds","publisherId":"1922423","publisherName":"Janis Rozenfelds","runCount":88230,"viewCount":57971},{"description":"Listen to your favourite playlist.\n- Preloaded with 'Deep Focus' playlist.\n- Load any youtube playlist by list id\n\n---\n\nUsage:\n1. Go to any public playlist on Youtube.\n2. You should see a url like: \"https://www.youtube.com/playlist?list=PLFMTDS4p0b5hSxRVlab3wwbZwKTjUxa2L\", copy that.\n3. Run the plugin.\n4. Paste and click on 'load'.\n5. ⏯ 😇 ☮️","id":"750049905488948276","installCount":1924,"lastUpdateDate":"2019-09-12T16:40:46.057Z","likeCount":13,"name":"Deep Focus","publisherHandle":"558292","publisherId":"558292","publisherName":"Shankar","runCount":1052,"viewCount":2097},{"description":"<p>Cheat sheet on Social Media image sizes. All in one place!</p><p><br></p><p>The plugin contains presets for image sizes of social networks (not only!), which allows you to quickly begin directly to design development.</p><p><br></p><p>Social media:</p><p>1. VK;</p><p>2. YouTube;</p><p>3. Rutube;</p><p>4. Twitter;</p><p>5. Facebook;</p><p>6. Instagram;</p><p>7. OK;</p><p>8. Twitch.tv;</p><p>9. LinkedIn;</p><p>10. Dribbble;</p><p>11. Figma;</p><p>12. Pinterest;</p><p>13. Ozon;</p><p>14. Wildberries;</p><p>15. Tumblr;</p><p>16. Soundcloud;</p><p><br></p><p>How to use:</p><p>- Run the plugin;</p><p>- Find the desired media;</p><p>- Select creative;</p><p>- Done;) A frame for your design will appear on the canvas.</p><p><br></p><p>Found a bug or want to add image size? Write to: <a href=\"http://twitter.com/AndreslavKozlov\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">twitter</a> or <a href=\"https://vk.com/private.designer\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">vk</a></p>","id":"750116735703341112","installCount":17505,"lastUpdateDate":"2022-07-14T12:59:15.991Z","likeCount":207,"name":"Social Media Images Size","publisherHandle":"Andreslav","publisherId":"629","publisherName":"Andreslav Kozlov","runCount":12884,"viewCount":19016},{"description":"Share your mockups directly to Chrome so developers have a pixel-perfect visual reference to build from.\n\n** How it works **\n\n1. When you're ready to share your mockups, use the plugin to create a new screen. You can add mobile, tablet and desktop sizes and notify the developer via email that things are good to go.\n\n2. The developer uses the Chrome plugin to overlay the mockups directly in the browser window as they build. It gives them a pixel-perfect visual guide that makes it easier than ever to match your mocks more closely.\n\n---\n\nNote: The first time you run the plugin in a new file, you'll need to copy the \"Share URL\" for the Figma file into Doodlebug. This lets Doodlebug keep everything in-sync via the API. It only needs to be done once per file.","id":"750133948866339898","installCount":1491,"lastUpdateDate":"2020-04-05T22:37:43.948Z","likeCount":42,"name":"Doodlebug","publisherHandle":"nickstamas","publisherId":"39549","publisherName":"Nick Stamas","runCount":1155,"viewCount":3497},{"description":"<h2>Note:</h2><p>I do not plan to update this plugin as Figma has released bullet list functionality into the core tool.  In most all cases, using the bullet list feature built into Figma will likely yield better results.  Thanks to everyone that has used the tool up to this point 💕🎉</p><p><br></p><p>For information on how to use the new bullet list feature, <a href=\"https://help.figma.com/hc/en-us/articles/360040449773-Bulleted-and-numbered-lists\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">this article</a> should help you out.</p><p><br></p><p>-----------------------------------------------</p><p><br></p><p>Simple bullets makes it easy to add bullets in text layers. Just select the layers you want to add bullets to, and run the plugin!</p><p><br></p><p>How to use:</p><p>1. Select the text layers you want to add bullet points to</p><p>2. Run Simple Bullets</p><p><br></p><p>Roadmap:</p><p>✅ Handle multiple fonts within 1 text layer</p><p>• Easily remove bullet points</p><p>• UI with customisable options</p><p><br></p><p>Feature requests and support:</p><p>Feel free to email me at <a href=\"mailto:michael@mtmeyer.net\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">michael@mtmeyer.net</a></p>","id":"750174581284816960","installCount":15242,"lastUpdateDate":"2020-01-20T23:51:30.425Z","likeCount":55,"name":"Simple Bullets","publisherHandle":"mmeyer","publisherId":"107928","publisherName":"Michael Meyer","runCount":12684,"viewCount":19749},{"description":"<p>Delete all hidden layers (also locked) at current or inside selected frame page except layers in components.</p><p><br></p><p><strong>How to use:</strong></p><p>1. Press \"Cmd+/\" on Mac or \"Ctrl+/\" on Windows and just start type \"Delete\"</p><p>2. Choose \"Delete hidden layers\"</p><p>3. Done ;)</p>","id":"750292779381900360","installCount":6047,"lastUpdateDate":"2022-04-01T19:51:01.163Z","likeCount":62,"name":"Delete Hidden Layers","publisherHandle":"loginblogin","publisherId":"250","publisherName":"Login Blogin","runCount":4523,"viewCount":9418},{"description":"<p>Button Generator does what it says on the box, it generates button components with no fuss.</p><p><br></p><p>You can create primary or secondary buttons being able to control properties such as:</p><p>• Button size</p><p>• Corner radius</p><p>• Stroke size</p><p>• Button &amp; text color</p><p>The generated button components have constraints already set to make resizing buttons a breeze.</p><p><br></p><p>How to use:</p><p>1. Run Button Generator</p><p>2. Enter the properties of your button in the UI</p><p>3. Click Create Button</p><p><br></p><p>Roadmap:</p><p>1. Font selection within the plugin UI</p><p>2. Preview of the button within the plugin UI</p><p>3. Reusable button 'styles'</p><p><br></p><p>Feature requests and support:</p><p>Feel free to email me at <a href=\"mailto:michael@mtmeyer.net\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">michael@mtmeyer.net</a></p>","id":"750298912003944521","installCount":33929,"lastUpdateDate":"2022-06-27T08:52:02.640Z","likeCount":156,"name":"Button Generator","publisherHandle":"mmeyer","publisherId":"107928","publisherName":"Michael Meyer","runCount":28779,"viewCount":28624},{"description":"Inspired by the original \"Resize Commands\" plugin for Sketch (https://github.com/ajilderda/Sketch-Resize-Commands), this plugin lets you resize one or multiple layers with simple commands, by typing them like so: \"l+50\". You can also combine multiple commands by seperating them with a comma, like so: \"l+50,r+20\". If you check the box \"Ignore Constraints\", the elements will be resized without applying the individual constraints.\n\nDeveloped at Syncier.\n\nThe following directions are supported at the moment:\nl -> left\nr -> right\nt -> top\nb -> bottom\nw -> width (same as \"right\")\nh -> height (same as \"bottom\")\nx -> x-axis\ny -> y-axis\n\nThe following operators are supported at the moment:\n+ -> plus\n- -> minus\n= -> set x, y, w or h\n\nYou can apply the command by hitting \"Enter\".","id":"750394507756587098","installCount":964,"lastUpdateDate":"2019-10-22T15:55:33.117Z","likeCount":31,"name":"Resize Commands","publisherHandle":"mark_f_meyer","publisherId":"2125240","publisherName":"Mark Meyer","runCount":302,"viewCount":1133},{"description":"<p>Change multiple texts in a batch, without having to click on each of them first. Paste new-line delimited texts into the several layers at once.</p><p><br></p><h2><strong>How the plugin works:</strong></h2><p>• Plugin will find every visible, unlocked text layer, and show you the input for each of them, letting you change all the texts in one take.</p><p>• Plugin is aware of text layer positions and nesting layers, and ordering inputs depending on layer positions from top left to bottom right.</p><p>• Completely keyboard accessible — select next field with TAB, change texts with ENTER, cancel with ESC</p><p><br></p><h2><strong>How to use:</strong></h2><p><strong>1. Select all the layers you want to be changed.</strong> If there is a Group or Frame within the selection, the plugin will find every unlocked visible text layer inside the selection.</p><p><br></p><p><strong>2. Call the plugin and change texts in the needed layers.</strong> Navigate between fields with Tab / Shift+Tab.</p><p><br></p><p>You also can paste multiple lines at once. Hold Shift while pasting, and every new line from copied text will be pasted into its own field.&nbsp;</p><p><br></p><p>Copying with Shift will copy texts from currently selected input and all inputs down from it will be copied to clipboard with new lines as delimiters. (It is handy to past the set of text in another group of layers using Retextifier)</p><p><br></p><p><strong>3. Click \"Change\" or press Enter.</strong> All changes would be applied. Mixed formatting for the layers that have been changed will be dropped.</p><p><br></p><p>See some details and video preview on Twitter:<a href=\"https://twitter.com/aswellasyouare/status/1179063309280174081\" rel=\"noreferrer noopener nofollow\" target=\"_blank\"> https://twitter.com/aswellasyouare/status/1179063309280174081</a></p><p>Also, follow me there to not miss new updates and announcements.</p><p><br></p><h2><strong>Added in version 4:</strong></h2><p>• Text layer corresponding with the currently active input now selected on canvas, so you can see more clearly which layer you will be changing.</p><p>• Input orders now depend on position and nesting of the layers. If the top leftmost object among the selected is a group or a frame, all the text layers inside it will be placed in the list of inputs first, and so on.</p><p>• Now you can copy multiple layers from inputs. When you press Cmd+Shift+C texts from the currently selected input and all inputs down from it will be copied to clipboard with new lines as delimiters.</p><p>• Now tabs also work as delimiters with multiline paste. With that, you can copy-paste rows from Google Sheets and other places.</p><p><br></p><h2><strong>Added in version 10:</strong></h2><p>• Now the plugin finally works correctly on Windows! Had to implement some tricky logic handling new lines on Windows, and now everything should work as expected.</p><p>• Starting from this version, the plugin preserves the name of the layer when changing the text. This will ensure that changing the texts won't disrupt smart animate or propagating defaults from main components into instances. Whenever you need to match layer name back to the text content, you could use “Reset Text Layer Name” plugin.</p><p><br></p><p><br></p>","id":"750499296698468459","installCount":9239,"lastUpdateDate":"2021-06-18T20:58:25.090Z","likeCount":184,"name":"Retextifier","publisherHandle":"vadim","publisherId":"779","publisherName":"Vadim Pleshkov","runCount":7038,"viewCount":16443},{"description":"<p>Create mockups in Figma easily by getting access to thousands of world-class quality Artboard Studio mockup items right inside your Figma files. Easily render Figma frames into real-life product mockups with a click of a button. More items are added to our ever-growing library every day.</p><p><br></p><p>Demo video: <a href=\"https://www.youtube.com/watch?v=nlfhPeAvK4Q\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">https://www.youtube.com/watch?v=nlfhPeAvK4Q</a></p><p><br></p><p>How to use:</p><ol><li>Follow the on-screen guide and create a secret API key on Artboard Studio.</li><li>Paste your secret API key into the plugin window, save and start adding mockup items right into your current Figma file.</li><li>All imported items are fully layered and customizable.</li><li>Items that have renderable labels come with relevant frames. Copy and paste your designs into those frames, make sure the frame is selected and click Render Selected Frame.</li><li>You can resize frames and mockup items, it will still work as long as you keep the aspect ratio.</li><li>To unlock access to our premium items, subscribe to one of our premium plans. It will automatically unlock all items next time you use the Artboard Studio plugin in Figma.</li><li>Use the menus on the top of the items to search and filter items based on name, viewpoint, and category.</li><li>Happy Designing 😉</li></ol><p><br></p><p>Road map:</p><ol><li>Enabling \"Quick Render\" for Figma browser (due to an unknown bug it currently only works on the the desktop version of Figma)</li><li>Ability to assign your current frames to Artboard Studio mockup items.</li><li>Automatically render frame changes into mockup items (we are waiting for Figma team to release long-running plugins and events for plugins)</li><li>Adding more items every day will never leave our road map, check back every day to see new items fresh out of the oven 😋</li></ol>","id":"750673765607708804","installCount":188460,"lastUpdateDate":"2021-08-09T06:20:08.739Z","likeCount":1847,"name":"Artboard Studio Mockups","publisherHandle":"artboardstudio","publisherId":"86679","publisherName":"Artboard Studio","runCount":168115,"viewCount":169916},{"description":"With Easometric it is really easy to create isometric layers & groups.\n\nThis plugin using SSR30⁰, which is the most popular and flexible method of creating isometric artworks. With SSR30⁰ you can quickly create top, left and right isometric views.\n\nSimple as that you can either quick apply a top, left or right perspective or using the modal to modify your layer.","id":"750743440401413268","installCount":92925,"lastUpdateDate":"2022-05-10T17:02:31.077Z","likeCount":714,"name":"Easometric","publisherHandle":"a","publisherId":"1951744","publisherName":"Aaron Iker","runCount":76262,"viewCount":69673},{"description":"Latest Version Changes:\n- Select All Siblings and Invert Siblings support multiple layer selections (different groups)\n\nSUPER SELECT: Multi-commands for layer selection!\n\n*Select Parent*\nWill deselect the selected layer and select its parent layer.\n\n*Select Children*\nWill deselect the selected layer and select all of its children.\n\n*Select Intersecting*\nWill select any layers intersecting with the current selected layer.\n\n*Select Contained*\nWill select any layers contained within the box of the current selected layer. Best used for rectangle backgrounds when desiring to selected visually contained layers as well.\n\nSibling Commands. These commands do not transcend the parent layer.\n\n*Select All Siblings*\nSelects all siblings layers. Note: This does not select the parent layer.\n\n*Select Horizontal Siblings*\nSelects any siblings to the visual right and left of the currently selected layer. Note: this does not transcend the parent layer.\n\n*Select Vertical Siblings*\nSelects any siblings to the visual top and bottom of the currently selected layer. Note: this does not transcend the parent layer.\n\n*Select Inverse Siblings*\nInverts the layer selection. Note: this does not transcend the parent layer.\n\n*Select Intersecting Siblings*\nWill select any layers intersecting with the current selected layer. Note: this does not transcend the parent layer.\n\n*Select Contained Siblings*\nWill select any layers contained within the box of the current selected layer. Best used for rectangle backgrounds when desiring to selected visually contained layers as well. Note: this does not transcend the parent layer.\n\n*REQUESTS / BUG REPORTS*\nEmail support or issue on github https://github.com/alexpineda/figma-super-select\n\n*ROADMAP*\nNot a lot planned. Investigating \"Sibling - Select Similar\" and see if there can be a usable approach to select similar layers.\nAlso curious about an options panel to toggle sibling constraint, as well as append to existing selection mode.","id":"750783568176946334","installCount":2029,"lastUpdateDate":"2019-10-02T23:32:39.054Z","likeCount":24,"name":"Super Select","publisherHandle":"alexpineda","publisherId":"1614779","publisherName":"Alex Pineda","runCount":1005,"viewCount":2070},{"description":"Edit all of your text in one place.\n\nTo use Text Edit, run the plugin on a page that you'd like to edit. Text Edit will show you an alphabetically sorted list of all text layers on your current page. You can now edit all of the text directly from the plugin.\n\nText layers that have the same content will be merged into a single item in the list.\n\nIf you make changes on the canvas while the plugin is running, press the \"Resync changes made on the canvas\" button to update the list to reflect your updates.","id":"750862973368390836","installCount":5068,"lastUpdateDate":"2020-02-28T15:04:25.352Z","likeCount":133,"name":"Text Edit","publisherHandle":"CashApp","publisherId":"1609","publisherName":"Cash App","runCount":3660,"viewCount":7744},{"description":"<p>***Draw smooth and consistent arrows.</p><p>***Auto-track positions in updating mode.</p><p><br></p><p>Always moving the elements around? No worries! Just switch on \"Update Positions\" and all the arrows will auto-track the elements' position. Easy!</p><p><br></p><p>- Select two elements and click \"Link\" to draw an arrow. The arrow group will be named automatically.</p><p>- All arrows will be arranged inside a group named \"Updating Arrows\" automatically.</p><p>- You can choose to link elements left-to-right, right-to-right or left-to-left.</p><p>- Both ends of the arrow can be either circle or arrowhead.</p><p>- Adjust the color, opacity and stroke width of all arrows together. Easily keep the arrow style consistent.</p><p>- Lock/unlock all arrows so that they will not disturb your work.</p><p><br></p><p>----------Things to notice-------------</p><p><br></p><p>- Only arrows inside the \"Updating Arrows\" group will be able to track positions. \"Updating Arrows\" group should not be inside any frames or groups.</p><p>- This version of Arrow Auto is not compatible with the old version due to the re-write of data structure.</p><p>- Updating mode might affect the file's editing performance if the file is too big. Please switch off the mode when not using.</p><p><br></p><p>Upcoming updates:</p><p>- Preserving overrides</p><p><br></p><p>Feel free to reach out to <a href=\"mailto:chenmu.wu@shopee.com\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">chenmu.wu@shopee.com</a> if you encounter any problems</p>","id":"751007211632768205","installCount":87416,"lastUpdateDate":"2020-09-30T15:36:05.845Z","likeCount":994,"name":"Arrow Auto","publisherHandle":"1535","publisherId":"1535","publisherName":"SHOPEE SINGAPORE PRIVATE LIMITED","runCount":68932,"viewCount":66334},{"description":"Less is more.\nThanos UI removes random half of the selected elements.\n\nUse cases:\nYou think your design can be more clear.\nYou can’t decide which icon is better.\nMaybe you no need too many screens for this flow.","id":"751125845433636076","installCount":1789,"lastUpdateDate":"2019-09-09T11:55:22.860Z","likeCount":36,"name":"Thanos UI","publisherHandle":"grisha","publisherId":"590","publisherName":"Gregory M","runCount":632,"viewCount":2401},{"description":"<h2><a href=\"https://help.markaplugin.com/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Documentation</a></h2><p><br></p><p><strong>About</strong></p><p>Marka Email Generator exports HTML email templates. Templates work for all common email clients, including Gmail, Apple Mail, Outlook, and others.</p><p><br></p><p>You can create an email using ready-made blocks or create your own design from scratch.</p><p><br></p><p>The plugin supports two modes Responsive and Breakpoints.</p><p><br></p><p><strong>Responsive mode</strong></p><p>Mobile version creates automatically based on&nbsp;auto layout and constraints settings of a desktop frame.</p><p><br></p><p><strong>Breakpoints mode</strong></p><p>In this mode you can design special frame for desktop and mobile.</p><p><br></p><p><strong>How to use:</strong></p><p>1. Design a frame for desktop and optionally for mobile</p><p>2. Run the plugin and preview a template</p><p>3. Export an HTML file</p>","id":"751436700152214815","installCount":16589,"lastUpdateDate":"2022-04-20T20:04:16.839Z","likeCount":369,"name":"Marka Email Generator","publisherHandle":"grisha","publisherId":"590","publisherName":"Gregory M","runCount":12439,"viewCount":25903},{"description":"<p>✨ 𝙋𝙪𝙩 𝙖𝙣𝙮 𝙤𝙗𝙟𝙚𝙘𝙩𝙨 𝙤𝙧 𝙩𝙚𝙭𝙩 𝙤𝙣 𝙖 𝙥𝙖𝙩𝙝!✨</p><p><br></p><p>1. select a curve</p><p>2. select a shape, group, or text</p><p>3. hit \"link\" and watch the magic* happen</p><p><br></p><p>*Its janky code and its not actually magic</p><p><br></p><p>╭┈─────── ೄྀ࿐ ˊˎ-</p><p>╰┈➤ 𝙁𝙚𝙖𝙩𝙪𝙧𝙚𝙨</p><ul><li>clone shapes to repeat along any path (eg circles)</li><li>put text along any shape including circles and arbitrary paths</li><li>edit the original shape (or text) and changes will be reflected real-time (while the plugin is open)</li><li>edit the curve afterwords and watch the changes live (while the plugin is open)</li></ul><p>☆゜・。。・゜゜・。。・゜★</p><p><br></p><p>🌙 𝙄𝙨𝙨𝙪𝙚𝙨 𝙤𝙧 𝙁𝙚𝙖𝙩𝙪𝙧𝙚 𝙍𝙚𝙦𝙪𝙚𝙨𝙩𝙨🌙</p><p><a href=\"https://github.com/codelastnight/to-path-figma\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">Open an issue on the github</a></p><p><br></p><p>☆゜・。。・゜゜・。。・゜★</p><p><br></p><p>❤️ 𝙇𝙞𝙠𝙚 𝙬𝙝𝙖𝙩 𝙄 𝙙𝙤? ❤️</p><p><a href=\"https://ko-fi.com/lastnight\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">consider buying me a cup of coffee :)</a></p><p><br></p><p>note:</p><h3>This plugin is free and open source under the GPL-3.0 License. 100% free forever, no strings attached</h3><p>─────────✧❁✧─────────</p><p>˚ ⊹ · * ✧ ⋆ · * . · . · · .. . . · + · * ✫ * ⊹ * ˚ . . · ⋆ * . * . . · . · . * · . · · + . · ** ˚ . . + · ⋆ * . * . . · . · . *</p>","id":"751576264585242935","installCount":200186,"lastUpdateDate":"2020-12-04T01:46:54.428Z","likeCount":1573,"name":"To Path","publisherHandle":"lastnight","publisherId":"89102","publisherName":"last night","runCount":168400,"viewCount":155566},{"description":"<p>Quickly multiply a layer in rows, columns or both (grid)</p><p><br></p><p><strong>Features</strong></p><ul><li>Select amount of rows and columns</li><li>Select row and column gap (negative gap allowed)</li><li>After multiplication all new layers get selected so you can immediately make changes with \"Smart Selection\"</li><li>Supported in both Figma and FigJam</li></ul><p><br></p><p><br></p><p><strong>Notes</strong></p><ul><li>To avoid memory issues / freezing files, this plugin limits to maximum 2000 duplications or 10000 new (sub)layers</li></ul>","id":"751760002167220558","installCount":6224,"lastUpdateDate":"2021-10-02T17:19:23.721Z","likeCount":61,"name":"Multiply","publisherHandle":"eminsinani","publisherId":"649","publisherName":"Emin Sinani","runCount":3990,"viewCount":6326},{"description":"<p>⭐️ SimpleFlow makes it easy to create flowchart by clicking on two frames, have fun! (More features coming soon, stay tuned✨)</p><p><br></p><p>To use:</p><ol><li>Open SimpleFlow plugin</li><li>Select 1 frame</li><li>Select the second frame you want to connected to</li><li>Flow created!</li><li>Edit the styling</li></ol><p><br></p><p>Feature:</p><p>👉 Flow with direction</p><p>👉 Flow automauically update</p><p>👉 label information for the flow (a box let can put some text inside)</p><p><br></p><p>Roadamap:</p><p>📌 add user gesture styling (tap, swipe, long press...etc)</p>","id":"751821593330638172","installCount":10713,"lastUpdateDate":"2021-03-21T12:36:14.858Z","likeCount":150,"name":"Simpleflow","publisherHandle":"lichin","publisherId":"459","publisherName":"Lichin","runCount":11562,"viewCount":27485},{"description":"Smart data inserts data from a JSON file or random data according to the layer name.\n\nHow to insert data from JSON:\n1. Prepare a JSON file\n2. Drop the file into the plugin window\n3. Rename layers on a canvas according to the JSON file\n4. Select a frame\n5. Paste data\n\nTo place an image on the canvas you need to insert to the JSON file URL to the image. Images insert only in rectangle and ellipse types of nodes.\n\nHow to insert a random data\n1. Rename your text layers. For example, to insert the random email address you need to rename your text layer \"email\"\n2. Select a frame\n3. Run plugin\n\nSmart Data supports next random fields:\nname\nemail\nweekday\nphone\nmovie\naddress\ntime\nemail\ndate\nfood\nnumber\nprice\nemoji\n\nDocument with example https://www.figma.com/file/Y9WzkjOzCw4dpNjNLODixY/Smart-Data-example?node-id=0%3A1","id":"751874861800404329","installCount":2664,"lastUpdateDate":"2020-01-02T13:43:15.145Z","likeCount":47,"name":"Smart Data","publisherHandle":"grisha","publisherId":"590","publisherName":"Gregory M","runCount":1387,"viewCount":3878},{"description":"<p>Roller is the first ever Design Linter - giving you the power to automatically find and fix style inconsistencies in your files. Be confident every design you hand-off is 100% consistent with your Style Guide or Design System.</p><p>&nbsp;</p><p>How to use Roller:</p><p>1 - Import or add your styles to the Roller Library</p><p>2 - Roller then automatically finds any inconsistencies (Errors) on the page that don’t match what is in your Library</p><p>3 - Replace the Error with one of your Library’s styles</p><p>4 - Rinse &amp; repeat to reach 100% consistency</p><p>&nbsp;</p><p>Lint in the following categories:</p><p>• Colors - Quickly fix the 50 (or 5,000) shades of gray that are lurking in your designs.</p><p>&nbsp;</p><p>• Text - If a subtle line-height or letter-spacing is off, Roller will pick them up and get you back on system.</p><p>&nbsp;</p><p>• Borders - Roller lets you add the width and colors of your borders - making it easy to find any rogue input field or card.</p><p>&nbsp;</p><p>• Shadows - Roller gives you superhuman eyes - making it possible to detect subtle differences in shadow blurs or x, y offsets.</p><p>&nbsp;</p><p>• Radiuses - Be confident that any button, card, input etc. has the correct border-radiuses applied.</p><p>&nbsp;</p><p>Keep your team in-sync:</p><p>Roller lets you store and share your Library with teammates. Make sure everyone on your team has up-to-date resources and styles when linting.</p>","id":"751892393146479981","installCount":12813,"lastUpdateDate":"2021-01-05T21:21:16.764Z","likeCount":229,"name":"Roller · Design Linter","publisherHandle":"contrast","publisherId":"872491038168887043","publisherName":"Contrast","runCount":7929,"viewCount":15148},{"description":"Create a bounding box around your selection with padding.\n\n◾ Usage ◾\nSelect 1+ layers and run the plugin to draw a bounding box around your selection. You can then change the inputs to adjust the padding of the box.\n\n◾ Using your own box ◾\nYou can use your own bounding box by appending the \":boxed\" suffix to the end of a selected layer's name. Box-It will either use the first :boxed layer found in your selection or create a new :boxed rectangle if none exists.","id":"752255901354332543","installCount":1395,"lastUpdateDate":"2019-11-13T10:01:54.381Z","likeCount":10,"name":"Box It","publisherHandle":"365843","publisherId":"365843","publisherName":"Jason Yeung","runCount":902,"viewCount":2473},{"description":"Add dithering effects to your images right there in Figma ✨\n\nFeatures\n⚡ Live preview as dither effects values are been changed.\n😽 Easy to use UI to apply dithering effect.\n✨ Grayscale image processing support.\n🚀 Faster Image processing with the use of Web worker.\n🙌 Multiple dithering at once with multiple item selection.\n🎉 Provides two image dithering methods out of the box.\n💥 Now able to dither/process each channel (R, G and B) separately, producing interesting effects.\n🔥 Easily fine-tune your image dithering with color replacement options.\n👀 Easily toggle between swapping old image with the new dithered image or keeping both.","id":"752462766270432644","installCount":15546,"lastUpdateDate":"2020-01-30T14:03:50.306Z","likeCount":149,"name":"Dither","publisherHandle":"victor_aremu","publisherId":"203619","publisherName":"Victor Aremu","runCount":10030,"viewCount":17658},{"description":"Make some noise in Figma! Noise is a handy tool when you need to add a hint of realism to your work. Noise is also a commonly used tool for hiding banding in gradients. Scale up your noise to simulate clouds or smudges and wear. And boost the contrast of your noise for a hard edge.\n\n🎉","id":"752558325552095625","installCount":164760,"lastUpdateDate":"2019-09-29T19:17:08.265Z","likeCount":1116,"name":"Noise","publisherHandle":"dustin","publisherId":"1206807","publisherName":"Dustin Mierau","runCount":150763,"viewCount":110842},{"description":"<p>HtmlGenerator renders any selection into its HTML equivalent with its associated CSS, all indented and separated for you to copy and paste. Speeding up your conversion process much faster.</p><p><br></p><p>Currently Featured</p><ul><li>NEW! In-app preview: Preview your selection in realtime HTML before exporting</li><li>Revamped UI &amp; Improvements</li><li>Dedicated export options</li><li>IMAGES - you can now render images from the plugin. Details in version notes</li><li>Multi level GROUP/COMPONENT/FRAME RENDERING. You can now render items as a FIGMA GROUP</li><li>Letter Spacing &amp; Line Height</li><li>Text (Line height, font family, etc)</li><li>Fonts (Google Fonts) with full link tag generation (fonts.googleapis.com)</li><li>Shapes (Rectangles, ellipse, vector)</li><li>Solid color fill</li><li>Drop shadow</li><li>Linear Gradient</li><li>Mask Support</li></ul>","id":"753195897635985866","installCount":74241,"lastUpdateDate":"2021-08-23T14:55:54.649Z","likeCount":456,"name":"HtmlGenerator","publisherHandle":"semoju","publisherId":"639719","publisherName":"Seme Mojugbe","runCount":57747,"viewCount":77720},{"description":"This plugin is for quick arranging and rearranging selected layers in columns.\n\nHow to use:\n\n1. Select 2+ layers. Also if you select only one group or frame plugin will work the same way as you selected all its children, so you don't have to do it manually (there still have to be 2 or more children though)\n\n2. Choose the number of columns and gaps between rows and columns. The gap amount would be also saved for the next use.\n\n3. Click \"Change\" or hit Enter. Done!\n\nPro tips:\n• A plugin is aware of initial layer positions (top to bottom, left to right), so if you need to squeeze in one more block and push the rest of them down just place its top-left corner in right place and rerun the plugin. \n\n• It's especially easy to place everything in one row, as the plugin will suggest a total amount of selected layers as the number of columns. Just Call the plugin and hit Enter.","id":"753298710088509926","installCount":17782,"lastUpdateDate":"2020-04-20T01:25:09.861Z","likeCount":270,"name":"Quantizer","publisherHandle":"vadim","publisherId":"779","publisherName":"Vadim Pleshkov","runCount":10788,"viewCount":12152},{"description":"<p>Rooted in a love of generative design, Squiggly generates unique squiggles as complex or as simple as you might like.</p><p><br></p><p>Create 1-500 squiggles at a time. Each squiggle creates a stroke that is completely editable after it's creation.</p>","id":"753395020416512502","installCount":6009,"lastUpdateDate":"2019-10-22T00:10:59.823Z","likeCount":75,"name":"Squiggly","publisherHandle":"frank","publisherId":"1014786","publisherName":"frank","runCount":4791,"viewCount":8399},{"description":"<p>Clears guides!</p><p><br></p><p>To run, select from the Plugin menu, or right-click &gt; Plugins &gt; Clear Guides</p><p><br></p><p>If you have one or more frames selected it will clear the guides in those frames.</p><p><br></p><p>If there is nothing selected, it will clear the guides in the current page.</p>","id":"753903260307779121","installCount":9942,"lastUpdateDate":"2019-09-26T04:57:45.389Z","likeCount":112,"name":"Clear Guides","publisherHandle":"brett","publisherId":"14773","publisherName":"Brett Greay","runCount":8124,"viewCount":12123},{"description":"Select items to resize them to their parent's size (Horizontally, Vertically or Both).\n\nDefault constraints (Left, Top) will be changed to (Left & Right, Top & Bottom).\n\nSources: https://github.com/neelts/figma-resize-to-frame\n\nSubscribe to updates, discuss and report bugs in Telegram:\nhttps://t.me/nfigma","id":"753968999663099454","installCount":2303,"lastUpdateDate":"2019-10-28T18:26:36.805Z","likeCount":29,"name":"Resize to Frame","publisherHandle":"neelts","publisherId":"277703","publisherName":"Neil Akhmetov","runCount":1181,"viewCount":2606},{"description":"<h2>Spell Checking for Figma &amp; FigJam</h2><p><br></p><p>Try it on the landing page <a href=\"https://spelll.design/?ref=figdesc\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">spelll.design</a></p><p><br></p><p>This plugin gives Figma &amp; FigJam a spell-checking super power similar to that of Google Docs. ⚡✨</p><p>It constantly checks your Figma or FigJam document for any spelling errors and lets you fix them with a single click.</p><p>You have worked really hard to create that perfect UI. Don’t let a silly typo ruin it.</p><p>Use SPELLL and avoid those embarrassing mistaks. 😉</p><p><br></p><p>Usage:</p><p><br></p><p>1. Open SPELLL - Spell check for Figma plugin.</p><p>2. If it finds any spelling mistakes you will be able to fix them by either clicking on the Accept button or ignore the suggestion by clicking on the Ignore button. Click the three dots next to the Accept button for more options.</p><p>3. That is it, if you keep SPELLL open it will monitor your document and give you real time spelling suggestions.</p><p><br></p><p>New Features:</p><p><br></p><p>▶ Ability to fix or ignore multiple instances of a typo with a single click.</p><p><br></p><p>▶ Ability to add words such as your brand name to your dictionary to stop them from being reported as spelling mistakes.</p><p><br></p><p>▶ Detects new text layers being added and spell check them in real time.</p><p><br></p><p>▶ Ability to pick from multiple suggestions.</p><p><br></p><p>▶ Zooms into and selects the current text layer with a typo to provide you with more context.</p><p><br></p><p>▶ Massive performance improvement while working on large Figma files.</p><p><br></p><p>▶ Remembers your preferred language.</p><p><br></p><p>Supported languages:</p><p><br></p><p>SPELLL supports 43 languages from around the world.</p><p>These are the supported languages</p><p>Asturian, Belarusian, Breton, Catalan, Catalan (Valencian), Chinese, Danish, Dutch, English, English (Australian), English (Canadian), English (GB), English (New Zealand), English (South African), English (US), Esperanto, French, Galician, German, German (Austria), German (Germany), German (Swiss), Greek, Italian, Japanese, Khmer, Persian, Polish, Portuguese, Portuguese (Angola preAO), Portuguese (Brazil), Portuguese (Moçambique preAO), Portuguese (Portugal), Romanian, Russian, Simple German, Slovak, Slovenian, Spanish, Swedish, Tagalog, Tamil &amp; Ukrainian.</p><p><br></p><p>It is impossible for me to test all these languages so please do let me know if your preferred language is not working as expected through Twitter <a href=\"https://twitter.com/tkmadeit\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://twitter.com/tkmadeit</a> or email <a href=\"mailto:support@spelll.design\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">support@spelll.design</a></p><p><br></p><p><strong>Why do I need a license key?</strong></p><p><br></p><p>I pay a monthly subscription to run and maintain the spell checking software and server, protecting my own API by making you request for a license key helps me reduce abuse on the API and hefty monthly subscription fees.</p><p><br></p><p>Your email address will ONLY be used for sending you information regarding SPELLL, such as your license key and feature updates.</p><p><br></p><p>You will be able to use SPELLL for free if your Figma or FigJam document is small enough, otherwise after 7 days of trial you will be asked to upgrade to a paid version.</p><p>Learn more about pricing on the <a href=\"https://spelll.design/#pricing\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">pricing page</a>.</p><p><br></p><p><strong>Manage Subscription</strong></p><p><br></p><p>If you are paying a subscription to use my plugin thank you! And if you no longer need the plugin you can cancel the subscription by going to <a href=\"https://spelll.design/manage-billing\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">this page</a>.</p><p><br></p><p><strong>Privacy &amp; Security</strong></p><p><br></p><p>SPELLL does NOT upload your Figma or FigJam file to our server but rather only send a tokenized text to be spellchecked. All of this happens in memory and is ephemeral which means NOTHING gets stored from your files, except for the words you manually add to your dictionary. This way when you use SPELLL on a new device those words will not be spell checked again.</p>","id":"754026612866636376","installCount":101822,"lastUpdateDate":"2022-05-30T13:40:33.679Z","likeCount":776,"name":"SPELLL - Spelling & Grammar Checking for Figma & FigJam","publisherHandle":"tkmadeit","publisherId":"156890","publisherName":"Tekeste Kidanu","runCount":90127,"viewCount":107954},{"description":"Create components anywhere you want! *\n\nYou can use this plugin instead of the standard Create Component command.\n\nYou can also select multiple groups of items within different frames, groups or comopnents, so that components will be created within their parents automatically.\n\nSources: https://github.com/neelts/figma-create-component-inside\n\nSubscribe to updates, discuss and report bugs in Telegram:\nhttps://t.me/nfigma\n\n* Except for the case inside an instance (but, of course, it works with a master components).","id":"754240053660034676","installCount":2599,"lastUpdateDate":"2019-10-28T18:25:04.923Z","likeCount":40,"name":"Create Component Inside","publisherHandle":"neelts","publisherId":"277703","publisherName":"Neil Akhmetov","runCount":1432,"viewCount":2689},{"description":"Table Generator\nThis plugin generate tables with information from Excel/Google Sheet.\n\n---\nInstructions\n\nStep 1:\nCopy by using Command/Ctrl + C to select the area you would like to be used as the\nsource data from your spreadsheet.\n\nStep 2:\nPaste your content into the first input box.\n\nStep 3:\nSelect the width of your table. Please note this plugin will match the number of columns you\nhave in your original data and equally place them in the width selected.\n\nStep 4:\nCustomize your font colour, font size, font family, letter spacing and line height if necessary.\n\nStep 5:\nSelect (Yes/No) if you have included a header in the first row.\n\nStep 6:\nClick button to generate table.\n\n---\nAdditional Information\nThis plugin do not read .csv file. Please copy and paste your data in.\n\nAll the text are left aligned. \n\nA line will be generated at the bottom of each row. If you select to indicate header is included\nin the first row. The first row will not have line under it. Lines generated have the same\ncolour as text.\n\n---\nGet in touch:\nThis project started as my current workplace needed something like this. This eliminates any stress \nof manually adding information into Figma. We want this to be available to the community. So\nif you have any feedback on how to make this plug in better, please shoot me an email \nchao@reflektor.digital\n\n---\nSouce Code: \nIf you are interested, the source code of this plugin is available at \nhttps://bitbucket.org/reflektor-digital/figma-simple-table-plugin/src/master/","id":"754386961063964303","installCount":5938,"lastUpdateDate":"2019-09-26T20:29:06.398Z","likeCount":17,"name":"Simple Table Generator","publisherHandle":"1797700","publisherId":"1797700","publisherName":"Chaoyue Zhao","runCount":5434,"viewCount":10040},{"description":"<p>Move the master/variant components from all pages to one location. Delete what you don't need, restore what you do need</p>","id":"754404293457940119","installCount":7149,"lastUpdateDate":"2021-12-10T21:40:04.856Z","likeCount":100,"name":"Component Master Manager","publisherHandle":"yutani","publisherId":"275956","publisherName":"Alexandr Drugov","runCount":5851,"viewCount":12326},{"description":"<h2>Quickly navigate the color spectrum with designer-focused accuracy.</h2><p><br></p><p><strong> Groups are now supported! </strong></p><p><br></p><p>Instead of eyeballing and colour picking randomly from the entire spectrum, simply feed a base colour to this plugin to generate tints, shades, tones, and complementary colours.</p><p><br></p><p>Increase or decrease the step value to hone in on the exact shade you want.</p><p><br></p><p>Experiment with different swatches and update elements on the fly directly from the plugin.</p><h2><br></h2><h2>⭐️&nbsp;To Use</h2><ul><li>Run the plugin from Figma</li><li>Select an element containing a fill, background, or stroke (note groups are not supported)</li><li>Click on the Update button to update the base colour</li><li>Click on a plugin swatch while an element is selected to update a pre-existing fill, background, or stroke.</li></ul><h2><br></h2><h2>⭐️&nbsp;Notes</h2><ul><li>You can now type in a custom hex code if no element is currently selected. Note that if an element <em>is </em>selected on the canvas and the hex code is updated manually thereafter, the plugin will default to selecting the colour from the selected element first meaning any manual input will be ignored.</li><li>Copy the hex code from the plugin by clicking on the clipboard icon</li><li>You can keep clicking on <em>Update</em> to generate random colour palettes based on your previous colour selection.</li><li>Click on the plus button next to a palette label to add the swatches to your document.</li><li>This plugin will work on any element that is able to display a solid fill, stroke, or background</li></ul><p><br></p><p>♡ If you run into any bugs or have any feature requests please submit an issue on Github.</p>","id":"754415266574382747","installCount":32216,"lastUpdateDate":"2021-03-16T15:13:53.265Z","likeCount":291,"name":"Color Compass","publisherHandle":"jaclyntan","publisherId":"654690","publisherName":"Jaclyn Tan","runCount":24931,"viewCount":21504},{"description":"A Figma plugin for creating trippy generated graphics. Works with any Vector, Shape or Text layer.\n\nUsage\n\n1. Select a layer to multiply\n2. Set the iteration count\n3. Set the incremental changes for\n- position and rotation\n- scaling change\n- opacity\n- fill color\n- stroke width and color\n4. Magic\n\nExample\n\nhttps://twitter.com/kkuldar/status/1173364146114564101\n\nOpen source\n\nhttps://github.com/kuldar/figma-looper","id":"754418010908848797","installCount":32246,"lastUpdateDate":"2020-07-13T10:36:37.223Z","likeCount":348,"name":"Looper","publisherHandle":"kuldar","publisherId":"32176","publisherName":"Kuldar","runCount":23627,"viewCount":26513},{"description":"This plugin sets random font from google font library for all text object inside the selected frame.\n\nHow to use:\nSelect the whole frame with text\nRun the plugin\n\nThis tool great for PLAYING WITH FONTS or finding the best font pair for your next project.\n\nHave fun :)","id":"754611167463731899","installCount":6351,"lastUpdateDate":"2020-03-11T19:40:37.158Z","likeCount":37,"name":"Shuffle Fonts","publisherHandle":"grisha","publisherId":"590","publisherName":"Gregory M","runCount":4056,"viewCount":6766},{"description":"<p>Simple plugin to insert math equations into documents.</p><p>It uses an API to transform LaTeX text into SVG images that can be easily manipulated in Figma designs.</p><p><br></p><p>How to use it:</p><p>* Write the latex string</p><p>* Check the preview</p><p>* Add the image to the document</p><p><br></p><p>Feel free to contact me if you want any feature to be added to the plugin :)</p>","id":"754622689958838972","installCount":4033,"lastUpdateDate":"2021-07-12T11:15:15.183Z","likeCount":43,"name":"Latex Editor","publisherHandle":"285117","publisherId":"285117","publisherName":"Raúl Higueras","runCount":3203,"viewCount":6077},{"description":"This plugin enables you to select any instance of a local component (not from a library) and edit the master component in place from the context of wherever you are using the instance. This is handy if your master components are on another page!\n\nHow it works\n1. Select an instance of a local component \n\n2. Run 'Edit in place' (If you have selected a component from a library, the plugin will tell you).\n\n3. The plugin will hide your instance and move your master in the context of your design so that you can edit it.\n\n4. When you press done, or close the plugin UI, the instance will return and yout master component will remain at its previous location in the document.","id":"754704266165393093","installCount":1875,"lastUpdateDate":"2019-11-27T22:59:35.346Z","likeCount":50,"name":"Edit in place","publisherHandle":"tom","publisherId":"35","publisherName":"Tom","runCount":886,"viewCount":2055},{"description":"AutoLayout dynamically lays out layers in frames and updates the layout when the dimensions of child layers change. It behaves similar to Framer Stacks and the Anima Toolkit for Sketch. \n\nCreating a simple list\n1. Wrap the list elements in a frame\n2. Open the Auto Layout plugin, select the frame and enable the toggle ‘Layout frame’\n3. Change the direction to vertical and adjust spacing\n\nHow to create an auto-reflowing To Do list\n1. Create a text layer and a rectangle as checkbox next to it for the first todo item.\n2. Wrap both elements in a frame ( ⌘ + ⌥ + G )\n3. Open AutoLayout and enable it for the frame. Set direction to horizontal and adjust padding/alignment to your liking. You can change the order by moving layers up and down in the layers sidebar. \n4. With the frame selected, set Height to ‘Resize To Fit’ in AutoLayout which will automatically resize the frame when the text field gets longer\n5. Duplicate the frame a few times below to create a list of todos\n6. Wrap all todo items in a frame and enable AutoLayout, set the direction to vertical. You can adjust spacing between the items.\n7. Try adding a linebreak in one of the todo items to make it larger. The items below will automatically move down to make room.\n\nThe layout of the frame will update every second if either a child layer or the frame itself is selected. To update the layour, select a child layer or the frame while the plugin is open. \n\nAutoLayout is based on the Yoga implementation of Flexbox. Inspired by prior work from Scott Horsfall @scoh and Zachary Schiller @zacharyschiller","id":"755300155155835622","installCount":16997,"lastUpdateDate":"2019-12-18T19:25:06.201Z","likeCount":274,"name":"AutoLayout","publisherHandle":"carlo","publisherId":"1688149","publisherName":"Carlo Jörges","runCount":13774,"viewCount":21831},{"description":"<p><a href=\"http://Type.today\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">Type.today</a> screen shooter helps you to find the best font for your project from the <a href=\"http://type.today\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">type.today</a> library.</p><p><br></p><p><a href=\"http://Type.today\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">Type.today</a> and tomorrow are two showcases — two collections. We’re engaged in assembling modern tools for text layout. Plus we select fonts with high-quality Cyrillic letters that best reflect the visual language of the present and the near future. These are the work of both well-known authors and designers of the next generation.</p><p><br></p><p>How to use:</p><p>1. Select a text object</p><p>2. Run the plugin</p><p>3. Select a font</p><p>4. Paste font sample on canvas</p><p><br></p><p>The plugin will update your text object to a PNG image with a font sample.</p><p><br></p><p>NOTE: Plugin provided only demo versions of fonts without some symbols. Font samples are available only for testing and not for commercial use. You can buy full versions on <a href=\"https://type.today\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">https://type.today</a> and <a href=\"https://tomorrow.type.today\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">https://tomorrow.type.today</a></p>","id":"755467873814160138","installCount":2748,"lastUpdateDate":"2020-12-13T07:23:46.537Z","likeCount":63,"name":"type.today screen shooter","publisherHandle":"typetoday","publisherId":"1602","publisherName":"type.today","runCount":1924,"viewCount":3157},{"description":"An inadequate tool for randomly generating endless layouts. The generative design tool revolution is coming but this is not it.\n\nInspired by Karl Gerstner’s 1964 book, Designing Programmes.","id":"755525134262262553","installCount":14924,"lastUpdateDate":"2019-09-16T20:29:33.301Z","likeCount":178,"name":"Random layout generator","publisherHandle":"narrowd","publisherId":"154937","publisherName":"Nick Jones","runCount":8265,"viewCount":9904},{"description":"Color Combinator (CC) is a Figma plugin for exploring different combinations of colors among elements.\n\nSelect elements that you want to see different combinations of and then hit the “Combinate Colors” button in the CC plugin window. Copies of your frame will appear to the right of the original and each will contain a different assignment of colors to elements.\n\nI strongly encourage you to check out the demo video to see it in action: https://vimeo.com/361205568\n\n

CC is a brand new plugin and has a few limitations:\n- Supports only Text Nodes \n- Nodes must have only one fill that is a solid paint\n- Nodes must be contained in a Frame","id":"755559299451656995","installCount":1613,"lastUpdateDate":"2019-09-29T19:58:07.769Z","likeCount":6,"name":"Color Combinator","publisherHandle":"eh_dub","publisherId":"1763375","publisherName":"Ariel Weingarten","runCount":792,"viewCount":1206},{"description":"A Figma plugin to make easier to slice multiple objects.\n\nHow to use:\n1. Run Slicer.\n2. Select one or more layers you want to Slice.\n3. Choose to set the slice size with padding or total size.\n4. Click Slice and the layers will be sliced and grouped.\n\nFeature requests and support:\nFeel free to ping me on Twitter: https://twitter.com/exclama","id":"755582372562882351","installCount":3311,"lastUpdateDate":"2019-09-30T17:02:01.300Z","likeCount":20,"name":"Slicer","publisherHandle":"167091","publisherId":"167091","publisherName":"Renato Araujo","runCount":2468,"viewCount":9812},{"description":"Sigils are avatars generated for Urbit IDs, which can be thought of as IP addresses. They were created to lend tangibility to an ID, which look like `~ridlur-figbud`. Each ID, starts as a number like 52,345,752 but is phonetically encoded. For the time being, there are over 4.2 billion unique IDs and there is a Sigil for each.","id":"755929849994721127","installCount":1373,"lastUpdateDate":"2019-11-07T02:34:23.271Z","likeCount":28,"name":"sigils","publisherHandle":"gavin","publisherId":"3087","publisherName":"Gavin Atkinson","runCount":663,"viewCount":957},{"description":"<p>Easily resize your shapes with all other attributes resizing proportionally. This plugin supports resizing by percentage, width or height.</p><p><br></p><p>Usage</p><p>1. Open any Figma file</p><p>2. Select a shape on your canvas.</p><p>3. Press `command + /` and search for 'Proportional Scale'</p><p>4. Run the plugin</p><p>5. `command + option + p` to re-run the plugin instantly</p><p><br></p><p>Roadmap:</p><ul><li>Switch rounding of pixels on / off</li><li>Select which attributes to scale</li><li>Position multiple elements proportionately</li></ul>","id":"756895186298946525","installCount":21941,"lastUpdateDate":"2022-04-05T06:20:00.492Z","likeCount":172,"name":"Proportional Scale","publisherHandle":"madebyankur","publisherId":"972329","publisherName":"Ankur Chauhan","runCount":20788,"viewCount":39360},{"description":"<p>Speed up your workflow or experiment with the Figma API through scripts. Backed by the same editor infrastructure used by Microsoft VS Code, Scripter provides a fun and safe environment for playing with the Figma plugin API without the need to write actual plugins. Just type and run.</p><p><br></p><p>-&gt; Automatically saves scripts on your computer.</p><p>-&gt; Ability to save, load and share scripts in Figma files.</p><p>-&gt; Guides you through navigating the API with code completion.</p><p>-&gt; Immediate feedback of output and errors.</p><p>-&gt; Comes with examples and a copy of the Figma plugin API definitions.</p><p>-&gt; await/async at the top level.</p><p>-&gt; Async timers with timer().</p><p>-&gt; Animations with animate().</p><p>-&gt; Many convenient functions built-in, like node type guards.</p><p><br></p><p>Note: Currently does not work with Safari</p>","id":"757836922707087381","installCount":8335,"lastUpdateDate":"2022-06-05T20:45:33.943Z","likeCount":455,"name":"Scripter","publisherHandle":"rsms","publisherId":"4466","publisherName":"Rasmus","runCount":5958,"viewCount":11945},{"description":"<p>Node inspector</p><p><br></p><p>View and copy node properties for plugin development.</p><p>(This plugin is only useful for plugin developers)</p><p><br></p><p>—————————————————————————————————</p><p>How to use:</p><p><br></p><p>- Nodes:</p><p>Select one or more nodes in your canvas to view their properties. To select nodes by their ID's, click the arrow icon next to the search bar to access the node selector tool.</p><p><br></p><p>- Components:</p><p>Enter one or more component keys (for components in shared libraries) and click \"Inpsect Components\".</p><p><br></p><p>- Styles:</p><p>Select the method you want to inspect style nodes by (style ID or style keys for shared library styles), then enter one or more ID's/keys to inspect their properties. You can also get a list of all local styles in your file by selecting the \"All Local Styles\" option in the dropdown.</p><p><br></p><p>Note that multiple styles ID's and keys are separated by semi-colons ( ; ) instead of commas ( , ) because style ID's contain commas at the end of the string.</p><p><br></p><p>Copy: To copy the entire JSON output, click the \"Copy\" button at the top right.</p>","id":"758276196886757462","installCount":2298,"lastUpdateDate":"2022-05-23T06:19:39.573Z","likeCount":45,"name":"Node Inspector","publisherHandle":"jackie","publisherId":"938135745447716877","publisherName":"Jackie Chui","runCount":1231,"viewCount":3276},{"description":"Table Master 3000 is a Brand New Experience!\n\nNow working with tables is easier than ever!\nYou can easily switch between column work and row work.\n\nDo you want to swapping rows? There's nothing easier! Use the familiar functions of Figma.\n\nDo you need to rearrange the columns? One click and Table Master 3000 will regroup your table into columns for you.\n\nBut that's not all!\nThe groups are called automatically depending on how your cells are named.\n\nWhat do I need to use Table Master 3000?\n1. Install plugin\n2. Make sure your cells are the same width. \n3. Select a group with columns or rows\n\nIt is recommended to use components for different types of data\nRegrouping is based on layer coordinates, so try to keep the table in order before using the plugin. Despite this requirement, the plugin tries to find minor flaws in positioning and fix them.\n\nComponents in one row should be the same height, and in the column - the same width.\n\nWhat to expect in the next version?\n• Support for working with alignment of elements in columns\n• Improved handling of untidy tables\n• Increasing speed when working with REALLLY BIG tables","id":"758316324890482782","installCount":3890,"lastUpdateDate":"2019-09-27T13:56:31.113Z","likeCount":31,"name":"Table Master 3000","publisherHandle":"dab512","publisherId":"288","publisherName":"Dmitry Bocharov","runCount":3562,"viewCount":5287},{"description":"Extract all design tokens from websites and use them directly in Figma. \n\nThe plugin works with the free Superposition desktop application available at https://superposition.design\n\nThe Superposition desktop app intelligently parses your web page for colors, font styles, images and more, then makes them available for export as CSS, SCSS, JavaScript, Android XML and lets you use it directly in Design tools like Figma.\n\nTo use with Figma, open Superposition and go to the URL you want to get design tokens from, then open the plugin in Figma. The plugin will be kept up-to-date with the app as long as the app is open.","id":"759050501649392825","installCount":3144,"lastUpdateDate":"2020-02-10T11:40:26.343Z","likeCount":85,"name":"Superposition","publisherHandle":"kilian","publisherId":"16581","publisherName":"Kilian Valkhof","runCount":1753,"viewCount":5427},{"description":"Insert data from local TXT file or PNG, JPG images.\n\nInsert Text\n\nRun plugin, select one or more text layer, and choose a text file. Text data must saved as a .txt file with each data value on a new line.\n\nInsert Image\n\nRun plugin, select one or more shape layers, and choose multiple images, you can only choose JPG and PNG format images.","id":"759249283654441170","installCount":2180,"lastUpdateDate":"2020-07-30T01:21:53.565Z","likeCount":51,"name":"Data From Local","publisherHandle":"ashung","publisherId":"56497","publisherName":"Ashung Hung","runCount":1167,"viewCount":3290},{"description":"Chromatic Figma lets you use other color spaces than RGB, such as Lab and Lch, to create good-looking and perceptually uniform gradients and color scales. Those are color spaces that, unlike RGB, was created to mirror the visual response of the human eye. That makes them very well suited for interpolating colors, and often produces more natural looking and aesthetically pleasing results.\n\nUsage\n\nChromatic Figma -> Fix Gradient\nThis command will take the gradient of the selected shape and add new color stops to create a (in many cases) more aesthetically pleasing one.\n\nChromatic Figma -> Create Color Scale\nThis command will create a customizable scale between the fill colors of two selected shapes (or colors chosen using color pickers in the popup)","id":"759433498184507623","installCount":15820,"lastUpdateDate":"2019-10-09T05:55:11.733Z","likeCount":188,"name":"Chromatic Figma","publisherHandle":"petter","publisherId":"1999271","publisherName":"Petter Nilsson","runCount":9346,"viewCount":13958},{"description":"Mass create or update local Text Styles based on formating of regular text layers.\n\nHere is how this plugin works: \n\nAfter you called the plugin on one or several text layers, it will check if there is a Local Text Style with the same name as the name of the text layer.\n\n• If Local Text Style with such name doesn't exist, it would be created, based on text layer properties.\n\n• If Local Text style already exists it would be updated, based on text layer properties AND renamed, based on text layer content. \n\nThe additional command \"Draw Current Text Styles\" will generate text layer with applied text style for each found Local Text Style.\n\nPlease note, that plugin works only with local styles. You won't be able to update Remote Text Styles as Local Styles would be created instead. To update library styles perform all changes in library files.","id":"759472336242530542","installCount":18318,"lastUpdateDate":"2019-10-09T19:18:25.390Z","likeCount":261,"name":"Text Styles Generator","publisherHandle":"vadim","publisherId":"779","publisherName":"Vadim Pleshkov","runCount":13560,"viewCount":19850},{"description":"<p>The plugin read elements you select and let you export them into Html with SACSS.</p><p><br></p><p>If the element with Auto layout it goes to <code>flex</code>.</p><p><br></p><p>* SACSS「 Static Atomic css 」: Each css selector with only one css rules.</p><p><br></p><h2><strong>Five Tabs:</strong></h2><p><br></p><ol><li>HTML: Elements =&gt; HTML;</li><li>CSS: Element Style =&gt; CSS;</li><li>Token: get Base Token Info;</li><li>Config: Config the whole project;</li><li>Help: for help;</li></ol><p><br></p><p>There are 2 way to use Token to code.</p><p><br></p><h2>1. Pure way:</h2><p><br></p><p>This way you need config nothing.</p><p><br></p><p>Just open plugin and select the element. The element will transform to the Static Atomic CSS like below.</p><p><br></p><ul><li><code>font-size</code>：<code> .fs12{ font-size: 12px; }</code>;</li><li><code>font-weight</code>：<code>.fw700{ font-weight: 700; }</code>;</li><li><code>font-style</code>：<code>fsi{ font-style: italic; };</code></li><li><code>line-height</code>：<code>.lh16{ line-height: 16px; }</code>;</li><li><code>text-align</code>：<code>tac{ text-align: center; }</code>;</li><li><code>text-transform</code>：<code>.ttc{ text-transform: capitalize; };</code></li><li><code>padding</code>: <code>.pb16{ padding-bottom:16px; }</code></li><li><code>flex: .df{ display:flex; }</code></li><li><code>...</code></li></ul><p><br></p><p>you need `$ npm install sacss` first.</p><p><br></p><p><a href=\"https://www.npmjs.com/package/sacss\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">https://www.npmjs.com/package/sacss</a></p><p><br></p><p>All style in SACSS will ignore.</p><p><br></p><p>Wanna known more about SACSS?</p><p><br></p><p><a href=\"https://s-acss.github.io/\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">https://s-acss.github.io/</a></p><p><br></p><h2>2. Custom way:</h2><p><br></p><p>You can custom each token through the figma token id.</p><p><br></p><p>When the generator match the rules, it will turn out to be the code as you custom.</p><p><br></p><p>The other stuff you don't give alias will use SACSS instead.</p><h2><br></h2><h2><strong>2.1 Custom Base node</strong></h2><p><br></p><pre class=\"ql-syntax\" spellcheck=\"false\">{\n  \"tokens\": {\n   [id]: {\n      \"_tokenName\": \"effet1\",\n      \"_tokenType\": \"EFFECT\",\n      \"DEFAULT\": {\n        \"className\": [\"g_shadow1\"],\n        \"_ignoreClassName\": []\n      }\n    }\n  }\n}\n</pre><p><br></p><p>this will output the node with `g_shadow` class</p><p><br></p><h2><strong>2.1 Custom depend the node type</strong></h2><p><br></p><pre class=\"ql-syntax\" spellcheck=\"false\">{\n  \"tokens\": {\n    [id]: {\n      \"_tokenName\": \"figma node name\",\n      \"_tokenType\": \"COMPONENT\",\n      \"DEFAULT\": {\n        \"type\": \"primary\",\n        \"size\": \"large\",\n        \"tagName\": \"Button\",\n        \"className\": [],\n        \"children\": true,\n        \"_ignoreClassName\": [],\n        \"_renderHeight\": true,\n        \"_renderWidth\": true\n      }\n    }\n  }\n}\n</pre><p><br></p><p>it will render like :</p><p><br></p><p>`&lt;Button type=\"primary\" size=\"large\"&gt;button&lt;/Button&gt;`</p><p><br></p><p>Component will ignore Height and Width default, if you wanna it you can set <code><em>renderHeight</em></code><em> add `</em>_<em>renderWidth</em>` to be true</p><p><br></p><h2><strong>Token</strong></h2><p><br></p><ul><li>fill</li><li>text</li><li>effect</li><li>stroke</li><li>grid</li><li>effect</li><li>component</li><li>padding</li><li>flex</li></ul><p><br></p><p>Anything can turn out to be code is calling Token.</p><p><br></p><h2>FAG</h2><p><br></p><p>1. I can't open the plugin of SACSS in the first time?</p><p>Try 3 times and wait.</p><p><br></p><p>2. How to ignore some element?</p><p>Just set those element name with `_` start.</p><p>exp: `_header`</p>","id":"759651077059504375","installCount":3358,"lastUpdateDate":"2021-08-27T06:18:30.581Z","likeCount":27,"name":"Token -> Code","publisherHandle":"ziven27","publisherId":"846873","publisherName":"ziven27","runCount":2418,"viewCount":4579},{"description":"Make your writing bold and clear.\n\nSelect any text element and run the plugin. It will analyse the text using Hemingway rules around adverbs, passive voices, complex phrases, and hard sentences.\n\nThe plugin will also check word count, character count, and assess reading level using the automated readability index.\n\nThis plugin was inspired by the Hemingway Editor. It is not an official plugin from that team","id":"760035865558407437","installCount":7868,"lastUpdateDate":"2019-10-08T22:00:31.143Z","likeCount":93,"name":"Hemingway","publisherHandle":"lifeofmle","publisherId":"1557379","publisherName":"Michael Le","runCount":4172,"viewCount":5079},{"description":"A way to wrap your text around a circle!\n\nExcellent for badges, etc.\n\nstep 1: Select an ellipse.\nstep 2: adjust the parameters\nstep 3: enjoy bendy text :DDD\n\nNotes from the developer:\n- currently only works for circles\n- the trigonometry is kinda janky (i'm working on it)","id":"760113603535822095","installCount":13283,"lastUpdateDate":"2019-12-05T23:02:54.493Z","likeCount":62,"name":"TextWrap","publisherHandle":"835565","publisherId":"835565","publisherName":"Eirik Kvistad","runCount":13930,"viewCount":17677},{"description":"<p>Speed up plugin development with an easy way to view and explore node properties.</p><p><br></p><p>Clicking on a layer will display that nodes properties and styles within the inspector panel.</p><p><br></p><p>Each property has a copy to clipboard button for finding the properties you need while working on your app.</p><p><br></p><p>This plugin is aimed to save time when building and maintaining Figma plugins by allowing you to view properties that you would otherwise need to <a href=\"http://console.log\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">console.log</a></p><p><br></p><p>Have a question? <a href=\"https://twitter.com/daniel__designs\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">DM me on Twitter </a></p>","id":"760351147138040099","installCount":4639,"lastUpdateDate":"2021-09-16T21:46:02.602Z","likeCount":126,"name":"Inspector","publisherHandle":"daniel","publisherId":"859657","publisherName":"Daniel Destefanis","runCount":2410,"viewCount":6938},{"description":"<p>This plugin generates a dark/light theme from your selection.</p><p>The plugin works with external library styles and local styles.</p><p>You can choose styles name identification in settings. By default, the plugin use [day] for light and [night] for dark.</p><p><br></p><p><strong>🤓 How it works:</strong></p><p>1. Use [day] and [night] in your style names. Example: Style name[day]/ Style name[night].</p><p>2. Apply your color styles.</p><p>3. Select any object, then choose Appearance → Dark mode or Appearance → Light mode.</p><p><br></p><p><strong>📔 How it works with external library styles:</strong></p><p>1. Open external library file and use [day] and [night] in color style names. Example: Style name[day]/ Style name[night].</p><p>2. Publish changes.</p><p>3. Select Appearance → Save styles for saving external color styles to the plugin.</p><p>4. Open any file linked to the library.</p><p>5. Apply color styles.</p><p>6. Select any object then choose Appearance → Dark mode or Appearance → Light mode</p><p><br></p><p>---</p><p><br></p><p><strong>✏️ Name examples:</strong></p><p>You can use [day] / [night] at any place of your style names.</p><p><br></p><p><br></p><p><br></p><p>Color name [day]</p><p>Color name [night]</p><p><br></p><p><br></p><p><br></p><p>Style [day] / color-name</p><p>Style [night] / color-name</p><p><br></p><p><br></p><p><br></p><p>Style / color-name [day]</p><p>Style / color-name [night]</p>","id":"760927481606931799","installCount":20442,"lastUpdateDate":"2022-06-03T07:13:06.063Z","likeCount":553,"name":"Appearance","publisherHandle":"glmrvn","publisherId":"903146","publisherName":"Alex Dyakov","runCount":19122,"viewCount":42203},{"description":"HTML & SASS code generator / fine-tune results / easy to use.\n\n________\n\n🏛️ What is Structure ?\n\nThis plugin generates HTML & SASS code from Figma. \nSelect an object, a component, a frame, anything, then click on \"Inspect\" and voilà ! \n\nBUT.. one problem with code generators can be code redundancy, especially with Figma objects where you can find instances inside instances inside..\n\nIn order to get a much cleaner code, you can use different options : \n\n• use \" ↑ \" to merge a div (and its css properties) with the parent div\n• use \" - \" to remove an element from code\n\nMerging and deleting affect both HTML and SASS generated code. You can freely experiment things, as you can find an undo button, if something didn't go as expected.\n\n________\n\n🧰 Options\n\n• You can adjust settings by clicking on the \"■\" option (flex, absolute or relative positioning,..)\n• You can double click inside an input field to zoom on the Figma object related to your code\n• Figma styles can be displayed (or not) inside SASS code\n• Images are generated as base64 background in the preview, but are not added to SASS code.\n• Vectors are generated as SVGs, and you can display/hide them in HTML code.\n• This plugin works best with objects using autolayout (support for spacing, alignement,..)\n• HTML & CSS are rendered inside the preview zone, so you can easily see how your actions affect rendered code.\n\n________\n\n🗒️  Notes\n\n• Using this plugin doesn't change anything in your Figma file.\n• This plugin is a WIP, and may not cover every cases. If you find bugs, or missing something from it, please feel free to contact me.","id":"760966234320559456","installCount":8168,"lastUpdateDate":"2020-03-21T16:24:26.614Z","likeCount":96,"name":"Structure","publisherHandle":"fabien","publisherId":"383","publisherName":"Fabien","runCount":6387,"viewCount":10544},{"description":"<p>A lightweight plugin for Figma that spaces elements evenly by exact pixel measurements.</p><p><br></p><p>You can space items vertically or horizontally from their edges or their centers. Alignment options also let you choose which side the items are distributed towards. Elements are repositioned based on their bounding boxes, so the plugin works on rotated objects as well.</p><p><br></p><p>Source Code:</p><p><a href=\"https://github.com/yeemachine/distributor\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">https://github.com/yeemachine/distributor</a></p>","id":"761098431161143653","installCount":4019,"lastUpdateDate":"2020-12-17T16:19:47.915Z","likeCount":40,"name":"Distributor","publisherHandle":"yeemachine","publisherId":"1572078","publisherName":"Richard Yee","runCount":2534,"viewCount":4814},{"description":"Quickly generate a random data type with alphabets, numerals and symbols depending on your need for use as IDs, secrets, passwords, IPs, Initials and more in your mocks. Simply select the type of data string you need and enter the length in the input field.\n\nUsage\n1. Open any Figma file\n2. Select any text layers or groups with text layers inside them.\n3. Press `command + /` and search for 'Random Key Generator'\n4. Run the plugin\n5. `command + shift + p` to re-run the plugin instantly\n\nRoadmap:\n- Add more data types","id":"761525248810814854","installCount":1454,"lastUpdateDate":"2021-05-07T12:06:53.215Z","likeCount":8,"name":"Random Key Generator","publisherHandle":"madebyankur","publisherId":"972329","publisherName":"Ankur Chauhan","runCount":770,"viewCount":2520},{"description":"The plugin quickly marks layouts which are in work or don’t approved finaly. Actual for working in a large design team.\n\nInstruction:\n1. Select one or more elements (frames or components).\n2. Run the plugin.\n3. If the element has an overlay with the name «wip» — it will be deleted.\n4. If there is no layer with the name «wip», then the plugin will add it.\n\nP.S. Use hot keys, this speed up the workflow.\n\nMac os:\n1. Open «System Preferences»\n2. Open «Keyboard» and choose «Shortcuts»\n3. In the sidebar menu —> «App Shortcuts»\n4. Click [+] and choose «Figma» in dropdown. Write the plugin name «work in progress» in menu title. Add shortcut combination.","id":"761641569499378065","installCount":1229,"lastUpdateDate":"2019-10-04T11:15:16.237Z","likeCount":15,"name":"work in progress","publisherHandle":"npi","publisherId":"136767","publisherName":"Pavel Neznanov","runCount":564,"viewCount":2944},{"description":"One of the most desired text features has just come to Figma with our Arc plugin! Curve your text upward, downward or into a circle. Adjust the slider and preview the result.\n\n1) Select a text layer\n2) Run the Arc plugin\n3) Adjust the slider & click apply\n\nNOTE: Once the curve is applied, you can still edit the style of the text. However you will not be able to edit the curve path or retype a phrase.","id":"762070688792833472","installCount":282022,"lastUpdateDate":"2019-10-11T00:55:18.015Z","likeCount":1629,"name":"arc","publisherHandle":"unfold","publisherId":"862311559760360561","publisherName":"unfold","runCount":235823,"viewCount":241645},{"description":"The plugin takes your text and renders a frame with the properly formatted formula.\n\nUsage:\n1. Create text layer and insert LaTeX math equation into it.\n2. Select text layer and run this plugin.","id":"762210076386791876","installCount":2222,"lastUpdateDate":"2019-10-25T09:42:25.812Z","likeCount":14,"name":"Render Math","publisherHandle":"uetchy","publisherId":"111472","publisherName":"uetchy","runCount":1644,"viewCount":3761},{"description":"The Guides inspector is complete control over the guides!\n\n✅ You can:\n- Create / Delete guides.\n- Copy / Paste guides of the frame.\n- Generate grids from guides.\n- Create guide templates for later use.\n- Adjust the position of the guides with high accuracy.\n\n⚠ Changes on the canvas are sometimes displayed only after you hover over it. This bug should be fixed soon.\n\nAbout the Create Guides window:\n⚠ To get into it, you need to click on the name of the frame.\n\n1. The Margin parameter is specified in the following order: margin-top, margin-right, margin-bottom, margin-left.\n\n2. Some parameters support the \"auto\" value. \n\nIt can be used, for example, to center the columns by setting the margin-left and margin-right parameters to \"auto\".\nIf you specify it only for margin-left, and margin-right set to 0, then the columns will be pressed to the right edge.\n\n⚠ When applying the template, - if its parameters are not suitable for the selected frame, - they will be adjusted.\n\nFor example, if the template contains 10 columns with a width of 100px, and the frame has a width of only 500px, then the number of columns will be reduced to 5.\n\n___\nA demo video with an example of usage can be found here: producthunt.com/posts/guides-inspector-figma-plugin","id":"763500131554051614","installCount":4347,"lastUpdateDate":"2020-02-22T21:37:44.840Z","likeCount":67,"name":"Guides inspector","publisherHandle":"Andreslav","publisherId":"629","publisherName":"Andreslav Kozlov","runCount":2450,"viewCount":5596},{"description":"This plugin is for creating a grid view of your Magical Girls in the game Magia Record: Puella Magi Madoka Magica Side Story (https://magiarecord-en.com/). The game does not include a good overview for displaying all you owned Magical Girls and how awakened and upgraded they are, so this plugin creates that view as image for easy sharing.\n\nInstalling the Plugin\n1. Duplicate the Figma project (https://www.figma.com/file/jcgWY0YGzPbAwBp47LV3oL/Magia-Record-Character-Grids). \n2. Install the plugin and open the Magia Record Character Grids Project.\n3. Right click on the background or go to the hamburger menu and select Plugins > Magia Record Character Grid Creator Interface\n4. The HTML window for the plugin will open.\n\nFeatures\n1. Create a fully detailed Character Displays for your Magical Girls, including: Character Card, Stars (Rank), Attribute, Experience Level, Magic Level, Magia Level, and Episode Level.\n2. Available values for each field are automatically filled in and available for selection for easy creation.\n3. Update an existing Character Display if a mistake was made or as you progress though the game.\n4. Copy the properties of an existing Character Display to create a new or update an existing one.\n5. Automatic placement of newly created Character Displays with respect to the selected Character Display or parent Frame.\n6. Convert copied Character Display frames from one file to another file to work with the new file.\n7. Group and Sort Character Displays in a frame based on selected properties.\n8. Set Backgrounds for the frames containing Character Displays.\n\nUsage\n\nCreate new Character Display\n1. Either select an existing instance or frame (can be the document itself)\n2. Select the properties you want.\n3. Press Create.\n\nUpdate an Existing Character Display\n1. Select an existing instance of a Character Display.\n2. Press the Copy and all properties appear in fields.\n3. Modify the fields you want to update.\n3. Press Update. \n\nCreate new Character Display with Existing Properties\n1. Select an existing instance of a Character Display.\n2. Press the Copy and all properties appear in fields.\n3. Modify any fields if desired.\n4. Press Create.\n\nConvert Copied Character Displays from Another File\n1. Copy and paste either a Character Display instance(s) or an entire frame containing all the instances to convert from one file to another. Once pasted, all the instances will become frames as they are no longer attached to their master components. All the names of all the layers must match the original components.\n2. Select the Character Display frame(s) or parent frame (where all the children are Character Display frames) you want to convert.\n3. Press Convert and a toast message will show how many were converted or skipped.\n4. All the frames that were copy and pasted over are now converted to instances for which their master components are in the current document. \n\nGrouping and Sorting List\n1. Navigate to the Sorting tab.\n2. Select a frame containing only Character Displays.\n3. Select the property to group by, the property(s) to sort by, the grouping and sorting direction(s), the direction to sort the ID's (the last property to sort by), and the number of Character Displays per row.\n4. Press Sort.\n\nAdding Background to List\n1. Navigate to the Background Tab.\n2. Select the frame you want to add a background to.\n3. Select the Background Type and Background Name you want to add to the frame. You can see the available backgrounds in the Background Page.\n4. Press Create/Update.\n\nResizing Existing Background\n1. Navigate to the Background Tab.\n2. Select the frame you want to add a background to.\n3. Press Resize. You would want to do this if the frame has been resized and the background no longer fits or is no longer centered.\n\nRemoving a Background.\n1. Navigate to the Background Tab.\n2. Select the frame you want to remove a background from.\n3. Press Remove.","id":"764389386376321679","installCount":865,"lastUpdateDate":"2020-03-27T08:53:36.626Z","likeCount":7,"name":"Magia Record Character Grid Creator Interface","publisherHandle":"LeoChan","publisherId":"1329086","publisherName":"Leo Chan","runCount":211,"viewCount":1463},{"description":"With the advent of design systems its become easier and easier to work in hi-fi designs quickly and easily. Sometimes, however, you need to step back into lo-fi wireframes.\n\nWire Box lets you convert your designs back to to wires with one click, helping you and your team mates focus on the UX rather than the UI. Comes in nasty pink to make sure that happens.","id":"764471577604277919","installCount":48691,"lastUpdateDate":"2022-03-23T11:17:06.524Z","likeCount":812,"name":"Wire Box","publisherHandle":"seanehalpin","publisherId":"1890255","publisherName":"Seán Halpin","runCount":37088,"viewCount":86916},{"description":"Code highlighter for Figma.\n\nSelect any text box, select color schema, language, and run the plugin. Text will be highlight.\n\nYou can save your favorite color schema and language as bookmark.\n\nThis plugin uses \"highlight.js\"'s parse logic and color schemas.","id":"764836637878472379","installCount":3372,"lastUpdateDate":"2019-10-17T04:28:49.262Z","likeCount":66,"name":"Figma Code Highlighter","publisherHandle":"ixtgorilla","publisherId":"897422","publisherName":"ixtgorilla","runCount":2240,"viewCount":4062},{"description":"<p><strong>* Update *</strong></p><p>Now that Figma supports RTL, the plugin can also update old text areas that were created before, and still keep the text as it was.</p><p>Watch demo (in Hebrew) -&gt; <a href=\"https://www.loom.com/share/b6477d253fde40a8b8daf2671f7c8726\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">here</a>.</p><p>Watch demo (in English) -&gt; <a href=\"https://www.loom.com/share/e67f65837493400994b7f1bec5efe4d7\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">here</a>.</p><p><br></p><p><strong>Important:</strong> Plugin might be very slow/crash when running \"In page\" option on big files.</p><p>-------</p><p><br></p><p>This plugin converts flipped text that contains Hebrew &amp; Arabic letters to RTL.</p><p><br></p><p><strong>Arabic support still in testing. Let me know if you find bugs :)</strong></p><p><br></p><p>It can flip:</p><ul><li><strong>All the texts</strong> inside the page</li><li>The texts in the <strong>selected object</strong></li><li>A selected <strong>component and all it's instances</strong></li></ul><p><br></p><p><strong>How to use:</strong></p><ol><li>Run the plugin</li><li>Choose what to convert</li><li>The text boxes inside the selected object/s will be updated</li></ol><p><br></p><p><strong>Important note:</strong></p><p>The plugin <strong>does not support</strong> texts will multiple styles.</p><p><br></p><p>Feel free to contact me for any bugs you find.</p>","id":"764866158078934717","installCount":5311,"lastUpdateDate":"2022-04-06T08:10:55.342Z","likeCount":35,"name":"Convert To RTL (Heb + Arb) Extended","publisherHandle":"1836422","publisherId":"1836422","publisherName":"Tsurit Ben-Tsur","runCount":4656,"viewCount":3780},{"description":"<h2>Easy way to numerate frames</h2><ul><li>Numerate using 2 flags: {current}, {total} and 3 direction modes: → ↘ ↓</li><li>{current} – to place the current frame number</li><li>{total} – to place the number of all slides</li></ul><p><br></p><h2>How it works</h2><ul><li>Only those objects in which either the frame name or the text layer content has the flags are considered.</li><li>If after running the plugin you have not changed the replaced content it will be updated after plugin re-run (no need to add flags again).</li><li>Duplicate the frames with which the \"Numerator\" has already worked and run the plugin again – this also works like a charm (no need to add flags again).</li></ul><p><br></p><h2>Demonstration</h2><p><a href=\"https://youtu.be/L-H06d51n-o\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://youtu.be/L-H06d51n-o</a></p><p><br></p><h2>Donate</h2><p><a href=\"https://gum.co/Numerator\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://gum.co/Numerator</a></p>","id":"765276421612114640","installCount":2820,"lastUpdateDate":"2022-05-20T16:23:47.637Z","likeCount":42,"name":"Numerator","publisherHandle":"jamillazarev","publisherId":"90866","publisherName":"Jamil Lazarev","runCount":2184,"viewCount":4259},{"description":"<p><strong>* Update *</strong></p><p>Now that Figma supports RTL will flip the text AND also update the text box tp support RTL, so next time you will be able to write RTL properly.</p><p>Watch demo -&gt; <a href=\"https://loom.com/share/072dfed4b249437aa9aa35d43e31e39b\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">here</a>.</p><p><br></p><p>This plugin converts flipped text that contains Hebrew &amp; Arabic letters to RTL.</p><p><br></p><p><strong>Arabic support still in testing. Let me know if you find bugs :)</strong></p><p><br></p><p><strong>How to use:</strong></p><ol><li>Select an object (Frame/Component/Instance/Group/Text) that contains text with Hebrew letters</li><li>Run the plugin</li><li>The text boxes inside the selected object will be updated</li></ol><p><br></p><p><strong>Important notes:</strong></p><ul><li>The plugin <strong>does not support</strong> texts will multiple styles</li><li>This plugin opens a ui window and closes it after it's done converting all the text</li></ul><p><br></p><p>Feel free to contact me for any bugs you find.</p>","id":"765566315559531236","installCount":3818,"lastUpdateDate":"2022-05-21T13:02:55.187Z","likeCount":23,"name":"Convert To RTL (Heb + Arb)","publisherHandle":"1836422","publisherId":"1836422","publisherName":"Tsurit Ben-Tsur","runCount":3226,"viewCount":3533},{"description":"<p>Write the comments and explanations to your design in the Figma.</p><h2><br></h2><h2><strong>Version 2.0 </strong>β</h2><p><strong>How to use the plugin:</strong></p><ul><li>Select the layer and click «Create Comment»;</li><li>Enter the comment number and text;</li><li>Select the color of the label;</li></ul><p><br></p><p>The plugin will automatically create a new frame with a comment next to the selected frame. Each comment will try to align against the selected layer.</p><p><br></p><p><strong>Update Positions</strong></p><p>If the coordinates of the layers associated with the comments have been changed, then the comments and labels will try to align next to it. This will work for the frames you have selected or for every frame on the page&nbsp;if you have not selected anything. This function is automatically called when a new comment is created.</p><p><br></p><p><strong>Show/Hide Labels</strong></p><p>Show or hide labels inside frames.</p><p><br></p><p><strong>Remove unused labels</strong></p><p>If you deleted a comment and want to remove unused label, use this function.</p><p><br></p><p><strong>Limitations in the plugin:</strong></p><p>- Plugin works on a single selected layer;</p><p>- The label field is optional and must be a number in the range 0 to 99;</p><p>- Functions \"Show/Hide labels\" and \"Remove unused labels\" work for all the frames on the page.</p>","id":"766336259561453389","installCount":3332,"lastUpdateDate":"2021-11-05T13:24:46.643Z","likeCount":46,"name":"Commentor","publisherHandle":"skorobogatko","publisherId":"702","publisherName":"Nick Skorobogatko","runCount":3542,"viewCount":8438},{"description":"Product Planner makes the process more comfortable to get started, product planning, product insights, identifying risks, setting goals and identifying and solving problems. Use the prebuilt template relevant to your tasks.\n\nFigma believes in collaboration without constraints as well as the power of shared understanding. We have been on a mission to empower teams to create the next big thing on Figma. We want to build collaboration plugin for fantastic Figma users. We are happy to share the news with Figma users that \"Today We launch beta version to try it out.\". We will add more template soon from the Idea to the insight with teamwork but in a better way.\n\nProduct Manager 15 Templates:\n- Assumptions Grid\n- Product Roadmap\n- Kanban Board\n- Gantt Chart\n- Workflow Chart\n- KWL Chart\n- Feature Audit\n- Idea Prioritization\n- Effort / Reward Grid\n- Risk Grid\n- Impact Grid\n- Retrospective 2\n- The 5 Whys\n- Retrospective 3\n\nProduct Planner 12 Templates:\n- Project Overview\n- Persona Template\n- Customer Journey Map\n- Project Documentation\n- Lean UX Canvas\n- Web Sketch Pad\n- Desktop Portrait Pad\n- Brainstroming Pad\n- Pixel Sketch Sheets\n- Iphone X Sheets\n- Ipad Sketch Sheets\n- Apple Watch Sheets","id":"766652281834442616","installCount":29265,"lastUpdateDate":"2020-07-31T17:28:44.223Z","likeCount":480,"name":"Product Planner","publisherHandle":"HexorialStudio","publisherId":"870959682079605985","publisherName":"Hexorial Studio","runCount":17360,"viewCount":36504},{"description":"Design Tokenizer parses style information and generates design tokens in JSON format. The JSON file is suitable for consumption by a build system framework like style-dictionary. \n\nA basic design libarary is available for you to study, as well as an example project that demonstrates end-to-end integration of design tokens. Just click the help link!\n_______________________________________________________________________\n\nHow the plugin works:\nFigma stores your text, color, effect, and layout styles as internal style objects. Design Tokenizer will parse everything it can from these objects.\n\nAdditioally, Design Tokenizer can generate tokens for your margin and padding spacers, radii, and border widths as long as you follow certain conventions:\n\nFrame\n- Create a frame and name it “Sizes.”\n- Created rectangles for each custom style.\n\nSpacer Rectangles\n- Name spacers “spacer/name”. \n- The width and height values are tokenized. \n\nCorner Radius Rectangles\n- Name radii “corner-radius/name”.\n- The corner radius value is tokenized. \n\nBorder Width Rectangles\n- Name border widths “border/name”.\n- The stroke width value is tokenized.\n_______________________________________________________________________\n\nLimitations:\n- Image-based color styles are not supported.","id":"767048666042724266","installCount":1883,"lastUpdateDate":"2020-06-26T20:58:35.469Z","likeCount":40,"name":"Design Tokenizer","publisherHandle":"leebert","publisherId":"2509508","publisherName":"Lee Brenner","runCount":1198,"viewCount":4111},{"description":"<p>Automagically organize and clean up your Figma document.</p><p><br></p><h1><a href=\"https://ko-fi.com/yuanqing\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">Fund my work on Figma plugins →</a></h1><p><br></p><h2>Delete Hidden Layers</h2><p>Deletes all hidden layers within the selection or on the current page.</p><h3><br></h3><h2>Ungroup Single-Layer Groups</h2><p>Ungroups single-layer groups within the selection or on the current page that have no background, blend mode, effect or export setting.</p><h3><br></h3><h2>Make Pixel-Perfect</h2><p>Rounds the X and Y position and dimensions of layers within the selection or on the current page to the nearest pixel.</p><h3><br></h3><h2>Smart Rename Layers</h2><p>Intelligently renames layers within the selection or on the current page.</p><ul><li>Layers of type Text will be named based on their text content.</li><li>Layers of type Instance will be given the same name as their Main Component.</li><li>Layers of all other layer types will be named based on their layer type. (For example, a layer of type Rectangle will be named “Rectangle”, a layer of type Group will be named “Group”, and so on.)</li><li>Layers with export settings will not be renamed.</li></ul><p>Optionally specify a Regular Expression to skip the renaming of particular layers.</p><h3><br></h3><h2>Smart Sort Layers</h2><p>Sort layers within the selection or on the current page by their X and Y position while maintaining their relative stacking order on the page.</p><h3><br></h3><h2>Clean Layers</h2><p>Run all the above commands on layers within the selection or on the current page. Optionally skip processing of Locked layers.</p><h3><br></h3><h2>Sort Pages</h2><p>Sorts pages of the current document in alphabetical order.</p><h3><br></h3><h2>Reset Plugin</h2><p>Resets all settings to their defaults.</p>","id":"767379019764649932","installCount":76692,"lastUpdateDate":"2021-07-04T03:03:53.191Z","likeCount":980,"name":"Clean Document","publisherHandle":"yuanqing","publisherId":"1682602","publisherName":"Yuan Qing Lim","runCount":40782,"viewCount":51231},{"description":"<p>Test your UI in different languages.</p><p><br></p><h1><a href=\"https://ko-fi.com/yuanqing\" rel=\"noreferrer noopener nofollow\" target=\"_blank\"><strong>Fund my work on Figma plugins →</strong></a></h1><p><br></p><h2>Language Tester</h2><p>Opens a modal with a list of languages. Select a language in the list to translate the text layers within the selection or on the current page. Close the dialog or click “Reset” to revert all text layers to their original content.</p><p><br></p><h2>Translate</h2><p>Translate the text layers within the selection or on the current page to the selected language.</p>","id":"767379122107077581","installCount":4242,"lastUpdateDate":"2020-11-14T03:47:55.750Z","likeCount":74,"name":"Language Tester","publisherHandle":"yuanqing","publisherId":"1682602","publisherName":"Yuan Qing Lim","runCount":2954,"viewCount":5601},{"description":"Moves the selected layers leftwards/rightwards or upwards/downwards by a specified pixel offset.","id":"767379204511357902","installCount":1966,"lastUpdateDate":"2020-10-20T12:09:24.170Z","likeCount":33,"name":"Move Layers","publisherHandle":"yuanqing","publisherId":"1682602","publisherName":"Yuan Qing Lim","runCount":719,"viewCount":2745},{"description":"Distributes the selected layers leftwards, rightwards, upwards, or downwards by a specified pixel offset.","id":"767379264700569551","installCount":1979,"lastUpdateDate":"2020-08-15T01:58:50.585Z","likeCount":33,"name":"Distribute Layers","publisherHandle":"yuanqing","publisherId":"1682602","publisherName":"Yuan Qing Lim","runCount":798,"viewCount":2543},{"description":"Draws a slice over the selected layers. Optionally specify a padding for the slice.","id":"767379335945775056","installCount":1246,"lastUpdateDate":"2020-05-07T12:57:36.327Z","likeCount":20,"name":"Draw Slice Over Selection","publisherHandle":"yuanqing","publisherId":"1682602","publisherName":"Yuan Qing Lim","runCount":431,"viewCount":1414},{"description":"<p>Sort layers by name or position.</p><p><br></p><h1><a href=\"https://ko-fi.com/yuanqing\" rel=\"noreferrer noopener nofollow\" target=\"_blank\"><strong>Fund my work on Figma plugins →</strong></a></h1><p><br></p><h2>Sort Layers by Name</h2><p>Sort the selected layers in alphabetical order.</p><h3><br></h3><h2>Sort Layers by X Position</h2><p>Sort the selected layers by their X position.</p><h3><br></h3><h2>Sort Layers by Y Position</h2><p>Sort the selected layers by their Y position.</p><h3><br></h3><h2>Smart Sort Layers</h2><p>Sort the selected layers by their X and Y position while maintaining their relative stacking order on the page.</p><h3><br></h3><h2>Reverse Layer Sort Order</h2><p>Reverse the sort order of the selected layers.</p><h3><br></h3><h2>Randomize Layer Sort Order</h2><p>Randomize the sort order of the selected layers.</p><h3><br></h3><h2>Sort Pages</h2><p>Sort the pages of the current document in alphabetical order.</p>","id":"767379414704079825","installCount":11509,"lastUpdateDate":"2021-04-04T07:59:57.440Z","likeCount":179,"name":"Sort Layers","publisherHandle":"yuanqing","publisherId":"1682602","publisherName":"Yuan Qing Lim","runCount":9064,"viewCount":12261},{"description":"💡 This plugin can change layers’ size to the longest or shortest value.\n\n———————————————————————————————\n\n💬 How to use:\n\n1. Select layers (Rectangle, Text, Instance ...)\n2. Choose a option\n- Shortest/Longest Width\n- Shortest/Longest Height\n- Smallest/Largest Size(Width & Height)\n3. Speed up your workflow!","id":"767694578812069878","installCount":967,"lastUpdateDate":"2019-10-23T14:19:44.100Z","likeCount":17,"name":"Resize Layers","publisherHandle":"jongin","publisherId":"1781189","publisherName":"김종인","runCount":247,"viewCount":764},{"description":"<p>Create, attach, clone and move components in a couple of clicks without losing overrides! 🔥 <a href=\"https://dominate.design/video?r=26\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Introductory video</a> (5 min.) <a href=\"https://dominate.design/guide?r=26\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">👾 File guide</a> (15 min.)</p><p><br></p><h2>→ <a href=\"https://dominate.design/?r=26\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\"><strong>Learn more and get the license</strong></a></h2><p><strong>Free trial:</strong> You can successfully use the plugin up to five times per file.</p><p><br></p><p>💬 Feedback and questions are welcome: <a href=\"mailto:gleb@dominate.design\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">gleb@dominate.design</a></p><p><br></p><p>——————————</p><p><br></p><p>❖ Started a new project in Figma and realized you should've used Components instead of Frames too late? 🤬 Master plugin allows you to create new component from a set of any objects (and save all overrides):</p><p><br></p><p>1. Select any number of similar objects in your Figma file.</p><p>2. Run the Master plugin command “Create Component from Objects”</p><p>3. The new main Component will be created</p><p>4. Selected objects will become its Instances with all possible overrides applied!</p><p><br></p><p>❖ Also Master would help you “attach” objects of any kind to the existing Component, even if it is in another file:</p><p><br></p><p>1. Select one Instance or Component. Run “Pick Target Component” command, the plugin will remember selected Component.</p><p>2. Select Instances or other objects you want to turn into Instances of the saved Component.</p><p>3. Run the command called “Link Objects to Target Component”.</p><p>4. All objects will be replaced with Instances of the previously selected Component, keeping overrides where possible.</p><p><br></p><p>——————————</p><p><br></p><h2>❖ When to use Master plugin</h2><p>• When you have created several copies of one Frame or Group for exploration and need to turn them into one Component.</p><p>• When realize you should have used Instances of one Component instead of regular objects too late.</p><p>• If you want to create a new master Component for a bunch of existing Instances (clone component).</p><p>• To create different versions of one component for different layouts or screen sizes.</p><p>• You want to create a local copy of a Component, Instances of which were imported from Team Library.</p><p>• If you need to quickly get the ability to manipulate multiple similar objects at once.</p><p>• Create new Master Component and put it to the side while keeping the Instance in place.</p><p>• If you create art with repeating parts and want change them all at once.</p><p>• When you want to “Smart Animate” one Component into another one.</p><p>• Your Instance was detached from Master Component when copying to another file? Reattach it with Master plugin.</p><p>• When you want to copy components to another file and they get detached.</p><p>• To avoid fixing issues with the components imported from Sketch manually.</p><p>• You used Blend plugin on an object and want to change all the copies at once.</p><p><br></p><p>——————————</p><p><br></p><h2>❖ Technical info</h2><p>• Selection can include Frames, Groups and Instances of other components. All of them should have similar sets of elements in them. Objects which have different structures will be ignored. Alternatively you can select a bunch of layers of the same type, like texts, ellipses or rectangles.</p><p>• Note that prototyping connections will be removed from processed objects because of the Figma Plugin API limitations.</p><p><br></p><p>——————————</p><p><br></p><h2>❖ About license</h2><p>Your license purchase means a lot to me as an indie developer! With the license purchase you will be able to use the plugin as much as you want, while free trial version is limited to five successful uses per file. There is&nbsp;<strong>no subscription</strong>, no cost of updates, no hidden fees!</p><p><br></p><p>Please don't share your license code with anyone. If you are purchasing limited licenses (1, 2, 4 or 8 users), only share the license code with that amount of people. If you have any questions regarding the purchase or need help/financial support, feel free to reach out and I'll do my best to find a solution for you!</p><p><br></p><p>——————————</p><p><br></p><h2>❖ Contact</h2><p>Something is broken? Got feedback? Don't hesitate to <a href=\"mailto:gleb@dominate.design\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">send me an email</a>!</p><p>— Gleb Sabirzyanov</p>","id":"767721682134156281","installCount":42944,"lastUpdateDate":"2022-06-28T09:15:56.838Z","likeCount":1124,"name":"Master","publisherHandle":"g","publisherId":"328","publisherName":"Gleb","runCount":25593,"viewCount":58019},{"description":"You can toggle slices visibility in batch. The plugin decides from first found slice's visibility. If first slice is visible, all slices will be invisible regardless of their visibility status or vice versa. I will improve the plugin by requests. So feel free to feedback.","id":"768074299758218258","installCount":8804,"lastUpdateDate":"2020-06-16T06:21:50.516Z","likeCount":107,"name":"Show/Hide Slices","publisherHandle":"2474635","publisherId":"2474635","publisherName":"Bahadır Katipoğlu","runCount":3916,"viewCount":5789},{"description":"Looking for the logo inspiration for your next awesome project on Figma no need to go out and roam here and there for getting logo or inspiration we got you right here in Figma, Logo Creator plugin with prebuild collections of logo browse the plugin and select the best logo or craft one using different component.\n\nCraft a beautiful logo by choosing a variety of shapes or select the best logo from prebuild collections of 300+ logos.","id":"768094929040207895","installCount":129982,"lastUpdateDate":"2020-05-11T16:20:16.329Z","likeCount":913,"name":"Logo Creator","publisherHandle":"HexorialStudio","publisherId":"870959682079605985","publisherName":"Hexorial Studio","runCount":91596,"viewCount":109478},{"description":"<p>This plugin helps you create grids where every other row or column needs to be offset e.g. hexagonal grids or brick patterns.</p><p><br></p><p>How to Use</p><p>1. Select a node (works best with a component)</p><p>2. Run the plugin</p><p>3. Adjust values for rows, columns, spacing and offset</p><p>4. Click Create</p><p><br></p><p>Open Source: <a href=\"https://github.com/forsartis/figma-offgrid\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">https://github.com/forsartis/figma-offgrid</a></p>","id":"768105866232801306","installCount":3807,"lastUpdateDate":"2020-10-12T09:28:06.670Z","likeCount":47,"name":"Offgrid","publisherHandle":"jens","publisherId":"1209463","publisherName":"Jens","runCount":2566,"viewCount":5043},{"description":"<p>Frame tags makes it easy to add tags to the top of frames and components to help show the stage the designs are at. This makes it easy to communicate with collaborators where attention may be required.</p><p>You can currently choose from the following list of tags:</p><ul><li>Draft</li><li>Approved</li><li>Complete</li><li>Work in progress</li><li>Content required</li><li>Research required</li><li>Approval required</li><li>Revised</li><li>On hold</li><li>Ready for review</li><li>Ready for dev</li></ul><p><br></p><p>How to use:</p><ol><li>Select the frames and/or components you want to add tags to</li><li>Run the Frame Tags plugin</li><li>If using a preset tag, you’re all done!</li><li>If using the Frame Tags UI, select the tag, size and color</li><li>Click 'Create tag'</li></ol><p><br></p><p>Roadmap:</p><ol><li>When adding new tag to existing frame, replace old one rather than adding another on top</li><li>Ability to add your own tags</li><li>Ability to save custom colors to the swatch</li></ol><p><br></p><p>If you have any tags you would like added to the plugin or have any other feature requests or support questions, feel free to email me.</p><p>Email: <a href=\"mailto:michael@mtmeyer.net\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">michael@mtmeyer.net</a></p>","id":"768262762486932527","installCount":9915,"lastUpdateDate":"2022-06-30T07:27:58.856Z","likeCount":160,"name":"Frame Tags","publisherHandle":"mmeyer","publisherId":"107928","publisherName":"Michael Meyer","runCount":7498,"viewCount":15168},{"description":"Search for anything, find a color.\n\nColor Search gives you up to 5 colors for literally any search query. \n\nChoose your favorite an add it to your local styles in seconds!","id":"768550475442788437","installCount":43874,"lastUpdateDate":"2019-10-24T04:21:42.336Z","likeCount":448,"name":"Color Search","publisherHandle":"joel","publisherId":"5268","publisherName":"Joel Califa","runCount":18574,"viewCount":19592},{"description":"<p>Ever end up wanting to reset your layer names, so the name reflects your text content? How about having to do that repeatedly for TONS of layers or components? 😰 It's not possible to reset them all at once, UNTIL NOW!</p><p><br></p><p>\"How do I get started?\"</p><p><br></p><p>Easy! Just select any amount of text layers, and run the \"Reset Text Layer Name\" command.</p><p><br></p><p>Boom! You're done. 🎉</p>","id":"768671547563304036","installCount":2996,"lastUpdateDate":"2021-04-14T03:00:01.616Z","likeCount":54,"name":"Reset Text Layer Name","publisherHandle":"megaroeny","publisherId":"4559","publisherName":"Reony Tonneyck","runCount":2157,"viewCount":3567},{"description":"Finally in Figma! Pick a color from anywhere on your desktop. Colors are automatically copied to your clipboard.\n\nIt can't get any simpler.","id":"769033212122764418","installCount":5955,"lastUpdateDate":"2019-10-25T16:41:53.736Z","likeCount":54,"name":"Anywhere Picker","publisherHandle":"Andrew","publisherId":"246675","publisherName":"Andrew Goodwin","runCount":3698,"viewCount":4305},{"description":"<p>Sympli Handoff plugin allows you to separate your ready-to-implement design and hand it over to the rest of the team, separating it from the work-in-progress. This creates a centralized, platform-agnostic source of truth, where your development team can access all your designs and tokens and download pre-generated code snippets. All of the design updates can be compared to the previous versions with a handy visual difference tool, showing you all the changes, even the smallest ones. Comments, version history, and prototype player are all built in to help your dev team understand the app flow. Jira, Azure Boards, Microsoft Teams, Slack, Xcode, and Android Studio integrations together with an optional on-premises set up are also available for a seamless workflow.</p><p><br></p><p>Demo video: <a href=\"https://youtu.be/BSR2Tnmlznk\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://youtu.be/BSR2Tnmlznk</a></p>","id":"769264592946461883","installCount":23299,"lastUpdateDate":"2022-05-04T12:35:44.440Z","likeCount":342,"name":"Sympli Handoff","publisherHandle":"Sympli","publisherId":"2452044","publisherName":"Sympli ✨","runCount":11935,"viewCount":21998},{"description":"<p>Vectary 3D plugin for Figma is adding the missing third dimension to your 2D designs. Place your Figma design into a predefined 3D mockup or your custom 3D element. Set your desired perspective in 3D and place the result into the scene with one click.</p><p><br></p><p>Want to help improve this plugin?</p><p>Send us your feedback → <a href=\"https://vectary.typeform.com/to/XvO36Ozb\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Feedback / Bug Report</a> or join the team → <a href=\"https://www.vectarylife.com/?utm_source=figma_page\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Vectary Careers</a></p><p><br></p><p>Vectary 3D plugin is powered by Vectary - the easiest online 3D design tool and sharing platform made for 2D designers. Get into the 3D design, start for free on <a href=\"http://www.vectary.com/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">www.vectary.com</a></p>","id":"769588393361258724","installCount":386712,"lastUpdateDate":"2022-05-31T07:37:34.886Z","likeCount":3282,"name":"Vectary 3D Elements","publisherHandle":"vectary","publisherId":"282345","publisherName":"Vectary","runCount":289584,"viewCount":334954},{"description":"<p>UI Faces aggregates thousands of avatars which you can carefully filter to create your perfect personas or just generate random avatars. The avatars are aggregated from various sources. You can filter by age, gender, emotion, etc.</p><p><br></p><p>Check source license before you decide to use avatar in a live project. You can find all licenses at <a href=\"https://uifaces.co/license\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://uifaces.co/license</a>.</p><p><br></p><p>Download and use of this plugin is subject to UI Faces Terms of Service and Privacy Policy. Go to <a href=\"http://uifaces.co/tos\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">uifaces.co/tos</a> for more info.</p>","id":"769664006254845172","installCount":140251,"lastUpdateDate":"2022-01-05T22:25:22.660Z","likeCount":669,"name":"UI Faces","publisherHandle":"mightyalex","publisherId":"12749","publisherName":"Aleksandar Tasevski","runCount":115055,"viewCount":126646},{"description":"<p>Tired of copying vector parts to customize them?</p><p>Try this plugin to speedup your work!</p><p><br></p><p>You can Split Vectors:</p><p><br></p><p>➡ by Fills. Select Vector with more than one fill region. Differently colored regions supported too.</p><p>➡ by Shapes. Select Vector with more than one separated shapes inside.</p><p>➡ by Segments. Select Vector with more than one segment inside.</p><p><br></p><p>Known issues:</p><p>Due to API limitations, it is currently impossible to get all possible fill areas automatically after filling a Vector, so you need to manually add fills with Paint Bucket (B) before splitting.</p><p><br></p><p>Artwork inspired by:</p><p>🖼 Kazimir Malevich, Spotrsmeny, 1931</p><p>🖼 Kazimir Malevich, Suprematist composition, 1915-1916</p><p>🖼 Wassily Kandinsky, Composition VIII, 1923</p><p><br></p><p>Sources: <a href=\"https://github.com/neelts/figma-split-vectors\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://github.com/neelts/figma-split-vectors</a></p><p><br></p><p>Subscribe to updates, discuss and report bugs in Telegram:</p><p>https://t.me/nfigma</p><p><br></p><p>Dedicated to my beloved wife Sofia 💖</p>","id":"769868828362075393","installCount":8441,"lastUpdateDate":"2022-06-10T16:56:19.502Z","likeCount":106,"name":"Split Vectors","publisherHandle":"neelts","publisherId":"277703","publisherName":"Neil Akhmetov","runCount":7378,"viewCount":12282},{"description":"Symbol Icons Browser makes it easy to browse and copy symbols from SF Symbols, Material Icons font and Font Awesome.\n\n# Ready to use\nTo use this plugin, Please install San Francisco font Material Icons font (.ttf) and Font Awesome (.otf).\n\nSan Francisco font: https://developer.apple.com/fonts/\nMaterial Icons font (.ttf): https://github.com/jossef/material-design-icons-iconfont\nFont Awesome (.otf): https://github.com/FortAwesome/Font-Awesome\n\n# Usage\n1. Find the symbol you want to use\n2. Click the symbol\n\n# Click Options\n- Copy: copy symbol glyph to clipboard\n- Copy&Paste: copy and paste symbol glyph to selected text objects\n- Create: create new symbol glyph as a text object on the canvas","id":"770570903162993974","installCount":24177,"lastUpdateDate":"2019-11-28T01:47:06.621Z","likeCount":124,"name":"Symbol Icons Browser","publisherHandle":"kudakurage","publisherId":"1050175","publisherName":"Kaz Motoyama @kudakurage","runCount":18802,"viewCount":21810},{"description":"Generate and maintain complex information graphs in Figma using Graphviz. Graphs are defined using a simple text language (“dot”) and the source code for a graph is stored on the canvas graph object, making it really easy to share graphs that are editable as well as making changes.\n\nGallery and examples: https://www.figma.com/c/file/773333023004630195\n\nThis plugin uses a WebAssembly version of Graphviz (https://www.graphviz.org/) which is an open-source library for generating these graphs.\n\nDocumentation\n-> Node shapes: https://www.graphviz.org/doc/info/shapes.html\n-> Attributes: https://www.graphviz.org/doc/info/attrs.html","id":"770827538515501401","installCount":4389,"lastUpdateDate":"2021-05-14T19:37:37.752Z","likeCount":87,"name":"Graphviz","publisherHandle":"rsms","publisherId":"4466","publisherName":"Rasmus","runCount":3970,"viewCount":10237},{"description":"This plugin lets you edit the fill rules of a vector object. Fill rules determine which parts of a vector outline are filled. The fill rules have different behavior when a vector outline overlaps.\n\nWhy is this useful? Certain export formats (e.g. TrueType fonts, Android VectorDrawable) only support the non-zero fill rule. You can use this plugin to manually convert even-odd to non-zero to make the exporters for these formats work.","id":"771155994770327940","installCount":11633,"lastUpdateDate":"2019-10-29T23:40:14.459Z","likeCount":237,"name":"Fill Rule Editor","publisherHandle":"evan","publisherId":"80028","publisherName":"Evan Wallace","runCount":9260,"viewCount":15900},{"description":"PWA Icon App Exports 📐\n--------------------------------------\nApply to the selected frame the required export settings for PWA icons App.\n\nUsage\n----------------------------------\n1. Select a frame containing your app icon.\n2. Press `command + /` and search for 'PWA Icon App Exports'\n3. Run the plugin\n4. `command + shift + p` to re-run the plugin instantly\n\nContact\n----------------------------------\nPing me on [Twitter](https://twitter.com/geoffreycrofte) if you want to talk about this.\n\nThanks\n----------------------------------\nCode forked from [Briand Lovin iOS Plugin](https://github.com/brianlovin/figma-ios-export-settings), thanks for that ☺️","id":"771341909571444129","installCount":4008,"lastUpdateDate":"2019-10-30T16:22:38.732Z","likeCount":44,"name":"PWA Icon App Exports","publisherHandle":"geoffreycrofte","publisherId":"923664","publisherName":"Geoffrey Crofte","runCount":1610,"viewCount":4489},{"description":"😩 Tired of copying and pasting?\n😣 Wasting time editing multiple text fields one at a time?\n\n😁 Now you can quickly select and fill one or more text fields with preset text or write your own! You can also save up to 4 different text options to use later.\n\nNote: Closing the plugin will reset the text options.","id":"771783167546313180","installCount":2865,"lastUpdateDate":"2019-11-15T01:33:26.156Z","likeCount":26,"name":"Text Filler","publisherHandle":"nate_g","publisherId":"786673","publisherName":"Nate Greenwall","runCount":2118,"viewCount":3869},{"description":"Have you wondered exactly how good you are at using Figma? Now you can measure that quantitatively with data-driven evidence.\n\nThis plugin initiates a speed test, where you will have to replicate a sample design within the time limit! You will be scored based on your accuracy as compared to the original design.","id":"771878331444101613","installCount":864,"lastUpdateDate":"2019-11-18T18:23:53.332Z","likeCount":9,"name":"Design Speed Test","publisherHandle":"0","publisherId":"359371","publisherName":"Davy Mao","runCount":287,"viewCount":1079},{"description":"<p>Bulk rename your color and text styles like a 💯 boss.</p><p><br></p><p>Simply run this plugin in a file that has local styles and select which styles you want to rename. You can also numerate your names via $n and $nn, which will add numbers in ascending order of the list. You can also re-use the existing name via $&amp; (just like Figma's bulk rename)</p>","id":"772054917007268360","installCount":3640,"lastUpdateDate":"2020-10-26T16:17:53.079Z","likeCount":117,"name":"Regulator","publisherHandle":"miguel","publisherId":"39140","publisherName":"Miguel Solorio","runCount":2246,"viewCount":5826},{"description":"A Figma plugin that lets you import, lit, use and render 3D models right there in Figma 🙈\n\nWatch the video https://youtu.be/XRP-9JM7h4A to see how to use the Third plugin for Figma.\n\n💡 Features\n-   ⚡ A viewport to interact with 3D models.\n-   🔥 High resolution and transparent rendering.\n-   😽 Easy to use UI.\n-   ✨ Supports multiple 3D Object model format for import.\n-   🚀 Lightweight.\n\n🤔 TODOS\nAdd support for postprocessing effects such as\n* Color grading.\n* Bloom.\n* Vignette and Dither.","id":"772499949564209716","installCount":6265,"lastUpdateDate":"2019-12-14T21:54:33.053Z","likeCount":147,"name":"Third","publisherHandle":"victor_aremu","publisherId":"203619","publisherName":"Victor Aremu","runCount":4574,"viewCount":8502},{"description":"Navigate your canvas like an adventure at sea, with a map in hand.\n\n-> Orient yourself in large designs\n-> Quickly jump to any location on canvas with a single click\n-> Click and drag to quickly scan your designs\n-> Double-click to select & navigate to a layer","id":"772952119002135124","installCount":10186,"lastUpdateDate":"2019-11-03T23:20:39.859Z","likeCount":260,"name":"Minimap","publisherHandle":"rsms","publisherId":"4466","publisherName":"Rasmus","runCount":7353,"viewCount":17505},{"description":"<p>Turn your 3Dconnexion SpaceMouse into a panning and zooming tool!</p><p>- Compatible with both wired and wireless models</p><p>- Intuitive spatial navigation</p><p>- Adjustable panning/zooming rate</p><p>- Invertable X/Y/Z axes</p><p><br></p><p>Issues and contributions are welcome on GitHub</p><p><a href=\"https://github.com/chuanqisun/figma-plugin-spacemouse\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">https://github.com/chuanqisun/figma-plugin-spacemouse</a></p><p><br></p><p>To learn more about the device, visit</p><p><a href=\"https://www.3dconnexion.com/products/spacemouse.html\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">https://www.3dconnexion.com/products/spacemouse.html</a></p><p><br></p><p>Roadmap</p><p>- [ ] Minimize interface (pending Figma API support)</p><p><br></p><p>**Disclaimer**</p><p>I don't work for 3Dconnexion the company and I don't make any profit from making and maintaining this plugin. I'm a Human Computer Interaction (HCI) enthusiast making better tools for designers and developers alike.</p>","id":"773058554383274587","installCount":1996,"lastUpdateDate":"2021-03-20T18:49:22.161Z","likeCount":27,"name":"3Dconnexion SpaceMouse Driver","publisherHandle":"90011","publisherId":"90011","publisherName":"Chuánqí Sun","runCount":1469,"viewCount":5960},{"description":"Generate swatches from blending and sampling colors.","id":"773254113156648564","installCount":2312,"lastUpdateDate":"2020-03-16T06:06:56.616Z","likeCount":31,"name":"Airstream","publisherHandle":"caged","publisherId":"1033590","publisherName":"Justin Palmer","runCount":1461,"viewCount":3281},{"description":"<p>With Smart text you can create custom text expressions with special tokens connected to the properties of your layers. </p><p>Tokens grant you access to layer’s properties, such as size, position, transforms, colors, fonts, styles, names, effects and much more.</p><p><br></p><p>After you make changes on the connected layers, the plugin will update the expressions content with up-to-date data from the layers.</p><p><br></p><p>Documenting design has never been easier: Create and maintain automatic documentations, style-guides, brand manuals, dev specs or any design templates, right in Figma.</p><p><br></p><p>——————————————————</p><p></p><p>HOW TO CREATE SMART EXPRESSIONS</p><p><br></p><p>1. Access the plugin and select the Insert Tab.</p><p>2. Select at least one layer to connect on the canvas. Plugin will detect your selection and will show the name of the selected layer, or ‘Mixed’ if more than one layer is selected.</p><p>3. Add tokens on the expression input by clicking the items in the Tokens list. The plugin will give you a live preview of the result for the first selected item.</p><p>4. Create a custom expression by mixing plain text and tokens inside the Expression field.</p><p>5. Click Insert to add a text layer containing the expression, on top of each selected layer.</p><p><br></p><p>Note: Editing the content or tokens of an expression after the insertion is not currently supported. You’ll have to add a new expression with desired values.</p><p><br></p><p>——————————————————</p><p></p><p>HOW TO SYNC SMART EXPRESSIONS</p><p><br></p><p>1. Access the plugin and select the Resolve Tab.</p><p>2. Select a scope from the Picker. You can choose to resolve the current Selection, Current Page or the Entire Document.</p><p>3. Click Resolve to proceed. The plugin will detect all available expressions in the Scope and update the content based on the current layer properties.</p><p><br></p><p>Note: Expressions connected to missing or deleted layers will be ignored and tagged as Broken. Reconnection is not supported currently.</p><p><br></p><p>——————————————————</p><p><br></p><p>HOW TO CUSTOMIZE TOKENS OUTPUT VALUE</p><p><br></p><p>Some tokens allow their output value to be customized. These tokens use square-brackets in their name. You can customize their output by changing the value inside.</p><p><br></p><p>Colors: [HEX] -&gt; [RGB]</p><p>Date: [MM.DD.YYYY] -&gt; [<a href=\"http://hh.mm.ss\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">hh.mm.ss</a>]</p><p><br></p><p>---</p><p><br></p><p>Available Color Outputs (case-insensitive)</p><p>HEX, RGB, CSS, HSL</p><p><br></p><p>Available Date Output (case-sensitive)</p><p>See full list of formats here: <a href=\"https://devhints.io/moment\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://devhints.io/moment</a></p>","id":"773378597413161605","installCount":5213,"lastUpdateDate":"2022-06-11T14:06:39.757Z","likeCount":132,"name":"Smart Text","publisherHandle":"mirkosantangelo","publisherId":"206939","publisherName":"Mirko Santangelo","runCount":3722,"viewCount":9435},{"description":"<p>Download local styles as swift code, and save time.</p><p><br></p><p>A lifesaver for developers.</p><p>Tempura Generator lets you download local styles as swift code—no more time wasted with annoying typos and boring repetition. Just plug in and play.</p><p>When styling specific labels with local styles, Tempura Generator generates the code for the label, so you can paste it immediately into the scene you’re developing.</p><p><br></p><p>INSTRUCTIONS</p><p><br></p><p>* To download the Color Style catalog, select the Color Style header and click Download Archive. Unzip the downloaded Archive, and copy and paste its contents into the project. You can then access these colors and use them by typing &lt;&gt;</p><p><br></p><p>* The same procedure applies for text styles. Select Text Styles, Download File, and copy and paste it into the project. You can then access these text styles by typing &lt;&gt;</p><p><br></p><p>* You can generate a code to compose a label inside the UI of a scene by doing the following: Select the label you want to code, then select Code Header in the plugin, make your choices, and click Copy Style.</p><p><br></p><p>WHY USE TEMPURA GENERATOR?</p><p><br></p><p>Developers are always seeking out ways to save time. Tempura Generator delivers, big-time. As soon as the styles are added to the project, anyone in the team can use it immediately. So if you’re looking for ways to make your team more efficient, Tempura Generator is a must-have.</p><p><br></p><p>For example, if the designer changes the accent color from red to yellow, you don’t need to manually make these changes everywhere. Simply re-download the archive, paste its contents into the project, and it will immediately update all the instances of red, with the new yellow.</p>","id":"773469727625059982","installCount":684,"lastUpdateDate":"2021-10-12T13:49:47.528Z","likeCount":19,"name":"Tempura Generator","publisherHandle":"498037","publisherId":"498037","publisherName":"Alex Tosatto","runCount":228,"viewCount":928},{"description":"Select one or multiple elements and fill it with a random color.\n\nDoesn't support groups.","id":"773850178770516691","installCount":2232,"lastUpdateDate":"2019-11-22T19:11:40.259Z","likeCount":14,"name":"random color","publisherHandle":"diogo","publisherId":"15481","publisherName":"Diogo Ferreira","runCount":1714,"viewCount":1792},{"description":"Helper with which it is even easier to arrange elements on the grid!\n\nWhen the plugin works, the canvas elements will snap to the grid when moving/scaling.\n\nHow to use:\n1. Launch the plugin and click on the launch icon (top, right).\n2. Indicate the size of the grid.\n3. Done! By dragging the canvas elements you will notice that they snap to the cells.\n\n⚠ To work, the plugin must be running!\n\nI recommend working with the grid enabled so that the result is clearer.\n\nDemonstration: twitter.com/AndreslavKozlov/status/1198003232137764864","id":"773875667263247070","installCount":5464,"lastUpdateDate":"2020-02-22T21:42:44.758Z","likeCount":81,"name":"Snap to Grid","publisherHandle":"Andreslav","publisherId":"629","publisherName":"Andreslav Kozlov","runCount":3561,"viewCount":11765},{"description":"This is the unofficial plugin for the Font Awesome Icon Collection. The plugin provides access to the entire free icon collection.\nAll icons are in vector format. Plugin allows you to filter the list of icons by name.","id":"774202616885508874","installCount":286785,"lastUpdateDate":"2021-05-15T19:48:40.127Z","likeCount":774,"name":"Font Awesome Icons","publisherHandle":"1006","publisherId":"1006","publisherName":"Vyacheslav Myskov","runCount":231418,"viewCount":161731},{"description":"Snap photos with any phone and send them directly to Figma.\n\nGreat for notebook sketches or whiteboard brainstorming sessions!","id":"775445260035815307","installCount":7482,"lastUpdateDate":"2019-12-05T20:53:56.533Z","likeCount":164,"name":"Mobile Upload","publisherHandle":"joel","publisherId":"5268","publisherName":"Joel Califa","runCount":4051,"viewCount":9410},{"description":"<p>Tired of working ? Visit the Game Zone to escape the work atmosphere and do some fun and get back to work and do effective work. best eight games for fun</p><p>We want increse your productivity and creativity, ideation, brainstroming skills so you perform great at your work.</p><p><br></p><p>Games:</p><p><br></p><p>Cross The Road</p><p>Ghost Bustin</p><p>Highway Race</p><p>Rock Papper Scissors</p><p>Tiles</p><p>Planet Defender</p><p>Tic Tac Toe</p><p>Tower Blocks</p>","id":"775611985605402516","installCount":1982,"lastUpdateDate":"2019-11-26T03:36:36.152Z","likeCount":32,"name":"Game Zone","publisherHandle":"HexorialStudio","publisherId":"870959682079605985","publisherName":"Hexorial Studio","runCount":1465,"viewCount":3191},{"description":"Browse, find, use icons from MaterialDesignIcons.com right from inside Figma!\n\nFEATURES\n• All 4000+ icons from MaterialDesignIcons.com\n• Always latest icons.\n\nSPECIAL THANKS TO\nmaterialdesignicons.com, jsdelivr.com, fuse.js, react-window","id":"775671607185029020","installCount":50067,"lastUpdateDate":"2019-11-17T08:21:34.411Z","likeCount":274,"name":"Material Design Icons (Community)","publisherHandle":"cdes","publisherId":"26415","publisherName":"Ahmad Al Haddad","runCount":40007,"viewCount":34135},{"description":"<p>Apply Duotone Effect Filter on images. Simple, accurate &amp; fast.</p><p><br></p><p>________</p><p><br></p><p>1. How does it work ?</p><p><br></p><p>• select one (or many) shape with an image fill</p><p>• click on \"Apply\"</p><p>• a new duotone fill is added to your shape</p><p><br></p><p>________</p><p><br></p><p>2. Colors :</p><p><br></p><p>You can change colors using the colors inputs, by pasting/typing hex values, or selecting 1 or 2 rectangle shapes with fill color and focusing the inputs.</p><p><br></p><p>tip : click on the arrow button to invert tones</p><p><br></p><p>________</p><p><br></p><p>3. Random tones :</p><p><br></p><p>• select one (or many) shape with an image fill</p><p>• select \"random\" then \"Apply\"</p><p>• click on \"Apply\" again for more randomness</p><p><br></p><p>tip : the \"multiple\" option creates a row of 10 random duotones (only works if your shape is directly on the main page)</p><p><br></p><p>credits : inspired by Matt Kandler</p>","id":"775712743044356003","installCount":31067,"lastUpdateDate":"2022-02-24T12:30:20.537Z","likeCount":355,"name":"Duotones","publisherHandle":"fabien","publisherId":"383","publisherName":"Fabien","runCount":23373,"viewCount":26666},{"description":"<p>Apply Pixelate / 8bit Effect Filter on images. Raster &amp; Vector.</p><p><br></p><p>________</p><p><br></p><p>1. How does it work ?</p><p><br></p><p>• select one (or many) shape with an image fill</p><p>• use slider to set sample size value (it starts with a 16x16 pixel grid size)</p><p>• click on \"Apply\"</p><p>• a new Pixelate fill is added to your shape</p><p><br></p><p>tip : you can edit min, max and current Slider values.</p><p><br></p><p>________</p><p><br></p><p>2. Vector mode :</p><p><br></p><p>• select one shape (only) with an image fill</p><p>• use the slider to set the sample size value</p><p>• click on \"Vectorize\"</p><p>• a new group, filled with rectangles representing the pixels, is added to the page</p><p><br></p><p>note : \"Vectorizing\" an image can take time, so there is a limit of 20 000 blocks (depending on image and sample size)</p>","id":"775716538746765221","installCount":19110,"lastUpdateDate":"2022-02-24T13:08:25.696Z","likeCount":220,"name":"Pixels","publisherHandle":"fabien","publisherId":"383","publisherName":"Fabien","runCount":16554,"viewCount":18688},{"description":"<p>Apply simple Threshold Effect Filter on images. Convert images to alpha masks.</p><p><br></p><p>________</p><p><br></p><p>1. How does it work ?</p><p><br></p><p>• select one (or many) shape with an image fill</p><p>• use slider or input to set threshold value</p><p>• click on \"Apply\"</p><p><br></p><p>Options :</p><p><br></p><p>- Transparent makes the white parts.. transparent</p><p>- Alpha masks creates image masks based on lightness</p><p><br></p><p>________</p><p><br></p><p>2. What is it ?</p><p><br></p><p>Thresholding replace each pixel in an image with a black pixel, if the image intensity is less than the threshold value, or a white pixel otherwise.</p>","id":"776033210163988440","installCount":4225,"lastUpdateDate":"2022-02-24T13:16:34.745Z","likeCount":104,"name":"Thrshold","publisherHandle":"fabien","publisherId":"383","publisherName":"Fabien","runCount":2653,"viewCount":5981},{"description":"<p>Format headlines and titles with a proper title case. The rules are based on style guides from APA, The Chicago Manual of Style, and modern conventions. Establishes consistent capitalization in design mockups.</p><p><br></p><p>🤔 But What About Built-In Title Case Option?</p><p><br></p><p>Figma’s built-in Title Case option capitalizes the first letter of every word, which is incorrect — articles, conjunctions, short prepositions, and some other small words should not be capitalized.</p><p><br></p><p>🚫 Incorrect Capitalized Case:</p><p><br></p><p>From The Highest Heights To The Lowest Depths, In Photographs</p><p><br></p><p>‘Ford V Ferrari’ Finishes First At The Box Office</p><p><br></p><p>✅ Correct Title Case:</p><p><br></p><p>From the Highest Heights to the Lowest Depths, in Photographs</p><p><br></p><p>‘Ford v Ferrari’ Finishes First at the Box Office</p><p><br></p><p>🧐 The Capitalization Rules</p><p><br></p><p>– By default, capitalize all words</p><p>– Always capitalize the first and last word in titles and subtitles</p><p>– Capitalize both parts of hyphenated words</p><p>– Lowercase articles: a, an, the</p><p>– Lowercase conjunctions: and, but, or, nor</p><p>– Lowercase short prepositions: as, at, by, for, in, of, on, per, to, via</p><p>– Lowercase versus: vs., vs, v., v</p><p>– Lowercase NYT words: en, if</p><p>– Let intentional capitalization stand</p>","id":"776197163275203567","installCount":2292,"lastUpdateDate":"2021-11-16T17:35:09.217Z","likeCount":44,"name":"Proper Title Case","publisherHandle":"efedorenko","publisherId":"7663","publisherName":"Eugene Fedorenko","runCount":1582,"viewCount":4250},{"description":"Is It Done Yet? is a simple plugin that enables you to organize frames according to their progress status by adding a tag alongside each name. It also allows you to add a ticket number for further organization.\n\n1) For designers - Quickly communicate the status of their designs and make it easier to mark designs for review and hand over files for development.\n\n2) For developers - Clearly marked files that they can work on, leaving no room for confusion or error.\n\n3) For PM's - know what’s ready to groom\n\n4) For Clients - Reduce confusion and save time on turn-around by letting them know precisely what’s ready for approval","id":"776482373008057376","installCount":2805,"lastUpdateDate":"2019-12-17T19:30:45.126Z","likeCount":126,"name":"Is it done yet?","publisherHandle":"2207703","publisherId":"2207703","publisherName":"Nitin Rangarajan","runCount":2059,"viewCount":7714},{"description":"Leave notes in your Figma file\n\nYou can insert notes one at time by selecting a note colour.\n\nWhen you run the plugin you can add notes in the following colours: green, red, purple, blue, white, and classic yellow!\n\n----------------\nPaste into note\n----------------\nIf you have text that you would like to paste into your file just select \"Paste into note\" and your text will be added in a yellow note.\n\nMultiple notes can be created when you paste text that has line breaks in it. This makes adding a collection of notes faster from your favourite text editor and/or spreadsheet.\n\nYou can also replace text of an existing note by pasting text when you have that note selected. This also works for inserting multiple notes of a specific colour.\n\n---------------\nChange colours\n---------------\nChange the colour of an existing note to another one in the palette by using the \"Change colour\" command","id":"776702826923617343","installCount":10508,"lastUpdateDate":"2020-04-11T12:55:32.609Z","likeCount":76,"name":"Sticky Notes","publisherHandle":"lifeofmle","publisherId":"1557379","publisherName":"Michael Le","runCount":12070,"viewCount":15247},{"description":"Browse, find, use icons from boxicons.com right from inside Figma!\n\nFEATURES\n• All 1200+ icons from boxicons.com\n• Always latest icons\n\nSPECIAL THANKS TO\nboxicons.com, jsdelivr.com, fuse.js, react-window","id":"776756033372000327","installCount":12802,"lastUpdateDate":"2019-11-17T08:23:00.018Z","likeCount":96,"name":"Boxicons","publisherHandle":"cdes","publisherId":"26415","publisherName":"Ahmad Al Haddad","runCount":9800,"viewCount":9815},{"description":"<p>Animate your artboards in a few clicks with a lite and free version of Beatflyer.</p><p><br></p><p>Animate your layers independently combining as many effects as you want among the dozens available (some insanely powerful 🔥).</p><p><br></p><p>Group your layers properly before running the plugin to give the same combination of effects to multiple elements.</p><p><br></p><p>Before using it, you might want to look at the <a href=\"https://www.youtube.com/watch?v=iFTYHXBgT8g\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">intro video</a>.</p><p><br></p><p>Enjoy!</p><p><br></p><p>P.S.: For many more functionalities, check out the full version: <a href=\"https://beatflyer.com/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://beatflyer.com/</a></p>","id":"776923340646658146","installCount":26588,"lastUpdateDate":"2022-03-22T09:07:51.278Z","likeCount":294,"name":"Beatflyer Lite","publisherHandle":"nuthinking","publisherId":"42023","publisherName":"Christian Giordano","runCount":19313,"viewCount":33045},{"description":"Creates new frames to display the latest weather on Mars\n\nWeather data from InSight: Mars Weather Service API https://api.nasa.gov/assets/insight/InSight%20Weather%20API%20Documentation.pdf\n\nNASA InSight is taking daily weather measurements (temperature, wind, pressure) on the surface of Mars at Elysium Planitia, a flat, smooth plain near Mars’ equator.","id":"777024810356177005","installCount":848,"lastUpdateDate":"2019-11-20T20:01:16.607Z","likeCount":10,"name":"Weather on Mars","publisherHandle":"minigolf2000","publisherId":"98046","publisherName":"Golf Sinteppadon","runCount":307,"viewCount":1366},{"description":"<p>The new&nbsp;<strong>Flowkit</strong>&nbsp;for Figma has dropped! Finely-tuned user flows all up inside your favorite design tool.</p><p><br></p><p><strong>Auto</strong>&nbsp;mode lets you connect two shapes, objects, frames, etc. with a shift click.</p><p><br></p><p>Once connected in&nbsp;<strong>Auto</strong>&nbsp;mode, objects remain connected while you move them around the canvas.</p><p><br></p><p><strong>Manual</strong>&nbsp;mode gives you granular control over the size and position of each individual flow component. You can also customize the end caps with built-in nested variants.</p><p><br></p><p><strong>Blocks</strong>&nbsp;provide a range of shapes and devices for adding flow waypoints.</p><p><br></p><p><strong>Glyphs</strong>&nbsp;give you a quick and easy way to add more context to your user flows.</p><p><br></p><p><strong>Annotate</strong>&nbsp;your flows with labels for quicker and clearer communication.</p>","id":"777287184344500379","installCount":29563,"lastUpdateDate":"2022-04-20T18:29:39.012Z","likeCount":652,"name":"Flowkit","publisherHandle":"mds","publisherId":"33350","publisherName":"MDS","runCount":35520,"viewCount":65796},{"description":"Quickly create cover pages for projects. You can adjust projects based on their current status.\n\nWhen observing Figma files through the file browser you'll now get every projects status at a glance. Each category has a unique color scheme.\n\nEasily update a projects status to let your team know its current progression.","id":"777546247691358380","installCount":4536,"lastUpdateDate":"2022-03-23T11:17:31.886Z","likeCount":161,"name":"Cover Status","publisherHandle":"seanehalpin","publisherId":"1890255","publisherName":"Seán Halpin","runCount":4267,"viewCount":11352},{"description":"Browse, find, use icons from ionicons.com right from inside Figma!\n\nFEATURES\n• All 600+ icons from ionicons.com\n• Always latest icons.\n\nSPECIAL THANKS TO\nionicons.com, jsdelivr.com, fuse.js, react-window","id":"777817104312450242","installCount":36299,"lastUpdateDate":"2020-02-10T08:31:49.668Z","likeCount":178,"name":"Ionicons","publisherHandle":"cdes","publisherId":"26415","publisherName":"Ahmad Al Haddad","runCount":31395,"viewCount":23926},{"description":"<p>Round all properties to the nearest multiplier of 8, 10, or your custom value! This is very useful when you are working with the 8px Grid, or other grid systems.</p><p><br></p><p><strong>You can:</strong></p><ul><li>Round the height, the width, and also the X- and Y-position of anything you want (Rectangles, Images, etc...)</li><li>Rounding the properties of multiple items at once is supported!</li></ul><p><br></p><p>—</p><p><br></p><p>Feature requests? 😊 Questions?</p><p>Just hit me on Twitter (<a href=\"https://twitter.com/madebyfabian\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">@madebyfabian</a>), via mail (<a href=\"mailto:hello@madebyfabian.com\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">hello@madebyfabian.com</a>) or via an Issue on GitHub.</p><p><br></p><p>—</p><p><br></p><p>Made with ❤️ by Fabian B. in Nuremberg, Germany. Want to support me? Would appreciate that very much! <a href=\"http://buymeacoff.ee/madebyfabian\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">http://buymeacoff.ee/madebyfabian</a></p>","id":"777919055291347154","installCount":4912,"lastUpdateDate":"2020-09-23T11:17:59.188Z","likeCount":108,"name":"Round it! (by 8px, 10px, ...)","publisherHandle":"f","publisherId":"358726","publisherName":"Fabian B.","runCount":2960,"viewCount":4967},{"description":"<p>Download countries and regions vector maps direct into your project.</p><p><br></p><p>VectorMaps allow to find country or region by name or select it on map.</p><p><br></p><p>Maps will be placed as separete frame. All items will be grouped by countries.</p><p><br></p><p>Also you can download map in svg or pdf formats here: <a href=\"https://vector.mapcraft.biz/constructor/\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">https://vector.mapcraft.biz/constructor/</a></p><p><br></p><p>IMPORTANT: For everyone who cares about disputed territories: All data is taken from OpenStreetMap and is not associated with the opinion of the author of the plugin.</p><p>--</p><p><br></p><p>Developed by Arseny Novikov</p>","id":"777954172157933782","installCount":31875,"lastUpdateDate":"2020-01-21T15:28:02.318Z","likeCount":356,"name":"Vector Maps","publisherHandle":"2325283","publisherId":"2325283","publisherName":"Arseny Novikov","runCount":21822,"viewCount":40387},{"description":"A simple plugin to create export settings for any selection into common formats for web, iOS and Android development.\n\nHow to use:\n* Select a frame or object to export\n* Run plugin from the plugin list\n* All export formats are built for those selections\n\nFormats:\nSCALE | SUFFIX |  FORMAT\n1x | - |  SVG\n0.5x | @0.5x | PNG\n1x | @1x | PNG\n2x | @2x | PNG\n3x | @3x| PNG\n4x | @4x | PNG\n1x | -mdpi | PNG\n1.5x | -hdpi | PNG\n2x | -xhdpi | PNG\n3x | -xxhdpi | PNG\n4x | -xxxhdpi | PNG","id":"778302475291888898","installCount":3676,"lastUpdateDate":"2019-11-19T17:41:02.848Z","likeCount":35,"name":"Figgy exporter","publisherHandle":"gol10dr","publisherId":"450","publisherName":"Gallo, Lou","runCount":3228,"viewCount":6266},{"description":"It's time to tame those strings! ✂️\n\nTruncate provides the ability to shorten text strings from both the beginning and end—by letter and by word.\n\nTo use, simply select a text layer (or multiple), enter a truncation value, and voilà!\n\nFor best results, it's recommended to use this on text layers that use the same font style.","id":"778556073965640991","installCount":3186,"lastUpdateDate":"2019-12-08T00:23:32.619Z","likeCount":53,"name":"Truncate","publisherHandle":"dannykeane","publisherId":"304130","publisherName":"Danny Keane","runCount":2146,"viewCount":5466},{"description":"Fill in your components with live data straight from your graphql server. Generate multiple pages and components in one click, filled with the latest data you fetched via graphql","id":"778614812931099944","installCount":1974,"lastUpdateDate":"2019-12-06T14:45:12.302Z","likeCount":47,"name":"GraphQL Data Fill","publisherHandle":"258539","publisherId":"258539","publisherName":"Gerard Lamusse","runCount":1319,"viewCount":5236},{"description":"<p>Apply your screen designs to perspective mockups. The plugin is free and does not require an account. If you wish to use our huge library of 1000+ mockups in full vector, check out <a href=\"https://Angle.sh\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">https://Angle.sh</a></p><p><br></p><p>For this plugin to work, you will need to create a Screen vector shape where you want to apply your app design. This can be drawn with the Pen tool (P) with 4 corners in this specific order: top left, top right, bottom right, bottom left and back to top left.</p><p><br></p><p>For more instructions, please check this video: <a href=\"https://www.youtube.com/watch?v=vtN1eQI27Fw\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">https://www.youtube.com/watch?v=vtN1eQI27Fw</a></p><p><br></p><p>It is recommended to use our free sample mockups where the Mockups are already drawn for you. If you have any question, please contact us.</p>","id":"778645840235495725","installCount":99116,"lastUpdateDate":"2021-10-28T15:15:20.966Z","likeCount":767,"name":"Angle Mockups","publisherHandle":"designcodeteam","publisherId":"1010544184720994429","publisherName":"DesignCode","runCount":102098,"viewCount":131178},{"description":"Easily export assets with the required settings and folder organization for Flutter apps.\n\nTo use, simply select layer(s) you want to export, click \"Export\", then run the Flutter Export plugin and select \"Export PNG\". After reviewing the preview, you can save a ZIP file containing the exported layers in PNG format at 1x, 1.5x, 2x, 3x, and 4x, ready to drop into your Flutter project.","id":"778755750523021654","installCount":15574,"lastUpdateDate":"2019-11-21T23:09:26.896Z","likeCount":119,"name":"Flutter Export","publisherHandle":"2719693","publisherId":"2719693","publisherName":"LunarLincoln","runCount":8216,"viewCount":19415},{"description":"<p>Figma Plugin Reverse Layers allows Figma users to reverse the order the selected layers.</p><p><br></p><p>1) Highlight the layers you want. The selected layers must all belong to the same parent layer.</p><p>2) Right click &gt; Plugins &gt; Reverse Layers</p><p>3) Voila!</p><p><br></p><p>You can hit CMD+Option+P to run the most recently ran plugin.</p><p><br></p><p>If you use this a lot please consider donating via PayPal to <a href=\"mailto:hoyoul@gmail.com\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">hoyoul@gmail.com</a> or Venmo @hoyoul. Thanks!</p>","id":"778881490330634603","installCount":1677,"lastUpdateDate":"2019-11-27T21:30:29.518Z","likeCount":16,"name":"Reverse Layers","publisherHandle":"caleb","publisherId":"2721315","publisherName":"Caleb Kang","runCount":1007,"viewCount":2488},{"description":"This plugin provide you useful functions like:\n\n1. Create hashtag\n2. Create a Mexican wave\n\nAnd it's just the beginning ! If you think of a useful function for Figma, please notice me your idea by mail.\n\nOpen source code:\nhttps://github.com/armandsalle/Utils-Figma-Plugin\n\nContact:\narmand.salle@gmail.com","id":"778910419377816946","installCount":698,"lastUpdateDate":"2019-12-16T14:27:56.958Z","likeCount":3,"name":"Useful Functions","publisherHandle":"ArmandSalle","publisherId":"1613082","publisherName":"Armand Salle","runCount":111,"viewCount":716},{"description":"Usage \nCreate local text styles in a familiar way through a standard \"figma\" interface. Divide nesting levels through the \"/\" symbol. Apply style to the element through the plugin.  \n\nExample:\n\"Desktop / Headers / H1 / Black-Bold\n\"Desktop / Headers / H1 / Black-Regular\n\"Desktop / Headers / H2 / Black-Bold\n\"Desktop / Headers / Special\n... \n \nThe plugin will display text styles in a convenient multi-level drop-down navigation.  \n\nFeatures\n— Potentially nesting levels can be infinite. But for convenience, try to limit yourself to 3 or 4 levels. \n\n— Do not use spaces in style names. The plugin will remove them. Instead of spaces, put \"-\" or \"_\" as real front-enders. \n\n— Sort the order of styles through the standard figma interface.\n\n— The plugin is case-sensitive. The \"Headers\" and \"headers\" levels will be separated.","id":"779266507098708411","installCount":2579,"lastUpdateDate":"2019-12-16T10:05:41.111Z","likeCount":47,"name":"Text Styles Organizer","publisherHandle":"egor","publisherId":"165656","publisherName":"Egor","runCount":2338,"viewCount":5711},{"description":"<p>Want to rotate an object around an arbitrary point? With Rotate Origin, it is possible!</p><p><br></p><h2>How to use:</h2><p>◉ Set the angle of rotation;</p><p>◉ Set the offset relative to the upper left corner;</p><p>◉ Rotate! ✨</p><p><br></p><h2>Examples:</h2><ol><li>Angle: 30; Offset X: 0%; Offset Y: 100% — will rotate the object 30 degrees relative to the lower left corner.</li><li>Angle: 45; Offset X: 0; Offset Y: 0 — rotates the object 45 degrees relative to the upper left corner.</li><li>Angle: 90; Offset X: 100; Offset Y: -100 — rotates the object 90 degrees relative to a point located 100 degrees to the left and 100 degrees above the top left corner.</li></ol><p><br></p><p>– The «Relative to the parent frame» parameter allows you to set the center of rotation relative to the parent frame.</p><p>– The «Duplicate layer» parameter allows you to specify the number of duplicates and the offset at each iteration.</p><p>– The «Fit into a angle» parameter allows you to distribute all duplicates of the node within the specified angle.</p><p><br></p><p>◉ Demonstration of work: <a href=\"http://twitter.com/AndreslavKozlov/status/1204150344864976896\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">twitter.com/AndreslavKozlov</a></p>","id":"780000661582724634","installCount":7459,"lastUpdateDate":"2022-07-14T11:53:49.939Z","likeCount":113,"name":"Rotate Origin","publisherHandle":"Andreslav","publisherId":"629","publisherName":"Andreslav Kozlov","runCount":6747,"viewCount":15343},{"description":"<p>Format and convert between currencies.</p><p><br></p><h2>Format Currency</h2><p>Changes the format and/or locale of currencies in text layers within the selection or on the current page.</p><ul><li>Optionally change to Explicit format (eg. $42.00 → $42.00 USD) or Short format (eg. 37,00 € EUR → 37,00 €).</li></ul><h3><br></h3><h2>Convert Currency</h2><p>Converts currencies in text layers within the selection or on the current page.</p><ul><li>Optionally round the converted currencies to the nearest 100s and 1000s.</li></ul><h3><br></h3><h2>Reset Plugin</h2><p>Resets all settings to their defaults.</p>","id":"780785006732555859","installCount":2218,"lastUpdateDate":"2020-10-20T12:35:29.296Z","likeCount":33,"name":"Format Currency","publisherHandle":"yuanqing","publisherId":"1682602","publisherName":"Yuan Qing Lim","runCount":1329,"viewCount":4387},{"description":"<p>Easily switch between light and dark mode using Lights</p><p><br></p><p>How it works:</p><p>1) Create your light and dark color palettes by creating and naming your color styles using \"Light / [name]\" and \"Dark / [name]\"</p><p>2) Apply your color styles accordingly to your layers on the canvas</p><p>3) Select the layers that you'd like to convert, then choose Lights &gt; On for light mode or Lights &gt; Off for dark mode</p><p><br></p><p>Note: Styles from external libraries are currently unsupported. Only styles created inside of your file are supported at the moment</p>","id":"780821534053786200","installCount":5743,"lastUpdateDate":"2020-02-28T15:10:31.848Z","likeCount":264,"name":"Lights","publisherHandle":"CashApp","publisherId":"1609","publisherName":"Cash App","runCount":4700,"viewCount":11483},{"description":"<p>Get YouTube or Vimeo video cover images from their urls.</p><p><br></p><p>How it works?</p><p>Just insert the YouTube or Vimeo url. If one or more layers are selected, a fill with the video cover image will be added to all of them. If no layer is selected, a new layer will be created with the video cover image fill.</p><p><br></p><p>The code for this plugin is open sourced at GitHub</p><p><a href=\"https://github.com/aarongarciah/figma-video-cover\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://github.com/aarongarciah/figma-video-cover</a></p><p><br></p><p>Made with ❤️ by Aarón</p><p><a href=\"https://twitter.com/aarongarciah\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://twitter.com/aarongarciah</a></p>","id":"780947947828574828","installCount":16605,"lastUpdateDate":"2021-08-25T07:40:37.192Z","likeCount":102,"name":"Video Cover Image","publisherHandle":"aarongarciah","publisherId":"438","publisherName":"Aarón García Hervás","runCount":15687,"viewCount":22476},{"description":"Generate a palette of colors using CSS variables.\n\ninput:\n\n/* bluegray-palette */\n$bluegrey-50: #ECEFF1;\n$bluegrey-200: #B0BEC5;\n$bluegrey-400: #78909C;\n$bluegrey-600: #546E7A;\n$bluegrey-800: #37474F;\n\noutput:\n\nA new framed collection of named rectangles matching the colors in your input.","id":"781017118947202678","installCount":1819,"lastUpdateDate":"2019-11-26T19:42:34.548Z","likeCount":21,"name":"Generate Palette","publisherHandle":"1883124","publisherId":"1883124","publisherName":"Brandon Bahret","runCount":1102,"viewCount":2866},{"description":"Font Master makes it easy to organize your fonts and ensure consistency in your texts. This plugin scans your project then shows you all of your font styles and where they have been used. You can select your texts and group them under a style quickly.","id":"781086314747849337","installCount":8471,"lastUpdateDate":"2019-11-26T09:24:25.076Z","likeCount":68,"name":"Font Master","publisherHandle":"19666","publisherId":"19666","publisherName":"Kaan Eryilmaz","runCount":6610,"viewCount":10227},{"description":"Quickly pseudo localize text right within Figma and test how your UI will work when translated. \n\nSelect a text node, frame or group to apply the formatting to all text nodes inside that selection. Single text nodes lets you preview the pseudo localized string formatting from the plugin, for other types of selections you will see a sample. \n\nFormating options  include:\n- Pad strings to simulate string expansion\n- Optional start and end makers\n- Two formatting strategies \n    - accented:  Ȧȧƈƈḗḗƞŧḗḗḓ Ḗḗƞɠŀīīşħ\n    - bidi: ɥsıʅƃuƎ ıpıԐ\n\nInspired by this great blog post from Netflix: https://medium.com/netflix-techblog/pseudo-localization-netflix-12fff76fbcbe","id":"781155826180092556","installCount":806,"lastUpdateDate":"2019-11-29T14:41:31.582Z","likeCount":6,"name":"Pseudoloc","publisherHandle":"jhardy","publisherId":"194293","publisherName":"Jared","runCount":400,"viewCount":1350},{"description":"<p>Paste data from a spreadsheet into styled Figma table rows.</p><p><br></p><h2>Usage</h2><ol><li>In Figma, create a table row component with a text box for each cell</li><li>Create a table in your mockup composed of these table row components, and select the table rows where you want the data applied</li><li>In Excel, select and copy your data</li><li>In Figma, run the plugin (<code>Plugins &gt; Table Paste</code>). In the popup window, paste the data from your spreadsheet into the textarea. Click the <strong>Apply</strong> button.</li></ol><p><br></p><p>The plugin applies one row of data to each selected Figma table row. The insertion order of the data will be the layer order in the Figma sidebar from bottom to top. The visual arrangement can be anything you want.</p><p><br></p><h2>Notes</h2><p>It's okay if the amount of data doesn't match the Figma table rows - extra cells or rows will be ignored.</p><p><br></p><p>Text boxes can be styled however you want, but you cannot have mixed styles within a single text box. The style of the first character will be applied to the entire text box when the plugin is run.</p><p><br></p><p>Your selection should be the table rows (components or frames) that <em>contain</em> text boxes. Text boxes that are selected directly will be ignored.</p>","id":"781208362060364436","installCount":20121,"lastUpdateDate":"2021-01-29T17:20:31.341Z","likeCount":222,"name":"Table Paste","publisherHandle":"Liquidnet","publisherId":"1601","publisherName":"Liquidnet Holdings","runCount":14609,"viewCount":28674},{"description":"EasyMask is a slightly more intuitive approach to masking.\n\nWhen two shapes are selected, Figma chooses the bottom shape to be the mask. This does the opposite. EasyMask will create a mask from the top selected layer.","id":"781317794301477536","installCount":3177,"lastUpdateDate":"2019-11-30T20:52:55.546Z","likeCount":49,"name":"EasyMask","publisherHandle":"evandenn","publisherId":"31346","publisherName":"Evan Dennington","runCount":1929,"viewCount":3651},{"description":"Format text with typographic features traditionally used in fine printing — en- and em-dashes, curly quotes, apostrophes, ellipses, and more.\n\n🧐 Formatting Rules\n\n– Replaces straight quotes (\") with curly quotes (“ and ”)\n– Replaces prime (') with apostrophe (’)\n– Replaces one or two dashes with an en-dash (–)\n– Replaces three dashes with an em-dash (—)\n– Replaces three consecutive dots (...) with an ellipsis (…)\n– Uses non-breaking and thin spaces for punctuation","id":"781351612272770724","installCount":4932,"lastUpdateDate":"2021-11-16T17:54:44.231Z","likeCount":110,"name":"Typographer","publisherHandle":"efedorenko","publisherId":"7663","publisherName":"Eugene Fedorenko","runCount":3516,"viewCount":8449},{"description":"As designers, when preparing our work for developer hand-off, there comes a time where we need to annotate our designs with detailed measurements, specs, and intricate redlines—we all know how time-consuming this process can be.\n\nAlas! There is light at the end of the tunnel. 🙌\n\nFigma Redlines is the perfect toolkit for any designer looking to save time when preparing designs for developer hand-off. \n\nThis plugin gives you the ability to create and generate redlines from a selection of objects with ease, while also enabling full control over the style and display of each redline element.\n\nMain Features\n- Quickly measure and plot dimensions of any selected object\n- A varied selection of outlines and line styles\n- Full control over the color, spacing, and font size of each redline element\n- Ability to add units to each redline element—PX, %, DP, etc.\n- Automatic grouping of redline elements—to help keep things tidy and easy to manage!\n\nTo use;\n1. Select a layer (or multiple)\n2. Customize the redline settings (if you want to)\n3. Choose a redline option to plot\n4. 🕺\n\nIf you have any ideas for features or perhaps ways to improve the plugin,  feel free to reach out—I would love to hear from you!\n\nOh, and if you've enjoyed the plugin and are feeling generous, you can always... https://www.buymeacoffee.com/4pIjUVg\n\nEnjoy!","id":"781354942292031141","installCount":56958,"lastUpdateDate":"2019-12-20T22:14:13.549Z","likeCount":1217,"name":"Redlines","publisherHandle":"dannykeane","publisherId":"304130","publisherName":"Danny Keane","runCount":42058,"viewCount":60992},{"description":"<p><strong>Free Popular Illustration libraries for everyone</strong>, plugin allows you to insert high quality free illustrations right into Figma. Just drag and drop to add it on Figma. All the illustrations can be used freely under creative commons license, If you want more crazy stuff, just Follow us on Figma or go to our website <a href=\"https://hexorial.studio/?ref=figma-illustrations-description\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">hexorial.studio</a>. Need custom illustrations for your Product/App/Website or Partnership with us/Integrate your plugin/website or API or want to leave your valuable feedback just reach out to us on <a href=\"mailto:hello@hexorial.studio\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">hello@hexorial.studio</a></p><p>PS: <a href=\"https://docs.google.com/forms/d/e/1FAIpQLSes9U7ou1b3QsuzZbD05IWf-7_vqyyzOSckaORRBaWx1F0Vww/viewform?usp=sf_link\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Leave plugin feedback here</a></p>","id":"781441863578182316","installCount":166485,"lastUpdateDate":"2022-04-07T16:49:11.492Z","likeCount":1188,"name":"Illustrations","publisherHandle":"HexorialStudio","publisherId":"870959682079605985","publisherName":"Hexorial Studio","runCount":152516,"viewCount":173246},{"description":"<p>Linear gradients often have hard edges where they start and/or end.</p><p>This plugin adds gradient stops to approximate easing functions.</p><p><br></p><p>Work on this plugin has stopped in favor of the much more feature-rich alternative: <a href=\"https://www.figma.com/exit?url=https%3A%2F%2Fwww.figma.com%2Fcommunity%2Fplugin%2F907899097995668330%2FEasing-Gradients\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">https://www.figma.com/community/plugin/907899097995668330/Easing-Gradients</a> </p><p><br></p><p>Roadmap:</p><p>- Easing function selection</p><p>- Custom bezier curve editor</p><p>- Custom color step input</p><p>- Color space selection</p>","id":"781591244449826498","installCount":17074,"lastUpdateDate":"2020-09-27T17:35:34.975Z","likeCount":163,"name":"Easing Gradient","publisherHandle":"matchai","publisherId":"27706","publisherName":"Matan Kushner","runCount":12285,"viewCount":19152},{"description":"This plugin allows you to export a selection as Elm code.\nThe generated code will be for the `elm/svg` package, so make sure you have it installed in your Elm project.\n\nUsage:\n\n* Select the object that you would like to export as Elm code\n* Run `Export to Elm` from the Plugins menu\n* Apply optional `Svg` or `Svg.Attributes` module aliases","id":"781784081500870347","installCount":637,"lastUpdateDate":"2019-11-29T08:37:30.393Z","likeCount":8,"name":"Export to Elm","publisherHandle":"1874549","publisherId":"1874549","publisherName":"Hendrik Lammers","runCount":289,"viewCount":700},{"description":"Automatically update text changes and match styles.\n\n----\nWhen copy and paste text in & out Figma, most of the time we can get plain text. While it is fine to communicate with others and edit in different apps, we lose all our styles.\n\nThis plugin uses Google's \"diff-match-patch\" algorithm to track text diffs and match text styles, so that you don't have to read the text word by word and update them painfully.\n\n-----\nKnown Issues: \n• works best when update amount is not overwhelming.\n• emojis and SF Symbols could cause bugs of figma.","id":"782063652295846647","installCount":1076,"lastUpdateDate":"2019-12-03T09:03:58.485Z","likeCount":17,"name":"Text Updater","publisherHandle":"zcheng","publisherId":"13503","publisherName":"Zhida","runCount":456,"viewCount":1806},{"description":"<p>Самый удобный генератор случайного текста, умный Lorem Ipsum на русском языке.</p><p><br></p><p>C помощью этого плагина можно в пару кликов создать как отдельные предложения и заголовки, так и целые абзацы отменнейшего fishtext'а. Кроме того, он умеет заполнять текстовые слои, учитывая их высоту и ширину.</p><p><br></p><p>--</p><p><br></p><p>Что умеет плагин:</p><p>⚹ заполнять выбранный текстовый слой рыбой (с учётом ширины и высоты слоя);</p><p>⚹ пихать в выбранный текстовый слой указанное количество рыбатекста;</p><p>⚹ создавать текстовый слой внутри выбранной группы/фрейма/компонента;</p><p>⚹ запоминать настройки, чтобы вам не пришлось каждый раз выбирать одни и те же параметры - благодаря этому типовые действия (вроде заполнения текстом слоёв) выполняются ещё быстрее;</p><p>⚹ валидировать выбор слоёв и сразу показывать подсказки.</p><p><br></p><p>--</p><p><br></p><p>Просто выберите:</p><p>⚹ один или несколько текстовых слоёв - и плагин запихнёт в каждый из них указанное количество русского lorem ipsum;</p><p>⚹ отдельный фрейм/компонент/группу - плагин сам создаст внутри них новый слой с dummy-текстом;</p><p>⚹ ничего - да, если не выделить ничего, текстовый слой с рыбой будет помещён в корень вашего макета.</p><p><br></p><p>Если отметить чекбокс \"Заполнить текстовый слой рыбой\", то выбранные слои заполнятся текстом полностью, с учётом своего размера.</p><p><br></p><p>--</p><p><br></p><p>Официальный плагин ресурса <a href=\"http://fish-text.ru\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">fish-text.ru</a></p><p><br></p><p>--</p><p><br></p><p>Random text generator, smart Lorem Ipsum in Russian.</p>","id":"782180430431612681","installCount":19787,"lastUpdateDate":"2020-11-09T07:43:27.842Z","likeCount":153,"name":"Fishtext in Russian — fish-text.ru","publisherHandle":"sherer_pro","publisherId":"364446","publisherName":"Pavel Sherer","runCount":16015,"viewCount":15746},{"description":"Writers rejoice!\nNow you can sync strings from Airtable to your Figma designs.\n\nTo set up, click Plugins > {{copyThat.airtable}} > Configure... and follow the on-screen instructions.\n\nThere's more to it, and you can find full instructions here:\nhttps://github.com/imnotashrimp/copyThat-airtable-figma\n\nWant to drive the roadmap? Open an issue and start a discussion!\nhttps://github.com/imnotashrimp/copyThat-airtable-figma/issues","id":"782185813336691466","installCount":925,"lastUpdateDate":"2019-12-29T21:42:50.384Z","likeCount":37,"name":"{{copyThat.airtable}}","publisherHandle":"imnotashrimp","publisherId":"2695024","publisherName":"Stefan (Shalom) Boroda","runCount":454,"viewCount":1834},{"description":"<p>Ever used a third-party tool to optimize SVG, exported from Figma?</p><p><br></p><p>Well, now you don't have to&nbsp;–&nbsp;Advanced SVG Export lets you optimize SVG before exporting. Customizable optimizations made possible by using SVGO (<a href=\"https://github.com/svg/svgo\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">https://github.com/svg/svgo</a>) under the hood.</p><p><br></p><p>2020 © Okotoki Software</p>","id":"782713260363070260","installCount":11543,"lastUpdateDate":"2021-11-11T10:57:00.855Z","likeCount":141,"name":"Advanced SVG Export","publisherHandle":"okotoki","publisherId":"2807101","publisherName":"Okotoki","runCount":9863,"viewCount":18810},{"description":"Select an image then Run Plugin to generate a grid of 1px rectangles from the selection\n\nAfter running the plugin, try:\n- Use Figma's red lines to measure distances between pixels\n- Use Figma's \"Select All with Same Fill\" to edit pixels in groups\n- Select pixels and Flatten ⌘E\n\nCareful: this Plugin becomes slow for large images (larger than 200x200)","id":"782730833986470710","installCount":1517,"lastUpdateDate":"2020-02-08T08:12:32.731Z","likeCount":11,"name":"Image to 1px rectangles","publisherHandle":"minigolf2000","publisherId":"98046","publisherName":"Golf Sinteppadon","runCount":977,"viewCount":1646},{"description":"<p>This plugin improve your typography and helps you make your texts legible, readable and appealing when displayed.</p><p><br></p><p>How to&nbsp;use TextPrettier:</p><p>—&nbsp;Select one or&nbsp;more text layers in&nbsp;your artboard</p><p>—&nbsp;Run the plugin from Plugins → TextPrettier or&nbsp;click on&nbsp;your own hotkey</p><p>—&nbsp;Now your text is&nbsp;awesome</p><p><br></p><p>What plugin can fix in your text:</p><p>• non-breaking space (&nbsp;) if necessary</p><p>• dash and em dash (—) ( — ) correct usage</p><p>• correct quotes</p><p>• hanging punctuation (or pretexts)</p><p>• trailing commas, blanks</p><p>• delete double punctuation and repeat space</p><p>• apostrophe</p><p>• symbols</p><p>• numbers with many digits format (digits may be divided into groups of three)</p><p>• date format</p><p>• currency format (for roubles / rur)</p><p>• phone number format</p><p>• math signs, fractions, pow</p><p>• Et cetera</p>","id":"783077214649465682","installCount":27602,"lastUpdateDate":"2022-04-04T10:11:49.057Z","likeCount":342,"name":"Text Prettier","publisherHandle":"AllowEmptyInput","publisherId":"838444","publisherName":"Eugene Ash","runCount":21303,"viewCount":26698},{"description":"Arrange icons, images, shapes, frames, or groups in Phyllotaxis ( leaf arrangement) patterns. Leaf arrangement pattern in sunflower, for example.\n\n1. Select all the layers you want to arrange in a Phylotaxis Pattern. The more layers are, the better. \n\n2. Drag and adjust the spacing slider or enter a desired number in the spacing text field and hit enter.\n\nThat's it, enjoy your 🌻","id":"783089640972424019","installCount":5937,"lastUpdateDate":"2020-07-06T18:14:16.713Z","likeCount":101,"name":"Phyllotax","publisherHandle":"avadh","publisherId":"1153438","publisherName":"Avadh Dwivedi","runCount":4146,"viewCount":9853},{"description":"Converts every selected solid fill to a color in Local Color Styles, choosing the closest Local Color Style by Delta E color difference\n\nDelta E color difference\nhttps://en.wikipedia.org/wiki/Color_difference\n\n- Works only with solid fills, no gradients\n- Works only with local styles","id":"783240561193792353","installCount":3026,"lastUpdateDate":"2019-12-02T07:58:51.320Z","likeCount":60,"name":"Match fills to local styles","publisherHandle":"minigolf2000","publisherId":"98046","publisherName":"Golf Sinteppadon","runCount":1881,"viewCount":3732},{"description":"<p>SwiftUI inspector is here. Enhance your development workflow by copying and pasting element styles from your Figma files into your Xcode project.</p><p><br></p><p>Now with support for Auto Layout frames and manual stacking.</p><p><br></p><p>Supported:</p><p>- Colors</p><p>- Color Styles</p><p>- Text Labels</p><p>- Basic Shapes</p><p>- Frames</p><p>- Auto Layout</p><p>- Drop Shadows</p><p>- Gradients</p><p>- Components</p><p>- Layer opacity</p><p>- Layer blending modes</p><p><br></p><p>Looking forward to your feedback.</p>","id":"784879032180068427","installCount":12159,"lastUpdateDate":"2022-05-08T11:12:22.454Z","likeCount":281,"name":"SwiftUI Inspector","publisherHandle":"outermeasure","publisherId":"916022160243868557","publisherName":"outermeasure","runCount":7782,"viewCount":22707},{"description":"<p>Sync your design with API data</p><p><br></p><p><strong>Features</strong></p><ul><li>Load JSON, XML and CSV from API url or paste as text</li><li>Google sheets URLs are also supported</li><li>Navigate your data in a simple interface</li><li>Populate, connect and sync your layers with text and images</li></ul><p><br></p><p><strong>Demo</strong></p><p><a href=\"https://twitter.com/eminsinani/status/1254058106713186304\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://twitter.com/eminsinani/status/1254058106713186304</a></p><p><br></p><p><strong>Google sheets</strong></p><ul><li>Just paste the URL and your data will load</li><li>You can use the standard URL format shown in the browser: <code>https://docs.google.com/spreadsheets/d/[spreadsheetID]/edit#gid=[tabID]</code></li><li>Only sheets with sharing option \"anyone with the link\" are supported</li><li>First row will be used as the header row</li></ul><p><br></p><p><strong>Formatting</strong></p><p>Because data does not always come in the way we want to visualize it, you can format your results before populating. For flexibility the formatting is done using js code where you can use $value as the variable coming from the data. Here are a few examples:</p><ul><li>John-follower -&gt; <code>$value.split('-')[0]</code> -&gt; John</li><li>224.50 -&gt; <code>'€ ' + Math.round($value)</code> -&gt; € 225</li><li>true -&gt; <code>$value ? 'available' : 'occupied'</code> -&gt; available</li><li>1 -&gt; <code>['Clear', 'Rain', 'Snow'][$value]</code> -&gt; Rain</li><li>1988 -&gt; <code>\"'\" + ($value).toString().substring(2,4)</code> -&gt; '88</li><li>klm -&gt; <code>`https://airlines.com/${$value}.png`</code> -&gt; https://airlines.com/klm.png</li></ul><p><br></p><p><strong>API Request Options</strong></p><p>In the case you need to add request options to your API call, you can do so in a separate field and provide the options as an object. To find out which options are available and how they are named, check out the following library: <a href=\"https://github.com/Jam3/xhr-request\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://github.com/Jam3/xhr-request</a></p><p>Example usage:</p><pre class=\"ql-syntax\" spellcheck=\"false\">{\n   \"headers\":{\n      \"secret-key\":\"XXX\"\n   }\n}\n</pre><p><br></p><p><strong>Notes</strong></p><ul><li>You need to manually select which arrays to loop through after selecting the path</li><li>CSV and Google sheet data are always parsed with the first row as a header row</li><li>Insecure http calls are not supported, but localhost or http://localhost should work.</li><li>To multiply layers quickly, install the <a href=\"https://www.figma.com/community/plugin/751760002167220558/Multiply\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Multiply plugin</a></li><li>If the amount of layers on your page exceed the limit, the info on the sync page will not auto-refresh when something changes on the page, instead you can use the manual refresh button. This is done to improve performance.</li></ul><p><br></p><p><strong>Wishlist</strong></p><ul><li>Dataset editing</li><li>Color support (RGB)</li><li>Component property change support</li><li>Component replacement support</li><li>Show/hide layer support</li><li>Merge data from different keys</li><li>Advanced error messaging</li><li>FigJam support</li><li>Sync selection</li><li>Refresh connect page</li><li>Select data range</li><li>Random populate data</li><li>Switch datasets for existing connections</li></ul><p><br></p><p>Let me know in the comments if you have questions, requests or feedback! For detailed questions/debugging please send me a DM on twitter.</p>","id":"784880696244762700","installCount":4318,"lastUpdateDate":"2022-05-26T13:20:36.664Z","likeCount":181,"name":"Data Sync","publisherHandle":"eminsinani","publisherId":"649","publisherName":"Emin Sinani","runCount":3352,"viewCount":10524},{"description":"<p>Figma Tailwindcss lets you export aspects of a design made in Figma to a javascript theme file that can easily be used with Tailwindcss.</p><p><br></p><h2>Creating your theme</h2><p>The plugin gets it's info from the Local Styles. At this point it picks up:</p><p><br></p><ul><li>colors</li><li>font-families</li><li>text-sizes</li><li>box-shadows</li><li>borded-radius</li></ul><p><br></p><p>Full docs: <a href=\"https://github.com/jan-dh/figma-tailwindcss/\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">https://github.com/jan-dh/figma-tailwindcss/</a></p>","id":"785619431629077634","installCount":6026,"lastUpdateDate":"2021-06-10T13:53:18.767Z","likeCount":106,"name":"Figma Tailwindcss","publisherHandle":"Jan","publisherId":"1254604","publisherName":"Jan D'Hollander","runCount":4646,"viewCount":14592},{"description":"<p>Create and copy components, and replace layers with components.</p><p><br></p><h2><a href=\"https://ko-fi.com/yuanqing\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\"><strong>Fund my work on Figma plugins →</strong></a></h2><p><br></p><h2>Create Component from Layer</h2><p>Creates a Main Component from the selected layer. The selected layer then becomes an Instance of the new Main Component.</p><p><br></p><h2>Copy Component</h2><p>Creates a copy of the selected Main Component.</p><p><br></p><h2><strong>Convert Component to Frame</strong></h2><p>Convert the selected Main Component or Instance to a Frame.</p><p><br></p><h2>Replace with Component</h2><p>Opens a modal with a list of components in the document. Choose a component in the list to replace the selected layers.</p><p><br></p><h2>Reset Instance Size</h2><p>Sets the size of the selected Instances to the size of their respective Main Components.</p>","id":"785894722513806497","installCount":7479,"lastUpdateDate":"2022-03-10T11:07:19.932Z","likeCount":221,"name":"Component Utilities","publisherHandle":"yuanqing","publisherId":"1682602","publisherName":"Yuan Qing Lim","runCount":5780,"viewCount":18243},{"description":"<p>Easily browse and copy icon glyphs for Visual Studio Code using Codicons and Seti.</p>","id":"786075219184960694","installCount":8864,"lastUpdateDate":"2022-02-25T17:28:46.173Z","likeCount":169,"name":"Visual Studio Code Icons","publisherHandle":"microsoft","publisherId":"1500","publisherName":"Microsoft","runCount":5691,"viewCount":15774},{"description":"Recolor images right in Figma, saving minutes of precious time.\n\nNow usable with jpegs and pngs with solid backgrounds.\nWorks best with images containing solid fills and colors.\n\n---\nTo use:\n- import your image\n- run the plugin\n- enter the hex color you want to overlay your image\n- optionally choose to remove a solid color from the image\n- click 'Colorize'\n\n---\nIf you run into any bugs or have feature requests please submit an issue.","id":"786223450940846289","installCount":40272,"lastUpdateDate":"2020-08-12T15:50:28.653Z","likeCount":215,"name":"Color Overlay","publisherHandle":"jaclyntan","publisherId":"654690","publisherName":"Jaclyn Tan","runCount":35023,"viewCount":33255},{"description":"<p>Click on the frame and plugin <strong>automatically place</strong> your design into 1700+ device mockups.</p><p><br></p><p>This Figma mockup plugin is packed with everything you need to create stunning product mockups for your personal or commercial projects.</p><p><br></p><h2>Instant Preview</h2><p>Select a frame, and Mockuuups Studio takes care of the rest. The plugin automatically scale &amp; place the selected frame into hundreds of previews. Pick your favorite and export the mockup as a file or place it right back into the document.</p><p><br></p><h2>Create Figma mockup from scratch</h2><p>Looking for something specific? Pick a device (phone, tablet, laptop or desktop), choose from diverse hands and mix with countless background combinations. Including transparent, colors, gradients, and the Unsplash integration! You can <a href=\"https://www.youtube.com/watch?v=EwUk6NeHkMA\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">watch our 5-minute walkthrough</a>.</p><p><br></p><h2>Growing Mockup Library</h2><p>More than 1700 high-quality scenes with various angles, different backgrounds, and device types are accessible from one plugin - no need to browse Community anymore.</p><p><br></p><h2>Free &amp; Premium License</h2><p>We offer both free and paid features within this plugin. Free access is limited to 10 mockups, whereas Premium subscription unlocks access to 1700+ mockups, unlimited exports and commercial license.</p><p><br></p><p><strong>Pricing</strong> <a href=\"https://mockuuups.studio/pricing?utm_source=figma-community\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://mockuuups.studio/pricing</a></p><p><strong>Feedback or bug report?</strong> <a href=\"https://mockuuups.studio/contact/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Contact us</a></p>","id":"786250770157843670","installCount":145782,"lastUpdateDate":"2022-03-12T20:30:54.525Z","likeCount":1247,"name":"Mockuuups Studio","publisherHandle":"mockuuups","publisherId":"2696953","publisherName":"Mockuuups","runCount":134747,"viewCount":159866},{"description":"<p>Organizes all layers on the current page based on layer name; useful for organizing a page of components. Optionally customize how layers are grouped, and set the space between layers.</p><p><br></p><h1><a href=\"https://ko-fi.com/yuanqing\" rel=\"noreferrer noopener nofollow\" target=\"_blank\"><strong>Fund my work on Figma plugins →</strong></a></h1>","id":"786286754606650597","installCount":13059,"lastUpdateDate":"2021-04-04T07:51:48.284Z","likeCount":224,"name":"Organize Layers","publisherHandle":"yuanqing","publisherId":"1682602","publisherName":"Yuan Qing Lim","runCount":8747,"viewCount":15850},{"description":"Sends the JSON of the current page to the HTTP/WebSocket endpoint of your choosing, everytime your document changes! Dead simple and nimble.\n\nWhen the plugin is opened and marked \"Active\", the plugin will watch for any changes in the current page. If there is a change detected, it will send a HTTP/WebSocket request to your chosen endpoint. \n\nThe plugin by itself is not useful, unless you have something that want to receive HTTP/WebSocket requests for every change in the current Figma document.","id":"786676000240366862","installCount":608,"lastUpdateDate":"2019-12-31T13:28:58.240Z","likeCount":17,"name":"Change Event Pusher","publisherHandle":"VictorBjelkholm","publisherId":"1662734","publisherName":"Victor Bjelkholm","runCount":115,"viewCount":983},{"description":"<p>How many times did you struggle to find the perfect font for your logo, landing page or app?</p><p>Font Explorer will help you test how your work looks with different fonts, with just one click you can view your designs with multiple hand-picked quality fonts.</p><p><br></p><p>To use:</p><p>1. Rename your Figma text layers to ‘#changeme’</p><p>2. Select the frame that contains the text layers</p><p>3. Select the number of variations (max 30)</p><p>4. Select the font category (serif or sans-serif)</p><p>5. Click ‘Generate’</p><p><br></p><p>Demo video: <a href=\"https://youtu.be/Cu8D3hjvQRg\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">https://youtu.be/Cu8D3hjvQRg</a></p><p><br></p><p>Future updates:</p><p>- Custom selected fonts</p><p>- Add more font options</p><p><br></p><p>Made by:</p><p>- Bogdan Soare <a href=\"https://bogdansoare.com/\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">https://bogdansoare.com/</a></p><p>- Csaba Nacu <a href=\"https://www.csabanacu.com/\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">https://www.csabanacu.com/</a></p>","id":"786891204057439536","installCount":17334,"lastUpdateDate":"2019-12-12T09:46:42.541Z","likeCount":144,"name":"Font Explorer","publisherHandle":"bogdan","publisherId":"304066","publisherName":"Bogdan Soare","runCount":10350,"viewCount":18811},{"description":"Sequence music right in Figma!\n\nFor instructions on how to use this plugin, see this file:\n\nhttps://www.figma.com/c/file/787117332168312349\n\nFor some cool examples see this file:\n\nhttps://www.figma.com/c/file/787119631084856862","id":"787116494164162901","installCount":1468,"lastUpdateDate":"2019-12-13T18:32:42.596Z","likeCount":39,"name":"FigSequencer","publisherHandle":"karl","publisherId":"750","publisherName":"Not Karl","runCount":1065,"viewCount":3128},{"description":"Nester will nest any object that resides above (but not inside) a top-level frame/artboard. \n\nIf you have ever made a presentation or exported an asset only to find something you thought you put inside a frame, actually isn't, Nester will fix this automatically.\n\nHow to use:\nRun Nester and it will detect if any object sits completely above another frame, and nest it inside. If the object overlaps the bounds of the frame and is not completely within a frame's bounds, it will leave the object as is.","id":"787337376836787569","installCount":1201,"lastUpdateDate":"2019-12-17T22:49:20.642Z","likeCount":49,"name":"Nester","publisherHandle":"tom","publisherId":"35","publisherName":"Tom","runCount":526,"viewCount":1407},{"description":"Figma Data Populator makes using real, meaningful data faster and easier than ever. Inspired by Sketch Data Populator, this plugin allows you to connect a JSON data source and quickly populate text and images.\n\nTry it out\n\n  1 - Click “Manage Data Source” and add the demo JSON file: https://api.myjson.com/bins/zdv2i\n  2 - Create a Text layer and rename it \"{name.first}\"\n  3 - Create a Rectangle or Ellipse layer and rename it \"{avatar}\"\n  4 - Create another text layer, rename it “location” and type into it “{location.city}, {location.country}”\n  5 - Select all your new layers and click “Populate”.\n  6 - Turn the layers into a component and populate again. Note how all the layers within a component or instance will be populated with data from the same record.\n\n---------------\n\nAdding a data source\n\n  •  Try http://myjson.com/ for simple JSON hosting.\n  •  If you want to populate layers randomly, use arrays in your first level of JSON values, e.g. { “users\": [ object1, object2, …, objectN ], “jobs”: [ objectA, objectB, …, objectC ] }.\n  •  Data from these objects is referenced using curly brackets {…} and dot notation, allowing you to populate structured data like {users.name.first} and {jobs.description}.\n  •  If you only have a single array, you don’t need to reference the first key. E.g. for { “data\": [ object1, object2, …, objectN ] }, write {name.first} instead of {data.name.first}\n\nPopulating text\n\n  •  Populate an entire text layer by renaming the layer. \n  •  Alternatively populate a part of a text layer by adding your curly brackets within the text (e.g. “I love {location.city}” becomes “I love New York”). \n  •  The plugin remembers the parts it populated, so you can populate the same layers again and again.\n\nPopulating images\n\n  •  Populate images by renaming a shape layer. \n  •  The data source for images must be a URL to a hosted image.\n  •  Try https://source.unsplash.com/ for easy hosted images.\n\nPopulating a component/instance\n\n  •  When you select a bunch of regular layers, the plugin randomly chooses the records to populate them with. If you want them to all be populated from the same record, turn them into a component (or instance).\n  •  Add data to your library components so that they’re ready to go!\n\nRoadmap...?\n\n  •  Manage multiple data sources\n  •  Use data from google sheets and other sources\n  •  Basic functions like random() and if()\n  •  DM me suggestions!","id":"787488293482536319","installCount":2360,"lastUpdateDate":"2020-02-23T23:19:06.724Z","likeCount":94,"name":"Data Populator","publisherHandle":"ptrckmrgn","publisherId":"68","publisherName":"Patrick Morgan","runCount":1539,"viewCount":6196},{"description":"Wireframer can be the new trend in wireframes text generation process. 🧨\n\nIt can aid both high fidelity and quick messy wireframes by generating cool & unique SVG placeholder. Another use case can be isometric illustrations.\n\nAdjust the parameters and get back a unique cool placeholder text!\n\nFor more option check the web app: https://www.wireframer.art","id":"787660853629435276","installCount":31773,"lastUpdateDate":"2019-12-22T23:08:00.013Z","likeCount":258,"name":"Wireframer","publisherHandle":"dmraptis","publisherId":"632","publisherName":"Jim Raptis","runCount":29548,"viewCount":54262},{"description":"<p>Copy-paste x, y, horizontal center, vertical center, width and height values from and to objects!</p><p><br></p><p>Copy once and paste them whenever you want, the copied values are stored in its own independent clipboard, and won't interfere with your OS' clipboard.</p><p><br></p><h2><strong>→ </strong><a href=\"https://twitter.com/DavidWilliames/status/1169053934243069952?s=20\" rel=\"noreferrer noopener nofollow\" target=\"_blank\"><strong>How To Set Keyboard Shortcuts?</strong></a><strong> ←</strong></h2><p><br></p><p>Suggested Shortcuts:</p><ul><li>Copy Position Size： ⌃⇧C</li><li>Paste X：⌃⇧X</li><li>Paste Y： ⌃⇧Y</li><li>Paste Position： ⌃⇧P</li><li>Paste Vertical Center: ⌃⌥⇧V</li><li>Paste Horizontal Center: ⌃⌥⇧H</li><li>Paste Size： ⌃⇧V</li><li>Paste Width： ⌃⇧W</li><li>Paste Height：⌃⇧H</li></ul><p><br></p><p>This plugin is inspired by ajilderda's Sketch-Copy-Paste-Position-Size, a Sketch plugin I've used and loved for a long time! all credit goes to ajilderda.</p><p><br></p><p>Note: The values are copied within Figma and won't interfere with your OS' clipboard.</p><h2><br></h2><h2><strong>Mar 2021 Update:</strong></h2><ul><li>Calibrated combine layers size pasting</li><li>Layers with Constrained Proportions toggled on will remain the same aspect ratio upon width/height pasting.</li></ul><p><br></p><h2><strong>Nov 2020 Update:</strong></h2><p><br></p><p>Added the ability to <strong>paste horizontal</strong> and <strong>vertical centers</strong></p><ul><li>Added support for<strong> pasting horizontal</strong> and <strong>vertical centers</strong></li><li>Fixed various bugs on rotated and flipped layers.</li><li>Renamed relative position pasting</li></ul><p><br></p><h2><strong>May 2020 Update:</strong></h2><p><br></p><p><strong>Multiple layer</strong> copy/paste support</p><ul><li>When copying on multiple objects, a combined position/size will be copied</li><li>When pasting on multiple objects, each object will be pasted to the same position or size</li><li>Performance Optimization</li></ul>","id":"787948653989604774","installCount":1971,"lastUpdateDate":"2021-04-09T01:44:19.666Z","likeCount":85,"name":"Copy paste position size","publisherHandle":"MrBiscuit","publisherId":"1241","publisherName":"Mr.Biscuit","runCount":1055,"viewCount":3939},{"description":"Whether you're looking for the perfect icon, inspiration for a logo, or the perfect component, Inspyre is here to get the creative juices flowing! Inspyre allows you to search for design inspiration without ever leaving your canvas. \n\nFeatures: \n- Search for design inspiration\n- Easily add assets to your canvas by clicking on the imagery\n- Gif support! Add gifs to your Frames and watch them come to life in Present mode.","id":"788238141732031933","installCount":3511,"lastUpdateDate":"2020-01-29T00:11:33.725Z","likeCount":58,"name":"Inspyre","publisherHandle":"lnelson","publisherId":"2090062","publisherName":"Lee Nelson","runCount":2076,"viewCount":5077},{"description":"Butt-together layers neatly and instantly.\nRemove white space and overlaps with one shortcut.\n\nAdd quick, consistent spacing between objects\nSpace and distribute layers evenly in rows or columns. Simpler than the grid or distribute tool. A massive time saver! ⏱\n\nThis plugin is inspired by pberrecloth's butter-sketch-plugin, a great plugin I can't live without using sketch","id":"788302071954922948","installCount":1771,"lastUpdateDate":"2020-02-26T11:51:31.564Z","likeCount":61,"name":"Butter","publisherHandle":"MrBiscuit","publisherId":"1241","publisherName":"Mr.Biscuit","runCount":979,"viewCount":3435},{"description":"<p>Useberry enables UI/UX designers, agile product managers &amp; ingenious marketers to get user feedback &amp; rich, actionable insights on their product before the stage of development.</p><p><br></p><p>It helps Product Teams to swiftly build better digital experiences by integrating testing right on the discovery/design/prototype phase while saving time and resources.</p><p>&nbsp;</p><p>Now imagine this testing process natively integrated into one of the most popular design platforms: Figma. Without your workflow being interrupted, you can now start testing your designs and share them with testers, or even your teammates, managers or collaborators.</p><p>&nbsp;</p><p>Useberry plugin can work as a prototype testing plugin and help Figma users test innovative UX ideas and collect users’ feedback and rich insights right on the spot.</p><p><br></p><p>Additionally, allows exporting design elements that can be used for information architecture, preference and impression testing like Preference Test, First Click, 5 Second Test, and Card Sorting.</p><p>&nbsp;</p><p>Making good use of the existing online platform’s technology, Useberry’s native integration in Figma is the plugin’s key differentiator, accompanied by a variant of test types and a series of other handy features, each one addressing a unique need and a UX design problem seeking a solution in the process of building digital experiences.</p><p>&nbsp;</p><p>And so the testing gets started - without a hassle!</p><p>&nbsp;</p><p>Useberry plugin is now available for Figma and promises to change the product development process in the best, safest, and fastest way.&nbsp;</p><p>&nbsp;</p><p>Learn more about useberry on useberry.com</p>","id":"788799088384104964","installCount":14369,"lastUpdateDate":"2022-03-09T13:50:39.974Z","likeCount":306,"name":"Useberry","publisherHandle":"919281","publisherId":"919281","publisherName":"Bill Kirimkiridis","runCount":11728,"viewCount":26088},{"description":"As seen on https://brumm.af/shadows and Twitter: SmoothShadow is now a Figma plugin!\n\nTo recap:\n- Create really smooth, layered shadows\n- Tweak alpha, offset and blur with individual easing curves, giving  you unmatched control over the appearance of your shadow\n\nHey friend, if this plugin helps your workflow and you want to say thanks, consider buying me a coffee:\nhttps://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=HP8KALVNAWHLS&source=url","id":"788830704169694737","installCount":86657,"lastUpdateDate":"2019-12-20T23:24:21.466Z","likeCount":993,"name":"SmoothShadow","publisherHandle":"17532","publisherId":"17532","publisherName":"Philipp Brumm","runCount":58655,"viewCount":52039},{"description":"<p>Export compressed JPG, PNG, SVG, WebP, GIF, WebM, AVIF and PDF image files from Figma, or downsize and compress image fills in your Figma file for faster performance.</p><p><br></p><h2>Features</h2><p><br></p><ul><li>Use instantly inside Figma; no extra websites, apps or APIs required.</li><li>Exports images up to 95% smaller than the default exports from Figma.</li><li>Create and export animated GIFs or WebMs from selected layers.</li><li>Downsize and compress your Figma image fills to their layer size.</li><li>Supports SVGs and transparent PNGs.</li><li>Convert JPG and PNGs to WebP, AVIF or Progressive JPEG.</li><li>Use percentage based compression, or maximum KB file size targets.</li><li>Set specific compression level overrides per image.</li><li>Merge Figma frames into a single compressed PDF file.</li><li>Add custom password protection to exported PDF files.</li><li>Export PDFs as RGB, CMYK or Greyscale.</li><li>Supports compressing/exporting multiple sizes and formats per layer.</li><li>Advanced custom filenames (eg. \"#{name}_#{width}x#{height}_#{date}).</li><li>Automatically saves multiple images as a .zip file.</li></ul><p><br></p><h2>To use TinyImage</h2><p><br></p><ol><li>Install TinyImage and run the plugin inside your project.</li><li>Select the <strong>exportable images</strong> you would like to compress.</li><li>Choose your ideal compression settings.</li><li>Click the <strong>Export</strong> button.</li><li>Download and enjoy your compressed images!</li></ol><p><br></p><h2><strong>Documentation &amp; Video Tutorials</strong></h2><p><br></p><p>For plugin documentation and step by step video tutorials, please visit <a href=\"https://docs.hypermatic.com/tinyimage/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://docs.hypermatic.com/tinyimage</a></p><p><br></p><h2>Bug Reports</h2><p><br></p><p>TinyImage is still a baby panda; if you notice any bugs, please get in touch via <a href=\"https://hypermatic.com/contact/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://hypermatic.com/contact</a> and we'll publish a fix as soon as possible.</p><p><br></p><h2>License</h2><p><br></p><p>After you've tried compressing images with TinyImage 15 times, you'll be asked to enter your license key. Your license key will allow you or your team to compress an unlimited amount of images using TinyImage.</p><p><br></p><p>To purchase a license or to find out more about the plugin, please visit <a href=\"https://hypermatic.com/tinyimage/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://hypermatic.com/tinyimage</a></p>","id":"789009980664807964","installCount":138506,"lastUpdateDate":"2022-07-26T23:29:12.458Z","likeCount":1128,"name":"TinyImage Compressor","publisherHandle":"hypermatic","publisherId":"247","publisherName":"Hypermatic","runCount":120570,"viewCount":131206},{"description":"<p>Export production ready favicons for your website or PWA from Figma in seconds</p><p><br></p><h2>Features</h2><p><br></p><ul><li>Seamlessly preview and customise your favicons in Favvy.</li><li>Generates all of the code and image files required.</li><li>Copy/pasteable HTML snippet for your tag.</li><li>Includes a PWA (progressive web app) manifest file.</li><li>Production ready favicon .zip package, in seconds.</li></ul><p><br></p><h2>To use Favvy</h2><p><br></p><ol><li>Install and run the “Favvy Favicon Exporter” plugin.</li><li>Highlight a single square frame in your Figma project to preview your favicon.</li><li>Optionally add your website name and theme colour (used in the generated code).</li><li>Click the <strong>Export Favicons</strong> button.</li><li>Download the .zip file containing all your favicons and code files.</li></ol><p><br></p><h2><strong>Documentation &amp; Video Tutorials</strong></h2><p><br></p><p>For Favvy documentation and step-by-step video tutorials, visit <a href=\"https://docs.hypermatic.com/favvy/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://docs.hypermatic.com/favvy</a></p><p><br></p><h2>License</h2><p><br></p><p>After you've tried exporting favicons with Favvy 5 times, you'll be asked to enter your license key. Your license key will allow you or your team to export an unlimited amount of favicons using Favvy.</p><p><br></p><p>To purchase a license for you or your team, please visit <a href=\"https://hypermatic.com/favvy/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://hypermatic.com/favvy</a></p>","id":"789010114208495133","installCount":11367,"lastUpdateDate":"2022-06-21T11:52:37.619Z","likeCount":156,"name":"Favvy Favicon Exporter","publisherHandle":"hypermatic","publisherId":"247","publisherName":"Hypermatic","runCount":8718,"viewCount":12808},{"description":"<p>Butler helps you with three things:</p><p><br></p><p>- It let’s you search for local components to insert your current</p><p>position</p><p><br></p><p>- You can apply any local style to your current selection</p><p><br></p><p>- Go to any node in your document</p><p><br></p><p>Open the plugin, press TAB to switch commands or search for your desired component or style.</p><p><br></p><p>Caveats:</p><p><br></p><p>Users working with large documents may experience long loading times, this is due to how you’re allowed to fetch assets from the API.</p><p><br></p><p>Local assets only, meaning that unfortunately styles and components from your libraries won’t be collected. Also due to what is allowed to collect or not from the API, (and probably righteously so concerning security risks).</p><p><br></p><p>I’ve found a kind of similair plugin called Figma Walker made by Kazushi Kawamura,</p><p>you can find his plugins here: <a href=\"https://www.figma.com/@kawamurakazushi\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">https://www.figma.com/@kawamurakazushi</a></p><p><br></p><p>Repository:</p><p><a href=\"https://github.com/MikaelWeidenhielm/butler-figma-plugin\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">https://github.com/MikaelWeidenhielm/butler-figma-plugin</a></p>","id":"789056888930973222","installCount":1566,"lastUpdateDate":"2020-01-14T12:38:02.639Z","likeCount":59,"name":"Butler","publisherHandle":"M","publisherId":"574356","publisherName":"Mikael Weidenhielm","runCount":1145,"viewCount":2701},{"description":"This plugin allows you to smoothly pull content From Your Contentful Space and map it to you Figma design.\n\nHow does it work?\n\nYou enter you Contentful credentials and specify which Content Type you want to visualize in your design, map which fields go where and the plugin will fill in your design with real data. This works best with repeatable entries, for example a list of product or blog posts.\n\nYou can find the video demo here: https://www.youtube.com/watch?v=7uJ05O2DgjM\n\nHow do I get my credentials:\n\n1-Go to contentful.com create or choose an existing space\n\n2- Go to Settings > Api keys > Content delivery / preview tokens\n\n3- Copy the delivery api key and space id and paste them.\n\nIf you have any question or feature request hit me up at khaledgarbaya+figma@gmail.com.com","id":"789594601370719857","installCount":1458,"lastUpdateDate":"2020-01-13T13:51:52.624Z","likeCount":36,"name":"Contentful to Figma","publisherHandle":"548546","publisherId":"548546","publisherName":"Khaled Garbaya","runCount":708,"viewCount":4707},{"description":"<p><strong>An easy way to use real data in Figma.</strong></p><p>The plugin can parse local or JSON files from a URL link. You can populate any layers with text or images.</p><p><br></p><h2>💡 Features:</h2><ul><li>Load&nbsp;<strong>local</strong>&nbsp;files and fetch&nbsp;<strong>from URL</strong></li><li>Fetch images</li><li>Parsing JSON files with&nbsp;<strong>any amount of nested levels</strong></li><li><strong>Flexible</strong>&nbsp;keys selection</li><li><strong>Invert</strong>&nbsp;selected keys</li><li><strong>Download</strong>&nbsp;filtered JSON</li><li>Populate&nbsp;<strong>in random order</strong></li><li><strong>Manual </strong>population</li><li>Select any&nbsp;<strong>ranges</strong>&nbsp;from JSON file</li><li>the&nbsp;<strong>\"skip\" rule</strong>&nbsp;for layers you won't populate</li><li>Handle&nbsp;<code>null</code>&nbsp;values</li><li>Resizable plugin window</li></ul><p><br></p><h2><strong>🎥 Video Tutorial:</strong></h2><p><a href=\"https://youtu.be/J9Hu2hNSWvE\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">youtu.be/J9Hu2hNSWvE</a></p><p><br></p><h2><strong>👽GitHub Page</strong></h2><p><a href=\"http://github.com/PavelLaptev/JSON-to-Figma\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">github.com/PavelLaptev/JSON-to-Figma</a></p><p><br></p><p><strong>📄 JSON sample files:</strong></p><p><a href=\"http://github.com/PavelLaptev/JSON-to-Figma/tree/master/json-test-files\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">github.com/PavelLaptev/JSON-to-Figma/tree/master/json-test-files</a></p><p><br></p><p><strong>🤙 Feedback:</strong></p><p>Please if you have any troubles with the plugin or ideas how I could improve the plugin, let me know by <a href=\"mailto:laptev.graphics@gmail.com\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">email</a> or use <a href=\"https://github.com/PavelLaptev/JSON-to-Figma/issues\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">Github issues </a>😊</p>","id":"789839703871161985","installCount":8029,"lastUpdateDate":"2021-07-13T11:10:51.802Z","likeCount":280,"name":"JSON to Figma","publisherHandle":"PavelLaptev","publisherId":"134689","publisherName":"Pavel Laptev","runCount":6860,"viewCount":20629},{"description":"<p>Keep your flow with the largest and most consistent collection of curated graphics. Get 300,000+ icons, photos, and illustrations without ever needing to leave Figma!</p><p><br></p><p>* We offer an extensive free tier. All we ask is for you to add a link back to<a href=\"https://icons8.com/?utm_source=figma-plugin-icons8&amp;utm_medium=cross-promo&amp;utm_campaign=web-version\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\"> icons8.com</a>, crediting us in the final work.</p><p>&nbsp;</p><p><strong>Features</strong></p><p>• <strong>Icons</strong>: consistent, pixel-perfect, in 40+ styles, made by the best icon designers</p><p>• <strong>Illustrations</strong>: flat and 3D, vector and raster, created by top Dribbble artists</p><p>• <strong>Photos</strong>: people, objects, and animals, ready-to-use shots, and background-free elements, taken by a movie-scale crew</p><p>• You can <strong>search </strong>by keywords and <strong>sort </strong>by styles and categories</p><p>&nbsp;</p><p><strong>Free with in-app purchases</strong></p><p>• Thousands of icons, illustrations, and photos are free for a link</p><p>• Or you can subscribe to one of the pro plans and get editable or high-res graphics and forget about linking</p><p>&nbsp;</p><p><strong>How to use</strong></p><p>• Use tabs to switch between icons, illustrations, and photos</p><p>• To add an image to your project, simply click over it or drag-and-drop it onto the canvas</p><p>• Use the drop-down menus to select from various icon styles, sizes, and formats</p><p>• If you have an Icons8 account, click menu (☰) → Sign in/Sign up</p><p>&nbsp;</p><p><strong>Pro License</strong></p><p>We offer both free and paid features within this plugin. Free access is limited to PNG in smaller sizes, whereas pro subscriptions grant a commercial license to all graphics in any format.</p><p><br></p><p>Check out AI-powered tools to help you get great visuals</p><ul><li><a href=\"https://icons8.com/upscaler?utm_source=figma-plugin-icons8&amp;utm_medium=cross-promo&amp;utm_campaign=smart-upscaler\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Smart Upscaler</a> to make images bigger without losing quality</li><li><a href=\"https://icons8.com/swapper?utm_source=figma-plugin-icons8&amp;utm_medium=cross-promo&amp;utm_campaign=face-swapper\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Face Swapper</a> to make high-res and high-quality face swaps</li><li><a href=\"https://generated.photos/faces?utm_source=figma-plugin-icons8&amp;utm_medium=cross-promo&amp;utm_campaign=generated-photos\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Generated Photos</a> to get worry-free and diverse avatars for your designs</li><li><a href=\"https://generated.photos/face-generator?utm_source=figma-plugin-icons8&amp;utm_medium=cross-promo&amp;utm_campaign=face-generator\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Face Generator</a> to create a unique person with your parameters in one click</li></ul>","id":"791103617505812222","installCount":414758,"lastUpdateDate":"2022-02-04T15:05:52.525Z","likeCount":1739,"name":"Icons8 — icons, illustrations, photos","publisherHandle":"Icons8","publisherId":"1428660","publisherName":"Icons8","runCount":367833,"viewCount":352563},{"description":"<p>Styles on steroids that bring you design tokens. Use Figma as you already do, Theemo does the magic in the background.</p><p><br></p><h2>Features</h2><p><br></p><ul><li>References / Aliasing Design Tokens</li><li>Auto Updates</li><li>Automatic Color Palette</li><li>Light / Dark Switch</li></ul><p><br></p><h2>Theemo Suite</h2><p><br></p><p>Want to export your tokens to your developers? There is a CLI tool to sync your tokens from Figma to your code.</p><p><br></p><p>-&gt; <a href=\"https://theemo.io\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">theemo.io</a></p>","id":"791262205400516364","installCount":1652,"lastUpdateDate":"2022-07-17T15:08:11.516Z","likeCount":53,"name":"Theemo - Design Tokens","publisherHandle":"gossi","publisherId":"891","publisherName":"Thomas Gossmann","runCount":1093,"viewCount":4694},{"description":"Figma plugin to export design frames directly to Presentator (free and open source design presentation and collaboration platform).\n\nTo use it - just authorize with your Presentator account and pick the project and prototype to which you want to upload your Figma design frames.\n\nThe plugin makes use of the Presentator REST API and works with both a self hosted Presentator setup and the public free service (app.presentator.io).\n\nSource code of the plugin could be found at https://github.com/presentator/presentator-figma","id":"791989050714284849","installCount":1775,"lastUpdateDate":"2020-05-31T09:50:45.112Z","likeCount":27,"name":"Presentator Export","publisherHandle":"2985453","publisherId":"2985453","publisherName":"Gani Georgiev","runCount":1465,"viewCount":3865},{"description":"<p>A powerful Filter breaks into your workflow!</p><p>There are currently more than 50 customizable effects available.</p><p><br></p><p><strong>How to use it:</strong></p><p>– Select one image or node (depends on the Select fill-image only setting).</p><p>– <a href=\"https://twitter.com/AndreslavKozlov/status/1345728510757888001\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Apply effects</a>.</p><p>– Save Image!</p><p><br></p><p>— The plugin allows you to edit the applied effects. To do this, you need to apply it to the original fill-image or node.</p><p>— The plugin allows you to work with the image of a node (including a <a href=\"https://twitter.com/AndreslavKozlov/status/1238464701312483328\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">slice</a>). To do this, disable the Select fill-image only parameter.</p><p><br></p><p><br></p><h2>Effects</h2><p><br></p><p>1. Brightness Contras;</p><p>2. Hue Saturation;</p><p>3. <a href=\"https://twitter.com/AndreslavKozlov/status/1318874971150733312\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Curves</a>;</p><p>4. Curves HSL;</p><p>5. <a href=\"http://twitter.com/AndreslavKozlov/status/1419029254243864579\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Gradient Map</a> (premium);</p><p>6. Lavels (premium);</p><p>7. <a href=\"http://twitter.com/AndreslavKozlov/status/1419029254243864579\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Gamma</a>;</p><p>8. Soft Contrast&nbsp;;</p><p>9. Sepia;</p><p>10. Vibrance;</p><p>11. Grayscale;</p><p>12. Mono;</p><p><br></p><p>13. Noise RGB;</p><p>14. <a href=\"http://twitter.com/AndreslavKozlov/status/1517785745804640256\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Noise HSL</a>;</p><p>15. Simplex Noise;</p><p>16. Noise Displace;</p><p>17. Fluid Erosion;</p><p>18. Ripple;</p><p><br></p><p>19. Sharpen;</p><p>20. Sharpen Luminance;</p><p>21. Unsharp Mask;</p><p><br></p><p>22. Gaussian Blur;</p><p>23. <a href=\"https://vk.com/video-98951082_456239040\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Lens Blur</a>;</p><p>24. Triangle Blur;</p><p>25. Tilt Shift;</p><p>26. <a href=\"http://twitter.com/AndreslavKozlov/status/1517785745804640256\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Zoom Blur</a>;</p><p>27. Denoise;</p><p><br></p><p>28. Ink;</p><p>29. Cartoon;</p><p>30. Posterization (premium);</p><p>31. Emboss;</p><p>32. Crosshatch;</p><p>33. Night;</p><p>34. Bleach;</p><p>35. Neon;</p><p>36. Lsd;</p><p>37. Edge Work;</p><p>38. BlackWhite;</p><p>39. Outline;</p><p>40. Symbols;</p><p><br></p><p>41. Lomo;</p><p>42. Night Vision;</p><p>43. Vignette;</p><p>44. Color Halftone;</p><p>45. Dot Screen;</p><p>46. Invert Color;</p><p><br></p><p>47. Bulge / Pinch;</p><p>48. Swirl;</p><p>49. Tunnel;</p><p>50. Perspective;</p><p>51. <a href=\"https://twitter.com/AndreslavKozlov/status/1232653952308645889\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Hexagonal Pixelate</a>;</p><p>52. Quadrangular Pixelate;</p><p><br></p><p>53. <a href=\"https://twitter.com/AndreslavKozlov/status/1246826308824436739\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Alpha</a> (transparency based on brightness: the darker a pixel, the more transparent it is);</p><p>54. FXAA Antialiasing (allows you to smooth out the pixel ladder a little).</p><p><br></p><p><br></p><h2>Premium features</h2><p><br></p><p>1. A spacious interface with a large preview (activated on the Settings page).</p><p>2. Additional effects:</p><p>- Gradient Map.</p><p>- Lavels.</p><p>- Posterization.</p><p>3. Use <a href=\"https://vk.com/video-98951082_456239040\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Correction areas</a> in Lens Blur, Triangle Blur, Gaussian Blur and Symbols effects.</p><p>4. Preview switching interface (in the advanced interface), which allows displaying a map of the effect distribution over the image when using correction zones.</p><p>5. Import images using File Explorer.</p><p><br></p><p>Get key: <a href=\"https://gumroad.com/l/premium-filter\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Gumroad</a> or <a href=\"https://vk.com/donut/private.designer\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">VK Donut</a>.</p><p>---</p><p>There is a video in which I show chips: <a href=\"http://producthunt.com/posts/filter-figma-plugin\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">producthunt</a>.</p><p><br></p><p><code>Send feedback to <a href=\"http://twitter.com/AndreslavKozlov\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">twitter.com/AndreslavKozlov</a> or <a href=\"http://vk.com/private.designer\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">vk.com/private.designer</a> or by email andreslav.k.v@mail.ru</code></p>","id":"792025380269016893","installCount":68637,"lastUpdateDate":"2022-05-06T19:54:00.664Z","likeCount":731,"name":"Filter / effects","publisherHandle":"Andreslav","publisherId":"629","publisherName":"Andreslav Kozlov","runCount":57515,"viewCount":73035},{"description":"Mediaweb Color Switcher is a simple plugin that allows you to search any color code on the whole artboard or object selection and replace it for another code or color style.\n\nSimply select the color you want to switch and either select a previously created color style or an entirely new color, using its hexadecimal color code. You can then apply the new color to fills and/or strokes and select between different object types.\n\nThis is the missing color switcher feature for your next project and can help you speed up your design process.","id":"792444395293646690","installCount":721,"lastUpdateDate":"2020-01-23T18:18:44.238Z","likeCount":24,"name":"Mediaweb Color Switcher","publisherHandle":"2714058","publisherId":"2714058","publisherName":"Ricardo Correia","runCount":313,"viewCount":656},{"description":"<p>Selects canvas nodes by common features, such as:</p><p>– Relative Layer Position.</p><p>– Layer Type.</p><p>– Layer Name.</p><p>– Font Name.</p><p>– Fill.</p><p>– Stroke.</p><p>– Width and Height.</p><p>– Locked.</p><p>– Layer Visibility.</p><p>– Text Content.</p><p>– Missing Fonts.</p><p>– Multiple Fonts.</p><p>– Detached instances.</p><p><br></p><p>Order of actions:</p><p>- Select the comparison parameters.</p><p>- Select the sample layer (multiple layers are possible).</p><p>- Select the group(s) / frame (s) to search in. If you don't select it, the search will be global.</p><p>- Select!</p><p><br></p><p>Demonstration: <a href=\"http://twitter.com/AndreslavKozlov/status/1211573349127720960\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">twitter.com/AndreslavKozlov</a></p>","id":"792767780551514994","installCount":10700,"lastUpdateDate":"2021-09-01T14:17:32.327Z","likeCount":177,"name":"Select Similar","publisherHandle":"Andreslav","publisherId":"629","publisherName":"Andreslav Kozlov","runCount":9531,"viewCount":13611},{"description":"<p>A LaTeX plugin that just works. Typeset mathematics right in your designs.</p><p><br></p><p>Autocompletion built in. Rendering based on MathJaX.</p><p><br></p><p>This plugin is open source. Contribute at <a href=\"https://github.com/maxkrieger/figma-latex-complete-plugin\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">https://github.com/maxkrieger/figma-latex-complete-plugin</a></p>","id":"793023817364007801","installCount":3107,"lastUpdateDate":"2021-10-27T23:16:33.214Z","likeCount":46,"name":"LaTeX Complete","publisherHandle":"maxkrieger","publisherId":"982","publisherName":"Max Krieger","runCount":2677,"viewCount":3449},{"description":"<p>Exports compressed images in a click!</p><p><br></p><p>FEATURES:</p><p><br></p><p>- Optimized Load Time:</p><p>Compressed image size helps in quick loading of websites and apps</p><p><br></p><p>- Supports Most widely used formats:</p><p>Download images in PNG and JPEG formats</p><p><br></p><p>- High resolution:</p><p>Up to 4X resolution, users can download compressed images</p><p><br></p><p>- Downloads .Zip file:</p><p>Multiple images will get compressed and downloaded in zip folder in one go</p><p><br></p><p>HOW TO USE:</p><p><br></p><p>1. Post installing, go to Plugins &gt; TinyCanvas &gt; Set up TinyPNG API Key and follow below steps</p><p><br></p><p>• Go to TinyPNG website and click on 'Developer API'.click on the 'Get your API key' button by providing your name and valid email address.</p><p>• A verification mail sent to the provided email address. Now click on ‘Visit your dashboard’ button from email and copy the API Key</p><p>• Paste the API key and start compressing images</p><p><br></p><p>2. Once API Key set up is done</p><p><br></p><p>• Select at least one layer and click on Plugins &gt; TinyCanvas &gt; PNG/JPG Export</p><p>• Choose any resolution from 0.5x to 4x</p><p>• Then download</p><p><br></p><p>Have fun 🥳</p><p><br></p><p>Your feedback helps us to come up with more exciting features. Drop us a note at <a href=\"mailto:tinycanvas@designstring.com\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">tinycanvas@designstring.com</a></p>","id":"794829197801903069","installCount":5144,"lastUpdateDate":"2021-02-20T09:34:46.736Z","likeCount":113,"name":"TinyCanvas","publisherHandle":"designstring","publisherId":"78844","publisherName":"DesignString","runCount":3743,"viewCount":8361},{"description":"<p>Quickly indicate the status of your designes when collaborating with your team.</p><p><br></p><p>How to use:</p><p>1. Launch the plugin</p><p>2. Select some frames, choose the status you want</p><p><br></p><p>If you move frames around and they get disorganized from their labels. Simple relaunch the plugin, or use the plugin relaunch button on the sidebar.</p>","id":"795096273369409539","installCount":17734,"lastUpdateDate":"2021-04-29T01:34:18.423Z","likeCount":554,"name":"Status Annotations","publisherHandle":"tom","publisherId":"35","publisherName":"Tom","runCount":13472,"viewCount":30821},{"description":"LilGrid takes elements and arranges them into a grid automatically. \n\nSelect elements to organize, or leave nothing selected to let it organize everything on your page. It only affects top-level elements on your page.\n\nFor example it’s great to use on pages full of icons for your design system.\n\nThe Auto Size feature lets you ignore \"width\" and \"height\". Just start LilGrid and hit \"Organize to Grid\" and you're done!\n\nThat’s all it does. It’s non-destructive, it only changes positioning of elements, and it’s a one-step undo if you need to.","id":"795397421598343178","installCount":21480,"lastUpdateDate":"2020-05-07T04:05:56.866Z","likeCount":237,"name":"LilGrid","publisherHandle":"Wayne","publisherId":"46392","publisherName":"Wayne Sang","runCount":12172,"viewCount":22431},{"description":"Easily generate beautiful dot grids for your Figma designs.\n\nDot grids can receive the following configurations: grid width, grid height, dot size, gap, and dot colors. No need to create each individual dot and laying them out into a grid anymore!","id":"795474715778185230","installCount":20036,"lastUpdateDate":"2020-10-25T07:22:51.084Z","likeCount":174,"name":"Dot Grid","publisherHandle":"arnellebalane","publisherId":"7287","publisherName":"Arnelle Balane","runCount":15453,"viewCount":22571},{"description":"This Figma plugin will fix the letter spacing of selected text layers according to the Inter Dynamic Metrics.\n\nUsage:\n\n1. Select one or more text layers.\n2. Run Inter Letter Spacing from the Plugins menu.\n\nAny layers that don't use the Inter font will be left unchanged.","id":"795733302011238428","installCount":2170,"lastUpdateDate":"2021-11-14T18:28:05.062Z","likeCount":44,"name":"Inter Letter Spacing","publisherHandle":"gv","publisherId":"2914120","publisherName":"Giliam Verheide","runCount":1571,"viewCount":3468},{"description":"<p>Animate and export production ready banners from Figma to HTML, GIFs and Videos.</p><p><br></p><h2>Features</h2><p><br></p><ul><li>Criminally easy timeline animation and real-time previews inside Figma.</li><li>Generates all the images, HTML, CSS and Javascript you need for every banner.</li><li>Export to HTML/CSS, GSAP, Google Ads, DoubleClick and many more.</li><li>Export your animated banners to GIFs or MP4/WebM video files.</li><li>Embed Lottie file animations or MP4 video files to any layers in your timeline.</li><li>Create your own keyframes, or use dozens of professional presets.</li><li>Set a maximum file size (kb) per banner for automatic asset optimization.</li><li>Optionally include static fallback \"backup.jpg\" for every banner.</li><li>Impress your clients with beautifully responsive HTML preview pages.</li><li>Automatically saves all of your exported banners and preview page as a single .zip file.</li></ul><p><br></p><h2>To use Bannerify</h2><p><br></p><ol><li>Install Bannerify and create a new Figma project.</li><li>Create as many different sized frames as you need for your banners.</li><li>Design your banners by adding layers to your frames.</li><li>Run Bannerify inside the page containing your banner frames.</li><li>Apply animations and timings to the layers inside each frame.</li><li>Click the <strong>Export to HTML</strong> or <strong>Export to GIF/Video</strong> button.</li><li>Choose your export options and click the <strong>Export</strong> button.</li><li>Click the <strong>Download your .zip file</strong> button and enjoy your banners!</li></ol><p><br></p><h2><strong>Documentation &amp; Video Tutorials</strong></h2><p><br></p><p>For plugin documentation and step by step video tutorials, please visit <a href=\"https://docs.hypermatic.com/bannerify/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://docs.hypermatic.com/bannerify</a></p><p><br></p><h2><strong>Bug Reports</strong></h2><p><br></p><p>Bannerify is still a baby panda; if you notice any bugs, please get in touch via <a href=\"https://hypermatic.com/contact/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://hypermatic.com/contact</a> and we'll publish a fix as soon as possible.</p><p><br></p><h2>License</h2><p><br></p><p>After you've tried exporting banners with Bannerify 10 times, you'll be asked to enter your license key. Your license key will allow you or your team to animate and export an unlimited number of banners using Bannerify.</p><p><br></p><p>To purchase a license or to find out more about the plugin, please visit <a href=\"https://hypermatic.com/bannerify/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://hypermatic.com/bannerify</a></p>","id":"796124491692147799","installCount":27769,"lastUpdateDate":"2022-07-20T00:41:08.531Z","likeCount":366,"name":"Bannerify Banner Studio","publisherHandle":"hypermatic","publisherId":"247","publisherName":"Hypermatic","runCount":25621,"viewCount":42182},{"description":"<p>Utilizes built-in Figma rectangles, lines, and texts to generate tables with neatly organized layers.</p><p><br></p><p>How-To Use:</p><p>• Select one of three constraint modes (keyboard shortcuts added):</p><p>‣ Cell and table size (\"Alt + 1\")</p><p>‣ Count and cell size (\"Alt + 2\")</p><p>‣ Count and table size (\"Alt + 3\")</p><p>• Modify the values in the textbox and the checkboxes</p><p>• \"Create\" to generate table, or \"Cancel\" to exit</p><p>• Supports both mouse and keyboard navigations:</p><p>‣ \"Tab\" to go to next input</p><p>‣ \"Shift + Tab\" to go to previous input</p><p>‣ \"Arrow\" keys on textboxes to increase/decrease by 1</p><p>‣ \"Shift + Arrow\" keys on textboxes to increaes/decrease by 10</p><p>‣ \"Enter\" on checkboxes to toggle</p><p>‣ \"Enter\" on buttons to click</p><p>‣ \"Shift + R\" to reset input to cached values, if any</p><p>‣ \"Shift + C\" to initiate table creation</p><p>‣ Shortcuts to switch between constraint modes (see above)</p><p><br></p><p>Current Capabilites:</p><p>• Supports up to 100 rows and columns</p><p>• Supports table up to 5000px by 5000px (width by height)</p><p>• Supports 3 constraint modes (with keyboard shortcuts)</p><p>‣ Cell and table size</p><p>‣ Count and cell size</p><p>‣ Count and table size</p><p>• Enhanced UI experience with validations and loader</p><p>• With/without headers, and ability to specify header height</p><p>• When header is included, specify with/without floating filters</p><p>• Supports striped tables</p><p>• Ability to select both primary and striped colors of the table</p><p>• With/without borders, and ability to define border color</p><p>• Automated population of content and header texts</p><p>• Specify fonts family and style based on list of installed fonts</p><p>• Specify table and header font sizes</p><p>• Caching and preloading of last input</p><p>• Resetting to last cached input upon changes</p><p>• Integrated color picker for customizable colors</p><p><br></p><p>Work-in-Progress:</p><p>• Other units besides pixel</p><p><br></p><p>Other feature suggestions are welcome!</p><p><br></p><p>Note:</p><p>• \"GridMod\" is approved! If you've been wanting a tool to help you modify your GridGen tables, it's now available :)</p>","id":"796759972238579874","installCount":3516,"lastUpdateDate":"2021-03-24T13:40:23.874Z","likeCount":40,"name":"GridGen | Automatic Table Generator","publisherHandle":"stevahnes","publisherId":"69","publisherName":"Stevanus Satria","runCount":2766,"viewCount":6027},{"description":"<h2>Use your Theme UI config to quickly create color and text styles.</h2><p><br></p><p>Why only build consistent, themeable React apps when you can also bring the power of contraint-based design principles to Figma? You'll just need to import your Theme UI config and see the styles created.</p><p><br></p><h2>Instructions</h2><p><br></p><p>You'll need to convert your existing Theme UI config into a valid JSON file so that you can later import it. A minimal config to create color styles (e.g. in a <code>colors.json</code>) looks like this:</p><p><br></p><pre class=\"ql-syntax\" spellcheck=\"false\">{\n  \"colors\": {\n    \"text\": \"#000\",\n    \"brand\": {\n      \"primary\": \"#f4f4f4\",\n      \"secondary\": \"#f3f3f3\",\n    },\n  },\n}\n</pre><p><br></p><p>Once you loaded the plugin, load the file and press <strong>Apply Changes</strong>. You can optionally only import parts of the config (if available).</p><p><br></p><h2>Notes</h2><p><br></p><ul><li>Please note that the config file needs to be in a specific form: <a href=\"https://github.com/LekoArts/figma-theme-ui#usage\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://github.com/LekoArts/figma-theme-ui#usage</a>. Otherwise it won't work</li><li>If you have problems feel free to create an issue on <a href=\"https://github.com/LekoArts/figma-theme-ui\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">GitHub</a>.</li></ul><p><br></p><p>If you want to help maintain/improve this plugin I'd highly appreciate issues/PRs!</p><p><br></p><p>Theme UI: <a href=\"https://theme-ui.com/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://theme-ui.com/</a></p>","id":"797015796747379907","installCount":4415,"lastUpdateDate":"2021-12-24T22:17:18.255Z","likeCount":69,"name":"Theme UI","publisherHandle":"lekoarts","publisherId":"97800","publisherName":"LekoArts","runCount":3183,"viewCount":10706},{"description":"<p>Copy &amp; export vector drawable code from any layers except Slice and Image.</p><p><br></p><p><strong>How to Use</strong></p><p><br></p><p>Run plugin and select a layer, vector drawable code will show in plugin panel.</p><p><br></p><p><strong>How to Remove `android:fillType=\"evenOdd\"`</strong></p><p><br></p><p>Vector drawable with attribute fillType is only used in API level 24 and higher, if you need to remove it, install \"Fill Rule Editor\" plugin to change the fill rule to non-zero.</p>","id":"797369763563831541","installCount":11075,"lastUpdateDate":"2022-01-10T08:08:39.790Z","likeCount":94,"name":"Android Vector Drawable","publisherHandle":"ashung","publisherId":"56497","publisherName":"Ashung Hung","runCount":8421,"viewCount":19562},{"description":"Add a random popular movie or TV series poster.\n\n1. Select any vector object and run the plugin (repeat with as many objects as necessary). The plugin will fetch a poster image and add it as a filler on your selected object.\n\n2. Run the plugin without anything selected and it will add an element with a poster image.\n\n3. The posters are aggregated from the mustapp.com database and are automatically updated according to their popularity.","id":"797471678566755597","installCount":9903,"lastUpdateDate":"2020-04-10T12:36:12.588Z","likeCount":155,"name":"Movie Posters","publisherHandle":"394893","publisherId":"394893","publisherName":"Must Team","runCount":6213,"viewCount":9637},{"description":"a quick and easy replace color tool panel.\n\nUsage\n1. Open 'Color Replace' from the plugin menu.\n2. Select one or more frames.\n3. Change the color on the tool panel.","id":"797668496099411237","installCount":9219,"lastUpdateDate":"2022-03-04T06:14:08.222Z","likeCount":36,"name":"Color Replace","publisherHandle":"203x","publisherId":"51515","publisherName":"203X","runCount":8118,"viewCount":15555},{"description":"<p>A plugin to help you generate lighter, and darker shades of a particular color.</p><p><br></p><p>You can use it to create color scales.</p><p><br></p><p>Github - <a href=\"https://github.com/tushar7d/ColorKit\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">https://github.com/tushar7d/ColorKit</a></p>","id":"797696673804519719","installCount":37898,"lastUpdateDate":"2021-09-04T04:01:35.780Z","likeCount":325,"name":"Color Kit","publisherHandle":"tushar","publisherId":"567","publisherName":"Tushar Debnath","runCount":29302,"viewCount":34823},{"description":"<p>Easily map your data and layers together by using the same name. Either select specific entries from your overview or shuffle through them for a randomised dataset</p><p><br></p><p>Tired of incoherent random data?</p><p>Set up your data separately as a JSON or CSV file and start adding your content. The content of the datasets always remain together to create a seamless data retrieval experience.</p><p><br></p><p>Easy mapping via layer name</p><p>Map your data and your layers together simply by using the same name. The name of your text layers only needs to match the key of your object and the value will be parsed.</p><p><br></p><p>Selection rewriting</p><p>Overwrite multiple text layers within your selection and any data that’s attached to the entry will be written into layers that have the same name as the key.</p><p><br></p><p>Choose between specific or randomised data</p><p>When you have imported your data, the plugin will print a list with every entry that’s in your file. Click on an entry if you need specific data from that set.</p><p><br></p><p>Multiple datasets via tab menu</p><p>Push your productivity even more with the new tab menu feature. It's now possible to set up multiple datasets without switching between files.</p><p><br></p><p>(New) Iterate over random entries</p><p>Iterate over multiple entries of your list to your selection. The next entry will be used as soon as the same data would be applied a second time.</p>","id":"797778700190966062","installCount":3300,"lastUpdateDate":"2021-05-08T11:54:34.635Z","likeCount":114,"name":"JSON → Content","publisherHandle":"LucasDietrich","publisherId":"2157718","publisherName":"Lucas Dietrich","runCount":2402,"viewCount":8489},{"description":"<p>\"RTLit\" is a Figma plugin that converts the Arabic/Persian/Urdu text into readable format as Figma currently does not support RTL languages.</p><p><br></p><p>Behind the scenes it reverses the characters and does some other things to turn RTL gobbledigook into readable text. It has its limitations (see Known Issues below).</p><p><br></p><p>## How To</p><p><br></p><p>1. Copy Arabic/Persian/Urdu text from the source i.e. a web browser or other design software such as Adobe Illustrator etc.</p><p>2. Paste it into the Figma Text Box. Make sure you have selected a font that supports Perso-Arabic letters.</p><p>3. Select Figma Text Box (You can select more than one at a time as well).</p><p>4. `Right Click &gt; Plugins &gt; RTLit`</p><p>5. Done.</p><p><br></p><p>&gt; Make sure you retain the original text somewhere. If you transform the Figma Text Box, you will have to redo the steps mentioned above.</p><p><br></p><p>## Known Issues</p><p><br></p><p>1. LTR words such as numbers or english text if broken in two lines might create problems in formatting.</p><p>2. There might be more unknown issues feel free to report them here (<a href=\"https://github.com/ahmednooor/RTLit/issues\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">https://github.com/ahmednooor/RTLit/issues</a>). Behind the scenes, it reverses the characters sort of like it is mentioned here (<a href=\"https://help.figma.com/article/70-writing-in-other-languages\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">https://help.figma.com/article/70-writing-in-other-languages</a>) in \"Use Right-To-Left (RTL) languages\" section on forums.</p>","id":"798575277354069347","installCount":4776,"lastUpdateDate":"2021-11-30T23:51:12.897Z","likeCount":24,"name":"RTLit","publisherHandle":"ahmednoor","publisherId":"902312","publisherName":"Ahmed Noor E Alam","runCount":4519,"viewCount":4152},{"description":"Bridge the gap between designers and developers.\n\n🎨 Visualise existing or new color palettes in your design system.\nImport lists of color variables to draw components on canvas.\nVisual options:\n- Horizontal orientation with circular shape\n- Vertical orientation with square shape\n- Color labels\nHEX, RGB/RGBA, HSL/HSLA are supported\n\n📃 Generate lists of variables from color palettes:\n- Select shapes on a canvas to generate variables list\n- Currently only rectangle or ellipse shapes are supported\n- Beware, shapes must be ungrouped and shape's name will be passed to variable name\nVariables lists can be copied to the clipboard\n\nMore options will be available with new releases! Stay tuned","id":"798588768596541799","installCount":1028,"lastUpdateDate":"2020-02-12T10:26:39.316Z","likeCount":41,"name":"Valor","publisherHandle":"kolebayev","publisherId":"136942","publisherName":"Ilya Kolebayev","runCount":482,"viewCount":2737},{"description":"These HSL color adjustments allow you to tweak hue, saturation and lightness values of multiple selected objects at once.\n\nThe simple idea behind three sliders becomes a powerful tool when it comes to experiencing color.\n\nYou can tweak your palette, find new sweet and vibrant color combinations, make a color theory research or accidentally create brand new design trend.\n\nAdjustments affect all fills, strokes and effects color parameters in the selection including gradient stops. Current version doesn't yet process raster images and mixed text color properties (but you still can have them in your selection).\n\nAdjustments work with any selection including groups and frames, but keep in mind that large selections can impact performance badly.\n\nAny selection change with plugin already running results in resetting the sliders and rebuilding selection color data (careful on large selections).","id":"798711644668166520","installCount":5489,"lastUpdateDate":"2020-01-29T08:04:54.396Z","likeCount":99,"name":"Adjustments","publisherHandle":"panoplied","publisherId":"16182","publisherName":"panoplied","runCount":4589,"viewCount":8522},{"description":"<h2>Manage the text on your mockups from design to production with a single source of truth.</h2><p><br></p><p>Ditto integrates with Figma and your codebase to act as a single source of truth for everyone touching copy — from writers to designers to engineers.</p><p><br></p><p>You can use this Figma plugin to:</p><ul><li>🚦 Track progress and review status</li><li>🌐 Build a text component database/library</li><li>🌎 Manage translations (for i18n and l10n)</li><li>📜 View detailed edit history of your text</li><li>👯‍♂️ Make bulk edits to duplicate text</li><li>💬 Comment on specific pieces of text and @mention/notify teammates</li><li>🔍 Search text across your mockups</li><li>🔄 Sync text to a central repository</li><li>🛠️ Hand copy off to engineers (who can use our API/CLI instead of copy + pasting)</li><li>↗️ Export text to JSON, CSV, or XML</li></ul><p><br></p><h2>Here's a sample workflow using Ditto:</h2><ul><li>Connect your Figma mockups to Ditto to sync all the text into a new Ditto project.</li><li>Edit text (and add status, tags, and notes) in the Ditto web app or our Figma plugin. Use Ditto's Figma plugin to pull in any edits made in the web app to the Figma file.</li><li>Comment and @mention (notify) teammates to get their review on copy as it's being written.</li><li>Create and re-use existing text from your Ditto component library to save time and establish consistency.</li><li>Create Variants in Ditto for translations, copy explorations, custom messaging for user segments, etc.</li><li>When copy is ready, mark it as \"Final\" using Ditto.</li><li>Developers can either fetch the copy directly from their command line using our API/CLI, or download the copy as a CSV, JSON, or XML. They'll be able to integrate them into their codebase any way they'd like.</li></ul><h2><br></h2><h2>Getting started</h2><p>To get started, open up this plugin in any file. Click <strong>Sign in</strong> and follow the instructions to create a Ditto account and get access to the Ditto web app. See <a href=\"https://www.dittowords.com/docs/signing-up-with-a-figma-account\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">this guide</a> for more detailed instructions.</p><p><br></p><p>💌 Email <a href=\"mailto:founders@dittowords.com\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">founders@dittowords.com</a> with anything from feature requests to bug reports. We'd be so excited to hear from you 💛</p><p>💬Check out our <a href=\"https://dittowords.com/docs/introduction\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">help guides</a> to learn more.</p><p>🤙Schedule <a href=\"https://calendly.com/d/wd4d-v4fk/ditto-office-hours\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">a video call</a> with us to get customized help.</p>","id":"798826066406007173","installCount":13015,"lastUpdateDate":"2022-07-22T18:34:16.105Z","likeCount":423,"name":"✍️ Ditto | collaborate on copy","publisherHandle":"ditto","publisherId":"1567","publisherName":"Ditto","runCount":10384,"viewCount":27479},{"description":"Simply select a layer, component, group or frame > Open Ratio Resizer > Fill in your ratio and tap resize!\n\nComing soon:\n- Default aspect ratio\n- Rename layer to ratio","id":"799264059516370366","installCount":2508,"lastUpdateDate":"2020-01-31T12:35:04.253Z","likeCount":48,"name":"Ratio Resizer","publisherHandle":"Job","publisherId":"107048","publisherName":"Job Harmsen","runCount":2153,"viewCount":5351},{"description":"Forget ⌘-C or Ctrl-C. Copy the text from your mockups with ease. Fast Copy can help you copy-paste multiple text nodes by organizing everything into a table and automatically copying the text into your clipboard.\n\n1. Select a group or frame.\n2. Run the Fast Copy plugin.\n3. Click on the text that you want to copy. \n\nDon't worry about pressing ⌘-C or Ctrl-C because we'll automatically add it to your clipboard.\n\nWhat's next?\n\nNext feature that I'm thinking about is to allow you to copy the whole table or the whole column instead of individual cells.","id":"799361006626561487","installCount":1085,"lastUpdateDate":"2020-05-14T12:59:17.354Z","likeCount":28,"name":"Fast Copy","publisherHandle":"jag","publisherId":"1211800","publisherName":"Jag Talon","runCount":530,"viewCount":1878},{"description":"<p>Insert and retain the original resolution of big images.</p><p><br></p><h2><a href=\"https://ko-fi.com/yuanqing\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\"><strong>Fund my work on Figma plugins →</strong></a></h2><p><br></p><h2>Insert Big Image</h2><p>Opens a dialog through which one or more image files can be selected. Intelligently splits up and inserts each image file as a set of smaller images. (This is to work around a limitation in Figma where images with a dimension larger than 4096 pixels are scaled down.)</p>","id":"799646392992487942","installCount":44808,"lastUpdateDate":"2022-02-12T01:16:44.248Z","likeCount":506,"name":"Insert Big Image","publisherHandle":"yuanqing","publisherId":"1682602","publisherName":"Yuan Qing Lim","runCount":39150,"viewCount":42681},{"description":"<p>Select layers based on name, type, or similarity.</p><p><br></p><h1><a href=\"https://ko-fi.com/yuanqing\" rel=\"noreferrer noopener nofollow\" target=\"_blank\"><strong>Fund my work on Figma plugins →</strong></a></h1><p><br></p><h2>Select Layers by Name</h2><p>Selects layers that partially or exactly match the given name.</p><h3><br></h3><h2>Select Layers by Type</h2><p>Selects layers of a particular type:</p><ul><li>Component</li><li>Variant</li><li>Instance Layer</li><li>Frame</li><li>Group</li><li>Slice</li><li>Vector Layer</li><li>Rectangle</li><li>Line</li><li>Ellipse</li><li>Polygon</li><li>Star</li><li>Boolean Group</li><li>Image</li><li>Text Layer</li></ul><h3><br></h3><h2>Select Mask Layers / Hidden Layers / Locked Layers / Layers With Exports</h2><p>Selects layers with the specified attribute.</p><h3><br></h3><h2>Select Parent Layers / Root Layers</h2><p>Selects layers at the specified hierarchy.</p><h3><br></h3><h2>Select Similar Layers</h2><p>Selects layers with one or more attributes that are identical to the one currently-selected layer.</p><h3><br></h3><p>With the exception of <strong>Select Similar Layers</strong>, all commands make a sub-selection within the currently-selected layers, or creates a new selection of layers if the selection is empty.</p>","id":"799648692768237063","installCount":16873,"lastUpdateDate":"2021-04-04T07:51:06.451Z","likeCount":298,"name":"Select Layers","publisherHandle":"yuanqing","publisherId":"1682602","publisherName":"Yuan Qing Lim","runCount":12992,"viewCount":18494},{"description":"<p>Create color palettes for your designs.</p><p><br></p><p>Features:</p><p>Select a schema:</p><p>* Material – Material palette schema</p><p>* Linear – A stable, linear palette</p><p><br></p><p>Change the look of the palette in the Settings tab:</p><p>* Change the alignment, width and height the palette.</p><p>* Show an outline around your base color</p><p>* Lock all, none or just the swatch nodes</p><p>* Toggle the header node</p><p><br></p><p>Each schema comes with extra options to help you find the optimal palette.</p><p><br></p><p>Drag, zoom and scroll the demo palette if need be.</p><p><br></p><p>Each swatch will open a color picker when clicked, allowing for fine tuning of the palette.</p><p><br></p><p>All settings are saved when you create a palette. These can be reset in the \"Settings\" tab.</p><p><br></p><p><a href=\"https://github.com/Leolainen/figma-plugin-Material-palette\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://github.com/Leolainen/figma-plugin-Material-palette</a></p><p><br></p>","id":"799767414861565467","installCount":29833,"lastUpdateDate":"2022-05-27T21:24:20.488Z","likeCount":271,"name":"Material palette","publisherHandle":"leolainen","publisherId":"2974450","publisherName":"Leolainen","runCount":21163,"viewCount":37031},{"description":"DND Dice Roller with the option to roll a die multiple times if needed..","id":"801190063501003437","installCount":666,"lastUpdateDate":"2020-01-30T01:54:24.209Z","likeCount":11,"name":"DND Dice Roller","publisherHandle":"3146917","publisherId":"3146917","publisherName":"Kevin Root","runCount":393,"viewCount":670},{"description":"<h2>Find and fix errors in your designs.</h2><p><br></p><p>Design Lint is an open source plugin that <strong>finds missing styles within your designs</strong>.</p><p><br></p><p>Ensure your designs are ready for development or design collaboration by fixing inconsistencies.</p><p><br></p><p>Because Design Lint doesn't try and manage your library, there's <strong>no logging in or signing up for accounts.</strong></p><p><br></p><p>While it's running, <strong>Design Lint will update automatically</strong> as you fix errors. Clicking on layer will also select that layer in your design. Navigating between each error is fast and much easier than trying to find errors on your own.</p><p><br></p><ul><li>Errors are displayed in a layer list, or you can view errors by category to help fix them in bulk.</li><li>Use the \"Select All\" option to fix multiple errors at once.</li><li>Ignore and Ignore All allow you to ignore special unique layers.</li><li>Have an illustration in your design? Use the \"Lock\" layer feature in figma to skip it from being linted.</li><li>Want to set your own border radius values? Open the settings panel in the plugin.</li><li>Use the refresh icon in the top corner to run the linter again on a new selection.</li></ul><p><br></p><p><strong>Want to make a custom version of this plugin for your team?</strong> It's free and <a href=\"https://github.com/destefanis/design-lint\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">open source on Github</a>!</p><p><br></p><p><strong>Have a feature request or question?</strong> <a href=\"https://twitter.com/daniel__designs\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Send me a DM on twitter</a>.</p>","id":"801195587640428208","installCount":65852,"lastUpdateDate":"2022-05-09T01:57:24.267Z","likeCount":1423,"name":"Design Lint","publisherHandle":"discord","publisherId":"1508","publisherName":"Discord","runCount":44093,"viewCount":76886},{"description":"How do I change the frame size with Auto Layout enabled? Temporarily disable it! This plugin will help make it easier.\n\nHow to use it:\n- Select a frame.\n- Reset Auto Layout.\n- Return Auto Layout.\n\nUsage example: twitter.com/AndreslavKozlov/status/1219714184121810945\n\nHappy to help!","id":"801366561098649280","installCount":1537,"lastUpdateDate":"2020-02-27T12:36:54.983Z","likeCount":31,"name":"Resize Auto Layout","publisherHandle":"Andreslav","publisherId":"629","publisherName":"Andreslav Kozlov","runCount":720,"viewCount":3590},{"description":"<ol><li>Select a Frame with Children Elements</li><li>Use the Plugin</li><li>Elements will be Randomly Distributed by <code>X</code>, <code>Y</code> and <code>Rotation</code> Inside the Frame</li></ol>","id":"801882695851711248","installCount":1198,"lastUpdateDate":"2020-01-31T23:45:22.789Z","likeCount":31,"name":"Ovvverrrflowww","publisherHandle":"lisovskiy","publisherId":"214802","publisherName":"Sergey Lisovskiy","runCount":695,"viewCount":2135},{"description":"Meet the easy-to-use and powerful functional gradient plugin that you can use as content backdrops in any part of your website it in a moment! \n\nWebgradients has gained the trust of many large companies IBM, Disney, InVision, Microsoft, Apple and others, it is regularly used in their work. Choose any gradient from 180 stunning colors. Save your favorite gradients, and find a specific color by the filter.\n\nWebgradients saves your valuable time in a smooth, handy and inspiring way.\n\nSpecial features:\n- color filters\n- add to your favorite gradient\n- recent used\n\nOffical figma plugin for webgradients.com\n\nPlugin made by Dima Braven - https://twitter.com/dimabraven","id":"802147585857776440","installCount":98767,"lastUpdateDate":"2020-02-03T23:32:42.233Z","likeCount":733,"name":"Webgradients","publisherHandle":"itmeo","publisherId":"3182304","publisherName":"itmeo","runCount":61163,"viewCount":65191},{"description":"<p>Smarter Autolayouts with Spacers</p><p><br></p><p>&gt; Add custom spaces between component</p><p>&gt; Hide and show spacers in one clic</p><p>&gt; Create new autolayouts in seconds</p><p>&gt; Custom sizes</p><p>&gt; Custom colors</p><p><br></p><p>A plugin by the UX 82 Team &gt; Elsa, Arnaud, Bertrand, Christophe, Guillaume, Olivier</p><p><br></p><p>&gt; Add custom spaces between component</p><p><br></p><p>Select the component where to add a spacer.</p><p>Choose your direction</p><p>Choose your spacer size</p><p>And the spacer is added to your design</p><p><br></p><p>&gt; Hide and show spacers in one clic</p><p><br></p><p>Just switch to see spacers or not</p><p>The state is saved in the document so you can share it clean. Anyone with the plugin can show them back.</p><p><br></p><p>&gt; Create new autolayouts in seconds</p><p><br></p><p>If you add a spacer in a direction that does not fit with the parent autolayout, Spacers plugin smartly adds you a new autolayout.</p><p><br></p><p>It also works with multi selection in a same frame : select at least the first and last element you need to move with a spacer and a inner autolayout will be created.</p>","id":"802230205741773645","installCount":3919,"lastUpdateDate":"2020-11-05T16:06:35.549Z","likeCount":125,"name":"Spacers","publisherHandle":"nagoli","publisherId":"1742683","publisherName":"olivier motelet","runCount":3099,"viewCount":8403},{"description":"<p>Insert randomized data from Google Sheets into tagged layers in your designs. Supports text, images, and colors.</p><p><br></p><h2>How to use</h2><ol><li>Create a public Google Sheet. The headings for each column in your sheet is then used to tag layers in Figma.</li><li>Run the Data Roulette plugin. Create a new data set and paste your public sheet url in</li><li>Tag layers in Figma with column titles prefixed with <code>#</code></li><li>Select layers and click \"Insert Data\" to get random data inserted based on the tags in your selection</li></ol><p><br></p><h2>Tags</h2><ul><li>Tag layers with using <code>#</code> followed by the column title. Example: <code>#Description</code> for a column titled 'Description' in Google Sheets</li><li>Tags can contain spaces. Example: <code>#User Name</code></li></ul><p><br></p><h2>Data Sets</h2><ul><li>Create multiple Data Sets to separate and organize data from multiple spreadsheets</li></ul><p><br></p><h2>Combine Tags</h2><ul><li>Combine tags using <code>+</code>. Example: <code>#First Name + #Last Name</code></li><li>Insert a text value and color the text using this method. Example: <code>#Comment + #Comment Color</code></li></ul><p><br></p><h2>Images</h2><ul><li>Add urls to images (must be https) in your sheet. Tagging shape layers with image url data will apply the linked images as fills.</li><li>Supports base64 data urls (e.g. <code>data:image/png;base64...</code>)</li></ul><p><br></p><h2>Colors</h2><ul><li>Add colors as Hex, RGB, or RGBA values in your sheet. Tagging a shape or text layer will apply colors as a fills.</li></ul><p><br></p><h2>Grouping</h2><p>Data is grouped by row, so for instance if you have <code>Firstname</code> and <code>Lastname</code> columns, filling data into tagged layers will pair the appropriate values for that user entry. If you want to separate data use another data set, or create multiple sheets within a single Google Sheet for each type of related data.</p>","id":"802301551610616662","installCount":1301,"lastUpdateDate":"2020-04-13T10:41:02.672Z","likeCount":43,"name":"Data Roulette","publisherHandle":"Hamish","publisherId":"555","publisherName":"Hamish","runCount":864,"viewCount":4168},{"description":"<p>Localize UI and translate marketing visuals efficiently with Crowdin plugin for Figma.</p><p><br></p><p><strong>Crowdin</strong> is a cloud-based localization management platform that speeds up and automates localization. Trusted by GitHub, Pipedrive, GitLab, Buffer, and Magento, it helps companies of any size localize their apps, websites, games, marketing content, and more.</p><h2><br></h2><h2>Use Cases</h2><p><br></p><p>Crowdin plugin for Figma will be of use if you:</p><p>&nbsp;</p><ul><li>Create<strong> multilingual user interfaces</strong> and want to provide clear experiences across markets. <a href=\"https://support.crowdin.com/figma-plugin/?utm_source=figma.com&amp;utm_medium=referral&amp;utm_campaign=figma_community#ui-localization\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Learn more.</a></li><li>Collaborate with other teams on <strong>mobile applications</strong> or <strong>software localization</strong>.</li><li>Need to quickly translate static visuals like social media graphics, posters, blog visuals, and more. <a href=\"https://support.crowdin.com/figma-plugin/#marketing-visuals-localization\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Learn more.</a></li></ul><p><br></p><h2>Synchronize Localizable Content Across Tools</h2><p>&nbsp;</p><p>Crowdin integration with Figma works both ways. You can send designs for translation and upload them back to Figma for further customizations.&nbsp;</p><p>&nbsp;</p><p>When localizing UI, you can synchronize content between Figma, Crowdin, and your repository on <strong>GitHub</strong>, <strong>GitLab</strong>, <strong>Bitbucket</strong>, and <strong>Azure Repos</strong>. Your engineering team can use Crowdin API and CLI to set up instant content synchronization.</p><p><br></p><h2>Prototype with the Real Copy and Test Translated Versions</h2><p><br></p><p>Once the production-ready texts are uploaded to Crowdin, you can stop using <em>Lorem Ipsum</em> in your mockups.&nbsp;</p><p><br></p><p>Get the list of source strings, use the real copy in your mockups, edit texts if necessary, and send new strings for translation with the keys and screenshots for translators.&nbsp;</p><p><br></p><p>Upload translated mockups back to Figma and customize them before the development starts.</p><p><br></p><p><a href=\"https://support.crowdin.com/figma-plugin/?utm_source=figma.com&amp;utm_medium=referral&amp;utm_campaign=figma_community#ui-localization\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Learn more.</a></p><p><br></p><h2>Set up Continuous Workflow for App Localization</h2><p><br></p><p>App localization can now start at the prototyping step:</p><p><br></p><ul><li>Designers send texts for translation to Crowdin with the keys, tags, and screenshots.</li><li>Translation teams work on the texts in Crowdin.</li><li>The translated variants are tested and customized back in Figma.</li><li>Development teams then download source and translate files from Crowdin and integrate them into the codebase.</li><li>Also, a separate technology allows downloading files in the&nbsp;<em>Android XML</em>&nbsp;and&nbsp;<em>Strings</em>&nbsp;formats regardless of the initial source file format.</li></ul><h2><br></h2><h2>Use Different Translation Approaches</h2><p><br></p><p>In Crowdin, texts can be pre-translated via Machine Translation engines (Google Translator, Microsoft Translator, and others). You can also invite your in-house translators, freelancers, or an agency. Crowdin will create Translation Memory automatically, so you will be able to reuse translations and pre-translate texts using your TM in the future.</p><p><br></p><p>Human translators will have sufficient <strong>context</strong> while translating your content. When working on UI localization, you can automatically upload <strong>screenshots</strong> to the localization project.</p><p><br></p><p>When translating static pages, like posters and banners, translators will <strong>preview</strong> full frames in Crowdin and see the visual context for every text.</p><p><br></p><h2>How to Set Up</h2><p><br></p><p>To get started, you will need a Crowdin account and a localization project under it. You can create a new project, or ask for manager access to the existing one.</p><p><a href=\"https://accounts.crowdin.com/register?utm_source=figma.com&amp;utm_medium=referral&amp;utm_campaign=figma_community\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Sign up for a Crowdin account</a>.</p><p><br></p><p>If you manage a project in Crowdin yourself after a 14-day free trial, select one of the <a href=\"https://crowdin.com/pricing?utm_source=figma.com&amp;utm_medium=referral&amp;utm_campaign=figma_community#annual\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">subscription plans</a>.</p><p><br></p><p><strong>To connect Figma and Crowdin accounts:</strong></p><p><br></p><p>1. Install Crowdin for Figma Plugin.</p><p>2. Open the necessary Figma file.</p><p>3. Head to the menu in the top-left corner and select <strong>Plugins &gt; Crowdin</strong>.</p><p>4. Provide <strong>Personal Access Token</strong>. You can generate it in your <em>Account Settings</em> in Crowdin.</p><p>5. If you’re connecting your Crowdin Enterprise account, specify your Organization name.</p><p><br></p><p>See a detailed guide on how to use the Crowdin <a href=\"https://support.crowdin.com/figma-plugin/?utm_source=figma.com&amp;utm_medium=referral&amp;utm_campaign=figma_community\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">translation plugin for Figma</a>.</p><p><br></p><p><a href=\"https://crowdin.com/contacts?utm_source=figma.com&amp;utm_medium=referral&amp;utm_campaign=figma_community\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Contact us 24/7</a> if you need any assistance.</p>","id":"802555101361690489","installCount":2758,"lastUpdateDate":"2022-07-15T08:50:13.644Z","likeCount":60,"name":"Crowdin for Figma","publisherHandle":"Crowdin","publisherId":"3192096","publisherName":"Crowdin","runCount":2466,"viewCount":6226},{"description":"<p>Bulk swap instances and styles between masters with the same name. Copy styles between files. Manage pathnames like \"toolbar/nav/back\" using folder-like interface.</p><p><br></p><p><a href=\"https://youtu.be/cWE_USeedKQ\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">► Move master components and styles between files</a></p><p><a href=\"https://youtu.be/lmh24-OINe4\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">► Manage pathnames with /'s like folders</a></p><p><br></p><p><strong>1. Copy styles between files </strong>( Export / Import )</p><p><br></p><p>→ Copy and inject styles into existing design system file</p><p>→ Combine multiple style files into a single one (eg. text styles and color styles together)</p><p><br></p><p><strong>2. Bulk swap instances and styles between masters with the same name, even from different files </strong>( Set as Target / Relink )</p><p><br></p><p>→ Copy master components and styles between files and selectively swap their instances</p><p>→ Move master components from the local design file to a library file</p><p>→ Duplicate multiple nested components along with their instances</p><p>→ Move master styles from the common library file to an external styles file</p><p>→ Improve library with components and styles versions and selectively switch mockups between them</p><p>→ Link all instances and styles back to the library after importing library and design files from the Sketch</p><p><br></p><p><strong>3. Manage pathnames like \"toolbar/nav/back\" using folder-like interface </strong>( Rename / Group / Ungroup / Move to (drag and drop) / Duplicate / Delete )</p><p><br></p><p>→ Reorganize and clean up huge library with multiple names like \"icons/small/actions/group\"</p><p>→ Quickly duplicate multiple styles when only a few parameters need to be changed.</p><p>→ Organize styles with more options than Figma</p><p><br></p><p>- - - - - - -</p><p><br></p><p>🚀 <strong>1. Copy styles</strong></p><p><br></p><p>How it works:</p><p>a) Select styles and click <strong>Export</strong> in the file A</p><p>b) Click <strong>Import</strong>\" file B</p><p><br></p><p>☝️All font used in styles need to detected by Figma</p><p>☝️Color styles with filled image are not supported yet</p><p><br></p><p>Use to:</p><p>→ Copy and inject styles into existing design system file</p><p>→ Combine multiple style files into a single one (eg. text styles and color styles together)</p><p><br></p><p>🚀 <strong>2. Swap between masters with the same name</strong></p><p><br></p><p>This feature allows you to copy master styles and components between files, change desired properties, and selectively swap their instances to a new copy.</p><p><br></p><p>You simply specify the target masters and the DSO looks for any matching instances and styles by the master name.</p><p><br></p><p><a href=\"https://youtu.be/cWE_USeedKQ\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">► Watch video</a></p><p><br></p><p>☝️Compare to <strong>Figma swap</strong> <strong>library </strong>with the DSO you can <strong>apply</strong> styles and components <strong>swap</strong> <strong>not only to the entire file, but also to a page or a selection</strong>. You can also quickly pick and choose specific master styles and components to swap.</p><p><br></p><p>How it works:</p><p>a) Select master styles or components and <strong>Mark</strong> them <strong>as Targets</strong> in the library file.&nbsp;You choose which masters will be used to find and swap instances.</p><p><br></p><p>b) Apply <strong>Relink</strong> in the design file. DSO looks for any matching styles or instances in the whole file, page or selection (optionally). Matching is based on the full swap or master name.</p><p><br></p><p>☝️ Style names are compared based on the full path along with the folder names e.g. \"primary/opacity/200\"</p><p>☝️ Variant names are compared based on the full name with properties e.g. \"Button, typy=primary, state=hover\"</p><p><br></p><p>Use to:</p><p>→ Copy master components and styles between files and selectively swap their instances</p><p>→ Move master components from the local design file to a library file</p><p>→ Duplicate multiple nested components along with their instances</p><p>→ Move master styles from the common library file to an external styles file</p><p>→ Improve library with components and styles versions and selectively switch mockups between them</p><p>→ Link all instances and styles back to the library after importing library and design files from the Sketch</p><p><br></p><p><a href=\"https://youtu.be/cWE_USeedKQ\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">► Watch video</a></p><p><br></p><p>🚀 <strong>3. Manage pathnames with /'s like folders </strong>for components and styles</p><p><br></p><p>Say goodbye to endless naming schemes with /'s</p><p><br></p><p>Features:</p><p><strong>1. Rename </strong>group</p><p><strong>2. Group / Ungroup</strong></p><p><strong>3. Move to </strong>(drag and drop)</p><p><strong>4. Duplicate </strong>component and styles in bulk</p><p><strong>5. Delete</strong></p><p><br></p><p>Use to:</p><p>→ Reorganize and clean up huge library with multiple names like \"icons/small/actions/group\"</p><p>→ Quickly duplicate multiple styles when only a few parameters need to be changed.</p><p>→ Organize styles with more options than Figma</p><p><br></p><p>🗒 DSO folder-like styles were developed before Figma released this feature and are implemented more conveniently.</p><p><br></p><p><a href=\"https://youtu.be/lmh24-OINe4\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">► Watch video</a></p><p><br></p><p><strong>DETAILS</strong></p><p><br></p><p>→ Works for local and external libraries</p><p>→ Context menu&nbsp;</p><p>→ Shortcuts</p><p>→ All style types support</p><p>→ Variants support</p><p><br></p><p><strong>SHORTCUTS</strong></p><p><br></p><p>→ Multiple selection: Cmd/Ctrl + Item click</p><p>→ Select range: Shift + Item click</p><p>→ Select all: Cmd/Ctrl + A</p><p>→ Rename: R</p><p>→ Group/Ungroup: G/U</p><p>find more in context menu</p><p><br></p><p><strong>TRIAL</strong></p><p><br></p><p>You have a <strong>15-day free trial for each new file</strong> with new components and <strong>3 free trials for relink and export/import styles</strong>. During the trial period, the ability to select target and styles is limited to 5.</p><p><br></p><p>☝️ Please do not copy components from the file where the trial period ended, this will decrease the period of the new file.</p><p><br></p><p><strong>LICENSE</strong></p><p><br></p><p><strong>Pay once, use forever! </strong>To purchase a license please visit our <a href=\"https://gumroad.com/l/dsoplugin\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\"><strong>Product Page on Gumroad</strong></a>. You can pay by card or PayPal. Feel free to contact us if you need a discount for any reason.&nbsp;</p><p><br></p><p><strong>FEEDBACK</strong></p><p><br></p><p>If you have a great idea feel free to contact us by email <a href=\"mailto:dso-support@floweare.com\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">dso-support@floweare.com</a>. You can also use this email to report suspected bugs in DSO plugin.</p>","id":"802579985985331070","installCount":80965,"lastUpdateDate":"2022-04-15T15:33:51.010Z","likeCount":1540,"name":"Design System Organizer","publisherHandle":"floweare","publisherId":"872218978675824580","publisherName":"Floweare","runCount":63213,"viewCount":119357},{"description":"<p>Generate textstyles in seconds using font-size font-family and more —</p><p><br></p><p><strong>What do I do with this plugin?</strong></p><p>You basically batch generate Textstyles.</p><p><br></p><p>1. Simply select the typefaces you want to generate a textstyle from</p><p><br></p><p>2. Choose modifiers to branch your textstyles<strong> </strong></p><p><strong>🌈 Tip:</strong> You can even replace the default labels of font-family, size and weight with custom labels.</p><p><br></p><p>3. Generate!</p><p><br></p><p><strong>But why? 🤷‍♂️</strong></p><p>Well … if you have to generate Textstyles from time to time it is not that much fun in design tools. It really is just a lot of clicking and Typing properties that are already existing or bound to a fonts properties</p><p><br></p>","id":"803311677045533625","installCount":8158,"lastUpdateDate":"2022-05-21T11:33:19.872Z","likeCount":151,"name":"Typestyles","publisherHandle":"marvin","publisherId":"416341","publisherName":"Marvin Bruns","runCount":7747,"viewCount":11885},{"description":"<p>If you are designing and developing Google static banner ads, you must make sure all the image file sizes meet the ≤150kB specification.</p><p><br></p><p>With AD Compressor, you can compress multiple display banner ads with a click. The plugin is completely FREE for use as long as your compression usage is available.</p><p><br></p><p>HOW TO USE</p><p><br></p><p>1. Install `AD Compressor` and run it inside of a project</p><p>2. Enter and verify your Tinify API(require for the first time — browser, application or machine)</p><p>3. Select frames or objects you want to compress(by default, ONLY the existing &amp; visible FRAME(s) would be automatically selected.)</p><p>4. When all the frames are ready, you can hit `COMPRESS` button to compress all images are over 150kB(default)</p><p>5. OPTIONAL: if you would like to give a nice formatted prefix for each image, you can use the `OUTPUT PREFIX` input field</p><p>6. Once the compression is done, you can `DOWNLOAD` all the final outputs within a ZIP</p><p><br></p><p>NOTES</p><p><br></p><p>- This plugin would only compress if the image is over than the compression setting(default 150kB), any file sizes are lower than this setting would not run compression(The idea is to make the image size smaller but keep the best quality).</p><p><br></p><p>- By default, ONLY the existing FRAME(s) would be automatically selected. If you want to compress anything that is not within a frame, you would need to select individually or select multiples at one time.</p><p><br></p><p>- Recently, the plugin has integrated with a free server-side compression(Tinify API — TinyPNG) which could provide a better image quality.</p><p><br></p><p>- All Responsive ADs(sizes are up to 5 MB) or images are over to 5 MB would skip compressing</p><p><br></p><p>Built with love by the ©SearchKings team.</p>","id":"803370930903876544","installCount":2078,"lastUpdateDate":"2022-04-25T13:05:02.868Z","likeCount":32,"name":"AD Compressor","publisherHandle":"wei","publisherId":"2062376","publisherName":"Wei Zhong","runCount":1754,"viewCount":3890},{"description":"<p><br></p>","id":"803602060246520783","installCount":2305,"lastUpdateDate":"2021-07-31T08:47:26.907Z","likeCount":59,"name":"Instance Swap","publisherHandle":"romainginetta","publisherId":"3033680","publisherName":"Romain Allemann","runCount":2275,"viewCount":4345},{"description":"<p>Create your own high quality animated GIFs for Free.</p><p><br></p><p>Unlimited Exports, Transparent Backgrounds, No Restrictions,.</p><p><br></p><p>FEATURES:</p><p><br></p><p>- No Restrictions</p><p>User can select as many number of images they want to create a GIF</p><p><br></p><p>- Unlimited Exports</p><p>User can generate as many number of GIFs they want for free</p><p><br></p><p>- Transparent Background</p><p>User can generate GIFs with transparent backgrounds</p><p><br></p><p>- Set Frame Intervals</p><p>User can set frame interval to each frames in GIFs</p><p><br></p><p>HOW TO USE:</p><p><br></p><p>1. Post installing, select at least two layers to create a GIF image.</p><p>2. Select interval, height, and width of GIF image. Click on ‘Preview’ to see the GIF image.</p><p>3. Click on ‘Download’ button to download GIF image.</p><p><br></p><p>Have fun 🥳</p><p><br></p><p>Your feedback helps us to come up with more exciting features. Drop us a note at <a href=\"mailto:giffycanvas@designstring.com\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">giffycanvas@designstring.com</a></p>","id":"803633147991628761","installCount":38384,"lastUpdateDate":"2022-03-29T06:43:56.969Z","likeCount":526,"name":"GiffyCanvas","publisherHandle":"designstring","publisherId":"78844","publisherName":"DesignString","runCount":30107,"viewCount":39422},{"description":"<p><strong>What is Phrase?</strong></p><p><strong></strong></p><p>For digital products offered in global markets, translation has become an integral part of the user experience, but teams involved often struggle to be on the same page. UX copy shouldn’t be left for last, and neither should translating it into multiple languages.</p><p>&nbsp;</p><p>Phrase is a Translation Management System with the whole team in mind. It’s a cloud-based platform that enables Designers, Copywriters, Product Managers, Developers and Translators to come together to create the best local user experience for global digital products.</p><p>&nbsp;</p><p>For more information please visit:<a href=\"https://phrase.com/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\"> https://phrase.com/</a></p><p>&nbsp;</p><p><strong>Why connect Phrase and Figma?</strong></p><p>&nbsp;</p><p>Finally, you can build a bridge between Product Design and Translation Teams by syncing texts between Figma and Phrase. Send design content from within Figma to Phrase in seconds so that your Translators can then start their work right away.</p><p>&nbsp;</p><p>Let our plugin inform you when translations are ready so you can pull translated copy into Figma. Preview your designs in all your languages before handoff to Developers.</p><p>&nbsp;</p><p>Give Translators proper context with automatically attached screenshots. Our plugin highlights exactly where each text element belongs. Increase your overall translation quality and reduce feedback loops.</p><p>&nbsp;</p><p><strong>Once Figma is connected to Phrase you can:</strong></p><p>- Increase productivity with machine translation and post-editing</p><p>- Order professional translations from integrated language service providers</p><p>- Organize your entire localization team</p><p>- Boost translation quality and ensure the correct terminology is used across all content with linguistic tools such as Glossaries, Translation Memories, and Term Bases.</p><p>&nbsp;</p><p>&nbsp;</p><p><strong>How to set up</strong></p><p>For more information and to learn how to install the plugin visit <a href=\"https://help.phrase.com/help/phrase-figma-plugin\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://help.phrase.com/help/phrase-figma-plugin</a></p><p>Don’t have a Phrase account? Try it for free! <a href=\"https://app.phrase.com/signup\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://app.phrase.com/signup</a></p>","id":"803669834214399971","installCount":5072,"lastUpdateDate":"2022-05-12T14:49:07.266Z","likeCount":91,"name":"Phrase","publisherHandle":"memsource","publisherId":"905372891138215867","publisherName":"Memsource Plugin","runCount":4631,"viewCount":11870},{"description":"You can now design any viewport in the canvas and give it a name. and jump to it any time you want go to it\n\nHow it works\n\n- Scroll and zoom to the view in the canvas you want to save in the plugin.\n\n- In the bottom of the plugin window you will find \"create view with name\" field. Type the name of the view you want and click create.\n\n- The view will be added in the plugin list.\nWhen you want to jump to that view just click on the view you have create in the list.\n\nThe plugin works accross pages as well.\n\nDon't forget to support the plugin ☕️","id":"803995080229630997","installCount":1368,"lastUpdateDate":"2020-03-30T17:33:33.312Z","likeCount":52,"name":"View Finder","publisherHandle":"ahmedmigo","publisherId":"3222148","publisherName":"Ahmed Genaidy","runCount":832,"viewCount":2227},{"description":"Plugin set unique ids for gradients and masks into the svg code. \n\nThe problem appears when two or more svg icons with the same type of gradient put on one page. The icons set the latest gradient from the svg files with two or more same ids. \n\nGitHub: https://github.com/irodger/svg-id-randomizer\n\nTo solve the problem plugin adds 6 random numbers to ids inside the svg code links. This solution help to escape hand rewriting ids inside when you have the issue.\n\nWithout plugin:\n<svg ...>\n    ...\n    <rect fill=\"url(#paint0_linear) ... >\n    <rect fill=\"url(#paint1_radial) ... >\n    ...\n    <linearGradient id=\"paint0_linear\" ... >\n    <radialGradient id=\"paint1_radial\" ... >\n    ...\n</svg>\n\nWith plugin:\n<svg ...>\n    ...\n    <rect fill=\"url(#paint0_linear-231475) ... >\n    <rect fill=\"url(#paint1_radial-863795) ... >\n    ...\n    <linearGradient id=\"paint0_linear-231475\" ... >\n    <radialGradient id=\"paint1_radial-863795\" ... >\n    ...\n</svg>\n\nHow to use it?\nSelect what you need to export in svg, then run the plugin from the plugins menu. In the opened popup, you may see svg code (already with unique ids inside in case if the code has links to gradients).\n\nSad news, guys 🥺\nUnfortunately, Figma didn't allow access to the export dialog for plugin development.\nAlso, viewers role can't use plugins 😢","id":"804532959937451122","installCount":1816,"lastUpdateDate":"2020-01-31T01:39:58.382Z","likeCount":24,"name":"SVG code with unique links ids","publisherHandle":"8fa47b05_70eb_4","publisherId":"1667","publisherName":"irodger","runCount":1154,"viewCount":3063},{"description":"Textyles speeds up your typographic workflow by generating Text Styles quickly.\n\nFeatures:\n- Generate Text Styles based on a modular type scale using rounded or exact values\n- Start with a selected text layer to base styles on its properties\n- Nickname the font you use and name each size to keep names consistent\n- Clear out all your text styles with one click","id":"804843548882105498","installCount":4068,"lastUpdateDate":"2020-01-30T22:41:50.926Z","likeCount":83,"name":"Textyles","publisherHandle":"tinyeahno","publisherId":"60794","publisherName":"Jeremy Tinianow","runCount":3889,"viewCount":7566},{"description":"Allows you to place a layer as a linked image on another layer!\n\nWith Link you can place components or layers as an image on another layer, allowing you to update the image fill with one click - document wide on as many links as you want!\n\nWhen would you use it?\nWhen placing parts of your design on another part in the design - currently you can either make a component and scale it to fit (which doesnt always work) or Copy as PNG - doing that again and again becomes tedious - which is why this plugin was born.","id":"805103722318814416","installCount":1859,"lastUpdateDate":"2020-07-28T17:40:49.933Z","likeCount":53,"name":"Link","publisherHandle":"jsx","publisherId":"389","publisherName":"Jan Six","runCount":1770,"viewCount":5461},{"description":"<p><strong>Add page numbers to frames and update them easily!</strong></p><p><br></p><p>If you've ever wanted to use Figma for print design, or just export frames to a PDF, you might also have looked for a way to add page numbers. Look no further! ✨</p><p><br></p><p><strong>Paginate works by selecting a component and replacing the text in instances of that component with page numbers.</strong></p><p><br></p><p>Find a quick video demo on Twitter: <a href=\"https://twitter.com/simrdd/status/1231188462411374592\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://twitter.com/simrdd/status/1231188462411374592</a></p><p><br></p><p>————————</p><p><br></p><p>Roadmap</p><ul><li>[ x ] Option to run plugin without UI on running previous plugin</li><li>[ ] Paginate instances of different components simultaneously (tabs)</li><li>[ ] Run separate instances simultaneosly using layer names</li><li>[ ] Visualization of chosen config</li></ul>","id":"805217025770129636","installCount":12216,"lastUpdateDate":"2020-09-21T17:27:33.617Z","likeCount":141,"name":"Paginate","publisherHandle":"simon","publisherId":"1202713","publisherName":"Simon","runCount":10418,"viewCount":21445},{"description":"Parand generate random persian text in different subjects to speed up your workflow.\n\nhttps://github.com/babakhani/parand","id":"805342303490221292","installCount":1011,"lastUpdateDate":"2020-07-22T18:16:53.914Z","likeCount":15,"name":"Parand","publisherHandle":"rezababakhani","publisherId":"3145234","publisherName":"Reza Babakhani","runCount":583,"viewCount":1181},{"description":"<h2>🚀 Remote usability testing</h2><p>Run usability tests by simply sharing a link and gathering insights on how users interact with your prototypes.</p><p><br></p><h2><strong>👑 Features</strong></h2><p>💎 Interaction flows</p><p>💎 Session replays</p><p>💎 Emotion recognition</p><p>💎 Live testing sessions with audio &amp; video</p><p>💎 Heatmaps (hover, click/tap, rage etc.)</p><p>💎 Integrated surveys</p><p>💎 and much more ...</p><p><br></p><h2><strong>🧐 Don’t You Have an Account Yet?&nbsp;</strong></h2><p>❗A <a href=\"http://mupixa.com/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Mupixa.com</a> account is required to use the plugin.❗</p><p>No worries! Register now for Free!</p><p><a href=\"https://app.mupixa.com/signup\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://app.mupixa.com/signup</a></p><p><br></p><h2><strong>🤔 How Does It Work</strong></h2><p>1. Open your Figma project;</p><p>2. Open the ‘Mupixa Publisher’ Plugin (the first time the plugin is used it will redirect you to <a href=\"http://mupixa.com\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">mupixa.com</a> to login using your Mupixa credentials);</p><p>3. Publish your project;</p><p>4. Open the newly created project and define test scenarios;</p><p>5. Generate links or QR codes to share your prototype;</p><p>6. Evaluate collected analytics;</p><p><br></p><p>ℹ️ The plugin will upload all assets from the project and the following interactions if available:</p><p>Supported triggers:</p><p>- On Click;</p><p>- Mouse Down;</p><p>Supported actions:</p><p>- Back;</p><p>- Navigate To;</p><p><br></p><p>ℹ️ Each publish will create a new Mupixa project.</p>","id":"805707076059556115","installCount":1015,"lastUpdateDate":"2022-06-02T21:42:29.451Z","likeCount":35,"name":"Mupixa Publisher","publisherHandle":"Mupixa","publisherId":"1847410","publisherName":"Mupixa","runCount":670,"viewCount":2815},{"description":"<p>Enhanced usage of forms and form validation in tests based on Figma prototypes.</p><p><br></p><p>Thank you for using our plugin 🧡</p><p><br></p><p>Nov 26th, 2021: New ability to export your prototype changes to your tests without breaking your test setup.</p><p><br></p><p>Nov 24th, 2021: Fix small bug about transition directions and positioning.</p><p><br></p><p>Oct 29th, 2021: Accurately export position of interactions nodes</p><p><br></p><p>Oct 6th, 2021: Allow slashes in frame names.</p><p><br></p><p>Aug 13th, 2021: Improved exports and interaction handling.</p><p><br></p><p>Mar 9th, 2021: Improved handling of components and sub frames.</p><p><br></p><p>Feb 9th, 2021: Added notice about exported frames must not share the same name.</p><p><br></p><p>Jan 20, 2021: Enabled export of interactions to boost your productivity when setting up a user test!</p><p><br></p>","id":"806266109419625822","installCount":1907,"lastUpdateDate":"2021-12-16T14:42:41.689Z","likeCount":41,"name":"Preely - User Testing","publisherHandle":"sebbeselvig","publisherId":"2693249","publisherName":"Sebbe Selvig","runCount":1407,"viewCount":4629},{"description":"<p>Importing an unorganized design from Sketch APP? Coworker sends you an unfinished template without Figma color styles? Need to unified colors for a template?</p><p><br></p><p>FRC(Find and Replace Colors) is made for designers or teams who often need to create or modify templates. It is a quick &amp; easy solution for finding all colors and replacing them as you need.</p><p><br></p><p>✅&nbsp; SUPPORTED</p><p><br></p><p>- Multiple or individually selection — default select all supported shape types</p><p>- Shape Types: component, instance, slice, frame, group, star, line, ellipse, polygon, rectangle, vector and text</p><p>- Fill Types: background, stroke and gradient</p><p>- Color: 6-digit hex triplet color</p><p>- Find nodes that with match color</p><p><br></p><p>❌  UNSUPPORTED</p><p><br></p><p>To change shared(named) styles for the entire document, including every page could end up taking a long time and changes outside the current page won't be immediately visible which could be dangerous. Also, there is no existing way to access shared library styles from the current page. As a result, we will NOT support traversing changes for the entire document or to any shared libraries.</p><p><br></p><p>💡 As a workaround for non-styled elements you can use the \"FIND ONLY\" option, once you select all the matched elements, you can use Figma \"Selection colors\" to replace them with library styles. If the design is well organized, we would recommend using the native Figma feature to switch colors.</p><p><br></p><p>HOW TO USE</p><p><br></p><p>1. Install `FRC` and run it inside of a project</p><p>2. Click the input field next to the corresponding color and enter a new 6-digit hex triplet color</p><p>3. OPTIONAL: check or uncheck the replacing types — fill, stroke or gradient</p><p>4. Start to replace all matches by hitting the `Replace Colors` button</p><p><br></p><p>NOTES</p><p><br></p><p>- Native color picker behavior and style would depend on the using of desktop app or in-browser</p><p>- All the finding &amp; replacing action would only apply to the page that you run `FRC`</p><p>- Develop without opacity option — without too many modifications, especially for templates</p><p>- Find &amp; Focus could select all the nodes on the current page with matching color, then you can do whatever you want, like using native Figma \"Selection colors\" to replace with library color styles</p><p>- Not supporting live selection editing — need to close and rerun `FRC`</p><p>- Not supporting multiple colors in a same text layer</p><p><br></p><p>Built with love by the ©SearchKings team.</p>","id":"806266638862897503","installCount":27527,"lastUpdateDate":"2022-04-25T13:23:59.477Z","likeCount":221,"name":"Find and Replace Colors","publisherHandle":"wei","publisherId":"2062376","publisherName":"Wei Zhong","runCount":21613,"viewCount":36375},{"description":"Draws a mask under the selected layers, and creates a group containing the selected layers and the mask. Useful for quickly cropping your selection.","id":"806532458729477508","installCount":1134,"lastUpdateDate":"2020-05-07T12:55:22.128Z","likeCount":24,"name":"Draw Mask Under Selection","publisherHandle":"yuanqing","publisherId":"1682602","publisherName":"Yuan Qing Lim","runCount":652,"viewCount":1828},{"description":"<p>Zebra is a lightweight APCA colour contrast checker.</p><p><br></p><h2>What is APCA?</h2><p>APCA(Advanced Perceptual Contrast Algorithm) is a modern color contrast algorithm that aims to be be perceptually uniform. It is currently being evaluated as a part of the WCAG 3 draught process.</p><p><br></p><p>Note: Because APCA is still being evaluated, it is likely that some aspects of the algorithm and scoring system will change between APCA versions.</p><p><br></p><p>More info&nbsp;<a href=\"https://github.com/Myndex/SAPC-APCA/blob/master/WhyAPCA.md\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">here</a></p><p><br></p><h2>Using the plugin</h2><p>You can change the input colors manually using the text inputs or you can use <em>selection mode. </em></p><p><br></p><p>Selection mode lets you select colors by clicking around your document.<em> </em>To toggle selection mode, click the icons above the text inputs.</p><p><br></p><p><strong>Font Size Table</strong></p><p>Shows the preferred font size for each font weight at the current contrast level.</p><p><br></p><p><strong>Comparison Table</strong></p><p>Compares the APCA contrast to WCAG 2</p><p><br></p><p><strong>Info</strong></p><p>More info on what exactly each APCA level means.</p><p><br></p><p><br></p><p><strong>V1.0</strong></p><p>If you are looking for the v1.0 tutorial, you can find that here:</p><p><a href=\"https://medium.com/@danhollick/figma-plugin-tutorial-1-6-65fc2102506\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://medium.com/@danhollick/figma-plugin-tutorial-1-6-65fc2102506</a></p><p>or here:</p><p><a href=\"https://alcohollick.com/writing/figma-plugin-tutorial-1-6/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://alcohollick.com/writing/figma-plugin-tutorial-1-6/</a></p><p><br></p><h2>Bugs? Suggestions?</h2><p>Zebra is completely open source and the repo is <a href=\"https://github.com/danhollick/zebra\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">here</a>. Feel free to make an issue or start a discussion.</p>","id":"806578669827234193","installCount":2787,"lastUpdateDate":"2022-01-05T14:59:27.788Z","likeCount":89,"name":"zebra","publisherHandle":"danhollick","publisherId":"10448","publisherName":"Daniel Hollick","runCount":2144,"viewCount":4429},{"description":"CoolHue is the coolest handpicked gradient palette with 60+ ready to use gradients for your next amazing thing.\n\nYou can either use a gradient by a single click from the CoolHue palette or generate a new randomized gradient on the fly.","id":"807561639084281386","installCount":25224,"lastUpdateDate":"2020-03-06T11:00:29.084Z","likeCount":276,"name":"CoolHue - Gradient Color Palette","publisherHandle":"webkuldesign","publisherId":"862263308881938676","publisherName":"Webkul Design","runCount":19493,"viewCount":32001},{"description":"Generate rating stars for your designs in no time!\nCreate half star ratings or even 0.X star ratings without fiddling around to get that exact percentage.\n\nThe days are over when you had to manually create your star rating, Star Maker - Your wish has just came true ;)","id":"807668032497690174","installCount":5779,"lastUpdateDate":"2020-02-10T16:54:28.272Z","likeCount":70,"name":"Star Maker","publisherHandle":"340418","publisherId":"340418","publisherName":"roman rast","runCount":4685,"viewCount":8298},{"description":"Resize frames from an anchor point, without resize the child layers and change the constraints setting.\n\nTIPS:\n\n- Use ↑↓ to nudge the layer size.  Use ⇧+ ↑↓ to nudge by 10.\n- Presets are save in document.\n- Apply a preset to layer or user ⇧+ ↑↓ to nudge size, the layer will round to pixel.","id":"807879270674045537","installCount":11526,"lastUpdateDate":"2020-03-28T11:55:02.186Z","likeCount":195,"name":"Frame Resizer","publisherHandle":"ashung","publisherId":"56497","publisherName":"Ashung Hung","runCount":6024,"viewCount":8819},{"description":"<h1>Write, paste, and apply CSS</h1><p>Select node/nodes to apply .fromCSS styles. After plugin relaunch .fromCSS block will be blank.</p><p>Write your notes below .fromCSS block. Notes will be saved in the same place after plugin, project or even Figma relaunch.</p><p><br></p><h2>Use cases</h2><ul><li>Apply CSS from different generators like: <a href=\"https://neumorphism.io/\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">https://neumorphism.io/</a>, <a href=\"https://brumm.af/shadows\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">https://brumm.af/shadows</a>, <a href=\"https://www.cssmatic.com/box-shadow\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">https://www.cssmatic.com/box-shadow</a></li><li>Get rid of manual adding effects from CSS.</li><li>Save CSS notes to reuse in the project.</li><li>Edit node properties fast</li></ul><p><br></p><h2>How it works</h2><ul><li>You can select a node or nodes before or after the plugin is launched. When you change the selection styles from the block .fromCSS will be applied immediately.</li><li>Block .fromCSS must be the first. The name can be changed.</li><li>When applying styles for effects and backgrounds, the plugin looks for conflicts and removes only effects and fills with the same type as you have in CSS, while all the others remain unchanged. Conflicts are searched individually for each selected node.</li><li>If you add something inside the plugin, you will see changes, and if you decide to delete something via plugin nothing will happen, this is due to the specifics of the plugin: quickly add with removing conflicts, but do not replace the functionality of standard controls in Figma.</li></ul><p><br></p><h2>What is supported (the rest is ignored by the plugin)</h2><ul><li>width</li><li>height</li><li>opacity</li><li>mix-blend-mode</li><li>border-radius</li><li>background</li><li>background-color</li><li>background-blend-mode</li><li>box-shadow</li><li>backdrop-filter: blur()</li><li>transform: rotate()</li><li>filter: blur()</li><li>color</li><li>font-size: px, rem, em, %</li><li>line-height: px, rem, em, %, and unitless shorthand</li><li>text-align</li><li>text-decoration: except overline</li><li>text-transform</li><li>text-shadow</li></ul><p><br></p><h2>Future releases</h2><p>Borders, Background images: images, gradients(I'm in search of a good parser for the last one).</p><p><br></p><h2><strong>Demonstration</strong></h2><p><a href=\"https://youtu.be/zVazGBugYpA\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">https://youtu.be/zVazGBugYpA</a></p><p><br></p><h2>Contributors</h2><p><strong>Jamil Lazarev</strong>&nbsp;🇦🇿: Plugin creator and maintainer</p><p><a href=\"https://twitter.com/jamillazarev\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">Twitter</a> | <a href=\"https://github.com/jamillazarev\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">Github</a> | <a href=\"https://gum.co/fromCSS\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">Donate</a></p><p><strong>Tait Brown</strong>&nbsp;🇦🇺: Added font support</p><p><a href=\"https://twitter.com/taitems\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">Twitter</a> | <a href=\"https://github.com/taitems\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">Github</a></p>","id":"807925991544813159","installCount":3474,"lastUpdateDate":"2021-01-13T13:41:03.906Z","likeCount":41,"name":"fromCSS","publisherHandle":"jamillazarev","publisherId":"90866","publisherName":"Jamil Lazarev","runCount":2708,"viewCount":5290},{"description":"With AssetSheet, you can easily create a sheet of all selected components on the current page. Sync those sheets to Zeplin or any other inspection tool to give developers access to all assets they need nicely organized in a single frame.\n\nHow to use it\n\n1. Go to the page you want to create a sheet for\nActivate Asset Sheet\n2. Set element and frame padding\n3. Create the sheet (You can either create a sheet from a selection of components or all components on the page)\n\nFeatures\n\n✅ Organize all components in a single Frame\n✅ Either create the sheet from component instances or master components\n✅ Automatically create slices for each end every component\n✅ Works with different sized components\n✅ Adjust the spacing between elements and frame padding","id":"807937980249594473","installCount":1958,"lastUpdateDate":"2020-10-15T18:43:09.242Z","likeCount":60,"name":"AssetSheet","publisherHandle":"schurigeln","publisherId":"1032","publisherName":"Christian Konrad","runCount":1238,"viewCount":4305},{"description":"<p>Scale your layers (any layer!) to a specificed width, height or scale value including all properties (strokes, etc). Imagine the scale tool (K) with the power of the properties panel (specify width, height or scale value).</p><p><br></p><p>When to use:</p><p>Scaling up instances of icons or other layers to a specified width or height (like you would in the properties panel).</p><p><br></p><p><s>Currently Skale only works on instances of components, not on the master component itself. In future releases we'll hopefully see Skale working across all layers.</s></p><p><strong>NEW! Works with all layers, not just component instances!</strong></p>","id":"808289809557716614","installCount":10626,"lastUpdateDate":"2020-11-25T14:37:38.375Z","likeCount":220,"name":"skale","publisherHandle":"jsx","publisherId":"389","publisherName":"Jan Six","runCount":8849,"viewCount":10638},{"description":"<p>Provides that can toggle light/dark color.</p><p>You can specify your favor ColorStyle which contains “Dark\"(\"dark\"), “Light”(\"light\") or “Elevated”(\"elevated\") key.</p><ul><li><code>Background/Dark/Primary</code>&nbsp;👉&nbsp;<code>Background/Light/Primary</code></li><li><code>Background/Light/Primary</code>&nbsp;👉&nbsp;<code>Background/Elevated/Primary</code></li><li><code>Background Primary (Light)`</code>👉<code> `Background Primary (Dark)</code></li></ul><p><br></p><p><strong>Notice: </strong>The style names before and after 'dark' and 'light' should be set to be the same.</p><p><br></p><h2>Usage</h2><p>Select Frame, then choose 'Dark Mode Switcher' → 'Dark mode' / 'Elevated Dark mode' / 'Light mode'.</p><h2><br></h2><h1>NOTE: For Team Library Supports</h1><p>After version 10, we finally start to support Team Library(formally known as DesignSystem). It needs some \"hack\"s for your project.</p><h3><br></h3><h2>Usage</h2><ol><li>Open your DesignSystem edit page which has defined colors</li><li>Choose 'Dark Mode Switcher' → 'Save colorStyles from Team Library'</li><li>Return to your file and run Switcher as the basic usage&nbsp;🎉</li></ol><p><br></p><p>Repository: <a href=\"https://github.com/rei-suzuki/figma-dark-mode-switcher\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">https://github.com/rei-suzuki/figma-dark-mode-switcher</a></p><h2><br></h2>","id":"808916768872750785","installCount":7198,"lastUpdateDate":"2021-03-05T08:39:34.491Z","likeCount":122,"name":"Dark Mode Switcher","publisherHandle":"rei_suzuki","publisherId":"277","publisherName":"Rei Suzuki","runCount":7067,"viewCount":28317},{"description":"<p>The Purpose</p><p>I think we all know that sometimes designers making different spacings between the elements. In some cases, we have 15px spacing, and in another place, 14px. It's hard always to update all these spacings manually.</p><p><br></p><p>With the help of auto layout, we can resolve this problem. Just turn on the auto layout feature with zero spacing between the elements and use \"spacers\" between.</p><p><br></p><p>There are different ways, but I prefer to use the 8-Point Grid System. You can use premade \"spacers\" from the public library (<a href=\"https://www.figma.com/c/file/809152234949654615/Spacings\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">https://www.figma.com/c/file/809152234949654615/Spacings</a>) and place them between the elements. In that case, you will make sure that the spacings between the components are consistent.</p><p><br></p><p>How it works</p><p>Add the library <a href=\"https://www.figma.com/c/file/809152234949654615/Spacings\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">https://www.figma.com/c/file/809152234949654615/Spacings</a> or have own symbols that have \"$spacing\" word in the name;</p><p>Use them when needed</p><p>If you want to hide them, select a parent frame and run the plugin. It will look for all spacers that were used on the frame and will set zero opacity</p><p>If you want to show spacers back, just rerun the plugin. If the first spacer on the row will have zero opacity, it will set 100% for all spacers found on the selected frame.</p><p><br></p><p>Pro tip</p><p>You can use smart spacing prediction feature! Here is how it works <a href=\"https://twitter.com/faridsabitov/status/1281697269948067845\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">https://twitter.com/faridsabitov/status/1281697269948067845</a></p><p><br></p><p>Pro tip</p><p>You can set \"cmd\"+\"option\"+\"H\" hotkey via system preferences in Mac to toggle spacers visibility quickly. You can read more about setting the hotkeys in Figma here: <a href=\"https://hustle.bizongo.in/custom-shortcuts-for-figma-8c93f3bc9ca2\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">https://hustle.bizongo.in/custom-shortcuts-for-figma-8c93f3bc9ca2</a></p>","id":"809099681305129697","installCount":10026,"lastUpdateDate":"2021-03-11T06:39:31.347Z","likeCount":270,"name":"Spacing Manager","publisherHandle":"sabitov","publisherId":"1820","publisherName":"Farid Sabitov","runCount":7378,"viewCount":22744},{"description":"A Figma's plugin to create a config for  tailwindcss from Local styles of Figma.","id":"809138746390300395","installCount":1029,"lastUpdateDate":"2020-03-01T19:17:24.420Z","likeCount":12,"name":"@nju33/tailwindcss","publisherHandle":"742127","publisherId":"742127","publisherName":"nju33","runCount":775,"viewCount":2209},{"description":"Simplifies vector paths by automatically reducing and rearranging their line segments. \n\nSelect one or more vector paths you want to  simplify and run the plugin — it will  simplify the selected paths and they will look smoother.\n\nThe plugin uses De Casteljau's algorithm to rasterize the vector paths first, and then applies Ramer–Douglas–Peucker algorithm to simplify them.\n\nSources can be found at: https://github.com/zserge/figma-simplify-path","id":"809139536998662893","installCount":16954,"lastUpdateDate":"2020-03-24T06:10:33.958Z","likeCount":164,"name":"Simplify","publisherHandle":"1569774","publisherId":"1569774","publisherName":"Serge Zaitsev","runCount":11749,"viewCount":16408},{"description":"Главред помогает сделать текст коротким, понятным и честным. Это полезно в тексте для сайтов, блогов, профессиональной литературы, СМИ и рекламе. \n\nВставьте текст и дайте Главреду подумать. В хорошем тексте Главред выделит 1 – 2 слова на абзац, в плохом красным будет всё. Изучите рекомендации и отредактируйте текст.\n\nGlvrd helps to find problems in Russian-language texts: fillers, journalese, and corporate jargon.\n\n⚠️ Only Russian is supported\n\nwww.glvrd.ru","id":"809356678361041668","installCount":6377,"lastUpdateDate":"2020-02-17T15:03:20.643Z","likeCount":164,"name":"Главред","publisherHandle":"kir_fesenko","publisherId":"215936","publisherName":"Kir Fesenko","runCount":3379,"viewCount":4847},{"description":"<p>The Design System Middleware that allows you to manage, import, convert and sync graphical assets or icons directly from Figma into your application code.</p><p><br></p><p>Direct export options</p><p>(Export 50 icons for free - no subscription required)</p><p>----------------------------------------</p><p>• React (.js)</p><p>• Vue (.js)</p><p>• Angular (.js)</p><p>• Meteor (.html)</p><p>• ReactNative (.js)</p><p>• Android (.xml)</p><p>• iOS (.pdf)</p><p>• Icon Font (.ttf)</p><p>• Vector Graphic (.svg) (minified)</p><p>• CSS Sprite (.svg)</p><p>• ICO (.ico)</p><p>• EPS (.eps)</p><p>• Portable Document (.pdf)</p><p><br></p><p>Build a custom component (with subscription)</p><p>----------------------------------------</p><p>Upload custom code and set a file type of choice to then be able to export icons based on your template.</p><p><br></p><p>Updating boards (with subscription)</p><p>----------------------------------------</p><p>Push updates or changes to an existing or new <a href=\"http://icanicon.io\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">icanicon.io</a> board to enable team-wide access, the API, and the sync command.</p><p><br></p><p>How to use the plugin</p><p>----------------------------------------</p><p>• Select all icons you would like to export, choose an export option and click the export button.</p><p><br></p><p>Good to know</p><p>----------------------------------------</p><p>• You can download a template in case you are uncertain about the structure: <a href=\"https://icanicon.io/syncing-figma-files\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">https://icanicon.io/syncing-figma-files</a></p><p>• Avoid including mockups, more complex components, or other elements that are not meant to be icons in your export file.</p><p>• Choose your file naming-convention wisely as these names might carry over to your codebase.</p><p><br></p><p>Other features (with subscription)</p><p>----------------------------------------</p><p>• NPM Command: In your icon directory execute our ii-client command to sync your assets locally</p><p>• API Access: Use your token to fetch any icon, segment, or board</p><p>• File-less Rendering: This opens up the possibility of integrating your icons without the need for handling files at all.</p><p><br></p><p>Thanks, and enjoy it!</p><p>Your Sugarcode Team</p>","id":"809358159653472005","installCount":10888,"lastUpdateDate":"2020-10-13T06:39:01.742Z","likeCount":85,"name":"Icons → Code","publisherHandle":"sugarcode","publisherId":"222","publisherName":"Sugarcode","runCount":11519,"viewCount":18716},{"description":"<p><a href=\"https://www.frontitude.com/?utm_source=figma_plugin_page\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Frontitude</a> is the new way for leading design and product teams to collaborate on their UX copy with a single source of truth, from design to production.</p><p><br></p><p><strong>With Frontitude you’ll be able to:</strong></p><p>⭐&nbsp;Collaborate efficiently with writers, designers, PMs, and other stakeholders</p><p>⭐&nbsp;Document every copy-related decision made during the design process</p><p>⭐&nbsp;Create a consistent library of copy components that can be reused in the design by everyone on your team</p><p>⭐&nbsp;Keep your designs always up to date with the latest copy in a click of a button</p><p>⭐&nbsp;Localize your product copy with in-context editing experience and automated developer handoff</p><p><br></p><p><strong>Getting started with Frontitude:</strong></p><p>Click the <strong>Install</strong> button at the top-right corner of this page, open any Figma file you want to collaborate on, and open the Frontitude plugin to get started!</p><p>Follow our <a href=\"https://www.frontitude.com/guides?utm_source=figma_plugin_page\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">help guides</a> for more instructions on how to set up your Frontitude workspace.</p><p><br></p><p><strong>Introducing our latest features:</strong></p><p>✨ <strong>Multi-Language Support</strong> enables you to export designs to translators in a dedicated sandbox where they can edit translations in context to deliver localized products faster. <a href=\"https://www.frontitude.com/blog/introducing-frontitudes-multi-language-support?utm_source=figma_plugin_page\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Learn more</a></p><p>✨&nbsp;<strong>Copy Library</strong> gives you an organized space for all your product copy and allows you to easily <a href=\"https://www.frontitude.com/guides/reuse-existing-copy-inside-figma-across-all-of-your-files?utm_source=figma_plugin_page\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">reuse approved copy</a> inside Figma across your design files.</p><p>✨&nbsp;<strong>Copy Components</strong> allows you to group copy into reusable components and enjoy faster, more consistent editing with less copy-and-paste. <a href=\"https://frontitude.com/blog/introducing-copy-components?utm_source=figma_plugin_page\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Learn more</a></p><p><br></p><p><strong>Contact us!</strong> 👋</p><p>We are happy to hear from you regarding any matter, whether it’s a bug, feature, or any kind of feedback. Feel free to contact us at <a href=\"mailto:hi@frontitude.com.\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">hi@frontitude.com.</a></p><p>For more information, visit us at <a href=\"https://www.frontitude.com/?utm_source=figma_plugin_page\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">www.frontitude.com.</a></p>","id":"809843676692807511","installCount":5271,"lastUpdateDate":"2022-06-30T08:36:03.634Z","likeCount":231,"name":"Frontitude • UX copy management","publisherHandle":"copy","publisherId":"3374118","publisherName":"Frontitude","runCount":4171,"viewCount":15420},{"description":"<p>Lottie animations for your designs.</p><p><br></p><p><strong>With the LottieFiles plugin for Figma you can:</strong></p><p><br></p><p>• Drag and drop your very own dotLottie (.lottie) and Lottie JSON (.json) files</p><p>• Access a library of 1000s of free Lottie animations.</p><p>• Access all your animations previewed on LottieFiles</p><p>• Insert animation frames as high quality SVGs</p><p>• Insert Lotties as GIF animations</p><p><br></p><p><strong>How to use the LottieFiles plugin for Figma:</strong></p><p><br></p><p>Add a Lottie animation as a GIF:</p><p><br></p><p>1. Drag and drop your Lottie or select a free one from the LottieFiles library</p><p>2. Select the background color you want for your GIF</p><p>3. Click ‘Convert to GIF’</p><p>4. After the Lottie has been converted, click “Add to Figma’</p><p>5. Use ‘Prototype’ to watch your designs in action.</p><p><br></p><p>Add a high quality SVG animation layer:</p><p><br></p><p>1. Drag and drop your Lottie or select a free one from the LottieFiles library</p><p>2. Using the player bar, select the animation frame you want to insert</p><p>3. Click ‘Insert as SVG’</p><p><br></p><p>Now go forth and create!</p><p><br></p><p><strong>Let’s get talking</strong></p><p>Got some ideas for us? Send them our way <a href=\"mailto:support@lottiefiles.com\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">support@lottiefiles.com</a></p><p><br></p><p>Or join in the conversation with the LottieFiles community at <a href=\"https://lottiefiles.com/discuss\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://lottiefiles.com/discuss</a></p><p><br></p><p><a href=\"http://Lottiefiles.com\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Lottiefiles.com</a></p><p><br></p><p>LottieFiles is by Design Barn Inc.</p><p>Copyright © 2020 Design Barn Inc. All rights reserved.</p>","id":"809860933081065308","installCount":219220,"lastUpdateDate":"2022-07-01T18:45:01.145Z","likeCount":2295,"name":"LottieFiles","publisherHandle":"lottiefiles","publisherId":"1775","publisherName":"LottieFiles","runCount":174413,"viewCount":215040},{"description":"<p>Create beautiful neumorphistic designs in just a few seconds. Just select anything you would like to \"neumorph\", open the plugin and boom. It adds shadows and gradient fills to your selection, which you can customize to your needs.</p><p><br></p><p>Some <strong>cool live-examples</strong> of neumorphism on the web:</p><ul><li><a href=\"https://www.productdesignresources.com/\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">productdesignresources.com</a></li><li><a href=\"https://icons.theforgesmith.com/\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">icons.theforgesmith.com</a></li><li><a href=\"https://shape.so\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">shape.so</a></li></ul><p><br></p><h2><strong>What is neumorphism?</strong></h2><p>It's a UI trend which is using multiple shadows and gradients to \"fake\" light and to bring back a more natural and realistic look and feel. Kind of like skeuomorphism in iOS back in 2007. Read more about it here: <a href=\"https://uxdesign.cc/neumorphism-in-user-interfaces-b47cef3bf3a6\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">https://uxdesign.cc/neumorphism-in-user-interfaces-b47cef3bf3a6</a></p><p><br></p><h2>A few tips how to create beautiful neumorphic designs:</h2><ul><li>The background layer and the layer you are \"neumorphing\" should have the<strong> same color</strong>.</li><li>If you neumorph' text, be sure to also have it the same color, open the plugin, and when you're done, you can change the text color to a darker one, for better readability.</li><li><strong>Neumorphism doesn't work on pure white or pure black</strong>, because it adds shadows that are darker / brighter than the background/current selection fill. If you use pure white or black, it will miss one of the shadows and it won't feel \"neumorphistic\" anymore. I'll suggest to take a kind of bluish tint of white / black.</li></ul><p><br></p><p>—</p><p><br></p><p>Thank you very much for the kind help for the color calculation-algorithm from Adam, he built the site <a href=\"https://neumorphism.io/\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">https://neumorphism.io/</a> on which you can generate neumorphic CSS shadows. Check it out! 🤗</p><p><br></p><h2>Feature requests? 😊 Questions?</h2><p>Just hit me on Twitter (@madebyfabian), via mail (<a href=\"mailto:hello@madebyfabian.com\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">hello@madebyfabian.com</a>) or via an Issue on GitHub.</p><p><br></p><p>—</p><p><br></p><p>Made with ❤️ by Fabian B. in Nuremberg, Germany. Want to support me? Would appreciate that very much! <a href=\"http://buymeacoff.ee/madebyfabian\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">http://buymeacoff.ee/madebyfabian</a></p>","id":"810863251895788520","installCount":40751,"lastUpdateDate":"2020-10-10T14:01:26.917Z","likeCount":458,"name":"Neumorphism","publisherHandle":"f","publisherId":"358726","publisherName":"Fabian B.","runCount":31466,"viewCount":28606},{"description":"Switor is easier way to change theme in your project.\nIt's now supporting local and global styles.\n\nIf you use local style in your project, just make new palette of theme and change it when you whant.\n\nTo use global styles, add all of themes in plugin and select what you want after in your project.\n\nMore information how its work find on youtube:\n\nHow to use global styles\nhttps://youtu.be/9DiGDjLFknE\n\nHow to use local styles\nhttps://youtu.be/EOnxfLtHccI\n\nP.S. If you find a mistake or have a good idea how to make plugin better feel free to text me on facebook.","id":"811288323820451882","installCount":2014,"lastUpdateDate":"2020-07-29T09:31:15.408Z","likeCount":83,"name":"Switor","publisherHandle":"andexds","publisherId":"135278","publisherName":"Anashkin Andrey","runCount":1878,"viewCount":5574},{"description":"<p>blokdots is a simple to use software to build interactive hardware prototypes without a line of code.</p><p><br></p><p>With this plugin you can connect Figma to the blokdots app (--&gt; download at <a href=\"http://blokdots.com\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">blokdots.com</a>), making it possible to use hardware components like sensors and buttons to control and manipulate elements right in Figma. This means it is now possible to bridge the gap between hardware and UI prototypes!</p><p><br></p><p>— What you can do</p><p>You can use hardware components to set the text, color, size, rotation or position of Figma layers and map the values of your sensors to the color, size, rotation or position of a layer.</p><p><br></p><p>— How to use the Plugin</p><p>While the blokdots app is running, run the plugin and select the layer you want to be able to manipulate with your hardware prototype. Then press the “Expose to blokdots” button.</p><p><br></p><p>[Make sure to enable the Figma integration in blokdots – Go to settings and toggle “Figma Integration” on. It’s located under “Experimental Features”.]</p><p><br></p><p>You can now select “Figma” as a component in any card in blokdots, select one of the layers you exposed and define how it should respond.</p><p><br></p><p>When you run your project in blokdots, make sure the blokdots plugin in Figma is running as well. blokdots and Figma will connect automatically and you can now manipulate Figma layers right from your hardware prototype!</p><p><br></p><p>— Requirements</p><p>To use this plugin you need to …</p><p>• have the latest version of the blokdots app installed and running --&gt; download at <a href=\"http://blokdots.com\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">blokdots.com</a></p><p>• have an Arduino microcontroller set up</p><p>• use the Figma Desktop version</p>","id":"811313138255168556","installCount":1029,"lastUpdateDate":"2022-05-01T21:03:33.736Z","likeCount":60,"name":"blokdots","publisherHandle":"blokdots","publisherId":"130","publisherName":"blokdots","runCount":676,"viewCount":2417},{"description":"<h1>For those who luve using HSLuv</h1><p>HSLuv is a human-friendly alternative to HSL.</p><p>Original idea, JavaScript implementation – <a href=\"https://twitter.com/boronine\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">Alexei Boronine</a>.</p><p><br></p><h2>How it works</h2><ul><li>Use plugin as a color picker or editor for the node's existing colors.</li><li>Select the node whose colors you want to edit, then select the desired color from the list on the right.</li><li>If you have updated the node, click update colors.</li><li>You can also copy colors by clicking on the swatch block at the bottom.</li></ul><p><br></p><h2>Learn more</h2><p><a href=\"https://www.hsluv.org/\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">https://www.hsluv.org/</a></p><p><br></p><h2>Demonstration</h2><p><a href=\"https://youtu.be/w5FdT275bOI\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">https://youtu.be/w5FdT275bOI</a></p>","id":"811341846366740536","installCount":1461,"lastUpdateDate":"2021-09-14T06:56:02.612Z","likeCount":28,"name":"HSLuve","publisherHandle":"jamillazarev","publisherId":"90866","publisherName":"Jamil Lazarev","runCount":1143,"viewCount":2427},{"description":"<p>What it is?</p><p>Frame Status is a simple plugin used to indicate the status of a screen of a project.</p><p><br></p><p>Why?</p><p>We try to help thousands of collaborative teams with this simple plugin, we are one of those teams and we can help others. Frame Status indicates the state of a screen on the project. For example: as a designer, you need to indicate the state of your work for your team, stakeholders and clients.</p><p><br></p><p>How to use?</p><p>Select a frame &gt; Navigate to the Plugins menu &gt; Select Frames Status and them &gt; Select the status of your frame.</p><p><br></p><p>Tips</p><p>- You can select multiple frames at once. Each frame will get its own status badge.</p><p>- Use the keyboard shortcut to quickly set a status: hit `cmd /` in Mac and `ctrl /` on Windows, type a Status (e.g. “Done”) and hit return.</p><p><br></p><p>Frame Status is open source, feel free to contribute or to send suggestions: <a href=\"https://github.com/hecvr/status-for-figma.\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">https://github.com/hecvr/status-for-figma.</a></p>","id":"811381661295562811","installCount":3055,"lastUpdateDate":"2020-03-15T22:55:54.678Z","likeCount":114,"name":"Frame Status","publisherHandle":"hecvasro","publisherId":"2802521","publisherName":"Héctor Vásquez","runCount":2812,"viewCount":4903},{"description":"It can be a problem to draw a progress bar with an actual size of 100px or similar. But what if you need to visualize 240 of 800 with an actual size of 120px? What width should the progress bar be?

\n\nWell, Now It’s Easy!

\n\nHOW TO ADD A PROGRESS BAR
\n1. Run the plugin
\n2. Set your ratio
\n3. You’re Done

\n\nHOW TO EDIT THE PROGRESS BAR
\n1. Select the progress bar (Frame)\n
2. Change the values
\n3. You’re Done

\n\nHOW IT WORKS
\nThe plugin creates one Frame that’s the max-width, and one Rectangular inside — calculated percent. The Frame will have the name Progress Bar [75:100] Do Not rename it manually if you want to edit the ratio later on with auto-fill values.

\n\nYou can change the style and size that works best for you — editing will only change the Rectangular width.","id":"811556645239532627","installCount":2960,"lastUpdateDate":"2020-05-12T07:23:36.152Z","likeCount":36,"name":"Progressbar Ratio","publisherHandle":"rooslan","publisherId":"17523","publisherName":"Ruslan","runCount":2463,"viewCount":3869},{"description":"Your friendly portable mini web browser.\n\nFrameBrowser lets you have a browser window open inside of Figma. Handy if you need to embed content, do live previewing, or checking in with third-party services like Miro, Mural or InVision.\n\nContent not loading? Please note that many sites don't allow embedding their content in iframes. This is something set in their server headers and is nothing you or I can do anything about. You will simply get a blank screen if that happens.\n\nUsing FrameBrowser\n- In Figma, under Plugins, click FrameBrowser\n- Give FrameBrowser a URL (it will replace HTTP with HTTPS, and will add HTTPS if it's missing from URL)\n- If you'd like, you can specify the dimensions of the window (minimum 200px and maximum 2560px)\n- Note: FrameBrowser will respect your height value but always adds a tiny bit for the settings selector button on top\n- Click Run, and it should load!\n- Use the settings button to change URL if needed","id":"811584448670697561","installCount":3743,"lastUpdateDate":"2020-02-28T19:20:02.647Z","likeCount":55,"name":"FrameBrowser","publisherHandle":"MikaelVesavuori","publisherId":"86803","publisherName":"Mikael Vesavuori","runCount":4015,"viewCount":7387},{"description":"Focus CSS makes viewing CSS in Figma more convenient and helps you spot inconsistent styling.\n\nKey features:\n1. Generate CSS for all elements in a frame, page, selection or for all elements in the whole document.\n2. Hide CSS properties you don't want to copy to your project's CSS code.\n3. Spot styling errors by viewing only unique values for specific CSS properties.\n4. Filter CSS by layer type to, for example, show only the CSS for text layers in a selected frame.\n\nThis is a plugin I imagined being useful while working with Figma as a web developer. Please do not hesitate to get in touch if you have any feedback!","id":"811977401825396882","installCount":3117,"lastUpdateDate":"2020-04-24T16:01:13.189Z","likeCount":63,"name":"Focus CSS","publisherHandle":"viestursm","publisherId":"1150298","publisherName":"Viesturs Marnauza","runCount":1776,"viewCount":2932},{"description":"<p>Easily import 100s of colors at once.</p><p><br></p><p>Whether you quickly want to test out different colors from your favorite color palette generator or if you have a large file that contains a lot of color styles you want to extract.</p><p><br></p><p>This plugin is able to do it all.</p><p><br></p><p>If you want to re-use the colors in your designs, there's an option to create color styles.</p><p><br></p><p>Supported color formats:</p><p><br></p><p>-&gt; HEX</p><p>6-Digit &amp; 3-digit hex codes are supported. Make sure there's a hashtag at the start of your hex code.</p><p>Examples: #FFFFFF, #000</p><p><br></p><p>-&gt; RGB(A)</p><p>Both rgb and rgba are supported. Make sure your color starts with rgb or rgba.</p><p>Examples: rgb(50%,30%,10%), rgba(123,212,76,0.3)</p><p><br></p><p>See what kind of files you can throw at it, and let me know if something isn't working. If you find any issues, or if you have ideas for extra features you'd like to see, send me a message :)</p>","id":"812052673949669543","installCount":3128,"lastUpdateDate":"2020-03-10T21:39:02.216Z","likeCount":75,"name":"Color import","publisherHandle":"maarten","publisherId":"14067","publisherName":"Maarten Corpel","runCount":2290,"viewCount":6888},{"description":"Worked for too long? Needing a break? Unwind with a classic!\n\nBringing the retro game we all love into Figma, Snake!\n\nHow to Play:\n\nControl the wriggly being with either \"W+A+S+D\" or Arrow Keys and grow it by feeding it with food. Yums~\n\nAs they all say, the longer the better, or is it?\n\nIn any case, when the game ends just press \"ENTER\" on the keyboard or click the \"RESTART\" button to respawn and beat your best score!","id":"812994090875519300","installCount":566,"lastUpdateDate":"2020-04-14T15:57:30.983Z","likeCount":17,"name":"Retro Snake","publisherHandle":"stevahnes","publisherId":"69","publisherName":"Stevanus Satria","runCount":332,"viewCount":915},{"description":"Add syntax highlighted text to your Figma projects.\n\nYou can type or paste text into the text editor, or select a text node and start the plugin to put the selected text into the editor for you. \n\nCurrently supports syntax highlighting for JS, CSS, and HTML in 10 different themes.","id":"813202494980519259","installCount":2156,"lastUpdateDate":"2020-05-01T20:21:57.032Z","likeCount":33,"name":"Highlighter","publisherHandle":"jhardy","publisherId":"194293","publisherName":"Jared","runCount":2056,"viewCount":6249},{"description":"Simply select any layer with a solid fill and run the plugin to copy its color value.\n\nSupported Formats:\n- RGB\n- Hex\n- HSL\n- HSV\nNote: Hex color doesn't support transparency. Semi-transparent colors are copied as if they were fully opaque.\n\nChoose which format(s) to copy by opening Preferences from the plugin menu. If you select multiple formats, they'll be on separate lines when you paste the value. Preferences are saved to the file so that you can your collaborators are speaking the same language.\n\nThis plugin was is open source: https://github.com/jtini/color-copier. Please feel free to suggest improvements!","id":"813532964638530954","installCount":929,"lastUpdateDate":"2020-02-28T19:41:58.162Z","likeCount":17,"name":"Color Copier","publisherHandle":"tinyeahno","publisherId":"60794","publisherName":"Jeremy Tinianow","runCount":683,"viewCount":1450},{"description":"<p>List, browse, and create instance your team library (and local) components.</p><p><br></p><p>🔥 What you can:</p><p><br></p><p>- List and browse your team library components.</p><p>- Create instance of conponent from this plugin.</p><p>- Swap the instance and selection(s).</p><p>- Keep the size and layout of selection when you swap.</p><p><br></p><p>👉 How to use Team Library Component Browser:</p><p><br></p><p>1. Open this plugin in library what you want to list.</p><p>2. Go to Setting tab in this plugin.</p><p>3. Click ‘Save or update this library data’ button to save all components data in library to this plugin.</p><p>4. Go back to your document and open this plugin.</p><p>5. Find components by searching or scrolling, then double-click or click \"Create\" button to insert instance into document.</p><p>6. Enjoy🏖</p><p><br></p><p>🖌 Notes:</p><p><br></p><p>Because of the specifications of Figma's API, we can't get team library data automatically.</p><p>So this plugin uses the figma.clientStorage API to store the library data on your machine.</p><p>To store library data in clientStorage, you need to run this plugin in your library.</p><p><br></p><p>📮 Support:</p><p><br></p><p>If you have any plobrem or feedback, please use the GitHub Issues.</p><p><a href=\"https://github.com/ryonakae/figma-plugin-team-library-component-browser/issues\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://github.com/ryonakae/figma-plugin-team-library-component-browser/issues</a></p><p><br></p><p>---</p><p><br></p><p>This plugin is made by Ryo Nakae 🙎‍♂️.</p><p><a href=\"https://brdr.jp\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://brdr.jp</a></p><p><a href=\"https://twitter.com/ryo_dg\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://twitter.com/ryo_dg</a></p><p><a href=\"https://github.com/ryonakae\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://github.com/ryonakae</a></p>","id":"813970431341620710","installCount":3297,"lastUpdateDate":"2022-01-18T08:00:45.555Z","likeCount":93,"name":"Team Library Component Browser","publisherHandle":"ryo_dg","publisherId":"828596","publisherName":"Ryo Nakae","runCount":3455,"viewCount":9944},{"description":"<h2>About</h2><p>Project Notes helps you keep your project organised with easy to access titles, footnotes and stickies for all your artboards.</p><p><br></p><h2>Using the Plugin</h2><p>Select one of the options from the plugin UI and it will automatically be added to your projects canvas.</p><p><br></p><p>For the <strong>Title </strong>and<strong> Footnote</strong> tools, you can either add them normally to the center of the canvas, or you can attach them to one or multiple frames. To do this, simple select the frames you wish to attach a title and/or footnote too and then click on the relevant option in the plugin UI and the new objects will appear above (title) or below (footnote) each or your selected frames. This is a great way to title and add notes to each of your frames.</p><p><br></p><p>For the <strong>Annotation</strong> and <strong>Sticky Note</strong> tools, you can just add them anywhere you want on your canvas and add as many as you want. They both use autolayout, so you can just type as much content as you need and the objects will resize vertically. If you need too, you can extend the width of them manually.</p><p><br></p><h2>New in version 10-12:</h2><ol><li>Reworked UI to accommodate different sized titles and footnotes.</li><li>The plugin no longer requires you to have pre selected elements on the canvas to add titles and footnotes.</li><li>I removed the title+footnote objects based on low usage numbers in favour of two individual tools.</li><li>Added autolayout to both the annotation and sticky tools.</li><li>The sticky notes now include your name in the bottom right.</li><li>Added a feedback link and some better logging to help me develop the plugin further.</li></ol><p><br></p><h2>Feedback</h2><p>If anyone has feedback on this plugin, please send to hello[at]stugreenham[dot]com 🤙🏼 or use the link in the plugin footer.</p>","id":"814117528089546244","installCount":5378,"lastUpdateDate":"2022-05-25T12:59:37.097Z","likeCount":85,"name":"Project Notes","publisherHandle":"stugreenham","publisherId":"93842","publisherName":"Stu Greenham","runCount":5621,"viewCount":10706},{"description":"<p>Save time exporting sets of SVGs by creating and assigning presets to optimize your exports. Works great for making icon libraries use clean and consistent SVG code. Optimization uses svgo (<a href=\"https://github.com/svg/svgo\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://github.com/svg/svgo</a>) under the hood.</p><p><br></p><ul><li>Reduce SVG file sizes</li><li>See how options affect the code and appearance of icons in real time</li><li>Use currentColor css property for icons that automatically inherit text color</li><li>Use layer names as classes</li><li>Create and manage presets for different types e.g. single color icons, illustrations, layers for animation</li><li>Export to a <code>.zip</code> file containing all of your selected layers</li><li>Anyone on your team can see and modify presets on a file</li></ul><p><br></p><h2>Comes with 3 pre-made presets</h2><ul><li><strong>Default</strong>: Just reduces file size, shouldn't break anything.</li><li><strong>Monochrome</strong>: Strips out all fills and strokes, uses currentColor as fill on the SVG element.</li><li><strong>Layer Names -&gt; Classes</strong>: Uses your layer names in Figma as classes in the SVG code.</li></ul><p><br></p><h2>Creating your own presets</h2><ul><li>Click <code>Edit presets</code></li><li>Click the plus button in the top right</li><li>Name and configure the options for your preset</li></ul><p><br></p><h2><strong>Sharing presets</strong></h2><p>By default, all presets on a file can be seen and used by anyone with access to the file. Presets are saved on the file, so don't carry across if you create or edit a different file. To keep your presets, click the <code>...</code> more icon in the presets panel and export your presets from one file, open up your new file, and choose the import presets option from the same menu.</p>","id":"814345141907543603","installCount":21456,"lastUpdateDate":"2022-04-27T06:04:50.626Z","likeCount":229,"name":"SVG Export","publisherHandle":"Hamish","publisherId":"555","publisherName":"Hamish","runCount":19240,"viewCount":46461},{"description":"<p>Miro is the online collaborative whiteboard platform that brings teams together, anytime, anywhere. Export frames from Figma onto a Miro board that's seamless for every team member to access and use ― making it simple to brainstorm and collaborate cross-functionally on your designs. Best of all, the ability to sync updates removes the hassle of updating content in multiple places.&nbsp;<a href=\"https://help.miro.com/hc/en-us/articles/4404440047378-Miro-plugin-for-Figma\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Click here to learn more</a>.</p>","id":"814814551050457760","installCount":45758,"lastUpdateDate":"2022-07-06T14:57:37.978Z","likeCount":564,"name":"Miro","publisherHandle":"miro_hq","publisherId":"991995802902115349","publisherName":"Miro","runCount":35458,"viewCount":105326},{"description":"Easily make as many as 5000 randomly placed circles, with your choice of colors.\n\nHow it works:\n- Once installed, run the Plugin(Fizzy)\n- Select a shape layer*\n- Add the number** of circles, as the quantity you want\n- Select minimum and the maximum diameter. All the circles made will be within this range\n- Select colors from the palette\n- When ready, click 'Fizzy it' and Boom! 🤗\n\nNOTE:\n* The shape layer like a rectangle or an ellipse you choose, will be used as a mask\n** It takes about 15 seconds to make 5000 circles","id":"815198915843098353","installCount":11334,"lastUpdateDate":"2020-03-06T14:36:28.794Z","likeCount":148,"name":"Fizzy","publisherHandle":"karandudeja","publisherId":"1884446","publisherName":"KaranDudeja","runCount":8465,"viewCount":21478},{"description":"<p>Easily create Tailwind-like color styles (100-900).</p><p><br></p><p>Color palettes can be created from scratch or be easily updated if the base name already exists.</p>","id":"815578663120885543","installCount":11926,"lastUpdateDate":"2020-03-18T15:46:25.275Z","likeCount":173,"name":"Tailwind Color Generator","publisherHandle":"sushi_dev","publisherId":"962243616224952958","publisherName":"Martin Reitschmied","runCount":8443,"viewCount":11899},{"description":"Make your team metrics focused! This plugin allows you to create, attach and update tracking annotations directly from your Figma file.\n\n• Communicate precisely with your developers what should be tracked \n• Make sure you track the right things and have a visual breakdown of your tracking\n• Know whether a tracking was implemented or not\n• Provide a visual context about your tracking to anyone in your team or company\n\n✨Take our interactive Figma tutorial\n→ http://bit.ly/TrackingTutorial ← \n\nTo start a tracking annotation ...\n1. Click on a layer, group, frame or component\n2. Add an annotation from the plugin menu by going to Plugins > Tracking > Create event.","id":"815605811994993448","installCount":2094,"lastUpdateDate":"2020-03-12T18:12:33.846Z","likeCount":92,"name":"Tracking","publisherHandle":"june","publisherId":"1013836","publisherName":"June","runCount":1246,"viewCount":6906},{"description":"This Plugin is when you create and set multiple color scheme automatically on Figma and get the color code for developer.\n\nAll you have do is to just decide only one main color.\n\n1. create 10 color variations automatically.\n\n2. Plugin add color variations to \"Color Styles(Local Colors)\" on Figma.\n\n3. Plugin create new page \"Colors\" and output SCSS code.\n\nMovie: https://twitter.com/Hidetaro7/status/1236094783132561408?s=20","id":"815841134222084922","installCount":5102,"lastUpdateDate":"2020-03-07T03:45:09.505Z","likeCount":61,"name":"Color Scheme","publisherHandle":"2435900","publisherId":"2435900","publisherName":"Hideki Akiba","runCount":4978,"viewCount":7574},{"description":"How-To Use:\n• Select the parent group of the table and launch the plugin\n   ‣ Plugin is capable of detecting if a valid GridGen table is selected\n   ‣ If selection is changed mid-way through plugin utilization, the last selected table is remembered\n• GridMod is capable of modifying:\n   ‣ The width or height of all columns/rows\n   ‣ The width or height of individual columns/rows\n• Once the necessary inputs are entered, click on \"Edit selected grid\"\n• GridMod will perform the modification, notify you, and remain open\n   ‣ This allows you to perform multiple edits consecutively without having to reopen GridMod\n• Supports both mouse and keyboard navigations:\n   ‣ \"Tab\" to go to next input\n   ‣ \"Shift + Tab\" to go to previous input\n   ‣ \"Arrow\" keys on textboxes to increase/decrease by 1\n   ‣ \"Shift + Arrow\" keys on textboxes to increaes/decrease by 10\n   ‣ \"Enter\" or \"Shift + M\" on \"Edit selected grid\" to execute the modification\n\nCurrent Capabilites:\n• Supports the following modifications of any GridGen-generated tables:\n   ‣ The width or height of all columns/rows\n   ‣ The width or height of individual columns/rows\n• Persistent UI allowing consecutive executions of various modifications\n• Enhanced UI experience with validations and loader\n\nWork-in-Progress:\n• Modification of GridGen-generated table headers\n\nOther feature suggestions are welcome!","id":"815889316898860859","installCount":1186,"lastUpdateDate":"2020-05-01T09:40:22.448Z","likeCount":16,"name":"GridMod | Modify GridGen Tables Effortlessly","publisherHandle":"stevahnes","publisherId":"69","publisherName":"Stevanus Satria","runCount":910,"viewCount":3144},{"description":"Easily delete multiple styles","id":"815922478078975807","installCount":1056,"lastUpdateDate":"2020-03-18T16:18:23.697Z","likeCount":20,"name":"Bulk delete styles","publisherHandle":"sushi_dev","publisherId":"962243616224952958","publisherName":"Martin Reitschmied","runCount":883,"viewCount":1878},{"description":"Make math shapes and curves.\n\nChoose from Polar Rose, Trigonometric functions, Polygons, Spirals of different kinds, Superellipse, Astroid and modify multiple parameters to get complex shapes with ease.\n\n- Make complex patterns with ease.\n- Control parameters to customize the math shape.\n- Many interesting math shapes to be added in future.\n\nFollow us on Twitter @mathscapes.\n\nKnown Issue\n- The vector path in the case of Trigonometric functions and Spirals connects the first and the last point. This edge may be manually deleted now. It'll be fixed soon.","id":"816329785694858088","installCount":31276,"lastUpdateDate":"2020-03-11T20:14:19.778Z","likeCount":409,"name":"Geometric","publisherHandle":"mathscapes","publisherId":"3089813","publisherName":"Mathscapes","runCount":25454,"viewCount":32267},{"description":"<p>Compare your Figma designs with real websites in the browser, using smart overlays.</p><p><br></p><h2>Features</h2><p><br></p><ul><li>Compare multiple Figma designs and URLs at the same time.</li><li>No user accounts or desktop apps required.</li><li>Transparency, split-screen, toggle, drag and diff overlays.</li><li>Optionally specify different website page URLs per Figma frame.</li><li>Light-weight <a href=\"https://chrome.google.com/webstore/detail/pixelay-for-figma/gnbafbeabkbkecmbedfgebgboicpnkpp\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Chrome Extension</a> enables comparing live websites.</li><li>Supports localhost using BrowerSync or Hot Module Reloading.</li><li>Built-in pixel ruler for measuring space differences in comparisons.</li><li>Get perfect web builds that match your Figma designs, every time.</li></ul><p><br></p><h2>To use Pixelay</h2><p><br></p><ol><li>Install Pixelay and run the plugin inside your page.</li><li>Select the frames you want to compare with your website.</li><li>Paste in the URL(s) you would like to compare your frames to.</li><li>Click the <strong>Upload Designs</strong> button.</li><li>Install the <a href=\"https://chrome.google.com/webstore/detail/pixelay-for-figma/gnbafbeabkbkecmbedfgebgboicpnkpp\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Chrome Extension</a> (to support production URLs).</li><li>Open your Pixelay web app URL in Chrome.</li></ol><p><br></p><h2><strong>Documentation &amp; Video Tutorials</strong></h2><p><br></p><p>For plugin/web app documentation and step by step video tutorials, visit <a href=\"https://docs.hypermatic.com/pixelay/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://docs.hypermatic.com/pixelay</a></p><p><br></p><h2><strong>Bug Reports</strong></h2><p><br></p><p>Pixelay is still a baby panda; if you notice any bugs, please get in touch via <a href=\"https://hypermatic.com/contact/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://hypermatic.com/contact</a> and we'll publish a fix as soon as possible.</p><p><br></p><h2>License</h2><p><br></p><p>After you've tried comparing Figma designs with Pixelay 10 times, you'll be asked to enter your license key. Your license key will allow you or your team to compare an unlimited amount of Figma designs using Pixelay.</p><p><br></p><p>To purchase a license or to find out more, please visit <a href=\"https://hypermatic.com/pixelay/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://hypermatic.com/pixelay</a></p>","id":"816424186244407164","installCount":4992,"lastUpdateDate":"2022-06-22T00:34:44.868Z","likeCount":123,"name":"Pixelay Compare Design to Web","publisherHandle":"hypermatic","publisherId":"247","publisherName":"Hypermatic","runCount":3533,"viewCount":12394},{"description":"Text Styles Added!\n\nMerge and link all color & text styles in the page:\n- Overall usage assessment\n- Group elements with the same appearance together\n- Merge and link to selected style\n- Select all elements with the style\n- Make all possible fix automatically with a single click\n\nThings to notice:\n\n-\"Generate Palette\" function is removed. Will consider adding it back by popular demand.\n- \"Auto Fix\" function will automatically link all elements with the same appearance to the most used style in the page.\n- Please remember to *rescan*  after you modified the file.\n- Fills/strokes with image fills are ignored.\n- Invisible nodes/ invisibile fill layers are ignored.\n\nFeatures to do in the next version:\n\n- Create local style for unlinked style\n- Performace improvement\n- Thumbnail of Angular & radial gradients\n- Remote style double check","id":"816627069580757929","installCount":32532,"lastUpdateDate":"2020-07-15T11:29:42.715Z","likeCount":732,"name":"Style Organizer","publisherHandle":"1535","publisherId":"1535","publisherName":"SHOPEE SINGAPORE PRIVATE LIMITED","runCount":24700,"viewCount":44539},{"description":"Generate and export your styles to CSS custom properties (variables).\n\nTo use, create some styles, run the plugin, select your color system (RGBA, Hex, or HSLA) and if you want to use REM units for text, and hit Generate.\n\nThe plugin generates the following:\n- Color in a selected color system.\n- Text size (can select to export as REM units by selecting a style as base).\n- Box-shadow from effects.\n- Blur filter from effects.\n\nNote:\n- Slashes that Figma uses for grouping is converted to double-dashes to follow the BEM methodology (modifiers).\n- spaces and camelCase naming is converted to kebab-case naming.\n- Special characters are removed.\n- Plugin will only generate from solid colors, no gradients or images.\n- If a style has more than one color, only the first color will be generated.","id":"816737626312049592","installCount":5571,"lastUpdateDate":"2022-01-26T14:06:50.079Z","likeCount":81,"name":"Export styles to CSS variables","publisherHandle":"Fractale","publisherId":"1882746","publisherName":"Felix Thålin","runCount":4793,"viewCount":10589},{"description":"A plugin to sort colors by their hue color. It will then align them in a grid by 10 columns with a 40px gap. Simply select your objects that you want to sort and then run the plugin.\n\nThis plugin uses color-sorter (https://github.com/bartveneman/color-sorter) which sorts colors by hue, then saturation. Black-grey-white colors (colors with 0% saturation) are shifted to the end. Fully transparent colors are placed at the very end.","id":"816889819624434639","installCount":6965,"lastUpdateDate":"2020-04-22T22:15:53.991Z","likeCount":90,"name":"Colorizer","publisherHandle":"miguel","publisherId":"39140","publisherName":"Miguel Solorio","runCount":4271,"viewCount":7908},{"description":"<p>Just select a device, choose a frame, and your design appear on the screen. Easiest mockup plugin</p><p><br></p><p>The plugin has 2 main functions:</p><ul><li><strong>Mockup library.</strong> The fastest way to use a mockup for your project. Big collection of the highest quality and most popular mockups</li><li><strong>Distort (Perspective) transformation.</strong> If you already have a mockup, then with our plugin you can change it and insert the design into your mockup.</li></ul><p>Mockups are free for your personal and commercial projects</p><p>We will add new mockups soon.</p><p><br></p><p>☝️&nbsp;Highest quality mockups: <a href=\"https://www.ls.graphics/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://www.ls.graphics/</a></p><p>👉 Check also&nbsp;<a href=\"https://www.ls.graphics/free-mockups\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">free mockups</a></p><p><br></p><p>Support: info@ls.graphics</p>","id":"817043359134136295","installCount":253109,"lastUpdateDate":"2022-07-02T10:51:39.615Z","likeCount":2164,"name":"Mockup","publisherHandle":"lsgraphics","publisherId":"141115","publisherName":"ls.graphics","runCount":247575,"viewCount":321724},{"description":"Grid support for Figma's AutoLayout! Define rows, columns and padding and let AutoGrid do the rest.\n\nFind yourself constantly creating multiple AutoLayout layers just to keep your 24 cards in a neat layout?\n\nWith AutoGrid keeping your grids in sync is a breeze:\n1) Select a root item for your grid (e.g. one single card or a selection of multiple cards)\n2) Define your grid structure: How many rows, columns and padding should the new grid have?\n3) Press \"Create new grid\".\n-> AutoGrid will clone your root item (if you only selected one) or arrange your selection so it fills up the newly created grid (right now it won't duplicate items if you selected more than one).\n\nAuto-Update:\nWith Auto-Update you dont have to manually update your grid any time your structure changes (e.g. you delete an item, you move items around, etc.).\nWhenever a row has more columns than you specified in your grid structure the plugin will automatically rearrange your grid.\n\nMotivation for this plugin:\nI constantly found myself creating rows of items to make up a grid, and whenever I moved an item around I had to restructure it all, resulting in a lot of wasted time. Also I couldnt use Figma's Tidy Up feature as it doesnt allow me to specify columns or rows - plus when you delete or move an item the flow is broken.\n\nDid you run into any issues or do you want to contribute?\nThis plugin is open sourced at https://github.com/six7/auto-grid","id":"817474150404549708","installCount":8913,"lastUpdateDate":"2020-03-21T15:58:56.795Z","likeCount":226,"name":"AutoGrid","publisherHandle":"jsx","publisherId":"389","publisherName":"Jan Six","runCount":6903,"viewCount":12221},{"description":"This is a plugin for Chinese users to rename their layers by English, which will make their naming convention more reasonable.\nWe provide a word-bank used frequently in digital design so you can search it in Chinese and get a English word to rename your layers. If you can't find it in word-bank it will return translated word by Google.\n\n这是一个帮助中国用户合理命名图层的插件。\n我们提供了一个界面设计常用词库，你只需要输入中文就能获得对应的英文单词，并将它用于图层命名中。如果在词库中找不到你输入的词，我们会通过谷歌翻译返回一个翻译的词组。\n\n不定时更新既有词库\n\n🥳 用户量 200+ 后更新以下内容（确保有真实需求....\n1. 初次打开插件后如有选中任何内容，则获取该内容的名称并翻译\n2. 在插件打开的情况下，点击内容后直接获取内容名称并翻译\n3. 选中插件的情况下，如有已经选中的内容，按下回车等于点击覆盖按钮\n4. 优化了页面展示\n5. 增加常用，常用在显示输入翻译内容时也展示\n6. 增加搜索进行中提示\n7. 展示分类库内容同时也展示翻译内容","id":"817636639982340201","installCount":4814,"lastUpdateDate":"2020-03-29T15:51:31.806Z","likeCount":129,"name":"Figma Chinese Rename","publisherHandle":"3q","publisherId":"353889","publisherName":"卓浩","runCount":3140,"viewCount":8592},{"description":"This plugin allows you to store addidtional information such as translations or field definitions to specific layers in your project.","id":"817657761858499692","installCount":611,"lastUpdateDate":"2020-03-06T07:22:05.646Z","likeCount":13,"name":"Manage Translations and Field Definitions","publisherHandle":"4ec8a8d9_3746_4","publisherId":"1948","publisherName":"LBH-IT","runCount":484,"viewCount":1579},{"description":"Find detached instances all over your document.\n\nFix Your Mess scans your Figma designs and helps you tidy up your work. You can scan all pages of the current Figma document, find all detached instances and decide what to do with them.\n\nAnd more features soon.\n\nWe’re just starting, but your feedback will help us prioritize our plans. If you have any suggestions or feedback, please drop us a line.","id":"817773666528183444","installCount":2127,"lastUpdateDate":"2020-05-04T16:36:24.765Z","likeCount":74,"name":"Fix Your Mess","publisherHandle":"levbruk","publisherId":"1039576","publisherName":"Lev Bruk","runCount":1624,"viewCount":3870},{"description":"Set the width and/or height of the selected layers, while ignoring constraints. (This is to work around a limitation in Figma where you cannot ignore constraints when setting the width or height via the Properties panel.)","id":"817982008781589678","installCount":2128,"lastUpdateDate":"2020-05-07T13:39:35.841Z","likeCount":47,"name":"Set Layer Size","publisherHandle":"yuanqing","publisherId":"1682602","publisherName":"Yuan Qing Lim","runCount":1357,"viewCount":3734},{"description":"Easily Export images of png/jpg/pdf/svg format for Android/iOS.","id":"818009596569137328","installCount":5627,"lastUpdateDate":"2021-01-06T18:03:35.274Z","likeCount":40,"name":"Export Image for Native","publisherHandle":"3562750","publisherId":"3562750","publisherName":"roana0229","runCount":3684,"viewCount":12071},{"description":"Apply Dotted or Halftone Effect Filter on images.\n\n________\n\n🦜  How does it work ?\n\n• select one (or many) shape with an image fill\n• select dots or halftone effect\n• define angle and pattern size using siders\n• click on \"Apply\"\n\n________\n\nCredits : this plugin is based on glfx.js, created by Evan Wallace (who suprisingly also is..)","id":"818097713452519609","installCount":12910,"lastUpdateDate":"2020-03-21T16:17:44.525Z","likeCount":211,"name":"Halftones","publisherHandle":"fabien","publisherId":"383","publisherName":"Fabien","runCount":10291,"viewCount":15156},{"description":"Generates random grids filled with oldschool invaders sprites, or with simple rectangle shapes.\n\n________\n\n👾  How does it work ?\n\n• click on generate to render a random grid of shapes\n• you can adjust the number of items (max 20x20) and item width / height\n\n• the generated grid is displayed directly on your main canvas\n• otherwise, if an empty frame is selected, it will be filled with items (whose width and height will be based on frame's dimensions)\n\n________\n\n🗒️  Note\n\nYou may wonder : Random invaders grid ?! But why ?! Well, because why not I guess :)","id":"818193305099432123","installCount":1365,"lastUpdateDate":"2020-03-21T16:26:08.657Z","likeCount":39,"name":"Invaders","publisherHandle":"fabien","publisherId":"383","publisherName":"Fabien","runCount":700,"viewCount":2984},{"description":"<p>Change multiple text and color styles at once!</p><p><br></p><p>Need to change values of multiple (text and color) styles at once but don't want to go through the process of changing each text style on its own?</p><p><br></p><p>With Batch Styler you can do just that! No matter if 2 or 30 text styles, changing from Inter to Roboto but keeping all font weights and other style is now possible!</p><p><br></p><p>Changing colors that are all based on the same hue value is easy as well: Batch Styler will update all styles accordingly.</p><p><br></p><p>Features:</p><ul><li>Batch change color styles (hue, saturation, lightness, alpha, hex)</li><li>Batch change typography styles (font family, font weight, line height, letter spacing)</li><li>Batch delete styles</li><li>Batch rename styles</li><li>Change description(s)</li></ul><p><br></p><p>Do you have feedback or any issues? Head on over to <a href=\"https://github.com/six7/figma-batch-styler\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">GitHub</a>!</p><p><br></p><p>Want to <a href=\"https://www.buymeacoffee.com/six7\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">buy me a coffee</a>?</p><p><br></p><p>Visit <a href=\"https://sixseven.at?ref=figma-batch-styler\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">sixseven.at</a> for more plugins!</p>","id":"818203235789864127","installCount":47727,"lastUpdateDate":"2021-02-06T13:22:53.874Z","likeCount":848,"name":"Batch Styler","publisherHandle":"jsx","publisherId":"389","publisherName":"Jan Six","runCount":33120,"viewCount":56624},{"description":"<p>Create maps of your site. Crawl links. Recursive &amp; fast.</p><p><br></p><p>________</p><p><br></p><p>🌐 How does it work ?</p><p><br></p><p>• type/paste your site url</p><p>• click on \"Create Map\"</p><p>• a Sitemap is displayed on your main canvas, listing all links found in the html source of</p><p><br></p><p>• for further exploration : select a group with a link, and click on \"Create map\" again. A new map is then created, with all the links found in this new page.</p><p>• Links that are found on both pages are shown with a reduced opacity, so you can easily spot \"new\" links, that are present only on the sub page.</p><p><br></p><p>________</p><p><br></p><p>🧰 Options</p><p><br></p><p>• you can sort urls alphabetically or by url length</p><p>• you can choose to only display links that contain a specific word/url (using \"Contains..\")</p><p>• .. or you can exclude links based on a word/url (using \"Without..\")</p><p>• you can also search for specific word/url (by selecting one or multiple frames, typing the word then click \"search\")</p><p>• not necessary, but I suggest you choose an empty page, with a background color set to #3C6DD3, when you use this plugin</p><p><br></p><p>________</p><p><br></p><p>📸 Screenshots (option)</p><p><br></p><p>• you can automatically display screenshots of the given urls</p><p>• to do so, this plugin uses free api API Flash</p><p>• please note that I am not affiliated with API Flash</p><p><br></p><p>In order to use the screenshot option, you will need to get a free account on <a href=\"https://apiflash.com/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://apiflash.com/</a> (free up to 100 screenshots per month). Then, just paste your API key inside the right input, then select \"With screenshots\"</p><p><br></p><p>________</p><p><br></p><p>🗒️ Notes</p><p><br></p><p>This plugin is a WIP. Besides, it may not be as efficient as dedicated SEO tools, but can be useful (I hope!) to get a quick view of how your site is organised. If you find bugs, or if you find this plugin usefull and have suggestions on how to improve it, please feel free to contact me.</p><p><br></p><p>NB : this plugin uses <a href=\"http://cors-anywhere.herokuapp.com\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">cors-anywhere.herokuapp.com</a>, which can sometimes affect its responsiveness.</p>","id":"818613147082270958","installCount":18674,"lastUpdateDate":"2022-04-06T13:57:03.045Z","likeCount":277,"name":"Sitemap","publisherHandle":"fabien","publisherId":"383","publisherName":"Fabien","runCount":13242,"viewCount":32711},{"description":"This exporter plugin let's you select the naming convention you want for your exported files.\n\nThe available conventions are,\n\n- kebab-case\n- snake_case\n- camelCase\n\nOr you can just export them as is if you prefer to keep your current filename structure.\n\n#How to use\n1. Choose a naming convention \n2. Select any frame that you want to export\n3. Click the \"Export\" button\n\n*Some frame needs to be selected first before exporting.","id":"818724242728722680","installCount":2293,"lastUpdateDate":"2020-08-06T08:50:37.118Z","likeCount":44,"name":"Figma Exporter","publisherHandle":"okazu","publisherId":"819","publisherName":"Oz Hashimoto","runCount":1990,"viewCount":8022},{"description":"<p>What is Lokalise?</p><p><br></p><p>All-in-one localization and translation management platform that allows developers, designers, translators, and product managers to work seamlessly together and deliver digital products into multiple international markets faster and in a more efficient manner.</p><p><br></p><p>How does Figma + Lokalise work?</p><p><br></p><p>Lokalise enables you to design a product or a website for a global audience right away. Use the Figma plugin to quickly include translated content in your designs without going back and forth with product managers, translators and developers.</p><p><br></p><p>This Figma plugin allows you to:</p><p><br></p><p>- Push texts from Figma to Lokalise</p><p>- Set key names (unique identifiers that are used for representing text in code and your design) or use any of the patterns for automatic naming</p><p>- Match Figma texts to existing Lokalise keys (and existing translations)</p><p>- Pull translated texts from Lokalise to Figma</p><p>- Seamlessly switch languages in Figma and check if your design works in other languages</p><p><br></p><p>Launch the plugin</p><p><br></p><p>1. Open your Figma project</p><p>2. Go to the Plugins section and choose Lokalise</p><p>3. Connect your Lokalise account</p><p>4. Allow Figma to access your Lokalise workspace.</p><p>5. Go back to Figma and select one of the existing Lokalise projects or create a new one. You can also set the default key naming pattern and the default platform for the newly created keys (this applies to the keys this Figma plugin will create in Lokalise).</p><p>6. Click Finish Setup.</p><p><br></p><p>When the setup is complete. Start using the plugin by pushing your Figma strings to the Lokalise project so translators can start working on them right away.</p><p><br></p><p>For more information (with screenshots) check out the detailed documentation page</p><p><a href=\"https://docs.lokalise.com/en/articles/3732824-figma\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://docs.lokalise.com/en/articles/3732824-figma</a></p><p><br></p><p>This plugin requires a paid Lokalise account (14-day free trial).</p>","id":"818840482503404814","installCount":7409,"lastUpdateDate":"2022-06-22T12:17:03.758Z","likeCount":115,"name":"Lokalise","publisherHandle":"3719dc79_a72c_4","publisherId":"3546720","publisherName":"Edmund Beinarovic","runCount":7344,"viewCount":14930},{"description":"<p>The fastest way to batch crop/resize multiple images to multiple sizes from Figma.</p><p><br></p><h2>Features</h2><p><br></p><ul><li>Use instantly inside Figma; no extra websites, apps or APIs required.</li><li>Insanely simple batch cropping multiple images to multiple sizes.</li><li>High precision manual crop tool for individual image cropping.</li><li>Automatic content aware and face detection smart crop features.</li><li>Specify the anchor focal point per image (eg. \"Bottom/Center\")</li><li>Includes quick size presets for social networks, platforms and devices.</li><li>Add your own custom crop sizes to the crop presets library, per Figma page.</li><li>Crop sizes, selections and options automatically saved in between uses.</li><li>Export to JPG/PNG with optional image compression for smaller file sizes.</li><li>Custom, dynamic filenames and subfolders (eg. \"#{name}/#{width}x#{height}).</li></ul><p><br></p><h2>To use HyperCrop</h2><p><br></p><ol><li>Install HyperCrop and run the plugin inside your project.</li><li>Add all of the sizes that you want to crop your images to.</li><li>Select the exportable images you would like to crop/resize.</li><li>Optionally set any specific crop options per image.</li><li>Click the <strong>Batch Crop</strong> button (or <strong>Crop Manually</strong>).</li><li>Download or insert your cropped images!</li></ol><p><br></p><h2><strong>Documentation &amp; Video Tutorials</strong></h2><p><br></p><p>For plugin documentation and step by step video tutorials, please visit <a href=\"https://docs.hypermatic.com/hypercrop/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://docs.hypermatic.com/hypercrop</a></p><p><br></p><h2>Bug Reports</h2><p><br></p><p>HyperCrop is still a baby panda; if you notice any bugs, please get in touch via <a href=\"https://hypermatic.com/contact/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://hypermatic.com/contact</a> and we'll publish a fix as soon as possible.</p><p><br></p><h2>License</h2><p><br></p><p>After you've tried cropping and resizing images with HyperCrop 15 times, you'll be asked to enter your license key. Your license key will allow you or your team to crop and resize an unlimited amount of images using HyperCrop.</p><p><br></p><p>To purchase a license or to find out more, please visit <a href=\"https://hypermatic.com/hypercrop/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://hypermatic.com/hypercrop</a></p>","id":"818960915730257192","installCount":3143,"lastUpdateDate":"2022-07-16T04:55:34.183Z","likeCount":55,"name":"HyperCrop Batch Image Resizer","publisherHandle":"hypermatic","publisherId":"247","publisherName":"Hypermatic","runCount":2912,"viewCount":5936},{"description":"<p>Create mockups with 3D clay-style device models. Customize the color, camera angle, and device model for your mockups. Includes models for the iPhone 11, Pixel 4, and Macbook Pro.</p><p><br></p><h2>How to use:</h2><p><br></p><ol><li>Run Clay Mockups 3D from the plugin menu</li><li>Choose a device model</li><li>Select any layer to render it on the device's screen. For best results select a layer that's close to the device's screen dimensions (or the same aspect ratio). If it's not exact that's fine, images will be placed similar to Figma's 'Fill' setting for image fills. To create a frame with the right dimensions click the \"Create Empty Frame\" button.</li><li>To change the camera angle select an angle preset or click and drag over the device. Alternatively you can set an exact rotation in degrees on the right. You can also modify the rotation of the model itself there.</li><li>Choose a device color. If you have local color styles click the color swatch to choose one, or manually enter a hex code.</li><li>Click \"Save as Image\" to render the current view as an image layer in Figma.</li><li>To edit the mockup after it's been saved, select the layer and click \"Edit Mockup\" under Plugin on the properties panel. This will allow you to apply any updates made to its screen layer, or change any of its other settings.</li></ol>","id":"819335598581469537","installCount":131551,"lastUpdateDate":"2022-05-05T00:00:53.113Z","likeCount":886,"name":"Clay Mockups 3D","publisherHandle":"Hamish","publisherId":"555","publisherName":"Hamish","runCount":126742,"viewCount":130271},{"description":"<p>Securely share Figma designs and prototypes as password protected URLs or PDF files.</p><p><br></p><h2>Features</h2><p><br></p><ul><li>Use instantly inside Figma; no extra account creation required.</li><li>Generates password protected URLs to share with your stakeholders.</li><li>Automatically generates strong, random/mixed character passwords.</li><li>Optionally set your own custom password instead.</li><li>Image uploads encrypted with AES-256 and stored in Google Cloud.</li><li>Fast, beautiful and easy to use preview pages in the browser.</li><li>Record your designs and prototypes to a WebM video in the browser.</li><li>Supports multiple versions of your designs on the same preview URL.</li><li>Export password protected PDF files directly from Figma.</li><li>Authenticated sessions automatically end after the tab is closed.</li><li>Put your Figma prototype embeds on a password protected URL.</li><li>Easily drag frames around to re-order how they're displayed.</li><li>Automatically deletes URL/uploads if not accessed for 30 days.</li></ul><p><br></p><h2>To use Crypto</h2><p><br></p><ol><li>Install Crypto and run the plugin inside your project.</li><li>Select the <strong>Figma Designs</strong>, <strong>Figma Prototype</strong> or <strong>PDF File</strong> option.</li><li>Select and order your frames (for Figma Designs option).</li><li>Click the <strong>Share URL</strong> button and follow the instructions.</li><li>Copy your generated URL and password for the Crypto web app.</li><li>Share with stakeholders to let them view your work.</li></ol><p><br></p><h2><strong>Documentation &amp; Video Tutorials</strong></h2><p><br></p><p>For plugin/web app documentation and step by step video tutorials, please visit <a href=\"https://docs.hypermatic.com/crypto/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://docs.hypermatic.com/crypto</a></p><p><br></p><h2><strong>Bug Reports</strong></h2><p><br></p><p>Crypto is still a baby panda; if you notice any bugs, please get in touch via <a href=\"https://hypermatic.com/contact/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://hypermatic.com/contact</a> and we'll publish a fix as soon as possible.</p><p><br></p><h2>License</h2><p><br></p><p>After you've tried generating password protected preview URLs with Crypto 10 times, you'll be asked to enter your license key. Your license key will allow you or your team to to securely share as many password protected designs as you like using Crypto.</p><p><br></p><p>To purchase a license or to find out more, please visit <a href=\"https://hypermatic.com/crypto/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://hypermatic.com/crypto</a></p>","id":"819688895973707151","installCount":13237,"lastUpdateDate":"2022-06-22T00:34:31.300Z","likeCount":127,"name":"Crypto Password Protection","publisherHandle":"hypermatic","publisherId":"247","publisherName":"Hypermatic","runCount":12359,"viewCount":17775},{"description":"Masonry Grid now in Figma. Enjoy and make the thumbs up 👍\n\nYou can organize your frames vertical and horizontal.\nSet number of collumns/rows.\nSort frames random or by name.\n\nSupport:\nemail — alexdrugov@gmail.com\ntelegram — @yutani","id":"819711000718921105","installCount":6616,"lastUpdateDate":"2020-06-25T16:49:23.654Z","likeCount":168,"name":"Masonry Grid Layout Organizer","publisherHandle":"yutani","publisherId":"275956","publisherName":"Alexandr Drugov","runCount":4678,"viewCount":8487},{"description":"A plugin that helps customize Figma components in an orderly and automatic manner.\n\nCreate and edit preset variables within your component without the hassle of going through groups and autolayouts.\n\n__________________\n\nHOW TO USE\n\n• TEXT VARIABLES\nAssign a variable name to a text layer and change the text content through the panel.\n\nName the text layer wrapping it in curly brackets. The name inside will be assigned to the variable. \n\nE.g.: {label} will create a variable `label`.\n\n• SELECTOR VARIABLES\nCreate grouped options which only one is shown at a time.\n\nWrap the layer name in brackets, the first name should be the group name and the second the variable name. Separate the names with a '.' .\n\nWhen selected, all layers will be hidden, expect the chosen one.\n\nE.g.: [Color.Blue], [Color.Green] creates a group 'Color' in which you can choose between 'Blue' and 'Green' colors.\n\n• CONDITION VARIABLES\nShow or hide a layer based on a condition.\n\nName the layer wrapping it in parenthesis. This will create a toggle for the variable name which you can show/hide on the panel. \n\nE.g.: (disabled)\n\nYou can create an inverse condition by naming the layer starting with a '!' .\n\nE.g.: (!disabled)\n\n__________________\n\nNOTES\n\n• The variables should be created on the master component, keeping in mind not to rename the layers on the instance.\n\n• The configuration panel works only with instances.\n\n• You can create multiple layers with the same name to get the same behaviour on them.","id":"819995136233235915","installCount":2744,"lastUpdateDate":"2020-03-12T19:11:30.741Z","likeCount":83,"name":"Component Variables","publisherHandle":"luizmoura","publisherId":"529811","publisherName":"Luiz","runCount":2446,"viewCount":9138},{"description":"<h2><strong>Detach components and variants, just like you detach instances with this simple plugin.</strong></h2><p><br></p><p>Ever been annoyed by the fact that once you create a component or variants, there’s no going back? Select a main component or a set of variants and run this simple plugin to revert them back to a frame in the same way \"Detach Instance\" does with your instances.</p><p><br></p><p><strong>Can I detach multiple components or variant sets?</strong></p><p><br></p><p>You sure can! Select as many as you like and run the plugin.</p><p><br></p><p><strong>What if the component has instances?</strong></p><p><br></p><p>Any instances will remain untouched. You will also still be able to right click an instance and go to \"Main Component\" —&gt; \"Restore Main Component\" to restore</p>","id":"820118309664775643","installCount":27961,"lastUpdateDate":"2022-04-19T10:26:10.895Z","likeCount":318,"name":"Detach Component","publisherHandle":"ptrckmrgn","publisherId":"68","publisherName":"Patrick Morgan","runCount":26705,"viewCount":26040},{"description":"Use text to create a timer on a Figma page.\n\nThere are two ways to start a timer:\n\n1. Type the time you want to count down in Timer: HH:MM:SS format (e.g. Timer: 5:00), then press 'Start'.\n2. Type the time you want to count down in HH:MM:SS format (e.g. 5:00). In this case you need to select the text layer before pressing 'Start'\n\nAdditionally, you can now start a couple of timers on a page (for whatever reason).\n\nCheckout Timebox ⏱ for a collection of Timers that work great with this plugin: https://www.figma.com/community/file/824677652393376493.","id":"820311256083321341","installCount":19217,"lastUpdateDate":"2020-08-14T18:22:51.957Z","likeCount":278,"name":"Timer","publisherHandle":"leo","publisherId":"2747307","publisherName":"Leonard Thomas","runCount":14810,"viewCount":29149},{"description":"<p>Styler unlocks the ability to manage multiple styles at once by using modifying the layer properties. </p><p>Is possible to create, remove, rename, update styles or move them from a file to another by extracting them.</p><h2><br></h2><h2><strong>Tutorials by </strong><a href=\"https://twitter.com/disco_lu\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\"><strong>@disco_lu</strong></a></h2><ul><li><a href=\"https://youtu.be/3Pq2cd3KRHY\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Batch create styles (color styles only)</a></li><li><a href=\"https://youtu.be/G5jvBftQPkQ\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Batch create styles (text + color styles)</a></li></ul><p><br></p><p><br></p><h2><strong>You can support by</strong></h2><ul><li>🥰 Like</li><li>💬 Comment</li><li>🎉 Share</li><li>☕️ <a href=\"https://www.buymeacoffee.com/andrei.iancu\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Consider buying me a coffee</a></li></ul><p><br></p><h2><strong>More info</strong></h2><p><a href=\"https://github.com/andrei-inc/Styler\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://github.com/andrei-inc/Styler</a></p><p><br></p><h2>Known issues</h2><ol><li>[Fixable] Styler doesn't work as expected on text layer types with Mixed properties.</li><li>[Figma limitation] There is a bug already reported several times to Figma team which involves layers with GIF as fill. These will become static images on generation with the current version of plugin API.</li></ol>","id":"820660579767995949","installCount":45652,"lastUpdateDate":"2021-09-22T09:10:49.540Z","likeCount":754,"name":"Styler","publisherHandle":"andrei_iancu","publisherId":"363052","publisherName":"Andrei Iancu","runCount":40522,"viewCount":45420},{"description":"<p>Transforms Figma components to React components in real time.</p>","id":"821138713091291738","installCount":2685,"lastUpdateDate":"2022-02-03T04:25:46.523Z","likeCount":38,"name":"Figaro","publisherHandle":"kattax","publisherId":"761","publisherName":"ΚΛΤΤΛΧ","runCount":2169,"viewCount":3992},{"description":"The missing feature in Figma. Toggling show/hide slices (including nested slices in instances) on your current page or within selection. Locked slices will be ignored.\n\nYou can also assign a keyboard shortcut (e.g., Cmd+Alt+H) to run the plugin:\nhttps://hustle.bizongo.in/custom-shortcuts-for-figma-8c93f3bc9ca2","id":"821239803273184868","installCount":1066,"lastUpdateDate":"2020-06-01T06:45:01.403Z","likeCount":13,"name":"Show/Hide Slices","publisherHandle":"moxamax","publisherId":"41340","publisherName":"Kai","runCount":690,"viewCount":1879},{"description":"<p>Merge it is a plugin that can let you merge those similar, duplicated, inconsistent style components in your design system.</p><p><br></p><p>How to use:</p><p>1. Select at least two components</p><p>2. Run plugin</p><p>3. Choose the component you want to keep (You will be relocated at each component position when selecting. It helps to find the one you want to keep.)</p><p>4. Click Merge</p><p>5. The other symbols will be removed, and all of their instances will be replaced by the one you chose to keep, keeping overrides whenever it is possible</p><p>6. Enjoy!</p><p><br></p><p>Please feel free to suggest features or give advices to <a href=\"https://github.com/ericyip/figma-plugins\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">https://github.com/ericyip/figma-plugins</a></p>","id":"821396560238695046","installCount":3966,"lastUpdateDate":"2021-02-27T14:06:11.313Z","likeCount":58,"name":"Merge it","publisherHandle":"ericyip","publisherId":"60899","publisherName":"Eric Yip","runCount":3695,"viewCount":10094},{"description":"Roll the dice right on the canvas. Choose from 1 – 5 dice. You can also re-roll selected dice.\n\nOnce you have rolled the dice, you can easily roll again using the plugin relaunch api in the properties panel.","id":"821454917506828941","installCount":4697,"lastUpdateDate":"2020-03-18T19:06:11.038Z","likeCount":58,"name":"Dice","publisherHandle":"tom","publisherId":"35","publisherName":"Tom","runCount":4148,"viewCount":3451},{"description":"<p>Hand-off design versions to other stakeholders who need to work with them, while keeping your work in Figma intact.</p><p><br></p><p>In Avocode, anyone from your team can:</p><p><br></p><p>- review design versions from Figma &amp; leave feedback (while not seeing all your exploration work)</p><p>- click through and edit screen flow logic</p><p>- edit copy in text fields</p><p>- inspect all layers, get specs, pick colors, export assets as PNG, JPEG, WebP, and SVG</p><p>- export pure standards-based CSS, Sass, Stylus, Less, SCSS, CSS in JS, Styled Components, Swift, Android, and React Native from layers</p><p><br></p><p>Learn more at <a href=\"https://avocode.com/\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">https://avocode.com/</a></p><p><br></p><p>How to use the Avocode plugin?</p><p><br></p><p>1. Make sure you are logged into your Avocode account.</p><p>2. In Figma, go to Plugins and pick Avocode. You should see a new export window.</p><p>3. Select any number of frames and hit EXPORT.</p><p>4. Avocode will open in a new browser tab. Choose a project or folder where your wish to sync your designs, and that’s it.</p><p><br></p><p>We welcome any feedback on how to improve our Figma plugin. If you have any suggestions or issues, please contact us at <a href=\"mailto:team@avocode.com\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">team@avocode.com</a></p>","id":"821674268995163810","installCount":8637,"lastUpdateDate":"2021-09-30T10:36:10.523Z","likeCount":73,"name":"Avocode","publisherHandle":"avocode","publisherId":"858052177740412437","publisherName":"Avocode Team","runCount":7150,"viewCount":14251},{"description":"The plugin fills the selected frame (or several) with semi-transparent rectangle.\n\nThe rectangle has scale constraints to always match the parent frame.\n\nSet a hotkey and tint you frames even faster ⚡","id":"821785042883892934","installCount":624,"lastUpdateDate":"2020-04-05T09:44:16.516Z","likeCount":19,"name":"Tint Frame","publisherHandle":"302","publisherId":"302","publisherName":"Matvey","runCount":368,"viewCount":1589},{"description":"<p>Visible Property is a plugin for visualize your element property in just one click and you can “UPDATE” all text’s property when you update your element.</p><p><br></p><p>🎉 [Note] <a href=\"https://www.youtube.com/watch?v=PEC56gILBMA\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Visible Property #2</a> is now available (A bit geeky but more powerful)</p><p><br></p><p><strong>Why?</strong></p><p>When I create design system, I want to add text property to my design for easy visualization but the color will alway have little update. It’s pain to update the property all the time. Therefor I create this plugin to solve this problems.</p><p><br></p><p><strong>How to Add text’s property</strong></p><p>- 1. Select a Element</p><p>- 2. Navigate to the Plugins menu</p><p>- 3. Select “Visual Property”</p><p>- 4. Click “Add” property you want to visualize</p><p><br></p><p><strong>How to Update text’s properties</strong></p><p>- 1. Navigate to the Plugins menu</p><p>- 2. Select “Visual Property”</p><p>- 3. Click “Update All”. All the text’s property will update without changing style</p><p><br></p><p><strong>TIP</strong></p><p>** You can adjust style of visual property. The plugin will update only text, width and height without touching your style **</p><p><br></p><p>Video How to</p><p><a href=\"https://www.youtube.com/watch?v=ADYg3AHJ5iY\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://www.youtube.com/watch?v=ADYg3AHJ5iY</a></p><p><br></p><p>Visual Property is open source, feel free to contribute or to send suggestions:</p><p><a href=\"https://github.com/apirak/visible-property\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://github.com/apirak/visible-property</a></p>","id":"821936177363215072","installCount":585,"lastUpdateDate":"2022-04-24T01:19:57.661Z","likeCount":34,"name":"Visible Property","publisherHandle":"apirak","publisherId":"347","publisherName":"Apirak","runCount":344,"viewCount":1545},{"description":"Do you ever dream to make widths in your design consistent, like a snap? \nNow your dreams come tue - Snap Master 3000 is already here!\n\nUse predefined values for width snapping or use your own - now it easy and fast.\n\nBut that's not all!\nSnap Master 3000 save your values after any snap for future use.\n\nHow to use Snap Master 3000?\n\n⬇  1. Install plugin\n⬇  2. Make sure your select something that can be resized\n⬇  3. Click “Snap it!”\n✔ Easy as never! \n\nNow all widths setted to nearest snap sizes, that you set in “Snap Master 3000”\n\nIf you want your avatars, icons and other objects can stays square after snapping - just check box!","id":"822303390338504468","installCount":978,"lastUpdateDate":"2020-04-02T09:13:29.161Z","likeCount":36,"name":"Snap Master 3000","publisherHandle":"dab512","publisherId":"288","publisherName":"Dmitry Bocharov","runCount":615,"viewCount":1474},{"description":"Create your own sets of reusable frame presets with custom dimensions & other settings. 😍 You no longer need to stick to the default limted set of frame sizes which are predefined in Figma.\n\nHow to add custom frame presets in Figma?\nCreate a new collection of presets by clicking the plus (+) icon at the top (leave key field empty). Then click the pencil (edit) icon on the group to add your own presets or edit the names. When done editing the collection, click the checkmark icon near the group name.\n\nSimply click the desired preset to apply it to all selected frames. If no frames are selected, a new frame will be created.\n\nThe plugin doesn’t only save dimensions, but also other frames properties like color, effects, grids and export settings. You also can share your templates with teammates or, if you fancy it, Figma community. Import a shared template by entering the key and pressing plus icon, try it with key “bootstrap” (without quotes).\n\nResizing the plugin window:\nYou can resize the window of the plugin by pressing Cmd/Ctrl + Arrow keys when the plugin window is in focus (click anywhere in the window if resize is not working) — similar to how you can resize objects in Figma.\n\nKnown issues:\n• All templates are currently saved locally to your Figma app or browser. If you clear the browser cache, reinstall the app or log out of Figma, your templates may be lost.\n• You cannot reoder groups or templates yet. I may add this functionality in the future if there are enough requests.","id":"822721538784122690","installCount":7535,"lastUpdateDate":"2020-04-23T02:30:05.350Z","likeCount":177,"name":"Custom Frame Presets","publisherHandle":"g","publisherId":"328","publisherName":"Gleb","runCount":4894,"viewCount":17789},{"description":"<p>A plugin use for design team to solve measure line and add key-values or style id case.</p><p>Always include 3 function:</p><p>1.Sizes &amp; Spaces</p><p>2.Label</p><p>3.Settings</p><p><br></p><p>Never Settle!</p>","id":"822781486072277843","installCount":6279,"lastUpdateDate":"2021-05-10T12:16:25.895Z","likeCount":107,"name":"Measure Tools","publisherHandle":"3372424","publisherId":"3372424","publisherName":"Habo Chen","runCount":5854,"viewCount":9003},{"description":"<p>Easily test your design in different viewports by saving your favourite frame sizes combinations. Use any combination for new frames or for duplicating your current selection.</p><p><br></p><ol><li>Create your design</li><li>Add the needed constrains</li><li>Frametastic will do the rest</li></ol><p><br></p><p>We've also prepared a couple videos for you to better know how to work with Frametastic:</p><p><br></p><p>* Getting started: <a href=\"https://youtu.be/0IO1_p55_fw\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">https://youtu.be/0IO1_p55_fw</a></p><p>* Working with constraints: <a href=\"https://youtu.be/FVq2IdsUqYk\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">https://youtu.be/FVq2IdsUqYk</a></p><p><br></p><p>Made with 💜 by @cabifydesign</p>","id":"822809274991177560","installCount":2159,"lastUpdateDate":"2020-12-23T11:37:34.670Z","likeCount":92,"name":"Frametastic","publisherHandle":"cabify","publisherId":"1549","publisherName":"Cabify","runCount":1346,"viewCount":4027},{"description":"<p>Select all your frames then animate it. You can change the speed of your animation or make it reversed. Lastly, you can export your animation to GIF file.</p><p><br></p><p>- Live Preview</p><p>See your changes of your animation in real-time</p><p><br></p><p>- Change speed</p><p>Tweak your animation speed with a slider</p><p><br></p><p>- Reversed animation</p><p>Reverse your animation from last frame to first frame</p><p><br></p><p>- Secure</p><p>Flipbook stores your GIF data on your machine. None of your content is saved on the cloud.</p><p><br></p><p>- Export to GIF</p><p>Save your animation to a GIF file</p><p><br></p><p>Pro features:</p><p>- No Watermark</p><p>Your design will be 100% yours without watermark</p><p><br></p><p>- Onion Skin</p><p>Display frame skin to inspect your animation</p><p><br></p><p>- Shortcut Button</p><p>Open plugin from your frame</p><p><br></p><p>Upgrade to Pro: <a href=\"https://flipbook.sonnylab.com/#pricing\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://flipbook.sonnylab.com/#pricing</a></p>","id":"823077195186711433","installCount":18121,"lastUpdateDate":"2022-06-13T03:03:26.966Z","likeCount":276,"name":"Flipbook Animator GIF","publisherHandle":"sonny","publisherId":"123","publisherName":"Sonny Lazuardi","runCount":12031,"viewCount":22955},{"description":"https://github.com/zserge/figma-simplify-path\n\nA small plugin that simplifies vector paths in Figma.\n\nIt can be applied to any vector nodes. The plugin iterates through all segments, renders Bezier curves using De Casteljau's algorithm, then reduces the number of points in the lines using Douglas-Peucker algorithm and converts resulting points into new Bezier curves.\n\nThis results in smoother and simpler lines, which can be especially helpful when using Pencil tool.","id":"823136230678046609","installCount":3175,"lastUpdateDate":"2020-03-21T10:52:40.282Z","likeCount":50,"name":"simplify path","publisherHandle":"410479","publisherId":"410479","publisherName":"Александр Мекстнер","runCount":2548,"viewCount":2943},{"description":"Create and play tabletop games over Figma Multiplayer, with hidden information\n\nFor usage information, please refer to the following community file: https://www.figma.com/community/file/823704245956800209\n\nSome games implemented with Game Table (all playable!)\n\nSettlers of Catan:\nhttps://www.figma.com/community/file/834302905869835373\n\nUno:\nhttps://www.figma.com/community/file/842077070484132159\n\nMultiplayer Words:\nhttps://www.figma.com/community/file/841787717960974647\n\nFor any comments and / or issues, feel free to file on the GitHub page: https://github.com/caeleel/game_table, or to email me directly at my contact email.","id":"823704590502753234","installCount":4522,"lastUpdateDate":"2020-06-16T04:33:19.028Z","likeCount":74,"name":"Game Table","publisherHandle":"karl","publisherId":"750","publisherName":"Not Karl","runCount":3891,"viewCount":6031},{"description":"⏰ Version 1.1.4 \n\nLazy export is inspired by a feature that was apart of my workflow in Sketch. I became tired of manually applying export settings across assets and projects. So this was born March 21st, locked up in my apartment.\n\nLazy export is inspired by a feature that was apart of my workflow in sketch. I became tired of manually applying export settings across assets and projects. So this was born March 21st, locked up in my apartment.\n\n⚡️ Lazy Export allows the user to apply default export settings to selected objects in Figma.\n\n🧠 How does it work?\nThere are two ways to trigger your export settings to be applied. The first is a window giving you UI access to run the plugin commands. (Set Platform, Apply Settings, Clear Settings)\nThe second is via the plugin menu; this makes the actions searchable in Figma with the `⌘+/` command.\n\n🔧  Currently supported:\n• IOS \n• IOS Adv.\n• Android\n• Android Adv.\n• Web\n\n📦 Export Options\n\n✨ Export Settings\nWith Lazy export, you have two mobile options on how you can apply export settings.\n\n• Default Export\n• Advanced Export\n\nWith the default export, this follows the trends for exporting assets for mobile at the different screen densities. Advanced is still being worked on for a smooth workflow.\n\nℹ️ The end goal for Advanced Export Options, would be for a developer to hit apply, and Figma exports a folder of assets the developer can drop into Android Studio or Xcode.\n\nAndroid Suffix\n`drawable-mdpi`\n\nIOS Suffix\n`/default-asset@1x`\n\nAndroid Advance Suffix\n`/drawable-mdpi/default-asset`\n\nIOS Advance Suffix\n`/default-asset.imageset/default-asset@1x`\n\n✍️ Custom Asset Naming\n\nRight now, if you do not apply a custom name to each asset, a default one will be used. \n    📆 I have plans on the roadmap to adjust this.\n\nDefault Name String = `default-asset`\n\n🐛 Have a feature request or bug? Please feel free to add an issue!\nDevelopment, issues, and feature requests https://github.com/kocheck/Lazy-Export","id":"824059814042167296","installCount":924,"lastUpdateDate":"2020-04-12T22:53:24.283Z","likeCount":22,"name":"Lazy Export","publisherHandle":"kocheck","publisherId":"147627","publisherName":"Kyle Kochanek","runCount":766,"viewCount":2526},{"description":"Spagett is here to spook you! Get ready to see Spagett everywhere.\n\nWhen executing the plugin there's two possible scenarios:\n\n1. Some layers is selected: Spagett will be added as a fill to every selected layer.\n2. No layer is selected: Spagett will be added as a fill to every layer that already has a fill in the page.\n\n(Some context https://youtu.be/uyh3C1xDT3Y)\n\nThe code for this plugin is open sourced at GitHub\nhttps://github.com/aarongarciah/figma-spagett\n\nMade with ❤️ by Aarón García\nhttps://twitter.com/aarongarciah","id":"824061077635063809","installCount":192,"lastUpdateDate":"2020-04-20T11:23:49.366Z","likeCount":6,"name":"Spagett!","publisherHandle":"aarongarciah","publisherId":"438","publisherName":"Aarón García Hervás","runCount":55,"viewCount":657},{"description":"Select the status of your process and move on.\n\nNo need to move statuses after artboards :)","id":"824115853337179145","installCount":945,"lastUpdateDate":"2020-06-09T09:38:26.356Z","likeCount":16,"name":"Simple Status","publisherHandle":"alexkrivov","publisherId":"14814","publisherName":"Alex Krivov","runCount":827,"viewCount":2703},{"description":"A simple way to randomly arrange images in a grid.\n\nHow to use:\n\n1. Put some images in a frame\n2. Select the frame\n3. Run this plugin","id":"824130560660439050","installCount":4661,"lastUpdateDate":"2020-03-25T05:05:31.278Z","likeCount":100,"name":"Image Grid","publisherHandle":"evan","publisherId":"80028","publisherName":"Evan Wallace","runCount":3612,"viewCount":8184},{"description":"<p><strong>Preview responsive layout inside a Figma</strong> <strong>frame and share animated prototype.</strong></p><p><br></p><p>Works even without the opened plugin window and anyone in your team can resize frame without the installed plugin. For the rest, you can share an animation prototype.</p><p><br></p><p><a href=\"https://youtu.be/OaGSreqHCXE\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">► <strong>Create Responsive Layout</strong></a></p><p><a href=\"https://youtu.be/OaGSreqHCXE\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">► </a><a href=\"https://youtu.be/e6pT5nrIqiQ\" rel=\"noreferrer noopener nofollow\" target=\"_blank\"><strong>Share Animated Prototype</strong></a></p><p><br></p><p><strong>Step 1.</strong> Add new points and snap ranges to existing layouts. You will get a live preview frame that switches when you resize.</p><p><br></p><p><strong>Step 2.</strong> Enable prototype switcher and share Figma animation prototype with your team as a developer guide.</p><p><br></p><p><a href=\"https://www.figma.com/community/file/999587444710563179?fuid=666300958216973040\" rel=\"noreferrer noopener nofollow\" target=\"_blank\"><strong>Duplicate Example File ↓</strong></a></p><p><br></p><p>FEATURES</p><p><br></p><p>→ <strong>NEW</strong>:<strong> </strong>Export Figma prototype with animations</p><p>→ Works without the opened plugin window</p><p>→ Custom values with Ruler</p><p>→ Horizontal and vertical</p><p>→ Suitable for Web, Android, iOS/iPadOS</p><p>→ Quick resizing to breakpoints</p><p>→ Variants support</p><p><br></p><p>iOS SIZE CLASSES</p><p><br></p><p>If you're working on iPhone and iPad designs, the plugin can help you create dynamic layouts for Compact and Regular ranges. There is a <strong>magic point 683</strong> for both vertical and horizontal dimensions, which ensures that anything larger is a Regular size, and anything smaller is Compact.</p><p><br></p><p><a href=\"https://www.figma.com/community/file/1006670108326390140\" rel=\"noreferrer noopener nofollow\" target=\"_blank\"><strong>Duplicate Size Classes Example File</strong> <strong>↓</strong></a></p><p><br></p><p>TRIAL</p><p><br></p><p>You have a <strong>15-day free trial </strong>for each new file with new frames. Please do not copy frames from the file where the trial period ended, this will decrease the period of the new file.</p><p><br></p><p>LICENSE</p><p><br></p><p><strong>Pay once, use forever! </strong>To purchase a license please visit our <a href=\"https://floweare.gumroad.com/l/breakpoints\" rel=\"noreferrer noopener nofollow\" target=\"_blank\"><strong>Product Page on Gumroad</strong></a><strong>. </strong></p><p><br></p><p>FEEDBACK</p><p><br></p><p>If you have a great idea feel free to contact us by email <a href=\"mailto:bp-support@floweare.com\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">bp-support@floweare.com</a>. We always welcome creative suggestions from our customers.</p>","id":"824289601590456356","installCount":88774,"lastUpdateDate":"2021-10-24T10:39:37.575Z","likeCount":2152,"name":"Breakpoints","publisherHandle":"floweare","publisherId":"872218978675824580","publisherName":"Floweare","runCount":65229,"viewCount":121740},{"description":"<p><strong>Change multiple component descriptions at once! Now it's possible. Simple, but very effective! Even works with Documentation Links!</strong></p><p><br></p><p><strong>Based on the Figma rename-tool (CMD + R),</strong> it's powerful and simple to use. Just select a few components and open the plugin.</p><p><br></p><p>You can find &amp; replace (even with Regular Expressions if you want), or just change every description on your selection. Also supports importing the recently used values, using incrementing (or decrementing) numbers, the current description and the layer name.</p><p><br></p><p>You can also switch to document-wide mode to change all components in the whole document. But be careful, that's <em>very</em> powerful! 😄</p><p><br></p><p>Has a nice preview to see what your descriptions will look like.</p><p><br></p><p>—</p><p><br></p><h2>Feature requests? 😊 Questions?</h2><p>Just hit me on Twitter (@madebyfabian), via mail (<a href=\"mailto:hello@madebyfabian.com\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">hello@madebyfabian.com</a>) or via an Issue on GitHub.</p><p><br></p><p>—</p><p><br></p><p>Made with ❤️ by Fabian B. in Nuremberg, Germany. Want to support me? Would appreciate that very much! <a href=\"http://buymeacoff.ee/madebyfabian\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">http://buymeacoff.ee/madebyfabian</a></p>","id":"824407127671340098","installCount":1866,"lastUpdateDate":"2021-12-20T11:53:15.875Z","likeCount":100,"name":"Bunch description change","publisherHandle":"f","publisherId":"358726","publisherName":"Fabian B.","runCount":1330,"viewCount":4925},{"description":"<p>One-click, fuss-free tool to clone a page.</p><p><br></p><p>NOTE: Cloning might take up to 20min for a complex frame.</p><p><br></p><p>How to Use:</p><p>• Launch the plugin</p><p>• While the plugin is active, you are free to move between pages</p><p>• Click on the plugin again once you're on the page you want to clone</p><p>• Verify that the \"Current Page\" name is reflected on the plugin UI</p><p>• Select the frames you want to clone</p><p>‣ Includes select/deselect all capability</p><p>‣ Pro-tip: you can pre-select the frames you want to clone before launching the plugin</p><p>• Choose a destination page, or select New Page and name the page to be created</p><p>• Options available:</p><p>‣ Detach instances</p><p>- Useful if changes on original file should not affect cloned file</p><p>‣ Overwrite existing frames with the same name (if you choose to clone to an existing page)</p><p>‣ Remove hidden layers</p><p>‣ Automatically lock all frames</p><p>• Finally, click on \"Clone\" and let the plugin do the rest!</p><p><br></p><p>Note:</p><p>• If your frames are complex, considering cloning a maximum of 5 frames at a time.</p><p><br></p><p>Work-in-Progress:</p><p>• Suggestions are welcome :)</p>","id":"824942413886528676","installCount":1359,"lastUpdateDate":"2021-04-09T12:59:58.814Z","likeCount":45,"name":"PageClone | A Better Page-Cloning Utility","publisherHandle":"stevahnes","publisherId":"69","publisherName":"Stevanus Satria","runCount":1024,"viewCount":3508},{"description":"Switch quickly between fonts you're already using in your document — no more reaching for the mouse.\n\nWhen run, it will show you a list of fonts you're using in your document or current page. Use the keyboard to move up and down and press Return to apply to selected text nodes. Check \"Leave Open\" to have a handy font palette floating around to apply fonts in a snap.\n\nFeedback welcome!","id":"825026336882449602","installCount":1524,"lastUpdateDate":"2020-03-27T02:55:47.338Z","likeCount":32,"name":"Quicker Font Switcher","publisherHandle":"aaronmw","publisherId":"491","publisherName":"Aaron Wright","runCount":1320,"viewCount":2720},{"description":"Use OCR to copy text from an image fill.\n\nEver wish you could quickly grab some text from a static image? This plugin makes it easy with the magic of optical character recognition.\n\nKNOWN PROBLEMS\n* If you attempt to run the plugin on a static image larger than 1MB with a free API key, it will silently fail. Working on an error message right now.\n* Current workaround: resize the image to a smaller size, copy as PNG, paste it back onto the cavnas, rerun the plugin on the new, smaller image.\n* Alternatively, you can upgrade your API key to the paid tier at OCR.Space.\n\nHOW IT WORKS\n* This plugin takes advantage of the free API offered by OCR.Space (https://ocr.space). You'll need to acquire your own free API key here: https://ocr.space/OCRAPI#free\n* Copy your API key and paste it into the plugin.\n* Once your key is saved, select a layer with a static image as a fill, and run the plugin\n* After a brief delay, the text will be copied to your clipboard, ready to be pasted.\n\nLIMITATIONS\n* You can only select one layer at a time currently\n* If an image has more than one image fill, it will only work for the top one\n* As a quirk of how the plugin was made, you will briefly see a non-interactive window pop up. This allows for content to be added to your clipboard.\n* In addition, the same limitations that apply to OCR.Space's API free tier applies obviously to this plugin, such as file size limit, and rate limiting. See full info here: https://ocr.space/OCRAPI\n\nThis plugin is 100% open source. Feel free to open issues or pull requests at https://github.com/mkwng/Text-From-Image","id":"825603645067095312","installCount":9855,"lastUpdateDate":"2020-04-17T07:21:18.652Z","likeCount":170,"name":"Text From Image","publisherHandle":"mkwng","publisherId":"306","publisherName":"Michael Wang","runCount":5610,"viewCount":7695},{"description":"Get the value for CSS color keywords in Figma.\n\nThe code for this plugin is open sourced at GitHub\nhttps://github.com/aarongarciah/figma-css-colors\n\nMade with ❤️ by Aarón García\nhttps://twitter.com/aarongarciah","id":"827516957743806004","installCount":1503,"lastUpdateDate":"2020-04-02T12:19:53.442Z","likeCount":20,"name":"CSS Colors","publisherHandle":"aarongarciah","publisherId":"438","publisherName":"Aarón García Hervás","runCount":1066,"viewCount":3227},{"description":"LogoFetch makes it easy to search for logotypes to use in your design. The logotype will be added as an image fill to any selected element.\n\nHow does it work:\n\n1. Select one or many elements in your design.\n\n2. Activate the plugin and search for the logotype you would like to insert by entering domain or brand name.\n\n3. Click the logotype you would like to insert and it will be added as a fill of any selected elements.\n\nThanks to the brilliant people at Clerbit all logos are provided for free using their logo API. For more information about the API please visit https://clearbit.com/logo.\n\nMade by love by Richard Wålander (https://dribbble.com/richardwalander)","id":"827609259425497670","installCount":12333,"lastUpdateDate":"2020-04-24T11:12:00.301Z","likeCount":69,"name":"LogoFetch","publisherHandle":"richardwalander","publisherId":"681","publisherName":"Richard Wålander","runCount":10773,"viewCount":11429},{"description":"Show + Tell lets you create presentations with a single click.\n\nSelected frames will be put straight into pre-formatted slides - ready to present or share.\n\nFeatures:\n• One-click presentation creation.\n• Any frame taller than the presentation will automatically be setup to scroll vertically - this is great for marketing sites, or long app screens.\n• Any frame wider than the presentation will be scaled down to fit.\n• Presentation frames take the name of the frame they contain.\n• Auto-fill date - computers already know the date, so in this case the computer fills in the date for you.","id":"828388604797358819","installCount":3921,"lastUpdateDate":"2020-05-06T15:38:19.634Z","likeCount":142,"name":"Show + Tell","publisherHandle":"mvdc","publisherId":"514","publisherName":"Max Di Capua","runCount":2641,"viewCount":6007},{"description":"Figma plugin that add independent borders to each side of a FRAME element with constraints.","id":"828942338746948395","installCount":3770,"lastUpdateDate":"2020-04-06T20:47:14.122Z","likeCount":33,"name":"Borders","publisherHandle":"marizmelo","publisherId":"3466043","publisherName":"Mariz","runCount":3827,"viewCount":7778},{"description":"Text Highlighter takes a regex and changes the color of those pieces of data in your text layers that matches it. It will help you if you need to change the color of any repetitive data in a big piece of text, such as:\n✅ data logs\n
✅ emails\n✅ links\n✅ code snippets","id":"828962683537786673","installCount":1127,"lastUpdateDate":"2020-07-12T09:51:46.039Z","likeCount":24,"name":"Text Highlighter","publisherHandle":"1081","publisherId":"1081","publisherName":"Alex Kipin","runCount":974,"viewCount":6958},{"description":"<p>Randomize one or more properties of your selected elements. Very handy for randomizing graphs, lists, confetti pieces, and more. It's pretty powerful and I'm sure you'll find fun stuff to use it for!</p><p><br></p><h2><strong>Properties you can randomize:</strong></h2><p><br></p><ul><li>Text</li><li>Width</li><li>Height</li><li>X</li><li>Y</li><li>Corner Radius</li><li>Top Left Radius</li><li>Top Right Radius</li><li>Bottom Right Radius</li><li>Bottom Left Radius</li><li>Opacity</li><li>Rotation</li><li>Fill Color</li><li>Fill Opacity</li><li>Stroke Color</li><li>Stroke Opacity</li><li>Stroke Weight</li><li>Layer Blur</li><li>Arc Starting Angle</li><li>Arc Ending Angle</li></ul><p><br></p><p>Missing one? Just ask me and I can try to add support for it.</p><p><br></p><h2>How to use:</h2><p><br></p><p>Make a selection of elements (components, frames, shapes, etc.) Select whichever properties you'd like to randomize, tweak the config to your liking, and click the button at the bottom.</p><p><br></p><p><strong>Tip:</strong> Mash the Return key to keep re-generating new randomizations within the constraints you set. Not happy with your confetti or bar graph? Just. Keep. Randomizing!</p><p><br></p><p>You've got three methods of randomization to choose from, per property:</p><p><br></p><ul><li><strong>Range</strong> for randomizing bars in a graph, for example, allowing you to constrain height between a min and max value.</li></ul><p><br></p><ul><li><strong>List</strong> for making confetti, for example, by letting you randomize the fillColor of your selected elements, but keeping them within your chosen palette.</li></ul><p><br></p><ul><li><strong>Calc</strong> does multiplication or addition rather than just picking numbers out of the air. Consider slowly growing bubbles by multiplying their width and height by 1.1–1.5x. Just keep randomizing and they'll keep growing slightly until you're happy with the results.</li></ul><p><br></p><p>For each type, you have the option to apply the randomized values in a sorted order. Consider making a bar graph, but you want to show profits getting bigger and bigger. Generate as many as you like until you're happy, in mere seconds!</p><p><br></p><p><strong>Note:</strong> If you try to randomize a property that's unsupported by the elements in your selection (eg: \"strokeColor\" on elements without a stroke), that property will simply be skipped; supported properties will still be randomized.</p><p><br></p><p>Feedback would be very much appreciated. Enjoy!</p>","id":"829089184334973766","installCount":5451,"lastUpdateDate":"2022-05-27T18:12:11.659Z","likeCount":186,"name":"Property Randomizer","publisherHandle":"aaronmw","publisherId":"491","publisherName":"Aaron Wright","runCount":4734,"viewCount":8655},{"description":"Want to find and navigate to the artboards of your choice and see your recent searches? Khoj helps you with that.","id":"829240879167560536","installCount":413,"lastUpdateDate":"2020-05-17T17:27:09.018Z","likeCount":11,"name":"Khoj","publisherHandle":"csrameneni","publisherId":"701","publisherName":"Chandra Shekhar","runCount":236,"viewCount":715},{"description":"<p>Add completely free images to your designs directly from Pexels.</p><p><br></p><p>Pexels is a free stock photo and video sharing community made up of <strong>millions of high-quality photos and videos</strong>. Pexels imagery is contributed by a growing community of over 100,000 photographers from around the globe.</p><p><br></p><p>Images are free for both personal and commercial use.</p>","id":"829802086526281657","installCount":98397,"lastUpdateDate":"2022-06-21T12:06:03.986Z","likeCount":430,"name":"Pexels","publisherHandle":"brunjo","publisherId":"4173647","publisherName":"Bruno Joseph","runCount":78246,"viewCount":44327},{"description":"Export the whole page as a large image, with tags on each frame","id":"829960894114212812","installCount":754,"lastUpdateDate":"2020-04-09T07:11:24.229Z","likeCount":24,"name":"Frames Tag","publisherHandle":"peterwang1996","publisherId":"790","publisherName":"Peter Wang","runCount":526,"viewCount":2025},{"description":"<p>Heron handoff can help you export offline developer-handoff files with design specs. for more please visit <a href=\"https://heron.design/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://heron.design</a></p><p><br></p><p>Heron handoff 可以帮你导出离线设计标注，导出的文件可以直接交付给开发，开发可以很轻松地查看间距、色值等信息。</p><p><br></p><p><strong>此处无法回复，有问题请这样反馈：</strong></p><ul><li>发邮件：<a href=\"mailto:leadream4@gmail.com\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">leadream4@gmail.com</a></li><li>或者提 issue：<a href=\"https://github.com/leadream/heron-handoff/issues\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://github.com/leadream/heron-handoff/issues</a></li></ul><p><br></p><h2>Features 特性</h2><ol><li>See distance, size, color, font and many other properties</li><li>See colors in different format</li><li>Customize platform, resolution and unit</li><li>See styles/components with custom name convention</li><li>Export images with custom name convention</li><li>Export WebP images</li></ol><p><br></p><ol><li>查看距离、尺寸、颜色、文字等属性</li><li>以不同格式查看颜色值</li><li>自定义平台、像素密度和单位</li><li>查看样式组件，自定义命名风格</li><li>自定义切图导出命名风格</li><li>导出 WebP 格式切图</li></ol><h2><br></h2><h2><strong>常见问题</strong></h2><ul><li><a href=\"https://docs.heron.design/designer/#%E4%B8%BA%E4%BB%80%E4%B9%88%E6%88%91%E9%80%89%E4%BA%86-2x-%E6%A0%87%E6%B3%A8%E5%8F%98%E6%88%90%E4%B8%80%E5%8D%8A%E4%BA%86\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">为什么我选了 @2x 标注变成一半了？</a></li><li><a href=\"https://docs.heron.design/designer/#%E4%B8%BA%E4%BB%80%E4%B9%88%E6%88%91%E7%9A%84%E6%A0%87%E6%B3%A8%E9%94%99%E4%BD%8D%E4%BA%86\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">为什么我的标注错位了？</a></li><li><a href=\"https://docs.heron.design/designer/#%E5%88%87%E5%9B%BE%E5%A6%82%E4%BD%95%E5%AF%BC%E5%87%BA\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">切图如何导出？</a></li><li><a href=\"https://docs.heron.design/designer/#%E4%B8%BA%E5%95%A5%E6%88%91%E7%9A%84%E7%BD%91%E9%A1%B5%E4%B8%8A%E7%9A%84%E5%88%87%E5%9B%BE%E6%B2%A1%E6%9C%89%E4%B8%8B%E8%BD%BD%E6%8C%89%E9%92%AE\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">为啥我的网页上的切图没有下载按钮？</a></li><li><a href=\"https://docs.heron.design/designer/#%E5%A6%82%E4%BD%95%E5%AF%BC%E5%87%BA%E6%A0%B7%E5%BC%8F%E5%8F%8A%E7%BB%84%E4%BB%B6\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">如何导出样式及组件？</a></li></ul><p><br></p><p>English docs will be shipped out soon.😀</p><p><br></p><h2>Links 链接</h2><p><br></p><p>Open sourced code: <a href=\"https://github.com/leadream/heron-handoff\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://github.com/leadream/heron-handoff</a></p><p>Plugin Open sourced code: <a href=\"https://github.com/leadream/figma-juuust-handoff-plugin\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://github.com/leadream/heron-handoff-figma-plugin</a></p><p>Demo: <a href=\"https://figmacn.com/handoff?demo=true\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://figmacn.com/handoff</a></p>","id":"830051293378016221","installCount":20753,"lastUpdateDate":"2022-07-18T15:45:22.695Z","likeCount":581,"name":"Heron Handoff","publisherHandle":"leadream","publisherId":"39","publisherName":"Hal Lee","runCount":17411,"viewCount":40116},{"description":"<p>Browse and insert local and team components via a flyout menu. Familiar workflow to Sketch users.</p><p><br></p><p>👉 Features</p><p><br></p><p>•&nbsp;Browse local and team components in a flyout menu.</p><p>•&nbsp;Less clicking: Hover over each menu group to expand submenus.</p><p>• Clicking on a menu item group will automatically fetch the first sorted component at the deepest nest level.</p><p>• Control the size of the plugin modal with a resize handle in the bottom right. Although the plugin modal will scroll horizontally and vertically you may wish to size the window to a more convenient size based on how many levels your menu has.</p><p><br></p><p>👉 Team Libraries</p><p>Team libraries are supported with a small workaround.</p><p><br></p><p>To add a team library:</p><p>1. Open the source library document and launch this plugin.</p><p>2. Click \"Add Team Library\". The library should then appear in the \"Saved Team Libraries\" section.</p><p>Note: This does not \"copy\" the team library, it stores a reference to it so all component connections maintain their connection.</p><p><br></p><p>To update a team library:</p><p>1. Open the source library document and launch this plugin.</p><p>2. Click \"Update Team Library\".</p><p><br></p><p>To remove a team library:</p><p>1. Click the minus sign next to any saved team library to remove it. To re-add, follow the steps to add the library.</p><p><br></p><p>To use components from saved team libraries:</p><p>1. Assuming the team library has been added, enable the team library via Figma's assets panel as normal.</p><p><br></p><p>👉 Known Issues</p><p><br></p><p>1. Documents with many local components may take a few moments to populate at first. You may experience this as a frozen plugin when first launching it, however give it some time before shutting it down. This is because the plugin has to search all of the nodes in the current document for components.</p><p>2. Team libraries are stored by name, so if you have 2 team libraries called \"Design System\", saving one will overwrite the other in this plugin.</p><p>3. Saved team libraries do not persist if browser cache has been cleared. This is because the reference is stored in figma.clientStorage.</p>","id":"830178746103135228","installCount":3485,"lastUpdateDate":"2021-07-16T14:44:02.899Z","likeCount":55,"name":"Components Flyout Menu","publisherHandle":"317005","publisherId":"317005","publisherName":"Kurt Emch","runCount":3052,"viewCount":9442},{"description":"<p>Eve Tabler allows you to quickly insert a table into your frame or group.</p><p><br></p><p>You can create an empty table using a simple visual editor or immediately import data from a google table by simple copying.</p><p><br></p><p>The plugin automatically creates a component from the first row, which allows you to quickly customize the appearance of the table in a few clicks.</p>","id":"830443011474955301","installCount":6217,"lastUpdateDate":"2021-02-15T07:29:55.576Z","likeCount":57,"name":"Eve Tabler","publisherHandle":"fdsgn","publisherId":"160426","publisherName":"Vladimir Fedulkin","runCount":8656,"viewCount":10845},{"description":"Generative truchet tiles.\n\nJali is the term for a perforated stone or latticed screen, usually with an ornamental geometry pattern. This plugin generates jalis with various truchet tile patterns.","id":"830523897419272248","installCount":1900,"lastUpdateDate":"2020-04-23T00:54:03.192Z","likeCount":50,"name":"Jali","publisherHandle":"varun","publisherId":"940","publisherName":"Varun Vachhar","runCount":1464,"viewCount":2602},{"description":"<p>This plugin provides ready-made components which are generalized and can be used in any of the UI design. These components can be customized to the designer’s choice and needs e.g. Colors and various properties can be changed very easily with just few clicks.</p><p><br></p><p>Click <a href=\"https://rohit-rmethwani.github.io/readycomponents-website/\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">here</a> to know more!</p>","id":"830533738628941885","installCount":4236,"lastUpdateDate":"2020-09-11T15:41:39.318Z","likeCount":37,"name":"Ready Components","publisherHandle":"4023353","publisherId":"4023353","publisherName":"Rohit Methwani","runCount":3305,"viewCount":8180},{"description":"1. (Optional) Before opening the plugin, select the element(s) who's fill color you want to use as a swatch.\n\n2. Open the plugin and add/remove any swatches you want. Adding a new one will generate a new random color.\n\n3. Back on the canvas, select all the elements you want and hit \"Apply Colors\". The selection will be filled randomly using the swatches.\n\nThe plugin doesn't automatically close so you can hit \"Apply Colors\" as many times as you like.\n\n---\n\nHINT: If you want more of one color than any others, add more swatches of that color.","id":"830583682222038085","installCount":1166,"lastUpdateDate":"2020-04-10T23:24:40.909Z","likeCount":14,"name":"Apply Colors to Selection","publisherHandle":"craigmdennis","publisherId":"13468","publisherName":"Craig Dennis","runCount":931,"viewCount":2307},{"description":"A random color generator that adds and updates fills to any selected shapes.\n\n1. Select any elements you want\n2. Run the plugin\n\nAll elements now have a different random fill.","id":"830585080961469510","installCount":1107,"lastUpdateDate":"2020-04-10T23:30:17.443Z","likeCount":17,"name":"Random Color Generator","publisherHandle":"craigmdennis","publisherId":"13468","publisherName":"Craig Dennis","runCount":884,"viewCount":1504},{"description":"<h1><strong>Play Tetris in Figma</strong>!</h1><p><br></p><p>🆕 🆕 🆕 <strong><em>NOW WITH 2-PLAYER MODE</em></strong> 🆕 🆕 🆕 </p><p><br></p><p>This plugin runs on a companion <a href=\"https://www.figma.com/community/file/831343347679737844\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">Figma Tetris file</a> — when combined together, you can play Tetris on Figma!</p><p><br></p><p>This plugin is a personal project to indulge in my Tetris pastimes. Features that have yet to be implemented include levels. The project is ongoing, so new features will be added every once in a while!</p>","id":"831000487189051522","installCount":1032,"lastUpdateDate":"2020-12-03T04:10:33.652Z","likeCount":25,"name":"Figma Tetris","publisherHandle":"emily","publisherId":"294","publisherName":"Emily Zhong","runCount":912,"viewCount":1658},{"description":"Generate layers from your layout grids so you can export images or prepare diagrams to supplement your design systems documentation.\n\n1. Select frame(s) with layout grids\n2. Run the plugin\n3. The plugin will generate layers for all grids (each grid in their own nested frame so they can be toggled)\n\nSince all artwork generate are rectangles, you can style them however you like.","id":"831003768229656707","installCount":17308,"lastUpdateDate":"2020-04-20T19:43:04.829Z","likeCount":330,"name":"Layout Grid Visualizer","publisherHandle":"tom","publisherId":"35","publisherName":"Tom","runCount":13681,"viewCount":30194},{"description":"Navigate across your Figma document by its text content. Also you can tag arbitrary nodes of your document with your custom tags and navigate based on this tags\n\nYou can navigate to any page of your current document.\nIf you have a small document, you can turn on \"Reindex on search\" and always search based on the most resent search content. Otherwise, you can index your text document manually and then instantly search, using saved index.\n\n—————————————————————————————————\n\nWhen opened plugin window:\nIndex your document using \"Reindex\" button \nor turn on \"Index on search\" toggle.\n\nThen enter text fragment you want to look for to the \"Search\" input\nand push Enter.\n\nThen all the results appear underneath search control and \nclicking them you will be navigated to the corresponding node in your document.\n\nIf you want to add tags to your document nodes than you should open \"tags\" tab. \nThere you can create tags with \"Add tags\" text field.\nSelect some group of nodes and their tags will be shown under \"Current tags\" caption.\n\nIf you want to search by tags navigate back to \"search\" tab and click on the corresponding tag button.","id":"831414365050650806","installCount":5546,"lastUpdateDate":"2020-05-24T18:27:50.472Z","likeCount":46,"name":"Search","publisherHandle":"3944621","publisherId":"3944621","publisherName":"Артем Клюквин","runCount":6643,"viewCount":8634},{"description":"Export Style as JSON File. Run Once and File Download Automatically.","id":"831810197362029825","installCount":665,"lastUpdateDate":"2020-04-15T06:52:26.640Z","likeCount":14,"name":"Style to JSON (Beta)","publisherHandle":"liucong","publisherId":"1234770","publisherName":"Cong LIU","runCount":567,"viewCount":1778},{"description":"Many Paster allows you to insert a list of data into selected text layers individually.\n\nThis may be useful for tables or data of the same category.\n\nHOW TO USE IT?\n\n1. Select the desired text layers.\n2. Run the extension\n3. Copy the data from the Excel spreadsheet or from any other document to the input extension.\n4. Click \"Paste Data.\"\n\nPRO TIP:\nYou can set \"Ctrl\"+\"M\" hotkey via system preferences in Mac to run the plug-in quickly. \nYou can read more about setting the hotkeys in Figma here: https://hustle.bizongo.in/custom-shortcuts-for-figma-8c93f3bc9ca2\n\nNOTE:\nUse advanced settings to:\n- Loop the insert if there are more layers than data you have;\n- Ignore characters if necessary;\n- Insert data in reverse order;\n- If you want to copy the list of selected data to Many Paster, click the \"Copy from Selection\" button.","id":"831936445397604629","installCount":3600,"lastUpdateDate":"2020-04-14T17:06:42.227Z","likeCount":155,"name":"Many Paster","publisherHandle":"goodgantt","publisherId":"4230233","publisherName":"GoodGantt for Trello","runCount":2251,"viewCount":6337},{"description":"Light plugin for fast navigation in your project. Find and jump to any Page, Frame, Component, Layer. That's it!\n\nWith the Recents section, you can quickly switch between 2-5 things to which you jumped before. Use arrow keys and return (enter on Win) to move inside the project without lifting your hands from the keyboard.\n\nPro tip: launch plugin with Run last plugin shortcut ⌥ ⌘ P.\n\nI believe you are quite smart to remember the names of layers and pages. So what is the point of losing your mind finding them in the layers panel, right?","id":"831936468026040598","installCount":1120,"lastUpdateDate":"2020-05-12T20:07:48.383Z","likeCount":53,"name":"Spotlight","publisherHandle":"vlad","publisherId":"57790","publisherName":"Vlad Solomakha","runCount":881,"viewCount":3554},{"description":"Import designs from Figma into Origami Beta.\n\nTo use, open this plugin and select the frames or layers you would like to copy. Then click \"Copy Selected Layers\". After the operation completes, simply paste the selected layers from your clipboard using the menu or keyboard shortcut.\n\nImporting from Figma into Origami supports custom shapes, frames, text, images, and masks. Since Origami doesn't support multiple fills, strokes, or shadows, only the first of each will be copied.\n\nFor questions and support, please visit the Origami Community Group on Facebook.","id":"832268423801619787","installCount":5292,"lastUpdateDate":"2021-01-25T22:46:41.032Z","likeCount":135,"name":"Origami Pasteboard","publisherHandle":"facebook","publisherId":"4194272","publisherName":"Meta","runCount":4098,"viewCount":8138},{"description":"<p>This is a plugin that provides an easy way to copy a <em>Prototype link</em> to specific frames to the clipboard without having to switch to the Presentation mode.</p><p><br></p><p><strong>How To Use:</strong></p><p>Select layers and run the <em>Copy prototype link</em> command, and the link will be copied to the clipboard. You can also select and copy links to multiple selected Frames. In this case, each link will start with the name of its Frame.</p><p><br></p><p><strong>First Setup:</strong></p><p>The plugin must know the <strong>File Key</strong> to be able to create a prototype link. But this Key is private and it's only accessible to plugins published internally to a company that is on an Organization plan. So to make the plugin work you need to insert this <em>File Key</em> manually on first start of the plugin.</p><p><br></p><p><strong>Set the File Key:</strong></p><p>1. Click the <strong>Share</strong> button on the top panel and click the <strong>Copy link</strong>. Or you also can copy the whole File URL from the browser's address bar. The File URL looks like: <code>https://figma.com/file/e9z7p5lisUPmRe9z7p5lisUPm/FileName</code></p><p>2. Go to: Plugins -&gt; Prototype Quick Link -&gt; Settings</p><p>3. Paste the copied URL to the input field and the plugin will extract the File Key automatically. You also can paste only the File Key to the input field.</p><p>4. Done! Click <strong>Save</strong> and use the plugin</p><p><br></p><p><strong>Info:</strong></p><p>Your file share link is not sent to any external server.</p><p><br></p><p>Plugin is open-source. You are welcome to contribute.</p><p><a href=\"https://github.com/maxmartynov/figma-plugin-copy-prototype-link\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">github.com/maxmartynov/figma-plugin-copy-prototype-link</a></p>","id":"832335368157959508","installCount":1498,"lastUpdateDate":"2022-07-05T12:45:43.771Z","likeCount":30,"name":"Prototype Quick Link","publisherHandle":"maxmartynov","publisherId":"77","publisherName":"Max Martynov","runCount":1170,"viewCount":5871},{"description":"Import color palettes from popular design systems directly to your file.\n\nIf you find a bug or want me to add more palettes, please raise a issue at the support URL.","id":"832358256915224919","installCount":3183,"lastUpdateDate":"2020-04-30T21:07:03.203Z","likeCount":45,"name":"system.Colors()","publisherHandle":"583","publisherId":"583","publisherName":"Abhishek Sharma","runCount":2705,"viewCount":8242},{"description":"<p>FigSheets creates a spreadsheet for generating designs, right in Figma. It'll help you create and store multiple versions of a design without the error-prone copying and pasting OR detatching instances when you need to change one keyword or layer.</p><p><br></p><p>Using FigSheets is simple:</p><p><br></p><p>1. Create a sheet; specify the number of layers, keywords, or entire blocks of content you want to swap out of a template.</p><p><br></p><p>2. Add your Master Template to the \"MASTER\" cell (the blue tabbed cell). This is the design you'll create alternate versions of.</p><p><br></p><p>3. Add the layers, content, or keywords in the appropriately labeled red-tabbed cells.</p><p><br></p><p>4. Add the \"Override\" information in those red tabs. When you \"Sync\" the sheet, FigSheets will look for the layer names or keywords to create new versions of your Master.</p><p><br></p><p>5. Hit \"Sync!\" Alternate versions should appear like magic.</p><p><br></p><p>Tip: If you want to generate Components, just make your Master Template a Component or Instance. The components will inherit the name of the Master Template and append the text in the purple \"RESULT\" tab (which you can rename).</p>","id":"832413678664668511","installCount":1296,"lastUpdateDate":"2021-01-29T20:11:38.320Z","likeCount":41,"name":"FigSheets","publisherHandle":"will","publisherId":"26","publisherName":"Will Berger","runCount":1009,"viewCount":7112},{"description":"<h2><strong>Find instances of your library components and styles, in any design file. Manage your design system more easily.</strong></h2><p><br></p><p><strong>1. How does it work?</strong>&nbsp;</p><p><br></p><ol><li>First, go to your Figma settings and get a personal access token (aka a key which enables you, and only you, to communicate with your files),</li><li>Then, copy / paste the links of both the library and the design file you want to inspect (those are the same links you use when your share a file, using the \"Share\" button)</li><li>After a while, you should then see a list of all instances &amp; styles found in your design file. Click on one, so you can browse and find more precisely where they are located in your file.</li></ol><p><br></p><p><strong>2. Notes</strong>&nbsp;</p><p><br></p><ul><li>Please note that your personal token won't be shared or used in any way.</li><li>This plugin doesn't modify anything in your design (it only inspects, nothing more)</li><li>You need to be a least a member of a Team, otherwise you can't really use librairies, and this plugin won't be useful</li><li>All the files you can inspect must be created by you, or come from a Team you're a member of</li><li>You need to launch the plugin in the design file you wish to inspect, in order to be able to find all the instances</li><li>The bigger the files, the longer you'll have to wait ! So, please be patient sometimes :)</li><li>tip : you can paste the same library link in both input fields, so you can find instances of your library components inside your own library</li></ul><p><br></p><p>If you find bugs, possible improvements, please feel free to contact me.</p>","id":"832968575632736697","installCount":667,"lastUpdateDate":"2021-04-07T11:25:43.216Z","likeCount":28,"name":"Ad Lib","publisherHandle":"fabien","publisherId":"383","publisherName":"Fabien","runCount":497,"viewCount":2561},{"description":"<h2>A link shortener built for designers right on Figma.</h2><p><br></p><ul><li>Unlimited short links.</li><li>Custom or random alphanumeric short links.</li><li>Edit any shortened link.</li><li>Track link views.</li><li>All for free. More Pro features coming soon.</li></ul><p><br></p><p><strong>Agencies, consultants and freelancers</strong></p><p>Stop sending huge chunks of urls to your clients that look unprofessional, mask your links with a clean and short link.</p><h2><br></h2><p><strong>Product teams</strong></p><p>Stop updating your design links in your task management system every time you move things around, shorten your links and update them at any time with Linky so your design are always available, even when you make big changes like removing frames or moving them to a different document.</p><p><br></p><p>Configure Linky by providing your file share url, once pasted, Linky will show all the different link options for your file. The url is saved in your Figma file.</p>","id":"833020696010433995","installCount":6895,"lastUpdateDate":"2022-01-19T20:56:01.929Z","likeCount":172,"name":"Linky","publisherHandle":"basiclines","publisherId":"434","publisherName":"Ismael Gonzalez","runCount":6855,"viewCount":13494},{"description":"<p>Swapper allow you to switch color themes easily. It also has some tricky utils for faster create new themes.</p><p><br></p><p><strong>Try it in the </strong><a href=\"https://www.figma.com/community/file/1108502231629550296\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\"><strong>playground</strong></a><strong>. It is better way to describe how it works.</strong></p><p><br></p><p>Watch old demo:</p><p>1) Utils – <a href=\"https://youtu.be/c_R0O6a3rHw\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://youtu.be/c_R0O6a3rHw</a></p><p>2) Tree view – <a href=\"https://youtu.be/xSq9f11gFuY\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://youtu.be/xSq9f11gFuY</a></p><p><br></p><p>🖌 Feedback</p><p>Bug reports and feedback are welcome. Just leave a comment.</p><p><br></p><p>Follow me</p><p><a href=\"https://www.facebook.com/khromkov\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://www.facebook.com/khromkov</a></p><p><a href=\"https://twitter.com/khromkov\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://twitter.com/khromkov</a></p><p><br></p><p>If you like this plugin you can support my work:</p><p><a href=\"https://www.paypal.me/khromkov\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://www.paypal.me/khromkov</a></p><p><a href=\"https://www.patreon.com/khromkov\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://www.patreon.com/khromkov</a></p><p><a href=\"https://gum.co/OjcuX\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://gum.co/OjcuX</a></p><p><br></p><p>Hope you enjoy it 👋</p>","id":"833287008340340220","installCount":1908,"lastUpdateDate":"2022-05-23T17:40:54.484Z","likeCount":66,"name":"Swapper","publisherHandle":"0614b2e1_a45b_4","publisherId":"561","publisherName":"Evgenii Khromkov","runCount":1690,"viewCount":6384},{"description":"Save, restore, and combine your carefully-crafted selections.\n\nHow to use:\n\n1. Make a selection (one or more elements)\n2. Click \"Save Selection\" and give it a name (or not)\n3. To restore your selection at any time, click it in the list. Hold SHIFT while clicking and your saved selection will be combined with whatever you have currently selected.\n\nI hope you find it useful. Feedback appreciated!","id":"833335259860742659","installCount":728,"lastUpdateDate":"2020-05-07T15:17:38.308Z","likeCount":41,"name":"Saved Selections","publisherHandle":"aaronmw","publisherId":"491","publisherName":"Aaron Wright","runCount":392,"viewCount":1173},{"description":"Insert a URL and get a screenshot back right inside Figma. You can also specify a device to emulate. If you want the screenshot of the entire webpage, that's possible too.\n\nUnder the hood, the plugin uses an API built on Puppeteer.\n\nIf the resulting screenshot is more than 4096px in height, Figma might pixelate it due to performance limitations. \n\nIf you have any feedback, direct them to: twitter.com/kns008","id":"833610009499021855","installCount":2187,"lastUpdateDate":"2020-04-19T08:31:14.181Z","likeCount":39,"name":"URL to Screenshot","publisherHandle":"kns008","publisherId":"678","publisherName":"Kamal Nayan","runCount":1779,"viewCount":4174},{"description":"Enumerate your Frames with just one click. \n\nSelect your frames, then type a prefix if you want and press a button: the plugin will rename all selected frames.","id":"833716037588204076","installCount":2570,"lastUpdateDate":"2020-06-01T07:32:45.483Z","likeCount":29,"name":"Ultra Renamer 2","publisherHandle":"723","publisherId":"723","publisherName":"Igor","runCount":2637,"viewCount":4771},{"description":"<p>Quickly generate realistic placeholder text. Names, emails, URLs, headlines, and more.</p><p><br></p><p>To use:</p><p>1. Select one or more objects</p><p>2. Open the plugin and select a placeholder text option</p><p><br></p><p>Any text nodes in the selection will be replaced with the Faker text of your choice.</p><p><br></p><p>Data included:</p><p>- Names</p><p>- Addresses</p><p>- Companies</p><p>- Phone numbers</p><p>- Dates</p><p>- Lorem Ipsum</p><p>- Internet text</p><p>- Commerce text</p><p>- Finance text</p><p>- Random text</p><p>- Computer system text</p><p>- Hacker text</p><p><br></p><p>This plugin is based on <a href=\"http://faker.js\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">faker.js</a></p>","id":"833836762121994814","installCount":17835,"lastUpdateDate":"2021-07-06T16:58:12.445Z","likeCount":221,"name":"Faker","publisherHandle":"coryetzkorn","publisherId":"769","publisherName":"Cory Etzkorn","runCount":14417,"viewCount":18699},{"description":"Transform your design into Dark mode\n\nThe plugin automatically generates colors for Dark mode from a light palette and applys them to elements\n\n 1. Select frame\n 2. Apply plugin\n 3. Done 🌚","id":"834062945643616879","installCount":29959,"lastUpdateDate":"2020-05-07T13:06:37.691Z","likeCount":350,"name":"Dark Mode Magic","publisherHandle":"cc7e3492_1802_4","publisherId":"888","publisherName":"Руслан Гуменный (@fanruten)","runCount":24929,"viewCount":48284},{"description":"Export your color tokens directly into any given format to smoothly integrate them into your stack.\n\n----------------------------------------\nDirect export options \n(Export 50 colors for free - no subscription required)\n• CSS (.css)\n• Less (.less)\n• SCSS (.scss)\n• SASS (.scss)\n• Stylus (.styl)\n• PostCSS (.css)\n• CSS Crush (.css)\n• React (.js)\n• ReactNative (.js)\n• Android (.xml)\n• iOS (.swift)\n----------------------------------------\nHow to use the plugin\n• Select elements, choose an export option and click export. \n----------------------------------------\nHow the plugin works\n• Color: Fill value of the selected element\n• Name: Name of the selected element\n• Case Style: The correct casing automatically applies for each framework through special characters. (e.g. \"Primary Color\" becomes \"primaryColor\")\n----------------------------------------\nGood to know\n• Choose your file naming-convention wisely as these names carry over to your codebase.\n----------------------------------------\nAbout icanicon.io\n• icanicon.io is a Design System Middleware that allows you to manage, import, convert and sync UI tokens and components directly from the most popular Design Tools into your application code. Check it out here:\nhttps://icanicon.io/\n\nThanks, and enjoy it!\nYour Sugarcode Team.","id":"834722635660200680","installCount":2996,"lastUpdateDate":"2020-04-24T07:30:49.014Z","likeCount":57,"name":"Colors → Code","publisherHandle":"sugarcode","publisherId":"222","publisherName":"Sugarcode","runCount":2019,"viewCount":8114},{"description":"Count the words and characters in any selected layers.\n\nThe counts automatically update every time you select any layers.","id":"835015945650515753","installCount":2658,"lastUpdateDate":"2020-04-23T17:58:18.250Z","likeCount":34,"name":"Word Counter","publisherHandle":"a19aca98_87df_4","publisherId":"1783052","publisherName":"Alex Wang","runCount":2436,"viewCount":2275},{"description":"Catch up with your team instantly 🎉 with the Yasou plugin through video calls.\n\nHere is your first ever 🥇 Figma plugin to do video calls with all those interacting into the same Figma file. The Yasou plugin, enables teams that work together on a file to do audio or video calls and run workshops efficiently. Suitable for rapid team communication, share screening, instant feedback and workshops. 🤙🏿\n\nInstructions - How to use the Plugin:\n\nJust one from your team has to initiate the plugin:\n      1. Install the plugin.\n      2. Run the plugin\n      3. Enter meeting name and click OK\n\nAll the other users in the file like other editors, owners, admins and viewers will then see a generated Image inside the Figma file.\nFor each one to join the call:\n\n      1. Select the generated image\n      2. Join the call by Clicking the Plugin at the bottom right side of Figma.\n      3. Enjoy.\n\nDisclaimer: This project is open source and a proof of concept. We are not really sure if it is useful, so we need your opinion. Use it and help us make Yassu even better or hit just us with the hard truth and tell us to drop it.\n\nTo give feedback for this plugin, please use this google form right here, anonymously: https://forms.gle/ak7Ki5FBHpnJeHDw8\n\nLearn more about us: www.quintessential.gr\nRead our blog: https://medium.com/quintessential-sft\nGitHub code: https://github.com/Quintessential-SFT/Yasou-Figma","id":"835158600797781836","installCount":834,"lastUpdateDate":"2020-05-19T07:49:57.269Z","likeCount":27,"name":"Yasou - Team Video Calls","publisherHandle":"quintessential","publisherId":"1894","publisherName":"Quintessential SFT","runCount":635,"viewCount":3110},{"description":"<p>Applanga is a localization management platform for continuous software localization projects. It is designed to automate localization tasks for developers and offers business users a single place to manage all parts of the localization and translation workflow in as much detail as desired.</p><p><br></p><p>Learn more on the Applanga website: <a href=\"http://applanga.com\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">applanga.com</a></p><p><br></p><p>Applanga and Figma</p><p>The Applanga Figma plugin makes it easy to start your translation process already in the design stage and uses the text elements and layouts in your Figma file as the starting point.</p><p><br></p><p>As a designer, you can easily collaborate with your product and developer teams on Applanga without any back and forth or the need to convert your designs into any other format.</p><p><br></p><p>You can simply upload everything, all texts as well as screenshots via the plugin. On Applanga the screenshots serve as valuable context for your translators.</p><p><br></p><p>In Short</p><p>Upload all your text from Figma to Applanga</p><p>Generate screenshots of your designs and upload them too. Download translations from Applanga to preview them in your designs</p><p><br></p><p>You can find the full Figma plugin documentation here <a href=\"https://www.applanga.com/docs/integration-documentation/figma\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://www.applanga.com/docs/integration-documentation/figma</a></p><p><br></p><p>This plugin requires an Applanga account. Sign-up for free here <a href=\"https://dashboard.applanga.com/#\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://dashboard.applanga.com/#</a>!/signup</p>","id":"835161939850128207","installCount":735,"lastUpdateDate":"2022-06-09T07:54:20.525Z","likeCount":9,"name":"Applanga Localization Plugin","publisherHandle":"23f0aef8_8efb_4","publisherId":"3938263","publisherName":"Applanga Team","runCount":574,"viewCount":2291},{"description":"Count selected layers, layer types, and nested layers.\n\nThe counts automatically update every time you select any layers.","id":"835724049419072437","installCount":1393,"lastUpdateDate":"2020-04-25T03:50:56.312Z","likeCount":24,"name":"Layer Counter","publisherHandle":"a19aca98_87df_4","publisherId":"1783052","publisherName":"Alex Wang","runCount":1056,"viewCount":1724},{"description":"Align layers to the grid columns and set the width of the layers in the columns. https://vimeo.com/413965314 short video.\n\nHow to use the plugin:\n\n- Select the layers and run the plugin;\n- Enter the offset in the columns;\n- Enter the width in the columns.\n\nThe plugin will automatically change the width of selected layers and move them. It is not necessary to enter both parameters. You can only enter offset or width.\n\nPlugin limitations:\n\n- You must enter at least one of the parameters: width or offset;\n- The root frame must have a grid;\n- The plugin only works with columns.\n\nPlans:\n\n- Preserving proportions;\n- Shift and resize of an object by 1 column at a time.","id":"835845736607095748","installCount":3468,"lastUpdateDate":"2020-05-12T08:21:29.034Z","likeCount":53,"name":"Grider","publisherHandle":"skorobogatko","publisherId":"702","publisherName":"Nick Skorobogatko","runCount":3714,"viewCount":8385},{"description":"<p>This plugin finds all frames and components (and instances) duplicates on the page by name. It selects the duplicate objects.</p>","id":"836158002689844220","installCount":764,"lastUpdateDate":"2020-10-20T08:22:57.305Z","likeCount":17,"name":"Find duplicates","publisherHandle":"glmrvn","publisherId":"903146","publisherName":"Alex Dyakov","runCount":613,"viewCount":1627},{"description":"<p>Take control of your iconography! Export your icons in any text-based file format.</p><p><br></p><h2>Basic Usage</h2><ol><li>Put your icons in frames</li><li>Name these frames staring with a prefix (\"icon\", by default). Examples: <code>icon / teacup</code>, <code>icon / heart</code>, <code>icon / star</code></li><li>Open the plugin, choose a format, and either download the file or copy its contents to your clipboard.</li></ol><p><br></p><h2><strong>Settings</strong></h2><ul><li><strong>Format</strong>: the text-based format to export</li><li><strong>Frame Prefix</strong>: frames starting with this text and variants of component sets with this name will be exported. It is case-sensitive.</li><li><strong>Filename</strong>: the name of the file to be downloaded</li><li><strong>Sizing</strong>: <code>Frame</code> uses the frame as the <code>viewBox</code> in formats that support it, <code>Contents</code> uses the bounding box of everything inside the frame</li></ul><p><br></p><h2><strong>Custom Formats</strong></h2><p>Create your own code format using the builtin template editor. Just select \"New Custom Format...\" from the format options</p><p><br></p><h2>Bugs / Support</h2><p>Send a message to me <a href=\"https://twitter.com/elimcrow\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">on twitter (@elimcrow)</a> with some information about your problem. If it's a bug this info will be helpful:</p><ul><li>Windows or Mac?</li><li>Does the issue persist after checking for and installing any Figma updates?</li><li>Are you using the Figma desktop app or a browser?</li><li>General icon setup: in a frame? in a component? strokes &amp; fills? Instances?</li><li>If you are comfortable / able: a public link to or copy of the Figma file in question</li><li>Any console errors messages&nbsp;you see (if you know how to find those)</li></ul>","id":"836280433803020304","installCount":9332,"lastUpdateDate":"2021-12-19T21:10:55.489Z","likeCount":40,"name":"Awesome Icon Export","publisherHandle":"elicrow","publisherId":"3366687","publisherName":"Eli Crow","runCount":7955,"viewCount":9792},{"description":"<p>Scale any frame, it’s contents, and all effects to any defined width or height.</p><p><br></p><p>Features:</p><ul><li>Multi-Select → Select as many or as few frames and layers as you'd like.</li><li>Scale by width, height, or percent</li><li>Select an anchor point to scale from</li></ul>","id":"836326694968364056","installCount":30471,"lastUpdateDate":"2022-02-28T00:41:10.566Z","likeCount":351,"name":"Scale","publisherHandle":"mvdc","publisherId":"514","publisherName":"Max Di Capua","runCount":29932,"viewCount":27799},{"description":"<p>Talk to your teammates directly inside a Figma frame. There’s no third-party servers or setup required, simply select the frame you want to comment on and chat away. Figchat renders all your comments as items within Figma itself.</p><p><br></p><p><em>Um... Figma already has a commenting tool?</em></p><p><br></p><p>It does! And it works well. Figchat was created to provide something a little different:</p><p><br></p><ul><li>A chat based UI for your conversations</li><li>Use in a silent review setting to collate everyones thoughts in an organized manner</li><li>Add your own notes quickly when reviewing with your teammates or when thinking through a design</li><li>Have multiple different conversations about different frames simultaneously</li><li>View all comments in situ with the work, no need to dig into menus or closed comments</li><li>No third-party hosting of your comments, no tracking of your actions. Everything remains in Figma</li><li>Dark mode chats... just for kicks</li></ul>","id":"836358953686653979","installCount":8592,"lastUpdateDate":"2022-03-23T11:21:06.933Z","likeCount":150,"name":"Figchat","publisherHandle":"seanehalpin","publisherId":"1890255","publisherName":"Seán Halpin","runCount":5067,"viewCount":16627},{"description":"<p><strong>This plugin is now redundant as Figma has a \"create multiple components\" action. Find this in the centre of the top toolbar when you have multiple frames selected.</strong></p><p><br></p><p><s>Select many things, create many components.</s></p><p><br></p><p><s>This simple plugin turns selected layers into individual components rather than one big component.</s></p>","id":"836508016102947880","installCount":4038,"lastUpdateDate":"2020-06-29T23:55:32.522Z","likeCount":83,"name":"Batch Create Component","publisherHandle":"ptrckmrgn","publisherId":"68","publisherName":"Patrick Morgan","runCount":3497,"viewCount":7602},{"description":"<p>Create labels above frames and components on a page with its layer name.</p><p><br></p><p>The Figma frame labels disappear when you export a slice of them. Now, keep frame labels visible while exporting and customize their styles. Automatically create text layers above frames and update them as screen locations and names change.</p><p><br></p><p>To customize the style of your labels, create a text layer styled the way you want, then select it before clicking the create / update button.</p><p><br></p><p>- label every screen with its name as a text layer</p><p>- labels follow screen locations and name changes</p><p>- customize label style, size or spacing</p><p>- 🔒 lock / unlock</p><p>- 👁 show / hide</p><p>- 🗑 delete</p>","id":"836752724085001294","installCount":2132,"lastUpdateDate":"2022-03-28T19:13:21.930Z","likeCount":36,"name":"Label Frames","publisherHandle":"kilostudio","publisherId":"1007279934154388706","publisherName":"Kilo","runCount":2055,"viewCount":9846},{"description":"Creates randomly sized squares of random colours.","id":"836759865998571600","installCount":518,"lastUpdateDate":"2020-04-28T00:25:15.151Z","likeCount":19,"name":"Chaos","publisherHandle":"jtewright","publisherId":"1879250","publisherName":"Joseph Wright","runCount":394,"viewCount":1465},{"description":"Make your frame blur, generate and translate blur hash code directly in your figma design\n\nFeatures:\n\n- Generate BlurHash\n- Translate BlurHash","id":"836797623647083601","installCount":7555,"lastUpdateDate":"2020-04-28T02:57:09.856Z","likeCount":56,"name":"Blurhash","publisherHandle":"sonny","publisherId":"123","publisherName":"Sonny Lazuardi","runCount":7436,"viewCount":9214},{"description":"<p>Need to handover to developers? Tired of trying to figure out what the relative em value would be for your pixels? Well, no longer.</p><p><br></p><p>With Hand››over you can:</p><p><br></p><ul><li>Open the plugin without selections to convert any number to rem</li><li>Select a node anywhere in your files and open the plugin to see the current pixel value and convert it to rem</li><li>Change the current selection to update the input value and enable a new conversion</li><li>Change the baseline px value to whatever you want it to be and see the relevant changes in em conversion</li><li>Change the scale by which you want to convert based on common scales used</li></ul><p><br></p><p>These plugins are free to us, but if you fancy buying me a coffee because it's been useful to you, I'd be grateful: https://ko-fi.com/kemiljk</p>","id":"837070613195594890","installCount":7163,"lastUpdateDate":"2022-07-16T13:41:14.515Z","likeCount":195,"name":"Hand››over","publisherHandle":"_kejk","publisherId":"3878431","publisherName":"Karl Koch","runCount":6209,"viewCount":15822},{"description":"<h2>Easily copy frames from Figma to Axure RP or publish frames directly to Axure Cloud.</h2><p><br></p><p><strong>Copying frames from Figma to Axure RP</strong> lets you quickly bring your designs to life with the powerful prototyping capabilities of Axure RP. Simply select your frames in Figma and use this plugin to copy them. Then in Axure RP, paste your design onto the canvas. This feature requires Axure RP version 9.0.0.3694 or newer.</p><p><br></p><p>Learn more: <a href=\"https://docs.axure.com/axure-rp/reference/shapes/#import-from-figma\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Importing from Figma to Axure RP</a></p><p><br></p><p><strong>Publishing Frames to Axure Cloud</strong> allows you to collaborate with your team, build basic prototypes, and seamlessly hand off visual assets and CSS to the development team. Now, you can keep your RP prototypes and Figma designs in one place! You’ll need to install the Axure Cloud desktop app before using this feature.</p><p><br></p><p>Learn more: <a href=\"https://docs.axure.com/axure-cloud/reference/figma/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Publishing from Figma to Axure Cloud</a></p><p><br></p><p><strong>Get In Touch</strong></p><p>If you have any questions, bug reports or feature requests, feel free to contact us at <a href=\"mailto:support@axure.com\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">support@axure.com</a>.</p><p><br></p><p><strong>Axure Forum</strong></p><p>Join the <a href=\"https://forum.axure.com/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Axure User Forum</a> to get advice on how to prototype your perfect solution or to share your expertise with the community.</p>","id":"837098402230990991","installCount":21195,"lastUpdateDate":"2021-09-29T21:03:22.761Z","likeCount":250,"name":"Axure","publisherHandle":"axure","publisherId":"490","publisherName":"Axure","runCount":15130,"viewCount":32242},{"description":"<p>Create labels permanently linked with your layers' names. Push updates from either direction, and never again copy and paste names manually to identify things on your canvas.</p><p><br></p><p><br></p><p>How to use</p><p>—————</p><p>⒈ Select one or multiple layers</p><p>⒉ Go to the plugin menu and select Label Maker ▸ From Layer Name</p><p><br></p><p>That's it! One label for each selected layer is now created. The menu commands are used for both creating and updating labels, and layers can only have one label in the document at a time.</p><p><br></p><p><br></p><p>What you can do</p><p>——————––––</p><p>• Push and pull the latest names using sidebar shortcuts or the Figma menu</p><p>• Find the layer linked to the current selection, even across different pages</p><p>• Click on any label and restore its master component to edit label styles across your file</p><p>• Leverage Figma's quick switch between text objects to rename several labels in a row, then propagate all changes to the layers' names</p><p><br></p><p><br></p><p>FAQ</p><p>——</p><p>• I don't see sidebar shortcuts on my layer!</p><p>That could be either because you didn't run the plugin from the menu on that layer at least once, or because you're using an instance of a component. Figma doesn't support registering sidebar shortcuts in instances yet, but the plugin still works from the menu.</p><p><br></p><p>• Can I run it via a keyboard shortcut?</p><p>For many workflows, relying on Figma's native ⌘＋⌥＋P (Run Last Plugin) should speed things up enough. The plugin's commands don't distinguish between creation and update exactly so that the only shortcut we have is as smart as it can be. If you still want to register them permanently on your Mac, you can create custom shortcuts in macOS: <a href=\"https://support.apple.com/en-gb/guide/mac-help/mchlp2271/mac\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://support.apple.com/en-gb/guide/mac-help/mchlp2271/mac</a></p>","id":"837733390949354788","installCount":2702,"lastUpdateDate":"2021-12-16T12:25:49.334Z","likeCount":64,"name":"Label Maker","publisherHandle":"gusso","publisherId":"138","publisherName":"Henrique Gusso","runCount":2392,"viewCount":7321},{"description":"<p>Plugin to create mockups of your project's screens.</p><p>Inspired by the Screeener app.</p><p><br></p><p>Live demo:</p><p><a href=\"https://twitter.com/EdgardKozlowski/status/1256263229602398208\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">https://twitter.com/EdgardKozlowski/status/1256263229602398208</a></p>","id":"837803031368727862","installCount":794,"lastUpdateDate":"2021-05-07T00:03:52.332Z","likeCount":26,"name":"Screeener for Figma","publisherHandle":"edkf","publisherId":"668751","publisherName":"Edgard Kozlowski","runCount":598,"viewCount":1998},{"description":"<p>Rasterize the selected layers at a high resolution (2x, 3x, 4x, 8x, or 10x). (This is to work around a limitation in Figma where layers can only be rasterized at 1x resolution.)</p><p><br></p><h1><a href=\"https://ko-fi.com/yuanqing\" rel=\"noreferrer noopener nofollow\" target=\"_blank\"><strong>Fund my work on Figma plugins →</strong></a></h1><p><br></p><p>The plugin may take some time to run when rasterizing large selections.</p><p><br></p><p>If layers in the selection contain strokes or effects that extend beyond the layers’ bounding box, the position of the resulting image layer may be different from that of the original layers.</p>","id":"837846252158418235","installCount":10566,"lastUpdateDate":"2021-06-04T22:53:39.526Z","likeCount":148,"name":"Flatten Selection to Bitmap","publisherHandle":"yuanqing","publisherId":"1682602","publisherName":"Yuan Qing Lim","runCount":8711,"viewCount":14190},{"description":"Scan you file for all unsued components and how many times you've used each component.","id":"838413521721548186","installCount":7213,"lastUpdateDate":"2020-05-07T19:39:11.508Z","likeCount":102,"name":"Unused Components","publisherHandle":"arbel","publisherId":"121591","publisherName":"Idan Arbel","runCount":3714,"viewCount":9530},{"description":"<p>🔥 Style Guide Generator 🔥</p><p>Preparing formal style guide documentation from your local styles (and keeping it updated!) has always felt like double entry to me. But thanks to the Figma API you can now prepare a presentable style guide for clients &amp; developers with a click of a button.</p><p><br></p><p>🎥 Watch the tutorial 🎥</p><p><a href=\"https://www.youtube.com/watch?v=2svaCq4xmHw\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://www.youtube.com/watch?v=2svaCq4xmHw</a></p><p><br></p><p>💪 How It Works 💪</p><p><br></p><p>Generate A Style Guide</p><p><br></p><ol><li>Create some local text &amp; color styles</li><li>Press Automatic Style Guides &gt; Generate Style Guide</li><li>A new page called \"Style Guide” has been added to your document</li></ol><p><br></p><p>…or keep your own style guide updated with moustache tags!</p><p><br></p><ol><li>Create some local text &amp; color styles</li><li>Find the text layer you want updated with your local style property value</li><li>Rename that text layer something like {{myTextStyle.fontSize}}</li><li>Press Automatic Style Guides &gt; Update Moustache Tags</li><li>The text layer named {{myTextStyle.fontSize}} will have its contents updated to myTextStyle's font size (ie. 12px).</li></ol><p><br></p><p>Available Merge Tags</p><p>Text Styles</p><p>{{<a href=\"http://myTextStyle.id\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">myTextStyle.id</a>}}</p><p>{{<a href=\"http://myTextStyle.type\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">myTextStyle.type</a>}}</p><p>{{<a href=\"http://myTextStyle.name\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">myTextStyle.name</a>}}</p><p>{{myTextStyle.description}}</p><p>{{myTextStyle.fontFamily}}</p><p>{{myTextStyle.fontStyle}}</p><p>{{myTextStyle.fontSize}}</p><p>{{myTextStyle.letterSpacing}}</p><p>{{myTextStyle.lineHeight}}</p><p>{{myTextStyle.textCase}}</p><p>{{myTextStyle.textDecoration}}</p><p>{{myTextStyle.paragraphSpacing}}</p><p><br></p><p>Color Styles</p><p>{{<a href=\"http://myColorStyle.id\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">myColorStyle.id</a>}}</p><p>{{<a href=\"http://myColorStyle.type\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">myColorStyle.type</a>}}</p><p>{{<a href=\"http://myColorStyle.name\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">myColorStyle.name</a>}}</p><p>{{myColorStyle.description}}</p><p>{{<a href=\"http://myColorStyle.key\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">myColorStyle.key</a>}}</p><p>{{<a href=\"http://myColorStyle.paints\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">myColorStyle.paints</a>}}</p><p>{{myColorStyle.r}}</p><p>{{myColorStyle.g}}</p><p>{{myColorStyle.b}}</p><p>{{myColorStyle.a}}</p><p>{{<a href=\"http://myColorStyle.rgba\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">myColorStyle.rgba</a>}}</p><p>{{<a href=\"http://myColorStyle.hex\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">myColorStyle.hex</a>}}</p><p><br></p><p>🚨 Warnings 🚨</p><ul><li>Styles that start with a space are not supported.</li><li>Only the first fill of a local paint style will be used.</li><li>Ensure that all styles are uniquely named. If not, it will be skipped.</li><li>Everything is sensitive to case. If something isn't working, double check your sentence case.</li><li>Please ensure there are no missing fonts in your file before running the plugin.</li></ul><p><br></p><p>🐛Known Bugs 🐛</p><ul><li>Long colour style names have text overflow issues.</li></ul><p><br></p><p>💫 Roadmap 💫</p><ul><li>Title pages and grouping for your Local Style Groups (styles with a “/\")</li></ul><p><br></p><p>💥 Bugs or Feature Requests? 💥</p><p>Email <a href=\"mailto:support@jordangeizer.com\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">support@jordangeizer.com</a> - I'd love to hear of any ideas or issues you may have!</p>","id":"838622388628773312","installCount":15954,"lastUpdateDate":"2022-03-24T00:23:26.070Z","likeCount":323,"name":"Automatic Style Guides","publisherHandle":"jord","publisherId":"998105","publisherName":"Jordan Geizer","runCount":14898,"viewCount":26485},{"description":"The Hidden Kittens plugin will help give an emotional touch to your work. These Kittens are skilled at design and they will tell you what they think about your design decisions. You can replace the art-director in your team with these Kittens.\n\nHow to use:\n1. Choose the frames you want to add cats to.\n2. Launch the Hidden Kittens plugin.\n3. Voila! Kittens will appear in a random place of every selected frame.\n\nNew Kittens are constantly added and will bring more emotions to your work, stay tuned!\n\nNot for commercial use.","id":"838708163765754317","installCount":4944,"lastUpdateDate":"2020-05-06T19:09:14.426Z","likeCount":159,"name":"Hidden Kittens","publisherHandle":"voshkarina","publisherId":"557","publisherName":"Anna Voshkarina 🔥","runCount":3771,"viewCount":10328},{"description":"Search everything in Figma with autocomplete. Focusing on your results - just choose item in lists.\n\nYou can search all nodes in a page like text, component, group, frame etc. When choosing node in results list you will be moved to its location, and the node will fit into the page as much as possible on the screen.\n\nFunctionality:\n\n✔️ Searching with autocomplete\n✔️ Searching with case sensitive\n✔️ Focusing on Node\n✔️ Match Whole Word","id":"838752837372119505","installCount":2936,"lastUpdateDate":"2020-05-17T13:14:58.521Z","likeCount":65,"name":"Search & Focus","publisherHandle":"51623de2_f91d_4","publisherId":"539474","publisherName":"Владимир Симоненко","runCount":2758,"viewCount":5043},{"description":"Generate rotated copies of the selected object. Ideal for designing watches and other radial UI's.","id":"838889318422718953","installCount":4025,"lastUpdateDate":"2020-05-07T22:16:11.038Z","likeCount":91,"name":"Radium","publisherHandle":"iancox","publisherId":"300215","publisherName":"Ian Cox","runCount":3573,"viewCount":6776},{"description":"Fignotes turns figma into a collaborative space for organizing and synthesizing notes! \n\n- Create multiple sticky notes on one click\n- Automatically bring selected frame to front\n- Tag notes for easy reference\n\nCreated by qiqixu.co and adriangoe.com","id":"838904613852450283","installCount":1986,"lastUpdateDate":"2020-05-11T01:22:06.264Z","likeCount":35,"name":"Fignotes","publisherHandle":"qiquiche","publisherId":"326755","publisherName":"Qiqi Xu","runCount":2149,"viewCount":4869},{"description":"<p>Magically turn your Figma designs into animated slide decks or export them to PowerPoint</p><p><br></p><h2>Features</h2><p><br></p><ul><li>Super easy animations and real-time previews inside Figma.</li><li>Export files for PowerPoint/Keynote/Google Slides, with editable text.</li><li>Export to a PDF file (with optional password protection).</li><li>Add GIFs and YouTube/Vimeo/MP4 video embeds to layers in your slides.</li><li>Add slide links or website URL links to layers in your slides.</li><li>Built-in GIPHY and Pixabay search integrations.</li><li>Quickly re-order slides by visual position, Figma layer order or drag and drop.</li><li>Set approval workflow statuses to keep track of which slides are ready.</li><li>Automatically generates password protected presentation URLs.</li><li>Simple, seamless and easy to use presentations in the browser.</li><li>Includes speaker notes, timer, laser pointer, and slide controls.</li><li>Control your presentation from your phone/tablet by scanning a QR code.</li><li>Present in fullscreen with notes and controls on a second screen.</li><li>Spell check your Figma slides in dozens of languages.</li></ul><p><br></p><h2>To use Pitchdeck</h2><p><br></p><ol><li>Install Pitchdeck and create a new Figma project.</li><li>Create as many frames (slides) as you need for your presentation.</li><li>Add images and text layers to your frames to design the slides.</li><li>Run Pitchdeck inside the page containing your frames.</li><li>Apply animations, embed URLs, links or notes to each slide.</li><li>Click the <strong>Export Presentation</strong> button.</li><li>Select format/options and click <strong>Export</strong> or <strong>Upload</strong>.</li><li>Enjoy your presentation!</li></ol><p><br></p><h2><strong>Documentation &amp; Video Tutorials</strong></h2><p><br></p><p>For plugin documentation and step by step video tutorials, please visit <a href=\"https://docs.hypermatic.com/pitchdeck/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://docs.hypermatic.com/pitchdeck</a></p><p><br></p><h2><strong>Bug Reports</strong></h2><p><br></p><p>Pitchdeck is still a baby panda; if you notice any bugs, please get in touch via <a href=\"https://hypermatic.com/contact/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://hypermatic.com/contact</a> and we'll publish a fix as soon as possible.</p><p><br></p><h2>License</h2><p><br></p><p>After you've tried exporting presentations with Pitchdeck 10 times, you'll be asked to enter your license key. Your license key will allow you or your team to animate and export an unlimited amount of presentations using Pitchdeck.</p><p><br></p><p>To purchase a license or to find out more, please visit <a href=\"https://hypermatic.com/pitchdeck/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://hypermatic.com/pitchdeck</a></p>","id":"838925615018625519","installCount":120304,"lastUpdateDate":"2022-06-30T02:22:01.578Z","likeCount":1336,"name":"Pitchdeck Presentation Studio","publisherHandle":"hypermatic","publisherId":"247","publisherName":"Hypermatic","runCount":109395,"viewCount":136020},{"description":"<p>Create and customize illustrations in your designs with Blush. Just choose a collection, pick a composition, and place it on the canvas. You can keep playing with the variations in the illustration to create something unique that fits your brand.</p><p><br></p><p>MIX-AND-MATCH</p><p>Blush works with mixable elements, so you can customize every variablee of an illustration to create your own unique compositions. It's like playing with legos, made of vectors.</p><p><br></p><p>RANDOM</p><p>If you’re feeling lucky, just click the Random button to shuffle the components in a composition. Embrace the chaos! (controlled chaos)</p><p><br></p><p>ARTISTS</p><p>You'll have access to gorgeous illustrations by artists from around the globe. We're collaborating with some of the most talented illustrators to keep creating collections with unique styles every week.</p><p><br></p><p>FREE LICENSE</p><p>We have a forever-free plan that allows you to use any illustration for personal and commercial purposes. Just create an account to start designing stuff! Worry-free!</p><p><br></p><p>SVG &amp; HI-RES</p><p>If you need SVG, more control over the layers, color filters, print-level resolution, and other advanced functionality, subscribe to our paid plan. Your support will help bring more amazing illustrators to Blush (and support our caffeine addiction.)</p><p><br></p><p>We can’t wait to see what you create with Blush!</p><p><br></p><p>Share your creations with the hashtag #madewithblush</p>","id":"838959511417581040","installCount":347061,"lastUpdateDate":"2021-07-28T19:11:21.829Z","likeCount":3682,"name":"Blush","publisherHandle":"blush","publisherId":"894281236677779372","publisherName":"Blush","runCount":247530,"viewCount":354244},{"description":"With Glyph Picker you can get your favorite glyphs in one click.\n\nHow to use:\nLaunch the plugin\nSelect a glyph\nThe glyph will be copied to the clipboard\n\nRoad map:\nSearch\nNotes\nFont Preview","id":"840100703409292995","installCount":5572,"lastUpdateDate":"2020-05-27T21:38:41.321Z","likeCount":79,"name":"Glyph Picker ↗","publisherHandle":"grisha","publisherId":"590","publisherName":"Gregory M","runCount":4672,"viewCount":9128},{"description":"<p>Preview your responsive designs inside Figma!</p><p><br></p><p><strong>How to</strong></p><ul><li>Add all your layout frames part of a responsive design</li><li>Add a frame to use as a responsive preview screen</li><li>Start resizing the preview screen and see how your design behaves</li><li>Click on the input frames in the plugin to test all edge cases</li></ul><p><br></p><p><strong>Demo</strong></p><p><a href=\"https://twitter.com/eminsinani/status/1263883853283950592\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">https://twitter.com/eminsinani/status/1263883853283950592</a></p><p><br></p><p><strong>Notes</strong></p><ul><li>The preview screen changes frames based on the width of the input frames</li><li>The width of an input frame is used as the minimum size for that layout</li></ul>","id":"840727678445998968","installCount":23548,"lastUpdateDate":"2021-04-11T14:57:48.574Z","likeCount":430,"name":"Responsive","publisherHandle":"eminsinani","publisherId":"649","publisherName":"Emin Sinani","runCount":13728,"viewCount":32839},{"description":"\"Super quick add new page and be more productive!\"\n\nQuick New Page will help you to add new page in super quick way. It's shortcut–to do awesome job in your design file, to \"Add New Page\". No matter if you just want to add single page or multiple page, this plugin can help you with that.","id":"841200074370852792","installCount":952,"lastUpdateDate":"2020-05-25T12:52:34.713Z","likeCount":32,"name":"Quick New Page","publisherHandle":"afnizarnur","publisherId":"39541","publisherName":"Afnizar Nur Ghifari","runCount":543,"viewCount":1457},{"description":"<p>\"Tired to manually add new page one by one when starting new project in Figma?\"</p><p><br></p><p>Page Automator will help you solve this by automate creating multiple pages in just one click.</p><p><br></p><p>• Make your own page automator.</p><p>Make your own page automator with providing list of pages. The automator you created will be saved on you computer too!</p><p><br></p><p>• Come with many example!</p><p>Browse built-in page automator to get you started how this plugin works.</p>","id":"841201477778898873","installCount":4047,"lastUpdateDate":"2021-10-26T07:39:02.068Z","likeCount":167,"name":"Page Automator","publisherHandle":"afnizarnur","publisherId":"39541","publisherName":"Afnizar Nur Ghifari","runCount":2250,"viewCount":8849},{"description":"<p>Apply any frame with grid styles configurations inspired from Google Chrome's element inspector. Each number is a multiplier of 4px.</p><p><br></p><p>• Horizontal padding (1 - 12)</p><p>• Vertical padding (1 - 12)</p><p>• Max width (960px / center aligned)</p><p>• Max width (960px / left aligned)</p><p>• Show 12 columns</p><p><br></p><p><strong>Instructions:</strong></p><ol><li>Enable grid view (ctrl + g)</li><li>Highlight a frame</li><li>With the plugin open, toggle the grid options and you should see the grids being applied.</li></ol><p><br></p>","id":"841313026689642442","installCount":10508,"lastUpdateDate":"2020-05-10T13:58:06.447Z","likeCount":165,"name":"Grids Generator","publisherHandle":"5c6ad82a_401e_4","publisherId":"3154915","publisherName":"Jacky Lee","runCount":8932,"viewCount":15226},{"description":"<p>Create rotated copies of any element</p><p><br></p><p>✅ Rotate around center</p><p>✅ Rotate around origin</p><p>✅ Rotate around a custom center point</p>","id":"841400867216942053","installCount":9808,"lastUpdateDate":"2020-10-15T18:42:41.540Z","likeCount":146,"name":"Rotate Copies","publisherHandle":"schurigeln","publisherId":"1032","publisherName":"Christian Konrad","runCount":8513,"viewCount":11214},{"description":"Convert Inches to Centimeters to Milimeters to Pixels per Inch","id":"841435609952260079","installCount":15461,"lastUpdateDate":"2020-05-10T22:11:24.579Z","likeCount":66,"name":"Unit Converter","publisherHandle":"63a81a0c_3b58_4","publisherId":"3553039","publisherName":"Marcelo Novaes","runCount":14615,"viewCount":32054},{"description":"this plugin allows you to import Support data source and quickly populate text and images.\n\nFeatures:\n- local data format support: Json, Yaml, Csv\n- online data support: api request ... (coming soon)\n\nUsage:\n1. click \"+\" to create a new dataset.\n2. enter dataset, and select a data path to establish a connection.\n3. click the sync button in \"Connect\" to begin.\n\nNotes:\n- you need to manually select which arrays to loop through after selecting the path","id":"841598567171283996","installCount":744,"lastUpdateDate":"2020-06-09T09:33:15.821Z","likeCount":15,"name":"My Mock Data","publisherHandle":"203x","publisherId":"51515","publisherName":"203X","runCount":567,"viewCount":3924},{"description":"<p>The plugin generates. set styles for the Tilda Publishing platform.</p><p><br></p><p>To generate a grid, simply run the plugin.</p><p><br></p><p>Grid styles appear in the document.</p><p><br></p><p>Subscribe to <a href=\"https://t.me/+GkyHLexmp-w2ZTEy\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">my telegram</a></p>","id":"841701920540466230","installCount":28739,"lastUpdateDate":"2020-07-29T06:43:59.058Z","likeCount":201,"name":"Grid for Tilda Publishing","publisherHandle":"alschetinin","publisherId":"1711416","publisherName":"Schetinin","runCount":24132,"viewCount":26251},{"description":"Generate dummy texts in 5 different languages\n\nLanguages:\nEnglish\nPersian\nArabic\nSpanish\nItalian\n\nLimit By: word/Paragraph/Character","id":"841730863987387458","installCount":6108,"lastUpdateDate":"2020-05-14T00:29:41.793Z","likeCount":18,"name":"Lorem Plus","publisherHandle":"hsart","publisherId":"4245847","publisherName":"hasan ahani","runCount":7141,"viewCount":4440},{"description":"<p>[100% FREE] Convert Figma layouts into responsive webpages (in HTML or Tailwind) or mobile apps (in Flutter or SwiftUI).</p><p><br></p><p>This plugin aims to raise the bar in \"design to code\" plugins by taking a new (and over-engineered) approach to optimize the layouts before the conversion even begins. If items are aligned, even if AutoLayout is off, it will internally consider them as an AutoLayout. Your project is always safe, as the plugin doesn't modify anything.</p><p><br></p><p>This project is also Open Source, well tested (over 98% in coverage), and expandable. Jetpack Compose is planned for soon, and other platforms are also welcome.</p><p><br></p><p>Feel free to say hi on Twitter or Reddit (@bernaferrari) and please tell me what you love, your ideas, suggestions, or show me what you have made with it!</p>","id":"842128343887142055","installCount":48251,"lastUpdateDate":"2021-03-08T19:37:40.745Z","likeCount":552,"name":"Figma to Code (HTML, Tailwind, Flutter, SwiftUI)","publisherHandle":"bernaferrari","publisherId":"1773556","publisherName":"Bernardo Ferrari","runCount":37837,"viewCount":64919},{"description":"<p>Create a guided flow through any selection of elements. Add notes and share your Walkthrough with others.</p><p><br></p><p>—</p><p><br></p><p>Issues &amp; code: <a href=\"https://github.com/jtewright/walkthrough\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://github.com/jtewright/walkthrough</a></p>","id":"842446161433227510","installCount":1425,"lastUpdateDate":"2022-03-27T21:09:52.267Z","likeCount":40,"name":"Walkthrough","publisherHandle":"jtewright","publisherId":"1879250","publisherName":"Joseph Wright","runCount":1369,"viewCount":8113},{"description":"Converts any selected object into a webP file.\n\nThis plugin is specifically meant to be used for android development. \n\nThe objects are saved into the default android resource folders:\n1x - drawable-mdpi\n1.5x - drawable-hdpi\n2x - drawable-xhdpi\n3x - drawable-xxhdpi\n4x - drawable-xxxhdpi\n\nCheck out the source code here:\nhttps://github.com/ServePeak/Figma-Android-WebP-Generator","id":"842538740516209932","installCount":2489,"lastUpdateDate":"2020-05-19T03:05:32.019Z","likeCount":26,"name":"Android WebP Generator","publisherHandle":"d5658e24_0ea5_4","publisherId":"842538430167730923","publisherName":"Jia Sen Wu","runCount":1752,"viewCount":4352},{"description":"<p>Turn URLs into beautiful cards! Great for collecting inspiration, keeping track of relevant links to projects in a more visual way, or really anything that you would otherwise show a website for.</p><p><br></p><p>This plugin currently leverages <a href=\"https://iframely.com/\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">iFramely</a>, which takes advantage of open formats like oEmbed, Open Graph, and Structured Data to extract relevant meta information.</p>","id":"842576196203523350","installCount":3869,"lastUpdateDate":"2021-06-11T01:47:44.641Z","likeCount":179,"name":"Web cards","publisherHandle":"nlevin","publisherId":"2282","publisherName":"Noah Levin","runCount":3019,"viewCount":7448},{"description":"<p>Overwhelmed with countless number of files in your drafts? Cover Page to help you give a face to your figma files.</p><p><br></p><p>Cover Page is here to :</p><p>* Help you define a cover page for the file that you are working on.</p><p>* Give different colors to identity your files easily</p><p>* Help you customize this space</p><p>* Save your valuable time and reduces time spent on searching through bunch of files.</p>","id":"842617759153981725","installCount":1892,"lastUpdateDate":"2021-01-23T05:28:44.832Z","likeCount":44,"name":"CoverPage","publisherHandle":"pavankusuma","publisherId":"3577452","publisherName":"Pavan Kusuma","runCount":2099,"viewCount":6325},{"description":"Plugin helps you make columns with same width.\n\n1. Change page and gutter widths to get the desired number of columns with the same size.\n\n2. Сhoose the ones you need.\n\n3. Press \"Make Columns\" and they will appear to help you.\n\nNo more nasty 1 pixel differences.","id":"842776244675610953","installCount":1957,"lastUpdateDate":"2020-05-20T23:06:49.568Z","likeCount":45,"name":"ColCalc","publisherHandle":"loginblogin","publisherId":"250","publisherName":"Login Blogin","runCount":1400,"viewCount":3606},{"description":"<p><strong>figrid is an advanced plugin for creating grids from basic figma elements. Powerful and simple.</strong></p><p><br></p><h2>About</h2><p>This plugin makes creating grids easy. You just have to fill required data. Everything is previewed below, so you can see much about how is your grid looking.</p><p><br></p><h2>Fields</h2><p>To create grid you just have to fill the following fields and click <code>Create</code> button:</p><p><br></p><ul><li><code>X</code>takes the number of elements on the X axis.</li><li><code>Y</code> takes the number of elements on the Y axis</li><li><code>Size</code> size of a single element, in plugin it is represented by icon.</li><li><code>Gap</code> gap between the elements, in plugin if is represented by icon.</li><li><code>Fill</code> hexadecimal color and opacity of elements` fill.</li><li><code>Stroke</code> hexadecimal color and opacity of elements` stroke.</li></ul><p><br></p><p>You can also set the background color of the preview canvas to see what your mesh looks like on a specific color.</p><p><br></p><p>Github repository: <a href=\"https://github.com/KUB4W16/figrid\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://github.com/KUB4W16/figrid</a></p>","id":"842828344909077852","installCount":674,"lastUpdateDate":"2021-07-27T06:30:20.702Z","likeCount":5,"name":"figrid","publisherHandle":"kub4w16","publisherId":"2022447","publisherName":"KUB4W16","runCount":659,"viewCount":2617},{"description":"Palette Pal is a plugin that allows you to keep all your favorite colors in one place.\n\nHow It Works\n===========\nRunning the plugin will display a window where you can add, remove, and edit colors.\n\nSimply edit the color by either editing the hex value or by opening up the color picker.\n\nYou can click on the color box to copy the hex value to your clipboard. Or you can save it to your browser's cache by clicking the lock button.\n\nAdditional Features\n==============\n* Drag to reorder\n* Add/Remove colors\n* Edit the color of the background to see how well a color works atop another\n* Set the difference between the colors","id":"842869205970945387","installCount":535,"lastUpdateDate":"2020-05-31T23:20:51.157Z","likeCount":13,"name":"PalettePal","publisherHandle":"3dba20f0_e809_4","publisherId":"2932857","publisherName":"Gino Valente","runCount":357,"viewCount":1100},{"description":"<p>Without leaving Figma, you can submit prototypes for professional, machine or pseudo translation to get the gist for what the localized environment will look like before you put your “pencil down” on a project.</p><p><br></p><p>When you start translating and localizing your content as soon as the design prototypes are available, the entire process for shipping new product gets faster. Smartling’s localization plugin for Figma seamlessly connects your designers with Smartling’s translation service in just one click.</p><p><br></p><p>You prototype user experiences in English because that’s the primary language of your product or digital environment. You check to see if text fits within buttons, how layouts change with different devices and make design decisions based on your preferred user experience. Why not do this for your global user base, too?</p><p><br></p><p>Product Documentation:</p><p><br></p><p>Install - <a href=\"https://help.smartling.com/hc/en-us/articles/360048715133-Figma-Plugin-Installation-and-\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://help.smartling.com/hc/en-us/articles/360048715133-Figma-Plugin-Installation-and-</a></p><p><br></p><p>Setup Pseudotranslation - <a href=\"https://help.smartling.com/hc/en-us/articles/360047993254-Pseudotranslation-in-\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://help.smartling.com/hc/en-us/articles/360047993254-Pseudotranslation-in-</a></p><p><br></p><p>FigmaSubmit for Translation - <a href=\"https://help.smartling.com/hc/en-us/articles/360047994174-Submit-Translations-to-\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://help.smartling.com/hc/en-us/articles/360047994174-Submit-Translations-to-</a></p><p><br></p><p>SmartlingDownload or Apply Translations in Figma - <a href=\"https://help.smartling.com/hc/en-us/articles/360047999554-Apply-Translations-in-Figma\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://help.smartling.com/hc/en-us/articles/360047999554-Apply-Translations-in-Figma</a></p>","id":"842930351697554804","installCount":1498,"lastUpdateDate":"2022-06-23T16:48:24.555Z","likeCount":11,"name":"Smartling","publisherHandle":"4464a312_1976_4","publisherId":"2445124","publisherName":"Steven Sorenson","runCount":1154,"viewCount":6377},{"description":"This is a Figma Plugin that allows you to export a scss file with the styles of certain nodes, very useful for design systems and ui-kit.\n\nYou can easily setup the identifiers to retrieve the right nodes to be exportedas sass variables.\n\nThis plugin is open source, you can find more information at https://github.com/caffeinalab/figma-uikit-to-scss\n\nMade with ❤️ by Caffeina \nhttp://caffeina.com/","id":"843123176259183001","installCount":3324,"lastUpdateDate":"2020-05-21T14:08:36.791Z","likeCount":33,"name":"UIKIT to SCSS","publisherHandle":"caffeinalab","publisherId":"918839","publisherName":"CaffeinaLab","runCount":1654,"viewCount":7284},{"description":"🔌Aspect Ratio is a Figma-optimized aspect ratio calculator.\n\n⚙️Features\n- Inspect : When you select any layer, the aspect ratio value of the layer will be displayed in the inspector area.\n- Calculate : Enter the value you want to calculate in the middle input field, and the value will be calculated.\n- Resize : Click the Resize button to apply the calculated value to the selected layer.\n\n🚧Upcoming features\n- Ratio presets (2:1, 3:2, 4:3, 16:9, Golden Ratio, Silver Ratio etc...)\n\n💫Feature requests or Questions\nJust hit me on Web (https://okazu.co), via mail (hello@okazu.co)","id":"843423036468250072","installCount":2792,"lastUpdateDate":"2020-08-06T08:57:46.050Z","likeCount":54,"name":"Aspect Ratio","publisherHandle":"okazu","publisherId":"819","publisherName":"Oz Hashimoto","runCount":2552,"viewCount":5196},{"description":"<p>Gives you the ability to use Design Tokens that can be used for a whole range of design options, from border radii or spacer units to semantic color and typography styles that are able to reference other tokens. It allows you to change tokens and see these changes applied to the whole document, its styles or just a selection.</p><p><br></p><p>Generate Tokens with the UI or with your own JSON. Create or update Type, Color or Shadow Styles based on tokens. Reference tokens in each other to create type scales, container paddings or semantic colors.</p><p><br></p><p><strong>Supported Tokens</strong></p><ul><li>Colors (Fill, Border Color — hex, rgba, hsla)</li><li>Spacing (Horizontal, Vertical, Gap)</li><li>Sizing (Width/Height)</li><li>Border Radius (individually or each corner)</li><li>Border Width</li><li>Opacity</li><li>Typography (Font family, font weight, font size, line height, letter spacing, paragraph spacing)</li><li>Shadow tokens (both dropShadow and innerShadow)</li><li>[Pro]: Composition tokens (think css classes for Figma)</li></ul><p><br></p><p>All tokens support references to one another, so for example if you want to alias <code>{theme.primary}</code> to <code>colors.blue</code> then you'd write <code>{colors.blue}</code></p><p>as a value.</p><p><br></p><p>Also, you can create math equations in tokens, allowing you to write a type scale like this: <code>{fontSizeBase} * 1.618</code> and so on.</p><p><br></p><p>Find out more about Figma Tokens: <a href=\"https://www.figmatokens.com\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">figmatokens.com</a> and read the docs at <a href=\"http://docs.figmatokens.com\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">docs.figmatokens.com</a></p><p><br></p><h2>Pro plan</h2><p>To support teams that embrace this plugin we recently launched a Pro plan that comes with advanced features such as Multi-file sync, Advanced theme management, a branch switcher and composition tokens. If you rely on Figma Tokens in your job, consider switching to the Pro plan to support the development of the plugin - we'll be able to ship new features faster for both the Pro and the Free version.</p><p><br></p><h2>Usage guide</h2><p>Create or update your Color or Text styles by creating tokens and then clicking Create Styles - use Styles as you were using them before.</p><p>Import existing styles to Tokens by clicking Import.</p><p>Left-click on a token to apply it to one or more layers.</p><p>Right-click a token to apply it to a specific property (such as only to Horizontal Spacing) - also you can delete or edit tokens by right-clicking them.</p><p><br></p><h2>Example document</h2><p>We've recently published an example document to play with if you're just getting started. We recommend to start the plugin in that file so you can see what you can do with the plugin.</p><p><br></p><p><a href=\"https://www.figma.com/community/file/1077953107713783283/Component-Tokens-%26-Themes-Example-%5Blearn-Figma-Tokens%5D\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Download free community file</a></p><p><br></p><p><br></p><p><br></p><h2>Import your styles</h2><p>Best way to get started is to just Import your existing styles as Tokens. Hit the \"Import Styles\" button on the top right.</p><p><br></p><h2>Sync with external source of truth</h2><ul><li>JSONBin</li><li>URL (Read-only)</li><li>GitHub</li><li>GitLab</li><li>Azure DevOps</li></ul><p><br></p><p>This plugin is open source! Feel free to contribute, create suggestions at <a href=\"https://github.com/six7/figma-tokens\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://github.com/six7/figma-tokens</a></p>","id":"843461159747178978","installCount":43192,"lastUpdateDate":"2022-07-21T06:27:27.576Z","likeCount":1819,"name":"Figma Tokens","publisherHandle":"jsx","publisherId":"389","publisherName":"Jan Six","runCount":42121,"viewCount":122935},{"description":"Generate your custom style guides from Figma styles easily.\n\nThis plugin automatically scan your Figma document's text styles, paint/color styles and generate a new page in your document containing your style guide template and the actual rendered style guide that is ready to export as PDF or your favorite format to share with your team or your client. You can re-run the plugin to update your generated style guide frame with dynamically including new styles you are adding or updating.\n\nSee example generated style guide frame and templates here: https://bit.ly/3dY1R2R\n\nCustomization\n\nYou can select basic styleguide templates to start with and customize your style guide template to fit your project's or team's design language. You can also include your own static elements in your template frame as long as preserving the auto layout groups containing your text styles and your color styles. Plugin will simply clone your template frame and populate the text styles and color styles using the template groups you provided. You can customize positioning, look and feel or add new elements like iconography for your stlye descriptor labels or values.\n\nHow It Works\n\n- Create a new page in your document and name it \"Style Guide\"\n- Copy one of the style guide templates and customize to add your own flavor from here: https://bit.ly/3dY1R2R\n- Run the plugin, your style guide frame will be generated and will be ready to use (export)\n- You can re-run the plugin to refresh your style guide any time you want\n\nFeedback & Support\n\nWe welcome feedback, new feature requests and will do our best to help of you have any issues with the plugin. Just shoot an email address to hello@nomadinteractive.co","id":"843888808931861032","installCount":5446,"lastUpdateDate":"2020-05-17T16:33:59.885Z","likeCount":75,"name":"Style Guide Generator","publisherHandle":"629a068b_e98a_4","publisherId":"989","publisherName":"Nomad Interactive","runCount":5753,"viewCount":17257},{"description":"<p>GET FLUTTER CODE FOR FIGMA SELECTIONS</p><p>Flutter generator will look through what you select and write out the flutter equivalent</p><p><br></p><p>EASY COPY AND PASTE</p><p>Stateless code? Stateful? Or just the widget code? Flutter generator renders them all for easy copy and paste</p><p><br></p><p>RENDER WHAT YOU NEED</p><p>Flutter Generator will do a one-to-one conversion of what you select in Figma into Flutter code (v1.12.13+hotfix.8).</p><p><br></p><p>SENSIBLE EDGECASES</p><p>So, do you want your image inside a Container()? Or the background of the Container()? Or just an AssetImage()? Flutter generator has dedicated options for edge cases like these, so there will be more than one way (and more in the future) of rendering an item.</p><p><br></p><p>ASSET MANAGEMENT</p><p>- Exporting images from the UI to match the flutter code. No need for a roundtrip</p><p>- Font Names and their data are prepared/formatted for your convenience in your <a href=\"http://pubspec.yaml\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">pubspec.yaml</a> file</p><p><br></p><p>Flutter Generator is starting in Beta, with the following functionality out of the box (More to come in updates):</p><p><br></p><p>- Rectangles/Ovals/Lines (Basic shapes)</p><p>- Solid colors</p><p>- Images (AssetImage, Container Backgrounds)</p><p>- Google fonts generation</p><p>- Pubspec code snippet for third party dependencies</p>","id":"844008530039534144","installCount":23704,"lastUpdateDate":"2021-01-01T22:04:42.337Z","likeCount":310,"name":"FigmaToFlutter","publisherHandle":"semoju","publisherId":"639719","publisherName":"Seme Mojugbe","runCount":19214,"viewCount":44724},{"description":"<p>Are you looking for a plugin that lets you quickly switch between multi-branded style sheets, improves your workflow, and reduces work-time by 25%? Then look no further and install Theme Switcher today.</p><p><br></p><p>🔀 Switch between multiple style sets in three clicks</p><p>🔁 Sync from Local Style in a single click</p><p>✅ Single click Color Theme application</p><p>🚫 No need to login to separate platform to manage styles</p><p><br></p><h2>How does it work? 🤔</h2><p><br></p><p>Create a new Figma file and create local styles within the file using \"+\" to add new colour styles.</p><p><br></p><p>Name your style using one of the example naming conventions mentioned below:</p><p><br></p><p><strong>Option 1</strong></p><p>▪️ First, setup Default (brand) Ex: Primary-1, Primary-2, Primary-3..., Text, Feedback.</p><p>▪️ Then, set up other brands Ex: Brand2/Primary-1, Brand2/Primary-2, Brand2/Secondary-1, Brand2/Text</p><p><br></p><p>*if there is only one colour style, you don't need to add - number ex: Brands/Feedback</p><p><br></p><p><strong>Option 2</strong></p><p>▪️ First, setup Default (brand) Ex: Default (Brand or Theme name)/ Primary-1/Colour Name, Default/Text (for the single parameter)</p><p>▪️ Then, Setup Other brands, ex: Brand2/Primary-1/Colour Name, Brand2/Text (for the single parameter)</p><p><br></p><p>3. Select Page or Frame to apply theme.</p><p><br></p><p>Here is the <a href=\"https://perspectives.mobilelive.ca/videos/theme-switcher-demo\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\"><strong>demo video</strong></a> to learn more about the plugin usage and how you can create the local styles.</p><p><br></p><p>It's open-source and we are welcome any suggestions, commits or issues discussion in <a href=\"https://github.com/mobileliveinc/theme-switcher\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\"><strong>GitHub</strong></a>.</p>","id":"844318739744428676","installCount":1668,"lastUpdateDate":"2022-04-18T18:23:07.367Z","likeCount":46,"name":"Theme Switcher","publisherHandle":"mobilelive","publisherId":"1791","publisherName":"MobileLIVE Inc","runCount":1848,"viewCount":7821},{"description":"24Stream plugin helps to create rich-content for product cards, which is intended to be broadcasted to online sellers and marketplaces.\n\nThe plugin allows you to unify the layout and then automatically make the layout design in HTML, as well as to package in the E-package format - which is designed to exchange rich content between online sellers and marketplaces.\n\nWith the help of the plugin you can choose an existing design of the features, integrate it into your layout, make all necessary changes using the entire arsenal of Figma to work on layouts or create your own collection on the site with 24streamConverter and use it.\n\nTo convert your design to layout, you need to go to 24StreamConverter website, log in to your personal account via Figma and choose the necessary layout for conversion.\n\nTo access the plugin, you need to enter the key that you can get by writing to klimov@24ttl.ru.","id":"844594961877318333","installCount":568,"lastUpdateDate":"2020-07-14T19:44:26.349Z","likeCount":15,"name":"24Stream","publisherHandle":"2ed7526c_cb94_4","publisherId":"3207500","publisherName":"Denis Verstov","runCount":385,"viewCount":1283},{"description":"<p>Compare objects to see what's different, then copy and paste the changes. Compare instances to their default main component and copy and paste the overrides.</p><p><br></p><p>Features</p><p>1. Copy and paste overrides between symbols</p><p><br></p><p>Two of Figma's greatest strengths are:</p><p><br></p><p>a. Overriding colors, text, and other properties on component instances, and</p><p>b. Swapping out instances of components, such as a icons or states.</p><p><br></p><p>But when you swap an instance, you lose all the overrides you've made, including changes to nested instances within a parent component.</p><p><br></p><p>Maximum Override allows you to copy your overrides, swap out an instance, and then paste the overrides back onto the new instance, to retain all of your changes. This includes nested instances that you've swapped with a different component.</p><p><br></p><p>2. Compare properties between objects</p><p><br></p><p>Maximum Override also allows you to select any two nodes on the stage and compare them against each other to see what's different. (In software, this is known as a \"diff\".) You can then copy the changes from object A to object B, or vice-versa. If you select a single instance, Maximum Override will compare it against its own main component.</p><p><br></p><p>------------</p><p><br></p><p>Bugs? Suggestions? Contributions? See the open-source project at <a href=\"https://github.com/CrookedGrin/maximum-override\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://github.com/CrookedGrin/maximum-override</a>.</p>","id":"844697202715835091","installCount":1015,"lastUpdateDate":"2021-09-14T20:05:11.979Z","likeCount":73,"name":"Maximum Override","publisherHandle":"madaross","publisherId":"856719838436382828","publisherName":"Michael Daross","runCount":864,"viewCount":3100},{"description":"The plugin is used to easily copy attributed text just by selecting text node.\nDefault use case:\nWhen developing applications in XCode, it's fast just to copy text from design viewer and paste attributed string into storyboard/xib's UILabel/UITextField `attributedText` field.\n\nSo, how it works:\n0. Start Plugin\n1. Select TextNode in side navigator or on canvas\nThat's it, now you have attributed text from TextNode copied into your clipboard! Paste it into editors, what support that and enjoy!","id":"844921199150112500","installCount":440,"lastUpdateDate":"2020-05-26T10:31:02.984Z","likeCount":7,"name":"Attributed Text Copy Helper","publisherHandle":"81161c21_c371_4","publisherId":"1628937","publisherName":"Roman Andrykevych","runCount":185,"viewCount":915},{"description":"Make sure your most important elements will be visible every time on every device. Above the Fold plugin marks your designs with a layer that indicates where the above-the-fold portion ends.\n\n🔌How Above the Fold plugin works?\n\n- Select one (or more) Artboard(s).\n- Run the plugin with your desired target device.\n- Your results * are ready\n\n* The results are seperate layers on top of each Artboard.\n\n❓ How can Above the Fold help me?\n\nAbove the Fold is the portion of a Web page that is visible in a browser window when the page first loads. Users engage more with the content above the fold than below the fold, thus key site functions and content related to business goals should appear at the top of the Web page.\n\n🚨 What is the Danger zone?\n\nThe viewport is the area where browsers load the web pages and >90% *  is different than the user's screen resolution. The browser and OS navigation bars add a dynamic offset to the final viewport. The danger zone represent the average difference in height between screen resolution and viewport.\n\n*They are equal only when the web browser is in fullscreen mode\n\n🐛Where can I report bugs or suggest features?\n\nOur Spectrum community is always open to your ideas:\n\nhttps://spectrum.chat/visualeyes-designers/above-the-fold?tab=posts","id":"844939343179979517","installCount":11141,"lastUpdateDate":"2020-05-20T14:24:45.558Z","likeCount":161,"name":"Above The Fold","publisherHandle":"dmraptis","publisherId":"632","publisherName":"Jim Raptis","runCount":8521,"viewCount":14961},{"description":"<p>Export Figma designs as responsive HTML for use on web pages.</p>","id":"844954779092514561","installCount":286,"lastUpdateDate":"2022-03-29T10:31:12.479Z","likeCount":7,"name":"milton","publisherHandle":"b10b3f51_91ce_4","publisherId":"984548272396259908","publisherName":"The Telegraph","runCount":414,"viewCount":368},{"description":"<p>Quickly turn your Figma designs into React code for production or advanced prototyping.</p><p><br></p><p>This plugin lets you export layers from Figma and paste them into Plasmic, a visual React UI builder. Learn more at <a href=\"https://www.plasmic.app/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://www.plasmic.app</a>.</p><p><br></p><p>The importer fully automates the low-level details of converting Figma’s document representation to standard DOM representations. A few highlights:</p><p><br></p><p>- Supports constraints and auto-layout.</p><p>- Translates blend modes.</p><p>- Adapts border styles including centered borders.</p><p>- Handles filter effects like background blur and layer blur.</p><p>- Preserves affine transformations like scales and rotations.</p><p>- Handles all fill types including linear and radial gradients and images.</p><p>- Imports vector and compound shapes as SVGs.</p><p>- Mirrors the original hierarchical structure.</p><p>- Carries over most type styles.</p><p><br></p><p>After importing, you will often want to do more work to make it production-ready. That’s where the rest of Plasmic’s toolset comes in, letting you set production-grade layout, swap in accessible functional components, add interactions, and much more. Finally, you can easily deploy into production or integrate into any existing codebase.</p><p><br></p><p>Follow <a href=\"https://twitter.com/plasmicapp\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://twitter.com/plasmicapp</a> for the latest updates.</p>","id":"845367649027913572","installCount":4309,"lastUpdateDate":"2022-04-18T18:25:48.413Z","likeCount":103,"name":"Figma-to-Code by Plasmic","publisherHandle":"plasmicapp","publisherId":"843254771306409369","publisherName":"Plasmic","runCount":3997,"viewCount":9981},{"description":"This is a simple Plugin that you can use to quickly change the element in your design.\n\nTo use it, you just need to pick a component, then replace other element by attach its instance.\n\nDesigned & developed by Sam Liu, from Huemen.","id":"845497837694622588","installCount":260,"lastUpdateDate":"2020-08-07T03:50:02.662Z","likeCount":12,"name":"SamPonent","publisherHandle":"3010816","publisherId":"3010816","publisherName":"Sam Liu","runCount":151,"viewCount":1350},{"description":"Copy & paste color directly from your camera\n\nHow to use:\n\n- Scan QR code in your phone or choose open in browser\n- Capture a color from your camera\n- New color will be automatically added to the plugin\n- Click the color to copy it, or click delete to remove\n \n3D Illustration Credits: Alzea Arafat","id":"845733021314534317","installCount":4450,"lastUpdateDate":"2020-08-13T04:02:27.041Z","likeCount":109,"name":"Camera Color Copy Paste","publisherHandle":"sonny","publisherId":"123","publisherName":"Sonny Lazuardi","runCount":1804,"viewCount":8989},{"description":"🔌Golden Spiral is a plugin that calculates the golden ratio sequence and creates layers.\n\n⚙️Calculate : Enter a value in the input box at the top right to calculate it.\n\n✨Generate : Press the Generate button to generate a layer that fits the golden sequence.\n\n💫Feature requests or Questions\nJust hit me on Web (https://okazu.co), via mail (hello@okazu.co)","id":"845838702454033341","installCount":4894,"lastUpdateDate":"2020-08-06T08:03:01.764Z","likeCount":79,"name":"Golden Spiral","publisherHandle":"okazu","publisherId":"819","publisherName":"Oz Hashimoto","runCount":3840,"viewCount":7320},{"description":"Create hand-drawn wireframe in your design.\n\nSupported object:\n- Rectangle\n- Circle\n- Line\n\nMAGIC CONVERT\n\nconvert your design directly to a hand-drawn sketch\nSupported object:\n- Text\n- Rectangle\n- Circle\n- Line","id":"846345227416352754","installCount":12191,"lastUpdateDate":"2020-05-25T04:07:20.642Z","likeCount":126,"name":"Hand Wireframe","publisherHandle":"sonny","publisherId":"123","publisherName":"Sonny Lazuardi","runCount":10085,"viewCount":27775},{"description":"<p>Play and make Zelda worlds.</p><p><br></p><p>Example world: <a href=\"https://www.figma.com/community/file/848353624455436802\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://www.figma.com/community/file/848353624455436802</a></p><p><br></p><p>To play a world, select it and run this plugin.</p><p><br></p><p>To make a world, create a new Frame and drag in the Components from the example world.</p>","id":"846537436529611787","installCount":978,"lastUpdateDate":"2022-04-05T00:40:54.353Z","likeCount":38,"name":"Zelda Maker","publisherHandle":"minigolf2000","publisherId":"98046","publisherName":"Golf Sinteppadon","runCount":1018,"viewCount":2474},{"description":"<p>Generate and manage color styles based on perceptually uniform palettes.</p><p><br></p><p>Think of Palettes as your color style manager. Open it next to the Properties Panel and add a new color to start seeing new styles being created live.</p><p><br></p><p>• Control how many shades are generated per color by changing the number of steps</p><p>• Live preview shows you a grid of all color styles as you edit them</p><p>• Palettes keeps track of all styles it creates across sessions, so you can edit them any time</p><p><br></p><h1>Perceptual uniformity</h1><p>The plugin aims to generate perceptually uniform palettes by default. That means that at any given percentage, you can expect different hues to have a similar <a href=\"https://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">relative luminance</a>.</p><p><br></p><p>However, keeping luminance uniformity across hues makes it difficult to create the vibrancy levels you might expect.</p><p><br></p><p>You can overload the saturation control by up to 300% by using the input field to generate more vibrant colors above 100%. Keep in mind this can introduce unintended chromatic differences in a palette if you push it too far, so approach with care.</p>","id":"847120744711293046","installCount":2726,"lastUpdateDate":"2020-09-16T21:44:56.514Z","likeCount":138,"name":"Palettes","publisherHandle":"gusso","publisherId":"138","publisherName":"Henrique Gusso","runCount":2045,"viewCount":5434},{"description":"Easily wrap a new frame around layers you've selected.\n\nThis plugin reacts like a bulk Frame Selection function (⌥⌘G) with frame size choice.\nThe plugin automatically suggests minimum Frame size based on selected layers, you can also enter desired size.","id":"847762563509209322","installCount":1587,"lastUpdateDate":"2020-07-18T20:20:20.039Z","likeCount":30,"name":"Frame It","publisherHandle":"pooya","publisherId":"196092","publisherName":"Pooya Kamel","runCount":1528,"viewCount":4291},{"description":"<p>Typeout provides <strong>rich</strong>, <strong>relevant</strong> and <strong>quirky</strong> library of UX copies to make your designs more conversational and meaningful 🔮</p><p><br></p><p>Created by:</p><p>Srikant Shetty, Vivek Kaarthek</p>","id":"847852693987887357","installCount":22373,"lastUpdateDate":"2022-05-03T11:21:51.135Z","likeCount":298,"name":"Typeout","publisherHandle":"srikantshetty","publisherId":"2885521","publisherName":"Srikant Shetty","runCount":17005,"viewCount":20331},{"description":"A featured toolbox for our own usage.","id":"848044263119954213","installCount":1608,"lastUpdateDate":"2020-06-01T06:25:55.067Z","likeCount":8,"name":"Qu Toolbox","publisherHandle":"466a5c0b_8424_4","publisherId":"3011844","publisherName":"ksco","runCount":1581,"viewCount":2778},{"description":"<p>Define takes a single layer/group/frame/component/instance, finds out what it contains and gives you the specs for all supported objects it finds. While Define works on complex objects with many nested layers, it works best if you use it to Define individual components.</p><p><br></p><p>Currently it reports the following specs:</p><ul><li>Text layers: font family, size, line height, color and opacity</li><li>Shapes: corner radius, fill color, stroke color, stroke width, stroke alignment and opacity</li><li>Effects: drop shadow</li></ul>","id":"848477408824641899","installCount":799,"lastUpdateDate":"2020-11-01T11:20:33.764Z","likeCount":13,"name":"Define","publisherHandle":"0ccb1737_de4c_4","publisherId":"2244232","publisherName":"Lorenzo","runCount":519,"viewCount":3073},{"description":"This is a plugin that provides an easy way to convert Frames to Groups.\n\nHow To Use:\nSelect layers and run the command 'Convert Frames to Groups' and all Frames inside the selected layers will be converted to Groups.\n\nCases:\n- If no layers are selected, then all frames on the page will be converted.\n- If you select a Frame, only the inner Frames will be converted, not the selected one.\n- If a component with the type 'Instance' is selected, nothing will be changed inside it. To convert Frames inside an Instance component you should select the source component of this Instance.","id":"848551444907255153","installCount":1974,"lastUpdateDate":"2020-06-04T12:00:08.459Z","likeCount":27,"name":"Frames to Groups","publisherHandle":"maxmartynov","publisherId":"77","publisherName":"Max Martynov","runCount":1493,"viewCount":3423},{"description":"This plugin is ideal for team meetings. No need to buy new software, all of this already exists in Figma. Simple and self-explanatory UI will make your meetings easy and productive.\n\nThe plugin already has templates for Retrospective, Brainstorm and User Story Mapping. Also, the plugin has a built-in timer so you can follow the timing of each iteration.\n\nHow to use it:\n1. Run the plugin.\n2. Choose the template that you need for your meeting.\n3. Hold the meeting in a comfy Figma environment.\nThe host has access to the timer, and time is available to everyone.\n\nTell me what other templates for teamwork you would like to see here. Stay in touch!","id":"848873559411765651","installCount":1297,"lastUpdateDate":"2020-06-08T13:14:06.366Z","likeCount":46,"name":"Retro Super Storm","publisherHandle":"voshkarina","publisherId":"557","publisherName":"Anna Voshkarina 🔥","runCount":870,"viewCount":7067},{"description":"This is a utility plugin that applies the export settings for different pixel density sizes on Android. You can read the documentation in the link below around why density independent pixels are used to support multiple devices. \n\nhttps://developer.android.com/training/multiscreen/screendensities\n\nHow to Use \n\n1. Select the frame containing the asset you'd like to export\n2. Press `command + /` or search for `Android Pixel Density Export Settings` in the Plugins menu\n3. Run the plugin\n4. Export settings should be prefilled \n\nAll credit goes to @brian (Brian Lovin) whose plugin (iOS Export Settings) gave me the initial idea and also allowed me to fork his repo on GitHub and tweak a few values to publish this plugin.\n\nFeel free to ping me on Twitter @justinmfarrugia if you have any questions or ideas around how I can extend this plugin.","id":"848942545795372443","installCount":3105,"lastUpdateDate":"2020-05-31T19:41:25.849Z","likeCount":23,"name":"Android Pixel Density Export Settings","publisherHandle":"jus","publisherId":"899573","publisherName":"Justin Farrugia","runCount":2070,"viewCount":6146},{"description":"Take a proactive approach to building color palettes for digital design projects.\n\nA flexible and diverse yet constrained color palette means the color you need for a new button or text treatment is always immediately at hand.\n\nIt's common to start a digital design project from a constrained set of key brand colors, but you will soon find yourself needing a more versatile selection of shades to refine your work and maintain accessibility. Paletteer lets you generate a more versatile set of color shades from your key brand colors. Simply select a set of objects and trigger Paletteer to generate swatches and save your new color palette to your local styles.","id":"849144368519969202","installCount":3389,"lastUpdateDate":"2022-07-04T15:40:21.370Z","likeCount":68,"name":"Paletteer","publisherHandle":"johnthedesigner","publisherId":"9791","publisherName":"John the Designer","runCount":2869,"viewCount":7685},{"description":"<p>Convert and export your designs from Figma to Sketch, Adobe XD or After Effects with one click.</p><p><br></p><h2>Features</h2><p><br></p><ul><li>One-click, automatic conversion from Figma to Sketch, Adobe XD or After Effects.</li><li>Use instantly in Figma; no other websites, apps or APIs required.</li><li>No Figma data is uploaded/processed/stored outside your file</li><li>Converts each artboard (layer-by-layer) to a real .sketch or .xd file.</li><li>Simple pages converted in seconds; larger pages in minutes.</li><li>Converts almost all layer styles and properties (see below for details).</li><li>Includes color and text style libraries from Figma.</li><li>Convert your Figma Components to Sketch Symbols (BETA)</li><li>Natively export artboards to After Effects from Adobe XD with converted .xd file</li><li>Includes all supported prototype links from Figma.</li><li>Download the exported .sketch or .xd file to your computer from Figma.</li></ul><p><br></p><h2>To use Convertify</h2><p><br></p><ol><li>Install Convertify and run the plugin in your Figma file.</li><li>Switch to the page you would like to convert.</li><li>Click on your desired <strong>Convert</strong> button.</li><li>Wait for the conversion process to finish.</li><li>Click the <strong>Download</strong> button to save your file!</li></ol><p><br></p><h2><strong>Documentation &amp; Video Tutorials</strong></h2><p><br></p><p>For plugin documentation and step-by-step video tutorials, please visit <a href=\"https://docs.hypermatic.com/convertify/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://docs.hypermatic.com/convertify</a></p><p><br></p><h2>Bug Reports</h2><p><br></p><p>Convertify is pretty new (like a baby panda); so if you do notice an obvious bug, please get in touch and we'll try to publish a fix for it!</p><p><br></p><h2>License</h2><p><br></p><p>After you've tried exporting your Figma designs with Convertify 10 times, you'll be asked to enter your license key. Your license key will allow you or your team to export an unlimited amount of Sketch or Adobe XD files using Convertify.</p><p><br></p><p>To purchase a license or to find out more, please visit <a href=\"https://hypermatic.com/convertify/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://hypermatic.com/convertify</a></p>","id":"849159306117999028","installCount":107681,"lastUpdateDate":"2022-07-26T08:49:35.594Z","likeCount":1065,"name":"Convertify Figma to Sketch/XD/AE","publisherHandle":"hypermatic","publisherId":"247","publisherName":"Hypermatic","runCount":95944,"viewCount":143470},{"description":"<p>Automatic applies export settings for iOS/Android/web assets in your design. Developers don't need to install additional plugins for correct slice formats. Also, it comes with small useful tools to make your handoff work more efficient.</p><p><br></p><p><strong>The plugin can</strong></p><ul><li>Apply exports for iOS/Android/web to selection</li><li>Clear all existed exports</li><li>Select object with export settings or visible slices</li><li>Rename layer names to snake_case, kebab-case, or lower case to fit development requirements</li></ul><p><br></p><p><strong>How to use</strong></p><ol><li>Select the objects need to export</li><li>Press Cmd+/ to search \"Export Settings Apply for iOS\" (Android, or web) and press enter</li><li>Done. Handoff.</li></ol><p> </p>","id":"849177219738272182","installCount":2003,"lastUpdateDate":"2021-05-31T03:29:41.279Z","likeCount":40,"name":"Export Settings Helper","publisherHandle":"moxamax","publisherId":"41340","publisherName":"Kai","runCount":1410,"viewCount":4490},{"description":"<p>Discover the wonderful world of glyphs, ligatures, and other characters with the Glyphs plugin. The plugin currently includes 184 Unicode Blocks.</p><p>Figma design and FigJam whiteboard are supported.</p><p><br></p><p><strong>How to use:</strong></p><ul><li>Drag the glyph from the plugin window and Drop anywhere on the canvas.</li><li>Left-click on a glyph to paste onto the canvas or into the text layer(s).</li><li>Right-click on a&nbsp;glyph to&nbsp;copy it to&nbsp;the clipboard.</li></ul><p><br></p><p><strong>Supported objects:</strong></p><ul><li>Texts;</li><li>Connectors;</li><li>Shapes with text (Square, Ellipse, Diamond, etc.);</li><li>Sticky notes;</li><li>\"Code block\" snippet (experimental).</li></ul><p><br></p><p><strong>Note:</strong></p><p>Some fonts may not include all the characters that you see in the plugin. If you don’t see a glyph after pasting, this means that the glyph doesn't exist in the font. Please select a&nbsp;glyph layer and&nbsp;select a&nbsp;different font in&nbsp;the Figma properties panel or use the <a href=\"https://www.figma.com/community/plugin/1036021586377337050/Change-Font\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Change Font</a> plugin.</p><p><br></p><p><em>--</em></p><p><em>by </em><a href=\"https://www.figma.com/@tank666\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\"><em>Yury Zeliankouski</em></a></p>","id":"849323869157549525","installCount":20418,"lastUpdateDate":"2022-06-09T14:00:03.094Z","likeCount":126,"name":"Glyphs","publisherHandle":"tank666","publisherId":"3489343","publisherName":"Yury Zeliankouski","runCount":19420,"viewCount":36241},{"description":"<p>Easily share a live preview of your Figma prototype with others</p><p><br></p><p>Run the plugin to present a QR code for others to scan on their devices to view your prototype in realtime in their browser</p><p><br></p><p>Note:</p><p>- You'll need to change your prototype view &amp; share settings accordingly to make sure that others are able to view it properly</p><p>- The reason you need to copy the share link to generate the QR code is that Figma doesn't allow plugins to access the file ID directly, which is necessary to load the prototype link</p><p><br></p><p>--- Live Preview does not store your share link ---</p>","id":"849390271196300773","installCount":2799,"lastUpdateDate":"2020-06-05T15:47:34.352Z","likeCount":89,"name":"Live Preview","publisherHandle":"CashApp","publisherId":"1609","publisherName":"Cash App","runCount":1900,"viewCount":8722},{"description":"<p>Copy CSS style, React inline style or Tailwind classname from a selected layer.</p><p><br></p><p><a href=\"https://github.com/jiangyijie27/figma-copy-css-and-react-style\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">https://github.com/jiangyijie27/figma-copy-css-and-react-style</a></p><p><br></p><p># What's the difference from coping CSS from the right inspection panel?</p><p>1. irrelevant absolute positions and comments removed.</p><p>2. export raw CSS style or React inline style.</p><p>3. custom style, such as single or double quotes, 6 digit hex color(#ffffff) or 3 digit(#fff).</p><p>4. custom CSS Variables substitution.</p><p><br></p><p>All the custom options can be found in the 'setting' menu.</p><p>More options will be supported soon.</p>","id":"849480985478663675","installCount":2914,"lastUpdateDate":"2021-03-19T03:59:30.377Z","likeCount":21,"name":"Copy CSS/React/Tailwind Style","publisherHandle":"c318af12_89ee_4","publisherId":"845509355731108285","publisherName":"Aragakey","runCount":2153,"viewCount":5583},{"description":"This plugin helps you adjust items quickly and according to your preferred grid.","id":"849626147309451800","installCount":814,"lastUpdateDate":"2020-06-02T12:33:02.756Z","likeCount":8,"name":"Pixel Grid Shaper","publisherHandle":"Florianwachter","publisherId":"107435","publisherName":"Florian Wachter","runCount":531,"viewCount":3180},{"description":"Sync with Pivotal Tracker! Keep up with your product's backlog with mindful modularity.\n\n💡Mindful Modularity:\n\nUnburden yourself from the idea of having to build and maintain a monolithic prototype. They should be cheap, disposable, and serve only as a communication tool to validate user stories.\n\nNeedsDesign:\n\nMaintain focus on solving only the problem you currently have. NeedsDesign provides an opinionated workflow by displaying user stories that have a \"needs design\" label and creates a new page for each. Whether a feature or a bug, NeedsDesign helps to reinforce modularity in the design process and avoid the siren's song that is a single prototype that maintains parity with working software.","id":"850769591324574445","installCount":309,"lastUpdateDate":"2020-06-05T16:23:55.159Z","likeCount":3,"name":"NeedsDesign for Pivotal Tracker","publisherHandle":"josericaurte","publisherId":"1114109","publisherName":"Jose Ricaurte","runCount":156,"viewCount":1820},{"description":"<p>Recognize text from image</p><p><br></p><h2>How to use</h2><ol><li>Select an image with text</li><li>Select a language</li><li>The recognized text appears to the right of the image</li></ol><p><br></p><h2>Supported language</h2><p>Latin (Croatian, Czech, Danish, Dutch, English, Finnish, French, German, Hungarian, Italian, Polish, Portuguese, Slovenian, Spanish, Swedish, Turkish)</p><p>Arabic</p><p>Bulgarian</p><p>Chinese</p><p>Greek</p><p>Korean</p><p>Japanese</p><p>Russian</p><p><br></p><p>Artwork by <a href=\"https://www.instagram.com/alicespoon.design/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Alice Spoon</a></p>","id":"851113644019611421","installCount":4935,"lastUpdateDate":"2022-06-07T12:43:05.317Z","likeCount":72,"name":"Recognize","publisherHandle":"icore","publisherId":"43289","publisherName":"Dmitry Frolov","runCount":4081,"viewCount":7999},{"description":"<p>现在你可以在 Figma 里使用中文字体选择器（Chinese Font Picker）选择和预览系统中已安装的中文字体。</p><p><br></p><p>提示：</p><ol><li>使用前提是确认已安装<a href=\"https://www.figma.com/downloads/?fuid=840472473581963753\" rel=\"noreferrer noopener nofollow\" target=\"_blank\"> Figma Font Installer</a></li><li>Chinese Font Picker 基于人工对字体 PostScript 名称一一对照记录，所以目前会有遗漏。我们在尽量收录更多的字体</li><li>插件因为网络等因素无法正常加载时，尝试开启科学上网并重启</li></ol><p><br></p><p>特别感谢：Better Font Picker，中文字体选择器基于 Better Font Picker 的开源。</p><p><br></p><p><a href=\"https://love.figma.cool/\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">❤️赞助我们</a> | Made by <a href=\"http://figma.cool/\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">Figma.Cool</a></p>","id":"851126455550003999","installCount":68616,"lastUpdateDate":"2021-07-22T00:10:41.995Z","likeCount":724,"name":"Chinese Font Picker","publisherHandle":"figmacool","publisherId":"4385338","publisherName":"Figma.Cool","runCount":56997,"viewCount":109372},{"description":"<p>Figma to html is a figma plugin that helps convert your figma design to code easily without loosing any bit of your design or colors. This is made possible using only the priniciples of good design and guide lines so as to get the so desired result of an exact replica of your design in code form.</p><p><br></p><p>For a pixel perfect service instead? Contact Figmafy at&nbsp;<a href=\"http://figmafy.com/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Figmafy.com</a>&nbsp;They will convert your Figma designs into HTML, React, Flutter, Wordpress, and Fully built software. Top rated agency and highly recommended for those that are looking for quality conversions from Figma.</p>","id":"851183094275736358","installCount":167242,"lastUpdateDate":"2022-07-05T16:10:49.429Z","likeCount":798,"name":"Figma to HTML","publisherHandle":"aroicx","publisherId":"544943","publisherName":"AroicX","runCount":149176,"viewCount":301678},{"description":"<p>Figma Finder is a launcher utility plugin.</p><p>It gives you quick access to all your essential things.</p><p><br></p><p>- Accessing pages, layers, views, and much quickly</p><p>- Browsing your figma’s Layers broad using keywords matching.</p><p><br></p><p>🚀Launcher feature</p><p><br></p><p>Add Frame:</p><p>1. Select a frame you want to save to the launcher</p><p>2. Enter a name in the input field at the bottom of the plugin and press the Add button.</p><p><br></p><p>Add View</p><p>1. Move to the position you want to save to the launcher.</p><p>2. Enter a name in the input field at the bottom of the plugin and press the Add button.</p><p><br></p><p>🔎Spotlight feature</p><p>- Enter a keyword in the search box, and the layers that match the keyword will be listed.</p><p>- When you select a search result item, you will be moved to the location of the layer of that item.</p><p><br></p><p>Developed with reference to ViewFinder.</p><p>Thanks for the great idea @ahmedmigo(Ahmed Genaidy)</p><p><br></p><p>💫Feature requests or Questions</p><p>Just hit me on Web (<a href=\"https://okazu.co\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">https://okazu.co</a>), via mail (<a href=\"mailto:hello@okazu.co\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">hello@okazu.co</a>)</p>","id":"851217747476215597","installCount":8093,"lastUpdateDate":"2020-08-23T20:45:14.013Z","likeCount":108,"name":"Figma Finder","publisherHandle":"okazu","publisherId":"819","publisherName":"Oz Hashimoto","runCount":6539,"viewCount":9515},{"description":"<p>Winner of the best graphic resource in 2022 by Figma. The largest icon, illustration, emoji and element sets in the world, now available within Figma and Figjam.</p><p><br></p><p><strong>Our UI sets</strong></p><p>They are well-drawn yet massive sets that are complete and consistent. There's a style for every brand.</p><p><br></p><ul><li>100,000+ icons in 23+ sets.</li><li>24,000+ illustrations in 22+ sets</li><li>3,000+ emojis in 4 sets.</li><li>1,300+ elements in 5 sets</li></ul><p><br></p><p><strong>Why Streamline's unique?</strong></p><p>Since 2010, the Streamline team has been making the biggest and best icon and illustration sets.</p><p>We’re on a mission to create a complete collection that not only looks incredible, but saves you time, hassle and money. Some Streamline exclusive features:</p><ul><li>Customize vector paths</li><li>Unlimited downloads (no pay-per-download).</li><li>Use in unlimited projects</li><li>Comprehensive UI sets in the world, so you won't ever have to draw missing ones or settle for something less.</li><li>Brilliant designs by veteran artists created and refined over 12 years.</li></ul><p><br></p><p><em>Koi Vinh, Adobe (Sr. Director of Product Design)</em></p><p><em>“I own several icon sets but the one that I return to over and over is the copious Streamline pack, which almost always seems to have just the pictogram I need when I dig into its catalog.”</em></p><p><br></p><p><strong>Generous free tier</strong></p><p>Our mission is to democratize access to high quality icons, illustrations and emoji.</p><p>This is why lots of Streamline resources such as 1,000 essential icons for user interfaces are free as vectors. Some PNGs and some powerful features to speed up your workflow are completey free. No sign up needed. 😉</p><p><br></p><p><strong>Fast workflow</strong></p><ol><li>Global search to find the perfect vector faster.</li><li>Drag and drop anywhere on the canvas.</li><li>Resize to any size you want and not just 16px/32px.</li><li>Free access to our web app which has more features such as save personal collections, multi-download, global recolor and more.</li><li>Customize stroke width of all line type sets.</li></ol><p><br></p><p><strong>License</strong></p><p>Read the<a href=\"https://intercom.help/streamlinehq/en/articles/6021970-license-tl-dr\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\"> tl;dr version</a>. Open-source sets are licensed under Creative Commons by 4.0. Free sets require attribution. Paid subscribers can use these for unlimited personal and commercial projects without attribution. To use more than 100+ icons/50 illustrations in a single project, please write to licenses@webalys.com for an extended license. Additional license information on our <a href=\"https://intercom.help/streamlinehq/en/collections/3005095-licenses\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">website</a>.</p><p><br></p><p><strong>Support</strong></p><p>Please visit our website <a href=\"http://streamlinehq.com\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">streamlinehq.com</a> to purchase a paid subscription or to contact support via the live chat widget at the bottom right. Feedback and suggestions are welcome!</p><p><br></p><p>– – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – –</p><p><br></p><p><strong>Testimonials</strong></p><p>Streamline is enthusiastically recommended by the world's best creators, designers and companies.</p><p><br></p><p>“The <strong>only icon set I've ever used</strong>. And the only one I will ever use. No regrets and not even worth looking at other ones.”</p><p><em>Tobias Van Schneider‍ (Semplice)</em></p><p><br></p><p>\"The whole Streamline project blows my mind. A truly massive collection of <strong>practical, useful, well-designed icons</strong>. It's so so so expansive.\"</p><p><em>Daniel Burka (Director of design)</em></p><p><br></p><p>\"Streamline has been my <strong>go-to icon source for years</strong>, now with illustrations. It works perfectly with my workflow in Figma and Webflow. The quality is that of a French student's penmanship — <strong>a world-class craft</strong>.\"</p><p><em>Tim Hansen (UX Product Designer)&nbsp;</em></p><p><br></p><p>\"After all these years I am <strong>still a fan</strong> of Streamline Icons\"</p><p><em>abdz. (Publication on design, photography, and UX.)</em></p><p><br></p><p>These icons and illustrations are<strong> super robust and customizable</strong>! A game-changer for web designers.</p><p><em>Meagan Fisher (Creative Director, Owltastic)</em></p><p><br></p><p>Happy Streamlinin'</p><p>Vincent</p><p><a href=\"https://twitter.com/streamlinehq\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">@streamlinehq</a></p>","id":"852192486284901337","installCount":102808,"lastUpdateDate":"2022-06-29T10:02:13.225Z","likeCount":1146,"name":"Streamline Icons, Illustrations, Elements and Emoji","publisherHandle":"05466272_9382_4","publisherId":"851850173584931773","publisherName":"Streamline","runCount":86415,"viewCount":129131},{"description":"<p>Pencil Pal is for folks who want to get a little more out of the pencil tool.</p><p><br></p><p>This tiny yet mighty utility enables users to select fill, stroke and opacity before and during drawing. While Figma has similar functionality for managing the pencil tool, here are four reasons why you'd use the plugin:</p><p><br></p><ol><li>It takes up less space than the standard panel</li><li>You can use the plugin even if you hide the UI</li><li>It has color switching features that work in a compact view</li><li>It now has Scribble mode!</li></ol><p><br></p><p>Select from 28 colors, 10 of which you can customize and save! Tap the \"Pal\" label to toggle colors.</p><p><br></p><p>To import a custom swatch, select any pencil line and tap any empty swatch space to import its style. Double tap a custom swatch space to clear it.</p><p><br></p><p>Edit your last-drawn pencil line in real time by changing stroke, width and color instantly!</p><p><br></p><p>Pencil Pal's compact design maximizes your drawing canvas.</p><p><br></p><p>Use the brand new Scribble mode to create new text nodes or add instances.</p><p><br></p><p>We can't wait to see what you draw next with Pencil Pal!</p>","id":"852436272709911555","installCount":6984,"lastUpdateDate":"2021-06-19T05:24:10.380Z","likeCount":135,"name":"Pencil Pal","publisherHandle":"ntfromchicago","publisherId":"1232151","publisherName":"Nelson Taruc","runCount":4774,"viewCount":15662},{"description":"This plugin will populate the selected layers with product-related data (title, price and image), based on your query.\n\nHow it works:\n\nSelect layers (text or rects).\n\n- All text layers containing $ or € will be filled with product prices.\nAll text layers named \"descr\" or \"description\" will be populated with product descriptions, if available.\n- All text layers that are not handled as \"price layers\" will be filled with product tiles.\n- Rects wil be filled with product covers.\n\nNotes:\n1. Too small layers are ignored.\n2. Locked layers are ignored.\n3. Rects without (visible) fills are ignored.","id":"852775808797718624","installCount":675,"lastUpdateDate":"2020-06-19T09:06:06.915Z","likeCount":12,"name":"BestPrice.gr","publisherHandle":"bestprice","publisherId":"853112049647044213","publisherName":"BestPrice","runCount":384,"viewCount":1911},{"description":"<p>Create a transparent variant of your desired color to apply dynamically on various backgrounds.</p><p><br></p><p><strong>How to use</strong></p><ol><li>Rename your background color to »bg« or »background«</li><li>Select your background and the other layers you want to convert</li><li>Run the plugin</li></ol><p><br></p><p><strong>Hint:</strong> Only fills of frames, rectangles and ovals are working.</p>","id":"853597191773109502","installCount":964,"lastUpdateDate":"2022-05-21T13:12:18.317Z","likeCount":27,"name":"Transparentize","publisherHandle":"marvin","publisherId":"416341","publisherName":"Marvin Bruns","runCount":791,"viewCount":2921},{"description":"Imagif is your one-stop solution for placing images & GIFs right into your design file.\n\nInsert stock images right into your Figma files.\n\nAlso, GIFs are not very common to use in Figma but one use case would be the presentations.\n\nYou can make your presentations quirky with these GIFs right into your Figma File & view that in prototype mode.\n\nThis is powered by Tenor & Pixabay open API.","id":"853653804321575174","installCount":8083,"lastUpdateDate":"2020-07-10T15:44:27.538Z","likeCount":82,"name":"Imagif","publisherHandle":"189d871c_e863_4","publisherId":"853643314079582227","publisherName":"AwesomeFigmaPlugins","runCount":6598,"viewCount":15508},{"description":"<h1>Bibbble is single source of truth UX/UI screenshot library.</h1><p>Handpicked solutions from most popular websites.</p><p><br></p><p><strong>New! Now includes \"Header builder\" to speed up your workflow.</strong></p><p><br></p><p>Bibbble helps you to:</p><ul><li>find right layouts / UI &amp; UX solutions for project</li><li>get inspiration from industry leaders</li><li>import high-quality screenshots within seconds</li><li>search design by specific keyword</li><li>REAL solutions from REAL websites</li></ul><p><br></p><p>For inspiration &amp; personal use only. All assets belongs to their original owners &amp; cannot be used commercially.</p>","id":"853711286555784472","installCount":6974,"lastUpdateDate":"2022-02-21T20:02:55.734Z","likeCount":172,"name":"Bibbble","publisherHandle":"klavs","publisherId":"1194976","publisherName":"KB","runCount":5515,"viewCount":10316},{"description":"<p>Sync rich text with formatting from Google Docs directly into your Figma file. Easy automation to format any text in Figma.</p><p><br></p><p>Advanced Feature: Sync parts of the document into multiple frames at the same time</p><p><br></p><p>// This is not an official plugin created by Google • It is simply created with ❤️ by Surbhi Gupta //</p><p><br></p><p>STEP 1</p><p>Create a Figma frame where you need Google Docs rich text</p><p><br></p><p>STEP 2</p><p>Write your text using styles, bullets, custom font sizes, italic etc in Google Docs.</p><p><br></p><p>STEP 3</p><p>Share the doc with “anyone on the web with the link”</p><p>Why: Current API limitations do not allow accessing private documents.</p><p><br></p><p>STEP 4</p><p>Make sure to select a Figma frame (or multiple frames) and run the plugin</p><p><br></p><p>### ADVANCED USAGE ###</p><p><a href=\"https://bit.ly/2ZBQY0Q\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://bit.ly/2ZBQY0Q</a></p><p>### END ADVANCED USAGE ###</p><p><br></p><p>|**********************************************</p><p>| Documentation at <a href=\"https://bit.ly/3e5gYXR\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://bit.ly/3e5gYXR</a></p><p>|***********************************************</p><p><br></p><p>SUPPORTED FORMATTING</p><p>At this time, the following formats in Google Docs are supported</p><p>* Headings</p><p>* Bullets</p><p>* Custom Font Sizes</p><p>* Bold, Italic, Strikethrough</p><p><br></p><p>COMING SOON</p><p>* Numbered Lists</p><p>* Color</p>","id":"853735224467356954","installCount":4518,"lastUpdateDate":"2020-07-07T00:00:48.242Z","likeCount":77,"name":"Google Docs Sync","publisherHandle":"fb2f1d69_b79f_4","publisherId":"853706967592222314","publisherName":"Saurabh Gupta","runCount":3015,"viewCount":14448},{"description":"<p>This plugin will add Tailwind Color Styles to your figma file. You can choose between the available presets.</p><p><br></p><p><strong>Features:</strong></p><ol><li>You can select the following presets from the dropdown - <a href=\"https://tailwindcss.com/docs/customizing-colors\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Tailwind v3</a>, <a href=\"https://v2.tailwindcss.com/docs/customizing-colors\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Tailwind v2</a>, <a href=\"https://v1.tailwindcss.com/docs/customizing-colors#default-color-palette\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Tailwind v1</a> and Tailwind UI (deprecated)</li><li>In addition you can generate a custom file using the <code>tailwind.config.js</code> file content using this <a href=\"https://varundevpro.com/tailwind-plugin-helper-ui/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">file generator</a></li><li>You can import the palette that you've create <a href=\"https://tailwind.ink/code\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">tailwind.ink</a> using the <a href=\"https://varundevpro.com/tailwind-plugin-helper-ui/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">generator</a> and custom file upload feature</li></ol><p><br></p><p>Thanks!</p><p><br></p><p>If you enjoy this plugin, <a href=\"http://twitter.com/varundevpro\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">please follow me on twitter</a>.</p>","id":"853905984020840743","installCount":7274,"lastUpdateDate":"2022-04-08T14:30:07.829Z","likeCount":77,"name":"Tailwind Color Palettes","publisherHandle":"varundevpro","publisherId":"4352909","publisherName":"Varun","runCount":6329,"viewCount":13021},{"description":"A time-saving classic – the fourth best plugin to hide/show all slices on the current page, regardless of being nested in components or locked.\n\nIn the fancy Figma frame\nThere was a slice\nAnd a locked layer\nAnd a component with –\nA group of locked slices.","id":"854105994002849081","installCount":174,"lastUpdateDate":"2020-07-04T20:07:57.356Z","likeCount":4,"name":"Goodnight Slices","publisherHandle":"1d7731fd_a695_4","publisherId":"709127","publisherName":"Nick Perdomo","runCount":104,"viewCount":890},{"description":"<p>Find and insert SVG versions of logos and brands without leaving the comforts of Figma. A simple, no-frills interface that saves you time and effort.</p><p><br></p><p>How It Works:</p><p>❶ Open the Vector Logos plugin</p><p>❷ Search for a logo or brand</p><p>❸ Click the one you'd like to insert</p><p>❹ Continue making beautiful designs</p><p><br></p><p>✨ Open source at <a href=\"https://github.com/kevinwuhoo/vector-logos-figma-plugin\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">https://github.com/kevinwuhoo/vector-logos-figma-plugin</a> ✨</p>","id":"854152902511629627","installCount":32547,"lastUpdateDate":"2020-12-23T21:23:56.705Z","likeCount":272,"name":"Vector Logos","publisherHandle":"deb08622_ff34_4","publisherId":"844051302653206504","publisherName":"Monstera Labs","runCount":27181,"viewCount":32143},{"description":"<p>A Figma plugin to easily swap one layer with another.</p><h2>How to Use</h2><ol><li>Select a layer in your Figma document.</li><li>Click&nbsp;Set Source Layer</li><li>Select another layer or layers that you want to replace</li><li>Click&nbsp;Replace Layer(s)</li><li>Keep Transforms: Check this box if the layers you're replacing are rotated or scaled, and you want to apply those transforms to the replacements.&nbsp;Note&nbsp;Scaling can only be determined if the layer you're replacing is an instance of a component.</li></ol><h2><br></h2><h2>New in 1.1: \"Replace Image Fills\"</h2><p>If your source layer has one or more image fills, you can replace just the images on the destination layers. This is useful if you want to quickly set an image but don't want to lose the other fills or style treatments (which would get overridden if you naively copy-pasted a layer's properties)</p><h3>Now you can also paste or drag images into the image well to use as a source.</h3><p><br></p><h2>Other notes:</h2><p>Originally I wanted to be able to use the clipboard as the source for replacing a layer, but it's not possible in Figma. If you're using the Figma Desktop app, you can assign \"Set Source Layer\" to a keyboard shortcut as well.</p><p>If your source layer is a component, it will replace the target layer with an instance of that component.</p><p>The thumbnail that's generated when you set the source layer also acts as a quick export — just drag it to your desktop to get a 2x resolution PNG of the source layer.</p>","id":"854164523358810429","installCount":2767,"lastUpdateDate":"2020-09-28T13:10:59.728Z","likeCount":42,"name":"Replace Layers","publisherHandle":"schwa23","publisherId":"2942331","publisherName":"Joshua Dickens","runCount":2400,"viewCount":5808},{"description":"<p>👀 Are you facing these problems?</p><p>A new (even existing) team member:</p><p>✅ Scenario 1: He starts looking at your product design on Figma and asks \"I wonder which React component has been made for this UI part?\"</p><p>✅ Scenario 2: He looks at a React component in your source code and wondering \"where is it component being used on the actual Figma design?\"</p><p><br></p><p>React Figma plugin helps you solve these problems, letting you manage your relationship between UI and Code. Not only that, it also helps you generate React Component code based on your Figma design.</p><p><br></p><p>Features:</p><p>- Component index</p><p>- Define component</p><p>- Generate React component code</p><p>- Generate React storybook (NEW)</p><p><br></p><p>TODO:</p><p>- Make storybook code generation optional</p><p>- Add support for TypeScript</p>","id":"854338091621516631","installCount":9673,"lastUpdateDate":"2021-03-01T14:04:15.478Z","likeCount":137,"name":"React Figma","publisherHandle":"thinh","publisherId":"3499832","publisherName":"Thinh Pham","runCount":7327,"viewCount":21139},{"description":"<p>Manage content writing across your team’s product with multiple state using Google Sheets and Airtable.</p><p><br></p><p>Context Switch lets people maintain the texting outside the Figma files and directly import the context into the text elements that need to update.</p><p><br></p><p>With Context Switch, your team can even maintain multiple state: internationalization: EN 🇺🇸, JP 🇯🇵, TW 🇹🇼... / condition: Normal 🙂, Deep Dive 👩🏻‍💻... at once! and the best of all, Designer control \"when\" to update the content and don't need to update content manually, plugin helps you do the works!</p><p>---</p><p>📌 We are still in alpha version, so be careful using it.</p><p>📌Support Image switching are on the roadmap.</p><p>📝 Setup Note: <a href=\"https://www.notion.so/Figma-Plugin-Context-Switch-Note-a6fe123a69474646b1be29123fb6703a\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">https://www.notion.so/Figma-Plugin-Context-Switch-Note-a6fe123a69474646b1be29123fb6703a</a></p><p>📧 Email me for any question: <a href=\"mailto:me@designtips.today\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">me@designtips.today</a></p>","id":"855144415496096302","installCount":758,"lastUpdateDate":"2021-10-19T08:06:27.460Z","likeCount":55,"name":"Context Switch","publisherHandle":"lichin","publisherId":"459","publisherName":"Lichin","runCount":533,"viewCount":4045},{"description":"A simple plugin to edit selected text(s) in real time.  \nNow you can type double-byte character such as CJK (Chinese, Japanese, Korean) without bugs!\n\n🔥 What you can:\n\n- Edit characters of selected text layer in real time\n  - Now you can toggle real-time setting\n- Edit multiple text layers\n- Type double-byte character such as CJK (Chinese, Japanese, Korean) without bugs\n- Press 'Esc' or 'Cmd + Enter' to close this plugin\n\n📮 Support:\n\nIf you have any plobrem or feedback, please use the GitHub Issues.\nhttps://github.com/ryonakae/figma-plugin-edit-text/issues\n\n---\n\nThis plugin is made by Ryo Nakae 🙎‍♂️.\n\n- https://brdr.jp\n- https://twitter.com/ryo_dg\n- https://github.com/ryonakae","id":"855231882544507460","installCount":1410,"lastUpdateDate":"2020-07-07T05:38:35.277Z","likeCount":28,"name":"EditText","publisherHandle":"ryo_dg","publisherId":"828596","publisherName":"Ryo Nakae","runCount":1097,"viewCount":3835},{"description":"Change all fonts in your designs easily.","id":"855541165287118497","installCount":19427,"lastUpdateDate":"2020-06-23T12:38:29.835Z","likeCount":169,"name":"Fonts Changer","publisherHandle":"renatox","publisherId":"2024330","publisherName":"RenatoX","runCount":18625,"viewCount":18003},{"description":"<p>Cookie Status is a simple plugin used to indicate the status of a screen of a project.</p><p><br></p><p>How to use?</p><p>Select a frame &gt; Navigate to the \"Plugins\" menu &gt; Select \"Cookie Status\" and them &gt; Select the status of your frame.</p><p><br></p><p>Tips</p><p>- You can select multiple frames at once. Each frame will get its own status badge.</p><p><br></p><p>Based on Frame Status by Héctor Vásquez, see it on [GitHub](<a href=\"https://github.com/hecvasro/status-for-figma\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">https://github.com/hecvasro/status-for-figma</a>).</p>","id":"855620240985972400","installCount":354,"lastUpdateDate":"2021-02-17T16:03:26.713Z","likeCount":11,"name":"Cookie Status","publisherHandle":"ea7eb24e_a7e8_4","publisherId":"2506396","publisherName":"OL Ru","runCount":311,"viewCount":1347},{"description":"Enable devs and designers to provide estimates for components and export them to a CSV.\n\n-----------------------------------\n\nUsage:\n\n- Start the plugin\n- Click on any frame\n- Add new line item and provide a label and value\n- Click save\n\nOnce you save, a roll up of all time estimates will be show with an option to export to CSV.\n\n-----------------------------------\n\nFeel free to write me if you have any problem or feedback (:\nPlease use the GitHub Issues (https://github.com/fvaldes33/figma-estimator-plugin/issues) or follow me on twitter and write me a DM @francoxavier33","id":"855655237472027323","installCount":313,"lastUpdateDate":"2020-06-20T14:45:51.322Z","likeCount":8,"name":"Devstimates","publisherHandle":"2543a80a_c629_4","publisherId":"606258","publisherName":"Franco Valdes","runCount":102,"viewCount":1600},{"description":"A plugin that changes text to match the layer name. It also resets the layer name so that the text and layer name are in sync (i.e. changing the text will also change the layer name).","id":"855655428693813948","installCount":1183,"lastUpdateDate":"2021-12-30T23:41:06.731Z","likeCount":20,"name":"Change Text to Layer Name","publisherHandle":"josh_diaz","publisherId":"276321","publisherName":"Josh","runCount":1048,"viewCount":2593},{"description":"<p>This plugin brings the amazing 3D illustations library called H A N D Z by Samuel Briskar and Ade Hidayat to Figma.</p><p><br></p><p>With this plugin you can search hand gesture illustration and choose various colors and type of the hand.</p><p><br></p><p>Checkout the library: <a href=\"https://www.handz.design/\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">https://www.handz.design/</a></p>","id":"856130306757736209","installCount":59115,"lastUpdateDate":"2021-10-26T09:43:17.827Z","likeCount":451,"name":"Handz 3D Illustration","publisherHandle":"sonny","publisherId":"123","publisherName":"Sonny Lazuardi","runCount":49246,"viewCount":56165},{"description":"Style lens surfaces all the fills, fonts, strokes, shadows, blurs, radii, and text you’re using across your page and lets you quickly make broad sweeping changes to all the layers at once. It’s like the inspector... but in reverse.

\n\nHere are some examples of when Style Lens comes in handy:\n

👉 Changing accent or brand colors across thousands of layers.\n

👉 Making copy changes across large UX flows\n

👉 You want to verify your file isn’t using colors, styles, or text that is incorrect

\n👉 You forgot to make components early on 😅\n\n

Known Issues:
\n- Gradients aren’t currently supported\n
- Mixed properties will get overwritten (ex: multiple corner radii)\n
- When changing text, rich text won’t be preserved","id":"856227067026087708","installCount":3796,"lastUpdateDate":"2020-07-03T12:24:29.102Z","likeCount":98,"name":"Style Lens","publisherHandle":"goodplugins","publisherId":"857607326137882682","publisherName":"GOOD PLUGINS","runCount":2819,"viewCount":6500},{"description":"Navigate to node by link from browser or app without file reload.\n\nCreate link to the node in Figma file, open plugin, put link to the input and hit \"Go!\".","id":"856246737669471011","installCount":735,"lastUpdateDate":"2020-06-21T13:00:01.411Z","likeCount":9,"name":"Direct Link","publisherHandle":"3944621","publisherId":"3944621","publisherName":"Артем Клюквин","runCount":738,"viewCount":3367},{"description":"<p>Limit the number of lines of text that appear in your designs.</p><p><br></p><p>Select one or more blocks of text, set the number lines you need, then just click apply.</p><p><br></p><p>If you select text that is part of a component or instance you can choose to apply it to the selection only or apply across all the instances to keep them consistent.</p><p><br></p><p>If you need the original text back just press reset and your original text will reappear.</p><p><br></p><p>Hopefully this plugin will become redundant in the near future but in the meantime you can save yourself a bit of time.</p><p><br></p><p>A guide for this plugin with a bit more detail can be found here:</p><p>https://www.figma.com/proto/jwWFEWDI10CUk83d1r7Mcv/Plugin---Truncate-Lines?node-id=137%3A259&amp;scaling=scale-down-width&amp;page-id=137%3A258</p>","id":"856491403215301428","installCount":4815,"lastUpdateDate":"2020-11-04T15:44:57.391Z","likeCount":93,"name":"Truncate Lines","publisherHandle":"andrewcobley","publisherId":"1543194","publisherName":"Andrew Cobley","runCount":4042,"viewCount":11788},{"description":"(beta, code won't exactly match input)\n\nEasily convert Figma designs directly to Kotlin code for Jetpack Compose. (Not affiliated with either of them)\n\nOften times designs contain non-repeated distances, colours and proportions. Replicating these designs can be very tedious, and discrepancies in design and implementation can lead to \"split realities\".\n\nPrimarily, this is to cut out taking measurements, reduce design-implementation back and fourth and save time/energy even when the designer and implementer are the same person.\n\nThe code outputted may be pretty verbose, but each Figma Component creates a Jetpack Composable function, making the output very easy to refactor in small chunks.\n\nNote: You need to be running the server (https://github.com/CaelumF/FigmaToCompose)\n\nPlease don't hesitate to create an issue or send me an email for anything that doesn't work or if there's a feature you'd like :)","id":"856651176156241740","installCount":1777,"lastUpdateDate":"2020-06-23T17:28:50.973Z","likeCount":34,"name":"Figma to Compose","publisherHandle":"88876f83_5fd8_4","publisherId":"909","publisherName":"Caelum Forder","runCount":1034,"viewCount":5595},{"description":"Iterations always demand new additions to components. All of us have encountered cases where we need to add something to a component but don’t want that to show up in all the hundreds and thousands of existing instances. We finally end up creating a new component so that the existing work is not affected. This plugin solves this issue with a single click.\n\nFollow these steps to hide a particular layer from all component instances\n• Select the layer/group/frame that you want to hide from one of the instances of a component\n• Select Hide Layers from Instances -> Hide\n• The selected layer/group/frame will be hidden from all instances in the current page\n\nUse the Force Hide option if the layer that you want to hide is part of a component that is nested in multiple other components and you want to hide the layer in all of them at once.\nEg.: If you want to hide a layer in an icon component that is already used in various other components like different state and sizes of buttons, then Hide option will just hide the layer in the selected state or size of the button. Whereas Force Hide will hide the layer in all the instances of all the components that this icon is used.\n\nThis plugin works only on instances and not on components\nCAUTION: When using the Force Hide option. ensure that the name of the layer you are hiding is unique. If not, multiple layers may get hidden.\n\nFeels too small a feature for a plugin? There is also a Scripter File for this that you can use. https://www.figma.com/community/file/858014268242545394/Hide-Layers-from-Instances\n\nDo let us know if you want any additional features. We'll try adding it. Cheers! :)","id":"857282333770086337","installCount":367,"lastUpdateDate":"2020-06-26T07:02:54.535Z","likeCount":20,"name":"Hide Layer from Instances","publisherHandle":"qubecinema","publisherId":"4276396","publisherName":"Qube Cinema","runCount":202,"viewCount":2019},{"description":"<p>Accelerate the design to development process by getting code, based on your design.&nbsp;</p><p><br></p><p><strong>What can you do with Anima?</strong></p><p><br></p><p><strong>👩‍💻 Export Figma to HTML, CSS, React, or Vue code</strong></p><ul><li>Convert Figma designs or components to clean code</li><li>Share with developers, giving them the power to produce code according to their preferences</li></ul><p><br></p><p><strong>🎨 Build code-based prototypes</strong></p><ul><li>Create prototypes that feel like the real product</li><li>Add charts, videos, live text inputs, google maps, drop-down menus, entrance animations, and embed any type of code with Anima</li><li>Make your designs fully responsive with breakpoints and constraints support</li></ul><p><br></p><p><strong>🔗 Share a live URL with your team and users</strong></p><ul><li>Get team feedback</li><li>Perform user testing with a public or a private link</li><li>Impress your stakeholders and clients with stunning demos</li></ul><p><br></p><p><strong>What does Anima’s developer-friendly code look like?</strong></p><p><br></p><ul><li><strong> Reusable code components:</strong> Anima automatically recognizes repeating components and minimizes code duplications. The result is code that is easy to read and maintain.</li><li><strong> Automatic flex-box layout:</strong> Anima’s Auto-Flexbox layout allows relative position for dynamic content.</li><li><strong> Zero dependencies:</strong> Anima’s code is meant to save engineers time while giving them complete control of the code.</li></ul><p><br></p><p>Join our Anima Community on <a href=\"https://www.facebook.com/groups/animaapp?utm_source=figma_commu&amp;utm_medium=desc_section&amp;utm_campaign=figma_commu&amp;utm_content=facebook_group\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Facebook</a> and <a href=\"https://www.instagram.com/animaapp/?utm_source=figma_commu&amp;utm_medium=desc_section&amp;utm_campaign=figma_commu&amp;utm_content=instagram\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Instagram </a>👋🏻</p><p><br></p><p>Got questions?</p><p>We’ve got the answers! Check out our <a href=\"https://support.animaapp.com/en/?utm_source=figma_commu&amp;utm_medium=desc_section&amp;utm_campaign=figma_commu&amp;utm_content=help_center\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Help Center</a> for dozens of helpful articles 💡</p>","id":"857346721138427857","installCount":290110,"lastUpdateDate":"2022-07-21T12:56:56.589Z","likeCount":2918,"name":"Anima - Export Figma to HTML, React & Vue code","publisherHandle":"anima","publisherId":"3400105","publisherName":"Anima","runCount":256673,"viewCount":365391},{"description":"Add top and bottom banner markings to every page!","id":"857372981274488789","installCount":537,"lastUpdateDate":"2020-06-23T21:40:05.671Z","likeCount":1,"name":"Banners","publisherHandle":"josericaurte","publisherId":"1114109","publisherName":"Jose Ricaurte","runCount":528,"viewCount":2770},{"description":"<p>This plugin converts color tokens to code.</p><p>It currently supports JSON / CSS / SCSS / Android formats.</p><p><br></p><p>It makes the task of converting the color palette of your design system or design guidelines into code easier.</p><p><br></p><p>Note:</p><p>- Only SOLID Color is supported.</p>","id":"857997781988109369","installCount":1394,"lastUpdateDate":"2021-10-15T10:34:56.808Z","likeCount":22,"name":"Colors to Code","publisherHandle":"hiloki","publisherId":"410711","publisherName":"Hiroki Tani","runCount":1580,"viewCount":4428},{"description":"<p>A multi-layer/multi-frame <strong>clipboard tool </strong>that respects layer index. Select any number of layers from multiple frames and duplicate that selection to multiple frames simultaneously.</p><p>Copypasta is multiplayer-compatible.</p><p><br></p><h2><strong>How to use Copypasta 🍝</strong></h2><ol><li>Run plugin;</li><li>Select one or more layers nested in one or multiple frames;</li><li>Press “Save selection”;</li><li>Select one or multiple target frames;</li><li>Press “Duplicate layers”;</li><li>The original selection of layers will be duplicated across the selection of target frames.</li></ol><p><br></p><p>The plugin has 3 settings:</p><ul><li><strong>Respect layer index</strong>: If switched on, the plugin will paste duplicate layers in the same index as their source (e.g. if the bottom layer of frame A is copied, it will be pasted at the bottom of frame B;</li><li><strong>Select duplicate layers</strong>: If switched on, the plugin will automatically select all new layers after a successful duplication;</li><li><strong>Keep window open</strong>: If switched on, the plugin window will remain open after a successful duplication. The last valid source selection remains saved and can be duplicated to a new selection of target frames.</li></ul><p><br></p><h2><strong>Use Cases 🔨</strong></h2><ul><li>(Multi) Paste in place by respecting the original layer index;</li><li>(Multi) Paste in place even in X and Y values larger than the frame dimensions;</li><li>Place repetitive elements in a mockup of a website;</li><li>Spread updates across screens in a app mockup;</li><li>Quickly iterate new proposals;</li><li>Merge content;</li><li>Anything else you find it useful for!</li></ul><p><br></p><h2><strong>In Detail 🔎</strong></h2><ul><li>Any type of layer can be duplicated;</li><li>Only layers nested in a Frame, Main Component, or Instance are considered by the plugin;</li><li>If a Main Component is selected it will be duplicated as an Instance;</li><li>The duplicated layers are placed on top of the target frame layers;</li><li>A Main Component can be selected as a target frame. An Instance cannot;</li><li>The original and target frames can differ in dimension;</li><li>A valid selection is only replaced by another valid selection;</li><li>The operation time will increase if a large amount of layers and target frames are selected.</li><li>The plugin only duplicates the layers when pressing “Duplicate layers”. Any change applied to the original selection after pressing “Select” will be duplicated. Any deleted layer will not be found by the plugin;</li><li>The plugin will measure the success of the operation by showing how many layers weren’t found, and how many were duplicated inside and outside the bounds of the target frames.</li></ul><p><br></p><p>❤ Copypasta? <a href=\"https://www.buymeacoffee.com/ruipcabrinha\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Buy me a coffee</a>!</p>","id":"858058624022776906","installCount":3535,"lastUpdateDate":"2022-05-18T18:33:18.054Z","likeCount":54,"name":"Copypasta","publisherHandle":"rui_p_cabrinha","publisherId":"1001403","publisherName":"Rui P. Cabrinha","runCount":2805,"viewCount":4983},{"description":"<p>The Figma-Low-Code plugin allows you to use your Figma designs directly in <a href=\"http://VUE.js\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">VUE.js</a> applications. By using Figma-Low-Code you can reduce the need for manual hand-offs greatly.</p><p><br></p><p>The plugin allows to define advanced widgets (input, lists and more) and Hover and Focus states. In addition, you can bind elements to backend code and data.</p><p><br></p><p><strong>New:</strong></p><ul><li>Link &amp; SEO support</li></ul><p><br></p><ul><li><a href=\"https://github.com/ParthJadhav/Tkinter-Designer\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">TKInker</a> support as target platform</li></ul><p><br></p><ul><li>DropDown elements as new element types supported.</li></ul><p><br></p><ul><li>Figma-Low-Code support basic interactive components now. The feature is still in beta, but all feedback is welcome.</li></ul><p><br></p><ul><li>Figma-Low-Code also allows you to directly use your design system in VUE components (e.g. as &lt;MyButton/&gt;). Check out the <a href=\"https://youtu.be/xh95ile-QqY\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">video</a></li></ul><p><br></p><p>Detailed documentation can be found on our Github page and our YouTube channel:</p><p><br></p><p><a href=\"https://github.com/KlausSchaefers/figma-low-code\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">https://github.com/KlausSchaefers/figma-low-code</a></p><p><br></p><p><a href=\"https://www.youtube.com/channel/UC433NvRp6OeA5uewcYV15HA\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">https://www.youtube.com/channel/UC433NvRp6OeA5uewcYV15HA</a></p>","id":"858477504263032980","installCount":3753,"lastUpdateDate":"2021-10-31T17:58:32.339Z","likeCount":96,"name":"Figma-Low-Code","publisherHandle":"fae096ec_eb5c_4","publisherId":"383073","publisherName":"Klaus Schaefers","runCount":2902,"viewCount":10134},{"description":"<p><strong>Figma’s Selection Color tool but for Fonts and Styles.</strong></p><p><br></p><p>Easily view all the distinct fonts used in the current selection. Then, select all text nodes of a similar font.</p><p><br></p><p><strong>WHY THIS PLUGIN WILL CHANGE YOUR WORKFLOW</strong></p><p>This plugin removes the pain of finding and selecting text nodes.</p><p><br></p><p>Designers relate a text node with its purpose - heading, caption, label, warning etc. A well crafted design system has font style names that match the purpose of the style. Thus, font types and style names are the best way to get to a text node. This plugin makes that possible.</p><p><br></p><p>In our beta testing, designers who use this plugin use it so often and after a while can’t imagine their workflow without it. The plugin is designed to be a narrow and vertical dialog so that it can be kept open while you are working on your designs.</p><p><br></p><p><strong>LATEST RELEASE</strong></p><p>Longer style names are now fully visible</p><p><br></p><p><br></p><p>HOW TO USE THE PLUGIN</p><p><br></p><p>STEP 1</p><p>Select a frame or a group of frames</p><p><br></p><p>STEP 2</p><p>Run the plugin to see the distinct list of fonts used in the selection</p><p><br></p><p>STEP 3</p><p>Click on the Font or Style Name to select ALL the text nodes that match that style.</p><p><br></p><p>STEP 4</p><p>If you make any changes to font or style, then refresh to update the font list.</p><p><br></p><p>COMING SOON</p><p>Cycle through text node selection</p><p>Auto refresh font list after changes are made</p><p>Spell check on text nodes</p>","id":"858763146572554425","installCount":5226,"lastUpdateDate":"2021-06-05T14:57:46.316Z","likeCount":67,"name":"Select by Font","publisherHandle":"fb2f1d69_b79f_4","publisherId":"853706967592222314","publisherName":"Saurabh Gupta","runCount":4921,"viewCount":8200},{"description":"Easily facilitate collaborative design sessions directly in Figma.\n\nKey Features\n\n- Create editable sticky notes with just a click. Team members don’t need have prior knowledge of Figma.\n\n- Add common frameworks to your whiteboard without having to deal with shape and path tools (even more coming soon!)\n\n- Timebox your exercises and keep things moving with a simple countdown timer.","id":"858880269051401414","installCount":9630,"lastUpdateDate":"2020-07-06T14:32:04.777Z","likeCount":324,"name":"Workshops","publisherHandle":"keatonprice","publisherId":"3491821","publisherName":"Keaton Price","runCount":5741,"viewCount":35478},{"description":"This plugin helps you sort child layers of an Auto Layout frame based on their common text layer names. It's an ideal plugin if you work a lot with tables or long lists of components and you don't want to spend time and manual labour to sort each layer by hand. With this plugin you can sort your layers with just a few clicks\n\n**How it works**\n1. Select an Auto Layout frame and make sure it has child layers with corresponding text layer names\n2. The plugin will check what text values can be sorted and displays this in the plugin interface.\n3. Choose the type of text value you want to sort\n4. Choose ascending or descending\n5. And lastly → hit the 'Sort' button\n\nYour list view has been sorted!","id":"859060144551014618","installCount":1462,"lastUpdateDate":"2022-05-29T19:06:24.455Z","likeCount":21,"name":"Auto Layout Sorter","publisherHandle":"mishaheesakkers","publisherId":"4420748","publisherName":"Misha Heesakkers","runCount":1110,"viewCount":4445},{"description":"<p><strong>V2.0 is here 🎉</strong></p><p><br></p><p>Annotate it! makes it easy to annotate your wireframes and/or designs the smart way. Simply select a frame and click Add new to create annotations automagically.</p><p><br></p><ul><li>Select individual frames</li><li>Rename frames (only in the plugin)</li><li>Drag to reorder</li><li>Markdown text for smart formatting</li><li>Smart annotation marker placement</li><li>Assign a color for various intents</li><li>Update, Edit, Delete annotations and Annotate it! reorders your annotations automatically</li></ul><p><br></p><p>—</p><p><br></p><h2>How does it work?</h2><p><br></p><ul><li>Select a frame on your Figma page to add annotation to.</li><li>Click <strong>Create annotation</strong> button to add an annotation to the selected frame.</li><li>Select a color for your marker if you’d like to create annotations for different purposes.</li><li>Click on the <strong>delete</strong> button to delete an annotation (the numbers will update auto-magically).</li><li>You can also use markdown for formatting your annotation description:</li></ul><p>**Bold**</p><p>_Italics_</p><p>Underlined</p><p>~Strikethrough~</p><p>Links</p><p>- Unordered List</p><p>1. Ordered List</p><p>--- Divider</p><ul><li>Click on the <strong>edit</strong> button to rename your frame group (does not rename the original frame name)</li><li>To create annotations on other frame(s):</li></ul><p>Select another frame on your Figma page</p><p>Click the “+” button</p><ul><li>To delete annotations from other frame(s):</li></ul><p>Select the frame group from the plugin</p><p>Click the “trash” button to delete all the annotations</p><p>from that frame (this action cannot be undone)</p><p>—</p><p><br></p><p>The Plugin was Crafted &amp; Designed by @sonaliagrawal, and Developed by @madebyfabian.</p><p><br></p><p>It's Open Source, so for contributing, please visit https://github.com/madebyfabian/figma-plugin-annotate-it/</p><p><br></p><p>—</p><p><br></p><p>If you have any ideas for features, issues or perhaps ways to improve the plugin, we would love to hear from you via the Feedback-Button inside the Plugin, via Twitter (@sonaliagrawal and @madebyfabian), via a Github Issue or via Email (annotate-it@uxtionary.com).</p><p><br></p><p>Made with ♥ in Dallas, Texas &amp; Nuremberg, Germany.</p>","id":"859894273811051899","installCount":18326,"lastUpdateDate":"2022-03-23T20:26:45.711Z","likeCount":476,"name":"Annotate it!","publisherHandle":"f","publisherId":"358726","publisherName":"Fabian B.","runCount":17686,"viewCount":40402},{"description":"Picks a random card from a selection.","id":"859900913627976061","installCount":318,"lastUpdateDate":"2020-07-09T16:12:01.166Z","likeCount":5,"name":"Pick A Card","publisherHandle":"jtewright","publisherId":"1879250","publisherName":"Joseph Wright","runCount":221,"viewCount":1292},{"description":"Generates darker tones of a color you like or choose.\n❤","id":"860537667489348101","installCount":820,"lastUpdateDate":"2020-07-02T21:25:28.156Z","likeCount":13,"name":"Darken tone pallete","publisherHandle":"lucasdev","publisherId":"552007","publisherName":"Lucas pereira de oliveira","runCount":636,"viewCount":1667},{"description":"It allows you to have more control over layer visibility.\n\nCurrently only supports hidding/showing layers according to 1 parameter:\n-  Layer name","id":"860594998582698512","installCount":316,"lastUpdateDate":"2020-07-02T20:45:24.011Z","likeCount":4,"name":"Toggler","publisherHandle":"ab85e3e4_db4f_4","publisherId":"2829023","publisherName":"Rafael Ramalho","runCount":295,"viewCount":1431},{"description":"<p>The Official GitLab plugin to seamlessly upload your designs from Figma to GitLab issues.</p><p><br></p><p>Design is larger than designers. Design Management should involve the relevant stakeholders in the conversation on functionality, interaction, UX and much more. Now, you can start those productive hand-off conversations over designs and source code in GitLab while keeping Figma connected to make any improvements. Collaborate seamlessly where the action happens with GitLab’s Figma plugin.</p><p><br></p><p>Note: this plugin is currently in Beta. At GitLab, we believe that everyone can contribute. If you’d like to request a feature or report a problem, create an issue or submit a merge request at the <a href=\"https://gitlab.com/gitlab-org/gitlab-figma-plugin\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">GitLab Figma Plugin</a> project.</p>","id":"860845891704482356","installCount":3528,"lastUpdateDate":"2022-06-28T06:00:43.997Z","likeCount":129,"name":"GitLab","publisherHandle":"gitlab_dev","publisherId":"1043329711592676347","publisherName":"Gitlab Integrations Group","runCount":2398,"viewCount":12703},{"description":"<h1><strong>600+ Free icons for your next project in 5 styles (Light, Bold, Bulk, Two-tone, Broken)</strong></h1><p><br></p><p>What's inside:</p><p>— <strong>Curved Type ( New🔥 )</strong></p><p>— 5 Styles (Light, Bold, Bulk, Two-tone, Broken)</p><p>— Organized library for Figma</p><p>— Fully vector</p><p>— Grid size 24px</p><p>— Pixel Perfect</p><p>— Trendy</p><p>— Easy to use in Figma</p>","id":"861001888228800074","installCount":74936,"lastUpdateDate":"2021-04-12T18:01:31.110Z","likeCount":733,"name":"Iconly v2.3","publisherHandle":"sina_developer","publisherId":"323003","publisherName":"Sina Golizadeh","runCount":68896,"viewCount":64761},{"description":"Spot the differences in text content between two items. Works on text layers or frames, instances, and components that contain text.\n\n1. Open the plugin\n2. Select your original item\n3. SHFT + Select the changed item\n4. Hit 'Compare' and view the result!","id":"861012857284170316","installCount":597,"lastUpdateDate":"2021-01-29T03:12:18.161Z","likeCount":14,"name":"Compare Text","publisherHandle":"will","publisherId":"26","publisherName":"Will Berger","runCount":319,"viewCount":2332},{"description":"Quick help to build a beautiful thumbnail!\n\nHow to use\n\nStep 1. Choose a Twemoji you like.\nStep 2. Choose a background color you like.\nStep 3. Click \"Done\" button.\nStep 4. We will create a \"thumbnail\" page, right click to set the frame as a thumbnail.","id":"861544263629766272","installCount":3223,"lastUpdateDate":"2021-03-08T15:27:56.355Z","likeCount":80,"name":"Quick Thumbnail","publisherHandle":"leadream","publisherId":"39","publisherName":"Hal Lee","runCount":2993,"viewCount":9080},{"description":"A plugin to add a dimmer to your frame\n\nJust select the frame you want to add dimmer, and run the plugin.\n\nUpdate:\n- Set dimmer color and opacity\n- Save dimmer theme\n\n---------\nFuture update:\n- Explore dimmer theme / predefined set up\n- Auto add dialog/pop-up\n- Multi screen dimmer","id":"861606501301970580","installCount":593,"lastUpdateDate":"2020-07-31T15:57:32.593Z","likeCount":23,"name":"Dimmer It!","publisherHandle":"designjamid","publisherId":"3516629","publisherName":"Design Jam Indonesia","runCount":428,"viewCount":1493},{"description":"Resize your profile and cover images for various social media apps in seconds. \n\n-> This plugin includes presets for the following social media:\n• Twitter\n• Instagram\n• Facebook\n• Tumblr \n• Slack\n• Vimeo \n• Youtube\n• Notion\n• WeChat\n• VK\n• Custom Sizes\n\n-> To use this plugin\n1.  Install and run the “FigPug Profile Generator” plugin\n2. Select your profile and cover images \n3. Confirm the images\n4. Select the social media websites you’d like to generate for\n5. Click the “generate” button\n6. Export your images \n\n-> License\nUpon install, you can access a selected number of social media presets. To access all of the social media presets, you will be asked to purchase a license. Your license will allow you to generate an unlimited amount of profiles. \n\nTo purchase a license, please visit https://figpug.com\n\nIf you’ve discovered a bug or have any feature requests, please don’t hesitate to reach out: hello@figpug.com","id":"861623210715693719","installCount":1447,"lastUpdateDate":"2020-08-16T10:12:29.501Z","likeCount":28,"name":"FigPug Profile Generator","publisherHandle":"FigPugTeam","publisherId":"861638536625223323","publisherName":"FigPug","runCount":906,"viewCount":4534},{"description":"Mini Canvas is an additional canvas to display your selected layer at 100% zoom. It’s primarily useful when designing icons so you don’t need to constantly zoom in and out. Additionally, you can “pin” a layer which becomes useful when pinning components. For example, you might pin a tab bar component, with several icon components inside. When making changes to any of the icon components, you’ll always see updates for the tab bar, making it easier to ensure all the icons feel balanced next to one another.

\n\nEnjoy!\n\n
Notes: \n- Updates to the canvas are only generated everytime your selection changes. If you have a pinned layer, you’ll need to deselect all layers to generate a new update.","id":"861624958788888216","installCount":1871,"lastUpdateDate":"2020-07-05T15:12:43.548Z","likeCount":42,"name":"Mini Canvas","publisherHandle":"goodplugins","publisherId":"857607326137882682","publisherName":"GOOD PLUGINS","runCount":827,"viewCount":3110},{"description":"Search for text within your design.\n\nYou have lots of frames in your design file and you are looking for a specific thing, but you don't know where in the file it is. You wish you could just search within the file.\n\nThis is what this plugin is for.\n\nHave feedback? Found a bug? Send me a message!\nhttps://yukot.typeform.com/to/RXwpJVvD","id":"861860229188829870","installCount":4781,"lastUpdateDate":"2020-08-01T02:23:53.688Z","likeCount":23,"name":"Text Search","publisherHandle":"yuko","publisherId":"2082243","publisherName":"yuko","runCount":4451,"viewCount":11218},{"description":"<h2>Figma to React with Quest</h2><p><br></p><p>The better way to build your front end. Convert your Figma to React code components automatically. Pixel-perfect to your design, responsive across screen sizes. Export clean, efficient code that is extendable with your custom code or business logic. Try it risk free.</p><p><br></p><p><strong>Watch the Intro Video:</strong>&nbsp;<a href=\"https://youtu.be/FAr23TFwGB0\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://youtu.be/FAr23TFwGB0</a></p><p><br></p><p><strong>Key Features:</strong></p><ol><li>Easy to use - see your design come to life in the form of React code just by exporting to Quest. Iterate easily by looking at the end product - no more guesswork.</li><li>Works with Figma features like responsiveness, variants, auto layout, etc.</li><li>Use the built-in design system or bring your own.</li><li>Supports Material UI Component library by default. Or you can build your own or bring in your own (Contact us if you’d like to import your existing UI component library).</li><li>Set up props, bindings and state triggers easily without writing any code.</li><li>Export Figma to React: Clean code that is as good as hand-coded by a developer.</li><li>Separation of concerns between the presentation layer and the business logic - iterate on your design as often as you want and generate the presentation layer without any development effort.</li></ol><p><br></p><p>Risk-free - build one component and add it to your existing React app. Build more as you go - no need to throw away what you already have and start over.&nbsp;</p><p><br></p><p><strong>To get started:</strong></p><ol><li>Install this plugin</li><li>Login to your Quest account</li><li>Follow our Quick Start list to build your first component:&nbsp;<a href=\"https://docs.quest.ai/getting-started/quick-start\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://docs.quest.ai/getting-started/quick-start</a></li></ol><p><br></p><p><strong>Learn more:</strong>&nbsp;<a href=\"https://quest.ai/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://quest.ai/</a></p><p><strong>Docs:</strong>&nbsp;<a href=\"https://docs.quest.ai/react/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://docs.quest.ai/react/</a></p><p><strong>Support:</strong>&nbsp;<a href=\"mailto:support@quest.ai\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">support@quest.ai</a></p>","id":"862039267149408972","installCount":28903,"lastUpdateDate":"2022-07-20T02:15:15.847Z","likeCount":309,"name":"Quest - Figma to React Components, HTML pages","publisherHandle":"madewithquest","publisherId":"882756015971217236","publisherName":"Quest","runCount":28485,"viewCount":54900},{"description":"<p>Put UI or images into perspective using three unique methods; non-destructive isometric skewing, 3D with full perspective and FoV control, or have complete freedom by conforming to a four point vector.</p>","id":"862059663689780943","installCount":601,"lastUpdateDate":"2022-07-07T19:56:35.341Z","likeCount":75,"name":"Perspective Toolkit","publisherHandle":"jake_ly","publisherId":"2740855","publisherName":"Jake Blakeley","runCount":4042,"viewCount":2653},{"description":"<p>✦ Design Tokens, Theme Management and more...</p><p><br></p><p>Define or update design tokens in one single panel, right from Figma.</p><p>And, immediately see the changes cascading through your Figma design.</p><p><br></p><p>✦ Manage Figma Styles with DSM Plugin</p><p><br></p><p>Selected Figma items are grouped by their styles and listed in the Selection Tab of the plugin.</p><p>For each distinct style group, you can apply following actions to Figma items having this style :</p><p>➥ Create and attach to New Token for each single style</p><p>➥ Tokenize All styles</p><p>➥ Select and attach to an Existing Token</p><p>Or</p><p>➥ Select,</p><p>➥ Delete,</p><p>➥ Zoom to selected items with this style.</p><p><br></p><p>✦ Use Real Content in your designs</p><p><br></p><p>You can easily populate your design with real data from Content tab of DSM plugin.</p><p><br></p><p>When you click a data field on the plugin, all selected Figma layer items will be filled with relevant text or image data. You can also create custom data collections to be used as real content.</p><p><br></p><p>✦ Document your Design System</p><p><br></p><p>Build your design system documents with an easy to use editor like <a href=\"http://Medium.com.\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">Medium.com.</a> Enhanced with design systems related customizable widgets!</p><p><br></p><p>✦ Design to Code</p><p><br></p><p>➥ Programmatically access to design tokens from GraphQL API, or</p><p>➥ Use Export Widgets in documentation to export design tokens in various formats, e.g. CSS, Less, Sass, JSON, YAML, Js, Swift or Android.</p><p><br></p><p>Learn more at :</p><p>➥ <a href=\"https://www.toolabs.com/plugins/figma/\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">https://www.toolabs.com/plugins/figma/</a></p><p><br></p><p>🛠 Known Issues : Figma Plugin API does not allow to modify Team Library styles, because of this limitation, DSM design tokens can not be synced with team library styles.</p>","id":"862818788004280193","installCount":5941,"lastUpdateDate":"2021-11-24T17:53:51.371Z","likeCount":321,"name":"Toolabs Design System Manager","publisherHandle":"f7c6c916_721b_4","publisherId":"862029051101010939","publisherName":"Toolabs","runCount":5077,"viewCount":15408},{"description":"<p>Centrally manage your locked layers.</p><p>集中管理所有的锁定图层。</p><p><br></p><p><a href=\"https://love.figma.cool/\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">❤️赞助我们</a> | Made by <a href=\"http://figma.cool/\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">Figma.Cool</a></p>","id":"862912103841000337","installCount":5522,"lastUpdateDate":"2021-07-08T09:00:23.359Z","likeCount":106,"name":"Unlocker","publisherHandle":"figmacool","publisherId":"4385338","publisherName":"Figma.Cool","runCount":2853,"viewCount":8758},{"description":"<p>Generate the same text with one click.</p><p>一键批量生成相同的文本。</p><p><br></p><p><a href=\"https://love.figma.cool/\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">❤️赞助我们</a> | Made by <a href=\"http://figma.cool/\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">Figma.Cool</a></p>","id":"863748474013054025","installCount":3319,"lastUpdateDate":"2021-08-17T04:23:58.998Z","likeCount":54,"name":"Same Text Generator","publisherHandle":"figmacool","publisherId":"4385338","publisherName":"Figma.Cool","runCount":1749,"viewCount":7777},{"description":"<p>中文用户数据生成器，随机生成以下用户数据。</p><p><br></p><ul><li>姓名</li><li>年龄</li><li>性别</li><li>手机号码</li><li>E-mail</li><li>职业</li><li>地址</li><li>省份</li><li>城市</li><li>身份证</li><li>占位文</li></ul><p><br></p><p><a href=\"https://love.figma.cool/\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">❤️赞助我们</a> | Made by <a href=\"http://figma.cool/\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">Figma.Cool</a></p>","id":"864052338727969891","installCount":19971,"lastUpdateDate":"2021-07-08T08:58:11.317Z","likeCount":239,"name":"Chinese User Data Generator","publisherHandle":"figmacool","publisherId":"4385338","publisherName":"Figma.Cool","runCount":13302,"viewCount":25605},{"description":"<p>Transifex and Figma</p><p>Accelerate your localization workflow and go to market faster by bringing your Product, Design and Localization teams closer using the Figma plugin for Transifex. Easily send your design texts from Figma to Transifex’s powerful translation management system (TMS) to get them translated. Pull the translated texts back to Figma to validate internationalization (i18n) and resolve any translation issues before coding begins.</p><p><br></p><p>Let your designers preview the localized designs and make all necessary adjustments right away, to avoid costly delays in refactoring localization bugs and give your localization users a great UX. Give your translators rich context with screenshots to let them understand where and how the translation will appear so that they deliver higher quality translations.</p><p><br></p><p>Boost collaboration between your designers and translators. Deliver new digital experiences faster.</p><p><br></p><p>Using with Transifex</p><p>Connecting Figma with Transifex</p><p><br></p><p>1. Make sure that you have access to at least one organization and one project in Transifex.</p><p>2. Install the “Transifex Figma Plugin” in your Figma app.</p><p>3. Open your Figma file.</p><p>4. Go to plugins and select “Transifex Figma Plugin”.</p><p>6. Add your Transifex credentials in the “Settings” tab: First you need to connect with Transifex using an API token. Generate this token from your Transifex account under User Settings =&gt; API token. After generating the token, copy and paste it in the related input box in the Figma plugin and click “Connect”.</p><p><br></p><p>You should complete the following plugin settings after connecting with Transifex:</p><p>Organization: the desired organization to work with.</p><p>Project: the desired project that these Figma strings will be associated with.</p><p>Resource: the desired resource of the selected project to push strings to. If you don’t have any resources you can try to create one using the action “Create a new resource” (note that you should have the adequate permissions in order to perform this action).</p><p><br></p><p>After setting the options, click “Save”.</p><p><br></p><p>Using the plugin</p><p><br></p><p>1. Start selecting the Figma layers that you want to send, or “push”, to your Transifex resource for translation.</p><p>2. Your selection will collect your text layers as strings in the main window of the plugin, under both the “Push strings to Transifex” and “Pull strings from Transifex” tabs.</p><p>3. To remove any unwanted strings from the selection in the “Push” or “Pull” tabs, click the X to the right of the string. That string will be removed from the current selection list.</p><p>4. Click the “Push” button to send the selected strings to Transifex and add them to the connected resource. After pushing the strings you can check to see that they were successfully sent using the “View resource in Transifex” link. Also you have the option to upload screenshots if you have selected “Upload Screenshots”. The strings will be translated according to the workflow set up in the Transifex project.</p><p>5. By default the plugin will automatically generate screenshots of your Figma frames and include them with the pushed strings in Transifex. The strings for translation will be automatically mapped to the screenshots in Transifex to provide visual context of your Figma designs to your translators and ensure the quality of the translation. Optionally you can disable screenshot generation for any string push by deselecting the “Upload Screenshots” checkbox in the “Push Strings to Transifex” tab.</p><p>6. You can use the “Replace Resource Strings” feature to clean extra or outdated strings out of your Transifex resources. if this option is checked when you click the “Push” button to send strings to Transifex, then all of the strings currently in the connected resource will be purged and replaced with the current selection only. This option should be used carefully, especially with resources shared by other users. If you are sure you want to replace all the strings in the resource with the current selection, click “OK” in the confirmation dialog. The resource strings will be replaced, and the “Replace” option will be reset to deactivated. All of your previous translations remain in the translation memory (TM) so you and your team can reuse them, unless they are also deleted from the TM in Transifex.</p><p>7. To pull translations back from Transifex to Figma, first select the Figma layers you want to get translations for and then click the “Pull” button in the “Pull Strings from Transifex” tab. You have the option to pull them in all languages or in a specific one by selecting it in the “Language” dropdown. The pull operation will create a new page in your Figma file for every language with the same name of the selected page and the language code as prefix, and automatically insert translations for the selected strings.</p><p><br></p><p>About Transifex</p><p>Founded in Greece and now headquartered in Silicon Valley, Transifex helps companies - from Startups to the Enterprise - go global. With our top-rated SaaS-based Translation and Localization Platform, organizations can easily translate digital content such as websites, mobile apps, games, video, help centers, subtitles, and more on a continuous basis. Leading companies including Eventbrite, Salesforce, HubSpot, Waze, and Microsoft rely on Transifex to achieve a truly multilingual, international presence. For more information, visit <a href=\"http://www.transifex.com\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">www.transifex.com</a>, and follow Transifex on Twitter, Facebook, and LinkedIn.</p><p><br></p><p>Learn More</p><p>Read our documentation about the Transifex Figma plugin: <a href=\"https://docs.transifex.com/integrations/figma\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://docs.transifex.com/integrations/figma</a></p><p><br></p><p>Contact us at <a href=\"mailto:support@transifex.com\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">support@transifex.com</a> with any questions or feature requests.</p>","id":"864431140615310499","installCount":1042,"lastUpdateDate":"2022-06-14T10:47:55.545Z","likeCount":16,"name":"Transifex Figma Plugin","publisherHandle":"dee1aa7d_5881_4","publisherId":"862631177148591923","publisherName":"Transifex","runCount":854,"viewCount":3424},{"description":"• Show how components in your design should look under different application conditions.\n\n• Update all instances to depict a different application-wide condition in one click.\n\nINSTRUCTIONS\n===\n\nFollow these instructions to make any component swappable using Conditioner.\n\n1. Create a new component, or choose an existing component, and move it out of any parent frames so its frame is at the top level of the document, not embedded inside any other frames.\n\n2. Name the component anything you'd like, but make sure it ends with \" ? \" followed by the name of the condition it represents. Example: \"Header ? Anonymous\" or \"Navigation / Bottom Tabs ? Anonymous\"\n\n3. Place instances of the component into any places within your design you'd like it to appear.\n\n4. Create a new conditional variation, also at the top level within the page. You can do this by duplicating the original component and changing overrides, or you can make a completely new frame with completely different content. Make the new instance or frame into a component, and name it to match the first conditional variation. Example: \"Header ? Logged-in\" or \"Navigation / Bottom Tabs ? Logged-in\"\n\n5. Repeat step 4 for as many conditional variations you'd like to make for this component.\n\n6. Wrap all the conditional variations together in one frame. Name the frame using the component name, followed by \" ?\" at the end. Example: \"Header ?\" or \"Navigation / Bottom Tabs ?\"\n\nRepeat the process to set up as many conditionally-swappable components as you need. Run the Conditioner plugin whenever you want to swap all the conditional instances in your design from one variation to another.\n\nEXAMPLE LAYER STRUCTURE\n===\n\nSetting up conditional components:\n---\nFRAME: Header ?\n- COMPONENT: Header ? Anonymous\n- COMPONENT: Header ? Logged-in\n\nFRAME: Navigation / Bottom Tabs ?\n- COMPONENT: Navigation / Bottom Tabs ? Anonymous\n- COMPONENT: Navigation / Bottom Tabs ? Logged-in\n\nUsing conditional instances in your designs:\n---\nFRAME: Home\n- INSTANCE: Header ? Anonymous\n- (other content)\n- INSTANCE: Navigation / Bottom Tabs ? Anonymous\n\nFRAME: Notifications\n- INSTANCE: Header ? Anonymous\n- (other content)\n- INSTANCE: Navigation / Bottom Tabs ? Anonymous","id":"864522070735580340","installCount":620,"lastUpdateDate":"2020-07-28T18:14:01.684Z","likeCount":43,"name":"Conditioner","publisherHandle":"ryanberg_slalom","publisherId":"3756042","publisherName":"Ryan Berg","runCount":417,"viewCount":5183},{"description":"<p>Swap content but keep original Text style between two Text box</p>","id":"865135382029316390","installCount":217,"lastUpdateDate":"2021-03-22T08:40:55.792Z","likeCount":8,"name":"Swap Text","publisherHandle":"6a061424_43e7_4","publisherId":"302411","publisherName":"Skin Wong","runCount":196,"viewCount":600},{"description":"<p>Cool illustrations to power up your project!</p><p><a href=\"https://storyset.com\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">Storyset</a> is the latest creation from Freepik, one of the main references in the free graphic resources market. Thousands of illustrated concepts, with editable colors and backgrounds, are available for download. All of them come in different styles, and can be animated too with the online editor. Visit Stories by Freepik and get started!</p><p><br></p><p>This plugin allows you to search for illustrations from Storyset database and insert them directly into your project. You can choose the style of the illustration, its global color and what kind of background you want to have. All in a few clicks!</p><p><br></p><p>Instructions:</p><p>1. Run the Storyset plugin.</p><p>2. Use the search bar to find an illustrated concept.</p><p>3. Filter the results by style and then choose the desired color and background.</p><p>4. Click the illustration to add it to your project and start editing!</p>","id":"865232148477039928","installCount":124455,"lastUpdateDate":"2020-12-21T10:04:16.778Z","likeCount":1284,"name":"Storyset by Freepik","publisherHandle":"d3d024b1_e86b_4","publisherId":"844150846311177778","publisherName":"Antonio Campana","runCount":86195,"viewCount":115737},{"description":"<p>Generate a table of contents for project automatically.</p><p><br></p><p>Direct people to the pages in your project that matter the most. This plugin creates a new page and a new frame for you.</p><p><br></p><p>The goal:</p><p>* Help non-designers in your organization find the important pages in your file.</p><p>* Provide other designers context with links to important related documents.</p><p>* Help make all of your projects look consistent.</p><p><br></p><p>This plugin is also open source and available on <a href=\"https://github.com/destefanis/figma-table-of-contents\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">github</a> for teams.</p><p><br></p><p><strong>Have a feature request or question?</strong> <a href=\"https://twitter.com/daniel__designs\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">Send me a DM on twitter</a>.</p>","id":"865650075456407958","installCount":9423,"lastUpdateDate":"2021-08-25T15:48:54.098Z","likeCount":290,"name":"Table of Contents","publisherHandle":"daniel","publisherId":"859657","publisherName":"Daniel Destefanis","runCount":7184,"viewCount":27160},{"description":"Select one or multiple objects and rotate them randomly around their center point. This plugin was inspired by the same feature in Adobe Illustrator. \n\n---\n\nI will hopefully add a UI component in the future that lets you specify a range you want to rotate by.","id":"865687644009449883","installCount":1572,"lastUpdateDate":"2020-07-17T18:06:16.665Z","likeCount":60,"name":"Rotate Each","publisherHandle":"stephen_barkan","publisherId":"968","publisherName":"Stephen Barkan","runCount":1267,"viewCount":5250},{"description":"With GroupAndHide you can create groups to add any type of nodes (Frames, groups, shapes etc.) without breaking their position in the hierarchy tree, and then toggle visibility property for all the items inside a group.","id":"865980132102889960","installCount":231,"lastUpdateDate":"2020-07-30T10:17:30.225Z","likeCount":11,"name":"GroupAndHide","publisherHandle":"51f52975_5ddf_4","publisherId":"2418681","publisherName":"Doğacan Bilgili","runCount":129,"viewCount":839},{"description":"<h2><strong>Get Palette helps you to create beautiful colour palettes using images.</strong></h2><p><br></p><p>Colours are extracted from your image using the K-means method. You can simply select an image and run the plugin. Furthermore, you can choose the number of colours you want the plugin to extract (default number = 5). The range varies from 1 to 10. So, you can better customize the output.</p><p><br></p><h2><strong>Feel free to share your thoughts with us at-</strong></h2><p><a href=\"mailto:mayansachan12@gmail.com\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">mayansachan12@gmail.com</a></p>","id":"866200342776340994","installCount":3165,"lastUpdateDate":"2020-07-18T07:19:43.429Z","likeCount":64,"name":"Get Palette","publisherHandle":"6af03ab8_0904_4","publisherId":"724511","publisherName":"Mayan Sachan","runCount":2228,"viewCount":7530},{"description":"Automated Text Title Generator","id":"866714687345416777","installCount":195,"lastUpdateDate":"2020-08-12T17:10:41.613Z","likeCount":1,"name":"Title Post Generator","publisherHandle":"f2e9df29_0d5f_4","publisherId":"875426078002920721","publisherName":"Limitless Theory","runCount":195,"viewCount":814},{"description":"Let you insert a text from your voice using speech recognition. Click Open Voice > Start Speaking to start the speech recognition. Once finished, it will automagically add text into the plugin. Click add text to add it on the canvas.\n\nHow it works:\n\n- It will open a new browser window, because Figma doesn't have permission for microphone.\n- The web app will recognize your voice locally in your browser using webkit SpeechRecognition, so you need to use modern browser\n- Lastly, it will send the text result back to the plugin via web socket\n\nSupported language: English","id":"866715466816416331","installCount":824,"lastUpdateDate":"2022-05-27T18:41:19.855Z","likeCount":32,"name":"Hey Figma Speech Recognition","publisherHandle":"sonny","publisherId":"123","publisherName":"Sonny Lazuardi","runCount":647,"viewCount":2641},{"description":"A tiny plugin that allows you to set all pages backgrounds to the same color as the current page. So if you want to change backgrounds on all pages, you can change just one and use this plugin to apply it to all other pages automatically.\n\nUsage: Go to a page in the file, run the plugin, and the plugin will copy current page background to all other pages.\n\n💖 The process of making this plugin was livestreamed:\nhttps://youtu.be/2xHC5mz-To0","id":"867015714396657283","installCount":1196,"lastUpdateDate":"2020-07-21T08:00:15.245Z","likeCount":31,"name":"Apply Current Background to All Pages","publisherHandle":"g","publisherId":"328","publisherName":"Gleb","runCount":673,"viewCount":2587},{"description":"This plugin lets you append the id of all the selected text nodes to their names. The format will then be: 'TextNode<node-id=node.id>'. This action is reversible.\nThe plugin also lets you export the selected text nodes to your clipboard. If you choose 'Advanced export', you can add any prefix to your node ids. The export action will copy the node ids in an YAML format. It will also add the color, font style, and text decoration to the node.characters. The resulted text will be easily usable in html files. The plugin also formats multiline texts.","id":"867322440571118294","installCount":147,"lastUpdateDate":"2020-08-13T09:58:53.590Z","likeCount":5,"name":"Text node name to id","publisherHandle":"ff461785_19fd_4","publisherId":"3241045","publisherName":"Dan Gutu","runCount":83,"viewCount":752},{"description":"<p>A tiny plugin that allows you to turn rectangles into frames.</p><p><br></p><p>⭐️ How it works:</p><p>Sometimes you create a rectangle as a background for something, and then you place some items on top and wish you created a frame in the first place. This plugin allows you to fix this mistake easily. Select a rectangle, then select the objects you want to place in the frame and run the plugin.</p><p><br></p><p>TL;DR: It works like auto layout creation but without auto layout.</p>","id":"867378352924521190","installCount":2394,"lastUpdateDate":"2022-04-21T11:40:00.907Z","likeCount":72,"name":"Rectangle to Frame","publisherHandle":"g","publisherId":"328","publisherName":"Gleb","runCount":2207,"viewCount":5270},{"description":"Preview and automagically create colour palettes from just a single color.\n\nFind harmonious combinations that work well in user interfaces or explore contrasting hues to make elements stand out.\n\nSee an instant preview of any single elements with a color fill and select which palette to create.","id":"867491299701038864","installCount":1720,"lastUpdateDate":"2020-07-21T21:26:13.241Z","likeCount":36,"name":"Palette Magic","publisherHandle":"kochajkiewiczzz","publisherId":"847929118705511294","publisherName":"Igor Kochajkiewicz","runCount":1433,"viewCount":2916},{"description":"Bring your color pallet into figma by pasting Coolors.co URL","id":"867494723165643537","installCount":2416,"lastUpdateDate":"2020-07-21T19:55:27.810Z","likeCount":33,"name":"Bring yours Coolors pallet into Figma","publisherHandle":"deli","publisherId":"608499","publisherName":"Mateusz","runCount":1729,"viewCount":3557},{"description":"Simple, neat, slick measure guides","id":"867534335276741406","installCount":1008,"lastUpdateDate":"2020-07-22T07:35:28.790Z","likeCount":10,"name":"Measure Guides","publisherHandle":"94ed8879_65bf_4","publisherId":"2206950","publisherName":"Diego Fernandez Goberna","runCount":1347,"viewCount":3682},{"description":"Create stepper components easily.\n\nChoose the number of steps, the size of each circle, the direction, the space between the elements and more.","id":"867577812066716451","installCount":1366,"lastUpdateDate":"2020-07-22T19:37:34.674Z","likeCount":22,"name":"Step by stepper","publisherHandle":"e79446e1_e425_4","publisherId":"1820999","publisherName":"Rafael Dias","runCount":1112,"viewCount":3302},{"description":"A tool for exporting PNG with an embeded ICC profile such as Display P3.\n\nHow to use:\n\n1) Make your selection\n2) Apply 'Export' settings (it's the same as exporting assets normally without this plugin)\n3) Check your selection whether Export settings include 'png'\n4) Click 'Save' button\n5) Select where to save the zipped file (or a single image file)","id":"867977941678289774","installCount":4702,"lastUpdateDate":"2022-04-27T06:49:31.499Z","likeCount":71,"name":"Export PNG with Color Profile","publisherHandle":"wave_bx","publisherId":"866878402393606824","publisherName":"WAVE BX","runCount":4602,"viewCount":10781},{"description":"<p>Text Line Height Fix 是一款调整文字行高的插件。它能够让设计图中不同字号的行高，和开发环境下对应字号所占字符框高度相匹配（Android字符框：textview、iOS字符框：UI Label）。解决设计图与开发环境在文字高度不一致的情况下，导致还原度差的问题。帮助开发人员实现更精准的设计稿还原。</p><p>使用：</p><p>-选中文字图层，点击设计图对应的设备按钮，即可完成行高的修复。</p><p>-行高设为字号的倍数：可通过+-号按钮调整的倍率，也可以手动输入倍率。点击「go」按钮完成行高的调整。</p><p>注意：</p><p>-目前插件针对Android设计图，支持 5px-120px 的字号的行高修复，iOS可修复字号不限。</p><p>-仅限中文常用UI字体（苹方、思源）</p><p>感谢：</p><p>-Sketch 插件「Auto Fix iOS Text Line Height」作者 @Gis1on&nbsp;@Youngxkk。</p><p>-插件中使用的波纹效果来自 https://github.com/GeekLiB/Material-Design-JS-Button</p>","id":"868069497803854730","installCount":1245,"lastUpdateDate":"2020-11-25T06:11:02.902Z","likeCount":33,"name":"Text Line Height Fix","publisherHandle":"68c58fde_8837_4","publisherId":"348519","publisherName":"York01","runCount":706,"viewCount":2566},{"description":"<p>Add icons from <a href=\"https://icons.getbootstrap.com/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Bootstrap icon library</a> directly as SVG in your Figma projects. Find the appropriate icon in the list of<strong> over 1600 icons (v1.8.1)</strong>.</p><p><br></p><p>They're <a href=\"https://github.com/twbs/icons/blob/main/LICENSE.md\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">open sourced (MIT)</a>, so you're <strong>free</strong> to download, use, and extend.</p><p><br></p><p><a href=\"https://www.figma.com/community/file/1042482994486402696/Bootstrap-Icons\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Original Figma file</a>.</p>","id":"868341386266170307","installCount":44948,"lastUpdateDate":"2022-03-24T20:12:50.999Z","likeCount":175,"name":"Bootstrap Icons","publisherHandle":"isma","publisherId":"850256","publisherName":"Ismael Martínez","runCount":41276,"viewCount":34668},{"description":"Find missing fonts text on all pages 🔠\n\nYou can find & select to \"Missing Fonts\" by TextNode.","id":"868544205592553467","installCount":6317,"lastUpdateDate":"2020-08-06T07:03:35.364Z","likeCount":29,"name":"Missing Fonts Finder","publisherHandle":"hiloki","publisherId":"410711","publisherName":"Hiroki Tani","runCount":5284,"viewCount":8127},{"description":"<p>Annotation Time-Saver for you⚡️⚡️</p><p>Simply select on any text or group elements to create annotations!</p><p><br></p><ol><li>Simply click on one or two element, the plugin panel will preview what kind of annotation you can apply.</li><li>Choose Fixed / Dynamic annotaiton so your team member can know exactly behavior.</li><li>More Annotate feature coming soon! ✌️</li></ol>","id":"869023777052661819","installCount":4297,"lastUpdateDate":"2021-10-03T04:22:56.631Z","likeCount":126,"name":"Annotation","publisherHandle":"lichin","publisherId":"459","publisherName":"Lichin","runCount":4736,"viewCount":20461},{"description":"<p>Gifmock is a tool that helps you create high-quality GIFs from static images and mockups.</p><p><br></p><p><a href=\"http://gifmock.com\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">gifmock.com</a></p><p><br></p><p>Here is how it works:</p><p>1. Select layers to create GIF frames</p><p>2. Adjust the delay and position of your frames with pixel-perfect precision</p><p>3. Export</p><p><br></p><p>SMART CROPPING</p><p>Crop all your frames in a few clicks to highlight a specific part of your design.</p><p><br></p><p>PIXEL PREVIEW</p><p>Pan and zoom on the canvas to position your frames with pixel precision.</p><p><br></p><p>MEASUREMENT</p><p>Hold option to show distance from the edge when moving your frame.</p><p><br></p><p>RETINA SUPPORT</p><p>You can import and export at the resolution you like. 1x, 2x, 3x, you decide.</p><p><br></p><p>PER FRAME DELAY</p><p>Want to pause on a frame for a few seconds? Set the delay of your choice on any frame.</p><p><br></p><p>SECURE</p><p>Gifmock stores your GIF data on your machine. None of your content is saved on the cloud.</p><p><br></p><p>FRAME ORDERING</p><p>New frames are automatically ordered. Re-order them with a simple drag-and-drop.</p><p><br></p><p>RELIABLE</p><p>Established in 2017, Gifmock has a proven track record of being reliable.</p>","id":"869265270145605728","installCount":12570,"lastUpdateDate":"2021-05-06T13:20:49.136Z","likeCount":159,"name":"Gifmock","publisherHandle":"stevenfabre","publisherId":"64710","publisherName":"Steven Fabre","runCount":12361,"viewCount":18860},{"description":"<p>Compress and resize images without leaving Figma or FigJam!</p><p>Smaller images help files load faster and reduce memory usage.</p><p><br></p><p><strong>How to use it</strong></p><ol><li>Select anything on the canvas or keep selection empty — Downsize will find all images within a selection or on a page</li><li>Add settings to compress and/or resize images — mix and match them as you like to get the best result for your needs</li><li>Additionally, you can also convert images from PNG to JPEG if they don't use alpha channel to save even more space</li><li>Click the button to reduce image size and wait a moment while plugin is doing its job</li></ol><p><br></p><p><strong>Useful tips</strong></p><ul><li>I recommend setting the compression level to any value greater than 30, otherwise, you may significantly lose in image quality, but feel free to experiment with it</li><li>About the Resizing feature: let's say that your <strong>100x100</strong> object has a <strong>200x200</strong> image fill, but you chose a <strong>4x</strong> multiplier — instead of \"upscaling\" the image to <strong>400x400</strong> it'll keep its original size of <strong>200x200 px</strong>.</li></ul><p><br></p><p>——————————</p><p><br></p><p>Downsize images, not talents! 😉</p><p><br></p><p>Made with 🧡 &amp; ✨.</p><p>Alex</p>","id":"869495400795251845","installCount":49780,"lastUpdateDate":"2022-05-13T17:35:55.441Z","likeCount":643,"name":"Downsize","publisherHandle":"ae","publisherId":"1099640","publisherName":"Alex","runCount":39988,"viewCount":51829},{"description":"Enables you to export your assets to XCode","id":"869497246579313799","installCount":610,"lastUpdateDate":"2020-07-27T08:32:31.751Z","likeCount":3,"name":"XCode Assets Export","publisherHandle":"41c708ab_1a8f_4","publisherId":"3633208","publisherName":"AtomicMedia","runCount":366,"viewCount":1953},{"description":"Visualize your component and style dependencies.\n\nLineage helps you understand how your design system is being used and how every change impacts your project.\n\nTo use: \n1. Select a frame/component \n2. Run Lineage\n3. Explore the graph, click on your nodes and find details about their dependencies\n4. (Optional) If you click on the \"Show all instances\" button, the graph will display every use of that specific style/component throughout your document\n\nThis is version 1.0, more to come.\nPlease, if you have any suggestion or issue, reach out on Twitter @lalomts","id":"869656614742356159","installCount":1632,"lastUpdateDate":"2020-08-14T02:16:01.886Z","likeCount":74,"name":"Lineage","publisherHandle":"lalomts","publisherId":"2669288","publisherName":"Lalo Martínez","runCount":1410,"viewCount":4763},{"description":"Get dimensions of parameters in different units based on the different screen density (in dpi). User can select one of the six (ldpi, mdpi, hdpi, xhdpi, xxhdpi, xxxhdpi) screen densities available, to get dimensions in five different units- px (pixels), dp or dip (density independent pixels), pt (points), mm (millimeters), in (inches).\n\nFeedback/Suggestions are appreciated!","id":"870191885836440905","installCount":5198,"lastUpdateDate":"2020-08-08T10:28:57.561Z","likeCount":45,"name":"PixelsConvert","publisherHandle":"roshnionFigma","publisherId":"955522","publisherName":"Roshni Prajapati","runCount":4839,"viewCount":11476},{"description":"Copy svg without outlineText to system's clipboard directly.","id":"870224773511785813","installCount":1270,"lastUpdateDate":"2020-07-31T03:01:43.054Z","likeCount":8,"name":"Copy svg without outlineText","publisherHandle":"6a061424_43e7_4","publisherId":"302411","publisherName":"Skin Wong","runCount":942,"viewCount":1609},{"description":"Make a grid of accessible color combinations from your document's paint colours","id":"870226217840930134","installCount":2438,"lastUpdateDate":"2020-07-29T14:09:05.266Z","likeCount":26,"name":"Color Contrast Grid","publisherHandle":"Finch","publisherId":"167182","publisherName":"Luke Finch","runCount":2091,"viewCount":4882},{"description":"Design user experiences that integrate voice as an interaction.\n\nAdd interactions as normal to your prototype, then add a voice interaction using Spokestack.\n\nSee https://spokestack.io for more on how to add voice to apps and websites.","id":"870426079235741066","installCount":472,"lastUpdateDate":"2020-08-20T20:21:34.332Z","likeCount":7,"name":"Spokestack","publisherHandle":"32ae2061_7530_4","publisherId":"2248496","publisherName":"timmywil","runCount":392,"viewCount":1474},{"description":"<p>A tool for exporting icon font as TrueType font from vector icons.</p><p><br></p><p><strong>Examples available:</strong></p><ul><li>Flutter (dart)</li><li>React Native (js)</li></ul><p><br></p><p><strong>How to use:</strong></p><ol><li>Make your selection (icons)</li><li>Add the font name</li><li>Click 'save' button</li><li>Save <code>fontName.zip</code> file to proper position</li><li>Unzip and use <code>fontName.ttf</code> and <code>fontNameConfig.json</code> to apply icon font file to your projects</li></ol>","id":"871372807775860267","installCount":5644,"lastUpdateDate":"2022-04-27T06:48:44.965Z","likeCount":90,"name":"Export Icon Font","publisherHandle":"wave_bx","publisherId":"866878402393606824","publisherName":"WAVE BX","runCount":4360,"viewCount":13496},{"description":"Randomize width or height of selected layers","id":"871561492051264078","installCount":1400,"lastUpdateDate":"2020-08-02T03:20:27.457Z","likeCount":20,"name":"random-size","publisherHandle":"3de8e288_5654_4","publisherId":"844099274715506172","publisherName":"Long","runCount":1079,"viewCount":3740},{"description":"Whether your own or someone else’s writing, alex helps you find gender favoring, polarising, race related, religion inconsiderate, or other unequal phrasing.\n\nThis plugin will help you to write thoughtful, inclusive copy when working with text in Figma.\n\nPowered by https://alexjs.com","id":"872001708828653182","installCount":585,"lastUpdateDate":"2020-08-04T03:07:41.243Z","likeCount":14,"name":"alex - catch insensitive, inconsiderate writing","publisherHandle":"9742655e_9f3b_4","publisherId":"1010320","publisherName":"Nick Radford","runCount":331,"viewCount":1453},{"description":"Generate Material Palettes and Styles for any color based on the latest Design Guidelines.\n\n✨Key Features ✨\n\n⭐ Add custom name to your palette. You can also override existing styles created using this plugin by referencing them by the name you gave them!\n\n⭐ Click on the swatch to pick your color using the native color picker or through the universal eyedropper!\n\n⭐ Generating Additional Palettes with Accents and Complementary Colors is just a checkbox away!\n\n⭐ Create well-organised styles with detailed description of the color in all css-supported color spaces (hex, rgb, hsl and cymk)!","id":"872008431843787391","installCount":3580,"lastUpdateDate":"2021-09-29T21:24:04.273Z","likeCount":38,"name":"Matercolor","publisherHandle":"isarvindone","publisherId":"363993","publisherName":"Arvind Srinivasan","runCount":3011,"viewCount":7453},{"description":"<p>Display the relative luminance (how bright color appear to our eyes) of the selected colors.</p><p><br></p><p>Colors can be adjusted to match a desired luminance levels.</p><p><br></p><p>When only two colors are selected, their contrast ratio is also displayed.</p><p><br></p><p>The plugin is especially helpful when creating or working with palettes that organizes colors in steps based on their relative luminance.</p><p><br></p><p>Organizing palettes this way is a robust approach that in addition makes it easier predicting contrast ratio to comply with e.g. WCAG 2.1,</p><p>as colors of a certain luminance value always has the same contrast ratio to other colors another luminance value.</p>","id":"872423614371258087","installCount":873,"lastUpdateDate":"2020-11-16T20:20:36.473Z","likeCount":25,"name":"Color Luminance","publisherHandle":"tommyj","publisherId":"692892","publisherName":"Tommy Johansen","runCount":663,"viewCount":1873},{"description":"<p>Add MockFlow to Figma's design workflow to rapidly brainstorm UI ideas with its easy to use wireframing software.</p><p><br></p><p>Use this plugin:</p><p><br></p><p>* To import your design elements from Figma and use them as part of your UI wireframes</p><p><br></p><p>* Export finished wireframes from MockFlow without leaving Figma for a seemless design experience with your Team</p><p><br></p><p>* As a Whiteboard on top of Figma to discuss and review its projects</p><p><br></p><p>MockFlow provides advanced components like DataGrids, Arrow-Paths, Hand-drawn UI components and more...</p>","id":"873171992268856243","installCount":10378,"lastUpdateDate":"2021-03-19T06:14:24.156Z","likeCount":83,"name":"MockFlow","publisherHandle":"54f723f6_a39d_4","publisherId":"30842","publisherName":"MockFlow","runCount":8736,"viewCount":21070},{"description":"<h4>Find all images in a file and extract the original files in a zipped folder. Useful to re-gain access to images you pasted in figma directly or lost the source file.</h4><p><br></p>","id":"873263752169421781","installCount":734,"lastUpdateDate":"2021-07-08T19:33:17.492Z","likeCount":19,"name":"Image Extractor","publisherHandle":"dsi","publisherId":"3243801","publisherName":"Martin Bravo","runCount":481,"viewCount":1141},{"description":"<h1><strong>Create Print Documents in Figma</strong> 🖨️ 📄 📝</h1><p>‎Easily setup frames that are sized properly for printing at specific DPIs.</p><p><br></p><h2><strong>NEW (June 2021)</strong></h2><p><strong>Celebrating 6000+ Installs!</strong></p><p><em>-&gt; </em><strong>Major Interface Update</strong></p><p><em>-&gt; </em><strong>Crop Marks!</strong></p><ul><li>You can now add crop marks to documents that have bleed enabled.</li></ul><p><em>-&gt; </em><strong>Branding Update (hello, cmyk!)</strong></p><p><br></p><h2>Document Presets</h2><ul><li>📄 NA: Letter (8.5x11), Half Letter, Legal, Ledger, Govt. Letter, Card, Postcard, Poster</li><li>📃 INTERNATIONAL: A3, A4, A5, A6</li><li>📐 Custom Size!</li></ul><p><br></p><h2>Supported DPIs</h2><ul><li>72 (default), 150, 300</li></ul><p><br></p><h2>⭐ How it Works ⭐</h2><ol><li>Choose a preset or enter custom dimensions.</li><li>Customize your document options (pages, DPI, bleed, &amp; crop marks).</li><li>Press the big blue button.</li><li>Profit!</li></ol><p><br></p><h2>Coming Soon</h2><ul><li>Margins / Trim Area</li><li>CMYK Proofing</li><li>Exporting</li></ul><p><br></p><p>Contact <a href=\"mailto:ben@ktz.dev\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">ben@ktz.dev</a> or leave a comment for suggestions 😀</p>","id":"874441781480244375","installCount":34476,"lastUpdateDate":"2021-06-11T16:50:39.418Z","likeCount":536,"name":"Print for Figma","publisherHandle":"bk","publisherId":"1565157","publisherName":"Ben Katz","runCount":30363,"viewCount":53564},{"description":"<p>Mirror any screen to any file and create global userflows without duplicating your content. Update them whenever you want.</p><p><br></p><h1>Use cases</h1><p><br></p><p>1. Put together multiple screens from different files into a single one without duplicating your content. Screens get imported as images so they are not directly editable. This allows you to keep your source files organized and create global flows to present to PMs, POs, Stakeholders, etc. Screens keep connected by their Artboard name so you can update them whenever you need if there are any changes to the source files.</p><p><br></p><p>2. If creating device mockups you can mirror your screens to import images from your screens quickly without manually copy pasting them.</p><p><br></p><h1>How to use</h1><p><br></p><p>1. Create a new file where you want to import all of your files.</p><p>2. Generate an access token from your Settings page under your profile name.</p><p>3. Copy the generated token.</p><p>4. Open the Connect plugin and paste your token.</p><p>5. You can now paste any file link you want to import.</p><p>6. Select the screens you want to import. You can search through them, or filter by pages.</p><p>7. Hit 'Connect Selected' and that's it!</p><p><br></p><p>You can now use arrow plugins to connect your screens if you need to create a flow. If you make any changes to the original screens just import your file again and select the screens you want to overwrite. Keep in mind you need to name your artboards accordingly.</p><p><br></p><p><a href=\"https://www.youtube.com/watch?v=TrNj5ll0lj0\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">Creating Connect</a></p><p><a href=\"https://twitter.com/sntiagomoreno\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">Follow updates</a></p>","id":"874515048823651494","installCount":1476,"lastUpdateDate":"2021-01-12T00:22:40.740Z","likeCount":125,"name":"Connect","publisherHandle":"santiagomoreno","publisherId":"570857","publisherName":"Santiago Moreno","runCount":1154,"viewCount":8331},{"description":"<p>Figma istifadəçiləri üçün Azərbaycan dilində mətn yaradıcı xidməti</p>","id":"874760491952806105","installCount":213,"lastUpdateDate":"2022-05-21T12:31:48.657Z","likeCount":9,"name":"Azerbaijani Content Generator","publisherHandle":"agshinrajabov","publisherId":"2123635","publisherName":"Agshin Rajabov","runCount":171,"viewCount":455},{"description":"<p>Collection of 1100+ pixel perfect icons now available in Figma. Easier to find, easier to paste.</p><p><br></p><p>Full icon pack contains:</p><p>- 1100+ unique icons in 23 categories, now including corona related icons</p><p>- downloads available in .fig, .sketch, .xd, .studio, .ai, .png, .svg, .pdf, .iconjar, .woff</p><p>- ligatures supported in webfont</p><p>- free updates</p><p><br></p><p>Freebie is limited to 120 SVG icons</p><p><br></p><p>Feel free to contact us in case of any questions.</p><p>More about the icons and licensing at <a href=\"https://www.theiconof.com\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">https://www.theiconof.com</a></p><p><br></p><p>More design updates here https://dribbble.com/majoputerka</p>","id":"875360070957047154","installCount":14070,"lastUpdateDate":"2021-08-19T10:07:49.981Z","likeCount":143,"name":"The Icon of - Icon set","publisherHandle":"majo_puterka","publisherId":"4127912","publisherName":"Majo Puterka","runCount":13805,"viewCount":17756},{"description":"<p>Populate your CSV data to text layers and automatically generate new elements.</p><p><br></p><p>How it works</p><p><br></p><p>* Create or export a CSV file with your favorite tool and upload it</p><p>* Rename your text layers accordingly to your CSV headers with a \"#\" suffix where you want the data to be applied</p><p>* Select the top level of the element you want to clone and the plugin to search for text layers</p><p>* Hit the Populate button</p><p><br></p><p>Supported objects</p><p><br></p><p>* Frames</p><p>* Groups</p><p>* Components</p><p>* Instances</p><p>* Text layers</p><p><br></p><p>Limitations</p><p><br></p><p>* The plugin currently only supports changes in text layers</p><p><br></p><p>Feel free to <a href=\"https://www.buymeacoffee.com/eddysalzmann\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">buy me a coffee</a> ☕️</p>","id":"875365065394448755","installCount":1179,"lastUpdateDate":"2020-08-12T18:34:48.381Z","likeCount":34,"name":"CSV Populate","publisherHandle":"a273ba58_72d1_4","publisherId":"3720441","publisherName":"Eddy Salzmann","runCount":1026,"viewCount":4451},{"description":"<p><strong>Creating multiple sizes of icons is easy with the Microsoft Design Icon Scaling tool</strong></p><p><br></p><p><strong>With this plugin you can:</strong></p><p><br></p><p>- Draw once and scale to multiple sizes with a single click</p><p>- Apply the Fluent Design System weight to icons, at the right sizes</p><p>- Check for naming, duplicates, and sizing errors with your icon sets before you export</p><p>- Correct errors on your Figma canvas and regenerate icon sizes with updates</p><p>- Inspect your icon in the tool to ensure it lands on the grid</p><p>- Ensure icons pass the even-odd fill rule and have non-zero winding with a built-in tool to correct</p><p>- Prepare your set for export as a .zip file that contains SVGs, PDFs, and a text description</p><p><br></p><p><strong>Notes:</strong></p><p><br></p><p>- We recommend that you start your icon design size at 24px for best results</p><p>- Icon layer names should follow the naming convention of Name / Size / Theme. For example, 'Folder / 24 / Regular'</p><p>- Using 'Thin' weight will apply a 1 px stroke to all icon sizes. 'Regular' weight will adhere to Fluent Design System rules for icons</p><p><br></p><p><strong>Usage:</strong></p><p><br></p><p>The Icon Scaling tool uses <a href=\"https://github.com/evanw/figma-fill-rule-editor\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Fill Rule Editor</a> for even odd error inspection under <a href=\"https://github.com/evanw/figma-fill-rule-editor/blob/master/LICENSE.md\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">MIT</a> license.</p><p><br></p><p><strong>Thanks:</strong></p><p><br></p><p>This tool was created by the Meta-Design Studio for Microsoft Design. Thanks to Prasanna Gunuru, Spencer Nelson, Jason Custer, Damien Aistrope and Zann St Pierre.</p>","id":"875501505522624941","installCount":5639,"lastUpdateDate":"2022-01-25T00:08:47.083Z","likeCount":295,"name":"Icon Scaling Tool","publisherHandle":"prasannag","publisherId":"1936050","publisherName":"Prasanna Gunuru","runCount":4328,"viewCount":11341},{"description":"<p>Set your text layers width by the average number of characters per line!</p><p><br></p><p>Demo link: <a href=\"https://twitter.com/marceloblaz/status/1300432452247318529\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://twitter.com/marceloblaz/status/1300432452247318529</a></p><p><br></p><h2>New feature</h2><p>With this last update, it is possible to also check the current Line Length of a given text layer! Check the demo: <a href=\"https://twitter.com/marceloblaz/status/1321561732268105729\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://twitter.com/marceloblaz/status/1321561732268105729</a></p><p><br></p><p>One of the most useful ways to measure line length is by average characters per line. It's common practice to set the line length between 45–90 characters in order to have a nice reading flow.</p><p><br></p><p>With Line Length it will become a lot easier to find that sweet spot that will give your design a fine look and great readability.</p><p><br></p><p><em>This plugin </em><strong><em>works</em></strong><em> with mixed font text layers</em></p><p><br></p><p>Give feedback: <a href=\"https://forms.gle/D9UeBjHfYiukFLP89\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://forms.gle/D9UeBjHfYiukFLP89</a></p><p><br></p><p>Made by</p><p>Marcelo Brasileiro</p><p>Contribution</p><p>Caio Silva (@caiopesilva)</p>","id":"875546357676392881","installCount":1634,"lastUpdateDate":"2022-02-04T11:29:15.078Z","likeCount":47,"name":"Line Length","publisherHandle":"marceloblaz","publisherId":"137309","publisherName":"Marcelo Brasileiro","runCount":1465,"viewCount":3470},{"description":"A set of free MIT-licensed high-quality SVG icons for you to use in your web projects.\n\nIcons by https://github.com/tailwindlabs\n\nSuggestions? Please file an issue on GitHub:\nhttps://github.com/deebov/heroicons-figma-plugin","id":"876119978690687541","installCount":12241,"lastUpdateDate":"2020-08-14T16:37:55.479Z","likeCount":89,"name":"Heroicons","publisherHandle":"deebov","publisherId":"3464196","publisherName":"Dilshod Turobov","runCount":10680,"viewCount":7540},{"description":"Use a simple calculator in Figma","id":"876249252389228107","installCount":1340,"lastUpdateDate":"2020-08-16T14:16:09.713Z","likeCount":19,"name":"Calculator for Figma","publisherHandle":"deli","publisherId":"608499","publisherName":"Mateusz","runCount":1202,"viewCount":3206},{"description":"<p><strong>create oblique projections of any shape</strong>. useful for creating shadows, 3d depth, visual perspective, and more!</p><p><br></p><p>oblique calculates tangent points itself, ensuring correct projections from any possible input shape.</p><p><br></p><p>this plugin was inspired by the Adobe Illustrator plugin <a href=\"http://63mutants.com/subc/products/opo_m01/opo_m01.php\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">opo by 63mutants</a>.</p><p><br></p><p>also check out <a href=\"https://www.figma.com/community/plugin/733184376355671573/Roto\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">Roto</a>, a similar figma plugin having a couple key differences. oblique calculates faces itself instead of relying on a 3d engine, making it faster and produce less complex results, at the cost of some features such as perspective and lighting options.</p>","id":"876352455198080607","installCount":40571,"lastUpdateDate":"2020-11-11T22:18:15.358Z","likeCount":670,"name":"oblique","publisherHandle":"torcado","publisherId":"9903","publisherName":"torcado","runCount":31687,"viewCount":51610},{"description":"<h2>Easily generate design system color scale based on chosen base colors:</h2><ul><li>Chose 6, 8 or 10 steps in the scale</li><li>Get base colors from selected elements or enter HEX value</li><li>Select one or multiple elements to get color from</li></ul>","id":"876899098381850319","installCount":15635,"lastUpdateDate":"2021-01-17T16:05:24.059Z","likeCount":152,"name":"Color scale generator","publisherHandle":"elenaborisova","publisherId":"2191115","publisherName":"Elena Borisova","runCount":12712,"viewCount":13267},{"description":"<p>This plugin allows you to localize your content using a static dictionary.</p><p><br></p><p>Unlike many other localization plugins, it</p><ul><li>gracefully handles mixed text formatting</li><li>correctly renders RTL texts</li><li>can mirror interfaces for RTL languages</li><li>can perform currency conversion</li><li>can perform font substitution</li></ul><p><br></p><p>Usage: <a href=\"https://github.com/thoughteer/figma-static-localizer#usage\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">https://github.com/thoughteer/figma-static-localizer#usage</a></p>","id":"876934931929982678","installCount":1063,"lastUpdateDate":"2021-04-24T19:22:31.195Z","likeCount":43,"name":"Static Localizer","publisherHandle":"12ec2b4d_2939_4","publisherId":"880961577519380259","publisherName":"SIA Joom","runCount":985,"viewCount":3159},{"description":"<h1>Translate prototypes and designs</h1><p><br></p><p>Design a product, website, or prototype to international audiences without the hassle. With the Text United plugin, you will be able to translate the content from your Figma design and see how your prototype will look like when localized into any language.&nbsp;</p><p><br></p><h2>What is Text United?</h2><p><br></p><p>An end-to-end translation platform that allows marketers, designers, project managers, and developers to work collaboratively and to provide multilingual digital content and products faster and effortlessly.</p><p><br></p><h2><strong>With the Figma plugin, you can</strong></h2><ul><li>Extract all the text from your Figma Design&nbsp;</li><li>Machine translate instantly&nbsp;</li><li>Create a translation project for translators from your own team&nbsp;</li><li>Translate yourself&nbsp;</li><li>Order professional translation service&nbsp;</li><li>Insert translations into your design quickly, replacing the source text&nbsp;</li></ul><p><br></p><p><strong>This plugin requires an active Text United paid account&nbsp;</strong><a href=\"https://www.textunited.com/my/signup/?utm_referrer=https%3A%2F%2Fwww.textunited.com\" rel=\"noreferrer noopener nofollow\" target=\"_blank\"><strong>(14-Day Free Trial &gt;&gt;)</strong></a></p><p><br></p><h2>To use the plugin, you need to</h2><ol><li>Launch the plugin</li><li>Copy the company ID number and API key from&nbsp;<a href=\"https://www.textunited.com/my/login/\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">your Text United account</a>&nbsp;and paste it into the plugin settings.</li><li>Select how to translate: (machine translation, outsource to Text United, or you and your team) &lt;- not a must to add.</li><li>Choose the source language of your design and select a target language.</li><li>Choose how to translate:&nbsp;<em>Machine Translation</em>&nbsp;can be applied to the design right away. For&nbsp;<em>the Me-and-My team</em>&nbsp;and&nbsp;<em>Professional Service</em>&nbsp;projects, the translation project will need to be completed first before inserting the translations into the design.&nbsp;</li></ol><p><br></p><p>Once the translation is completed, you can open <em>My Project</em> and click on <em>Apply Translation</em>.</p><p><br></p><p><strong>You can also find the information, including screenshots, </strong><a href=\"https://help.textunited.com/figma-plugin\" rel=\"noreferrer noopener nofollow\" target=\"_blank\"><strong>here</strong></a></p>","id":"877116866190337791","installCount":1001,"lastUpdateDate":"2021-09-17T08:29:27.466Z","likeCount":8,"name":"Text United for Figma","publisherHandle":"1fd5c5b8_ef0f_4","publisherId":"877157393509503476","publisherName":"Text United","runCount":596,"viewCount":2913},{"description":"<p>Plugin that counts the maximum number of characters across all lines in a text box unlike other plugins that count all characters or words.</p><p><br></p><p>— How to use</p><p><br></p><p>1. Select one text layer</p><p>2. Run the plugin</p><p><br></p><p><a href=\"https://twitter.com/alexeinars/status/1295838119657381890?s=20\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">Demo</a></p><p><br></p><p>Note: plugin doesn't support mixed fonts</p><p><br></p><p>Made with 🧡 &amp; ✨.</p><p>Alex</p>","id":"877140899444217608","installCount":3515,"lastUpdateDate":"2020-09-06T10:13:21.614Z","likeCount":71,"name":"Max Line Length","publisherHandle":"ae","publisherId":"1099640","publisherName":"Alex","runCount":2779,"viewCount":5732},{"description":"About\n\nColor Theme Manager is a light weight easy to use plugin for create and swap between different color themes. Simply save color styles as you normally do and Color Theme Manager can help you with the rest. No need to worry about JSON, naming prefix, selection, etc. Good for developing color systems, projects require multiple color themes (like dark mode and light mode), and giving your design a new look.\n\nFeatures\n\nSave Color Theme\nCarefully name your current color theme and it will be saved within the Figma file you are working with. This will save all local color styles into a color theme. Note color styles in color themes will not update when you modified local color styles, you need to manually save changes to color themes.\n\nApply Color Theme\nChange to an entirely different look by applying a color theme with only one click. Your local color styles will be replaced by ones from the color theme you choose.\n\n Import/Export Color Themes\nDue to the current Figma Plugin API limitation, transferring data across Figma file can not be streamlined. A second-best solution is offered by Color Theme Manager, simply copy your saved color theme into clipboard and paste to another file.\n\nHow?\n\nColor Theme Manager will look for color style from a saved theme with the exact same name and replace the local style. So name your color styles (and color themes) wisely. Repeated names will cause unexpected results.\n\nFuture\n\n- Features like auto update, read/write to libraries can not be implemented efficiently with the current set of APIs. This might change when new APIs come out.\n- Color styles involve image fill is not implemented very efficiently. This might be fixed in a future update.\n- UI might be reimplemented in a more maintainable way.","id":"877698871356754847","installCount":2247,"lastUpdateDate":"2020-08-24T19:58:58.884Z","likeCount":56,"name":"Color Theme Manager","publisherHandle":"40a78181_9f15_4","publisherId":"2630296","publisherName":"Derek Zhang","runCount":2408,"viewCount":7938},{"description":"Take your design to the next level!\n\nIf you have ever been involved with a software or website translation project, pseudo-localization is a process you will be very familiar with. For those unfamiliar with the term, pseudo-localization is a form of QA testing to determine if your files are ready for translation. Quite simply, it’s a trial run for the actual translation.","id":"878284525898996812","installCount":184,"lastUpdateDate":"2020-08-26T12:03:48.286Z","likeCount":3,"name":"Psuedo Localizator","publisherHandle":"c32d6941_a088_4","publisherId":"3250807","publisherName":"Janessa Labeur","runCount":176,"viewCount":726},{"description":"<p>Ever needed to export a gif that you added to Figma? Ever wanted to export a frame with a gif in it? Here's how you can with the GIF plugin:</p><p><br></p><p><strong>Export a GIF</strong></p><ol><li>Select a frame or composition with a GIF in it</li><li>Run the \"<em>Export GIF</em>\" plugin command</li></ol><p><br></p><p><em>When exporting a gif, this plugin will use the first gif in the layer stack for the frame delay and length of the gif animation. If you want to manually define the \"main\" gif, just name the gif layer you want to use to \"main\".</em></p><p><br></p><p><strong>Play a GIF</strong></p><ol><li>Select a frame or composition with a GIF in it</li><li>Run the \"<em>Play GIF</em>\" plugin command</li></ol><p><br></p><p>Plugin creation fueled by coffee — <a href=\"https://www.buymeacoffee.com/rogie\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">buy me a cuppa</a>.</p>","id":"878338850782783595","installCount":46246,"lastUpdateDate":"2022-03-20T19:29:59.083Z","likeCount":439,"name":"GIF Export","publisherHandle":"rogie","publisherId":"1105","publisherName":"Rogie King","runCount":44040,"viewCount":72409},{"description":"<p>Create, switch and manage as many themes as you need.</p><p>Global themes supported, with no need to login anywhere.</p><p>Export CSS-variables from theme.</p><p>Update all styles within theme at once using Palettes.</p><p><br></p><h2>Learn how to use this plugin with this Figma <a href=\"https://www.figma.com/community/file/909196746962798493/How-to-use-Yellowstone-%E2%80%94%C2%A0plugin-for-themes\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">Yellowstone Playground</a></h2><p><br></p><h2>Switch themes 🌞🌛</h2><p>Plugin switches all colors and effects within selection.</p><p>Works for texts with multiple styles.</p><p><br></p><h2>Create new themes — as much as you need 👨‍🎨👩‍🎨</h2><p>Duplicate existing theme to create new in just one click. No need to create new styles manually.</p><p><br></p><h2>Manage themes: rename, update, delete 🧰🎨</h2><p>Update themes using Palettes: draw theme’s Palette, change its colors and effects and update entire theme. Try this Figma <a href=\"https://www.figma.com/community/file/909196746962798493/How-to-use-Yellowstone-%E2%80%94%C2%A0plugin-for-themes\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">Yellowstone Playground</a> to learn how to use it.</p><p><br></p><h2>Use global themes 📖</h2><p>Save your library’s themes within plugin, load it in another figma file and use. That easy. No need to login anywhere, no need to create any external files or smth.</p><p><br></p><h2>Export CSS-variables from theme 📤</h2><p>Put css-variables in styles Description once and get ready-to-go code in one click, with any update of your theme.</p><p><br></p><p>---</p><p><br></p><h2>What it does with Local Styles 💡</h2><p>Plugin puts square brackets in style name, to define what theme it belongs to. For example: <code>[Light] / card</code>, <code>[Dark] / card</code> or <code>[Gray] / card</code>.</p><p><br></p><p>Of course you can put brackets manually, anywhere, there's no limits: <code>Card [Light]</code>, <code>Card / bg [Light]</code>, <code>Card [Light] / bg</code>, <code>[Light] / bg</code> — its all good. Also, plugin will <em>keep your syntax</em> renaming themes and creating new ones.</p>","id":"879298460645863828","installCount":919,"lastUpdateDate":"2020-11-13T21:46:17.308Z","likeCount":32,"name":"Yellowstone — plugin for themes","publisherHandle":"craboruk","publisherId":"950556","publisherName":"Vadim Nikiforov","runCount":627,"viewCount":2492},{"description":"<p><strong>See your designs on Apple Watch!</strong></p><p><br></p><p>This plugin pairs with our watchOS app&nbsp;and mirrors the current frame, allowing easy frames preview and prototyping navigation.</p><p><br></p><p><a href=\"https://apps.apple.com/app/id1528983161\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">Download Watch Mirror on the App Store.</a></p><p><br></p><p>For support, <a href=\"https://watchmirror.app/support\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">visit our website</a>.</p><p><br></p><p><em>Requires watchOS 7</em></p>","id":"879405776766571963","installCount":1367,"lastUpdateDate":"2020-09-27T10:23:09.835Z","likeCount":28,"name":"Watch Mirror","publisherHandle":"WesSouza","publisherId":"28680","publisherName":"Wes Souza","runCount":1093,"viewCount":2789},{"description":"This plugin allows you to click on an image layer and swap that image with a URL.\n\n*The URL must be Https and have CORS enabled","id":"879623756923695604","installCount":815,"lastUpdateDate":"2020-08-24T07:12:32.524Z","likeCount":10,"name":"URL2IMAGE","publisherHandle":"1dab26ea_30be_4","publisherId":"1054172","publisherName":"Hamish Buttle","runCount":926,"viewCount":1822},{"description":"Filter all text layers from selected frames and groups","id":"879808647269226079","installCount":1017,"lastUpdateDate":"2020-08-26T12:07:44.301Z","likeCount":13,"name":"FilterTextLayers","publisherHandle":"2ce43e97_8b93_4","publisherId":"972240","publisherName":"Bablu Bhoi","runCount":764,"viewCount":1881},{"description":"<p>Easily resize your frames for various social media apps in seconds.</p><p><br></p><p>-&gt; This plugin includes presets for the following social media:</p><p>• Twitter</p><p>• Instagram</p><p>• Facebook</p><p>• LinkedIn</p><p>• Open graph / meta tag</p><p>• Custom size</p><p><br></p><p>-&gt; To use this plugin</p><p>1. Install and run the “FigPug Social Frame Generator” plugin</p><p>2. Select your frame</p><p>3. Confirm the frame</p><p>4. Select the social media websites you’d like to generate for</p><p>5. Click the “generate” button</p><p>6. Export your images!</p><p><br></p><p>-&gt; License</p><p>Upon install, you can access a selected number of social media presets. To access all of the social media presets, you will be asked to purchase a licence. Your license will allow you to generate an unlimited amount of profiles.</p><p><br></p><p>To purchase a license, please visit https://figpug.com</p><p><br></p><p>If you’ve discovered a bug or have any feature requests, please don’t hesitate to reach out: hello@figpug.com</p>","id":"879918470199444084","installCount":849,"lastUpdateDate":"2020-09-01T01:46:48.920Z","likeCount":14,"name":"FigPug Social Frame Generator","publisherHandle":"FigPugTeam","publisherId":"861638536625223323","publisherName":"FigPug","runCount":603,"viewCount":2676},{"description":"Answers the question “How should I name this color?” once and for all.\n\nSelect any node with solid fill and see the name of the color or the list of color names closest to it.\n\nThis plugin searches through HTML color names and “Name that Color” list and computes the Euclidean distance to find colors that are closest to selected","id":"880101729425135325","installCount":4620,"lastUpdateDate":"2020-08-26T07:55:10.920Z","likeCount":81,"name":"Color Name","publisherHandle":"romanshamin","publisherId":"725","publisherName":"Roman Shamin","runCount":3008,"viewCount":6390},{"description":"<h2>Welcome !</h2><p>With this simple plugin, add a glow neon effect on your text elements !</p><p><br></p><h2>How to use this plugin ?</h2><p>1. Select a text element to get started.</p><p>2. Click on the button to make it glow!!</p><p><br></p><h2>Tip</h2><p>This effect is cooler with dark UI, dark background, light text color and… 1 2 3, GLOOWWW</p><p><br></p><h2><strong>Next Steps</strong></h2><p>TextNeon works with :</p><ul><li>large texts</li><li>forms</li><li>pictures</li><li>more...</li></ul><p><br></p><h2>See you guys !</h2><p>Do not hesitate to tell me your opinion on my first plugin at <a href=\"mailto:rneoon@gmail.com\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">rneoon@gmail.com</a> !</p><p><br></p>","id":"880520575517390750","installCount":10540,"lastUpdateDate":"2020-09-15T18:47:03.130Z","likeCount":48,"name":"TextNeon","publisherHandle":"neonneon","publisherId":"880519832454039468","publisherName":"Neon Neon","runCount":9638,"viewCount":11074},{"description":"With a simple click, it will generate a title over your object.","id":"880654288520519627","installCount":308,"lastUpdateDate":"2021-03-19T02:19:53.494Z","likeCount":15,"name":"Titler","publisherHandle":"3010816","publisherId":"3010816","publisherName":"Sam Liu","runCount":306,"viewCount":835},{"description":"<p>This plugin places a customizable dot on every vertex of selected vectors with surgical accuracy.</p><p><br></p><p>It can be tedious having to manually place individual dots to their exact spot on a vector shape. I've done that so many times, and I was unhappy with them being just a tiny bit off the center. So I wrote this plugin, and I hope it helps you as much as it helps me.</p><p><br></p><h2>Usage:</h2><p>------------------------------------------------------</p><ol><li>Select vector layers, and run the plugin</li><li>Make the dots your desired styles</li><li>Change the dot <strong>radius</strong> by scrubbing the '<strong>Padding around items</strong>' in the auto-layout panel</li></ol><p><br></p><h2><strong>Feature Updates:</strong></h2><p>------------------------------------------------------</p><p><strong>December 30th:</strong></p><ol><li>Now you can re-run this plugin on any vector to update the dots</li><li>You can now select multiple vectors simultaneously and run the plugin</li></ol><h2><br></h2><p><strong>December 28th:</strong></p><ol><li>Drastically simplified layer structure for dots, taking full advantage of auto-layout v3</li><li>Dot are now componentized, for better extendability and easier management</li></ol>","id":"880740985021442025","installCount":2578,"lastUpdateDate":"2021-06-30T04:43:18.246Z","likeCount":76,"name":"Dots on Vertices","publisherHandle":"MrBiscuit","publisherId":"1241","publisherName":"Mr.Biscuit","runCount":1693,"viewCount":5950},{"description":"<p>The Overflow plugin extends Figma’s functionality to create beautiful user flow diagrams and stunning design presentations like never before.</p><p><br></p><p>To get started</p><p><br></p><p>✅&nbsp;Install the Figma Plugin&nbsp;</p><p>✅&nbsp;<a href=\"https://overflow.io/n/signup?utm_source=figma&amp;utm_medium=link&amp;utm_campaign=figma\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Create an Overflow account</a> &amp; get started for free.</p><p>✅&nbsp;<a href=\"https://www.youtube.com/watch?v=ys4sVMQIoVA\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Watch 1-min video</a> of how it works.</p>","id":"880782315986192393","installCount":19579,"lastUpdateDate":"2021-07-22T09:21:42.659Z","likeCount":238,"name":"Overflow","publisherHandle":"overflowapp","publisherId":"563443","publisherName":"Overflow","runCount":17109,"viewCount":43575},{"description":"<p>Translations for Figma seamlessly integrates into your environment and allows you to test every page with different languages on-fly.</p><p>You can use it for free or as a paid service. The&nbsp;<strong>free tier</strong>&nbsp;is free of payments with no registration required and enabled by default, but a subject of availability from your network. Check out what is available with&nbsp;<strong>featured access&nbsp;</strong>at&nbsp;<a href=\"https://figmat.com/pricing\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">https://figmat.com/pricing</a>.</p><p><br></p><p>The plugin adds a command menu to run translations. The commands aim to minimize your efforts to translate content and designed to work on multiple labels at a time.&nbsp;</p><p><br></p><p><strong>On the first run,</strong>&nbsp;a confirmation window will appear.&nbsp;</p><ul><li>You need to provide the original language and choose the translation scope.</li><li>If your labels are in frames you do not need to select specific elements. Make sure you choose the \"All in frames\" translation scope.&nbsp;</li><li>If labels are outside of frames or it's not necessary to translate the entire content you should select the labels before running translations. Make sure you choose 'Incremental' scope in the confirmation window. Once translated text will be included in future translations even if not selected.</li></ul><p><br></p><p><strong>Further details.</strong>&nbsp;To manage translations you should be aware of two essential parameters - original/source language and scope for translations. A confirmation window will appear on the first attempt to translate a new page to get the parameters.&nbsp;&nbsp;</p><p><em>Original/source language</em>&nbsp;is the language that you use to develop. The plugin uses the entered text as a source for all translations and reverts it without modifications when you request a translation to the language.</p><p><em>The translation scope</em>&nbsp;is a way to determine which labels you want to translate. There are two options - 'All in frames' and 'Incremental'. With 'All in frames', the plugin will detect all labels in frames, including nested ones. It will also translate all newly added labels. You do not need to select specific labels to have them translated if they are in a frame.&nbsp;</p><p>With 'Incremental', the plugin translates only selected and previously translated labels. If you add a new label, you need to select it and request translation. Please, use the method if your design does not use frames, or you want to reduce affected labels.&nbsp;</p><p>&nbsp;</p><p><br></p><p><strong>Learn deeper.</strong>&nbsp;The plugin does not request previously translated labels from the server on a second language switch.</p><p>&nbsp;</p><p>If you edit a label in the source language, the plugin will request a new translation on the next request to translate the page.</p><p><br></p><p>If you edit a translated label in non-source language - the plugin will keep the proposed translation to recover it in the future. You can share your document with a professional or a native speaker for a review, and the plugin will keep the modifications.</p><p><br></p><p>When you append a new label on a translated page, the plugin considers new text as written in a source language, even if an entire page translated. The next translation request will synchronize added text with another context.</p>","id":"880826733808822304","installCount":2955,"lastUpdateDate":"2021-11-04T23:43:28.750Z","likeCount":29,"name":"Translations for figma","publisherHandle":"58f630cf_0983_4","publisherId":"880870850386678883","publisherName":"figmat's Team","runCount":3254,"viewCount":8122},{"description":"Veeery use-case specific.\n\n1. It renames the current page to \"With Annotations\"\n2. Clones it\n3. Renames the clone to \"Without Annotations\"\n4. Removes all children with the name \"Annotations\" from the clone","id":"880892324172124227","installCount":62,"lastUpdateDate":"2020-09-17T20:56:44.155Z","likeCount":2,"name":"De-annotator","publisherHandle":"masha","publisherId":"2518484","publisherName":"masha","runCount":26,"viewCount":630},{"description":"<p>Create beautiful sitemaps in minutes and visually represent Figma frames as node thumbnails</p>","id":"881061798645640285","installCount":6945,"lastUpdateDate":"2020-08-28T06:52:14.994Z","likeCount":74,"name":"MockFlow SiteMap","publisherHandle":"54f723f6_a39d_4","publisherId":"30842","publisherName":"MockFlow","runCount":6680,"viewCount":14250},{"description":"<p>Jot down notes for every screen that you design, track and update the progress of your work, sync your work to trello to let your team know what you are upto!</p><p><br></p><p>📝Take notes during feedback, critique or things you want to keep in mind.</p><p>👨‍💻Update progress of your work and jump quickly to the screens that need your immediate attention.</p><p>➰Sync your work to Trello and let your teammates know the progress of your work.</p><p><br></p><p><br></p><p>We can't wait for you to try out Raven!</p><p><br></p><p>----------------------</p><p><br></p><p>💬Have feedback / feature requests / encountered bugs? You can give us your <a href=\"https://harish52.typeform.com/to/ch5NghLW\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">feedback</a> or email us @ <a href=\"mailto:interpid16@gmail.com\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">interpid16@gmail.com</a></p>","id":"882494270063444556","installCount":651,"lastUpdateDate":"2020-09-19T06:16:49.253Z","likeCount":40,"name":"Raven | Document & Track Designs","publisherHandle":"harish","publisherId":"45385","publisherName":"Harish Shivaraman","runCount":476,"viewCount":2620},{"description":"<p>一款快速的<strong>填充中文的文字数据</strong>的插件，默认有39种类型，<strong>支持自定义</strong></p><p><br></p><p>插件官方网站：<a href=\"https://www.pslkzs.com/figmaText/index.php\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">www.pslkzs.com/figmaText/index.php</a></p><p><br></p><p>插件默认数据包含姓名，电话，地址，网名，民族，性别，省市区，身份证，银行卡，邮箱，公司名称，小区名称，网站地址，qq，大学，学科，IP，Mac，唯一标识，车牌，手机品牌，股票代码，汽车品牌，歌曲名称，公园名称，5A风景区，医院名称，药品，疾病，新闻标题，颜色值，名人名言，毒鸡汤，新闻内容，评论留言，序号，数字，手机（座机）号，年龄</p>","id":"882853640594594542","installCount":12853,"lastUpdateDate":"2021-11-22T04:26:51.216Z","likeCount":191,"name":"Chinese Content Filling Assistant","publisherHandle":"www_pslkzs_com","publisherId":"870114250878292665","publisherName":"NB Charts","runCount":11661,"viewCount":13251},{"description":"<p>..and vice versa !</p><p><br></p><p>Simply select a table and run the plugin to convert rows ⟶ columns (or the other way around, depending on your initial set up).</p><p><br></p><p>Please note:</p><ul><li>Table and rows/columns should have Auto Layout applied</li><li>Cells should have the same height</li></ul><p><br></p><p>Source: <a href=\"https://github.com/masha312/Columns-to-Rows\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://github.com/masha312/Columns-to-Rows</a></p><p>You can <a href=\"https://www.figma.com/community/file/886601126244787050/Columns-to-Rows-plugin-demo?fuid=769647587273028980\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">test out the plugin here</a>.</p>","id":"883151892317735809","installCount":870,"lastUpdateDate":"2020-09-12T13:23:20.924Z","likeCount":17,"name":"Columns to Rows","publisherHandle":"masha","publisherId":"2518484","publisherName":"masha","runCount":731,"viewCount":2950},{"description":"<p>Easily evaluate frames with the Genus AI content scoring engine. Select a frame and evaluate it with the Genus AI engine to reveal it's General Appeal score, Archetype and levels for each Personality Trait.</p><p><br></p><p>General Appeal. Likelihood for the frame used as an ad to generate likes, shares or comments by customers.</p><p><br></p><p>Archetype. Genus AI proprietary technology is able to assign communications archetype to each evaluated frame allowing it to be matched to customer segments who fall in this archetype group for more efficient advertising campaigns.</p><p><br></p><p>Traits. Personality traits Openness, Conscientiousness, Extraversion, Agreeableness and Neuroticism are scored for each frame to reveal at the granular level which traits are ideal for each of the evaluated frames.</p><p><br></p><p>New Functions:</p><ul><li>Automatically change color for a selected Rectangle object</li><li>Automatically evaluate and replace image frame with stock footage from royalty free source Pexels</li></ul><p><br></p><p>Demo of the plug-in can be found here:</p><p><a href=\"https://youtu.be/d4tK87zPx_I\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">https://youtu.be/d4tK87zPx_I</a></p><p><br></p><p>More details can be found here:</p><p><a href=\"mailto:figma-inquiries@genus.ai\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">figma-inquiries@genus.ai</a></p>","id":"883486255699957790","installCount":1007,"lastUpdateDate":"2020-12-07T07:05:11.029Z","likeCount":19,"name":"Genus AI Analysis","publisherHandle":"tadas","publisherId":"4394562","publisherName":"Tadas Jucikas","runCount":677,"viewCount":3335},{"description":"<p>Generator for circular text.</p><p><br></p><p>Instructions:</p><p>[ja] <a href=\"https://youtu.be/Jpv_aDLUoJM\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://youtu.be/Jpv_aDLUoJM</a></p><p>[en] <a href=\"https://youtu.be/XUUsN-Ya2Yg\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://youtu.be/XUUsN-Ya2Yg</a></p>","id":"884226330548474110","installCount":45857,"lastUpdateDate":"2022-06-18T03:58:11.036Z","likeCount":219,"name":"Circular Text","publisherHandle":"feb19","publisherId":"1560504","publisherName":"feb19","runCount":44218,"viewCount":54244},{"description":"<p>Simply drag the useful stickers and drop where you want them to appear!</p><p><br></p><p><br></p><ol><li>Select the SVG you want on the plugin,</li><li>Start dragging it into the target are,</li><li>Simply drop where it want you to appeare!</li></ol><p><br></p><p><br></p><h2><strong>Story:</strong></h2><p>I'm a student designer based in Berlin and I always use these mini stickers in my workflow to indicate something rather to me or my colleagues. I also had the idea of developing a plugin since I learned a bit of Vue and JS during the pandemic then looking at current tools I realized that there is not a tool that you can just drag and drop something to the area you want.</p><p><br></p><p>Then I've discovered that Figma has a very open and collaborative developer space, using all of these free resources and building on top of them, I've built my first plugin. I'm so happy to share it with you ❤️!</p><p><br></p><h2><strong>Resources &amp; Inspirations:</strong></h2><p><br></p><p>BIG THANKS! to <a href=\"https://github.com/jackiecorn/figma-plugin-drag-and-drop\" rel=\"noreferrer noopener nofollow\" target=\"_blank\"><strong>jackiecorn</strong></a><strong> </strong>and <a href=\"https://github.com/thomas-lowry/figma-plugins-on-github\" rel=\"noreferrer noopener nofollow\" target=\"_blank\"><strong>thomas-lowry</strong></a><strong> </strong>wi</p><p>hout their starter GitHub repos I couldn't be able to put such features together.</p><p><br></p><p>Drag &amp; Drop Starter Template:</p><p><a href=\"http://
https://github.com/jackiecorn/figma-plugin-drag-and-drop\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">
https://github.com/jackiecorn/figma-plugin-drag-and-drop</a></p><p><br></p><p>Figma Plugin Webpack Sample:</p><p><a href=\"https://github.com/figma/plugin-samples/tree/master/webpack\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">https://github.com/figma/plugin-samples/tree/master/webpack</a></p><p><br></p><p>Icons:</p><p><a href=\"https://feathericons.com/\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">https://feathericons.com/</a></p><p><br></p><p><br></p><h2><strong>Send Your SVGs and Feedback!</strong></h2><p><br></p><p><a href=\"https://docs.google.com/forms/d/e/1FAIpQLSdvEpjqXvmbMNEjRkHle70pi7fDhnirWiLojEEWt9tDBbl3uQ/viewform?usp=sf_link\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">Send me your SVGs</a> so I can include them on the next relase, you can also <a href=\"https://docs.google.com/forms/d/e/1FAIpQLSdvEpjqXvmbMNEjRkHle70pi7fDhnirWiLojEEWt9tDBbl3uQ/viewform?usp=sf_link\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">share any feedback</a>. I also plan to share the codebase soon on Github (Might need some real developer help first though, some stuff might be too messy to share :D).</p>","id":"884531262241804656","installCount":1637,"lastUpdateDate":"2020-09-06T21:01:02.922Z","likeCount":15,"name":"Drag & Drop","publisherHandle":"erdincciftci","publisherId":"4236264","publisherName":"Erdinç Çiftçi","runCount":1888,"viewCount":5311},{"description":"<p>Powerful annotation tool for illustrating your UI designs created with Figma</p><p><br></p><p><br></p><p>AnnotatePro provides</p><p><br></p><ul><li>Exclusive components like callout, dimension, pointers, markers</li><li>Annotation effects like blur, pixelate, censor, spotlight and zoom parts of the design</li><li>100's markup stickers for more vivid descriptions</li><li>Animated pointers to capture user attention</li><li>User interactive annotations to popup content (text, images, video) on specific design areas</li></ul><p><br></p><p>AnnotatePro allows you to import Figma designs for annotations. And export annotated designs to your Figma frame all without leaving the editor.</p><p><br></p>","id":"884837349268454910","installCount":1476,"lastUpdateDate":"2020-09-07T16:41:22.341Z","likeCount":16,"name":"MockFlow AnnotatePro","publisherHandle":"54f723f6_a39d_4","publisherId":"30842","publisherName":"MockFlow","runCount":1085,"viewCount":5642},{"description":"<p>Padderr assists you speeding up your design process and maintaining the consisent high quality deigns by setting and updating custom paddings to your frames in seconds.</p><p><br></p><p><strong>How it Works</strong></p><p><br></p><ul><li>Select a frame</li><li>Run the plugin</li><li>Check on the top of the plugin if the name of the frame is corrct</li><li>add the required padding for all the sides of the frame (i.e left,right,top, and bottom)</li><li>Hit the add padding buttom for applying the padding</li></ul><p><br></p><p><strong>Important to Know</strong></p><ul><li>The plugin curenty ony works for frames in your project.</li><li>The plugin does not support any other types of layers like components, elemets, text,etc.</li></ul>","id":"884854026152687111","installCount":1099,"lastUpdateDate":"2020-09-08T21:45:14.996Z","likeCount":20,"name":"Padderr","publisherHandle":"augustinezzz","publisherId":"936854","publisherName":"Augustine Thomas","runCount":759,"viewCount":2531},{"description":"<p>日本語のダミーテキストを生成します。</p><p><br></p><p>ダミーテキストを生成したいテキストレイヤーをすべて選択し「生成」をクリックすると、レイヤーごとにダミーテキストを生成します。Min/Max のどちらかのみを入力すると、正確な文字 (文) 数を生成します。Min/Max に異なる数値を入力すると、その範囲内の文字 (文) 数を生成します。</p><p><br></p><p>「自動生成」は、選択したレイヤーのテキストボックスに最適な量のダミーテキストで自動的に生成します。</p><p><br></p><p>----</p><p><br></p><p>Generate Japanese dummy text to fill your text layers.</p><p><br></p><p>Select all the text layers you want to generate dummy text for then click \"Generate\" — it will generate for each layer uniquely. If you only input a number to either Min or Max, it will generate the exact number of characters or sentences. If you input different numbers to Min/Max, it will generate the number of characters or sentences in that range.</p><p><br></p><p>\"Auto-generate\" will automatically fill the selected layers with the perfectly amount of dummy text to fit the text box.</p>","id":"884977600755027488","installCount":1255,"lastUpdateDate":"2020-10-15T16:30:17.485Z","likeCount":23,"name":"Japanese Dummy Text","publisherHandle":"ixkaito","publisherId":"981516","publisherName":"Kite","runCount":808,"viewCount":2014},{"description":"<p><strong>The 3th utility of Util+ has been released.</strong></p><p><br></p><p><strong>v1.2.0</strong></p><ul><li><strong>Faker Text</strong>: Faker Text can generate fake data for various areas, including address, commerce, company, date, finance, image, random, or name.</li></ul><p><br></p><p><strong>v1.1.0</strong></p><ul><li><strong>Offset Frame</strong>: Select one frame and create it below the frame</li></ul><p><br></p><p><strong>v1.0.0</strong></p><p>You can work with the pixels you want by adjusting the value.</p><p><br></p><ul><li><strong>Step Size</strong>: Basically, you can adjust the width and height of 8 pixels.</li><li><strong>Step Position</strong>: By default, you can move the position by 8 pixels.</li></ul><p><br></p><p><br></p><p><code>Second utility 'faker text' is under development</code></p>","id":"885142896349849231","installCount":306,"lastUpdateDate":"2020-10-17T04:55:19.519Z","likeCount":16,"name":"util+","publisherHandle":"eddwardpark","publisherId":"850198317964819662","publisherName":"edward park","runCount":226,"viewCount":1160},{"description":"<p>This plugin will round to nearest multiplier of 8 every X and Y distances on the selected objects.</p><p><strong>&nbsp;</strong></p><p><strong>Select a group of objects and run the plugin. </strong>No need to set anything or click a button.&nbsp;</p><p><strong>&nbsp;</strong></p><p>X, and Y values of the selected objects will become 8, 16, 24, 32...</p><p><strong>&nbsp;</strong></p><p><strong>&nbsp;</strong></p>","id":"885824401976915917","installCount":1534,"lastUpdateDate":"2020-11-12T10:06:42.356Z","likeCount":46,"name":"All distances to 8px multiples","publisherHandle":"pmaojo","publisherId":"30783","publisherName":"Pelayo Maojo","runCount":1080,"viewCount":2739},{"description":"<p>Create custom-styled tables which can be easily resized, edited and automatically adjust to content. Control the design of your tables by modifying the components. Update all tables, anytime your design changes. Use the plugin commands to make selecting columns and rows easier.</p><p><br></p><h2>Getting started</h2><p><br></p><ol><li>Run the command <code>Create Table</code></li><li>The plugin will ask you to create a template</li><li>Customise the template to customise how you want your tables to look</li><li>Choose your table options, like how many columns or rows you want.</li><li>Click <strong>Create Table</strong></li></ol><p><br></p><p>See the <a href=\"https://www.figma.com/community/file/1128443481205347060\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Table Creator Starter Kit</a> for examples of creating more complex tables.</p><p><br></p><h2>Using with libraries</h2><p><br></p><ol><li>Publish your template in a team library</li><li>From another file run the plugin</li><li>Choose <strong>Existing Template</strong></li><li>Select the library you want to use from the list</li></ol><p><br></p><h2><strong>Creating a table</strong></h2><p><br></p><ol><li>Run the command <code>Create Table</code></li><li>Customise your table (see options below)</li><li>Click <strong>Create Table</strong></li></ol><p><br></p><p><strong>Number of columns and rows</strong></p><p><br></p><p>Choose how many columns and rows you want. Up to a maximum of 50.</p><p><br></p><p><strong>Table width and height</strong></p><p><br></p><p>To create a table with a specific width and height change the value from HUG to any numeric value you want. To change it back just enter HUG as the value.</p><p><br></p><p><strong>Cell width</strong></p><p><br></p><p>Enter any numeric value you want for the cell width. Change the value to FILL if you want them to resize with the table, rather than be a fixed width.</p><p><br></p><h2>Editing text</h2><p><br></p><ol><li>While holding down <code>CMD/CTRL</code> double-click the centre of a cell to edit its text.</li></ol><p><br></p><p>To include other content in a cell, create another variant of the cell in your template. Then you can include other content like icons or form controls. When you create a table, select the cells you want to change and choose the new variant type from the <em>Property Panel</em> in Figma.</p><p><br></p><h2>Selecting cells</h2><p><br></p><ol><li>Hold down <code>CMD/CTRL</code> while hovering over the edge/border of cell</li><li>Hold down <code>SHIFT + CMD/CTRL</code> to select multiple cells (use command below to select all cells in a column or row)</li></ol><p><br></p><h2>Selecting columns and row</h2><p><br></p><ol><li>Select one or more cells</li><li>Run the command <code>Select Column</code> or <code>Select Row</code></li><li>Plugin will select all cells in the current column/row</li><li>Resize or reorder to your heart's content :)</li></ol><p><br></p><h2>Column resizing</h2><p><br></p><p>By default Column Resizing is enabled. After you have created a table, resize the cells in the first row to control the size of the columns. You can toggle Column Sizing on and off by selecting the table and clicking <strong>Column Resizing</strong> in the Properties Panel, under Plugin.</p><p><br></p><h2>Switching between columns or rows</h2><p><br></p><p>Change a table from columns or rows or vice versa</p><p><br></p><ol><li>Select a table</li><li>Then from the Properties Panel under Plugin click <strong>Switch Axes</strong>.</li></ol><p><br></p><h2>Duplicating tables</h2><p><br></p><p>When you duplicate a table that was created using Column Resizing, it contains a local component. That means when it's duplicated, the copy is intrinsically linked. To get around this you can either reapply column sizing or detach the table and it's rows.</p><p><br></p><ol><li>Select a table</li><li>Then from the Properties Panel under Plugin click <strong>Column Resizing</strong> or <strong>Detach Table</strong>.</li></ol><p><br></p><h2>Known issues</h2><p><br></p><p>Currently component properties aren't copied across correctly when creating a template. This is because there's bug with the API that messes up your undo history so I can't add that feature yet.</p>","id":"885838970710285271","installCount":80912,"lastUpdateDate":"2022-07-26T00:22:52.573Z","likeCount":610,"name":"Table Creator","publisherHandle":"gavinmcfarland","publisherId":"9971","publisherName":"Gavin McFarland","runCount":81589,"viewCount":96579},{"description":"<p>Design tokens are essential to building and maintaining a design system. Star Token gives ability to create and share tokens across the teams, making the tokens in Figma the single source of truth for your design system.</p><p><br></p><p><strong>Tokens supported:</strong></p><ul><li>colors</li><li>font-size</li><li>border-radius </li></ul>","id":"886020015633043493","installCount":223,"lastUpdateDate":"2020-12-27T20:03:08.128Z","likeCount":11,"name":"Star Token","publisherHandle":"startoken","publisherId":"1300872","publisherName":"Vinícius Pretto da Silva","runCount":220,"viewCount":1265},{"description":"<h1>Describtion / 介绍</h1><p>This plugin is to check the typesetting rules of Chinese. Current support:</p><ul><li>A space is needed between Chinese and English word</li><li>A minimum font size of 12px</li><li>A minimum line height of 1.5 in Chinese and 1.2 in English</li></ul><p><br></p><p><br></p><p>本插件的主要功能是检查中文语境下的设计规则。目前实现以下规则：</p><ul><li>英文与中文连接处需要有空格.</li><li>最小字号(默认 12px，可配置).</li><li>最小行高(默认中文 1.5 倍，西文 1.2 倍，暂不开放配置)</li></ul><h1><br></h1><h1>How to use / 使用说明</h1><ol><li>click \"install\" button</li><li>open figma menu -&gt; plugins -&gt; Design Rule Linter</li></ol>","id":"886210367389281399","installCount":1319,"lastUpdateDate":"2020-10-10T02:40:52.240Z","likeCount":24,"name":"Design Rule Linter / 设计规则检查助手","publisherHandle":"qefeng","publisherId":"862525073265962761","publisherName":"qefeng","runCount":750,"viewCount":3450},{"description":"<p>Meet a plugin that'll help you disable Auto Layouts fast. </p><p><br></p><p>You just need to select the necessary objects and all chosen Auto Layouts (including child objects, if needed) can be disabled in one click. </p><p><br></p><p>This plugin will be handy not only for coders but also for designers. </p><p><br></p><p>Good luck and don't limit your creativity! :)</p>","id":"886242011062127766","installCount":695,"lastUpdateDate":"2020-12-02T09:56:34.035Z","likeCount":9,"name":"Disable Auto Layout","publisherHandle":"sergey_z","publisherId":"3648036","publisherName":"Sergey Z.","runCount":576,"viewCount":1732},{"description":"<p>Restore original size of the image after it has been resized/cropped inside Figma</p><p><br></p><p>The plugin will reset the size of an image or any other selected object that has an image fill, to the original dimensions of the image.</p><p><br></p><p>You can reset several objects at a time. Clipping options will be switched back to „Fill”. This plugin will not affect masks.</p>","id":"886379932197117140","installCount":3342,"lastUpdateDate":"2020-09-13T05:20:18.761Z","likeCount":62,"name":"Restore Image Dimensions","publisherHandle":"vadim","publisherId":"779","publisherName":"Vadim Pleshkov","runCount":2904,"viewCount":5430},{"description":"<p>Hosted Export allows you to copy hosted image URLs for any frame inside Figma.</p><p><br></p><p>Here's how it works:</p><ol><li>Select frame(s) to export</li><li>Open \"Hosted Export\" plugin</li><li>Click link icon to copy image URL to clipboard</li><li>Paste anywhere you want!</li></ol><p><br></p><p>Hosted Export is powered by Component AI's <a href=\"https://components.ai/changelog/jsx-to-png/\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">JSX to PNG API</a>.</p><p><br></p><p>Contributions welcome! <a href=\"https://github.com/colebemis/figma-hosted-export\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">https://github.com/colebemis/figma-hosted-export</a></p>","id":"886688414738743606","installCount":902,"lastUpdateDate":"2020-09-15T04:02:18.874Z","likeCount":42,"name":"Hosted Export","publisherHandle":"cole","publisherId":"27955","publisherName":"Cole Bemis","runCount":727,"viewCount":3972},{"description":"<p><a href=\"http://geenes.app/\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">Geenes.app</a> is a <em>free</em> app where you can easily create and maintain full colour palettes and their variations.</p><p>Seamlessly synch them as <strong>styles</strong> into Figma with this plugin.</p><p><br></p><p>Do all the changes you need on <a href=\"http://geenes.app/\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">Geenes.app</a> and this plugin will automatically add, update or remove colours <strong>styles</strong> in any figma file you want. Less manual work for you and your team!</p>","id":"887066243068431786","installCount":2108,"lastUpdateDate":"2021-05-01T13:52:52.142Z","likeCount":60,"name":"Geenes","publisherHandle":"af371dd4_3d42_4","publisherId":"407639","publisherName":"Gianluca Gini","runCount":1290,"viewCount":4680},{"description":"<p>Automatically swap an image layers image with an inputed URL when there is a single layer name <strong>\"IMAGE\"</strong>.</p>","id":"887204493763877325","installCount":509,"lastUpdateDate":"2020-09-14T05:16:51.726Z","likeCount":5,"name":"Auto Image Swapper","publisherHandle":"1dab26ea_30be_4","publisherId":"1054172","publisherName":"Hamish Buttle","runCount":487,"viewCount":1633},{"description":"<p>BlendingMe it's the best way to create a blend for two lines, ellipses or rectangles. As easy as possible - just select two objects you want to blend, choose a count of blending steps and click on Create.</p><p><br></p><p>You can change blending path, colour, stroke weight and opacity in REALTIME while plugin is working. When you'll be satisfied with a result, just click Done. That's it!</p><p><br></p><p><strong>How does it work step by step?</strong></p><p>1. Create two lines with a Pen tool (You can also create ellipses or rectangles).</p><p>2. Select lines you want to blend (or any figure you've created)</p><p>3. Choose count of blending steps</p><p>4. Click Create 🎉</p><p><br></p><p><strong>What BlendingMe can Blend:</strong></p><p>— Paths of two lines</p><p>— Elipses and Rectangles</p><p>— Solid stroke colour</p><p>— Solid fill colour</p><p>— Strokes weight</p><p>— Opacity</p><p>— Rotation</p><p>— Position</p><p>— Size</p><p><br></p><p>BlendingMe will be updated. And it will have more features for sure 🙂</p><p><br></p><p>If you want to support my work in creating plugins, please join my <a href=\"https://www.patreon.com/anashkindesign\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">Patreon Community</a> 🥰</p><p>I also accept one-time donations via <a href=\"https://www.paypal.com/paypalme/andexds\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">PayPal</a></p>","id":"887243243437608411","installCount":33493,"lastUpdateDate":"2021-07-07T09:19:48.289Z","likeCount":421,"name":"BlendingMe","publisherHandle":"andexds","publisherId":"135278","publisherName":"Anashkin Andrey","runCount":27177,"viewCount":34809},{"description":"<h2>Create isometric objects quickly and easily!</h2><p><br></p><p>Isometric transformation and movement of objects, smart isometric objects.</p><p><br></p><p>Move buttons support mouse wheel, smart objects support mouse wheel and right mouse button.</p>","id":"887297527562833401","installCount":10477,"lastUpdateDate":"2020-10-03T09:46:24.818Z","likeCount":116,"name":"Ease Isometric","publisherHandle":"ladyginpro","publisherId":"1198331","publisherName":"ladyginpro","runCount":9774,"viewCount":14056},{"description":"<p>Easily design with units more than just pixels</p><p><br></p><p>-&gt; This plugin includes the following units:</p><p>• Centimeter</p><p>• Millimeter</p><p>• Inches</p><p>• Feet</p><p>• Rem</p><p><br></p><p>-&gt; You now can have</p><p><br></p><p>-&gt; To use this plugin</p><p>1. Install and run the “FigPug Units” plugin</p><p>2. Select your frames and objects</p><p>3. Select your preffered units</p><p>4. Customize scale and PPI</p><p>5. Enter dimensions to resize</p><p>6. Click the “export” button</p><p>7. Export your images with PPI you specified!</p><p><br></p><p>-&gt; License</p><p>Upon install, you have full access to the plugin for 4 trials. To access all of the features after the trial, you will be asked to purchase a licence. Your license will allow you to generate an unlimited amount of profiles.</p><p><br></p><p>To purchase a license, please visit https://figpug.com</p><p><br></p><p>If you’ve discovered a bug or have any feature requests, please don’t hesitate to reach out: hello@figpug.com</p>","id":"887509948778878570","installCount":10660,"lastUpdateDate":"2020-11-04T01:09:14.658Z","likeCount":66,"name":"FigPug Units","publisherHandle":"FigPugTeam","publisherId":"861638536625223323","publisherName":"FigPug","runCount":11746,"viewCount":15993},{"description":"<p>Upload any node as image to your private server to create a share link right in your clipboard.</p>","id":"887655969621814963","installCount":49,"lastUpdateDate":"2020-09-16T06:35:25.406Z","likeCount":3,"name":"Jing","publisherHandle":"3c2e1b96_80a7_4","publisherId":"887681302488298472","publisherName":"releu","runCount":21,"viewCount":180},{"description":"<p>A Figma plugin that allows you to export the whole document as a structured ZIP archive.</p><p><br></p><p>Usage: <a href=\"https://github.com/thoughteer/figma-harry-exporter#usage\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">https://github.com/thoughteer/figma-harry-exporter#usage</a></p>","id":"887687372515610323","installCount":341,"lastUpdateDate":"2020-09-19T01:45:01.843Z","likeCount":14,"name":"Harry Exporter","publisherHandle":"12ec2b4d_2939_4","publisherId":"880961577519380259","publisherName":"SIA Joom","runCount":333,"viewCount":1196},{"description":"<p>Dimensions is a simple utility to help with annotation of your designs.</p><p><br></p><p>Select the objects you want to mark up and click the type of annotation you want;</p><p><br></p><ul><li>Width by height with a label at the top</li><li>Width by height with a label at the bottom</li><li>Gaps between horizontal objects</li><li>Gaps between vertical objects</li><li>Margins above and below overlapping objects</li><li>Margins left and right of overlapping objects</li><li>Height left</li><li>Height right</li><li>Width top</li><li>Width below</li><li>Selection frame labelled above</li><li>Selection frame labelled below</li><li>Text style left</li><li>Text style right</li><li>Text style above</li><li>Text style below</li><li>Color styles left</li><li>Color styles right</li><li>Color styles above</li><li>Color styles below</li><li>Corner radius top left</li><li>Corner radius top right</li><li>Corner radius bottom right</li><li>Corner radius bottom left</li></ul>","id":"887996630608174929","installCount":4039,"lastUpdateDate":"2022-03-02T21:04:07.831Z","likeCount":74,"name":"Dimensions","publisherHandle":"yorkgibsoncafex","publisherId":"605050","publisherName":"York Gibson","runCount":4440,"viewCount":8197},{"description":"<p>This plugin is designed to be used in tandem with <a href=\"https://www.figma.com/@pincott\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">Kate Pincott's</a> Team Capacity Template.</p><p><br></p><p>How to use:</p><ol><li>Duplicate the <a href=\"https://www.figma.com/community/file/888177404156464065\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">Team Capacity Template</a> from the Figma community</li><li>Follow the instructions inside the template file, as it is already configured with plugin relaunch buttons.</li></ol>","id":"888195684930637738","installCount":302,"lastUpdateDate":"2020-09-17T06:04:02.253Z","likeCount":23,"name":"Capacity Calc","publisherHandle":"tom","publisherId":"35","publisherName":"Tom","runCount":151,"viewCount":1611},{"description":"<p>The text layer name will be auto-derived from characters.</p><p>文本图层命名将由文本内容自动生成。</p><p><br></p><p><a href=\"https://love.figma.cool/\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">❤️赞助我们</a> | Made by <a href=\"http://figma.cool/\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">Figma.Cool</a></p>","id":"888304306411591623","installCount":805,"lastUpdateDate":"2021-07-07T10:39:09.100Z","likeCount":26,"name":"autoRename","publisherHandle":"figmacool","publisherId":"4385338","publisherName":"Figma.Cool","runCount":653,"viewCount":2582},{"description":"<p>Export Figma styles and custom tokens to a style dictionary ready json or sync to github.</p><p><br></p><p>Vote for us on <a href=\"https://www.producthunt.com/posts/figma-design-tokens-2\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">ProductHunt</a></p><p><br></p><h2>Design Tokens</h2><p>You can create design tokens for the following properties:</p><ul><li>colors</li><li>typograhy</li><li>grids</li><li>effects</li><li>sizes</li><li>spacing (padding)</li><li>radii</li><li>borders</li><li>motion</li><li>opacity</li></ul><p><br></p><h2>Benefits</h2><p>✅ Actively developed</p><p>✅ Compatible with Amazon Style Dictionary</p><p>✅ <a href=\"https://github.com/lukasoppermann/design-tokens#push-to-server\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Sync tokens</a> directly with github repo (or other server)</p><p>✅ Support for Figma Styles</p><p>✅ Support for custom tokens</p><p><br></p><h2>Usage &amp; transformation</h2><p>Find out how to use the plugin to create custom tokens from the <a href=\"https://github.com/lukasoppermann/design-tokens\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">documentation</a>.</p><p><br></p><p>Get up to speed transforming your tokens using style directory with the <a href=\"https://github.com/lukasoppermann/design-token-transformer\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">transformer package</a>.</p><p><br></p><p>You can also view the <a href=\"https://www.figma.com/file/2MQ759R5kJtzQn4qSHuqR7/Design-Tokens-for-Figma?node-id=231%3A2\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">example Figma file</a>.</p><p><br></p><h2>Feature request &amp; bugs</h2><p>Please <a href=\"https://github.com/lukasoppermann/design-tokens/issues/new\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">create an issues in the repository</a>.</p><p><br></p><h2>Roadmap</h2><p>Upcoming features:</p><ul><li><s>Toggle exports per token category</s></li><li><s>Sync tokens directly with github repositories</s></li><li><s>Settings to customize plugin</s></li><li><s>Motion tokens</s></li><li><s>Spacing tokens</s></li><li><s>Improved font style export</s></li><li><s>Variant support</s></li><li><s>Dark mode</s></li><li><s>Opacity tokens</s></li><li>Support form spring motion</li></ul><h2><br></h2>","id":"888356646278934516","installCount":12229,"lastUpdateDate":"2022-07-12T13:01:26.172Z","likeCount":554,"name":"Design Tokens","publisherHandle":"lukasoppermann","publisherId":"445052","publisherName":"Lukas Oppermann","runCount":11010,"viewCount":54944},{"description":"<p>Arrangement of objects in a circle in one click</p>","id":"888369548293411843","installCount":2592,"lastUpdateDate":"2020-09-23T10:10:49.017Z","likeCount":35,"name":"Circularka","publisherHandle":"ladyginpro","publisherId":"1198331","publisherName":"ladyginpro","runCount":2387,"viewCount":4717},{"description":"<p>Plugin for time frame</p>","id":"888577133637826668","installCount":95,"lastUpdateDate":"2020-10-25T15:07:25.085Z","likeCount":2,"name":"Deadline","publisherHandle":"korczynsk1","publisherId":"649023","publisherName":"Mateusz Korczynski","runCount":43,"viewCount":299},{"description":"<p>Preview icons while editing in realtime at different preset sizes for web, iOS and Android.</p><p><br></p><h2>Previewing an icon</h2><p><br></p><ol><li>Select an icon and run the plugin (must be a frame, component or instance).</li><li>You will see a list of icons at different sizes for different platforms. Scroll to view more or resize the plugin window.</li></ol><p><br></p><h2>Locking the preview</h2><p><br></p><p>To lock the preview to the current icon just click the lock icon in the top right of the plugin window.</p><p><br></p><h2>Changing background colour</h2><p><br></p><p>Change the preview panel background, by changing the canvas colour of your Figma file to anything but the default.</p><p><br></p><h2><strong>Things to note</strong></h2><p><br></p><p>The plugin currently only supports square icons up to 512px.</p><p><br></p><h2>Known issues</h2><p><br></p><p>In some rare cases the preview disappears when using effects or gradients. I'm currently investigating this issue.</p>","id":"888907972695800109","installCount":1945,"lastUpdateDate":"2021-10-06T12:14:23.864Z","likeCount":42,"name":"Icon Preview","publisherHandle":"gavinmcfarland","publisherId":"9971","publisherName":"Gavin McFarland","runCount":1414,"viewCount":3182},{"description":"<p>Preview, compare, use and learn about standard easing functions for your custom prototype easings.</p><p><br></p><h1>How to use</h1><ol><li>Open eezin.</li><li>Explore a list of standard easing functions for Ease In, Ease Out and Ease In &amp; Out.</li><li>Preview any function by clicking on the Preview column for each of the functions.</li><li>Add another function to compare if you're having doubts.</li><li>Click the function name to copy de cubic bezier value.</li><li>Paste into your custom easing in the Interaction Details of your prototype interaction.</li><li>Create smooth, beautiful prototypes.</li></ol>","id":"888982951322498361","installCount":5012,"lastUpdateDate":"2020-09-25T17:45:58.803Z","likeCount":132,"name":"eezin","publisherHandle":"santiagomoreno","publisherId":"570857","publisherName":"Santiago Moreno","runCount":3107,"viewCount":8721},{"description":"<p>Move the selection to the new page created automatically.</p><p>将选中图层移动到自动创建的新页面。</p><p><br></p><p><a href=\"https://love.figma.cool/\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">❤️赞助我们</a> | Made by <a href=\"http://figma.cool/\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">Figma.Cool</a></p>","id":"889042366877166936","installCount":155,"lastUpdateDate":"2021-07-08T08:35:38.581Z","likeCount":14,"name":"Selection2Page","publisherHandle":"figmacool","publisherId":"4385338","publisherName":"Figma.Cool","runCount":68,"viewCount":810},{"description":"<p>Decouple text input from design. Easily find, update and retrieve text via a dedicated window.</p><p><br></p><p>Simple Copy makes it easy to:</p><ul><li>Replace placeholder text during the design phase</li><li>Extract text during the implementation phase</li></ul>","id":"889077977319860576","installCount":438,"lastUpdateDate":"2020-09-25T11:48:41.040Z","likeCount":16,"name":"Simple Copy","publisherHandle":"richgnx","publisherId":"889057544676229322","publisherName":"Richard Liu","runCount":290,"viewCount":1607},{"description":"<p>Плагин позволяет быстро готовить иконки для <a href=\"http://figma.com/@vk\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">VKUI Base Library</a>. Исходные вектора -&gt; чистый компонент.</p><p><br></p><p>Как использовать:</p><ol><li>Подготовьте фреймы с векторами для иконок.</li><li>Выделите нужные фреймы.</li><li>Запустите VKUI Toolkit -&gt; Prepare icons.</li><li>Если всё ок, плагин очистит фреймы и финализирует иконки.</li></ol><p><br></p><p>Что делает плагин:</p><ol><li>Чистит фрейм.</li><li>Кладёт исходные контуры в папку Source и скрывает её.</li><li>Переводит вектор в кривые и правильно называет слой.</li><li>Заливает слой стилем.</li><li>Делает фрейм компонентом, если он им не был.</li><li>И ещё пару приятных мелочей.</li></ol><p><br></p><p>Совет: назначьте горячую клавишу на команду «Prepare icons» в настройках клавиатуры.</p>","id":"889485351403919838","installCount":1367,"lastUpdateDate":"2020-09-20T12:17:51.994Z","likeCount":26,"name":"VKUI Toolkit","publisherHandle":"vk","publisherId":"349","publisherName":"VK","runCount":687,"viewCount":3037},{"description":"<p>Generate beautiful, smooth shadows with direction, color, and opacity controls.</p><p><br></p><p>The default shadows are jarring, and creating a smooth shadow by hand can be time-consuming and difficult.</p><p><br></p><p><strong>Shadow Maker </strong>makes generating smooth shadows easy.</p><p><br></p><p>Features:</p><ul><li>Edit shadow color, direction, opacity, blur, and more</li><li>Default simplified editor mode</li><li>Advanced mode with bezier curve editing</li></ul><p><br></p><p>Bugs, questions, or feedback? --&gt; <a href=\"https://twitter.com/GuamHat\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://twitter.com/GuamHat</a></p>","id":"889676455045507628","installCount":27247,"lastUpdateDate":"2022-05-13T03:08:06.684Z","likeCount":411,"name":"Shadow Maker","publisherHandle":"gautham","publisherId":"1268466","publisherName":"Gautham 🌶","runCount":20188,"viewCount":24417},{"description":"<p>Easily animate everything. Use avanced animation techniques. Share your design in any format: gif, mp4, webm, svg, sprites, frames, css, json.</p><p><br></p><p><strong>Documentation</strong></p><p>You can learn some basics of how to use the plugin in this community file</p><p><a href=\"https://www.figma.com/community/file/966913921712314277\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://www.figma.com/community/file/966913921712314277</a></p><p><br></p><p><strong>Bug Reports</strong></p><p>If you notice any bugs, please get in touch via<a href=\"https://motionplugin.com/#contacts.\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\"> https://motionplugin.com/#contacts</a></p><p><br></p><p><strong>License</strong></p><p>To buy license, please visi<a href=\"https://motionplugin.com/#pricing\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">t</a></p><p><a href=\"https://motionplugin.com/#pricing\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://motionplugin.com/#pricing</a></p><p><br></p><p><strong>Social</strong></p><p>Twitter<a href=\"https://twitter.com/motionplugin\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\"> https://twitter.com/motionplugin</a></p><p>Facebook<a href=\"https://www.facebook.com/groups/motionplugin\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\"> https://www.facebook.com/groups/motionplugin</a></p>","id":"889777319208467032","installCount":118656,"lastUpdateDate":"2022-07-26T08:13:04.106Z","likeCount":1573,"name":"Motion","publisherHandle":"babkinpavel","publisherId":"173706","publisherName":"Pavel Babkin","runCount":98332,"viewCount":128328},{"description":"<p>This plugin only works with the UI Language AD UI.</p><p>⭐️ 此插件只适用于设计语言 AD UI。</p><p><br></p><p>This plugin is to generate AD UI React Codes from Figma.</p><p><a href=\"https://wxad.design/adui\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">https://wxad.design/adui</a></p><p><br></p><p>AD UI is our design language and a React component library. I create this plugin for generating component codes for our developers, so they can write fewer repeated ui codes.</p><p><br></p><p>You can test here:</p><p><a href=\"https://www.figma.com/file/hA2PQ5QzmN8CI5nPOsxBRH/AD-UI-Generator-Test\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">https://www.figma.com/file/hA2PQ5QzmN8CI5nPOsxBRH/AD-UI-Generator-Test</a></p><p><br></p><p>1. select one frame and run plugin.</p><p>2. you'll see React codes and HTML in the iframe.</p><p>3. if your selection change, the HTML and codes in the iframe will update too.</p>","id":"889805913917507178","installCount":255,"lastUpdateDate":"2020-12-17T06:24:22.011Z","likeCount":11,"name":"AD UI Generator","publisherHandle":"c318af12_89ee_4","publisherId":"845509355731108285","publisherName":"Aragakey","runCount":197,"viewCount":1041},{"description":"<p>You can generate templates and tables from json api</p>","id":"889856823267627662","installCount":2192,"lastUpdateDate":"2020-09-21T13:14:53.149Z","likeCount":11,"name":"TEMPLATE & TABLE GENERATOR FROM API","publisherHandle":"rofiabul","publisherId":"760725","publisherName":"rofiabul","runCount":1135,"viewCount":3912},{"description":"<p>The <strong>HCL </strong>color space equalizes the <strong>apparent lightness </strong>of hues and allows for better control over contrast.&nbsp;</p><p><br></p><p>This helps to convey meaning with color, for things like data visualization, where using regular <strong>HSV</strong>/<strong>L</strong> may lead to seeing patterns that aren't there because hues have different lightness, and our brains give lightness priority over hue. It also helps eliminate unwanted surprises should your work be viewed in <strong>B</strong>/<strong>W</strong> (printed etc.)</p><p><br></p><p><strong>C</strong> is <a href=\"https://en.wikipedia.org/wiki/Colorfulness\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">colorfulness</a>. Its<em> </em>numeric value is somewhat arbitrary, so I normalize it to 100% at the edge.</p><p><br></p><p>The underlying color space is <a href=\"https://bottosson.github.io/posts/oklab/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\"><strong>okLab</strong></a> (default), <strong>Lab</strong> or <strong>Luv</strong>. The contrast ratio is calculated according to WCAG 3 (default) or WCAG 2.</p><p><br></p><p><em>(Note that WCAG 3 has not been finalized, so the contrast calculation is subject to change.)</em></p><p><br></p><p>Clicking a swatch copies its hex value to the clipboard. <code>Shift</code> locks dragging to one axis. The arrow keys move the selected handle in small increments (hold <code>Shift</code> to move both handles). <code>Alt</code> <code>R</code> / <code>⌥</code> <code>R</code> resets the plugin to the default state.</p><p><br></p><p>Color blindness can be simulated with the <a href=\"https://medium.com/@alexbourt/representing-color-blindness-in-ui-ab9964bad97d\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">three rings</a> in the top right corner. Each ring will cycle through <em>Normal</em>-&gt;<em>Weak</em>-&gt;<em>Blind</em> (the center dot includes <em>blue-mono</em> and <em>mono</em>). Holding <code>Shift</code> will toggle <em>Normal</em>&lt;-&gt;<em>Weak</em>, holding <code>Ctrl</code> / <code>⌘</code> will toggle <em>Normal</em>&lt;-&gt;<em>Blind</em>.</p>","id":"889859275438287504","installCount":3177,"lastUpdateDate":"2021-12-23T15:56:56.694Z","likeCount":71,"name":"HCL Color","publisherHandle":"alexbourt","publisherId":"1090927","publisherName":"Alex Bourt","runCount":3024,"viewCount":7007},{"description":"<h1><strong>What is Dixma?</strong></h1><p>Dixma is a 4-12 player storytelling party game in Figma, inspired by the the card game Dixit.</p><p><a href=\"https://www.youtube.com/watch?v=DWcApJy4kv4\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">Video Walkthrough</a> (YouTube)</p><p><br></p><h1><strong>Game Board Required: </strong></h1><p><a href=\"https://www.figma.com/community/file/889925301071649823\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">https://www.figma.com/community/file/889925301071649823</a></p><p><br></p><h1><strong>Game Rules</strong></h1><p>Each round all players have 6 random cards. The storyteller for the round shares a clue about one of their cards, and every other player picks their card that best fits the storyteller's story. The cards are revealed and all the players (other than the storyteller) guess which card they think is the storyteller's.</p><p><br></p><h2><strong>Scoring</strong></h2><p>If ALL players find the Storyteller’s card,</p><p>or NO&nbsp;players find the Storyteller’s card:</p><pre class=\"ql-syntax\" spellcheck=\"false\">Storyteller: 0 points&nbsp;\nOther players: 2 points&nbsp;&nbsp;\n</pre><p><br></p><p>If at least one player but not all players find the card:&nbsp;</p><pre class=\"ql-syntax\" spellcheck=\"false\">Storyteller: 3 points&nbsp;\nPlayers who have found the card: 3 points&nbsp;\n</pre><p><br></p><p>In either case:</p><pre class=\"ql-syntax\" spellcheck=\"false\">+1 bonus point per vote on your card if you\n are not the storyteller, up to 3 per round.\n</pre><p><br></p><p><strong>GitHub: </strong><a href=\"http://:https://github.com/brettlyne/dixma\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">https://github.com/brettlyne/dixma</a></p>","id":"889931101393641155","installCount":57,"lastUpdateDate":"2020-09-22T06:04:36.290Z","likeCount":2,"name":"dixma","publisherHandle":"bret","publisherId":"218735","publisherName":"Brett Holcomb","runCount":42,"viewCount":236},{"description":"<p>This plugin generates <strong>live</strong> <strong>previews</strong> for anything you type, right in the plugin window!</p><p><br></p><p>Features:</p><ul><li><strong>Live preview</strong> in plugin</li><li><strong>Save favorite</strong> fonts in a separate tab, and they'll still be there when you reopen the plugin</li><li><strong>Filter </strong>&amp; search for fonts so you don't have to scroll the giant list</li><li>Reactively loads fonts which otherwise would not have been visible inside a plugin, bringing my list of preview-able fonts from ~300 --&gt; ~<strong>1200</strong>!</li></ul><p><br></p><p>Features in development:</p><ul><li>Filter by font weights</li><li>Change preview size and letter-spacing</li></ul><p><br></p><p>Bugs, questions, or feedback? --&gt; <a href=\"https://twitter.com/GuamHat\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://twitter.com/GuamHat</a></p>","id":"890494567122693015","installCount":75813,"lastUpdateDate":"2022-05-13T02:46:42.886Z","likeCount":602,"name":"Font Preview","publisherHandle":"gautham","publisherId":"1268466","publisherName":"Gautham 🌶","runCount":66309,"viewCount":82703},{"description":"<p>Add frame to all selected layers.</p><p>一键给所选图层批量添加 Frame。</p><p><br></p><p><a href=\"https://love.figma.cool/\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">❤️赞助我们</a> | Made by <a href=\"http://figma.cool/\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">Figma.Cool</a></p>","id":"891195693567112423","installCount":2167,"lastUpdateDate":"2021-07-08T08:38:18.811Z","likeCount":47,"name":"FrameAll","publisherHandle":"figmacool","publisherId":"4385338","publisherName":"Figma.Cool","runCount":1743,"viewCount":4454},{"description":"<p>Format Code makes it easy to format code snippets and add a theme for syntax highlight</p><p><br></p><p>More features coming soon, including support for more languages and improvements in usability.</p><p><br></p><p>Design &amp; Developed by Cândido Sales.</p><p><br></p><h2><strong>Languages supported</strong></h2><p><br></p><ul><li>CSS;</li><li>HTML;</li><li>Javascript;</li><li>JSON;</li><li>Less;</li><li>Markdown;</li><li>SCSS;</li><li>Typescript;</li><li>YAML;</li></ul><p><br></p><h2><strong>Themes supported</strong></h2><p><br></p><ul><li>A 11 Y Dark;</li><li>A 11 Y Light;</li><li>Atom One Dark;</li><li>Atom One Light;</li><li>Default;</li><li>Dracula;</li><li>Ocean;</li><li>Paraiso Dark;</li><li>Paraiso Light;</li><li>Solarized Dark;</li><li>Solarized Light;</li><li>Vs;</li><li>Vs 2015;</li><li>Xcode;</li></ul>","id":"891351519501239645","installCount":1742,"lastUpdateDate":"2020-10-20T08:00:04.611Z","likeCount":18,"name":"Format Code","publisherHandle":"candidosales","publisherId":"640872","publisherName":"Cândido Sales Gomes","runCount":1597,"viewCount":3987},{"description":"<p>Use SVG as raster images in Figma. A simple solution for SVG import.</p><p><br></p><h2>Scale modes:</h2><p><br></p><p>You can also scale your image when you import it, as you usually do when you export images in Figma — by scale (@2x, @3x, etc.) by width or height. All these scale modes have restrictions for the maximum value.</p><p><br></p><p>Check the project <a href=\"https://github.com/PavelLaptev/SVG-to-Image\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">on Github</a></p><p><br></p><p>Enjoy!</p>","id":"891448180042913164","installCount":2916,"lastUpdateDate":"2021-09-02T22:53:53.494Z","likeCount":36,"name":"SVG to Image","publisherHandle":"PavelLaptev","publisherId":"134689","publisherName":"Pavel Laptev","runCount":2813,"viewCount":5253},{"description":"<h2>Fix errors in your designs!</h2><p><strong><em>Sweeper v2 open beta is out.</em></strong></p><p><br></p><p>Make sure your design are crystal clear, with no half pixels, no disconnected styles, and ready for handoff!</p><p><br></p><p>While the plugin is running, it will monitor errors you specified and gives you an easy way to fix them with a press of a button.</p><p><br></p><p>Sweeper offers linting off:</p><p><br></p><ul><li>Making layers pixel perfect (no half pixels)</li><li>No hidden layers</li><li>Layer name linting</li><li>Require text, fill, stroke and effect styles</li><li>No groups (at all) or no 1 layer groups</li><li>And more coming soon!</li></ul><p><br></p><p><strong>If you would like to report an issue, create a </strong><a href=\"https://github.com/rojcyk/figma-sweeper/issues\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\"><strong>GitHub ticket</strong></a><strong> or reach out </strong><a href=\"https://twitter.com/rojcyk\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\"><strong>@rojcyk</strong></a><strong>.</strong></p>","id":"891651591932556735","installCount":828,"lastUpdateDate":"2022-06-23T15:59:29.773Z","likeCount":65,"name":"Sweeper - design linter","publisherHandle":"rojcyk","publisherId":"204237","publisherName":"Denis Rojčyk","runCount":649,"viewCount":2573},{"description":"<p>Create all the button components you need with only 2 clicks.</p><p><br></p><p><a href=\"https://buttonbuddy.app\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">buttonbuddy.app</a></p><p><br></p><p>Just set your colors, select a button style and Button Buddy will provide nicely structured button components for you.</p><p><br></p><p><em>More styles will be added in future updates.</em></p><p><br></p><p>–––</p><p><br></p><h2><strong>How to use:</strong></h2><ol><li>Set your colors</li><li>Select a style</li><li>Get your button components</li></ol><p><br></p><p><strong>5 Button States:</strong></p><ul><li>Idle</li><li>Hover</li><li>Active</li><li>Focus</li><li>Disabled</li></ul><p><br></p><p><strong>3 Button Sizes:</strong></p><ul><li>Small (32pt height)</li><li>Medium (48pt height)</li><li>Large (64pt height)</li></ul><p><br></p><p>–––</p><p><br></p><p>Button components are backed up with a base component and applied auto-layout. So it'll be so easy to make it your own.</p><p><br></p><p>–––</p><p><br></p><p>All the feedback is highly appreciated, if you have a feedback please click on the feedback button of plugin UI or reach out to us on <a href=\"https://twitter.com/getbuttonbuddy\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">Twitter</a></p><p><br></p><p>Made by <a href=\"http://twitter.com/@bugraio\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">@bugraio</a> &amp; <a href=\"http://twitter.com/@akemalakcay\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">@akemalakcay</a></p>","id":"891833918736503296","installCount":10026,"lastUpdateDate":"2021-01-30T15:10:11.023Z","likeCount":115,"name":"Button Buddy","publisherHandle":"A3K5","publisherId":"4283513","publisherName":"AK","runCount":10587,"viewCount":13546},{"description":"<ul><li>Text Resizer helps you update your designs quickly and flexibly with respect to the base font size defined for 1rem</li><li>This plugin also comes handy when you design apps for iOS as this will help your designs adapt to the systems ability of increasing or decreasing font sizes (Users on iOS have the capability to do this via settings on their phone Settings -&gt; Accessibility -&gt; Display &amp; Text Size)</li><li>Text Resizer is a must have plugin for every designer who cares about readability. Use this plugin to ensure that your layout is flexible and texts are legible for your users.</li></ul><p><br></p><p>HOW IT WORKS:</p><ul><li>Select text layer / frames / groups / components / instances / anything that contain text.</li><li>Open Plugins → Text Resizer - Accessibility Checker</li><li>Select your current base font size for 1 rem. (Learn more about <a href=\"https://www.w3.org/TR/css-values-3/#rem\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">rem and base font size</a>)</li><li>[Based on the above input value, all the selected fonts are internally converted to rem value]</li><li>Then input the new base font size you want to convert to.</li><li>Hit \"Clone Selection with New Base Value\" Button to see the magic.</li></ul><p>[Side Note: For frames, use auto layout to see the best results]</p><p>------------------------------------------------—</p><ul><li>Have any feedback or feature request or encountered any bugs? Write them to <a href=\"mailto:pratheepkumar1@gmail.com\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">pratheepkumar1@gmail.com</a></li></ul>","id":"892114953056389734","installCount":6572,"lastUpdateDate":"2021-11-18T00:12:24.675Z","likeCount":115,"name":"Text Resizer - Accessibility Checker","publisherHandle":"pratheepkumar","publisherId":"85465","publisherName":"Pratheep Kumar C","runCount":4490,"viewCount":9905},{"description":"<h2>Quickly move or duplicate your selection to a new page via the Quick Action Search Bar (⌘+/)</h2><p>-</p><p><br></p><p><code>Teleport</code> option creates a new page and moves the current selection to that page.</p><p><br></p><p><code>Duplicate and Teleport</code> option creates a new page and sends a duplicate of the current selection to that page.</p><p><br></p><p>Optionally name the new page in the quick action parameters, otherwise the new page will be called \"Teleported Here\" by default.</p>","id":"892202130569280122","installCount":210,"lastUpdateDate":"2022-03-29T23:29:53.601Z","likeCount":15,"name":"Teleport","publisherHandle":"jameslyons","publisherId":"75023","publisherName":"James Lyons","runCount":223,"viewCount":911},{"description":"<p>Create a <strong>modular scale</strong> based on a ratio and a base size. The result is a set of values, which you can use like a ruler for your projects.</p>","id":"892543384437155629","installCount":732,"lastUpdateDate":"2020-10-27T20:20:51.277Z","likeCount":19,"name":"Scaaale","publisherHandle":"nicom","publisherId":"858448503131675807","publisherName":"Nicolas Massi","runCount":568,"viewCount":1779},{"description":"<p>It can be generated Line charts, column charts, bar charts, pie charts, radar charts, scatter charts,bubble charts, ring charts, maps, candlestick, gauge…</p><p><br></p><p>English: <a href=\"https://www.nbcharts.com\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">www.nbcharts.com</a></p><p>Chinese: <a href=\"https://www.pslkzs.com/figma/index.php\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">www.pslkzs.com/figma/index.php</a></p>","id":"892787217901293479","installCount":35434,"lastUpdateDate":"2022-05-11T03:49:19.978Z","likeCount":339,"name":"NB Charts","publisherHandle":"www_pslkzs_com","publisherId":"870114250878292665","publisherName":"NB Charts","runCount":37458,"viewCount":40869},{"description":"<p><strong>Visually compare your designs to your live product.</strong></p><p><br></p><p>Doppel allows you to:</p><p><br></p><p>🔍Visually compare your designs to your product <em>in seconds</em></p><p>📓Show detailed difference to make it as easy as possible to fix the issue</p><p><br></p><p><strong></strong>For more information (including a guide on how to use Doppel), check out <a href=\"https://www.notion.so/Doppel-bca2d36e5ca24e5ab2bfbea8b96636f0\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">The Doppel guide</a>.</p><p><br></p><p><br></p><p>(Doppel is currently a WIP so any feedback is welcome!)</p>","id":"892976690608849905","installCount":168,"lastUpdateDate":"2020-10-14T04:04:36.758Z","likeCount":7,"name":"Doppel | Visually compare your design to live product [WIP]","publisherHandle":"arahman4710","publisherId":"2571245","publisherName":"Anik Rahman","runCount":121,"viewCount":683},{"description":"<p>Bring the color sets you generate in ColorBox and quickly bring them into Figma.</p>","id":"892985458731250677","installCount":5205,"lastUpdateDate":"2020-10-30T16:04:18.234Z","likeCount":123,"name":"ColorBox","publisherHandle":"kevyn","publisherId":"2684","publisherName":"Kevyn Arnott","runCount":4992,"viewCount":8873},{"description":"<p>Select all component instances on the page or within the current selection, from any component.</p><p><br></p><p>Helps with bulk operations, like detaching all instances at the same time. </p><p><br></p><p><br></p>","id":"893141488737748075","installCount":1375,"lastUpdateDate":"2020-09-30T14:26:03.580Z","likeCount":16,"name":"Select all instances","publisherHandle":"7fc4928a_055b_4","publisherId":"199060","publisherName":"morekid","runCount":1815,"viewCount":3530},{"description":"<p>Have you ever wanted to have easy access to thousands and thousands of free photos within your grasp? Freepik, the leading company in the world of illustrations, photos, PSDs and icons, has the solution.</p><p><br></p><p>Thanks to this plugin, you can search for high-quality photos and insert them into your project. Browse by categories, have a look at the most popular images or, if you feel lucky, let the plugin choose one at random for you! For more information, visit https://www.freepik.com</p><p><br></p><p>Instructions:</p><p>1.&nbsp;Run the Freepik plugin.</p><p>2.&nbsp;Use the search bar to find a photo or browse by your preferred category.</p><p>3.&nbsp;Click the desired photo to add it to your project and start editing!</p>","id":"893426972424060133","installCount":43475,"lastUpdateDate":"2021-06-25T09:54:10.206Z","likeCount":262,"name":"Freepik","publisherHandle":"freepik","publisherId":"886167611816179448","publisherName":"Freepik","runCount":36073,"viewCount":29523},{"description":"<p>Ever wanted to see all the easing curves of a selected set of prototyped frames? No ... you haven't? Well too bad, because this is what that does.</p>","id":"893618373425317222","installCount":171,"lastUpdateDate":"2020-10-27T17:41:29.679Z","likeCount":8,"name":"Quik N Easy","publisherHandle":"johnchoura_gd","publisherId":"889917734460656922","publisherName":"John Choura","runCount":90,"viewCount":1201},{"description":"<p>Transform your Figma components into clean React, Vue and HTML components, making developer handoff faster and easier than ever.</p><p><br></p><p>More info here : <a href=\"https://overlay-tech.com/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://overlay-tech.com/</a></p><p><br></p><p>For any questions or feedback, feel free to ping us at <a href=\"mailto:contact@overlay-tech.com\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">contact@overlay-tech.com</a></p>","id":"893806009348766137","installCount":15881,"lastUpdateDate":"2021-05-04T08:17:21.527Z","likeCount":261,"name":"Overlay (Figma components to React, Vue, HTML)","publisherHandle":"4387264","publisherId":"4387264","publisherName":"Overlay","runCount":13351,"viewCount":25932},{"description":"<p>Hey! Here is my first figma plugin. Using this plugin, you can get all of your local Figma styles as css/scss variables.</p><p><br></p><p>I made this plugin because, at my fulltime job (<a href=\"https://basework.studio/en/\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">Basework</a>), we create a lot of UI development. And almost every design comes with Figma. And it is really boring to add new variables to Scss.(you know, copy color, add new variable and stuff like this...) And that's why i've made it.</p><p><br></p><p><strong>How to use:</strong></p><ul><li>Create local styles for your project</li><li>Open extension</li><li>Press CSS or SCSS button</li><li>And copy your colors</li></ul><p>That's all!</p>","id":"893890249436355073","installCount":980,"lastUpdateDate":"2020-10-22T18:02:51.888Z","likeCount":31,"name":"Colors to Variables","publisherHandle":"itsemirhanengin","publisherId":"413938","publisherName":"Emirhan Engin","runCount":681,"viewCount":4599},{"description":"<p><strong>What is Frontify?</strong></p><p>Frontify delivers a centralized place to manage, create, and share digital assets, guidelines, templates, and increase your visual collaboration – helping you build stronger brand experiences across the board.</p><p><br></p><p><strong>Why Connecting Figma with Frontify?</strong></p><p>With our new Figma integration, you’re able to access complete libraries of your digital assets living in Frontify, directly from within Figma. Those assets – images, logos, icons (and a lot more) – are managed and stored in Frontify.</p><p><br></p><p><strong>Get started</strong></p><p>1) Signup for Frontify</p><p>2) Create asset libraries and guidelines within Frontify (<a href=\"https://help.frontify.com/en/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://help.frontify.com/en/</a>)</p><p>3) Install the Figma Plugin and connect Figma with your Frontify environment</p><p><br></p><p><em>For any questions or feedback, feel free to ping us at </em><a href=\"mailto:support@frontify.com\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\"><em>support@frontify.com</em></a></p>","id":"893898815372491269","installCount":4598,"lastUpdateDate":"2022-04-27T13:18:53.633Z","likeCount":45,"name":"Frontify","publisherHandle":"frontify","publisherId":"892771020952959071","publisherName":"Frontify","runCount":3516,"viewCount":9552},{"description":"<p>Atlas is an easy-to-use theme manager that works alongside the styling system.</p><p><br></p><p>See examples at <a href=\"https://jwels.berlin/atlas\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">jwels.berlin/atlas</a></p><p>Watch a short tutorial clip on <a href=\"https://www.youtube.com/watch?v=LjDorKkKdTI\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">youtube.com</a></p><p><br></p><p><strong>How it works</strong></p><p>Styles can be put into folders in Figma. These folders are equivalent to writing forward slashes in your files. Atlas uses this convention and adds theming capabilities to it. So you can have a 'Light', 'Dark' or any other folder for your color, effect, and text styles and then switch between them.</p><p><br></p><p>Have questions or feedback? Reach out on <a href=\"https://twitter.com/JulianWels\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">twitter.com/JulianWels</a></p>","id":"893903420585768458","installCount":2070,"lastUpdateDate":"2021-12-10T20:36:52.120Z","likeCount":83,"name":"Atlas – Theme Manager","publisherHandle":"JulianWels","publisherId":"1503137","publisherName":"Julian Wels","runCount":2099,"viewCount":7046},{"description":"<h1>Multipaste</h1><p>🏴󠁧󠁢󠁥󠁮󠁧󠁿🇺🇸Multipaste is a Figma plugin that allows for copy and pasting elements to many frames at once. No more pasting frame-by-frame! Use this plugin to boost your workflow.</p><p>__</p><p>🇧🇷Multipaste é um plugin do Figma que permite copiar e colar elementos para vários frames de uma só vez. Chega de colar frame pro frame! Use esse plugin para acelerar seu trabalho.</p><p><br></p><p>Video demo: <a href=\"https://twitter.com/marceloblaz/status/1313321776865259520\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">https://twitter.com/marceloblaz/status/1313321776865259520</a></p><p><br></p><h2>Shortcut (for mac)</h2><p>A simpler way to use plugins is by creating shortcuts. To create a shortcut, click on Figma at your system's navbar, then 'Services', 'Services Preferences', 'App shortcuts' and add a new shortcut for Figma. If you wish to use Multipaste with a shortcut, here is my suggested path:</p><p><br></p><p><em>For copying</em></p><p>Menu title: Plugins-&gt;Multipaste-&gt;Copy (⌃⌘C)</p><p><br></p><p><em>For pasting</em></p><p>Menu title: Plugins-&gt;Multipaste-&gt;Paste (⌃⌘V)</p><p><br></p><p><em>If you wish, you can also create a shortcut for clearing plugin cache by following the same procedure. Just switch the command and choose a shortcut.</em></p><p><br></p><p><br></p><p><strong>What can this plugin do?</strong></p><ul><li>Copying multiple nodes, either nested in frames or in the page itself, at once and then pasting all of them into multiple frames or groups at once;</li><li>If any of the copied nodes is a component, it will create an instance of it and paste the instance, not duplicate the component;</li><li>Nodes that were copied from another frame will maintain its position in the new frame;</li><li>Nodes that weren't in a frame when copied will be placed in the center of the frames they get pasted into (same behaviour Figma already implements for copy/pasting).</li><li><strong>NEW </strong>Multiple users may use the plugin within the same file without worrying about crossing plugin data.</li></ul><p><br></p><p><br></p><p><strong>What can't this plugin do?</strong></p><ul><li>This plugin won't work properly if you delete a copied node before pasting it first. It will still work for nodes that weren't deleted though.</li><li>This plugin doesn't access your system's clipboard, so you may not use regular copy/pasting commands to make it work;</li><li>This plugin doesn't allow pasting across different files.</li></ul><p><br></p><p>Give feedback: <a href=\"https://forms.gle/azUS6mqaBypTTQG99\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">https://forms.gle/azUS6mqaBypTTQG99</a></p>","id":"893914045094807058","installCount":1254,"lastUpdateDate":"2021-06-23T20:15:02.110Z","likeCount":49,"name":"Multipaste","publisherHandle":"marceloblaz","publisherId":"137309","publisherName":"Marcelo Brasileiro","runCount":985,"viewCount":2736},{"description":"<p>Automatically swap a text layer called \"changeable-text\" with inputed text.</p><p><br></p><p><em>*changeable-text must be only one font</em></p>","id":"895160105661581276","installCount":603,"lastUpdateDate":"2020-10-06T04:07:14.573Z","likeCount":6,"name":"Text Changer","publisherHandle":"1dab26ea_30be_4","publisherId":"1054172","publisherName":"Hamish Buttle","runCount":560,"viewCount":1394},{"description":"<p><strong>V0.2 release notes at bottom</strong></p><p><br></p><p>A beta version of a digital spinner plugin for wheel-based games.</p><p><br></p><p><a href=\"https://www.figma.com/community/file/901835693066101315/Digital-Spinner-Template\" rel=\"noreferrer noopener nofollow\" target=\"_blank\"><strong>Use with our community spinner template to add a spinner to your game!</strong></a></p><p><br></p><p><strong>Directions for use</strong></p><ol><li>Create an group to be spun named <code>@spinner</code></li><li>When your user opens the spinner plugin, pressing the spin the wheel button will spin the <code>@spinner</code> group randomly between -180 and 180 degrees.</li></ol><p><br></p><p><strong>Think about the logic of your spinner!</strong></p><p>If you are spinning the wheel object itself you'll probably need a locked stopper element to put on top of your spinner to determine where the wheel \"lands\". Alternatively, you could also spin an arrow object on top of a locked spinner. Your choice! You can use our <a href=\"https://www.figma.com/community/file/901835693066101315/Digital-Spinner-Template\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">community template to help make your spinner.</a></p><p><br></p><p><strong>V0.2 ------</strong></p><ul><li>Added links to help and instructions inside the plugin UI.</li></ul>","id":"895658077111978197","installCount":871,"lastUpdateDate":"2020-10-31T17:45:33.533Z","likeCount":12,"name":"Spinner","publisherHandle":"jacobw","publisherId":"64589","publisherName":"Jacob Waites","runCount":881,"viewCount":3138},{"description":"<p>User Generator</p><p>Insert awesome random User images into your design prototypes. Support English and 中文简体 according to your OS language.</p><p><br></p><p>How to use:</p><p><br></p><p>1. Select shape(s);</p><p>2. Run the plugin.</p><p>3. Select region and gender.</p><p>4. Just confirm.</p><p><br></p><p>According to your filter, it will fetch an random user image(s) and add it(them) as a fill on your selected element(s).</p><p><br></p><p>The plugin supports up to 10 selections at a time</p><p><br></p><p>Images are aggregated by <a href=\"http://unsplash.com\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">unsplash.com</a> and other sources.</p><p><br></p><p>------------------------------------------------------------</p><p>头像助手</p><p><br></p><p>根据用户选择形状，自动在设计稿中部署头像。支持英语，汉语界面，根据操作系统语言自动切换。</p><p><br></p><p>使用说明：</p><p>1.选择形状；</p><p>2.运行插件；</p><p>3.选择区域和性别</p><p>4.点击确认</p><p><br></p><p>根据用户选择过滤条件，随机获取头像进行部署在所选元素上。</p><p>单次最多可同时选择10个形状。</p><p>头像素材从<a href=\"http://unsplash.com\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">unsplash.com</a>和其他资源处获取。</p>","id":"895980221418354054","installCount":6957,"lastUpdateDate":"2021-03-11T11:55:21.795Z","likeCount":40,"name":"User Generator","publisherHandle":"beanssilo","publisherId":"895666951349857324","publisherName":"Stepasha","runCount":6995,"viewCount":12819},{"description":"<p>Cards for Humanity is Idean's tool for inclusive design. Deal the cards to get a person and a trait. Your challenge is to work out how you can design for their needs.</p>","id":"896347534161970744","installCount":4579,"lastUpdateDate":"2020-10-12T10:53:48.801Z","likeCount":190,"name":"Cards for Humanity","publisherHandle":"idean","publisherId":"850671205577237812","publisherName":"Idean","runCount":2938,"viewCount":8623},{"description":"<p><strong>⚡️The fastest tool to transform your design into developer-friendly code.</strong></p><p><strong>✅ Supports Flutter, React, ReactNative and more.</strong></p><p><strong>👩‍💻 Free and Open Source. Democratizing front-end development.</strong></p><p><br></p><p>Looking for 📁 whole-file converting? - visit <a href=\"https://code.grida.co\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">code.grida.co</a></p><p><br></p><p>The Grida Assistant is a design to code tool that generates readable &amp; usable code from your design. Design context is understood; a button will be recognized as a button.</p><p><br></p><p><strong>Features:</strong></p><ul><li>Modularized, usable Flutter &amp; React code generation</li><li>Design lint</li><li>Live preview</li><li>Publish design as website</li><li>5000+ material icons &amp; ant design icons&nbsp;</li></ul><p><br></p><p><strong>How to use:</strong></p><ol><li>Run the plugin</li><li>Select your design</li><li>Transform the design into ready-to-use Flutter &amp; React code</li></ol><p><br></p><p><br></p><p>Watch the demo on&nbsp;<a href=\"https://grida.co/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">grida.co</a></p><p><em>contribute on </em><a href=\"https://github.com/gridaco/assistant\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\"><em>github</em></a></p><p><br></p><p><br></p><p><strong>Grida is a opensource project.</strong></p><p>Your ⭐️ helps a lot. we're always looking for contributors to 🍻 with</p><p><br></p><p>our <a href=\"https://grida.co\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">website</a></p>","id":"896445082033423994","installCount":8699,"lastUpdateDate":"2022-04-29T13:10:43.650Z","likeCount":182,"name":"Assistant by Grida","publisherHandle":"grida","publisherId":"890217167846867022","publisherName":"Grida","runCount":6600,"viewCount":15163},{"description":"<p>Slide Show is a simple yet powerful utility that lets you turn any page of unlinked frames into a slide show presentation that <strong>you control</strong> while others watch in real time.</p><p><br></p><p>It's easy:</p><p><br></p><ol><li>Rename your frames in alphabetical order (numbers appear before letters).</li><li>Turn off visibility for frames you don't want to show.</li><li>Share your prototype link or embed to viewers.</li><li>Start the Slide Show plugin and be amazed!</li></ol><p><br></p><p>Navigate from frame to frame, or restart your slide show. (To start from a specific frame, select it before running the plugin.)</p><p><br></p><p>Keynote Live and PowerPoint Present Live are neat, but Figma's now a viable alternative, thanks to this plugin.</p><p><br></p><ul><li>Ditch screen shares and present crisp graphics!</li><li>Embed your slide show anywhere!</li><li>Multiple frame sizes? Easy peasy!</li><li>Forget complex transitions. Less is more!</li><li>Live editing of slides? Yes!</li></ul><p><br></p><p>For best results, use a Figma prototype link (or embed) with these parameters: <em>scaling=contain</em> and <em>hide-ui=1</em>. This ensures viewers see content at the largest size possible with minimum distraction.</p><p><br></p><p><strong>Important:</strong> When using Slide Show, you <em>must</em> remove all Flow starting points on your page. However, you CAN keep existing prototype interactions in place! This is brand new to Figma and amazing!</p><p><br></p><p><strong>Tip:</strong> For presenter notes or other content that's not viewable by readers, simply place them on the background canvas. Just make sure it's <em>not</em> in a frame.</p><p><br></p><p>While anyone can use this plugin, it was built especially for <a href=\"https://lexgo.work\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">LexGo</a> to easily control guided presentations designed in Figma.</p><p><br></p><p><strong>NEW FEATURES!</strong></p><p>Jump to Slide: Navigate to any slide quickly!</p><p><br></p><p>Random Slide: Great for quizzes and flash cards!</p><p><br></p><p>Hide Slide: Great for running through a presentation and hiding unwanted slides quickly.</p>","id":"896968134106172180","installCount":3877,"lastUpdateDate":"2021-11-07T03:24:39.557Z","likeCount":34,"name":"Slide Show","publisherHandle":"ntfromchicago","publisherId":"1232151","publisherName":"Nelson Taruc","runCount":4042,"viewCount":14157},{"description":"<h1>Check and increase your library usage file-by-file.</h1><p><br></p><p>Sleuth helps you follow best practices by reporting on external library usage, identifying problem layers in your files, and <strong>if you choose, automatically fixing some of them</strong>.</p><p><br></p><p>Originally conceptualized and developed as a command-line tool for Sketch (and later for figma), Sleuth is now available as a Figma plugin. <a href=\"https://sleuth.keap.design/\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">The original tool is available here</a>.</p><p><br></p><p>Questions or comments or bugs? <a href=\"https://github.com/infusionsoft/sleuth-figma-plugin\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">Hit up the Github Repo</a>.</p><p><br></p><p>Want to work with us at Keap? Check our <a href=\"https://keap.com/about/careers\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">careers page</a>.</p>","id":"897573542579499089","installCount":751,"lastUpdateDate":"2021-04-01T10:09:06.335Z","likeCount":36,"name":"Sleuth","publisherHandle":"keap","publisherId":"870077768121494058","publisherName":"Keap","runCount":514,"viewCount":1992},{"description":"<p>A plugin to convert svg selected into background-image dataurl or base64 in your clipboard</p><p><br></p><ul><li>only work in desktop now, will support browser later</li><li>multiple selections and convertions is supported</li><li>support dataurl and base64 data</li></ul><p><br></p><p>Here is the git repository of the plugin: https://github.com/zhengpq/icon-export-for-figma.</p><p>If you have any question, please add an issue</p>","id":"897751632843210903","installCount":774,"lastUpdateDate":"2020-10-14T13:08:45.702Z","likeCount":9,"name":"icon-transfor","publisherHandle":"zhengpq","publisherId":"3737523","publisherName":"郑培钦","runCount":544,"viewCount":2023},{"description":"<p>Maintain formal design specs with frame tidying, numbering, and table of contents generation.</p><p><br></p><h2>Current Features</h2><ul><li>Frame Tidying</li><li>Frame Numbering</li><li>Frame, Page, and File Name Injection</li><li>Last Modified Date</li><li>Table of Contents Generation</li></ul><p><br></p><h2>Usage</h2><p>Most of the features of this plugin rely on a layer name including specific markup such as <code>{framename}</code> that controls how content is updated. Other features such as the automatic frame arrangement are more passive and help keep the document organized.</p><p><br></p><p>The plugin has a UI that provides preferences for each feature and shows the markup needed for each. The plugin may also be run using the \"Revise\" command which skips the UI but uses the most recent settings from the UI.</p>","id":"898042518253103388","installCount":569,"lastUpdateDate":"2022-05-27T14:49:37.937Z","likeCount":16,"name":"Blue Pencil","publisherHandle":"sasdesign","publisherId":"958932393393146860","publisherName":"SAS, Inc.","runCount":599,"viewCount":3010},{"description":"<p>This plugin finds and selects all hidden layers on the page</p>","id":"898222827857660313","installCount":1339,"lastUpdateDate":"2020-11-08T15:20:39.520Z","likeCount":11,"name":"Find hidden layers","publisherHandle":"glmrvn","publisherId":"903146","publisherName":"Alex Dyakov","runCount":1153,"viewCount":2026},{"description":"<p>Build your basic page structure based on the <strong>atomic design system</strong>. Compile your components with the draft page.</p><p><br></p><p>Atomic design pages to be created with the plugin;</p><p><br></p><p><strong>Design System [Welcome]</strong></p><p><br></p><p><strong>Foundations [Title]</strong></p><ul><li>Colors</li><li>Typography</li><li>Icons</li><li>Rules</li></ul><p><br></p><p><strong>Component [Title]</strong></p><ul><li>Buttons</li><li>Navigations</li><li>Cards</li><li>Menus</li><li>Data Table</li><li>Date Pickers</li><li>Lists</li><li>Text Fields</li><li>Selection Controls</li><li>Sliders</li><li>Sheets: Bottom</li><li>Tabs</li><li>Snackbars</li><li>Dialogs</li><li>Tooltips</li><li>Alerts</li><li>Other</li></ul><p><br></p><p><strong>Modules [Title]</strong></p><ul><li>Header</li><li>Footer</li></ul><p><br></p><p><strong>Pages [Title]</strong></p><ul><li>Web Site</li><li>Application</li><li>Draft</li></ul><p><br></p><p>There is also an <strong>Frame</strong> design where you can edit your variant and components thanks to the plugin.</p>","id":"898298661705867715","installCount":2851,"lastUpdateDate":"2020-11-07T12:31:08.031Z","likeCount":55,"name":"Design System Basics","publisherHandle":"sertanhelvaci","publisherId":"862956783156218831","publisherName":"Sertan Helvacı","runCount":2659,"viewCount":6528},{"description":"<p>Phosphor is a flexible icon family for interfaces, diagrams, presentations — whatever, really.</p><p><br></p><ul><li>1047 icons and counting</li><li>6 weights: <strong>Thin</strong>, <strong>Light</strong>, <strong>Regular</strong>, <strong>Bold</strong>, <strong>Fill</strong>, and <strong>Duotone</strong></li><li>Designed at 16 x 16px to read well small and scale up big</li><li>Raw stroke information retained to fine-tune the style</li><li>Alternate glyphs for variety</li></ul><p><br></p><p>More ways to use at <a href=\"http://phosphoricons.com\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">phosphoricons.com</a>.</p>","id":"898620911119764089","installCount":37133,"lastUpdateDate":"2022-01-14T04:06:10.772Z","likeCount":371,"name":"Phosphor Icons","publisherHandle":"phosphoricons","publisherId":"895895644080588615","publisherName":"Phosphor Icons","runCount":32594,"viewCount":33507},{"description":"<p>This is a node-based generative design plugin for Figma. It is in early development and free for now, but after reaching a certain stage it will go on paid subscription to support further work.</p><p><br></p><p><strong>IMPORTANT: this is an early release, expect breaking changes until further notice. </strong>🤷‍♂️</p><p><br></p><p><a href=\"http://www.bourt.com/generator/howto\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">How to use Generator</a></p><p><br></p><p><a href=\"https://discord.gg/H6tHhMpbMq\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Discord for feedback</a></p>","id":"899028246731755335","installCount":538,"lastUpdateDate":"2022-02-19T04:33:42.002Z","likeCount":59,"name":"Generator","publisherHandle":"alexbourt","publisherId":"1090927","publisherName":"Alex Bourt","runCount":708,"viewCount":3027},{"description":"<p>Split, normalize, and bulk copy and paste text layers.</p><h2><br></h2><h2>Bulk Copy Text</h2><p>Copy the text within the selected text layers to the clipboard.</p><p><br></p><h2>Bulk Paste Text</h2><p>Paste the contents of the clipboard onto the selected text layers.</p><p><br></p><h2><strong>Copy for Spreadsheet</strong></h2><p>Copy the text within the selected text layers to the clipboard, formatted for pasting into a spreadsheet.</p><p><br></p><h2><strong>Find and Replace</strong></h2><p>Find and replace text in text layers within the selection or on the current page.</p><p><br></p><h2>Split Text Layers by Line</h2><p>Split each selected text layer into separate text layers that each contain a single line.</p><p><br></p><h2>Normalize Text Style</h2><p>Set the style of each selected text layer to follow that of each layer’s first character.</p><p><br></p><h2>Reset Text Layer Names</h2><p>Set the name of the selected text layers to follow their text content.</p>","id":"899501266127939530","installCount":1986,"lastUpdateDate":"2021-10-23T09:26:05.830Z","likeCount":84,"name":"Text Utilities","publisherHandle":"yuanqing","publisherId":"1682602","publisherName":"Yuan Qing Lim","runCount":1542,"viewCount":6178},{"description":"<p>An easy way to cut any image into pieces.</p><p><br></p><p>It's useful when you only need some parts of the screenshot to make a mood board or just rearrange them.</p><p>Here is an <a href=\"https://twitter.com/ardovalexey/status/1322972545331666945\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">example of how it works</a>.</p><p><br></p><p><strong>How to use:</strong></p><ol><li>Paste image or screenshot</li><li>Draw shapes over the parts you need</li><li>Select image and shapes and run this plugin</li></ol><p><br></p><p><strong>Tip:&nbsp;</strong>try using a pen tool to draw shapes on top of your image.</p>","id":"899731058839960598","installCount":7022,"lastUpdateDate":"2020-10-18T18:52:08.946Z","likeCount":69,"name":"Image Cutter","publisherHandle":"ardov","publisherId":"48160","publisherName":"Alexey Ardov","runCount":7087,"viewCount":11405},{"description":"<p>Have you ever needed to create a type scale following an 8 point baseline grid, or really any grid, and had to spend extra time figuring out what should be the right line-height for every text size in the scale?</p><p><br></p><p>No worries! The&nbsp;good line-height calculates the exact number so it always fits the baseline grid!</p><p><br></p><p>To know more visit: <a href=\"https://thegoodlineheight.com\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">https://thegoodlineheight.com</a></p>","id":"899947649686629470","installCount":5266,"lastUpdateDate":"2020-10-28T12:24:31.300Z","likeCount":81,"name":"The good line-height","publisherHandle":"mrrocks","publisherId":"4718","publisherName":"Fran Perez","runCount":2109,"viewCount":6196},{"description":"<p>Loops helps you learn if ideas are landing as intended. <a href=\"https://www.loom.com/share/e5314c2a6c3e4aa69f6be529baf7df49\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Check out the demo vid</a> 👀</p><p><br></p><p>Build an interactive survey on top of your designs and ask multiple choice, open and closed questions.</p><p><br></p><p>Gather comments from customers, team members, and stakeholders and transform it into actionable insight with AI.</p><p><br></p><p>Research that often takes weeks, can be done in hours with Loops 💪</p><p><br></p><p><strong>HOW LOOPS WORKS</strong></p><p><br></p><p><strong>Interactive Survey Mode</strong></p><ol><li>Build an interactive survey on top of your design and asking multiple choice questions or open text fields about your design.</li><li>Choose your audience. Use your own teammates or users. Need external feedback from a certain demographic? No problem - recruit from our global panel of 110m consumers.</li><li>Users give annotated feedback on your design. Get quantitative and qualitative results in realtime.</li></ol><p><br></p><p><strong>Collaborative Mode</strong></p><ol><li>Export designs to Loops and share a secure link to your users or teammates.</li><li>People can give instant feedback with no login required.</li><li>People leave comments as annotations on top of your design.</li><li>Tag, filter and bookmark the most insightful comments.</li></ol><p><br></p><p><strong>WHY LOOPS</strong></p><p><br></p><p><strong>Remove the admin of audience feedback</strong>.</p><p>Access 110m people from all major countries instantly.</p><p><br></p><p><strong>Keep feedback focused.</strong></p><p>Your respondents are guided step-by-step through your designs.</p><p><br></p><p><strong>Connect insight to ideas.</strong> See precise feedback annotated on your work.</p><p><br></p><p>Visit<strong> </strong><a href=\"http://www.useloops.com\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\"><strong>useloops.com</strong></a></p>","id":"899973884500275319","installCount":2681,"lastUpdateDate":"2022-03-18T09:41:58.710Z","likeCount":41,"name":"Loops Feedback","publisherHandle":"loops","publisherId":"2220464","publisherName":"Loops Owner","runCount":2839,"viewCount":6510},{"description":"<p>Fill selected textboxes with randomly generated emoji 🏭</p>","id":"900176365073100035","installCount":21932,"lastUpdateDate":"2021-04-19T23:45:27.537Z","likeCount":129,"name":"Emoji Generator","publisherHandle":"andrewshen","publisherId":"69533","publisherName":"Andrew Shen","runCount":21587,"viewCount":23357},{"description":"<p>Fill a range of random colors to your selected objects.</p><p>This plugin has three modes(color/gradient/grayscale).</p><p>Bring the color, bring the gray, this is the way. 🦖</p><p><br></p><p><strong>How to use:</strong></p><ol><li>Select objects</li><li>Run the plugin</li><li>Choose a mode</li><li>Provide a range of color in RGB(0-255), two-gradient, or Gray(0-255) format.</li><li>Press fill color</li></ol><p><br></p><p>Enjoy! I will continue working on it.</p>","id":"900566886503050719","installCount":4244,"lastUpdateDate":"2020-12-01T15:39:46.607Z","likeCount":26,"name":"Random Colors Fill","publisherHandle":"DanRan","publisherId":"898664769351522323","publisherName":"Dan Ran","runCount":2295,"viewCount":4094},{"description":"<p>Name Scrambler helps you to streamline your workflow from Figma to Principle. Principle app animates layers with the same name between 2 or more frames. Name redundancy is inevitable with design systems so I made this plugin that adds a unique ID for every layer. If you want to keep the name just put _ in front of the layer name — that means you want to animate them.</p><p><br></p><p><strong>VIDEO TUTORIAL</strong></p><p><a href=\"https://youtu.be/WVBD2_NjZEM\" rel=\"noreferrer noopener nofollow\" target=\"_blank\"><strong>https://youtu.be/WVBD2_NjZEM</strong></a></p>","id":"900628950520349167","installCount":2579,"lastUpdateDate":"2020-11-04T15:04:45.015Z","likeCount":19,"name":"Name Scrambler","publisherHandle":"antonijapek","publisherId":"411930","publisherName":"Antonija Pek","runCount":745,"viewCount":3136},{"description":"<p>Easily control an AxiDraw drawing machine from Figma. Prepare your vector art and send it to the plotter in one click.</p><p><br></p><p>Note: A prompt will invite you to install the required AxiDraw driver on first launch.</p><p><br></p><p>This plugin is based on saxi by Jeremy Rose @nornagon.</p><p><br></p><p>Thanks to Evil Mad Scientist Laboratories (creators of the AxiDraw) for making pen plotting accessible to almost everyone!</p><p><br></p><p>Find out more about AxiDraw: <a href=\"https://axidraw.com/\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">https://axidraw.com/</a></p>","id":"900668528149305876","installCount":2071,"lastUpdateDate":"2021-01-15T10:03:28.607Z","likeCount":27,"name":"AxiDraw","publisherHandle":"stefterv","publisherId":"2813776","publisherName":"Stef Tervelde","runCount":623,"viewCount":2369},{"description":"<p>Build Tailwind designs and convert them to code with speed! Speedboat helps you by building a panel from your Tailwind configuration. No more quesswork!</p><p><br></p><h1>Features</h1><h2>Style Library</h2><p>Opens a panel which will allow you to design using the values from your configuration. Here you can pick your dimensions, fills, shadows and more with just a few clicks. It also offers a handy&nbsp;<em>Copy class names</em>&nbsp;button so you can design and prototype quicker than ever before. 🤯</p><p><br></p><h2>Copy class names</h2><p>Copies the selected layer Tailwind-compatible class names for supported properties based on your configuration to your clipboard. If your configuration specifies eg. \"brand-blue\" colour and your design uses that colour as a Fill, the result copied to your clipboard will be \"bg-brand-blue\".</p><p><br></p><h2>Settings</h2><p>Opens a panel with Speedboat configuration. This panel will allow you to set the base font size for your design (if you use relative units) and import your own Tailwind configuration. The configuration is embedded into the file, so you can share it and don’t have to wory about also having to share the configuration.</p><p><br></p><h2>Supported properties</h2><ul><li>Dimensions</li><li>Opacity</li><li>Corner radius</li><li>Solid fill</li><li>Gradient fill (soon)</li><li>Stroke</li><li>Shadow</li><li>Font size</li><li>Line height</li><li>Letter spacing</li><li>Text decoration</li><li>Text transform</li><li>Text align</li><li>Font weight (soon)</li></ul><p><br></p><h2>Note</h2><p>Speedboat is a paid plugin. Head to <a href=\"https://speedboat.sh\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">https://speedboat.sh</a> to get your activation code!</p><p><br></p><h2>FAQ</h2><p><a href=\"https://speedboat.sh/faq\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">https://speedboat.sh/faq</a></p>","id":"900754864381713995","installCount":2379,"lastUpdateDate":"2021-02-23T21:16:13.472Z","likeCount":41,"name":"Speedboat","publisherHandle":"speedboat","publisherId":"900754512680676996","publisherName":"Speedboat Plugin","runCount":620,"viewCount":3217},{"description":"<p><strong>The fastest and easiest way to organize design systems and Figma documents. </strong></p><p><br></p><p>No more hassle with long and complex components name, or renaming tons of components and layer styles because you misspelled a folder name.</p><p><br></p><p>Making your files tidy and organised is becoming an easy job with the following tools. No more need to spend hours changing hundreds of names, just because you misspelled the top folder.</p><p><br></p><ul><li>Create folders</li><li>Rename items</li><li>Delete items</li><li>Duplicate items</li><li>Drag components to your canvas</li></ul><p><br></p><p><strong>More info on:</strong></p><p><a href=\"http://www.figmamanager.com/\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">www.figmamanager.com</a></p>","id":"900779105193089625","installCount":9345,"lastUpdateDate":"2021-12-01T22:49:04.385Z","likeCount":191,"name":"Figma Manager","publisherHandle":"jaerpollux","publisherId":"553239","publisherName":"Jaer Pollux","runCount":9086,"viewCount":15744},{"description":"<p>This is a small plugin that counts layers in a selection and specifies how many of them are selected directly (so-called top-level elements) or entirely hidden.</p><p><br></p><p>This information can be useful in the process of optimising the file and creating scalable and performant design system.</p><p><br></p><p>Another potentially useful feature of this plugin is that it logs to the console how many layers of different kinds are presented in the selection. In practice, it looks something like this (see the&nbsp;<code>types</code>&nbsp;property):</p><p><br></p><pre class=\"ql-syntax\" spellcheck=\"false\">{\n    \"total\": 298,\n    \"hidden\": 32,\n    \"topLevel\": 47,\n    \"types\": {\n        \"RECTANGLE\": 71,\n        \"COMPONENT\": 2,\n        \"TEXT\": 50,\n        \"INSTANCE\": 24,\n        \"GROUP\": 21,\n        \"FRAME\": 73,\n        \"VECTOR\": 51,\n        \"ELLIPSE\": 6\n    }\n}\n</pre><p><br></p><p>This information is rarely needed but can be useful in some cases.</p><p><br></p>","id":"900867721222656652","installCount":2385,"lastUpdateDate":"2022-04-09T21:39:00.023Z","likeCount":14,"name":"Count Layers","publisherHandle":"gnchrv","publisherId":"408559","publisherName":"Misha Goncharov","runCount":2531,"viewCount":1939},{"description":"<p>Everything you need to easily export, import, localize, spell check, and update Figma text.</p><p><br></p><h2>Features</h2><p><br></p><ul><li>Use instantly inside Figma; no extra websites, apps or APIs required.</li><li>Export Figma text layers to XLSX, CSV and JSON files.</li><li>Bulk update Figma text layers via XLSX, CSV or JSON import.</li><li>Sync repeating text/image content from a Google Sheet or XLSX/CSV file.</li><li>Automatically generate Figma data tables from a Google Sheet or XLSX/CSV.</li><li>No data processed/uploaded/stored anywhere outside your Figma file.</li><li>Seamless frame localization via simple Spreadsheet export/import.</li><li>Find &amp; Replace feature to quickly update any matching text.</li><li>Export frames to DOCX, XLSX, TXT, EPUB, HTML or PDF.</li><li>Quickly export selected text layers to CSV, JSON or XLIFF files.</li><li>Spell check your Figma text in dozens of languages.</li><li>Download all Figma comments to CSV and JSON files.</li><li>Include design references for text and comment exports.</li></ul><p><br></p><h2>To use CopyDoc</h2><p><br></p><ol><li>Install CopyDoc and run the plugin in your Figma file.</li><li>Click on a desired feature button to open settings.</li><li>Follow the prompts in the plugin for each feature.</li></ol><p><br></p><h2>Documentation &amp; Video Tutorials</h2><p><br></p><p>For plugin documentation, please visit <a href=\"https://docs.hypermatic.com/copydoc/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://docs.hypermatic.com/copydoc</a></p><p><br></p><h2>Bug Reports</h2><p><br></p><p>CopyDoc is pretty new (like a baby panda); so if you do notice an obvious bug, please get in touch and we'll try to publish a fix for it!</p><p><br></p><h2>License</h2><p><br></p><p>After you've tried importing/exporting text from your Figma designs with CopyDoc 15 times, you'll be asked to enter your license key. Your license key will allow you or your team to import and export an unlimited amount of text from Figma using CopyDoc.</p><p><br></p><p>To purchase a license or to find out more, please visit <a href=\"https://hypermatic.com/copydoc/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://hypermatic.com/copydoc</a></p>","id":"900893606648879767","installCount":26684,"lastUpdateDate":"2022-07-18T06:40:18.611Z","likeCount":260,"name":"CopyDoc Text Kit","publisherHandle":"hypermatic","publisherId":"247","publisherName":"Hypermatic","runCount":25887,"viewCount":33360},{"description":"<p><strong>Make Link much mor clickable 🔗</strong></p><p><br></p><p>Figma’s \"links to text” is nice feature for Figma as document.</p><p>But not to much clickable area.</p><p><br></p><p>“Link Card” makes much more clickable.</p><p><br></p><p><strong>STEP:</strong></p><ol><li>Change text to link text.</li><li>Select this, execute “Link Card” plugin.</li><li>Link text will be a Mini-Card 🎉</li></ol>","id":"901097294283021064","installCount":3280,"lastUpdateDate":"2022-06-05T07:28:05.921Z","likeCount":16,"name":"Link Card","publisherHandle":"hiloki","publisherId":"410711","publisherName":"Hiroki Tani","runCount":2281,"viewCount":3133},{"description":"<p>Create totally customizable vector fields by changing more than ten different parameters.</p><p><br></p><h1>How it works</h1><p>This plugin provides two core functionalities:</p><ol><li><strong>Generate vector fields:</strong> through trigonometry a matrix is generated using small lines that simulate the behavior of mathematical vector fields.</li><li><strong>Randomizer:</strong> you can randomize values for the number of rows, columns, padding, cell-size, allowing you to easily explore.</li></ol><p><strong><em>Note:</em></strong><em> the randomizer function will only create square matrices - which means the number of columns equals the number of rows.</em></p><p><br></p><p>If you want to provide feedback or report a bug, go to our <a href=\"https://github.com/ADADDS/VectorFieldGenerator\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">Github page</a>.</p><p><br></p><p>Made with ❤️ by <a href=\"https://github.com/Tuiuiu\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">@tuiuiu</a> and <a href=\"https://github.com/LucianoInfanti\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">@lucianoinfanti</a>.</p>","id":"901275602012692311","installCount":6016,"lastUpdateDate":"2020-10-23T01:21:48.649Z","likeCount":110,"name":"Vector Field Generator","publisherHandle":"6d0d878a_ba12_4","publisherId":"901283375059367322","publisherName":"ADaDDS","runCount":2939,"viewCount":7722},{"description":"<p>✨📝 A simple sticky notes tool for Figma.</p>","id":"901482830211374036","installCount":15629,"lastUpdateDate":"2020-11-29T10:09:20.865Z","likeCount":92,"name":"Sticky Notes","publisherHandle":"aw","publisherId":"3641231","publisherName":"Alex Widua","runCount":14129,"viewCount":20862},{"description":"<p>Crafttor's sole purpose is to give digital craftsmen a better tool to create awesome products. We want every creator of the world, create anything without any blocker to their creative thoughts.</p><p><br></p><p>Crafttor gives free &amp; paid high-quality trending illustrations that's go with your every project like a website, app, PPT, print, etc.</p><p><br></p><p>🎁 What is inside?</p><p><br></p><p>- Free &amp; paid illustrations as per your requirement.</p><p>- 2D &amp; 3D Illustrations.</p><p>- Mix &amp; Match illustrations.</p><p>- Every month a new illustration set.</p><p>- Suggest illustrations if it's not covered by us.</p><p><br></p><p><br></p><p>🎨 Where can you use it?</p><p><br></p><p>- To design better-looking landing pages</p><p>- For empty states that match your app's palette</p><p>- For your social posts</p><p>- For your blog articles</p><p><br></p><p>🎨 What next?</p><p><br></p><p>- Animated Illustrations</p><p><br></p><p>Your support is essential to us, feel free to share the Crafttor with the hashtag #crafttor.</p><p><br></p><p>Your feedback is important to us. Please give your valuable feedback to us at info@crafttor.com</p><p><br></p><p>You can check&nbsp;plans from here</p>","id":"902086023682633830","installCount":19197,"lastUpdateDate":"2022-04-18T06:21:06.299Z","likeCount":176,"name":"Crafttor","publisherHandle":"CrafttorDesign","publisherId":"902077151496240206","publisherName":"Crafttor","runCount":15850,"viewCount":29967},{"description":"<p>A plugin for turning your Figma designs into real websites you can share, no login required!</p><p><br></p><p>If you want to take your website to the next level, with custom domains and more, a login to Instant Website is required.</p><p><br></p><p>The plugin itself and it's basic functionality is free for everyone to use. We automatically add a banner in the bottom of your website which can be removed by subscribing to the Pro Plan on https://dashboard.instantwebsite.app</p>","id":"902526218387855663","installCount":6875,"lastUpdateDate":"2020-11-11T12:42:10.228Z","likeCount":56,"name":"Instant Website Beta","publisherHandle":"instantwebsite","publisherId":"902527702657337842","publisherName":"Instant Website","runCount":3949,"viewCount":7064},{"description":"<p>Sequential Text populates a range of text layers with a numeric sequence.</p><p><br></p><p>To use it, select the appropriate text layers, launch the plugin, enter the text that you want to appear in the first layer in your selection, then press&nbsp;<strong>Update Text</strong>. The plugin automatically identifies the suffix, how it should increment, and updates all the selected text layers with appropriately sequenced text.</p><p><br></p><p>It supports simple numbered suffixes, or more complex ranged suffixes with different separators.</p><p><br></p><p>Here are some examples of what a range of text layers would contain for a given input string.</p><p><br></p><p><strong>Pattern: </strong>1</p><p><strong>Output:</strong> 1, 2, 3, 4, etc.</p><p><br></p><p><strong>Pattern: </strong>Label 1</p><p><strong>Output:</strong> Label 1, Label 2, Label 3, Label 4, etc.</p><p><br></p><p><strong>Pattern: </strong>Faders 1-8</p><p><strong>Output:</strong> Faders 1-8, Faders 9-16, Faders 17-24, Faders 25-32, etc.</p><p><br></p><p><strong>Pattern: </strong>1/2</p><p><strong>Output:</strong> 1/2, 3/4, 5/6, 7/8, etc.</p><p><br></p><p><strong>Pattern: </strong>1 &amp; 2</p><p><strong>Output:</strong> 1 &amp; 2, 3 &amp; 4, 5 &amp; 6, 7 &amp; 8</p><p><br></p><p>Figma does not guarantee the ordering or layers in a selection, so you can choose how the plugin applies the sequence across the selcted items: in rows or in columns depending on the position of the layers.</p><p><br></p><h2>Limitations</h2><p>It does not support sequential prefixes. You’ll get odd results if you try to use labels that begin with numbers as the plugin thinks the following text is a range separator. I may change the way the sequential elements are identified to be less automagical, and more explicit.</p>","id":"902656469620451746","installCount":2677,"lastUpdateDate":"2020-10-26T20:44:34.144Z","likeCount":14,"name":"Sequential Text","publisherHandle":"henrybourne","publisherId":"899295744835603875","publisherName":"Henry Bourne","runCount":713,"viewCount":2810},{"description":"<h1>Bring your Design seamlessly to Smartphones and Desktops.</h1><p><br></p><p><strong>Simply review designs. Seamlessly, live and remote directly on your or clients devices without leaving Figma.</strong></p><p><br></p><p><strong>🌍 Worldwide Sharing</strong></p><p>Share your Designs with one click to your clients - no WiFi or USB cable required.</p><p><br></p><p><strong>🔐 256-bit SSL secured</strong></p><p>Protected by High Secure-Sockets-Layers.</p><p><br></p><p><strong>🗑 No Datasaving</strong></p><p>Respecting your creativity and privacy.</p><p><br></p><p><strong>⚡️ Lightning Fast</strong></p><p>Ultra crispy design previews to everybody.</p><p><br></p><p><strong>⏱ No Signup needed</strong></p><p>Join without sign up.</p><p><br></p><p><strong>🎨 Better Understanding</strong></p><p>Design Reviews directly on client‘s devices.</p><p><br></p><p><strong>☠️ Goodbye, Mockups</strong></p><p>Creating Mockups was yesterday.</p>","id":"902878970384139797","installCount":5104,"lastUpdateDate":"2020-10-27T15:22:10.236Z","likeCount":47,"name":"📲 represent","publisherHandle":"swipecircus","publisherId":"902940245042656601","publisherName":"Swipe Circus","runCount":2430,"viewCount":6461},{"description":"<p><a href=\"https://excitedspider.github.io/figma-design-token-dock/\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">online pages</a></p><p><br></p><h1>Description</h1><p>This is a plugin to export figma style to design token json.</p><p><br></p><p>本插件用于将 figma 中定义的样式导出为 design token json.</p><p><br></p><h1>How to use</h1><p>Just select nodes using custom style then click export. And U will get a pretty json.</p><p><br></p><p>You can find more usage<strong> </strong><a href=\"https://excitedspider.github.io/figma-design-token-dock/\" rel=\"noreferrer noopener nofollow\" target=\"_blank\"><strong>here</strong></a>.</p><p><br></p><h1>Exports token to...</h1><ul><li>clipboard</li><li>json file</li><li>github pull request [new!]</li></ul><p><br></p><h1>Github Pull Request</h1><p>To export token to github pr:</p><ol><li>Go to 'setting' and fill the github access token.</li><li>Select styles.</li><li>click 'Make a PR' button.</li><li>config repo</li><li>click 'Create PR' button.</li></ol><p><br></p><p>Notice:</p><ul><li>Your github access token need to have the access to create PR on master.</li></ul><p><br></p><h1>Feedback &amp; Ideas</h1><p>You can find me either at:</p><ul><li><a href=\"https://github.com/ExcitedSpider/figma-design-token-dock/issues\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">Github issues</a></li><li>qiuyifeng1997@outlook.com</li></ul><h2><br></h2>","id":"903167004921142962","installCount":1909,"lastUpdateDate":"2021-01-13T11:14:59.795Z","likeCount":14,"name":"Design Token Dock / 样式导出工具","publisherHandle":"qefeng","publisherId":"862525073265962761","publisherName":"qefeng","runCount":279,"viewCount":2109},{"description":"<p>A one-click solution to copyright your original designs in Figma.</p><p><br></p><ul><li>Monetization if other designers use your creations.</li><li>Establishes work authorship for potential future copyright disputes.</li><li>Copyright secured by an independent decentralized blockchain network that guarantees complete data integrity.</li><li>Easy to use and provides an instant solution to copyright your designs.</li></ul>","id":"903217300028082886","installCount":2253,"lastUpdateDate":"2021-10-07T14:29:28.021Z","likeCount":17,"name":"Algo.id","publisherHandle":"algo_id","publisherId":"902541441975668371","publisherName":"Algo.id","runCount":2341,"viewCount":1764},{"description":"<p>Remove the background from your images automatically with just a single click - using the <a href=\"https://clippingmagic.com/api\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">Clipping Magic API</a>.</p><p><br></p><p>Note: You will need a <a href=\"https://clippingmagic.com/api/pricing\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">Clipping Magic API subscription</a> (not a regular, non-API subscription) for this plugin.</p><p><br></p><p>For more information, see <a href=\"https://clippingmagic.com\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">clippingmagic.com</a></p>","id":"903342829195738905","installCount":11635,"lastUpdateDate":"2020-11-17T16:51:33.738Z","likeCount":33,"name":"Clipping Magic BG Removal","publisherHandle":"clv","publisherId":"24984","publisherName":"Jacob N","runCount":9294,"viewCount":10178},{"description":"<p>Renaming the layernames and writing all child/parent structure to a single string sent to own server with XMLHttpRequest.</p><p><br></p><p>Works well with \"copy as css\" and converting everything to css&amp; html or JSX externally.</p><p><br></p><p>Used by company Avant WebSolutions Srl</p>","id":"903918530091878418","installCount":2720,"lastUpdateDate":"2020-12-04T12:11:02.373Z","likeCount":6,"name":"copyStructure","publisherHandle":"8acf852e_9236_4","publisherId":"1634242","publisherName":"Soeren S. Gannik","runCount":482,"viewCount":2097},{"description":"<p><strong>Сreate objects from text</strong></p><p>The plugin creates copies of the selected object or text layers with the changed text in them.</p><p>You can use the generated data or your own text, which can be cut in one click according to the specified rule: paragraphs, fragments after the comma, periods and semicolons.</p><p><br></p><p><a href=\"https://www.figma.com/community/file/1038491777353064705/Plugins-Playground?fuid=496578361677127857\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">How it works (soon)</a></p><p><br></p><p>——————————————————————————————————————————————</p><p><br></p><p><strong>Создавайте объекты из текста</strong></p><p>Плагин создаёт копии выбранного объекта или текстовые слои с изменённым текстом в них.</p><p>Вы можете использовать сгенерированные данные или собственный текст, который в один клик можно нарезать по заданному правилу: на абзацы, фрагменты после запятой, точки и точки с запятой.</p><p><br></p><p><a href=\"https://t.me/areyoureallydesigner\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Канал в Телеграм</a> с описанием и примерами использования.</p><p><br></p><p>——————————————————————————————————————————————</p><p><br></p><p><a href=\"https://www.instagram.com/yuliialing/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Юлия Кожина</a></p><p>Перевод интерфейса на китайский язык.</p><p><br></p><p><a href=\"https://www.instagram.com/danyashchanikov/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Данила Щаников</a></p><p>Помощь в продвижении.</p><p><br></p><p><a href=\"https://www.instagram.com/mikhalenka/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Настя Михайленко</a></p><p>Полезные идеи и невероятная поддержка.</p><p><br></p><p><a href=\"https://www.instagram.com/yaslibar/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Кафе-бар Ясли</a></p><p>Место силы.</p><p><br></p><p><a href=\"https://github.com/Marak\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Marak</a></p><p>Faker.js.</p>","id":"903936058293238810","installCount":4641,"lastUpdateDate":"2022-05-11T15:39:02.663Z","likeCount":56,"name":"COFT","publisherHandle":"milsinery","publisherId":"232442","publisherName":"Vladimir B.","runCount":4481,"viewCount":7145},{"description":"<p>Pack allows you to generate a circle packing pattern withing a frame.</p><p><br></p><p><a href=\"https://mathworld.wolfram.com/CirclePacking.html\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">Circle packing</a> is the process of arranging circles within a given boundary such that none of them overlap.</p><p><br></p><h2>Usage</h2><ol><li>Select a Frame to being</li><li>Bring up Pack from the plugin context menu</li><li>Select which shape to render</li></ol><p><br></p><p>Pack offers two choices: square or circle. This is the shape that will be used to generate the pattern.</p>","id":"904007992809854059","installCount":5461,"lastUpdateDate":"2020-10-30T14:14:43.010Z","likeCount":39,"name":"Pack","publisherHandle":"varun","publisherId":"940","publisherName":"Varun Vachhar","runCount":1946,"viewCount":7210},{"description":"<h1>Rename Styles</h1><p><br></p><p>Rename Styles is a plugin that makes bulk renaming a breeze.</p><p>Select multiple styles at once, and perform find and replace functions to rename them.</p>","id":"904723338709552480","installCount":9487,"lastUpdateDate":"2020-12-03T22:44:24.859Z","likeCount":90,"name":"Rename Styles","publisherHandle":"Finch","publisherId":"167182","publisherName":"Luke Finch","runCount":3843,"viewCount":11988},{"description":"<p>Flow is the most powerful, easy to use tool for animating your Figma designs.</p><p><br></p><p>Want to add flair to an element of your design? Flow's exporter has your back.</p><p>&nbsp;</p><ol><li>Select one or more layers.</li><li>Make them exportable.</li><li>In Flow, import your Figma file and you’re good to go.</li></ol><p><br></p><p>It saves you the hassle of pulling apart your design into separate frames and projects, letting you get to what's important: animating and creating great products.</p><p><br></p><p>When you're ready, you can ship code or media files. Here's what you can export:</p><ul><li>Lottie files (for iOS, Android and Web)</li><li>iOS Swift code (as an Xcode project)</li><li>HTML / CSS / JS (Web Animations)</li><li>React</li><li>MOV / MP4</li><li>Single frame or Animated GIF / PNG</li></ul>","id":"905358215497822854","installCount":18337,"lastUpdateDate":"2020-11-17T23:10:05.487Z","likeCount":190,"name":"Flow Exporter","publisherHandle":"createwithflow","publisherId":"910668146599998572","publisherName":"Flow","runCount":8069,"viewCount":31941},{"description":"<p>A plugin of utility functions for use with the Doist marketing design system.</p><p><br></p><p>It's unlikely that this plugin will be that useful to you since the color styles and components it references are specific to the Doist brand design system, but feel free to try it out anyway!</p><p><br></p><p><strong>Utility functions:</strong></p><ul><li>set node to parent width/height/both</li><li>apply basic screenshot styles to image or frame</li><li>format monochromatic illustrations to be tintable with fills</li><li>show/hide annotation components</li><li>resize spacing component using the Brand spacing scale</li><li>create and name slices for icon export</li><li>append language codes to frames created by the Transifex plugin</li><li>Replace text with skeleton shapes</li></ul>","id":"905632536371558180","installCount":171,"lastUpdateDate":"2021-09-07T13:58:26.297Z","likeCount":9,"name":"Doist Utilities","publisherHandle":"doist","publisherId":"868153665163196923","publisherName":"Doist","runCount":135,"viewCount":1187},{"description":"<p>A simple Figma plugin that converts a selected text box into an Auto Layout list.</p><p><br></p><p>How to use:</p><ol><li>Select a single text layer</li><li>Choose a list style</li><li>Convert!</li></ol><p><br></p><p>Feature roadmap:</p><ul><li>Indented sub-bullets</li><li>Custom bullet style option</li><li>Retain mixed font styles</li></ul>","id":"905913874417115077","installCount":3076,"lastUpdateDate":"2020-11-23T19:19:27.662Z","likeCount":54,"name":"Text to Auto Layout List","publisherHandle":"joeoak","publisherId":"435063","publisherName":"Joe Oak","runCount":2591,"viewCount":4917},{"description":"<p>I couldn't find a plugin that let me find and replace text using regular expressions, so I threw this together. Maybe you'll find it handy, too.</p><p><br></p><p><strong>Usage:</strong></p><ul><li>Find and replace operates on any text found in your selection or, if you have nothing selected, it will search the entire active page</li><li>Toggle case sensitivity and / or regular expression matching (if you please)</li><li>Mash the big blue button</li></ul><p><br></p><p>Please send me any bugs or feature requests.</p><p><br></p><p>Enjoy :)</p>","id":"905964570877397972","installCount":8680,"lastUpdateDate":"2022-04-24T22:54:16.689Z","likeCount":81,"name":"Find & Replace","publisherHandle":"aaronmw","publisherId":"491","publisherName":"Aaron Wright","runCount":11877,"viewCount":10807},{"description":"<p>Mockplus is a design platform where product managers, designers, and developers work together. This plugin enables you to upload Figma files, so you can have full access to Mockplus: various collaborative tools, rich interaction possibilities, a full-view storyboard with team management.</p><p><a href=\"https://jongde.medium.com/mockplus-plugin-for-figma-the-secret-weapon-to-level-up-your-team-279d3204afdf\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Find out more </a>| <a href=\"https://www.mockplus.com/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Our website</a> | <a href=\"https://discord.gg/RUJ7SJCtx8\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Join Discord community</a> | <a href=\"https://www.mockplus.com/support\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Email us</a></p><p><br></p><p>摹客官方认证Figma插件，无缝导入项目，多人在线评审，智能生成标注，一键下载切图，复制样式代码，总览项目全貌。更有设计规范、任务管理、在线文档、在线设计等产研团队利器。摹客+Figma，打造实用设计平台！</p><p><a href=\"https://www.mockplus.cn/?home=1\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">摹客官网</a> | <a href=\"https://help.mockplus.cn/p/504\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">使用教程</a> | <a href=\"https://www.mockplus.cn/support\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">联系我们</a></p>","id":"906006256595978208","installCount":25559,"lastUpdateDate":"2022-07-12T05:54:09.626Z","likeCount":282,"name":"Mockplus","publisherHandle":"mockplus","publisherId":"890774750796099963","publisherName":"Mockplus","runCount":25860,"viewCount":51022},{"description":"<p>Text안에 있는 한글맞춤법을 검사해줍니다.</p>","id":"906108531959025675","installCount":400,"lastUpdateDate":"2022-06-07T06:11:23.155Z","likeCount":19,"name":"한국어 맞춤법 검사기","publisherHandle":"heewon_dev","publisherId":"2967519","publisherName":"owen","runCount":309,"viewCount":824},{"description":"<p>This plugin helps to extract the coordinates of every point of shapes with 4 vertices.</p>","id":"906275328528413811","installCount":173,"lastUpdateDate":"2021-03-03T07:35:13.424Z","likeCount":3,"name":"meetyoo-figma-plugin","publisherHandle":"tgumeetyoo","publisherId":"862304613263996602","publisherName":"Tim Gutsche","runCount":78,"viewCount":524},{"description":"<p>A little tool for creating quick mockups graphics.</p><p>Applies a simple window border around any frame or rectangle object.</p>","id":"906338102686094481","installCount":2361,"lastUpdateDate":"2020-11-06T05:51:19.227Z","likeCount":31,"name":"Window Framer","publisherHandle":"nicolarose","publisherId":"3875139","publisherName":"Nicola","runCount":1831,"viewCount":4830},{"description":"<p>Abstract random shapes generator</p>","id":"906699089250587979","installCount":6185,"lastUpdateDate":"2020-11-07T00:24:21.314Z","likeCount":49,"name":"Random Shapes","publisherHandle":"antonevstigneev","publisherId":"363533","publisherName":"Anton Evstigneev","runCount":6049,"viewCount":8850},{"description":"<p>Create awesome effects like <strong>Skeuomorph, Neon, Glitch, Reflection, Glass, Gradient, etc.</strong> right in Figma!</p><p><br></p><p><strong>Support the plugin: </strong><a href=\"http://buymeacoff.ee/milanmaheshwari\" rel=\"noreferrer noopener nofollow\" target=\"_blank\"><strong>buy me a coffee</strong></a></p><p><br></p><p>----------------------------------------------------------------------------------------</p><p><br></p><h2>One-click transform</h2><p>Just select any shape, vector, or text layer, pick a morph effect from the plugin and boom!</p><p><br></p><h2>Adjust effects with ease</h2><p>Play around with the properties and adjust effects with ease to get the desired result.</p><p><br></p><h2>Mix and Match</h2><p>Use a combination of different morph effects and create something unique or artistic.</p><p><br></p><h2>100% Free</h2><p>All the effects are absolutely free to use. No registration required either.</p><p><br></p><p>----------------------------------------------------------------------------------------</p><p><br></p><p>Have suggestions, bug report, or wish to have an effect of your choice, ping me -&gt; <a href=\"https://twitter.com/millons098\" rel=\"noreferrer noopener nofollow\" target=\"_blank\"><strong>Twitter</strong></a></p><p><br></p><p>Unleash your creativity with Morph! I'd be very thankful for spreading the word on social media or tagging me.</p>","id":"906950256777348534","installCount":105486,"lastUpdateDate":"2021-08-15T21:10:51.444Z","likeCount":1380,"name":"Morph","publisherHandle":"milanmaheshwari","publisherId":"94095","publisherName":"Milan Maheshwari","runCount":84810,"viewCount":77056},{"description":"<p>Create mockups with 3D device models. Customize the color, camera angle, and device model for your mockups. Includes models for the iPhone, Macbook Pro, iMac, and iPad with more models on the way for other devices.</p><p><br></p><p>How to use:</p><p><br></p><p>1. Run Device Models from the plugin menu</p><p><br></p><p>2. Choose a device model</p><p><br></p><p>3. Select any layer to render it on the device's screen. For best results select a layer that's close to the device's screen dimensions (or the same aspect ratio). If it's not exact that's fine, images will be placed similar to Figma's 'Fill' setting for image fills. To create a frame with the right dimensions click the \"Create Empty Frame\" button.</p><p><br></p><p>4. To change the camera angle select an angle preset or click and drag over the device. Alternatively, you can set an exact rotation in degrees on the right. You can also modify the rotation of the model itself there.</p><p><br></p><p>5. Choose a device color. If you have local color styles click the color swatch to choose one, or manually enter a hex code.</p><p><br></p><p>6. Click \"Save as Image\" to render the current view as an image layer in Figma.</p>","id":"906973799344127422","installCount":8171,"lastUpdateDate":"2021-09-22T16:46:46.052Z","likeCount":64,"name":"Device Models","publisherHandle":"codyb","publisherId":"1443441","publisherName":"Cody Bennett","runCount":7747,"viewCount":14823},{"description":"<p>A plugin to add pattern as background to your shapes.</p>","id":"906998238902906319","installCount":1188,"lastUpdateDate":"2021-08-23T16:14:34.784Z","likeCount":5,"name":"Patterns by 380s","publisherHandle":"380s","publisherId":"416530","publisherName":"Fathallah Houssem","runCount":1540,"viewCount":3749},{"description":"<p>WE'RE SAD TO SHARE THAT WE'RE SUNSETTING STRINGS. IF YOU'RE AN EXISTING CUSTOMER, PLEASE CHECK YOUR EMAIL FOR ADDITIONAL INFORMATION. </p><p><br></p><p>WE'RE KEEPING THE PRODUCT UP AND RUNNING UNTIL THE END OF AUGUST. PLEASE TRANSFER ANY DATA OUT OF STRINGS BY THEN. FOR PAYING CUSTOMERS, WE'RE HAPPY TO HELP YOU WITH THE TRANSITION. PLEASE REPLY BACK TO THE EMAIL WE'VE SENT YOU SO WE CAN ASSIST YOU WITH THE MIGRATION.</p><p><br></p><p>------- </p><p><br></p><p>Strings - UX writing software that saves time and improves products. Learn more how Strings can help your UX writing process:</p><p>&nbsp;</p><p>&nbsp;</p><h2><strong>Automated word check: Write consistently as a team</strong></h2><p><strong>&nbsp;</strong></p><p>This feature is like Grammarly but for your product. In our Word list you can capture the words and phrases you prefer to use as a team, and those you want to avoid. As you write in Figma, the Strings plugin flags any exceptions to your word list.</p><p>&nbsp;</p><p>How it works:</p><ol><li>Create your word list in our web app (app.strings.design).</li><li>Open the Strings plugin and go to the “Edit” tab, select a frame or text node you want to check.</li><li>Strings scans the text in your design for any inconsistencies against your word list.</li></ol><p>&nbsp;</p><p>Bonus: We also show <strong>readability scores</strong> to quickly check if your copy is easy to read for your audience (we use the Automated Readability Index - same as Hemmingway Editor).</p><p>&nbsp;</p><p>Learn more here -&gt;<a href=\"https://strings.design/how-it-works-word-list-check\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\"> Automated word check</a></p><p><br></p><p><br></p><h2><strong>Spell and grammar check</strong></h2><p><br></p><p>Making small mistakes can be a huge pain to fix later. Easily check your copy as you write in Figma.</p><p><br></p><p>We support the following languages:</p><ul><li><strong>Spell and grammar check:</strong> English, French, German, Portuguese, Spanish</li><li><strong>Spell check:</strong> Arabic, Asturian, Belarusian, Breton, Catalan, Catalan (Valencian), Chinese, Danish, Dutch, Esperanto, Galician, Greek, Irish, Italian, Japanese, Khmer, Norwegian, Persian, Polish, Romanian, Russian, Slovak, Slovenian, Swedish, Tagalog, Tamil, Ukrainian</li></ul><p><br></p><p><br></p><h2>Find and replace</h2><p><br></p><p>With this feature you can quick find and bulk edit copy across your Figma page. So if you need to change the same term or microcopy across your design file, you can do this with a few clicks instead of clicking through each text element.</p><p><br></p><p>It works similar to Find and replace features in commonly used word editor software.</p><p><br></p><p><br></p><h2><strong>Copy handoff to developers</strong></h2><p><strong>&nbsp;</strong></p><p>Ensure a clean copy handoff from design to production. Avoid copy/paste errors or developers using old copy. Your devs save time not having to click through Figma files to find copy - they get localization-ready code snippets for iOS (.strings), Android (.xml) and Web (nested JSON). You can also leave comments for your translators who can see everything in context of the visual designs.</p><p>&nbsp;</p><p>How it works:&nbsp;</p><ol><li>With the Strings plugin open, select the “Export” tab.</li><li>Select frames in Figma and use the plugin to upload them to the Strings web app.</li><li>In the Strings interface, you can add notes for developers and linguists next to images of the screens that contain the strings.</li></ol><p>&nbsp;</p><p>Learn more here -&gt;<a href=\"https://strings.design/how-it-works-copy-handoff\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\"> Copy handoff</a></p><p><strong>&nbsp;</strong></p><p><strong>&nbsp;</strong></p><h2><strong>Search and edit in-app copy (available on our web app)</strong></h2><p><strong>&nbsp;</strong></p><p>Unlock the ultimate source of truth for your copy -&gt; get access to in-code copy. Search and edit it with a few clicks.</p><p>&nbsp;</p><p>How it works:&nbsp;</p><ol><li>From your Strings account, install our GitHub app and link your string files. (No custom code integration needed.)</li><li>Search your product copy in code across all apps and platforms.</li><li>Edit copy easily.</li><li>Strings automatically submits the changes as a pull request back to GitHub for approval by your developers.</li></ol><p>&nbsp;</p><p>Learn more here -&gt;<a href=\"https://strings.design/how-it-works\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\"> In-app editing</a></p><p><strong>&nbsp;</strong></p><p><strong>&nbsp;</strong></p><p><strong>&nbsp;</strong></p><h2><strong>Learn more about Strings at </strong><a href=\"http://www.strings.design\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\"><strong>www.strings.design</strong></a></h2><p><strong>&nbsp;</strong></p><p>We always love to hear your ideas and feedback on how to improve the product: contact@strings.design</p>","id":"907012000809761240","installCount":7068,"lastUpdateDate":"2022-07-21T21:32:20.786Z","likeCount":216,"name":"Strings - the UX writing tool","publisherHandle":"strings","publisherId":"2501181","publisherName":"Jasper","runCount":4509,"viewCount":16927},{"description":"<p>Custom Graph lets you build line, bar and cumulative graphs based on your design elements.</p><p><br></p><h2><strong>HOW TO BUILD A GRAPH:</strong></h2><ol><li>Select the frame in which you want to build the chart;</li><li>Select an object in your design from which you want to build a graph;</li><li>Enter data into the table (also supported in pasting from Excel and generating random numbers in the desired range).</li></ol><p><br></p><h2><strong>FOLLOW THE LINK TO SEE ALL THE SETTINGS:</strong></h2><p><a href=\"https://linky.design/custom-graph\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">How to use the plug-in</a></p><p><a href=\"https://youtu.be/U9Op6-auZtY\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">Demo video with examples</a></p><p><br></p><p><strong><em>Note:</em></strong><em> This plugin does not create coordinate axes to give maximum flexibility in plotting. You need to create coordinate axes yourself.</em></p>","id":"907304045650716211","installCount":15028,"lastUpdateDate":"2021-07-27T11:32:53.748Z","likeCount":136,"name":"Custom Graph","publisherHandle":"goodgantt","publisherId":"4230233","publisherName":"GoodGantt for Trello","runCount":16504,"viewCount":42138},{"description":"<p>Plugin with all the necessary shapes and basic forms that you need on a daily basis.</p><p><br></p><p>Open the plugin, select the shape you need, and it will appear on the canvas. Enjoy!</p><p><br></p><p>Basic forms, perfect heart and water drop figures, different types of spirals and much more are right at your fingertips.</p>","id":"907656685995069176","installCount":32125,"lastUpdateDate":"2022-01-01T16:11:13.242Z","likeCount":265,"name":"Shaper","publisherHandle":"voshkarina","publisherId":"557","publisherName":"Anna Voshkarina 🔥","runCount":30751,"viewCount":29978},{"description":"<p>Плагин для исправления и форматирования кириллического текста на основе правил типографики со встроенным Ёфикатором.</p><p><br></p><ul><li>Заменит букву «е» на «ё» в словах, где она должна употребляться.&nbsp;</li><li>Автоматически расставит неразрывные пробелы и уберёт висячие предлоги и союзы.&nbsp;</li><li>Исправит \"простые кавычки\" на «ёлочки» и „лапки“, а знак минуса на дефис, длинное или среднее тире.&nbsp;</li><li>Разобьёт длинные числа перед знаком валюты по разрядам и заменит в них точку на запятую.&nbsp;</li><li>Приведёт телефонные номера к нужному формату.&nbsp;</li></ul><p><br></p><p>Выберите текстовый слой, группу, фрейм или компонент в котором хотите проверить текст и запустите плагин <strong>SBOL Typograph</strong>. Если ничего не выбрано, проверка и замена происходит во всех элементах страницы.</p><p><br></p><h2>Правила, используемые типографом</h2><h2><br></h2><p><strong>Ёфикатор</strong></p><ul><li>Замена буквы&nbsp;<em>е</em>&nbsp;на&nbsp;<em>ё</em>&nbsp;в&nbsp;словах, где&nbsp;она&nbsp;должна употребляться</li></ul><p><br></p><p><strong>Кавычки</strong></p><ul><li>Замена \"простых кавычек\" на&nbsp;«ёлочки» и&nbsp;„лапки“&nbsp;<code>«„Как это скучно!“&nbsp;— воскликнул я невольно»</code></li></ul><p><br></p><p><strong>Телефонные номера</strong></p><ul><li>Приведение российских телефонных номеров к формату <code>Федеральный номер: 8&nbsp;800&nbsp;555-55-50&nbsp;Городской номер: +7&nbsp;495&nbsp;500-55-50, +7&nbsp;4212&nbsp;79-40-35</code></li></ul><p><br></p><p><strong>Тире</strong></p><ul><li>В&nbsp;начале строки или&nbsp;предложения, длинное тире + неразрывный пробел&nbsp;<code>— Это я, почтальон Печкин.</code></li><li>Для&nbsp;диапазонов месяцев и&nbsp;дней недели используем среднее тире без&nbsp;пробелов&nbsp;<code>январь–март, понедельник–суббота</code></li><li>Внутри текста используем неразрывный пробел + длинное тире&nbsp;<code>А&nbsp;гений и&nbsp;злодейство&nbsp;— две&nbsp;вещи несовместные</code></li><li>Для&nbsp;диапазонов чисел используем среднее тире без&nbsp;пробелов&nbsp;<code>2002–2009, XI–XII</code></li></ul><p><br></p><p><strong>Пунктуация</strong></p><ul><li>Замена&nbsp;<em>!?</em>&nbsp;на&nbsp;<em>?!</em></li><li>Замена&nbsp;<em>...?</em>&nbsp;на&nbsp;<em>?‥</em>&nbsp;и&nbsp;<em>...!</em>&nbsp;на&nbsp;<em>!‥</em></li><li>Замена&nbsp;<em>?...</em>&nbsp;на&nbsp;<em>?‥</em>&nbsp;и&nbsp;<em>!...</em>&nbsp;на&nbsp;<em>!‥</em></li><li>Замена&nbsp;<em>...</em>&nbsp;на&nbsp;знак многоточия …</li><li>Заменяем несколько знаков&nbsp;<em>? ! . , ; : -</em>&nbsp;на&nbsp;один&nbsp;<code>Готово!!! ⟶ Готово!</code></li><li>Перенос точки за&nbsp;закрывающуюся кавычку</li></ul><p><br></p><p><strong>Лишние пробелы</strong></p><ul><li>Удаление пробела после&nbsp;<em>« „ ( [</em></li><li>Удаление пробела перед&nbsp;<em>. … : , ; ? ! » “ \"\" ) ]</em></li><li>Удаление пробела между числом&nbsp;и&nbsp;<em>%</em>&nbsp;<code>23%</code></li><li>Удаление пробелов в&nbsp;начале и&nbsp;конце строки</li><li>Удаление двойных пробелов</li></ul><p><br></p><p><strong>Числа перед знаком валюты</strong></p><ul><li>Разбивка длинных чисел по&nbsp;разрядам&nbsp;<code>2345123 $ ⟶ 2 345 123 $</code></li><li>Замена в&nbsp;числах точки на&nbsp;запятую&nbsp;<code>143.56 $ ⟶ 143,56 $</code></li><li>После&nbsp;<em>тыс.</em>&nbsp;должна быть точка, а&nbsp;после&nbsp;<em>млн</em>,&nbsp;<em>млрд</em>,&nbsp;<em>трлн</em>&nbsp;точки быть не&nbsp;должно&nbsp;<code>5 тыс., 2 млн, 1 млрд, 3 трлн</code></li></ul><p><br></p><p><strong>Валюта</strong></p><ul><li>Замена&nbsp;<em>USD и&nbsp;EUR</em>&nbsp;на&nbsp;<em>$ и&nbsp;€</em>&nbsp;<code>20usd ⟶ 20 $</code></li><li>Замена&nbsp;<em>Р, р., руб., RUR, RUB</em>&nbsp;на&nbsp;<em>₽</em>&nbsp;<code>789 руб. ⟶ 789&nbsp;₽</code></li><li>Перенос копеек в&nbsp;основную сумму&nbsp;<code>45 руб. 5 коп. ⟶ 45,05&nbsp;₽</code></li><li>Перенос знака валюты после цифр и&nbsp;отделение его&nbsp;неразрывным пробелом&nbsp;<code>$ 109 ⟶ 109 $, 109$ ⟶ 109 $</code></li></ul><p><br></p><p><strong>Неразрывный пробел</strong></p><ul><li>Неразрывный пробел между инициалами и&nbsp;фамилией. Инициалы слитно, затем неразрывный пробел и&nbsp;фамилия. Или&nbsp;фамилия, неразрывный пробел и&nbsp;слитно инициалы.&nbsp;<code>А.А.&nbsp;Иванов, Петров&nbsp;К.П.</code></li><li>Неразрывные пробелы между словом и&nbsp;<em>и т.д., и т.п., и др.</em></li><li>Неразрывный пробел между числом и&nbsp;следующим словом</li><li>Неразрывный пробел перед&nbsp;<em>б, бы, ж, же, ли, ль</em></li><li>Неразрывный пробел перед последним коротким словом в&nbsp;предложении или&nbsp;одиночной строке</li><li>Неразрывный пробел после короткого слова</li><li>Неразрывный пробел после&nbsp;<em>г., обл., кр., ст., пос., с., д., ул., пер., пр., пр-т., просп., пл., бул., б-р., наб., ш., туп., оф., кв., комн., под., мкр., уч., вл., влад., стр., корп., литер, эт., пгт., стр., гл., рис., илл., ст., п., c., а, б, без, безо, будто, бы, в, во, ведь, вне, вот, всё, где, да, даже, для, до, если, есть, ещё, же, за, и, из, изо, из-за, из-под, или, иль, к, ко, как, ли, ли, либо, между, на, над, надо, не, ни, но, о, об, обо, около, оно, от, ото, перед, по, по-за, по-над, под, подо, после, при, про, ради, с, со, сквозь, так, также, там, тем, то, тогда, того, тоже, у, хоть, хотя, чего, через, что, чтобы, это, №, §, АО, ОАО, ЗАО, ООО, ПАО</em></li></ul><p><br></p><p><strong>Строчные буквы</strong></p><ul><li>Слова&nbsp;<em>вы, банк, приложение, условия, сайт</em>&nbsp;— со&nbsp;строчной буквы. С&nbsp;прописной буквы — если слово первое в&nbsp;предложении.</li></ul><p><br></p><p><strong>Разное</strong></p><ul><li>Правильное написание&nbsp;<em>Mastercard, Visa, Мир, Google Pay, Apple Pay, пуш-уведомления, ПИН-код, QR-код, сим-карта, СVV-код, СVС-код, СVV2-код, СVС2-код, CVV, CVC, СМС, Wi-Fi, email, офлайн, онлайн, мск.</em></li></ul><p><br></p><p>--------------------</p><p>Correction and formatting of Cyrillic text.</p>","id":"907888805660596065","installCount":17290,"lastUpdateDate":"2021-10-27T08:45:17.984Z","likeCount":247,"name":"SBOL Typograph","publisherHandle":"mdanilov","publisherId":"898511752879414592","publisherName":"Mikhail Danilov","runCount":15036,"viewCount":17467},{"description":"<p>Create smooth gradient transitions with cubic easing functions ✨</p><p><br></p><p>Allows smoothing of gradient fills in Figma using custom cubic-bézier or step easing functions (think of transition easing). This is especially useful when dealing with transparent gradients but also allows for creative exploration.</p><p><br></p><h2><strong>Usage</strong></h2><p><br></p><p>The plugin is 'gradient-agnostic' in that sense that it doesn't care about the type (<em>linear, radial etc.</em>) and orientation of the gradient.</p><p>It takes the first and last color stop as parameters and eases the gradient with the given easing function value. One caveat with this is that all other color steps in between are discarded.</p><p><br></p><p>The plugin is <a href=\"https://github.com/alexwidua/figma-easing-gradients\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">open source</a> and MIT licensed.</p><p>This plugin is based on the great&nbsp;<a href=\"https://larsenwork.com/easing-gradients/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">work of Andreas Larsen</a>.</p>","id":"907899097995668330","installCount":13482,"lastUpdateDate":"2022-03-24T21:11:32.498Z","likeCount":379,"name":"Easing Gradients","publisherHandle":"aw","publisherId":"3641231","publisherName":"Alex Widua","runCount":12163,"viewCount":19661},{"description":"<p>Calculates light and dark shades of a hex color to match built in SCSS <code>lighten</code> and <code>darken</code> methods.</p>","id":"908220896921395212","installCount":375,"lastUpdateDate":"2020-11-11T22:14:49.209Z","likeCount":5,"name":"SCSS Color Calculator","publisherHandle":"admorphit","publisherId":"584780","publisherName":"Tim Wu","runCount":293,"viewCount":1018},{"description":"<p>Figma To Video allows you to turn your Figma designs into animated videos. The plugin is powered by SUPA video editor that helps to fine-tune the animations and the order in which elements appear.</p>","id":"908257968215073824","installCount":20762,"lastUpdateDate":"2021-12-28T10:37:38.979Z","likeCount":273,"name":"SUPA - Figma to video","publisherHandle":"supa","publisherId":"2264957","publisherName":"SUPA Team","runCount":16483,"viewCount":29877},{"description":"<p><strong>Export</strong> your designs made with Figma to Viewst and create animated HTML5 banners or other ads just in&nbsp;minutes at viewst.com.</p><p><br></p><p><strong>Animate</strong> display banners and social media ads with a simple &amp; smart online editor within just a few clicks. Amaze your clients and potential customers with the eye-catching visuals.</p><p><br></p><p><strong>Create</strong> HTML5 banners from your designs by clicking one button. No coding skills and bloated software required. Ads created with Viewst are compatible with any ad network.</p><p><br></p><p>Start using for free at <a href=\"https://viewst.com/\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">viewst.com</a></p>","id":"908296269862423611","installCount":1908,"lastUpdateDate":"2021-03-09T14:47:02.440Z","likeCount":27,"name":"Viewst – create animated ads","publisherHandle":"ac53d74e_c7d0_4","publisherId":"908300843695973389","publisherName":"Viewst","runCount":1565,"viewCount":4692},{"description":"<p>Save and apply style presets, including strokes, fills, corner radius, effects, padding, layout grids, layer opacity and blend modes.</p><p><br></p><h2>Create a layer style</h2><p><br></p><ol><li>Run <code>Plugins &gt; Layer Styles &gt; Show Layer Styles</code></li><li>Select a frame or shape with styles already applied</li><li>Click the <code>+</code> in the bottom right of the plugin window</li></ol><p><br></p><h2>Apply a layer style</h2><p><br></p><ol><li>Select the layers you would like to apply the layer style to</li><li>Click on the layer style in the list to apply that style</li></ol><p><br></p><h2>Refresh layer styles</h2><p><br></p><p>After you make a change to a layer style, you can update any layers which were previously applied with this layer style.</p><p><br></p><ol><li>Open the plugin</li><li>Right-click on the layer style</li><li>Click <code>Refresh</code></li></ol><p><br></p><h2><strong>Detaching layer styles from layers</strong></h2><p><br></p><p>If you no longer want a layer to be associated with a layer style you can detach it.</p><p><br></p><ol><li>Select the layer you want to detach the layer style from</li><li>In the Properties Panel under <strong>Plugin</strong>, click \"Detach Layer Style\".</li></ol><p><br></p><p><strong>NOTE</strong>: Be careful not to click the minus button as this will remove the plugin command instead. If this happens by mistake, you can re-apply the style and the option to detach the layer style will appear again.</p>","id":"908303483495091267","installCount":2857,"lastUpdateDate":"2022-05-10T15:57:31.026Z","likeCount":187,"name":"Layer Styles","publisherHandle":"gavinmcfarland","publisherId":"9971","publisherName":"Gavin McFarland","runCount":2185,"viewCount":6900},{"description":"<p>Rough is a plugin for&nbsp;<a href=\"https://figma.com/\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">Figma</a>&nbsp;that lets you to convert any objects to sketchy, hand-drawn-like, style.</p><p>The plugin can convert any Figma primitives including lines, curves, arcs, polygons, circles, ellipses, and paths.</p><h2><br></h2><h2>How to use?</h2><p>Just simply select object on the screen and run the plugin from menu \"Plugins / Rough\". Then select parameters and press \"Apply\" button.</p><p>The system keeps the stroke and fill styles and width.</p><h2><br></h2><h2>Acknoledgements</h2><p>The plugin is based on the legendary&nbsp;<code>Rough.js</code>&nbsp;library (<a href=\"https://roughjs.com/\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">https://roughjs.com/</a>) by Preet Shihn. Thank you!</p><p>Many thanks to developers of Figma, Vue, Vue-toolbar, Gulp and many many other people of JavaScript community.</p><h2><br></h2><h2>Comments and feedback</h2><p>Please, let your comments, bugs and any other issues at special Rough repository&nbsp;<a href=\"https://github.com/agershun/oy-rough/issues\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">https://github.com/agershun/oy-rough/issues</a></p>","id":"908327335402084440","installCount":5073,"lastUpdateDate":"2020-11-11T12:09:17.996Z","likeCount":85,"name":"Rough","publisherHandle":"agershun","publisherId":"489982","publisherName":"Andrey Gershun","runCount":3928,"viewCount":5964},{"description":"<p>Quickly and easily fill text fields with customizable sample content.</p><p><br></p><p>Mock intelligently groups text fields, so you don't have to waste time selecting only the fields you want to edit. Select anything - an entire screen, a frame, a set of fields - and Mock will let you choose which group to paste into.</p><p><br></p><p>You can paste from predefined data like names, addresses, numbers, and dates - or find or create your own lists online and link to those from inside the plugin.</p>","id":"908371597321736295","installCount":1208,"lastUpdateDate":"2021-07-13T18:57:46.513Z","likeCount":18,"name":"Mock","publisherHandle":"naftalibeder","publisherId":"1154528","publisherName":"Naftali Beder","runCount":1405,"viewCount":3713},{"description":"<p><a href=\"https://slazzer.com\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">Slazzer </a>auto background removal platform will quickly remove any image background in just a few seconds.</p><p>This Plugin help user to remove image background automatically.</p><ul><li>Just need to set <a href=\"https://slazzer.com/account#api-key\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">api-key</a></li><li>Run plugin wait just a few seconds and get results.</li></ul>","id":"908415905821759633","installCount":6055,"lastUpdateDate":"2021-04-08T20:05:45.913Z","likeCount":42,"name":"Slazzer","publisherHandle":"slazzer","publisherId":"906305096077307337","publisherName":"David J Turner","runCount":5664,"viewCount":6832},{"description":"<p>Export any vector asset to React or Vue components, Sass (or plain CSS), TailwindCSS, or an Android Archive (beta) or iOS Asset Catalog (beta). Edit the code templates to tailor the output to your preferences and development dependencies. For React and Vue, convert related assets to single components with custom props.</p><p><br></p><p><strong>Note</strong>: <strong>Export Code is now completely free!</strong> A license key used to be required for unlimited exports, but now there are no restrictions. Read more about the plugin below.</p><p><br></p><h2>Component Variants</h2><p><br></p><p>With component exports (React and Vue), asset families can be combined into a single component with auto-created variants to pass as props. (e.g. up, right, down, and left arrow icons can be converted to a single Arrow component). There is no limit to the amount of variant types and setup is easy: all that’s required is a specific layer-naming scheme. <em>Note that variants are based on a specific layer-naming scheme, not Figma’s official variant feature.</em></p><p><br></p><p><a href=\"https://oombla.com/documentation/component-variants\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">More</a></p><p><br></p><h2>Customizable Templates</h2><p><br></p><p>The exported code works entirely as-is without any modifications required. But if desired, you have the ability to customize the code output to your liking. The templates are powered by lodash’s templating system are extremely flexible.</p><p><br></p><p><a href=\"https://oombla.com/documentation/templates\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">More</a></p><p><br></p><h2>Asset Manifest</h2><p><br></p><p>Preview the exported assets’ generated code, variant props, vector/raster check, and if they are a single color before downloading. Great for quality control when it comes to large asset sets like icons and perfect for quickly grabbing the code for a single asset.</p><p><br></p><h2>Easy to Use</h2><p><br></p><p>Programs like this can quickly become complicated to use. I’ve done my best to structure it in a way to where a normal asset setup can be exported without having to make a bunch of structural changes. If you have an organized page of assets (like a collection of icons for example) chances are you will need to make minimal changes in order to export the assets.</p><p><br></p><p>The main prerequisite is that all of your assets need to be collected into a single Frame (or Component or Instance). You can then select this Frame and all of the child nodes (basically anything besides Text layers) will be exported as individual assets.</p><p><br></p><p>The best way to experiment is to just install the plugin and give it a go.</p><p><br></p><p><a href=\"https://oombla.com/documentation/basic-operation\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">More details on how the plugin operates</a></p><p><br></p><h2>Support</h2><p><br></p><p>Running into trouble? Email: hey@oombla.com</p>","id":"908439943539574941","installCount":4861,"lastUpdateDate":"2021-07-13T10:56:54.809Z","likeCount":37,"name":"Export Code","publisherHandle":"oombla","publisherId":"908433644799830804","publisherName":"Oombla","runCount":3894,"viewCount":9358},{"description":"<p>Ever needed that one device mockup but you couldn’t find it or didn’t have enough time to create it? We’ve got you covered!</p><p><br></p><p>Just install our plugin and generate mockups for all your UI &amp; presentation needs instantly.</p><p><br></p><p><strong>Get started in 3 simple steps:</strong></p><ol><li>Launch up our plugin</li><li>Pick from our catalogue of 3D mockups</li><li>Select a frame and hit export</li></ol><p><br></p><p>We even let you <strong>customise each mockup</strong> to fit your aesthetic right from the colors all the way to the lighing.</p>","id":"908688914070762787","installCount":32338,"lastUpdateDate":"2020-11-12T12:09:22.068Z","likeCount":240,"name":"Figmockups","publisherHandle":"realitytools","publisherId":"908389698557358890","publisherName":"Reality.tools","runCount":27552,"viewCount":51341},{"description":"<p><strong>Export your designs to ProtoPie and turn them into highly interactive prototypes.</strong></p><p><br></p><p>First time? Try the ProtoPie plugin for Figma with this <a href=\"https://r.protopie.io/en/figma-plugin/marketing-file/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">example file</a>.</p><p><br></p><p>Select the frames or layers you would like to export to ProtoPie and at the click of a button, you can bring your designs into ProtoPie at lightning speed.</p><p><br></p><p>ProtoPie would import top-level frames as scenes, and objects with the same layer structure and positioning as in Figma.</p><p><br></p><p>Then it's just a matter of adding powerful interactions to your designs. Think of dynamic interactions involving conditions, formulas, and variables, for example. Add another level of realism by including text input, camera, voice, media playback to your prototypes. Or even make prototypes that can communicate with each other. The possibilities are endless.</p><p><br></p><p>The ProtoPie plugin for Figma requires you to use ProtoPie 5.2 or higher.</p><p><br></p><p>ProtoPie is available on macOS &amp; Windows. Try ProtoPie for free at <a href=\"https://www.protopie.io/?utm_source=figm&amp;utm_term=community-plugin\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://protopie.io</a>.</p>","id":"908870217222043020","installCount":44078,"lastUpdateDate":"2022-03-03T06:58:05.022Z","likeCount":515,"name":"ProtoPie","publisherHandle":"ProtoPie","publisherId":"908870830524815938","publisherName":"ProtoPie","runCount":41078,"viewCount":83592},{"description":"<p>Change multiple values of nodes that show \"Mixed\" in the GUI with custom calculations.</p><p><br></p><p>Select the nodes you want to change and apply the changes of your calculations.</p><p><br></p><ul><li>It resolves the limitation of applying changes to nodes which have mixed property values.</li><li>It provides usable variables from the node's properties value. You can use the width of the node as a multiple in your changes.</li><li>It provides a way to apply changes to nodes in a group, without affecting those individual elements. You do not have to create a new group to modify the elements, since doing so would extract those nodes from their respective group(s).</li></ul>","id":"909572090031216315","installCount":154,"lastUpdateDate":"2020-11-23T15:03:28.113Z","likeCount":5,"name":"Relative changes","publisherHandle":"compose_us","publisherId":"912719758069763541","publisherName":"compose.us","runCount":117,"viewCount":857},{"description":"<p>Style Station Plugin plugin can take your SASS or LESS files with CSS rules and create the same styles in Figma. Or update the existing.</p><p><br></p><p><strong>COMPATIBLE WITH FIGMA DESKTOP APP OR CHROME BROWSER. DOESN'T WORK IN SAFARI</strong></p><p><br></p><p><a href=\"https://medium.com/@max_39664/style-station-5d5e81998e33\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\"><strong>Check this article</strong></a><strong>&nbsp;to get a detailed overview with examples.</strong></p><p><br></p><p>Currently it supports only text and paint styles.</p><p><br></p><p>Send any feedback to <a href=\"mailto:mbazarov@gmail.com\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">mbazarov@gmail.com</a> and</p><p><a href=\"https://www.paypal.com/paypalme/maxbazarov\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">paypal.me</a></p><p><br></p><p>More information -</p><p><a href=\"https://maxbazarov.github.io/style-station-plugin/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://maxbazarov.github.io/style-station-plugin/</a></p><p><br></p><p>Useful links:</p><p>SASS format: <a href=\"https://sass-lang.com/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://sass-lang.com</a></p><p>LESS format <a href=\"https://lesscss.org\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://lesscss.org</a></p>","id":"909833368999832351","installCount":521,"lastUpdateDate":"2022-05-25T19:40:42.894Z","likeCount":12,"name":"Style Station","publisherHandle":"mbazarov","publisherId":"1662371","publisherName":"Maxim Bazarov","runCount":428,"viewCount":2184},{"description":"<p>Can't snap gradient points to the grid or to integer angles?</p><p><br></p><p>This plugin will help you do this, and even more, you can evenly distribute points or round float values. </p><p>The Total value is saved for each node with gradient fills.</p><p><br></p><p><em>Support for gradient strokes soon!</em></p>","id":"910239409824697350","installCount":1447,"lastUpdateDate":"2020-11-19T09:28:15.537Z","likeCount":32,"name":"Precise Gradients","publisherHandle":"neelts","publisherId":"277703","publisherName":"Neil Akhmetov","runCount":1059,"viewCount":2720},{"description":"<p><strong>Now you can mix multilingual text, styled with the fonts of your choice, with one click!</strong></p><p><br></p><p>Figma doesn’t provide any function that replicates font stacks, so it’s very time-consuming for the designer to work with multilingual text, when you want to set up different fonts for different languages. We are a design agency in Shanghai, China, called Digital Creative, and we created this Figma plugin to help you gain more control over your typography, making it look better while minimal effort is needed! Simply set up the font styles (plus the font color, opacity, and weight) you want for different languages, and with one click, they will be applied to all the text in one or multiple groups that you’ve selected.</p><p><br></p><p>到目前为止，Figma 始终缺失与 CSS font stacks 特性类似的字体自动适配功能，所以当设计师需要把同一页面上的不同语言文本分别设置为不同字体的时候便会非常费时费力。我们是一家位于中国上海的设计机构 —— Digital Creative，我们设计了这款多语言字体混排插件。有了这款插件，您只要在操作框内设置好各语言对应的字体（更可调节字重、字体颜色、字体透明度）即可一键应用至一个或多个文本框内！您不再需要因为繁琐的操作而妥协于使用单一字体，以及不再困扰于系统自带的中文字体选择少、中文字体配套的数字和英文字符设计不好看等问题。</p><p><br></p><p><strong>Highlighted Features&nbsp;</strong></p><p><strong>功能特点</strong></p><p><br></p><ul><li>One-click to apply mixed fonts (as well as font color, opacity, and weight) to different content types (languages &amp; digits).</li><li>Autocompletion to suggest fonts quickly when typing in font names.</li><li>Ability to range select groups on the frame to apply the font setup to all the text selected.</li><li>Currently supports 6 languages, including English, Chinese, Portuguese, Japanese, Russian, Korean， and Thai.&nbsp;</li></ul><p><br></p><ul><li>一键针对不同文本类型（例：中文/英文/数字）进行不同的字体应用（更可调节字重、字体颜色、字体透明度）。</li><li>支持快速字体搜索， 自动关出现联字体。</li><li>支持将同一设定一键应用到多个不同的图层/文本框。</li><li>文本匹配支持 6 种语言（英语、中文、葡萄牙语、日语、俄语、韩语、泰语）及内容类型（数字等）。</li></ul><p><br></p><p><strong>How to Use</strong></p><p><strong>使用方法</strong></p><p><br></p><ol><li>Install Figma-plugin-font-mixer into your Figma.</li><li>Select your preferred font, font-weight, color, and opacity, for each language &amp; digits.</li><li>Select a node or range select nodes that contain editable text, and click the apply button to apply all the selected font styles to the corresponding content types.</li><li>Ta-dah! Done.</li></ol><p>&nbsp;&nbsp;</p><ol><li>下载安装 Figma-plugin-font-mixer 到您的 Figma。</li><li>在插件操作框内为不同文本内容（语言和数字）选择您偏好的对应字体，字重，字体颜色，和字体透明度。</li><li>选择一个或多个编辑框，点击应用键，即可按照您刚刚的偏好设置一键应用。</li><li>恭喜你完工！</li></ol><p><br></p><p><strong>Feedback</strong></p><p><strong>问题反馈</strong></p><p><br></p><p>Got a problem? Please submit your feedback here:</p><p>在使用过程中遇到了问题？请在这里提交你的反馈：</p><p><br></p><p><a href=\"https://github.com/dcasia/figma-plugin-font-mixer/issues\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://github.com/dcasia/figma-plugin-font-mixer/issues</a></p><p><br></p><p><br></p>","id":"910385004596112467","installCount":1685,"lastUpdateDate":"2022-05-24T09:27:30.480Z","likeCount":38,"name":"Multilingual Font Mixer 多语言字体混排","publisherHandle":"DigitalCreative","publisherId":"903194051602762238","publisherName":"Digital Creative","runCount":1200,"viewCount":3583},{"description":"<p>With Emoji ♡ Reactions, you can leave emoji, stickies and feedback though a variety of responses directly in your Figma documents in real time. Celebrate your teammates' work! ...or troll them with panache.</p><p><br></p><p>Emoji ♡ Reactions includes: emoji stickers, live emoji reactions, sticky notes, and chat bubbles.&nbsp;</p><p><br></p><p>Enjoy!</p><p><br></p><p><strong>For maximum efficiency, add a Keyboard Shortcut for the Figma <em>Desktop</em> App</strong></p><ol><li>Mac: Open System Preferences ▸ Keyboard ▸ Shortcuts ▸ App Shortcuts.&nbsp;</li><li>Add \"Emoji Reactions\" (for Figma / All Apps) and set it to \"Cmd-Opt-M\" (recommended)</li><li>Emote with abandon.</li></ol><p><br></p><p><strong>Source Code:</strong> <a href=\"https://github.com/alcor/figma-emoji-reactions\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://github.com/alcor/figma-emoji-reactions</a></p>","id":"910403390914550873","installCount":11186,"lastUpdateDate":"2022-03-27T06:32:12.185Z","likeCount":90,"name":"Emoji ♡ Reactions","publisherHandle":"alcor_n_stakes","publisherId":"916929054144402712","publisherName":"Jay & Nicholas","runCount":14068,"viewCount":14666},{"description":"<p>Create 3D anaglyphs from your layers! This plugin uses the order of your layers to apply a 3D effect. You can adjust the depth – how far \"in\" and \"out\" – using the slider.</p><p><br></p><p><strong>You will need red/cyan Anaglyph glasses to see the result in 3D! </strong>You can buy pairs online or check in the back of 3d puzzle books or comics.</p><p><br></p><p><strong>Tips</strong></p><p>The plugin must be run on a single frame containing layers (each layer represents a depth in 3D)</p><p><br></p><p>Use your full screen and increase the brightness for the best possible effect.</p><p><br></p><p>If the effect doesn't look right, it might be too much depth - try reducing the depth with the sliders.</p><p><br></p><p>Fewer layers or groups will result in a more pronounced effect. If there's too many layers, you may not notice the effect (or it'll look really cool - depends on the content).</p><p><br></p><p>Due to the blend modes applied, masks and other advanced effects may not produce the result you expected - try flattening masks or turning off layer blend modes.</p><p><br></p><p>Extended use of the glasses can be jarring or even cause headaches. If the glasses make you feel uncomfortable at all, <strong>take them off immediately.</strong></p><p><br></p><p><strong>FAQ</strong></p><p><em>The 3D effect looks backwards!</em></p><p>It's possible your layers are in reverse order (or maybe you have your glasses on backwards?) You can push the sliders to the opposite ends to reverse the effect.</p><p><br></p><p><em>Why is the width of the 3D image width a little smaller?</em></p><p>To create the 3D effect, layers must be moved to the right and left, this means a small portion of the edge of the image won't be in 3D - you can turn off clipping if you want to see the full image.</p><p><br></p><p><strong>Next Release</strong></p><ul><li>Open source the code</li><li>Allow customization of colors</li><li>Stereograms for VR headsets and Cardboard</li></ul>","id":"910626526043566308","installCount":5615,"lastUpdateDate":"2020-11-20T07:03:33.736Z","likeCount":72,"name":"Glyphy","publisherHandle":"adispezio","publisherId":"3035911","publisherName":"Anthony DiSpezio","runCount":4050,"viewCount":10941},{"description":"<p>Design and export responsive, production ready HTML emails from Figma.</p><p><br></p><h2>Features</h2><p><br></p><ul><li>Use instantly in Figma; no other websites, apps or APIs required.</li><li>Quickly design emails using dozens of included common components.</li><li>Add your own re-usable components with the custom component builder.</li><li>Customise your text, images, styles and auto-layout settings with Figma.</li><li>Easily specify responsive design overrides (per layer) for mobile.</li><li>Translate and localize your Figma email designs via Excel (XLSX) file export/import.</li><li>Dark mode custom color overrides and image swaps (for <a href=\"https://www.caniemail.com/features/css-at-media-prefers-color-scheme/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">supported</a> clients).</li><li>Supports exporting animated GIFs from Figma layers in email designs.</li><li>Preview your real HTML email at different device sizes directly inside the plugin.</li><li>Supports Google Fonts (with web safe fallbacks for <a href=\"https://www.caniemail.com/search/?s=font\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">unsupported</a> clients).</li><li>No coding required; export responsive, production ready HTML with one-click.</li><li>Integrations for MailChimp, Klaviyo, SendGrid, Postmark, HubSpot, ActiveCampaign, Braze, Email on Acid, Dotdigital, Iterable.</li><li>Automatically generates a preview page with all of your HTML emails.</li><li>Optionally export developer friendly MJML source code.</li><li>Download the exported .zip file to your computer from Figma.</li></ul><p><br></p><h2>To use Emailify</h2><p><br></p><ul><li>Install Emailify and run the plugin in your Figma file.</li><li>Follow the prompt to add a blank Emailify frame.</li><li>Click on any component to add it to your Emailify frame.</li><li>Use Figma to modify a component's content and styles.</li><li>Click the <strong>Settings</strong> button to configure a selected layer.</li><li>Click <strong>Export</strong> to export your email design(s) to HTML.</li></ul><p><br></p><h2>Documentation &amp; Video Tutorials</h2><p><br></p><p>For plugin documentation, please visit <a href=\"https://docs.hypermatic.com/emailify/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://docs.hypermatic.com/emailify</a></p><p><br></p><h2>Bug Reports</h2><p><br></p><p>Emailify is pretty new (like a baby panda); so if you do notice an obvious bug, please get in touch at <a href=\"https://hypermatic.com/contact\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://hypermatic.com/contact</a> and we'll try to publish a fix for it!</p><p><br></p><h2>License</h2><p><br></p><p>After you've tried exporting HTML emails from your Figma designs with Emailify 15 times, you'll be asked to enter your license key. Your license key will allow you or your team to export an unlimited amount of HTML emails from Figma using Emailify.</p><p><br></p><p>To purchase a license or to find out more, please visit <a href=\"https://hypermatic.com/emailify/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://hypermatic.com/emailify</a></p>","id":"910671699871076601","installCount":25111,"lastUpdateDate":"2022-07-27T00:17:34.563Z","likeCount":412,"name":"Emailify HTML Email Builder","publisherHandle":"hypermatic","publisherId":"247","publisherName":"Hypermatic","runCount":22405,"viewCount":39325},{"description":"<p>Russian designer Sergey Chikin has been drawing icons for over three years, adding new icons regularly. Icons pass through a ruthless social filter. Bullshit doesn’t get into the set.</p><p><br></p><p><strong>Chikin Icons For Everything</strong> is a unique handcrafted icon set for everything: heart eyes skull — check, alien ice cream — no problem, Freddy Krueger — you got it. First available in Figma and exclusively in our plugin.</p><p><br></p><h2>Features</h2><p>🎁 <strong>228 free icons </strong>for personal and commercial use. These are popular user interface pictographs such as arrows, contacts, carts, calendars, directory, etc.</p><p><br></p><p>🎉 <strong>Over 1400 icons</strong> are available by lifetime commercial licenses. This includes all future icons.</p><p><br></p><p>👀 <strong>20 diverse categories</strong> to choose from. Food icons that are perfect for the restaurant or party menu, clothing item pictograms for organizing wardrobe cabinets, images of animals to be used for stickers and kids games.</p><p><br></p><p>📐 <strong>Available in SVG</strong>, including free icons. Resize them with no quality loss.</p><p><br></p><h2>Team</h2><p><a href=\"http://sergeychikin.ru\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">Sergey Chikin</a>, icons author</p><p><a href=\"https://ilyabirman.net\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">Ilya Birman</a>, plugin art director</p><p><a href=\"https://twitter.com/EKhomutenko\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">Evgeny Khomutenko</a>, designer</p><p><a href=\"mailto:fryngies@tomengine.ru\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">Dmitry Gutman</a>, developer</p><p><a href=\"mailto:dk@itkur.ru\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">Denis Kosyakov</a>, project manager</p><p><a href=\"mailto:amosova.com@gmail.com\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">Irina Ponomar</a>, editor</p><p><br></p><p>Have something to suggest or complain about? Feel free to <a href=\"mailto:chikin.icons@gmail.com\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">contact us</a>.</p><p><br></p><p>Follow us on <a href=\"https://twitter.com/ChikinIcons\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">Twitter</a> and discover new icons every day before they appear in the plugin.</p><p><br></p><p>Made in <a href=\"https://bureau.rocks\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">Bureau Gorbunov School</a>, 2020.</p>","id":"910824263334396226","installCount":4411,"lastUpdateDate":"2021-06-03T17:07:25.749Z","likeCount":73,"name":"Chikin Icons For Everything","publisherHandle":"chikin_icons","publisherId":"906631248624844165","publisherName":"Chikin Icons For Everything","runCount":3704,"viewCount":7610},{"description":"<p>Artboard Tricks contains a set of utilities for working with top-level frames (i.e. artboards). Current features include:</p><p><br></p><ul><li>Rearrange your artboards into a grid</li><li>Fit artboards to their contents (with padding)</li></ul><p><br></p><p><a href=\"https://github.com/romannurik/figma-artboardtricks\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">See the code or file a bug on GitHub</a></p>","id":"911261236876701307","installCount":1137,"lastUpdateDate":"2022-07-20T19:57:41.160Z","likeCount":24,"name":"Artboard Tricks","publisherHandle":"romannurik","publisherId":"1338861","publisherName":"Roman Nurik","runCount":1139,"viewCount":2490},{"description":"<p>Contrast lets you quickly run a AA or AAA type contrast report on all text across all your artboards at once. Simply select a few layers and run the command to see your report.</p><p><br></p><p><a href=\"https://github.com/romannurik/Figma-Contrast\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">See the code or file a bug on GitHub</a></p>","id":"911262488575486588","installCount":5099,"lastUpdateDate":"2022-07-20T20:03:36.134Z","likeCount":36,"name":"Contrast","publisherHandle":"romannurik","publisherId":"1338861","publisherName":"Roman Nurik","runCount":6717,"viewCount":5096},{"description":"<p>Or <strong>RALF </strong>for short, will remove any instance of Auto Layout found in the selected frames and all their children frames.</p><p><br></p><h2><strong>How to use RALF ❓</strong></h2><ol><li>Select one or more layers;</li><li>Run plugin;</li><li>RALF will automatically add to the selection all nested Frames and Main Components;</li><li>The plugin will remove all instances of Auto Layout from that selection.</li></ol><p><br></p><h2><strong>Use Cases 🔨</strong></h2><ul><li>Clearing up one or more Frames of several Auto Layout instances;</li><li>Starting over a complex construction of Auto Layout;</li><li>Prep a file to apply the latest Auto Layout update.</li><li>Anything else you find it useful for!</li></ul><p><br></p><h2><strong>In Detail 🔎</strong></h2><ul><li>Any type of layers can be selected, the plugin will then look for Frames or Main Components within that selection;</li><li>A Main Component will have its Auto Layout removed, an Instance will not;</li><li>The operation time will increase if a large amount of Frames or Main Components is selected, and/or found within the user selection;</li><li>The plugin will measure the success of the operation by showing how many instances of Auto Layout were removed.</li></ul><p><br></p><p>❤ Remove Auto Layout Faster? <a href=\"https://www.buymeacoffee.com/ruipcabrinha\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Buy me a coffee</a>!</p>","id":"911626989157564204","installCount":1545,"lastUpdateDate":"2021-04-21T16:46:22.368Z","likeCount":37,"name":"Remove Auto Layout Faster","publisherHandle":"rui_p_cabrinha","publisherId":"1001403","publisherName":"Rui P. Cabrinha","runCount":1278,"viewCount":2235},{"description":"<p>A tiny Figma plugin to generate a JSON file containing style property information of the shape selected and displaying content from an API.</p>","id":"912001728168418236","installCount":651,"lastUpdateDate":"2020-11-22T17:45:50.952Z","likeCount":7,"name":"JSON Exporter","publisherHandle":"smartcrash","publisherId":"1767462","publisherName":"smartcrash","runCount":844,"viewCount":1893},{"description":"<p>It's FREE now! Remove background from images automatically. Just by one click and few seconds. Save your time!</p><p><br></p><p>Learn more about BENZIN at <a href=\"https://benzin.io/#about-service\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">https://benzin.io/#about-service</a></p><p><br></p><p>NOTE: You will need a <a href=\"https://benzin.io/account\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">benzin.io</a> account for this plugin.</p><p><br></p><p>See you!</p>","id":"912436486778130560","installCount":16484,"lastUpdateDate":"2021-03-30T20:00:46.323Z","likeCount":110,"name":"BENZIN - remove background for free","publisherHandle":"kk_natiwi","publisherId":"910300749430212083","publisherName":"Kirill Kulakov","runCount":17237,"viewCount":13897},{"description":"<h1>All your config belongs to us</h1><p>This plugin imports all your Tailwind colors, fonts, grids and shadows to Figma.</p><p><br></p><h1>Instructions</h1><ol><li>Generate a Tailwind JSON file with <code>npx tailwind.json</code></li><li>Load the file in the plugin and follow the instructions</li><li>Enjoy them stylez!</li></ol><p><br></p>","id":"912754776765151505","installCount":358,"lastUpdateDate":"2021-02-18T11:37:21.829Z","likeCount":4,"name":"Tailwind Imports","publisherHandle":"simpelism","publisherId":"510948","publisherName":"Joel Sandén","runCount":295,"viewCount":1430},{"description":"<p>Ruri Ruri is an single click artwork generator, that will allow you to:</p><ul><li>generate unlimited editable artworks within seconds</li><li>use predefined shapes or use your own</li><li>randomise every aspect of shape - size, ratio, position, color, blend mode and more</li><li>discover new creative directions</li><li>scale your brand visual library</li></ul><p><br></p><p>Upcoming features:</p><ul><li>new layouts</li><li>add more colors</li></ul>","id":"912763956481263896","installCount":8955,"lastUpdateDate":"2021-01-17T20:30:03.546Z","likeCount":189,"name":"Ruri – Artwork Generator","publisherHandle":"klavs","publisherId":"1194976","publisherName":"KB","runCount":6983,"viewCount":18964},{"description":"<p>With ensa.io you can link colors together, that allows you to update a whole document's color scheme by changing only a single color.</p><p><br></p><h2>Nice, how does that work?</h2><p><br></p><p>Easy:</p><ol><li>create an account at <a href=\"https://ensa.io\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">https://ensa.io</a> (no worries, it's free).</li><li>in ensa.io create a theme and add some nice colors to it.</li><li>load your theme in Figma and use your colors.</li></ol><p><br></p><p>You can learn more about using Figma with ensaio by accessing this page: <a href=\"https://ensa.io/third_party\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">https://ensa.io/third_party</a></p><p><br></p><h2>Ensa.io helps you do so much stuff:</h2><p><br></p><ul><li>keep a color always readable against another.</li><li>work and convert between RGB, CMYK, HSL, HSV, LAB, XYZ.</li><li>extract a palette from an image.</li><li>export a color scheme to ASE and CSS.</li><li>mix colors.</li><li>search for color schemes in a range of hues, similarity or simply by its description ex.: \"antique light green\".</li><li>discover the work of other people.</li></ul>","id":"913044767339356560","installCount":1179,"lastUpdateDate":"2020-11-24T13:54:37.324Z","likeCount":23,"name":"ensaio","publisherHandle":"ensaio","publisherId":"910211721682808056","publisherName":"ensaio","runCount":1175,"viewCount":3533},{"description":"<p>Gives you ultimate control over nested instances, tweak ◇s around without detaching.</p><p><br></p><p>👉 <a href=\"https://www.youtube.com/watch?v=DGm_jt7Lync\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Video Tutorial</a>  </p><p><br></p><p>Work best on instances that's using <strong>Auto-Layout V4.0</strong></p><p><br></p><p>This plugin is inspired by <a href=\"https://www.figma.com/@g\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Gleb</a>'s Master plugin</p><p><br></p><h2><strong>Major Update Highlights:</strong></h2><p><br></p><p><strong>Thursday, May, 26th, 2022</strong></p><ul><li>Brought back the seamless slot edit functionality, and made it more bug-prove, also changed the matching rule to ◇'s ❖ name must include 'slot'(case insensitive).</li></ul><p><br></p><p><strong>Sunday, May, 22th, 2022</strong></p><ul><li>Added the ability to assimilate nearby instance by pressing the directional arrow button while holding ⌥</li></ul><p><br></p><p><strong>Saturday, May, 21th, 2022</strong></p><ul><li>Rewrote the whole plugin using React</li><li>Fixed all known bugs</li><li>Reworked algorithms</li><li>Supports multi-copy and multi-paste</li><li>Supports Dark mode</li></ul><p><br></p><p><strong>Monday, September 27th, 2021</strong></p><ul><li>Added support for \".slot\" naming</li></ul><p><br></p><p><strong>Sunday, September 26th, 2021</strong></p><ul><li>Added the ability to Swap the main components on 2 instances only, triggered by clicking on the arrow button while holding down ⌥(alt) key</li></ul><p><br></p><p><strong>Wednesday, September 15th, 2021</strong></p><ul><li>Added Mutual variants</li><li>Added ability to paste Component only</li></ul><p><br></p><p><strong>Friday, September 10th, 2021</strong></p><ul><li>Added Seamless workflow with ◇Slot</li></ul><p><br></p><p><strong>Thursday, August 5th, 2021</strong></p><ul><li>Now the pasted instance will take on the former instances' auto layout attributes</li></ul><p><br></p><p><strong>Saturday, May 1st, 2021</strong></p><ul><li>Copy is now stored in the plugin, you can close the plugin without losing your last copy.</li><li>Minor UX improvements</li><li>Added support for setting up \"Table (Row Based)\"</li></ul><p><br></p><p><strong>Tuesday, March 29th, 2021</strong></p><ul><li>Added the ability to quickly assimilate adjacent instance, triggered by clicking on the arrow button while holding down ⌥(alt) key</li></ul><p><br></p><p><strong>Tuesday, March 9th, 2021</strong></p><ul><li>Added the ability to edit a instance in place (locally)</li><li>Fixed some layer's visibility issue.</li></ul><p><br></p><p><strong>Thursday, February 16th, 2021</strong></p><ul><li>Addressed an edge case where missing fonts could cause fatal runtime errors</li><li>Addressed an edge case where hidden layers could cause unbelievable slowness</li></ul><p><br></p><p><strong>Thursday, February 13th, 2021</strong></p><ul><li>Improved UI Logic</li></ul><p><br></p><p><strong>Thursday, February 11th, 2021</strong></p><ul><li>Rewrote the algorithm, 5x overall performance improvement on average, and up to 20x more responsive.</li><li>Fixed a bug where the auto-layout resizing mode and paddings would not be transferred. Now everything works as expected.</li></ul><p><br></p><h2><strong>Feature Roadmaps:</strong></h2><ul><li>Finer control over which property to be transfered.</li></ul>","id":"913055393462842774","installCount":3377,"lastUpdateDate":"2022-06-14T17:00:26.126Z","likeCount":273,"name":"Instance Utils","publisherHandle":"MrBiscuit","publisherId":"1241","publisherName":"Mr.Biscuit","runCount":2991,"viewCount":9877},{"description":"<h2><strong>Create chatbots with Figma Components:</strong></h2><p><br></p><ol><li>Install the plugin and start easily by <a href=\"https://www.figma.com/community/file/856291902078612163/Bot-Studio?fuid=730490246643163733\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">duplicating our <strong>Bot Studio Library</strong> Community File</a></li><li>Run the plugin inside the Duplicated file</li><li>Create a nama account; and safely</li><li><strong>Train AI </strong>for intent detection (request access)</li><li><strong>Publish </strong>the chatbot documented in the file</li><li><strong>Chat </strong>with the published bot</li><li>Change the chat's color and other details with the <strong>NAMA.CHAT</strong> component.</li></ol><p><br></p><p>Feel free to contact us with any questions, suggestions or feedbacks.</p><p><br></p><p>Have fun.</p>","id":"914160257600370667","installCount":1089,"lastUpdateDate":"2021-11-29T15:31:48.353Z","likeCount":35,"name":"Nama Bot Studio","publisherHandle":"nama","publisherId":"2049","publisherName":"Nama","runCount":888,"viewCount":3063},{"description":"<p>Adds page numbers to your frame(s) with optional prefix and suffix.</p><p><br></p><p><br></p><h2>How to use</h2><ol><li>Create text layer with text <em>{p#} within the</em>&nbsp;frame(s) that you want to add page numbers to</li><li>Make sure the text layer is where you want the page number to be</li><li>Complete the configuration below and hit Run</li></ol><p><br></p><p>Pager is an <a href=\"https://github.com/dgngulcan/pager\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">open-source</a> project!</p>","id":"914250706909410339","installCount":2283,"lastUpdateDate":"2022-02-06T03:40:56.826Z","likeCount":23,"name":"Pager","publisherHandle":"dgngulcan","publisherId":"394419","publisherName":"Dogan Gulcan","runCount":2470,"viewCount":4980},{"description":"<p>Set up three types of padding and manage them centrally.</p><p>设置三种 Padding 并集中管理。</p><p><br></p><p>1. Layers name include: $1/$2/$3 (One of them)；</p><p>2. Open “Padding Manager”，set padding and done.</p><p><br></p><p>1. 图层名称包含：$1/$2/$3 (其中之一)；</p><p>2. 打开 Padding Manager，设置 Padding 点击 OK。</p><p><br></p><p><a href=\"https://love.figma.cool/\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">❤️赞助我们</a> | Made by <a href=\"http://figma.cool/\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">Figma.Cool</a></p>","id":"914915344210670876","installCount":559,"lastUpdateDate":"2021-07-08T08:45:18.427Z","likeCount":11,"name":"Padding Manager","publisherHandle":"figmacool","publisherId":"4385338","publisherName":"Figma.Cool","runCount":370,"viewCount":2762},{"description":"<p>Better <strong>SF Symbols</strong> experience, 🕹Tutorial video(00:40) → <a href=\"https://vimeo.com/494657208\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\"><strong>vimeo.com/494657208</strong></a></p>","id":"914943942566576428","installCount":2420,"lastUpdateDate":"2020-12-25T16:44:07.866Z","likeCount":47,"name":"Symbols","publisherHandle":"linci","publisherId":"153547","publisherName":"Linci","runCount":2480,"viewCount":3856},{"description":"<h2><strong>📺 </strong><a href=\"https://youtu.be/9dKERyUiT1c\" rel=\"noreferrer noopener nofollow\" target=\"_blank\"><strong>Demo video on YouTube</strong></a></h2><p><br></p><h2><a href=\"https://emojipedia.org/tips/\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">💡</a> Features:</h2><ul><li>Manipulate an image with many different color adjustments and filters</li><li>Save and load your own presets</li><li>Plugin takes and keeps the original resolution of the image.</li><li>Changes tracking</li></ul><p><br></p><h2><strong>🎨 Color adjustments:</strong></h2><ol><li>Brightness</li><li>Contrast</li><li>Hue</li><li>Channels</li><li>Exposure</li><li>Gamma</li><li>Vibrance</li><li>Tint</li><li>Curves</li><li>Soft Contrast</li></ol><p><br></p><h2><strong>🚥 Filters:</strong></h2><ol><li>Invert</li><li>Mirror</li><li>Noise</li><li>Color Halftone</li><li>Monochrome Halftone</li><li>Blur</li><li>Lens blur</li><li>Sharp</li><li>Edgework</li><li>Threshold</li><li>Pixillate</li></ol><p><br></p><h2><strong>💥 </strong>Upcoming features:</h2><ul><li>Bulge / Pinch warp</li><li>Swirl</li><li>Hexagonal Pixelate</li></ul><h3><br></h3><h3><a href=\"https://emojipedia.org/link/\" rel=\"noreferrer noopener nofollow\" target=\"_blank\"><strong>🔗</strong></a><strong> Links:</strong></h3><ul><li><a href=\"https://www.paypal.com/paypalme/pavellaptev\" rel=\"noreferrer noopener nofollow\" target=\"_blank\"><strong>Support next release</strong></a></li><li><a href=\"https://github.com/PavelLaptev/figma-image-color-correction\" rel=\"noreferrer noopener nofollow\" target=\"_blank\"><strong>GitHub repo</strong></a></li></ul><p><br></p><p><strong>💸 </strong>You can send me your requests <a href=\"mailto:laptev.graphics@gmail.cmo\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">directly on my email</a> or via <a href=\"https://github.com/PavelLaptev/figma-image-color-correction/issues\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">GitHub issues</a></p>","id":"914972720109480252","installCount":22026,"lastUpdateDate":"2021-08-03T00:04:59.028Z","likeCount":420,"name":"Image Editor","publisherHandle":"PavelLaptev","publisherId":"134689","publisherName":"Pavel Laptev","runCount":16892,"viewCount":22974},{"description":"<p>This plugin adds support for variable-width stroke to Figma. To use:</p><p><br></p><ol><li>Draw a stroke with the pen tool. </li><li>Select the stroke. </li><li>Run this plugin. </li><li>Edit the stroke within the plugin window. This lets you adjust the stroke thickness. </li></ol><p><br></p><p>Because Figma plugins cannot directly augment Figma's editing tools, variable-width stroke is only editable within this plugin's window. Once you edit an object using this plugin, the stroke will be \"outlined\" (i.e. be replaced by a fill) when you go back to Figma. It's still possible to edit the variable-width stroke object again after closing the plugin by selecting the object and re-running this plugin.</p><p><br></p><p>More detailed instructions are available in this plugin's help menu.</p>","id":"915785576743284465","installCount":8431,"lastUpdateDate":"2020-12-05T09:51:34.370Z","likeCount":319,"name":"Variable-Width Stroke","publisherHandle":"evan","publisherId":"80028","publisherName":"Evan Wallace","runCount":6065,"viewCount":10616},{"description":"<p>Rename frames from numbers to words.</p><p><br></p><p><strong>Use Case</strong></p><p>Numeric frame names have small hitboxes, and this plugin band-aids the issue by renaming those numbers into words. </p><p><br></p><p><strong>Instructions</strong></p><p>Simply run the plugin if you have frames with numeric names that you want to be converted into words.</p><p><br></p><p><strong>Future Developments</strong></p><p>A UI that expands the use of a number to word algorithm to text layers and other element names.</p><p><br></p><p><a href=\"https://github.com/ygev/onetwo\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">GitHub</a></p>","id":"915797195431763702","installCount":197,"lastUpdateDate":"2020-12-06T05:26:56.499Z","likeCount":6,"name":"OneTwo","publisherHandle":"ygev","publisherId":"782484","publisherName":"Yana Gevorgyan","runCount":232,"viewCount":924},{"description":"<p>This is a simple plugin that allows you to create icon library.</p><p><br></p><ol><li>Drag and drop SVG icons into file</li><li>Select them</li><li>Run the plugin</li><li>BOOM grid</li><li>At this point you can clean up the structure of every icon and apply color styles</li></ol><p><br></p><p>Video tutorial</p><p>https://www.youtube.com/watch?v=jn_gEG_IxlY</p>","id":"915872262120014607","installCount":4548,"lastUpdateDate":"2022-03-18T10:00:54.190Z","likeCount":92,"name":"Icon Grid Maker","publisherHandle":"antonijapek","publisherId":"411930","publisherName":"Antonija Pek","runCount":4405,"viewCount":6489},{"description":"<p>Show size of selected node as a percentage of the frame.</p><p><br></p><p>If you select two elements, you can also see the distance. (Due to the figma plugin development limitation, can't show in canvas.)</p>","id":"916417404234986592","installCount":1205,"lastUpdateDate":"2021-01-08T20:02:42.658Z","likeCount":21,"name":"Show percentage","publisherHandle":"hees","publisherId":"916005515681282672","publisherName":"Heeseok Kim2","runCount":1042,"viewCount":3810},{"description":"<h1><strong>Play Asteroids in Figma with friends! 🚀</strong></h1><p><br></p><p>To create a game, run this Plugin.</p><p><br></p><p>To join a game, run the Plugin while another game is running. The Plugin will automatically find and join a game if one exists in the same Figma file.</p><p><br></p><p><strong>Cooperative game</strong></p><p>Shoot down the asteroids with friends! You can copy+paste asteroids to increase difficulty. Try out these level ideas:</p><p><strong>Level 1 (easy)</strong>: 6 asteroids per player</p><p><strong>Level 2 (medium)</strong>: 10 asteroids per player</p><p><strong>Level 3 (hard)</strong>: 15 asteroids per player</p><p><br></p><p><strong>Competitive game</strong></p><p>Play multiplayer spaceship combat!</p><ol><li>Run Plugin</li><li>Select all asteroids and delete them via Layers Panel</li><li>Let players join game and spread out</li></ol><p>Battle! Last team standing wins</p><p><br></p><p><strong>Create custom worlds</strong></p><p>To create your own worlds, create a Frame and place asteroids as direct children. When the first player goes to run the Plugin, if they have a Frame selected, the Plugin will run using that Frame instead of generating the default world</p><p><br></p><p>Get creative with your asteroid designs. Anything that's a direct child of the world is considered an asteroid (collision detection is done assuming all objects are circles, so you'll want to make them roughly circular)</p>","id":"916835579596798269","installCount":704,"lastUpdateDate":"2022-04-05T00:40:33.351Z","likeCount":31,"name":"Figma Asteroids","publisherHandle":"minigolf2000","publisherId":"98046","publisherName":"Golf Sinteppadon","runCount":692,"viewCount":1767},{"description":"<p>No more manual text layer updates. Just drop your i18n JSON file and update text layers automatically.</p><p><br></p><h1>How it works</h1><ol><li>Name text layers with a dot-notation expression such as&nbsp;<code>apps.welcome.title</code></li><li>Start the plugin and drop or select your JSON file.</li><li>Text layers with names that match what’s in the JSON file will automatically be updated.</li></ol><p><br></p><p>The plugin only accepts the following JSON data structure:</p><pre class=\"ql-syntax\" spellcheck=\"false\">{\n  \"apps\": {\n    \"welcome\": {\n      \"title\": \"Happy new year 2021\",\n      \"subtitle\": \"No more manual text layer updates. Sync your design with your i18n automatically.\",\n      \"cta\": {\n        \"hook\": \"Miso is good for you.\",\n        \"button\": \"START\"\n      }\n    }\n  }\n}\n</pre>","id":"917075243186735492","installCount":229,"lastUpdateDate":"2021-01-03T15:21:42.542Z","likeCount":7,"name":"i18n","publisherHandle":"junichiroar","publisherId":"624537","publisherName":"Jun Ichiro Koyama","runCount":885,"viewCount":1167},{"description":"<p>Allows you to batch edit image filters. Pick a selection of images and adjust their exposure, contrast, or saturation in one step.</p>","id":"917356074044269025","installCount":1032,"lastUpdateDate":"2020-12-19T13:17:26.028Z","likeCount":19,"name":"Batch Image Editor","publisherHandle":"ajobi","publisherId":"3412856","publisherName":"Andrej Bilec","runCount":854,"viewCount":2195},{"description":"<h3>Resize an item to fit its parent’s width, height, or both.</h3><h4><br></h4><h4><strong>Features</strong></h4><p><em>Pretty self-explanitory but for the sake of clarity...</em></p><ul><li>Fit: Resizes the width&nbsp;<em>and</em>&nbsp;height of an item to match its parent's</li><li>Fit Width: Resizes the width of an item to match its parent's</li><li>Fit Height: Resizes the height of an item to match its parent's</li></ul><h4><br></h4><h4><strong>How to use</strong></h4><ol><li>Select an object or multiple objects that have a parent*</li><li>Run the plugin&nbsp;<em>(Tip: use the&nbsp;</em><code><em>⌘/</em></code><em>&nbsp;keyboard shortcut and type \"fit\" to quickly run the plugin from your keyboard)</em></li></ol><p><br></p><p>*<em>A parent can be a frame, component, group, or boolean.</em></p>","id":"917796239623005893","installCount":612,"lastUpdateDate":"2020-12-07T15:18:25.790Z","likeCount":18,"name":"Fitter","publisherHandle":"dannymcclain","publisherId":"7763","publisherName":"Danny McClain","runCount":437,"viewCount":1254},{"description":"<p>Create web, mobile and desktop apps instantly from your Figma Designs with Export Kit.</p><p><br></p><h2><strong>Getting Started</strong></h2><p><strong>* FREE FOR PERSONAL USE *</strong></p><p>Considering you want to convert Figma, we can assume you have your design ready.&nbsp;Read more about the<a href=\"https://exportkit.com/kits/export-kit-tutorials/figma-design-rules\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\"> Figma Design Rules</a> before you begin to avoid errors. Learn more about <a href=\"https://exportkit.com/learn/how-to/using-the-suite/using-export-kit-with-figma\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Using Export Kit with Figma</a> to get started quickly.</p><p><br></p><p><strong>All Tutorials work with both Figma and XD</strong></p><p>HTML Tutorial: <a href=\"https://youtu.be/P6GwyC9cREg\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://youtu.be/P6GwyC9cREg</a></p><p>Responsive Layouts: <a href=\"https://youtu.be/pkfLNWaWmLg\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://youtu.be/pkfLNWaWmLg</a></p><p>Responsive Styles: <a href=\"https://youtu.be/AodXzqSZ6m4\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://youtu.be/AodXzqSZ6m4</a></p><p>Login Forms: <a href=\"https://youtu.be/sK0OXCfe84E\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://youtu.be/sK0OXCfe84E</a></p><p>Android Tutorial: <a href=\"https://youtu.be/QpHZXjNhR98\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://youtu.be/QpHZXjNhR98</a></p><p>XCode Tutorial: <a href=\"https://youtu.be/jZQAbvkOEKg\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://youtu.be/jZQAbvkOEKg</a></p><p>Xamarin Tutorial: <a href=\"https://youtu.be/LPQ4G74GO1Q\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://youtu.be/LPQ4G74GO1Q</a></p><p>React Tutorial: <a href=\"https://youtu.be/e402i79TziQ\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://youtu.be/e402i79TziQ</a></p><p><br></p><h2><strong>Rule 1: No Empty Layers</strong></h2><p>You cannot have empty layers in Export Kit, otherwise the export may have display errors. Here is a list of empty layers:</p><ul><li>A layer with no name</li><li>A layer with no image/shape</li><li>A text layer with no text content</li><li>A folder/group with no child layers</li></ul><p><br></p><h2><strong>Rule 2: Organize Frames, Layers and Folders</strong></h2><p>You should always group your layers into folders if they are related and <em>*name your layers*. </em>Read more about<a href=\"https://exportkit.com/kits/export-kit/export-kit-basics/organize-folders-and-layers\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\"> Organizing Folders and Layers</a> and<a href=\"https://exportkit.com/kits/export-kit/export-kit-tutorials/layer-naming-rules\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\"> Layer Naming Rules</a>.</p><p><br></p><h2><strong>Rule 3: Frames Are *Pages*</strong></h2><p><em>*DO NOT GROUP FRAMES INTO FOLDERS* </em></p><p>You should only add Frames to Level 1 (or the first level within a Page). Export Kit will process Level 1 frames as native pages *only*. If you do not have Level 1 frames then you may get unexpected output results.</p><p><br></p><h2>Rule 4: Use a Background Layer for Folders</h2><p><em>*DO NOT ADD LAYER EFFECTS TO FOLDERS*</em></p><p>Add a&nbsp;<code>Shape Layer</code>&nbsp;to the folder and copy the effects to the shape, this includes&nbsp;<code>Groups</code>,&nbsp;<code>Inner Frames</code>,&nbsp;<code>Components</code>, and&nbsp;<code>Component Instances</code>. This will act as a background to the folder and is supported in almost all environments. Not all environments support folder effects.</p><p><br></p><p>Read our<a href=\"https://exportkit.com/optimization-tips\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\"> Optimization Tips</a> to get detailed examples of user cases and common errors/fixes.</p><p><br></p><p>--</p>","id":"917838882021857002","installCount":25947,"lastUpdateDate":"2022-07-22T00:25:53.031Z","likeCount":124,"name":"Export Kit - Lightning Storm","publisherHandle":"exportkit","publisherId":"898709202591412250","publisherName":"Export Kit","runCount":29731,"viewCount":25684},{"description":"<h2>With Keyboard Doodler, you can draw with your keyboard!</h2><p><br></p><p>Why would I want this? You may ask. Drawing the trackpad is overrated! All the cool kids these days draw with the keyboard!</p><p><br></p><p>This plugin turns your keyboard into a canvas. By simply pressing keys, vector nodes in that key's location appear on the frame. Try it out and see what drawings you can create!</p><p><br></p><p><strong>Tips:</strong></p><p><br></p><p>1. Keyboard Doodler connects the vector points you draw. To end the current vector, press return (↵).</p><p><br></p><p>2. Your drawings are based on the keys' location in the generated keyboard frame. You can rearrange the keys on the generated keyboard to match your keyboard's layout.</p><p><br></p><p>----</p><p><br></p><h6>Developed by Amanda Yeh and Josh Shi | <a href=\"https://github.com/amandayehh/Keyboard-Doodler\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">Github Repo</a></h6>","id":"917914510168637203","installCount":909,"lastUpdateDate":"2020-12-07T23:12:35.933Z","likeCount":16,"name":"Keyboard Doodler","publisherHandle":"amandayeh","publisherId":"535435","publisherName":"Amanda Yeh","runCount":972,"viewCount":3794},{"description":"<p>Dear Figma community,</p><p><br></p><p>We invite you to make the most of UIcode - a <strong>design to code tool</strong> that accelerates your <strong>mobile app development process</strong>.</p><p><br></p><p>UIcode plugin generates clean code of your mobile design right inside Figma within seconds. Just let developers polish it to a flawless mobile app.</p><p><br></p><p>What are you going for?</p><p><br></p><ul><li>Generate code for all screens at once or for each screen individually</li><li>Export all your design assets as a well-organized archive</li><li>Get clean Flutter code perfect to continue building on it</li><li>Your code automatically includes a responsive design</li><li>Download the code within seconds</li><li>Speed up your design handoff</li><li>Finish and launch your mobile app much sooner</li></ul><p><br></p><p>We made it functional, help us make it perfect.</p><p>Your feedback is priceless. Let us ask you for it, sign up on <a href=\"https://www.UIcode.io\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">https://www.UIcode.io</a>.</p><p><br></p><p>Learn more about UIcode at <a href=\"https://www.uicode.io/\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">https://www.UIcode.io</a>.</p>","id":"918076234140513123","installCount":2967,"lastUpdateDate":"2021-08-22T19:54:39.506Z","likeCount":77,"name":"UIcode","publisherHandle":"techsteps","publisherId":"861169445265616946","publisherName":"Techsteps","runCount":1814,"viewCount":8889},{"description":"<p>This plugin helps you to create most common used export settings for iOS PNG icons, including a @2x size and a @3x size.</p><p><br></p><p>Easy to use:</p><p><br></p><p>Select items you wanna export, choose the artboard width, then click the button to add @2x and @3x export settings to them.</p><p><br></p><p>Thanks: @李大猫「iOSPNGExporter」</p>","id":"918334884511290351","installCount":921,"lastUpdateDate":"2020-12-09T03:04:17.650Z","likeCount":5,"name":"Quick iOS Export","publisherHandle":"68c58fde_8837_4","publisherId":"348519","publisherName":"York01","runCount":534,"viewCount":1982},{"description":"<p>This plugin helps calculating the surface area of parts in your document. Whether you're blocking out space in an office floor plan or outlining an architecture project, this will help you make more informed decisions from the start.</p><p><br></p><p>Also included is a tool to resize any drawing (like a floor plan) to the scale you would like to work in (e.g. 1pixel : 1cm).</p><p><br></p><p><strong>Instructions</strong></p><p>Give any rectangle a red stroke, and press \"Calculate\" and the plugin will provide its area in square meters or square feet.</p>","id":"918721846069404848","installCount":843,"lastUpdateDate":"2021-03-10T18:30:44.881Z","likeCount":37,"name":"Area Calculator","publisherHandle":"matthaeus","publisherId":"58634","publisherName":"Matthaeus Krenn","runCount":638,"viewCount":2040},{"description":"<p>Select some layers, run the plugin, set your spacing, hit organise.</p><p><br></p><p>Organiser (or Organizer) if you like your words with zs in them. Is a Figma plugin that will make your files just a little bit better.</p><p><br></p><p>Layers are automatically sorted into grids and rows based on where they are on the canvas. You can change the order of layers with our minimap.</p><p><br></p><p>I was dared to make a plugin in a day by Luis. How did we do that? By being organised of course!!</p><p><br></p><p><em>Disclaimer, it actually took a weekend, because we wanted to add cool features no other plugin had like a draggable minimap.</em></p><p><br></p><p><br></p><p>Created by<a href=\"https://twitter.com/LC_Finch\" rel=\"noreferrer noopener nofollow\" target=\"_blank\"> Luke Finch</a> and <a href=\"https://twitter.com/disco_lu\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">Luis Ouriach</a></p>","id":"918926326416353608","installCount":2266,"lastUpdateDate":"2021-01-13T12:11:05.926Z","likeCount":73,"name":"Organiser","publisherHandle":"Finch","publisherId":"167182","publisherName":"Luke Finch","runCount":2143,"viewCount":7070},{"description":"<p>Tidy Components is a Figma plugin that organizes all of the components and variants in alphabetical order on your page in a tidy manner.</p><p><br></p><h1>Getting Started</h1><p>When you first open the plugin, you are presented with a set of pre-defined parameters that can be used as-is to show you what is possible.</p><p><br></p><h1>Options</h1><ul><li><strong>Direction:</strong> The direction in which the component groups will be laid out.</li><li><strong>Levels: </strong>The hierarchy levels in which your components will be organized.</li><li><strong>Margin: </strong>Distance between each group in pixels.</li><li><strong>Gutter: </strong>Distance between each component.</li><li><strong>Display Title: </strong>The parent category name that will be displayed before each group.</li><li><strong>Rename Duplicates: </strong>If multiple components have the exact same name, they will be renamed with incremental numbers.</li><li><strong>Zoom to Center: </strong>After cleaning up your&nbsp;💩, view will zoom out to show all components.</li><li><strong>Sort Alphabetically: </strong>Tidy will sort your components and variants alphabetically.</li></ul><p><br></p><h1>Found a bug or have an idea?</h1><p>This is a team of&nbsp;one, but if you have any good ideas or constructive feedback, please do not hesitate to share your thoughts&nbsp;<a href=\"https://github.com/cross-team/figma-tidy-components/issues/new\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">by creating a new issue</a>&nbsp;- screen captures are welcomed.</p><p><br></p><h1>Show your support</h1><p>If you find this plugin useful, feel free to&nbsp;<a href=\"https://www.patreon.com/mpaiva\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">buy me a&nbsp;🍺</a>&nbsp;at my Patreon page. Thanks!&nbsp;🙏</p><p><br></p><h1>Contribute</h1><ul><li>Run&nbsp;<code>yarn</code>&nbsp;to install dependencies.</li><li>Run&nbsp;<code>yarn build:watch</code>&nbsp;to start webpack in watch mode.</li><li>Open&nbsp;<code>Figma</code>&nbsp;&gt;&nbsp;<code>Plugins</code>&nbsp;&gt;&nbsp;<code>Development</code>&nbsp;&gt;&nbsp;<code>New Plugin...</code>&nbsp;and choose manifest.json file from this repo.</li><li>Create a Pull Request for your branch</li></ul>","id":"919271598142496265","installCount":1884,"lastUpdateDate":"2020-12-28T20:37:17.605Z","likeCount":36,"name":"Tidy Components","publisherHandle":"marcellop","publisherId":"130798","publisherName":"Marcello Paiva","runCount":1753,"viewCount":5113},{"description":"<p>You no longer have to write lorem-ipsum-text manually and insert images into layouts — Abracadabra will do it for you.</p><p><br></p><p>Name the text layers according to their purpose. For&nbsp;example, call the layer for the phone number $Phone Number, and the layer for the name $Name, and so on.&nbsp;</p><p><br></p><p>You can also name the layer $Photo to insert a random image.</p><p><br></p><p>That's it! — The plugin will insert text and images into these layers.</p><p><br></p><p><a href=\"https://www.figma.com/community/file/1038491777353064705\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Open instruction and sandbox</a></p><p><br></p><p><br></p><p><strong>Available layer names now</strong></p><p>$Photo</p><p>$Name — John Smith</p><p>$First Name — John</p><p>$Last Name — Smith</p><p>$Username — smith</p><p>$Title — Another title here</p><p>$Job — Product Program Technician</p><p>$Email — smith@gmail.com</p><p>$Phone Number — 224-283-1980</p><p>$Country — Macedonia</p><p>$City — New York</p><p>$Zip Code — 50266-5848</p><p>$Address — 51433 Schaefer Station</p><p>$Date — Sep 7 2021</p><p>$Month — November</p><p>$Weekday — Friday</p><p>$Credit Card — 3721-841729-70418</p><p>$Price — $639.00</p><p>$Number — 13</p><p>$Word — Peace</p><p>$Paragraph — random text</p><p>$Time — 00:12 PM</p><p>$Age — 35</p><p>$Help — full list of options</p><p><br></p><p><strong>For German</strong></p><p>$Name_de</p><p>$First Name_de</p><p>$Last Name_de</p><p>$Username_de</p><p>$Job_de</p><p>$Email_de</p><p>$Phone Number_de</p><p>$Country_de</p><p>$City_de</p><p>$Zip Code_de</p><p>$Address_de</p><p>$Date_de</p><p>$Month_de</p><p>$Weekday_de</p><p>$Credit Card_de</p><p>$Price_de</p><p>$Number_de</p><p>$Word_de</p><p>$Paragraph_de</p><p>$Time_de</p><p>$Age_de</p><p>$Help_de — full list of options</p><p><br></p><p><strong>One-time launch</strong></p><p>The plugin will replace the desired layers only once, and then change their names. To do this, create a text layer in the layout with the phrase \"Abracadabra for one time\" and run the plugin.</p><p><br></p><p>————————————————————————————————————————————</p><p><br></p><p>Больше не придётся писать рыбный текст вручную и&nbsp;вставлять изображения в макеты — Абракадабра сделает это за вас.</p><p><br></p><p>Назовите текстовые слои в соответствии с&nbsp;их&nbsp;назначением. Например, слой для номера телефона назовите $Номер телефона, а слой для имени — $Имя, и так далее.&nbsp;</p><p><br></p><p>Также вы можете назвать слой $Фото для вставки случайного изображения.</p><p><br></p><p>Вот и всё! — плагин вставит текст и изображения в&nbsp;эти слои.</p><p><br></p><p><a href=\"https://www.figma.com/community/file/1038491777353064705\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Открыть инструкцию и песочницу</a></p><p><br></p><p><br></p><p><strong>Доступные названия слоёв</strong></p><p>$Фото</p><p>$Полное имя — Василий Пупкин</p><p>$Имя — Василий</p><p>$Фамилия — Пупкин</p><p>$Дата — 21 Сен 2021</p><p>$Ник — pupkin</p><p>$Заголовок — Ещё один заголовок</p><p>$Должность — генеральный операционный дизайнер</p><p>$Почта — pupkin@gmail.com</p><p>$Номер телефона — (963) 520-77-69</p><p>$Страна — Македония</p><p>$Город — New York</p><p>$Индекс — 493329</p><p>$Адрес — 6699 Давыдова пл.</p><p>$Месяц — Апрель</p><p>$День недели — Пятница</p><p>$Номер карты — 4327-4196-0992-0943</p><p>$Цена — 705.00 ₽</p><p>$Число — 13</p><p>$Слово — Мир</p><p>$Абзац — случайный текст</p><p>$Время — 13:13</p><p>$Возраст — 35</p><p>$Подсказка — вывод списка всех вариантов в макете</p><p><br></p><p><strong>Одноразовый запуск</strong></p><p>Плагин заменит нужные слои только один раз, после чего изменит их названия. Для этого создай в макете текстовый слой с фразой «Абракадабра на один раз» и запусти плагин.</p>","id":"919546417582505589","installCount":2234,"lastUpdateDate":"2022-05-23T16:01:54.052Z","likeCount":99,"name":"Abracadabra!","publisherHandle":"milsinery","publisherId":"232442","publisherName":"Vladimir B.","runCount":2251,"viewCount":5882},{"description":"<p>Olive Press is an image compression and exporting tool for Figma. It allows you to export already compressed images directly from Figma. <strong>Olive Press supports the compression, conversion, and export of JPG, PNG, WEBP, and SVG images.</strong></p><p><br></p><h2><strong>Usage</strong></h2><ol><li>Open Olive Press - Image Compression</li><li>Select the layer(s) you'd like to export</li><li>Select the desired image format from the dropdown</li><li>Click the <code>+</code> icon to add the layers</li><li>Adjust the file name, suffix, and scale</li><li>Click <code>Compress</code></li><li>Download the compressed files</li></ol><p><br></p><h2><strong>Support</strong></h2><p>For support, please email support@olivepress.app.</p><p><br></p><p>© 2021 The Seed Guru. All rights reserved.</p>","id":"920429287038206017","installCount":3892,"lastUpdateDate":"2021-05-20T18:20:34.841Z","likeCount":47,"name":"Olive Press - Image Compression","publisherHandle":"alexjvale","publisherId":"2686482","publisherName":"Alex Vale","runCount":4155,"viewCount":8354},{"description":"<p>This was a quick experiment of running a Doom clone game inside Figma.</p><p>Credits goes to https://github.com/carlini/js13k2019-yet-another-doom-clone.</p>","id":"920430871384265794","installCount":71,"lastUpdateDate":"2020-12-14T22:26:16.871Z","likeCount":0,"name":"yet-another-doom-clone","publisherHandle":"mtthp","publisherId":"914508243291567192","publisherName":"Matthieu Petit","runCount":90,"viewCount":279},{"description":"<p>Doom-Like for Figma is inspired by <a href=\"https://twitter.com/WalterStephanie/status/1338596042024103937?s=20\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">this tweet</a> and the <a href=\"https://nicholas.carlini.com/writing/2019/javascript-doom-clone-13k.html\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">great work</a> of Nicholas.</p><p><a href=\"https://twitter.com/intent/tweet?source=webclient&amp;original_referer=https://www.figma.com/community/plugin/920444487404393541&amp;text=A%20Doom-Like%20Plugin%20Game%20for%20Figma%22&amp;url=https://www.figma.com/community/plugin/920444487404393541&amp;related=geoffreycrofte&amp;via=geoffreycrofte\" rel=\"noreferrer noopener nofollow\" target=\"_blank\"><strong>Share it on Twitter</strong></a></p><p><br></p><p>Don't take it as a serious plugin, it is only there to show that with Figma everything is possible thanks to web languages (and WebGL here).</p><p><br></p><p>To play this plugin, use :</p><p>S ⬇️</p><p>W ⬅️</p><p>A ⬆️</p><p>D ➡️</p><p><br></p><p>and your mouse/pointer to aim and shot.</p><p><br></p><p>Please, consider this as an experiment. Depending on your computer, this game can take 1 minute to load and could be a bit laggy, but I made it on my old laptop, you should be fine.</p><p><br></p><p><strong>Have fun!</strong></p>","id":"920444487404393541","installCount":158,"lastUpdateDate":"2020-12-16T10:21:16.063Z","likeCount":7,"name":"Doom-Like Figma","publisherHandle":"geoffreycrofte","publisherId":"923664","publisherName":"Geoffrey Crofte","runCount":204,"viewCount":1208},{"description":"<p><strong>What is Memsource?</strong></p><p>Memsource is the leading AI-powered translation management system (TMS), empowering global companies to streamline and centralize multilingual content creation. Our cutting-edge TMS will help optimize and automate your localization process. Localization is easier, faster, and more cost-effective with Memsource.</p><p>&nbsp;</p><p><strong>Why Figma + Memsource?</strong></p><p>Bring design and localization closer together with our Figma plugin.&nbsp;</p><p>&nbsp;</p><p><strong>Seamless localization</strong></p><p><br></p><p>There’s no need to leave your Figma account to create translation projects in Memsource. Send your designs for translation in just a few clicks, then seamlessly pull translations from Memsource back to Figma when complete.</p><p><br></p><p><strong>Immediate design support with pseudotranslation</strong></p><p>Use the pseudo-translate feature to validate translations in the design phase. Pseudotranslation simulates what your localized text will look like, allowing designers to get an early indication of how translations fit the design–reducing feedback loops.&nbsp;</p><p>&nbsp;</p><p><strong>Save time and money</strong></p><p>Translation memories within Memsource will automatically store all past translations and allow you to reuse them wherever possible, making for faster, cheaper, and more consistent localization. AI-powered machine translation will also help cut costs and speed up the translation process, without compromising quality.</p><p>&nbsp;</p><p><strong>Set up</strong></p><p>The plugin requires Memsource Ultimate or Enterprise edition. Get in touch with<a href=\"https://www.memsource.com/demo/\" rel=\"noreferrer noopener nofollow\" target=\"_blank\"> Sales</a> for licensing questions.&nbsp;</p><p><br></p><p>Installing the plugin is quick and easy. Visit the Memsource<a href=\"https://help.memsource.com/hc/en-us/articles/360018403719\" rel=\"noreferrer noopener nofollow\" target=\"_blank\"> Figma Plugin</a> page for more information.</p>","id":"920629946433721508","installCount":514,"lastUpdateDate":"2021-11-25T13:20:41.871Z","likeCount":12,"name":"Memsource","publisherHandle":"2609cc7a_c033_4","publisherId":"967076955132634421","publisherName":"Memsource Plugin","runCount":448,"viewCount":1413},{"description":"<p>Tidy Ruler is a Figma plugin that can wrap your Figma layers in a configurable ruler with accurate pixel measurements.</p><p><br></p><h1>Getting Started</h1><p>When you first open the plugin, you are presented with a set of pre-defined parameters that can be used as-is to show you what is possible.</p><p><br></p><h1>Options</h1><ul><li><strong>Increment: </strong>The increment of each ruler mark in pixels.</li><li><strong>Offset: </strong>The hierarchy levels in which your components will be organized.</li><li><strong>Color: </strong>The color of the ruler.</li><li><strong>Opacity: </strong>The opacity of the ruler.</li></ul><p><br></p><h1>Found a bug or have an idea?</h1><p>This is a team of&nbsp;one, but if you have any good ideas or constructive feedback, please do not hesitate to share your thoughts&nbsp;<a href=\"https://github.com/cross-team/figma-ruler/issues/new\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">by creating a new issue</a>&nbsp;- screen captures are welcomed.</p><p><br></p><h1>Show your support</h1><p>If you find this plugin useful, feel free to&nbsp;<a href=\"https://www.patreon.com/mpaiva\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">buy me a&nbsp;🍺</a>&nbsp;at my Patreon page. Thanks!&nbsp;🙏</p><p><br></p><h1>Contribute</h1><ul><li>Run&nbsp;<code>yarn</code>&nbsp;to install dependencies.</li><li>Run&nbsp;<code>yarn build:watch</code>&nbsp;to start webpack in watch mode.</li><li>Open&nbsp;<code>Figma</code>&nbsp;&gt;&nbsp;<code>Plugins</code>&nbsp;&gt;&nbsp;<code>Development</code>&nbsp;&gt;&nbsp;<code>New Plugin...</code>&nbsp;and choose manifest.json file from this repo.</li><li>Create a Pull Request for your branch</li></ul><p><br></p>","id":"921064872958554528","installCount":2183,"lastUpdateDate":"2020-12-16T15:49:54.871Z","likeCount":17,"name":"Tidy Ruler","publisherHandle":"marcellop","publisherId":"130798","publisherName":"Marcello Paiva","runCount":2692,"viewCount":5601},{"description":"<p>Import any* of the many popular icon sets that are included in the <code>react-icons</code> library directly in to your Figma file. The icons will be laid out in a grid, componentised and named in a way that makes it clear to your developers what code they need to write to import the icon from the <code>react-icons</code> library on their end.</p><p><br></p><p><a href=\"https://react-icons.github.io/react-icons/\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">https://react-icons.github.io/react-icons/</a></p><p><br></p><p>*The \"Game Icons\" set has been excluded as otherwise the plugin would exceed the maximum plugin size of 15MB.</p><p><br></p><p>Disclaimer: This plugin is not affiliated with the authors of the <code>react-icons</code> library.</p>","id":"921172243620367846","installCount":4004,"lastUpdateDate":"2021-10-06T07:00:24.835Z","likeCount":34,"name":"Import React-Icons","publisherHandle":"portableaccount","publisherId":"913940640025621563","publisherName":"Portable","runCount":3761,"viewCount":5705},{"description":"<p>Quickly create event labels on top of your designs to visually communicate what user actions or events to track. You can easily edit labels, view/hide labels, and export all events as a CSV file.</p><p><br></p><h2><strong>How to create a label:</strong></h2><ol><li>Select the frame or layer you want the event label to outline</li><li>Select “Create Event Label” under the Amplitude Event Planner plugin</li><li>Describe your event with:</li><li>- Event Trigger: when the event should be triggered</li><li>- Name: the name of your event (we recommend a verb + noun format)</li><li>- Description: descriptive details on when the event is triggered</li><li>- Note for Developer: any notes to communicate to the developer, eg. what properties you want to track with the event</li></ol><p><br></p><p>We hope this plugin helps designers bring analytics into their design process and streamlines your analytics planning.</p><p><br></p><p>If you have any questions or feedback, please file an issue on <a href=\"https://github.com/amplitude/amplitude-figma/issues\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">Github</a> or let us know at <a href=\"mailto:platform@amplitude.com\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">platform@amplitude.com</a>.</p><p><br></p><p><strong>Additional Resources:</strong></p><ul><li><a href=\"https://github.com/amplitude/amplitude-figma\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">Source Code</a></li><li><a href=\"https://help.amplitude.com/hc/en-us/articles/115000465251\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">Data Taxonomy Playbook</a></li><li><a href=\"https://developers.amplitude.com/\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">Developers Center</a></li><li><a href=\"https://help.amplitude.com/hc/en-us/articles/360043750992\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">Govern &amp; Taxonomy Article</a></li></ul>","id":"921207224854227439","installCount":661,"lastUpdateDate":"2021-07-01T16:59:00.979Z","likeCount":32,"name":"Amplitude Event Planner","publisherHandle":"amplitudedesign","publisherId":"921249481491405788","publisherName":"Amplitude Design","runCount":538,"viewCount":2605},{"description":"<p>Preview your PDF files in Figma.</p>","id":"921722555476957934","installCount":9281,"lastUpdateDate":"2022-02-10T22:06:52.258Z","likeCount":47,"name":"PDF Viewer","publisherHandle":"girafic","publisherId":"812","publisherName":"Stas Haas","runCount":9485,"viewCount":11017},{"description":"<p>Fit layer to container <strong>width</strong> / <strong>height</strong> / <strong>both</strong>, <strong>margin</strong> supported.</p><p><br></p><h2>Usage:</h2><p>1. If selection's <strong>width &gt; height</strong>, then full width</p><p>2. If selection's <strong>height &gt; width</strong>, then full height</p><p>3. if <strong>width = height</strong>, then full both (and it will have a new name, to keep it as background)</p>","id":"921838657547406144","installCount":2173,"lastUpdateDate":"2022-03-19T19:03:35.121Z","likeCount":138,"name":"Full","publisherHandle":"linci","publisherId":"153547","publisherName":"Linci","runCount":1325,"viewCount":7036},{"description":"<h3><strong>Hi Figmate! This plugin aims to let you define your variables to keep design tokens consistent in your file across time.</strong></h3><h3><br></h3><h3><strong>It complements the existing design variables that Figma manages already well. This is why you will find every property but colors, text styles, effects, and strokes.</strong></h3><h3><br></h3><h3><strong>I use it for both local variables like table columns width and global variables like the spacing between my cards.</strong></h3><h3><br></h3><h3><strong>I hope this plugin will help you in your daily job!</strong></h3>","id":"921872998294164297","installCount":666,"lastUpdateDate":"2021-02-20T22:09:51.489Z","likeCount":34,"name":"Figma Variables","publisherHandle":"giardiv","publisherId":"52569","publisherName":"Vincent","runCount":557,"viewCount":3466},{"description":"<p>How to use:</p><ol><li>Select at least 1 layer</li><li>Go to Plugins -&gt; Android 9-Patch Export</li></ol>","id":"922137845084899222","installCount":1115,"lastUpdateDate":"2020-12-21T10:08:42.511Z","likeCount":9,"name":"9-Patch export","publisherHandle":"denisonchukov","publisherId":"988005","publisherName":"Denis Onchukov","runCount":869,"viewCount":1952},{"description":"<p>Is it possible to copy &amp; paste autolayout parameters alone without other properties? If so then this plugin was a waste of time. If no — enjoy 🥳</p><p><br></p><p><strong>Usage:</strong></p><ol><li>Select one frame / instance / component</li><li>In plugins menu select \"Copy &amp; Paste Autolayout\"-&gt;\"Copy Autolayout\"</li><li>Select another destination frame / instance / component</li><li>In plugins menu select \"Copy &amp; Paste Autolayout\"-&gt;\"Paste Autolayout\"</li></ol><p><br></p><p>I'm not a dev, so might be buggy. In case of emergency drop me a message.</p>","id":"923016403442923783","installCount":462,"lastUpdateDate":"2021-02-25T20:03:42.934Z","likeCount":17,"name":"Copy and Paste Autolayout","publisherHandle":"maxart2007","publisherId":"854706701336009178","publisherName":"Maxim Artyushenko","runCount":359,"viewCount":1097},{"description":"<p>A simple plugin that allows you to warp&nbsp;🌀, bend, and distort vector shapes.</p><p><br></p><h2>Features</h2><ul><li>Grid complexity</li><li>Interpolation levels</li><li>Live changes</li><li>Lock axis while dragging holding \"Shift\"</li></ul><p><br></p><h2>Demo</h2><p><strong> 📺 </strong><a href=\"https://youtu.be/QCHnaXQDLvY\" rel=\"noreferrer noopener nofollow\" target=\"_blank\"><strong>Video on YouTube</strong></a></p><p><br></p><h2>Links</h2><h2><a href=\"https://github.com/PavelLaptev/Figma-Warp\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">Github repo</a></h2><h2><a href=\"https://www.paypal.com/paypalme/pavellaptev\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">Support the plugin</a></h2>","id":"923820065156924054","installCount":33351,"lastUpdateDate":"2021-09-06T23:21:10.033Z","likeCount":265,"name":"Warp It","publisherHandle":"PavelLaptev","publisherId":"134689","publisherName":"Pavel Laptev","runCount":34127,"viewCount":36288},{"description":"<p>Changes positions of frames, components or other objects on canvas by name. Unlike other plugins that only order frames or other layers by name in the layers panel, this plugin can organize them by name on the canvas. However, the plugin will also arrange layers by name if they all belong to one parent element.</p><p><br></p><h2>How to use</h2><ul><li>Select layers you want to sort. Preferably they should belong to one parent but anything will work. Run the plugin, it will sort your layers.</li><li>You can also select nothing, in this case plugin will automatically find all frames (only frames) on the page and sort them.</li></ul><p><br></p><p>If something is broken or you have feedback, feel free to reach out via <strong>support contact</strong> on the right side of this page.</p>","id":"923916009300611791","installCount":2435,"lastUpdateDate":"2022-05-10T02:08:39.051Z","likeCount":80,"name":"Sort on Canvas by Name","publisherHandle":"g","publisherId":"328","publisherName":"Gleb","runCount":2399,"viewCount":5126},{"description":"<p><strong>Steps to use:</strong></p><ul><li>Select the text you want to use as a fill</li><li>Hold down Shift and select the shape you want to fill</li><li>Press the “Create” button </li></ul><p><br></p><p><em>note: the plugin won’t run if you hit the Enter or Return key on your keyboard</em></p><p><br></p><p><strong>For the best results:</strong></p><ul><li>You only select 1 text node and 1 shape before running the plugin</li><li>You use 1 line of text</li><li>You use a closed shape, i.e. you shouldn’t use a line as your shape</li><li>If you use a vector network as your shape, make sure it has a fill before you run the plugin</li></ul><p><br></p>","id":"924187903038977856","installCount":3151,"lastUpdateDate":"2021-01-09T05:44:15.716Z","likeCount":52,"name":"Text Fill","publisherHandle":"brsbl","publisherId":"907695543998804675","publisherName":"Bersabel Tadesse","runCount":2545,"viewCount":7676},{"description":"<p>Make beautiful pie charts for <strong>free</strong></p><p><br></p><p>• Create with your data</p><p>• Clean vectors to work with</p><p>• Easy to customize — each slice is labelled with the value, so it’s easy to find the vector you want to color or re-name!</p><p><br></p><p>Hello 👋  We are Simon &amp; Jean from Canada, the two makers behind Figpie. If you enjoyed Figpie and would like to buy us a coffee, we'd appreciate it. Thanks!&nbsp;</p><p><a href=\"https://www.buymeacoffee.com/figpie\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">https://www.buymeacoffee.com/figpie</a></p><p><br></p><p>For support, visit this link:</p><p><a href=\"https://www.simonyates.ca/figpie\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">https://www.simonyates.ca/figpie</a></p>","id":"924390003304842148","installCount":23284,"lastUpdateDate":"2021-01-17T01:41:24.804Z","likeCount":158,"name":"Figpie","publisherHandle":"cheftechnical","publisherId":"1303119","publisherName":"Simon Yates","runCount":22561,"viewCount":27011},{"description":"<p>Split your design into a carousel or grid easily for social media or onboarding screens.</p><p><br></p><p><strong>How to use this plugin:</strong></p><ol><li>Select a frame/component</li><li>Run the plugin</li><li>Choose <strong>width &amp; height</strong> / <strong>Rows &amp; columns</strong> that you want to split by (For example: 1080x1080 for Instagram carousel)</li><li>Click on 'Add grid' to add a grid that is based on your selection</li><li>Click on 'Split to frames' to split</li></ol><p><br></p><p><strong>Nice tip:</strong></p><ol><li>Set the original frame as component</li><li>Split the frame</li><li>The new frames will be created as 'instances'</li><li>Keep editing the component and all the smaller frames will be updated automatically</li></ol><p><br></p><p><strong>An important note:</strong></p><p>Make sure the original frame's size is a duplication of the values you enter.</p>","id":"924686009846441964","installCount":6010,"lastUpdateDate":"2021-10-09T09:46:37.693Z","likeCount":106,"name":"Split to frames","publisherHandle":"1836422","publisherId":"1836422","publisherName":"Tsurit Ben-Tsur","runCount":5121,"viewCount":8915},{"description":"<p>Creat advanced palettes for all themes of your design system, taking into account color blindness and contrast.</p><p><br></p><p>https://hcleasy.com</p><p><br></p><p><strong>Color Matrix and Automation</strong></p><p>All colors are presented in the form of a matrix. This allows you to create many harmonious palettes for your light and dark themes. You can automatically build Hue, Chroma, and Lightness using Bezier Curves</p><p><br></p><p><strong>Color Blindness and Contrast</strong></p><p>Using the \"Accessibility\" function, you can check the entire color matrix for contrast with one form or another of color blindness</p><p><br></p><p><strong>Adapted Color Space for Humans</strong></p><p>We use the CIELab color space, it allows you to linearly align colors relative to the color perception of a person and the mathematical values ​​of the Hue, Chroma, Lightness axes.</p><p><br></p><p><strong>The best start with the bests</strong></p><p>We suggest you start creating your own palette based on existing ones, from the most popular design systems of the world</p>","id":"926166109013752444","installCount":1676,"lastUpdateDate":"2022-07-25T16:46:21.175Z","likeCount":51,"name":"HCL Easy","publisherHandle":"hcleasy","publisherId":"86329","publisherName":"Aleksei Shaikhelislamov","runCount":1508,"viewCount":3452},{"description":"<p><strong><em>This is a Plugin for 9 slice scaling image from O2 Studio.</em></strong></p><p><br></p><p>The plugin will create a 9 slice scaling component based on the selected image.</p><p><br></p><p>Hope it can help your work! enjoy it :)</p><p><br></p><p>Developer: Liu,Haiyan &amp; Li,Fanghui</p>","id":"926315991491420837","installCount":1754,"lastUpdateDate":"2021-01-22T06:33:42.615Z","likeCount":61,"name":"9 Slice Scaling","publisherHandle":"O2_Studio","publisherId":"926313265769033244","publisherName":"猫酥（刘海岩）-交互设计师-O2","runCount":1462,"viewCount":3374},{"description":"<h2>Find out if your library components are used, in a list of design files.</h2><p><br></p><p><strong>1. How does it work?</strong>&nbsp;</p><p><br></p><ol><li>First, go to your Figma settings and get a personal access token (aka a key which enables you, and only you, to communicate with your files),</li><li>Then, copy / paste the links of both the library and the design files you want to inspect (those are the same links you use when your share a file, using the \"Share\" button)</li><li>After a while, you should then see a list of all instances found in your design file, which components are used, and which aren't. You can click on a component, in order to locate it in your library file (to do so, you must launch this plugin in your library file)</li></ol><p><br></p><p><strong>2. Notes</strong>&nbsp;</p><p><br></p><ul><li>Please note that your personal token won't be shared or used in any way.</li><li>This plugin doesn't modify anything in your design (it only inspects, nothing more)</li><li>You need to be a least a member of a Team, otherwise you can't really use librairies, and this plugin won't be useful</li><li>All the files you can inspect must be created by you, or come from a Team you're a member of</li><li>The bigger the files, the longer you'll have to wait ! So, please be patient sometimes :)</li></ul><p><br></p><p>If you find bugs, possible improvements, please feel free to contact me.</p>","id":"926549834287292156","installCount":323,"lastUpdateDate":"2021-01-26T11:59:57.951Z","likeCount":21,"name":"Ad Lib(s)","publisherHandle":"fabien","publisherId":"383","publisherName":"Fabien","runCount":199,"viewCount":1163},{"description":"<p>Automatically arrange your frames in the left side layer-list based on their position (x, y) on the canvas.</p><ul><li>Arrange from left to right (horizontal arrangement)</li><li>Arrange from top to bottom (vertical arrangement)</li></ul><p><br></p><p>This will be useful if you want your frames' order to be neatly arranged in prototypes or while exporting it as PDF. If you like the plugin, please support my work here- <a href=\"https://paypal.me/srbsingh3\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://paypal.me/srbsingh3</a></p>","id":"927024100326339423","installCount":2977,"lastUpdateDate":"2021-01-02T21:47:25.601Z","likeCount":55,"name":"Auto Arrange Frames","publisherHandle":"srbsingh3","publisherId":"4194988","publisherName":"Saurabh Singh","runCount":2817,"viewCount":7407},{"description":"<p>Create stunning glass effects in your designs in a few simple steps.</p>","id":"927106205731735409","installCount":7889,"lastUpdateDate":"2021-01-12T10:27:17.563Z","likeCount":45,"name":"Glassify","publisherHandle":"watti","publisherId":"211396","publisherName":"Fisayo Wells Watti","runCount":7622,"viewCount":7362},{"description":"<p>Create text and color styles quicker and easier way for your projects.</p><p><br></p><p><strong>
For text styles:</strong></p><p>Just enter base size, choose type scale and font settings. Choose sizes that you want and click “Create styles” button. And boom here we go. You just have got all text styles:)</p><p><br></p><p><strong>For color styles: </strong></p><p>Create multiple palettes and swatches.</p>","id":"927255248672920500","installCount":8198,"lastUpdateDate":"2022-03-30T20:43:54.659Z","likeCount":170,"name":"StyleList – text and color styles","publisherHandle":"shadura","publisherId":"497164","publisherName":"Ruslan Shadura","runCount":8379,"viewCount":14951},{"description":"<p>Play Doom in Figma. The game includes the first episode with 9 levels of the most incredible and iconic game in the FPS history.</p><p><br></p><p>A far-off moon-base sets the stage as you, the only remaining marine, battle demons, mutant humans, and horrors from the bowels of the universe, to save yourself and the world.</p><p><br></p><h2>Keyboard Controls</h2><h2><br></h2><pre class=\"ql-syntax\" spellcheck=\"false\">Move     -&gt;    Arrow Keys\nDash     -&gt;    S (Hold)\nRun      -&gt;    Shift (Hold)\nOpen     -&gt;    Spacebar\nShoot    -&gt;    A\n\nWeapons  -&gt;    1 to 7\n\nConfirm  -&gt;    Enter\nMenu     -&gt;    Esc\n</pre><p><br></p><p>———————————————</p><p><br></p><p><strong>Note:</strong> A Chromium bug may affect some Figma desktop app users by halting the game loading. If you encounter this, launch the plugin via the browser. Sorry for the inconvenience.</p><p><br></p><p><strong>Game Credits</strong></p><p>License&nbsp;Shareware, Free of charge.</p><p>Distributed to public by id Software.</p><p>© 1993 - 2021.</p><p>Powered by JS-DOS</p><p><br></p><p><a href=\"https://doom.fandom.com/wiki/Doom_cheat_codes\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">IDDQD</a></p>","id":"928121675673441556","installCount":2145,"lastUpdateDate":"2021-01-07T05:01:26.426Z","likeCount":109,"name":"Doom Figma","publisherHandle":"mirkosantangelo","publisherId":"206939","publisherName":"Mirko Santangelo","runCount":2490,"viewCount":5934},{"description":"<p>Easily export your assets and frames directly into your favorite tools like Google Drive, Dropbox, Microsoft OneDrive etc. Currently, we are only supporting Google Drive but we are actively working to get other tools.</p><p><br></p><p>You don’t need to download your exported selection to put them into your team collaboration tools like Google Drive. You can easily do that using this plugin.</p><p><br></p><p>All your main frames can be directly uploaded to the selected folder of your Google Drive.</p><p><br></p><p>If you are looking to export only a few frames, you need to select them into Figma Export and then plugin will take care of the other things</p>","id":"928903217538015942","installCount":687,"lastUpdateDate":"2021-02-26T05:47:20.320Z","likeCount":14,"name":"Ultimate Exporter","publisherHandle":"logicwind","publisherId":"999","publisherName":"LOGICWIND Devtools","runCount":661,"viewCount":2288},{"description":"<p>Access your Brandfolder of approved digital assets to easily build on-brand designs in Figma. After completing your design, publish the final product as a new asset in Brandfolder without leaving Figma.</p>","id":"929095073272062772","installCount":700,"lastUpdateDate":"2022-06-22T18:09:57.929Z","likeCount":14,"name":"Brandfolder","publisherHandle":"brandfolderdam","publisherId":"959492039606738231","publisherName":"Brandfolder Developers","runCount":676,"viewCount":1808},{"description":"<p>This Plugin rotate each letter of a selected text box in a random angular.</p>","id":"929414938810147814","installCount":886,"lastUpdateDate":"2021-04-23T11:01:44.033Z","likeCount":11,"name":"Crack Font","publisherHandle":"156e748b_0c0c_4","publisherId":"1065275","publisherName":"Ferdinand","runCount":575,"viewCount":1828},{"description":"<p>Generate multiple shades from the same base color.</p><p><br></p><ul><li>Enter a base color with the color picker (square next to hex value) or typing a hex value into the input field.</li><li>Adjust the contrast by clicking and dragging on the contrast value or by entering a number between 0-100.</li></ul>","id":"929607085343688745","installCount":23816,"lastUpdateDate":"2022-05-12T14:26:37.785Z","likeCount":347,"name":"Color Shades","publisherHandle":"zachkrall","publisherId":"620640","publisherName":"Zach Krall","runCount":21603,"viewCount":22251},{"description":"<p>With Headlime, you don't have to be a copywriter to write high-converting copy. Say bye-bye to lorem ipsum, and hello client-stunning copy.</p><p><br></p><p>Explain your copy in just a few words and our AI generates stunning copy for your projects.</p>","id":"929662690249792570","installCount":1678,"lastUpdateDate":"2021-02-06T08:59:00.461Z","likeCount":58,"name":"Headlime","publisherHandle":"dannypostmaa","publisherId":"2864400","publisherName":"Danny Postma","runCount":1302,"viewCount":3230},{"description":"<p>A squircle is an intermediate shape between a square and a circle. This <a href=\"https://github.com/scotato/figma-squircle\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">open source</a> plugin allows you to create and edit <a href=\"https://en.wikipedia.org/wiki/squircle\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">squircles</a> and <a href=\"https://en.wikipedia.org/wiki/Superellipse\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">superellipses</a>.</p>","id":"930173909910797614","installCount":6776,"lastUpdateDate":"2021-02-09T04:54:05.351Z","likeCount":122,"name":"Squircle","publisherHandle":"scotato","publisherId":"181845","publisherName":"Scott Dodge","runCount":5512,"viewCount":8255},{"description":"<p>Makes it easy to import icons from the simpleicons.org into your design</p>","id":"930325652912235871","installCount":1985,"lastUpdateDate":"2021-10-03T11:17:45.743Z","likeCount":6,"name":"Simpleicons","publisherHandle":"muhrusdi","publisherId":"922026280931933988","publisherName":"Muhammad Rusdi","runCount":1526,"viewCount":2114},{"description":"<p>Generate realistic Taiwan related content: Names, Addresses, Phone numbers, and more.</p><p>Illustration Credits to artists: <a href=\"https://www.instagram.com/cynthiasdrawing/\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">Cynthiasdrawing</a></p><p>---</p><p>To use this plugins:</p><ol><li>Select one or more objects&nbsp;</li><li>Open the plugin and click on the button of any category your want</li><li>🌈 Any text nodes in the selection will be replaced with the category you choose.</li></ol><p>---</p><p>產生豐富的台灣相關資訊，協助你的設計更為真實！</p><p><br></p><p>操作步驟:</p><ol><li>請選取一個或多個物件</li><li>打開 Plugin 並選取你想生成的資訊類別</li><li>🌈&nbsp;任何在選取內的文字皆會被更新成你所選的類別內容</li></ol><p>---</p><p>👉 Data included:</p><p>地址 Addresses</p><p>繁體中文姓名 Names&nbsp;</p><p>手機號碼 Phone numbers</p><p>台灣身分證字號 Id numbers</p><p>---</p>","id":"930470911925064114","installCount":632,"lastUpdateDate":"2021-02-09T13:12:51.068Z","likeCount":33,"name":"Taiwan Data Generator","publisherHandle":"lichin","publisherId":"459","publisherName":"Lichin","runCount":371,"viewCount":1492},{"description":"<p>Feature List:</p><p>1. Export to Excel format with grouping of parent/child comments.</p><p>2. Filters added to export:</p><p>i. All comments</p><p>ii. New comments</p><p>iii. My comments</p><p>iv. Resolved comments</p><p>v. Unresolved comments</p><p>3. Error Handling and better guide on error.</p><p>4. View comments in Figma.</p><p>5. Design Documentation.</p><p>6. Design Governance.</p><p><br></p><p>Gain access to more features available on our new Dashboard. https://exportcomments.io</p><p>Get a birds eye view of figma comments and directly take action from the Dashboard.</p>","id":"930702747188058634","installCount":2721,"lastUpdateDate":"2022-04-12T16:25:58.130Z","likeCount":83,"name":"Export Comments","publisherHandle":"uxdev","publisherId":"918748807388118912","publisherName":"Intelligaia","runCount":2670,"viewCount":7715},{"description":"<p>Make cool shapes by repeating</p><p><br></p><p>X + 5, will add 5 onto a property however many times is specified in the additions input.</p>","id":"931144498826786584","installCount":929,"lastUpdateDate":"2021-02-15T13:49:19.047Z","likeCount":11,"name":"Repeater","publisherHandle":"lewisajax","publisherId":"649537","publisherName":"Lewis Ajax","runCount":862,"viewCount":2992},{"description":"<h2><strong>Free</strong><span class=\"ql-cursor\"></span></h2><p>Adee is a comprehensive and powerful accessibility testing tool. You can test color contrast and apply changes, simulate 8 color blind simulations and generate them, test touch target sized to make sure they meet the various device standards and share test results with your team! ... and more!</p><p><br></p><h2>★ <strong>Features:</strong></h2><ul><li><strong>Alt Text Generator</strong></li></ul><p>✓&nbsp;Generate Alt Text for Svg, Png, Jpg images</p><p>✓&nbsp;Automatic image format detection.</p><p>✓&nbsp;Add the following information to generate Alt Text:</p><p>◦ Whether the image is Informative / Decorative</p><p>◦ Image Title</p><p>◦ Image Description</p><p>◦ Code/Tag recommendations</p><p>✓&nbsp;Bulk adds, remove, reorder and update</p><p>✓&nbsp;generate and share with the team</p><p><br></p><ul><li><strong>Touch Target Size Standard checker</strong></li></ul><p>✓&nbsp;Check your touch targets have correct size based on the following criteria:</p><p>✓ <a href=\"https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/adaptivity-and-layout/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Apple touch devices</a></p><p>✓ <a href=\"https://support.google.com/accessibility/android/answer/7101858?hl=en#:~:text=Consider%20making%20touch%20targets%20at,touchscreen%20objects%20is%207%2D10mm.\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Android touch devices</a></p><p>✓ <a href=\"https://www.nngroup.com/articles/touch-target-size/#:~:text=Based%20on%20a%20study%20conducted,0.4in%20x%200.4in).\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Nielsen</a></p><p>✓ <a href=\"https://www.w3.org/WAI/WCAG21/Understanding/target-size.html\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">WCAG</a></p><p>★★★ And smart suggestion to meet the standards and requirements! to make sure your design is accessible on touch devices.</p><p><br></p><p>How it works:</p><p>-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Select touch target size tab (hand icon)</p><p>-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;From the first dropdown menu &gt; Select the device you want to test your touch target size in</p><p>-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;From the second drop down menu &gt; Select your touch target (such as a button, link, or any other type of hyperlinks)</p><p>-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Then a table shows the test results and recommended standard sizes for your design to make sure it's accessible on touch devices</p><p><br></p><p>Check Adee <a href=\"https://adee.co/docs/HowToTestTouchTargetSize\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">touch target</a> detailed instructions!</p><p><br></p><ul><li><strong>Colorblind Simulator</strong></li></ul><p>✓&nbsp;Simulate 8 different forms of</p><p>&nbsp;&nbsp;&nbsp;&nbsp;color-blindness</p><p>✓ Modes and views comparison</p><p>✓ Colorblind Generator</p><p>✓ Black and White simulation</p><p>✓ Share the test results with your team</p><p><br></p><p>Check Adee <a href=\"https://adee.co/docs/ComprehensiveColorBlindSimulator\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Colorblind simulator</a> detailed instructions!</p><p><br></p><ul><li><strong>Comprehensive Contrast Checker</strong></li></ul><p>✓&nbsp;Based on WCAG guideline.</p><p>You can:</p><p>✓&nbsp;Easily Adjust Your Color Contrast</p><p>✓&nbsp;Swipe Layers and Colors</p><p>✓&nbsp;Live preview</p><p>✓&nbsp;Easily Undo to Original Color</p><p>✓&nbsp;Apply changes to your design</p><p>✓&nbsp;Access to your saved/global colors</p><p>✓&nbsp;Share the test results with your team</p><p><br></p><p>Check Adee <a href=\"https://adee.co/docs/ComprehensiveContrastChecker\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">contrast checker</a> detailed instructions!</p><p><br></p><ul><li><strong>Share!</strong></li></ul><p>✓&nbsp;Generate report and share them with your team!</p><p><br></p><p><strong><em>Check</em></strong><em> Adee's </em><a href=\"https://adee.co/terms-of-service\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\"><em>terms and condition</em></a></p>","id":"931280467863251825","installCount":12089,"lastUpdateDate":"2022-04-13T12:28:08.610Z","likeCount":259,"name":"Adee Comprehensive Accessibility Tool","publisherHandle":"adeeapp","publisherId":"930409254982312987","publisherName":"Adee","runCount":11255,"viewCount":25349},{"description":"<p>Or VHS for short, <strong>sends version info</strong> from your Figma documents to your custom <strong>Slack Webhook</strong>. A comprehensive <a href=\"https://www.figma.com/community/file/947324409399289792/Version-History-%E2%86%92-Slack%3A-Plugin-Tutorial\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">step-by-step guide</a> is available in the Community.</p><p><br></p><h2>How to use VHS ❓</h2><ol><li>Run plugin;</li><li>Provide the requested information:
Slack Webhook URL, Figma API Token, Figma Document URL, and Document Name;</li><li>Select the desired Date Format, and Date Separator;</li><li>Press “Get versions”;</li><li>The plugin will display the 5 most recent versions with edited title and description details (the plugin can't fetch Branch information because it is not yet accessible via the API);</li><li>Click on the version you want to send to Slack;</li><li>If successful, the Slack Webhook should treat the information according to the defined Workflow.</li></ol><p><br></p><p>The plugin has 3 options:</p><ul><li><strong>Date Format</strong>: select your preference for date formatting;</li><li><strong>Date Separator</strong>: pick a character to separate the date;</li><li><strong>Keep window open</strong>: If switched on, the plugin window will remain open after sending a message. You will be able to pick another version to send to Slack.</li></ul><p><br></p><h2>Use Cases 🔨</h2><ul><li>Share Design System updates in a Slack Channel;</li><li>Send yourself a log of changes of an important project;</li><li>Inform a colleague of recent changes to a file you are working on together;</li><li>Keep track of different proposals;</li><li>Log the evolution of a project in a Google Sheet;</li><li>Pass the version info to Zapier;</li><li>Anything else you find it useful for!</li></ul><p><br></p><h2>In Detail 🔎</h2><ul><li>The Figma Plugin API no more than 30 version history states, autosaves included. Anything older than that won't be reached by the plugin;</li><li>The plugin will discard versions without description;</li><li>Due to the way Figma plugins are built, it is not possible to confirm if the message reaches Slack correctly;</li><li>The plugin is document agnostic, hence the need to input a Document URL;</li><li>You can only get versions from a file where you have Edit permissions. The plugin will report “No versions found” for any file you try to access without the right permissions.</li></ul><p><br></p><p>❤ Version History → Slack? <a href=\"https://www.buymeacoffee.com/ruipcabrinha\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Buy me a coffee</a>!</p>","id":"931516811447608327","installCount":1710,"lastUpdateDate":"2022-03-20T20:06:14.495Z","likeCount":85,"name":"Version History → Slack","publisherHandle":"rui_p_cabrinha","publisherId":"1001403","publisherName":"Rui P. Cabrinha","runCount":1419,"viewCount":6395},{"description":"<p>AI color palette generator based on the web tool <a href=\"http://tailwind.ink\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">tailwind.ink</a></p><ul><li>Create <strong>beautiful palettes</strong> from your brand color.</li><li><strong>Balanced luminance</strong> across all hues.</li><li><strong>AI algorithm</strong> trained with hand-picked colors.</li><li><strong>Import </strong>palette and/or styles to your project.</li></ul><p><br></p><p>The Tailwind CSS colors has been used to train the main algorithm.</p>","id":"931531611557198867","installCount":2612,"lastUpdateDate":"2022-04-05T16:58:49.975Z","likeCount":54,"name":"Tailwind Ink","publisherHandle":"manceraio","publisherId":"3062429","publisherName":"Domingo Martin Mancera","runCount":2603,"viewCount":5525},{"description":"<p>The easy way to sort your variants.</p><p><br></p><p>Automatically applies a basic structure to your component sets (variants) which can be customised to your liking.</p><p><br></p><p>---</p><h2><br></h2><h2>Manual Mode</h2><p><br></p><p><strong>Rows &amp; Columns</strong></p><p>Decide whether the variants for a particular property should be arranged horizontally or vertically.</p><p><br></p><p><strong>Order of values</strong></p><p>You can rearrange each of the values for a particular property within the row or column.</p><p><br></p><p><strong>Order of properties</strong></p><p>Unfortunately this still has to be done in Figma. If you'd like to change the order of properties do so in Figma's right-hand side panel when a component set is selected. You'll need to re-rerun the plugin (or at least deselect and re-select the component set) to see the changes.</p><p><br></p><p><br></p><h2>Auto Mode</h2><p><br></p><p>The intended use of auto is to reapply the last applied settings without opening the plugin UI.</p><p><br></p><p>If the plugin has not been run on a particular component set yet then the most basic settings (first property in rows, all others in columns) will be applied.</p><p><br></p><p>---</p><p><br></p><h2><strong>Known issues:</strong></h2><p><br></p><ul><li>I can't handle the maths for rotated objects, so I just reset rotation to 0. If this is a problem for anyone please let me know.</li></ul>","id":"931578032226522167","installCount":7311,"lastUpdateDate":"2021-07-04T11:56:08.383Z","likeCount":249,"name":"Simple Sort","publisherHandle":"jamiem","publisherId":"1494387","publisherName":"James Mitchell","runCount":3969,"viewCount":9270},{"description":"<p>Tidy Hues is a Figma plugin that allows you change just the hue of any layers you have selected.</p><p><br></p><h1>Getting Started</h1><p>When you first start the plugin, you will be greeted with an interface that has a number input, a slider, and an Apply button. As soon as you enter a number in the text field or use the slider, the button will change to the color of your currently selected hue.</p><p><br></p><p>If you select some layers in your file that have any Solid or Gradient fills, and hit the Apply button, it will change all of the hue values of the colors in those layers to the hue you have selected in the plugin. The saturation, lightness, and opacity of your layers will all remain the same.</p><p><br></p><h1>Found a bug or have an idea?</h1><p>This is a team of&nbsp;one, but if you have any good ideas or constructive feedback, please do not hesitate to share your thoughts&nbsp;<a href=\"https://github.com/cross-team/figma-hues/issues/new\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">by creating a new issue</a>&nbsp;- screen captures are welcomed.</p><p><br></p><h1>Show your support</h1><p>If you find this plugin useful, feel free to&nbsp;<a href=\"https://www.patreon.com/mpaiva\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">buy me a&nbsp;🍺</a>&nbsp;at my Patreon page. Thanks!&nbsp;🙏</p><p><br></p><h1>Contribute</h1><ul><li>Run&nbsp;<code>yarn</code>&nbsp;to install dependencies.</li><li>Run&nbsp;<code>yarn build:watch</code>&nbsp;to start webpack in watch mode.</li><li>Open&nbsp;<code>Figma</code>&nbsp;&gt;&nbsp;<code>Plugins</code>&nbsp;&gt;&nbsp;<code>Development</code>&nbsp;&gt;&nbsp;<code>New Plugin...</code>&nbsp;and choose manifest.json file from this repo.</li><li>Create a Pull Request for your branch</li></ul><p><br></p>","id":"931644574776169563","installCount":714,"lastUpdateDate":"2021-01-14T20:23:58.236Z","likeCount":14,"name":"Tidy Hues","publisherHandle":"marcellop","publisherId":"130798","publisherName":"Marcello Paiva","runCount":832,"viewCount":1774},{"description":"<p>Uncomponent any component or instance</p>","id":"931839698966723759","installCount":675,"lastUpdateDate":"2021-05-13T18:45:22.535Z","likeCount":6,"name":"Uncomponent","publisherHandle":"rooslan","publisherId":"17523","publisherName":"Ruslan","runCount":663,"viewCount":878},{"description":"<p>Easily create elegant checklists to keep track of your design progress.</p><p><br></p><h2><strong>What it does</strong></h2><p>The plugin creates a frame with your tasks and checkpoints organised in a table. It also creates status labels (Todo, in progress, awaiting feedback, done, n-a) as variants of a status component.</p><p><br></p><h2>How to create a checklist</h2><p><strong>Tasks</strong></p><p>Insert the tasks or pages you need to design separated by commas (Ex: Homepage, About, Contact). You may also use \"/\" to add a separator line between different groups of tasks. (Ex: Navigation, Footer, / , Homepage, About).</p><p><br></p><p><strong>Checkpoints</strong></p><p>Insert the deliverables needed for your tasks separated by commas (Ex: Wireframes, Mobile design, Desktop design).</p><p><br></p><h2>How to use it</h2><p>While designing, easily update the status labels in Figma ui. Select a label in the table and modify its status in the component properties (right panel).</p><p><br></p><h2>Reorganise the checklist and labels</h2><p>Tasks list is a vertical auto layout frame. That makes it very easy to reorder, remove or add new tasks.</p><p><br></p><p>Separation lines can also be duplicated and moved vertically to organise tasks in groups.</p><p><br></p><p>(Hint : use top and bottom keys to reorder tasks rows and separation lines).</p><p><br></p><p>The labels are variants of a component. That makes it possible to add new ones or modify those automatically generated by the plug in.</p><p><br></p><h2>Developed by</h2><p><a href=\"https://twitter.com/yakudoo\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Karim Maaloul </a>creative director at <a href=\"https://epic.net\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">EPIC Agency</a></p>","id":"931981941865472305","installCount":1371,"lastUpdateDate":"2022-06-03T12:57:48.827Z","likeCount":40,"name":"Checklist Creator","publisherHandle":"EPICAgency","publisherId":"932638105834190633","publisherName":"EPIC Agency","runCount":1532,"viewCount":4575},{"description":"<h2>Name Lint</h2><p>An easy way to find and rename all default-named elements in the current page.</p><p>Default-named elements include (where N is a number):</p><ul><li>Frame N</li><li>Group N</li><li>Rectangle N</li><li>Ellipse N</li><li>...</li></ul><h2><strong>Why?</strong></h2><p>This plugin is particularly useful to prepare designs for developer-handoff, where developers usually name their variables and classes using the designers names.</p><p>Having the same element names in both Figma and your codebase makes the communication between designers and developer easier, but also makes it easier to backtrace elements from code to design and iterate faster.</p><h2>More <strong>info</strong></h2><p>Open source: <a href=\"https://github.com/richardguerre/figma-name-lint\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">https://github.com/richardguerre/figma-name-lint</a></p><p>Inspired by the <a href=\"https://github.com/destefanis/design-lint\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">Design Lint</a> Figma Plugin by destefanis.</p>","id":"932386331483688460","installCount":486,"lastUpdateDate":"2021-01-16T21:44:44.253Z","likeCount":33,"name":"Name Lint","publisherHandle":"richardguerre","publisherId":"4354476","publisherName":"Richard Guerre","runCount":356,"viewCount":1235},{"description":"<p>Draws the curvature of your vectors.</p><p><br></p><p><strong>Ever wondered why the connections of your Bezier Curves don't feel smooth?</strong></p><p>Joining Bezier curves was never easier: This tool helps you design seamless vector graphics with no sharp edges. Your Bezier curves will feel perfectly smooth.</p><p><br></p><p><strong>HowTo</strong></p><p>Select or draw a vector with the pen tool. Click and drag to draw Bezier curves. While this plugin is activated, the Bezier curves' curvature of the selected vector is shown. Adjust the handles of the Bezier curves to smoothen: If the curvature of both Bezier curves is equal, there will be no sharp edges.</p><p><br></p><p>Inspired by <a href=\"https://en.99designs.de/blog/engineering/math-draw-vector-curves/\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">https://en.99designs.de/blog/engineering/math-draw-vector-curves/</a></p><p>Please reach out to me for any improvements you have in mind.</p>","id":"932729267119671976","installCount":2244,"lastUpdateDate":"2021-03-14T16:48:04.802Z","likeCount":48,"name":"Curvature","publisherHandle":"PhilipGrefe","publisherId":"1018244","publisherName":"Philip Grefe","runCount":1967,"viewCount":4799},{"description":"<p>Always switching tabs to find the right tag for your Figma layers? Use Bravo Studio Tag Manager to quickly access and add layer tags to your <a href=\"https://bravostudio.app\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Bravo Studio</a> projects.</p><p><br></p><p>The plugin just adds (or removes) tags from your layer names.</p><p><br></p><p><strong>Roadmap (🤞)</strong></p><p>⛔️ Disabling tags on unsuitable layers and frames</p><p>🎳 Bulk edit tags</p><p>✨ Any new tags that Bravo release</p><p><br></p><p><strong>Disclaimer: I am not affiliated with Bravo Studio in any way, I just built this plugin to help with my workflow and thought it could help others too.</strong></p>","id":"933050006202774372","installCount":2370,"lastUpdateDate":"2022-07-14T12:18:13.594Z","likeCount":38,"name":"Bravo Studio Tag Manager","publisherHandle":"gav","publisherId":"1065451","publisherName":"Gavin Williams","runCount":1510,"viewCount":3001},{"description":"<p>On screen shortcuts for iPads.</p>","id":"933141871379494807","installCount":65,"lastUpdateDate":"2021-01-19T02:48:47.766Z","likeCount":1,"name":"Commands","publisherHandle":"emiroglu","publisherId":"25424","publisherName":"Emir Emiroğlu","runCount":51,"viewCount":494},{"description":"<p>Node Decoder generates plugin or widget source code from any Figma design as Javascript and JSX. Useful for avoiding the need to code visual assets manually when developing plugins.</p><p><br></p><h2><strong>Generating source code</strong></h2><p><br></p><ol><li>Select one or more (ideally top level) layers/nodes</li><li>Run the command <code>Node Decoder</code></li><li>Copy the generated source code</li><li>Click the toggle to flip between plugin and widget code.</li></ol><p><br></p><h2>Previewing code</h2><p><br></p><ol><li>Press the play icon to run the currently generated code</li></ol><p><br></p><h2><strong>Plugin code</strong></h2><p><br></p><ul><li>Selection should ideally be made at the top level</li><li>Doesn't support checking for custom fonts yet</li><li>Doesn't support images yet</li><li>Some frames which use Auto Layout may be slightly off because of when properties are applied</li></ul><p><br></p><p><strong>Features</strong></p><p><br></p><ul><li>Generates most of the source code needed to create, frames, shapes, vectors, text, groups, boolean operations, components and component sets</li><li>Provides syntax highlighted code which you can copy to use in your own plugin</li><li>Detects when text layers are present and provides a function for loading fonts before setting text properties</li><li>Automatically creates components needed for selection if not selected by the user</li><li>Automatically creates paint, effect, grid and text styles if used by nodes</li><li>Intelligently generates overrides for instance nodes</li></ul><p><br></p><h2><strong>Widget code</strong></h2><p><br></p><ul><li>Vectors should be in frames and have an export setting of SVG.</li><li>It's better to use frames than groups (for now)</li><li>Doesn't support images yet</li><li>Some nodes do not exist as React components are not supported in widget code</li></ul><p><br></p><p>If you encounter any issues or have any feedback, please raise an issue at <a href=\"https://github.com/limitlessloop/figma-node-decoder\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://github.com/limitlessloop/figma-node-decoder</a></p><p><br></p><h2>JavaScript API (Alpha)</h2><p><br></p><p>A beta version of a JavaScript API is now available to try in your own plugins. Convert any node to a string that can be recreated later.</p><p><br></p><p><a href=\"https://github.com/limitlessloop/figma-node-decoder/tree/javascript-api\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://github.com/limitlessloop/figma-node-decoder/tree/javascript-api</a></p>","id":"933372797518031971","installCount":621,"lastUpdateDate":"2022-06-25T00:47:19.720Z","likeCount":76,"name":"Node Decoder","publisherHandle":"gavinmcfarland","publisherId":"9971","publisherName":"Gavin McFarland","runCount":474,"viewCount":2430},{"description":"<p>Get patterns images from Subtle Patterns</p><p><br></p><p><strong>New version!</strong></p>","id":"933385882108162159","installCount":4842,"lastUpdateDate":"2022-06-15T07:10:07.771Z","likeCount":41,"name":"Subtle Patterns","publisherHandle":"colir","publisherId":"1816876","publisherName":"Colir","runCount":5892,"viewCount":8094},{"description":"<p>Create and automatically apply custom Export Settings. Share them across your files and projects. Including default presets for the most popular platforms.</p><p><br></p><p>Tired of creating tons of export settings for multiple layers, every single time? This is the plugin for you.</p><p><br></p><h2><strong>Features</strong></h2><ul><li>Create, save, and apply custom Export Settings presets.</li><li>Preloaded with default export settings for Web, iOS, Android, Flutter, and PWA. All configured with the proper specs for size and density.</li><li>Access your Export Settings from any file or project.</li><li>Apply custom Export Settings to multiple layers in batch.</li></ul><p><br></p><h2><strong>Default Presets </strong></h2><pre class=\"ql-syntax\" spellcheck=\"false\">• Android - Assets (JPG or PNG)\n  [ldpi, mdpi, hdpi, xhdpi, xxhdpi]\n\n• Flutter - Assets (JPG or PNG)\n  [1x, 1.5x, 2x, 3x, 4x]\n\n• Generic (PDF | SVG)\n\n• iOS App Icon (PNG)\n  [All Supported Sizes, 1x, 2x, 3x]\n  \n• iOS Artwork (JPG or PNG)\n  [1x, 2x, 3x]\n\n• PWA App Icon (PNG)\n  [All Supported Sizes, from 72 to 512]\n  \n• Web Favicon (PNG)\n  [32, 128, 152, 167, 180, 192, 196]\n\n• Web Retina (JPG or PNG)\n  [1x, 2x]\n</pre><p><br></p><p>—————————————————————————</p><p><br></p><h1>Usage</h1><h1><br></h1><p><strong>Apply a custom preset</strong></p><ol><li>Select one or more layers on the canvas.</li><li>Open the plugin and click a preset to apply the corresponding export settings.</li></ol><p><br></p><p><strong>Create a custom preset</strong></p><ol><li>Select a layer with the desired export setting from your canvas.</li><li>Open the plugin a name to the preset using the input field on the Toolbar.</li><li>Press the + button to add the preset.</li></ol><p><br></p><p><strong>Update an existing preset</strong></p><ol><li>Select a layer with the new export setting from your canvas.</li><li>Type down the exact name of the preset that you want to update.</li><li>Press the + button to update the preset.</li></ol><p><br></p><p>—————————————————————————</p><p><br></p><p><strong>Questions or Feature Requests?</strong></p><p>Feel free to <a href=\"https://twitter.com/mirkosantangelo\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">connect with me here.</a></p>","id":"933557553455124671","installCount":4374,"lastUpdateDate":"2021-06-16T21:29:35.032Z","likeCount":116,"name":"Export Presets","publisherHandle":"mirkosantangelo","publisherId":"206939","publisherName":"Mirko Santangelo","runCount":3169,"viewCount":8458},{"description":"<p>🌈Super simple plugin to count items that you've selected!</p><p><br></p><ol><li>Select items, layers, groups, components, objects etc.</li><li>Run the plugin.</li><li>See how many things there are!</li></ol>","id":"934505788375924322","installCount":1392,"lastUpdateDate":"2021-02-23T13:20:49.428Z","likeCount":21,"name":"Count Things","publisherHandle":"tooaverage","publisherId":"609641","publisherName":"Jaycee-Ann Day","runCount":1276,"viewCount":2565},{"description":"<p>Apply popular auto-layout presets with a single click. </p><p><br></p><p>The plugin speeds up your work, especially while designing forms or popular layouts. It also makes all selected objects stretchable which saves time when you need to resize your mockups. </p><p><br></p><p>You are able to apply three types of presets:</p><p><br></p><ul><li>Stretch items horizontally.</li><li>Stretch items vertically.</li><li>Set \"space between\" alignment for items.</li></ul><p><br></p><p>You can learn more <a href=\"https://www.notion.so/shevenionov/Auto-Layout-Presets-Manual-65e3f8b79a3946a5937c9e4b80f74078\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">here.</a></p><p><br></p>","id":"934512914792764003","installCount":4159,"lastUpdateDate":"2021-01-31T13:28:06.336Z","likeCount":131,"name":"Auto Layout Presets","publisherHandle":"alexdsgn","publisherId":"53451","publisherName":"Alex","runCount":2558,"viewCount":7070},{"description":"<p>Tab through every text override in your selection. Stop mousing around!</p><p><br></p><p>How to use:&nbsp;</p><p><br></p><ul><li><strong>Select</strong> any text element, symbol(s), etc.&nbsp;</li><li>Hit<strong> Cmd</strong> + <strong>T</strong></li><li>Start typing to override first text element within selection.</li><li><strong>Tab </strong>to select the next text element to override, or <strong>Shift </strong>+ <strong>Tab </strong>to go to previous text element.</li><li><strong>Enter</strong> to save and close.</li><li><strong>Esc</strong> to revert last edited text element and close.</li></ul><p><br></p><p>To add a line break, hit <strong>Option</strong> + <strong>Enter.</strong></p><p><br></p><p>To buy me a coffee, <strong>venmo @dbilyk</strong> :)</p><p><br></p><p>Hope someone can find this useful!</p><p><br></p><p><strong>Note:</strong> This plugin currently only works on text elements that have exactly ONE font for all characters in the text element.</p>","id":"934604063727442554","installCount":196,"lastUpdateDate":"2021-01-28T01:49:00.859Z","likeCount":2,"name":"Tab Text Override","publisherHandle":"db_design","publisherId":"933859328504992905","publisherName":"Dmitri","runCount":138,"viewCount":1467},{"description":"<p>Find a scheme that you like (or search for one), import it to your file, and customize it within seconds. </p><p><br></p><p><strong>Color Spark is open-source!</strong> <a href=\"https://emojipedia.org/party-popper/\" rel=\"noreferrer noopener nofollow\" target=\"_blank\"><strong>🎉</strong></a></p><p><a href=\"https://github.com/heybereket/color-spark\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">https://github.com/heybereket/color-spark</a></p><p>Created with ❤️ by<a href=\"https://twitter.com/heybereket\" rel=\"noreferrer noopener nofollow\" target=\"_blank\"><strong> Bereket Semagn</strong></a><strong>.</strong></p>","id":"934799606018744992","installCount":2180,"lastUpdateDate":"2021-02-06T02:05:08.771Z","likeCount":67,"name":"Color Spark","publisherHandle":"bereket","publisherId":"894374884742037457","publisherName":"bereket","runCount":1462,"viewCount":5062},{"description":"<p>피그마 페이지 안에 있는 모든 컴퍼넌트의 리스트를 출력합니다.</p>","id":"935538594752322388","installCount":352,"lastUpdateDate":"2021-01-25T14:19:36.283Z","likeCount":12,"name":"Component List Generator","publisherHandle":"banksalad_","publisherId":"915471161307456342","publisherName":"banksalad","runCount":434,"viewCount":1514},{"description":"<p>👋 <strong>Splash Easy</strong> is a utility to effortlessly create splash-screen files for your Android and iOS applications.</p><p><br></p><p>📹 <a href=\"https://www.youtube.com/watch?v=k-RBpRrzsnE&amp;ab_channel=ParticleShift\" rel=\"noreferrer noopener nofollow\" target=\"_blank\"><strong>Watch the walkthrough video</strong></a>.</p><p><br></p><p>🤔 <strong>What problem is it solving?</strong></p><p>It can be tiring and time consuming to manually design splash-screens of different sizes for your mobile apps, more so when you’re iterating through design ideas. Splash Easy aims to simplify this process.</p><p><br></p><p>👀 <strong>How it works:</strong></p><p>With just two template frames (landscape and portrait) containing your splash-screen design, Splash Easy can generate all the files required for each platform.</p><p><br></p><p>For <strong>best results</strong> put the main content at the centre of the design frame (green rectangle on the template).</p><p><br></p><p>📱<strong>What platforms are supported?</strong></p><ul><li>iOS</li><li>Android</li><li>PWA</li></ul><p><br></p><p><strong>🪴Tutorial</strong></p><p><a href=\"https://particleshiftlabs.medium.com/effortlessly-create-splash-screens-for-your-android-and-ios-apps-233568d51690\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">How to create Splash Screens for Android and iOS apps using xCode and Android Studio.</a></p>","id":"935850798044023728","installCount":2763,"lastUpdateDate":"2021-11-19T09:52:33.639Z","likeCount":24,"name":"Splash Easy","publisherHandle":"particleshift","publisherId":"935848743628578935","publisherName":"Particle Shift","runCount":3044,"viewCount":8754},{"description":"<p><strong>腾讯CoDesign</strong>是产品设计研发一站式协作平台，帮助团队提升设计协作效率，有效管理使用设计资产，让产品设计更轻松高效。</p><p>由腾讯自研的 Figma 插件，支持在线导入预览设计稿、自动生成设计标注，批量下载切图素材、灵活调用图标库、素材库。</p><p>官方网站：<a href=\"https://codesign.qq.com/?utm_source=figma&amp;utm_medium=community&amp;utm_campaign=plugin\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://codesign.qq.com/</a></p><p>使用教程：<a href=\"https://codesign.qq.com/hc/plugins/figma?utm_source=figma&amp;utm_medium=community&amp;utm_campaign=plugin\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://codesign.qq.com/hc/plugins/figma/</a></p><p>问题反馈：<a href=\"https://support.qq.com/products/134728\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://support.qq.com/products/134728</a></p>","id":"936456730265868414","installCount":6875,"lastUpdateDate":"2022-07-21T11:14:43.538Z","likeCount":197,"name":"腾讯 CoDesign","publisherHandle":"Tencent","publisherId":"984548782948477548","publisherName":"Tencent","runCount":7405,"viewCount":19085},{"description":"<p>Lock in frame once the design is finalized to prevent edition from other collaborators.</p>","id":"936719414380946661","installCount":213,"lastUpdateDate":"2021-01-28T22:02:00.652Z","likeCount":4,"name":"Design Lock In","publisherHandle":"normandanny","publisherId":"53229","publisherName":"Heng Tang","runCount":206,"viewCount":653},{"description":"<p>Generate simple and effortless placeholder content for your mockups and prototypes.</p><p><br></p><p>Currently Place››holder allows you to generate random UK-styled addresses, names, UK-styled phone numbers and email addresses.</p><p><br></p><p>Simply click any of the generate buttons to create a new placeholder text node, or, select an existing text node and hit generate to replace its content, with your existing font.</p><p><br></p><p>A super lightweight and simple plugin. Built because I need it, shared because I'm hopeful it's useful to others.</p><p><br></p><p>These plugins are free to use, but if you fancy buying me a coffee because it's been useful to you, I'd be grateful: https://ko-fi.com/kemiljk</p>","id":"936748515482279151","installCount":1552,"lastUpdateDate":"2022-07-16T14:09:02.853Z","likeCount":19,"name":"Place››holder","publisherHandle":"_kejk","publisherId":"3878431","publisherName":"Karl Koch","runCount":1352,"viewCount":4975},{"description":"<h1>Import your colors from <a href=\"https://codyhouse.co\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">Codyhouse</a> to <a href=\"https://figma.com\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">Figma</a> like never before!</h1><h2><br></h2><h2>Features:</h2><p>This plugin can:</p><ul><li>Import colors from <a href=\"https://codyhouse.co\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">Codyhouse</a>: <a href=\"https://codyhouse.co/ds/globals/colors\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">UI Framework -&gt; Globals -&gt; Colors</a></li><li>Create \"color sample\" circles from imported color</li><li>Split color to themes</li></ul><p><br></p><p><br></p><h2>How to use?</h2><ol><li>Open <a href=\"https://codyhouse.co\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">Codyhouse</a> and go to color editor (<a href=\"https://codyhouse.co/ds/globals/colors\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">UI Framework -&gt; Globals -&gt; Colors</a>).</li><li>Create your color system and test this.</li><li>Click to <code>Copy SCSS</code></li><li>Open <code>Figma</code> and run this plugin.</li><li>Paste your <code>SCSS</code> code in textarea.</li><li>Click to <code>Generate Color</code>.</li><li><em>And \"Voila!)\"</em> You have imported colors into your color schemes!</li></ol><p><br></p><h2>Contacts:</h2><ul><li>Email: <a href=\"mailto:me@jagk.ru\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">me@jagk.ru</a></li><li>Website: <a href=\"https://jagk.ru\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">jagk.ru</a></li><li>Repository: <a href=\"https://github.com/jag-k/Codyhouse-Figma-Color-Importer\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">GitHub</a></li><li>My GitHub: <a href=\"https://github.com/jag-k\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">@jag-k</a></li></ul>","id":"937038545947750733","installCount":114,"lastUpdateDate":"2021-01-31T15:27:14.569Z","likeCount":5,"name":"Codyhouse Color Importer","publisherHandle":"jag_k","publisherId":"1761656","publisherName":"Jag_k","runCount":75,"viewCount":490},{"description":"<h1>G11N Utilities</h1><p>This is a free, open source plugin that has simple utilities to simplify the process of making a global-ready design. It's currently really simple; more features TODO.</p><p><br></p><ul><li>Want to contribute more features? Go <a href=\"https://github.com/AaronPresley/figma-g11n-utils\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">here</a>.</li><li>Found a bug? Report it <a href=\"https://github.com/AaronPresley/figma-g11n-utils/issues\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">here</a>.</li></ul><p><br></p><h2>Features</h2><p><br></p><p><strong>Pseudo Translation</strong></p><p>This feature helps you account for verbose languages without having to actually translate anything.</p>","id":"937106647604992352","installCount":76,"lastUpdateDate":"2021-05-03T17:49:23.410Z","likeCount":2,"name":"G11N Utilities","publisherHandle":"AaronPresley","publisherId":"777986","publisherName":"Aaron Presley","runCount":87,"viewCount":466},{"description":"<p>This is a beautiful icon library! It almost covers most of the commonly used icons, and has a variety of exquisite solutions.</p>","id":"937246889716557167","installCount":990,"lastUpdateDate":"2021-02-05T03:48:45.944Z","likeCount":10,"name":"YdIcon","publisherHandle":"Tiddler","publisherId":"936696744781148369","publisherName":"xiaoyu dou","runCount":789,"viewCount":2141},{"description":"<p>Check contrast according to WCAG guidelines and apply changes directly to your artwork.</p><p><br></p><p>How to use:</p><ol><li>Select any 1 or 2 layers</li><li>Check the contrast</li><li>Make changes if needed</li><li>Apply the changes to your designs</li></ol><p><br></p><p>---</p><p>Any feedback is welcome at <a href=\"mailto:olka@hey.com\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">olka@hey.com</a></p>","id":"937465522075454889","installCount":7653,"lastUpdateDate":"2022-06-14T20:25:50.499Z","likeCount":77,"name":"Color contrast","publisherHandle":"olkadesign","publisherId":"3740031","publisherName":"Aleksandra Walczak","runCount":8824,"viewCount":11092},{"description":"<p>Preview links in your figma file, select any text with link and preview directly side by side.</p><p><br></p><p>Update: now with<strong> resizable window </strong></p>","id":"937579386381611447","installCount":1974,"lastUpdateDate":"2021-10-22T13:57:56.669Z","likeCount":38,"name":"Link Preview","publisherHandle":"sonny","publisherId":"123","publisherName":"Sonny Lazuardi","runCount":2240,"viewCount":3923},{"description":"<p>[NEW] Perspective mockups, synced in a click.</p><p>It's the fastest perspective plugin available. 🔥</p><p><br></p><p>---</p><p><br></p><p>Create a Snapshot from any layer, and turn it into an image — whilst rotating/flipping it and converting it to the correct perspective all at once.</p><p><br></p><p>There’s a few similar ‘Mockup’ plugins out there; but from my testing, Snapshot is the fastest!</p><p>Plus it provides a way to easily ‘re-sync’ any of the Snapshots with a single click in the Inspector pane.</p><p><br></p><h2>Getting started</h2><ol><li>Select the layer you want to grab a snapshot of (this can be any layer type) — this is known as the <em>'Source Layer'</em></li><li>Also select the layer you want the Snapshot to be placed into; this must be a layer with four points (Frame, Rectangle, Vector) — this is known as the <em>'Destination layer'</em></li><li>Run Snapshot!</li><li>See an instant preview of how it will look — and flip/rotate the Snapshot as needed</li><li>Click <em>Apply</em>! 🎉</li></ol><p><br></p><h2>Quickly re-syncing</h2><p>After you've created a Snapshot once before, now you can re-update it in a click.</p><p>To do this, select either the Source or Destination Layer (select just one), and click<strong> 'Update Snapshot'</strong> in the inspector panel.</p><p><br></p><p>---</p><p><br></p><h1>Mockup Resources</h1><p>There's some great resources out there to get devices to use for these Snapshots.</p><p>Checkout:</p><ul><li><a href=\"https://www.ls.graphics/free-mockups/figma-mockups\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">LS Graphics</a> – Free Figma Mockups</li><li><a href=\"https://angle.sh\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">Angle 3</a> – For over 3,100 Vector &amp; 3D device mockups</li></ul><p><br></p><p>(If you know any other resources you want on this list, just let me know)</p><p><br></p><p>---</p><p><br></p><p>If you find this plugin helpful, why not support me by buying me a coffee: <a href=\"https://buymeacoffee.com/davew\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">buymeacoffee.com/davew</a> 🤗</p>","id":"937590329004798392","installCount":14360,"lastUpdateDate":"2021-02-06T04:18:25.781Z","likeCount":225,"name":"Snapshot","publisherHandle":"Dave","publisherId":"72","publisherName":"Dave Williames","runCount":12472,"viewCount":25929},{"description":"<h1>Fully customizable styled maps and markers.</h1><p><br></p><p>Get an image from Mapbox default styles or your custom map style created with <a href=\"https://www.mapbox.com/mapbox-studio\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">Mapbox Studio.</a> You can change the map properties like latitude, longitude, zoom, bearing or pitch over the map or using the field controls.</p><p>Also you can configure the width, height and retina ready of the image to get it in Figma.</p><p><br></p><p>Besides you can add markers linked to your existing Figma components or create a default one from scratch.</p><p><br></p><p><em>Get in mind the image obtained in Figma doesn't have Mapbox logo neither attribution. Please read the&nbsp;</em><a href=\"https://docs.mapbox.com/help/how-mapbox-works/attribution/#static--print\" rel=\"noreferrer noopener nofollow\" target=\"_blank\"><em>Mapbox privacy policy about it</em></a><em>.</em></p><p><br></p><p>Contribute it if you want in <a href=\"https://github.com/ergum/figmap\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">Figmap Github project</a> 👾</p><p>Or just say ✋<a href=\"http://www.joseluis.design/\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">www.joseluis.design</a> </p><h2><br></h2>","id":"937760472566581732","installCount":14887,"lastUpdateDate":"2021-02-28T08:50:38.661Z","likeCount":127,"name":"Figmap","publisherHandle":"joseluisgj","publisherId":"251209","publisherName":"José Luis González Jiménez","runCount":14574,"viewCount":23150},{"description":"<p>Zest is Animation Made Easy.</p><p><br></p><p>Create CSS animations in Figma an instant with Zest!</p><p><br></p><p>Full instructions at:</p><p><a href=\"https://daniel-cotton.github.io/zest-figma/\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">https://daniel-cotton.github.io/zest-figma/</a></p><p><br></p><p>Zest is in early access, supporting a number of Figma features but not all, please see full instructions for guidance!</p>","id":"937773902534356458","installCount":879,"lastUpdateDate":"2021-02-21T17:05:58.701Z","likeCount":14,"name":"Zest","publisherHandle":"dancotton","publisherId":"909660","publisherName":"Dan","runCount":635,"viewCount":1945},{"description":"<p>Round fractional font sizes to their nearest integer value. For example, text with font size 9.1px will be rounded (down) to 9px, and 9.6px will be rounded (up) to 10px.</p><p><br></p><p>The plugin works on 'Frames'. To use the plugin, either:</p><ol><li>Select frames, and run the plugin.</li><li>If nothing is selected, the plugin will run for all frames in the current page.</li></ol>","id":"938165757293200988","installCount":2091,"lastUpdateDate":"2022-03-04T22:01:03.468Z","likeCount":18,"name":"Fontiger","publisherHandle":"talula","publisherId":"936703159727285903","publisherName":"Tal","runCount":2148,"viewCount":3053},{"description":"<p><strong>SeCo </strong>is a simple tool that allows you to quickly find brands &amp; other properties from <a href=\"http://simpleicons.org\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">simpleicons.org</a>.</p><p><br></p><h2><strong>Features</strong></h2><p>✨&nbsp;Import&nbsp;colours &amp; icons from brands, like twitter, facebook, and many more!</p><p>✨&nbsp;Place&nbsp;SVGs without the frame!</p><p>✨&nbsp;Sort&nbsp;items alphabetically&nbsp;or&nbsp;by&nbsp;colour</p><p>✨&nbsp;Quick&nbsp;Search&nbsp;/&nbsp;Auto&nbsp;complete!</p><p>✨&nbsp;Docked Favourites at the top of your list for easy access!</p><p><br></p><h2>How to use this plugin</h2><p>Simply search for the icon you're looking for, and click on the tile representing your query. Then you will have the option to populate the icon of your query to your current view, or apply the colour to your selection(s). If you frequent this item a lot, you now have the option to save it to your favourites for next time!</p><p><br></p><p>--</p><p>If you encounter any bugs or usability issues, feel free to DM me on twitter @ltrademark, or leave a comment below.</p>","id":"938533872521067245","installCount":1157,"lastUpdateDate":"2021-05-21T15:04:14.297Z","likeCount":22,"name":"SeCo","publisherHandle":"ltrademark","publisherId":"65676","publisherName":"Leo Herrera","runCount":582,"viewCount":2580},{"description":"<p>Syntax highlighting for your code snippets.</p><p><br></p><p>Features:</p><ul><li>15+ color themes (light/dark)</li><li>70+ languages (incl. JSX)</li><li>Smart formatting (via Prettier)</li><li>Allows for re-editing of existing snippets</li></ul><p><br></p><p>More information (changelog, FAQ, feature requests) can be found here: <a href=\"https://www.notion.so/schickling/Figma-Code-Syntax-Highlighter-03408cb2d60846a3a1b7b0506224834f\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">Website</a></p><p><br></p><p>There is a also a web-based playground of the plugin: <a href=\"https://figma-code.vercel.app\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">Web playground</a></p><p><br></p><p>NOTE: <strong>This plugin is currently in beta</strong>. Some features might require a purchase in the future.</p>","id":"938793197191698232","installCount":2055,"lastUpdateDate":"2021-06-14T22:06:06.129Z","likeCount":49,"name":"Code Syntax Highlighter","publisherHandle":"schickling","publisherId":"961923856721698618","publisherName":"Johannes Schickling","runCount":1922,"viewCount":4120},{"description":"<p>The plugin brings an experience of Figma styles to the auto-layout feature. You can make separate configurations of auto-layouts, save and load them, lock or change at any time.</p><p><br></p><h1><strong>📺 Demo Video </strong><a href=\"https://youtu.be/vr8asHzyy30\" rel=\"noreferrer noopener nofollow\" target=\"_blank\"><strong>on YouTube</strong></a></h1><p><br></p><h1>🤔 When do I need it?</h1><ul><li>If you use the same spacers between certain components or elements.</li><li>If you have a team and want it to use and apply layouts rules in a comfortable way.</li><li>If you have multiple projects with different spacer setting and want to keep all in consistency.</li></ul><p><br></p><h1>🧞‍♂️ How it works</h1><p>The plugin works in the same way as sharable styles in Figma. But the plugin stores these styles as a JSON file.</p><p><br></p><p>You can add so many layouts as you want and save them separately as a layouts configuration.</p><p><br></p><h1>🤖 How to use</h1><p>Before you will start to apply layouts, you need to select two or more elements. Than click “Apply” button and plugin will automatically apply auto-layout styles from the plugin's layout card.</p><p><br></p><h1><strong> 💾&nbsp;&nbsp;Autosave feature</strong></h1><p>The plugin uses Figma's plugin storage - so even if you closed the plugin without saving, all your changes will be there the next time you launch the plugin again.</p><p><br></p><h1>🪢 Hook names</h1><p>Hook names is a string that will be applied as an auto-layout layer name.</p><p><br></p><p>This is important to have distinguish and unique names for each layout, because only with this condition the plugin will be able successfully update multiple layouts automatically.</p><p><br></p><h1>💣 Update all layouts at once by hook names</h1><p>If you used the plugin before and adjusted all layouts, each type of layout will have a specific name.</p><p><br></p><p>Clicking on the <strong>“Update all by hooks”</strong> button the plugin will go through all layouts on the page and apply layouts styles from you configuration.</p><p><br></p><h1>🔒 Lock composition</h1><p>Each layout can be locked if you want to make your work with the plugin more safely.</p><p><br></p><h1>🔗 Links</h1><h2>Project on <a href=\"https://github.com/PavelLaptev/Figma-Auto-Layout-Styles\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">GitHub</a></h2><h2><a href=\"https://www.figma.com/file/MczslX4e8wjNnYTgy57RpI/Figma-Auto-Layout-Styles?node-id=0%3A1\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">Figma project</a></h2><h2><a href=\"https://pavellaptev.github.io/\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">My website</a></h2><h2><a href=\"http://paypal.me/pavellaptev\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">Support the plugin</a></h2>","id":"939173063111899081","installCount":2232,"lastUpdateDate":"2021-03-29T07:51:00.879Z","likeCount":113,"name":"Auto Layout Styles","publisherHandle":"PavelLaptev","publisherId":"134689","publisherName":"Pavel Laptev","runCount":1452,"viewCount":3902},{"description":"<p>Export your designs to add Data, connect the Screens and finally release your applications to the App Store.</p><p><br></p><p>Copy your designs from Figma and paste them directly into Kodika.io Studio to build your mobile apps with Drag and Drop!</p>","id":"939220067188449246","installCount":328,"lastUpdateDate":"2021-11-02T13:53:09.649Z","likeCount":7,"name":"Export to Kodika No Code App Builder","publisherHandle":"kodika","publisherId":"946815606699663730","publisherName":"Kodika.io Team","runCount":233,"viewCount":887},{"description":"<p>Round everything in your document or your specific selection to the nearest whole number, respecting numerical principals of rounding.</p><p><br></p><p>A super lightweight, Figma-y plugin for you to use with zero effort.</p><p><br></p><p>These plugins are free to us, but if you fancy buying me a coffee because it's been useful to you, I'd be grateful: https://ko-fi.com/kemiljk</p>","id":"939429933336921092","installCount":6211,"lastUpdateDate":"2022-07-16T15:08:26.923Z","likeCount":149,"name":"Round››all","publisherHandle":"_kejk","publisherId":"3878431","publisherName":"Karl Koch","runCount":4513,"viewCount":7007},{"description":"<p>An open-source icon library, a fork of <a href=\"https://github.com/feathericons/feather\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Feather Icons</a>.</p><p>We're expanding the icon set as much as possible while keeping it nice-looking.</p><p><br></p><p>If you want to contribute an icon feel free to open an issue at: <a href=\"https://github.com/lucide-icons/lucide\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Lucide Github</a>.</p><p><br></p><p>These icons are totally free for personal and commercial use. Checkout the <a href=\"https://github.com/lucide-icons/lucide/blob/master/LICENSE\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">License</a>.</p>","id":"939567362549682242","installCount":28236,"lastUpdateDate":"2022-03-04T16:53:34.780Z","likeCount":283,"name":"Lucide Icons","publisherHandle":"ericfennis","publisherId":"565583","publisherName":"Eric Fennis","runCount":25399,"viewCount":31388},{"description":"<p>A simple and interfaceless way to set the common export settings most of us use for sharing visuals.</p><p><br></p><p>Run this plugin to set all Frames to either: <code>1x PNG and 2x PNG</code>; <code>2x PNG, 3x PNG and SVG</code>; or; <code>1x PNG, 2x PNG, 3x PNG and SVG</code>. Perfect for setting files up for Developer handover.</p><p><br></p><p>You can also use the <code>iOS</code> or <code>Android</code> commands to assign the common export settings for those platforms for handoff in Figma or tools such as Zeplin.</p><p><br></p><p>You can update either your entire file by not selecting anything, or, select a set of objects to apply your desired setting to.</p><p><br></p><p>This plugin is free to us, but if you fancy buying me a coffee because it's been useful to you, I'd be grateful: https://ko-fi.com/kemiljk</p>","id":"939597261011175499","installCount":1319,"lastUpdateDate":"2021-12-08T14:15:19.401Z","likeCount":12,"name":"Default››export","publisherHandle":"_kejk","publisherId":"3878431","publisherName":"Karl Koch","runCount":1086,"viewCount":3597},{"description":"<p>Upscale low resolution images using machine learning.</p><p><br></p><h1><a href=\"https://ko-fi.com/yuanqing\" rel=\"noreferrer noopener nofollow\" target=\"_blank\"><strong>Fund my work on Figma plugins →</strong></a></h1><p><br></p><h2>Upscale Image</h2><p>Upscales the selected image layers by 2x, 3x, or 4x. (Only works on small, low resolution images.)</p><p><br></p><h2>Credits</h2><p>This plugin is powered by <a href=\"https://thekevinscott.github.io/UpscalerJS/\" rel=\"noreferrer noopener nofollow\" target=\"_blank\"><strong>UpscalerJS</strong></a> by <a href=\"https://github.com/thekevinscott\" rel=\"noreferrer noopener nofollow\" target=\"_blank\"><strong>Kevin Scott</strong></a>, and was inspired by <a href=\"https://ojoy.netlify.app\" rel=\"noreferrer noopener nofollow\" target=\"_blank\"><strong>Ojoy</strong></a> by <a href=\"https://twitter.com/addyosmani\" rel=\"noreferrer noopener nofollow\" target=\"_blank\"><strong>Addy Osmani</strong></a>.</p>","id":"939832535166467194","installCount":3459,"lastUpdateDate":"2021-04-04T07:58:01.602Z","likeCount":65,"name":"Upscale Image","publisherHandle":"yuanqing","publisherId":"1682602","publisherName":"Yuan Qing Lim","runCount":3220,"viewCount":4979},{"description":"<p>Mange your projects 'built with Buoy' design system.</p>","id":"939838999371074684","installCount":38,"lastUpdateDate":"2021-02-06T11:12:39.882Z","likeCount":0,"name":"Buoy","publisherHandle":"dthms","publisherId":"4382501","publisherName":"Daniel Thomas","runCount":17,"viewCount":195},{"description":"<p>Provides 130+ types of smart placeholder content for your mockups from Faker.js and other sources.</p>","id":"940407220339069169","installCount":814,"lastUpdateDate":"2021-03-24T00:56:41.896Z","likeCount":12,"name":"Figma Data Faker","publisherHandle":"paintedbicycle","publisherId":"867919526727920332","publisherName":"paintedbicycle","runCount":701,"viewCount":1524},{"description":"<p>Low vision is a simulator that checks your UI against different types of visual impairments and scenarios to create more accessible designs.</p><p><br></p><p>How it works&nbsp;</p><p><br></p><p>1. Select a frame or element</p><p>2. Run the plugin&nbsp;</p><p>3. Choose a field of vision impairment and visual acuity range</p>","id":"940423402083252469","installCount":3607,"lastUpdateDate":"2021-02-24T21:31:30.876Z","likeCount":92,"name":"Low Vision","publisherHandle":"jeffkielman","publisherId":"33670","publisherName":"Jeff Kielman","runCount":1975,"viewCount":8138},{"description":"<p>It is a color picker that always floats on the top.</p><p>Manage colors by file.</p>","id":"940501649271086343","installCount":838,"lastUpdateDate":"2021-02-08T06:58:15.385Z","likeCount":8,"name":"Better Color Picker","publisherHandle":"heewon_dev","publisherId":"2967519","publisherName":"owen","runCount":981,"viewCount":1620},{"description":"<p>Generate a set of random numbers to total a set value.</p><p><br></p><p>Usage instructions: select some text layers then go to the menu &gt; \"plugins\" &gt; \"Random Terms Generator\" &gt; enter the sum &gt; use \"equally\" toggle or generate randomly &gt; generate numbers set</p>","id":"940620294197417288","installCount":471,"lastUpdateDate":"2021-02-12T03:17:24.497Z","likeCount":10,"name":"Random Terms Generator","publisherHandle":"lumichek","publisherId":"904958924403389818","publisherName":"Anna Chernoskutova","runCount":470,"viewCount":1235},{"description":"<p>You don't need to reverse texts anymore. <a href=\"https://help.figma.com/hc/en-us/articles/4972283635863\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Figma supports bidirectional text from March 29, 2022</a> :)</p><p><br></p><p>It's <a href=\"https://www.figma.com/community/plugin/742121299910255177/RTL-PLZ\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">RTL PLZ</a> For those ones who don't like submenus.</p><p><br></p><p>Just a command for one-time reverse. but it stores the original text, which is also available for the RTL PLZ plugin for edit or reset if you want.</p><p><br></p><p>Write RTL or bidirectional text in Figma and run this plugin.</p><p><br></p><p>Be aware that if your text layer has no RTL characters it will not change.</p>","id":"940631928923964752","installCount":1859,"lastUpdateDate":"2021-11-16T13:23:07.353Z","likeCount":13,"name":"RTL PLZ Reverse","publisherHandle":"saeed","publisherId":"689","publisherName":"Saeed Alipoor","runCount":1840,"viewCount":1345},{"description":"<p>Speed up your component workflow. This plugin turns the selected layers into a component, leaving behind an instance in place.</p><p><br></p><p><a href=\"https://www.youtube.com/watch?v=qptqivvQfFc\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">Overview Video</a></p><p><br></p><p>This works best with a custom keyboard shortcut. <a href=\"https://www.youtube.com/watch?v=r-6q1AJNeTQ\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">Watch my video on how to add one</a>.</p>","id":"940714430683584876","installCount":1364,"lastUpdateDate":"2021-05-26T17:17:28.604Z","likeCount":41,"name":"Pop a Component","publisherHandle":"trafnar","publisherId":"2095","publisherName":"Nathan Manousos","runCount":990,"viewCount":2775},{"description":"<p>Atem Switcher にPNGを送るプラグイン</p>","id":"940822984055011718","installCount":44,"lastUpdateDate":"2021-03-31T10:00:34.154Z","likeCount":1,"name":"ToAtem","publisherHandle":"shosumioka","publisherId":"940822501822695500","publisherName":"sho.sumioka","runCount":16,"viewCount":195},{"description":"<p>Create your first ever indoor scheme and navigate around your building without any problems.</p><ol><li>Build a scheme using simple Figma components</li><li>Add its floors, rooms, paths and staircases via plugin</li><li>Save all changes and check them out on our <a href=\"https://ischemes.ru/\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">web service</a></li></ol><p><a href=\"https://www.notion.so/Indoor-Schemes-b821be20757a4fc998f59ca390cd4b87\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">Here</a> you can find an instruction for using our Indoor Schemes plugin.</p><p>Enjoy using our plugin!</p>","id":"940876476697459099","installCount":843,"lastUpdateDate":"2021-06-15T06:11:01.965Z","likeCount":3,"name":"Indoor Schemes","publisherHandle":"lookfor","publisherId":"940604958160154689","publisherName":"LookFor inc","runCount":854,"viewCount":3751},{"description":"<p>Sort local styles and style folders alphabetically. All text, color/paint, effect and grid styles in the file will be organized by name.</p>","id":"940933746051135922","installCount":548,"lastUpdateDate":"2021-02-11T09:38:21.098Z","likeCount":27,"name":"Sort Styles","publisherHandle":"g","publisherId":"328","publisherName":"Gleb","runCount":428,"viewCount":2072},{"description":"<p>Create shadow systems and effect styles with your choice of steps from a custom function.</p><p><br></p><h1><strong>Usage</strong></h1><ol><li>Run the plugin and click the&nbsp;<code>Create a new elevation scale</code>&nbsp;button</li><li>Select the elevation scale frame</li><li>Adjust the settings to your liking</li></ol><p><br></p><p><strong>Changes are automatically applied and saved.</strong></p><p><br></p><h2>Steps</h2><p><code>Steps</code>&nbsp;are the amount of elevations/shadows you want to create. For example&nbsp;<code>steps:2</code>&nbsp;will create two shadows each with all the layers you specify.</p><h3><br></h3><h2>Effect Styles</h2><p>To automatically create &amp; update effect styles enable the&nbsp;<code>Sync Styles</code>&nbsp;option. You can optionally provide a&nbsp;<code>style name</code>&nbsp;that will be used to create the effect styles. If you add a&nbsp;<code>#</code>&nbsp;to the name it will be replaced with the current step. A&nbsp;<code>##</code>&nbsp;will result in a 0 prefixed number if below 10.</p><pre class=\"ql-syntax\" spellcheck=\"false\">// Example style name with #\nElevation / Level # // Elevation / Level 0, Elevation / Level 1, ...\n\n// Example style name with ##\nElevation / ##dp // Elevation / 00dp, Elevation / 01dp, ..., Elevation / 12dp\n</pre><h3><br></h3><h2>Properties</h2><ul><li>Shadow type: Either&nbsp;<code>dropshadow</code>&nbsp;or&nbsp;<code>innershadow</code></li><li>x: The x offset of the shadow.&nbsp;<code>#</code>&nbsp;is replaced by the current step. E.g.&nbsp;<code>.5*#</code></li><li>y: The y offset of the shadow.&nbsp;<code>#</code>&nbsp;is replaced by the current step. E.g.&nbsp;<code>2+#</code></li><li>blur: The shadows blur radius.&nbsp;<code>#</code>&nbsp;is replaced by the current step. E.g.&nbsp;<code>(1+#)*4</code></li><li>spread: The shadows spread.&nbsp;<code>#</code>&nbsp;is replaced by the current step. E.g.&nbsp;<code>#/.5</code></li><li>color: a 6-digit hex color code between&nbsp;<code>000000</code>&nbsp;and&nbsp;<code>FFFFFF</code></li><li>opacity: The opacity for the color.&nbsp;<code>#</code>&nbsp;is replaced by the current step. E.g.&nbsp;<code>10+#</code>&nbsp;if&nbsp;<code>#</code>&nbsp;= 1 -&gt;&nbsp;<code>11%</code></li></ul><p><br></p><h2>Adding Layers</h2><p>An elevation step consists of one or more elevation layers (each `layer` is an effect e.g. a dropshadow or innershadow).&nbsp;</p><p>Each layer you add will be present on each step.</p><p>To add a new layer, click the \"Add layer\" button below the list of layers.</p><p>To delete a layer click the trash can icon next to the layer name. (You can not delete the last layer)</p><p><br></p><p>Layer names are purely for your organization of the different layers and have no effect on the elevations or the names.</p><p><br></p><h2><strong>Bug reports, PRs &amp; feature requests</strong></h2><p>If you find a bug or want to help by suggestion or even developing a feature, please reach out on the github project page: <a href=\"https://github.com/lukasoppermann/elevation-scale/issues\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">https://github.com/lukasoppermann/elevation-scale/issues</a></p>","id":"940989130927509964","installCount":2316,"lastUpdateDate":"2021-03-05T12:47:06.113Z","likeCount":67,"name":"Elevation Scale","publisherHandle":"lukasoppermann","publisherId":"445052","publisherName":"Lukas Oppermann","runCount":1805,"viewCount":6845},{"description":"<p><strong>Send Moodz!</strong></p><p><br></p><p>Moodz is the easiest way to organize your inspiration. It’s as easy to use as 1,2,3.</p><ol><li>Add images to your Figma file</li><li>Highlight your images and click on the Moodz plugin to create a new board</li><li>Give it a name, description and the number of columns you want, and voilà</li></ol><p><br></p><p>You can also add new images to existing boards or copy images across boards. Easily reorganize images by dragging them up or down, and easily move them between columns too.</p><p><br></p><p>Created by <a href=\"https://milkshake.studio\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Milkshake Studio</a>.</p>","id":"941336520474170939","installCount":498,"lastUpdateDate":"2022-06-29T15:26:59.586Z","likeCount":27,"name":"Moodz","publisherHandle":"milkshakestudio","publisherId":"938146833119171761","publisherName":"Milkshake Studio","runCount":298,"viewCount":1781},{"description":"<p>Generate dummy text for your mockups.</p><p><br></p>","id":"941410492434902618","installCount":3622,"lastUpdateDate":"2021-02-10T19:11:55.059Z","likeCount":7,"name":"Lorepsum","publisherHandle":"meni","publisherId":"933708930578872320","publisherName":"meni zanzibar","runCount":6264,"viewCount":3948},{"description":"<p>Create the brillant Color Styleguide page using your local Color Styles.</p><p><br></p><p>⚠️ Notice: They are not supported now.</p><ul><li>Gradient style</li><li>Mix style</li></ul>","id":"941680506965181089","installCount":5153,"lastUpdateDate":"2022-02-17T07:43:24.212Z","likeCount":132,"name":"Color Styleguide","publisherHandle":"hiloki","publisherId":"410711","publisherName":"Hiroki Tani","runCount":5342,"viewCount":7898},{"description":"<p><strong>Sprint UI</strong> is a design system generator that helps you customise a base design system within minutes. Every change you make using the plugin will automatically update every component of your design.</p><p><br></p><p><strong>Packed with:</strong></p><ul><li>700+ resizable components,</li><li>900+ icons and your typography</li><li>Colour guide sorted out (5 colour shades)</li></ul><p><br></p><p>Visit <a href=\"http://sprintui.com/\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">sprintui.com</a> to create a Sprint UI account to start generating design systems.</p>","id":"941931623182046952","installCount":2599,"lastUpdateDate":"2021-04-30T08:12:57.951Z","likeCount":66,"name":"Sprint UI - Design System Generator","publisherHandle":"rawstudio","publisherId":"1671","publisherName":"Raw.Studio","runCount":2012,"viewCount":5582},{"description":"<p>Figside allows you to ship websites with Figma. Thanks to this plugin you can easily add Web behaviours like responsive grid, layout max/min height and width, navigation between Figma pages and more!</p><p><br></p><p>Check out the tutorial to jump in!</p><p><a href=\"https://figside.com/docs/your-first-website/homepage\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">https://figside.com/docs/your-first-website/homepage</a></p><p><br></p><p>Learn more about Figside at <a href=\"https://figside.com\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">https://figside.com</a></p>","id":"942173178588958535","installCount":2039,"lastUpdateDate":"2021-09-05T09:59:13.415Z","likeCount":56,"name":"Figside - Ship Websites with Figma","publisherHandle":"figside","publisherId":"918105080523353512","publisherName":"Figside","runCount":1534,"viewCount":4310},{"description":"<p>Prepare your work for handoff. Generate a note frame below each screen explain it and help others to understand the static designs better.</p><p><br></p><h2>How to use:</h2><ol><li>Select a frame</li><li>Add a note</li><li>Document your designs</li></ol><p><br></p><p><em>This plugin is currently in a beta, please provide any feedback or feature requests you have via the provided email..</em></p>","id":"943057200269205449","installCount":2929,"lastUpdateDate":"2022-06-09T08:48:34.925Z","likeCount":57,"name":"Handoff notes","publisherHandle":"boriskirov","publisherId":"3613314","publisherName":"Boris Kirov","runCount":3926,"viewCount":12935},{"description":"<p>Fit frame contents to any rectangular shape for a perfect mockup or portfolio presentation.</p><p>-----</p><p>Simply select source frame and destination rectangle, hit the button and enjoy the new reshaped look!</p><p>-----</p><p>Your feedback is very welcome, we would highly appreciate improvement ideas and feature requests.</p>","id":"943458612887571493","installCount":7529,"lastUpdateDate":"2021-03-01T15:20:28.000Z","likeCount":38,"name":"Fit Shaper","publisherHandle":"figmio","publisherId":"549387","publisherName":"Pavel Belik","runCount":7548,"viewCount":14969},{"description":"<p>Generate lighter and darker variations of any color. Perfect for states or to add to your design system.</p>","id":"943569346291474506","installCount":13849,"lastUpdateDate":"2021-02-25T00:10:55.028Z","likeCount":170,"name":"Tints and Shades","publisherHandle":"seyii","publisherId":"1373999","publisherName":"Seyi Oluwadare","runCount":13248,"viewCount":11671},{"description":"<p>A quick way to resize layers in half. Especially useful after pasting a screenshot from a 2x display.</p><p><br></p><p><a href=\"https://www.youtube.com/watch?v=L4esygwDSro\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">Watch the video overview</a></p><p><br></p><p>This plugin works best with a custom keyboard shortcut. <a href=\"https://www.youtube.com/watch?v=r-6q1AJNeTQ\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">Watch my video on how to add one</a>.</p>","id":"943577769855587404","installCount":171,"lastUpdateDate":"2021-06-02T23:40:06.973Z","likeCount":5,"name":"Halve","publisherHandle":"trafnar","publisherId":"2095","publisherName":"Nathan Manousos","runCount":136,"viewCount":497},{"description":"<p>Preview your <strong>DOCX </strong>files in Figma.</p><p><br></p><p>Optional:</p><ul><li>save your preview in cache</li><li>clear cache</li><li>change window size</li><li>adding images to Figma by clicking on the image</li></ul>","id":"943829046375157898","installCount":1032,"lastUpdateDate":"2021-11-02T08:13:21.073Z","likeCount":10,"name":"DOCX Viewer","publisherHandle":"girafic","publisherId":"812","publisherName":"Stas Haas","runCount":935,"viewCount":2159},{"description":"<h2>34 UI components to take with you in all your files</h2><p>Instantly drop useful components straight on to your canvas with full auto layout support, variants and mimicking styles from your file coming soon.</p><p><br></p><h2>Create as component &amp; variants</h2><p>Toggle an option and select a control – it will be inserted to your canvas as a Figma component. Controls that consist of different states (e.g. input) will be created as variants with proper naming and properties.</p><p><br></p><h2>What components are in there?</h2><ul><li>Typography grid</li><li>Typography grid as styles</li><li>Calendar</li><li>Button</li><li>Button set</li><li>Input</li><li>Input set</li><li>Dashboard card</li><li>Tooltip</li><li>Segment control</li><li>Tooltip set</li><li>Tab bar (3 items)</li><li>Tab bar (4 items)</li><li>Tab bar (5 items)</li><li>Payment form</li><li>Checkbox group</li><li>Checkbox set</li><li>Product card</li><li>Radio button group</li><li>Radio button set</li><li>Table</li><li>Feature card</li><li>List item</li><li>Slider</li><li>Progress bar</li><li>Dialog/modal</li><li>Pagination</li><li>Tabs</li><li>Success toast</li><li>Chips</li><li>Chip set</li><li>Warning toast</li><li>Attention toast</li><li>Toast set</li></ul><p><br></p><p><strong>And lots more to come</strong></p>","id":"944200797696370948","installCount":13683,"lastUpdateDate":"2022-05-30T11:24:58.046Z","likeCount":209,"name":"Handy Components","publisherHandle":"thepentool","publisherId":"4299881","publisherName":"thepentool.co","runCount":14443,"viewCount":19800},{"description":"<p>ダミーの日本人ユーザーリストを手早く作成できるFigmaプラグインです。</p><p>大勢のユーザー一覧などを作りたいときなどに役立ちます。</p><p><br></p><p>Movie: <a href=\"https://twitter.com/Hidetaro7/status/1362633507919433731?s=20\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">https://twitter.com/Hidetaro7/status/1362633507919433731</a></p>","id":"944265482632468770","installCount":405,"lastUpdateDate":"2021-02-18T16:30:23.576Z","likeCount":18,"name":"Japanese Users","publisherHandle":"2435900","publisherId":"2435900","publisherName":"Hideki Akiba","runCount":331,"viewCount":1228},{"description":"<h2><strong>Access more than 5000 illustrations from the Artify library directly inside Figma using our plugin</strong></h2><p><br></p><p>Spend less time searching and sorting and more time designing. Artify offers over 5000 illustrations in SVG &amp; PNG formats that you can access from Figma using our plugin</p><p><br></p><h2><strong>Features You'll Love:</strong></h2><p><br></p><p><strong>Built-in Search Function</strong></p><p>Use keywords to find exactly what you need quickly &amp; hassle free - our illustrations contain over 100,000 tags to help you get to the content you need easily</p><p><br></p><p><strong>Import function</strong></p><p>Import high resolution PNG files for your projects with up to 4000x4000px</p><p><br></p><p><strong>Huge Styles Selection</strong></p><p>Enjoy the wide variety of styles available in the Artify, 80+ distinctively unique illustration styles ranging from simple line to 3D designs</p><p><br></p><p><strong>Import editable vectors</strong></p><p>Import any style you want as vector graphics, the majority of Artify's illustrations are available in SVG file format</p><p><br></p><p><br></p><p><strong>Check also our other products:</strong></p><p><br></p><ul><li><a href=\"https://www.bypeople.com/3d-illustrations/\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">3D Characters Illustrations</a> which is included in our <a href=\"https://www.bypeople.com/3d-assets/\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">3D Assets Mega Bundle</a>.</li></ul><p><br></p><ul><li><a href=\"https://iconshock.com/3d-icons\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">3D Icons</a> which is included in our <a href=\"https://www.bypeople.com/3d-assets/\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">3D Assets Mega Bundle</a>.</li></ul><p><br></p><ul><li><a href=\"http://artify.co/3d-lettering\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">3D Lettering</a> which is included in our <a href=\"https://www.bypeople.com/3d-assets/\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">3D Assets Mega Bundle</a>.</li></ul><p><br></p><ul><li><a href=\"https://artify.co/gallery\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">Artify Gallery</a>, our full gallery of Artify's Design templates.</li></ul><p><br></p><p><br></p><p>Made in Artify with a lot of &lt;3</p>","id":"944380360191829317","installCount":25354,"lastUpdateDate":"2021-09-21T17:17:25.212Z","likeCount":257,"name":"Artify Illustrations","publisherHandle":"ArtifyCrew","publisherId":"943951562170485349","publisherName":"ByPeople","runCount":26289,"viewCount":32278},{"description":"<p><strong>Lörem Ipsum</strong> - generated faux Swedish for the masses! Works with selected text nodes. Comes with a multitude of options:</p><p><br></p><ul><li>Number of paragraphs generated</li><li>Sentences per paragraph</li><li>Max sentence length</li><li>Minimum sentence length</li><li>Amount of new Swedish words</li><li>Amount of faux academic neologisms</li><li>Amount of names (based on 100 most common Swedish first names/surnames)</li><li>Amount of digital marketing buzzwords</li><li>Option to add a punchline ending random paragraphs</li><li>Format as headline</li><li>Generate names only</li><li>Option to begin with \"Lörem ipsum...\"</li></ul><p><br></p><p>Demo (in Swedish) here: <a href=\"https://lhli.net/stuff/l%C3%B6remIpsum/\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">https://lhli.net/stuff/l%C3%B6remIpsum/</a></p>","id":"944967340381505004","installCount":23034,"lastUpdateDate":"2021-05-04T11:43:40.781Z","likeCount":36,"name":"Lörem Ipsum","publisherHandle":"lhli","publisherId":"4390616","publisherName":"smlsvnssn","runCount":24336,"viewCount":10266},{"description":"<p>How many times have you created an element, added your auto-layout constraints and then needed to work out what either the inner or outer radius of the other element should be?</p><p><br></p><p>Well now you can get it automatically with Perfect››radius. Simply:</p><ul><li>Create a Frame, Component or Instance</li><li>Add another Frame, Component, Instance or a Rectangle inside it</li><li>Set Auto-layout constraints and define your padding value</li><li>Set a corner radius on one of the elements</li><li>Set either the inner or outer radius of the other element with a click of a button</li></ul><p><br></p><p>These plugins are free to us, but if you fancy buying me a coffee because it's been useful to you, I'd be grateful: https://ko-fi.com/kemiljk</p>","id":"944991908887656950","installCount":533,"lastUpdateDate":"2022-07-16T14:01:28.527Z","likeCount":23,"name":"Perfect››radius","publisherHandle":"_kejk","publisherId":"3878431","publisherName":"Karl Koch","runCount":430,"viewCount":1539},{"description":"<p>For situations when objects are outside the frame and you want to insert them into it saving their location, but the list of layers is&nbsp;not easy to navigate quickly.&nbsp;</p><p><br></p><p>Select the frame and the layers to&nbsp;be&nbsp;inserted and run the plugin.</p><p><br></p><p>——————————————————————————————————————————————</p><p><br></p><p>Для ситуаций, когда объекты оказались вне фрейма. Хочется вставить их в него сохранив местоположение, а&nbsp;в&nbsp;списке слоёв нет возможности быстро сориентироваться.&nbsp;</p><p><br></p><p>Выбирайте фрейм, слои для вставки и&nbsp;запускайте плагин.</p>","id":"945329982331973175","installCount":493,"lastUpdateDate":"2021-05-13T16:08:16.093Z","likeCount":20,"name":"Now inside!","publisherHandle":"milsinery","publisherId":"232442","publisherName":"Vladimir B.","runCount":229,"viewCount":985},{"description":"<p><a href=\"https://github.com/treeform/fidget\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">Fidget </a>- A cross platform UI library for nim. Just take your designs and term them into code!</p>","id":"945866846468157120","installCount":343,"lastUpdateDate":"2021-02-23T02:22:36.811Z","likeCount":9,"name":"Fidget Export","publisherHandle":"treeform","publisherId":"494832","publisherName":"tree form","runCount":292,"viewCount":857},{"description":"<p>Instantly convert your shapes, icons, logos and UI designs to 3D models and get a good render. All in Figma.</p><p><br></p><p><strong>Features:</strong></p><ul><li>Convert shape and groups to 3D by extruding in Z - plane.</li><li>Render realistic images with soft-shadows from the 3D models.</li><li>Control view direction for the output render.</li><li>Adjust height and shadow direction and other light properties.</li><li>Switch between perspective and orthographic(isometric) projections.</li><li>Adjust object roughness and metalness.</li><li>3D Bevel and emboss. (Corner)</li><li>3D model export for external renderers.</li></ul><p><br></p><p><strong>Coming soon:</strong></p><ul><li>Saving state to continue editing later.</li><li>Custom 3D model import.</li></ul><p><br></p><p>We are in process of adding several features and customisation options. Let me know what you think, any bugs you face or suggest features that you would like to see at <a href=\"mailto:palash@shaders.app\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">palash@shaders.app</a></p>","id":"946020080871644950","installCount":70901,"lastUpdateDate":"2021-08-13T17:31:11.847Z","likeCount":648,"name":"Fig3D","publisherHandle":"repalash","publisherId":"1591813","publisherName":"Palash Bansal","runCount":61629,"viewCount":69898},{"description":"<h2><strong>Shorten your design-to-code turnaround time</strong></h2><h2><strong>* from multiple days to just a few minutes*</strong></h2><p><br></p><h2><strong>Hand-code custom, high-quality HTML &amp; CSS for your Figma designs. Do it faster with Decode's automatic code generation.</strong></h2><p><br></p><p><strong>Watch the tutorial:</strong></p><p><a href=\"https://www.youtube.com/watch?v=ZRe8u5WJ7yw\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://www.youtube.com/watch?v=ZRe8u5WJ7yw</a></p><p><br></p><p>----------</p><p><br></p><h3><strong>Hand-crafted code</strong></h3><p>Decode is a code editor for Figma, in which you can write the ideal HTML for your design. Since you make all the critical decisions in structuring the markup, you won't have to untangle any mess from the final output.</p><p><br></p><p>And since you own the code fully, you'll be able to understand and change it effortlessly.</p><ul><li>Write just the HTML structure for your design</li><li>Decode generates precise, minimal styles and markup for individual design elements</li></ul><p><br></p><h3><strong>Fast, automatic insertion of design elements directly into HTML</strong></h3><p>Decode gives a two-letter shortcode for every element in the Figma design. You can insert any element into the HTML by simply typing this shortcode.</p><p><br></p><p>It eliminates 90% of the grunt-work in design-to-code while retaining the quality of hand-coded HTML.</p><p><br></p><p>Decode will automatically pick up:</p><ul><li>Text and text properties like font name, size, and decoration</li><li>Image elements</li><li>Background colors and background images</li><li>Margins and paddings between elements</li></ul><h3><br></h3><h3><strong>Tailwind CSS support</strong></h3><p>The generated HTML is styled using Tailwind's utility classes.</p><p><br></p><p>Decode also produces a custom&nbsp;<code>tailwind.config</code>&nbsp;with colors and fonts tailored to your design.</p><p><br></p><p>You can even use Tailwind classes in the HTML you write. This means:</p><ul><li>you can set width and max-width of elements</li><li>apply grids and grid properties like template-cols and rows</li><li>use tables to render data</li><li>use any CSS value using Tailwind's arbitrary value classes</li></ul><p><br></p><h3><strong>Integrate into any production codebase</strong></h3><p>Since Decode generates plain HTML as output, you can adapt and integrate it into production codebases without hassle. Including:</p><ul><li>CMSes like Wordpress, Drupal, Magento, and Shopify</li><li>Static site generators like Hugo, Eleventy, and Gatsby</li><li>Back-end frameworks like Rails, Laravel, and Django</li><li>Front-end frameworks like React, Vue, and Angular</li></ul><p><br></p><h3><strong>Layer structure does not matter</strong></h3><p>Decode does not rely on the organization of elements in the Figma design. The designer is free to structure their layers however they want.</p><ul><li>Works with any Figma design with minimal changes</li><li>No dependence between design and markup structure</li><li>No hassle for the designer</li></ul><p><br></p><h2><span style=\"color: var(--color-text, #333333); background-color: var(--color-bg, transparent);\">Frequently Asked Questions</span></h2><p><strong style=\"color: var(--color-text, #333333); background-color: var(--color-bg, transparent);\">Do you support SASS, LESS, or CSS-in-JS?</strong></p><p>We do not yet, but they are on our long-term roadmap. If you're interested in these features, please email us. We'll be happy to prioritize features that are most helpful to you.</p><p><br></p><p><strong>I'm building a complex web application. How useful is Decode to me?</strong></p><p>Decode works equally well for websites — landing pages, marketing sites etc. and for complex web applications.</p><p>For web applications, you can easily template the markup with user data from your application code. This is because: 1) there are no unnecessary constraints like width and height on elements, unless specified by you in the code editor. 2) the generated CSS and markup are minimal and precise — only what is necessary for your layout.</p><p><br></p><p><strong>Do you support flexboxes, grids, and tables?</strong></p><p>We do! Anything you can do with regular HTML &amp; CSS you can do with Decode.</p><p><br></p><p><strong>Do you support responsive layouts — mobile and tablet screens?</strong></p><p>Not at the moment. However - the markup we generate is fluid. It does not have any width or height constraints and so the content adjusts depending on the screen size. You can add Tailwind's responsive modifiers where required in the downloaded code.</p><p>While this is not ideal, we find the workflow surprisingly effective. Since the element properties like colors and typography don't change across screen sizes, the code that Decode generates will take you quite far in the development workflow. The manual addition of responsive layouts is the only significant work you have to do afterwards.</p><p><br></p><h2>Help &amp; Support</h2><p>Write to us with your questions, and one of us will get back to you quickly.</p><p><br></p><p><a href=\"mailto:hello@protoship.io\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">hello@protoship.io</a></p><p><a href=\"https://twitter.com/protoship_io\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://twitter.com/protoship_io</a></p><p><br></p>","id":"946302419384017787","installCount":292,"lastUpdateDate":"2022-07-20T15:22:27.414Z","likeCount":1,"name":"Protoship Decode: HTML & Tailwind CSS Editor","publisherHandle":"jasim_ab","publisherId":"41336","publisherName":"Jasim A Basheer","runCount":625,"viewCount":611},{"description":"<p>按照命名规范，横向排列页面画板</p>","id":"946331910305469316","installCount":152,"lastUpdateDate":"2021-02-24T09:09:50.016Z","likeCount":2,"name":"Align-H","publisherHandle":"monkren","publisherId":"55535","publisherName":"MONK.REN","runCount":104,"viewCount":531},{"description":"<p>Befront is an educational application that helps you advance your design and prototyping skills with step-by-step tutorials and interactive lessons from scratch. Our innovative plugin allows you to learn design right in Figma. Unreal, isn't it?</p><p><br></p><p>In our fee-paying courses you can complete both theoretical and practical lessons in Figma itself with no need to switch between Figma and Befront all the time. Every practical lesson has tasks which are auto-checked immediately for correctness by the system. Moreover, the system shows errors in order to prompt what should be changed.</p><p><br></p><p>Stay up to date. Learn the features, technologies and trends to be in-demand professional.</p><p>Learning Design has never been that easy and convenient!</p><p>_____________________</p><p>Learn more about Befront <a href=\"https://befront.io/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://befront.io</a></p><p><br></p><p>Feedback and contributions are welcome via:</p><p><a href=\"mailto:info@befront.io\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">info@befront.io</a></p>","id":"946462257210461125","installCount":4687,"lastUpdateDate":"2022-07-26T03:32:15.103Z","likeCount":104,"name":"Befront","publisherHandle":"befront","publisherId":"570361","publisherName":"Befront","runCount":4220,"viewCount":10794},{"description":"<p>Insert album and track covers from Spotify into your designs.</p><p><br></p><ol><li>Run Spottie</li><li>Click on an image to insert into the canvas</li><li>Long press to multi-select images and insert all at the same time.</li></ol><p><br></p><p>If no image is selected then the image is created, but if a fillable object is selected then the fill will be replaced.</p><p><br></p><p>Bonus - play song previews in the Tracks tab by double clicking on the image.</p><p><br></p><p>This plugin is open source. Feel free to open issues/request features or pull requests at <a href=\"https://github.com/nathakits/spottie-figma-plugin\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">https://github.com/nathakits/spottie-figma-plugin</a></p>","id":"946462676168136646","installCount":1594,"lastUpdateDate":"2021-04-17T18:48:58.373Z","likeCount":37,"name":"Spottie","publisherHandle":"nathakits","publisherId":"191464","publisherName":"Nathakit Sae-Tan","runCount":1175,"viewCount":2750},{"description":"<p>Quickly generate vertical rhythm by using a modular type scale, grid, and auto-layout. Preview ATX headings using “#”</p><p>&nbsp;</p><p>Like this:</p><p># Heading 1</p><p>Lorem Ipsum</p><p>&nbsp;</p><p>##### Heading 5</p><p>It goes up to Heading 5</p><p>&nbsp;</p><p>&nbsp;</p><h1>What is vertical rhythm</h1><p>&nbsp;</p><h2>Modular type scales</h2><p>Modular type scales in typography are used to generate visual rhythm and also hierarchically define what to look at first.&nbsp;</p><p>&nbsp;</p><h2>Vertical rhythm</h2><p>Vertical rhythm is used to keep vertical spaces consistent. In print there is a baseline that text sit on. On the web it sits in the middle.&nbsp;</p><p>&nbsp;</p><h2>What can I do here?</h2><p>This plugin lets you generate a modular scale and a line-height to make sure everything fits on a grid using Auto-Layout. You can also put in a margin component to give spacing where it is needed. These margin components and the line-height of each text generated creates consistent vertical spacing that fits on the grid.&nbsp;</p><p>&nbsp;</p><p>1. Set a base-size</p><p>2. Set a multiplier</p><p>3. Set a line-height</p><p>4. Choose to generate styles or not (give the folder a name to stay organized!)</p><p>5. Choose to use Margins or not (all generated have a default margin using the line-height)</p><p>6. Write some text to use your headings and paragraphs. There is an example using ATX headings in the markdown. To write ATX headings make sure there is a newline to write new stuff. I would advise writing the ATX headings elsewhere and copy and pasting it in.</p><p>&nbsp;</p><p>7. Ideas?&nbsp;</p><p>&nbsp;</p><ul><li>It would be great to build out a real markdown parser. That uses existing styles.</li><li>Generating the code in scss would be great but it is done well on other apps on the web.&nbsp;</li><li>Using different vertical rhythm techniques would be a great option to throw in.&nbsp;</li></ul><p><br></p><p>This plugin is on github here.&nbsp;https://github.com/Gordoburrito/Heading-Helper</p><p>Feel free to use it, but the code lacks eloquence.&nbsp;</p><p><br></p><p>I got this technique from Matej Latin’s book <em>Better Web Typography for a Better Web</em></p>","id":"946636305972061170","installCount":652,"lastUpdateDate":"2021-02-26T04:28:30.016Z","likeCount":22,"name":"Heading Helper","publisherHandle":"glewis","publisherId":"2930961","publisherName":"Gordon Lewis","runCount":437,"viewCount":1959},{"description":"<p>日本語の本物っぽいテキストを挿入するプラグインです。</p><p>メールアドレスや住所などの本物っぽいテキストをランダムに生成し、指定されたテキストノードに挿入します。</p><p><br></p><p>------------------------------------------------</p><p>This plugin inserts a realistic text in Japanese.</p><p>It generates random text of things like email address or address and inserts it into selected text node.</p><p><br></p>","id":"946692694904143875","installCount":218,"lastUpdateDate":"2021-02-27T13:28:04.770Z","likeCount":4,"name":"realistic-dummy-text-ja","publisherHandle":"seya","publisherId":"3945922","publisherName":"Kazuya Seki","runCount":143,"viewCount":440},{"description":"<h2>Forgot to create components in time?</h2><p>The plugin will create a component from an object, and all other similar objects will make it instances.</p><p><br></p><p><strong>How the plugin works</strong></p><p>1. Select the frame to turn into a component.</p><p>2. Launch the plugin — done!</p><p><br></p><p><a href=\"https://twitter.com/milsinery/status/1391338387576086529\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Show in action</a></p><p><br></p><p>——————————————————————————————————————————————</p><p><br></p><h2>Забываешь вовремя создавать компоненты?</h2><p>Этот плагин поможет тебе — он создаст компонент из&nbsp;объекта, а все остальные такие же объекты сделает его инстансами.</p><p><br></p><p><strong>Как работает плагин</strong></p><p>1. Выбери фрейм для превращения в компонент.&nbsp;</p><p>2. Запусти плагин — готово!</p><p><br></p><p><a href=\"https://twitter.com/milsinery/status/1391338387576086529\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Посмотреть в действии</a></p><p><br></p><p>Ginger Сat from <a href=\"https://icons8.com/illustrations\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">icons8</a>.</p>","id":"946844618678350922","installCount":2231,"lastUpdateDate":"2021-05-18T12:32:20.585Z","likeCount":108,"name":"Meow!","publisherHandle":"milsinery","publisherId":"232442","publisherName":"Vladimir B.","runCount":1590,"viewCount":4040},{"description":"<h2><a href=\"https://www.emojiall.com/zh-hant/code/1F680\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">🚀</a> 10-<strong>20x faster way to turn your design into fully Responsive HTML Web/WordPress/App</strong></h2><h2><br></h2><p>Got brand new website UI designs in Figma? Get them converted into well <strong>responsive</strong>, <strong>pixel perfect</strong>, <strong>clean</strong>, and <strong>developer-friendly</strong> HTML code/React.js with our Figma to HTML service. Try using pxCode and you will get the following benefits:</p><p><br></p><ul><li>Design to Code and No more Hand-Coding</li><li>Complete Control your HTML and Code</li><li>Fully Responsive Web Page</li><li>Exported Code is Ready for Integration</li><li>Zero dependencies</li></ul><p><br></p><p>pxCode is a Design to Code tool. With the revolutionary features provided, you hold the complete control to make flexible edits on your design, obtain developer-friendly<strong> HTML / CSS / React.js / React Native code</strong> and <strong>WordPress Plugin</strong> to export for integration.&nbsp;</p><p><br></p><h2><strong>Demo Code Result: </strong></h2><p><a href=\"https://www.figma.com/file/iOXV8ui00K8JUgMighpXJv/Example?fuid=820359781068922783\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\"><strong>design</strong></a><strong> -&gt; </strong><a href=\"https://codesandbox.io/s/pxcode-html-example-vb7fp\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\"><strong>HTML</strong></a><strong> / </strong><a href=\"https://codesandbox.io/s/pxcode-example-s9sxx?from-embed=&amp;file=/src/components/Card.js\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\"><strong>React</strong></a><strong> 👈</strong></p><p><br></p><h2><strong>Demo WordPress Plugin Result:</strong></h2><p><strong> </strong><a href=\"https://wp.pxcode.io/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\"><strong>WordPress page 1</strong></a>, <a href=\"https://wp.pxcode.io/?page_id=90\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\"><strong>WordPress page 2 </strong></a><strong>👈</strong></p><p><br></p><h2>💡 <strong>How to use:</strong></h2><p>• Install pxCode Figma plugin</p><p>• Export Figma design through pxCode plugin</p><p>• Import Figma design file into <a href=\"https://www.pxcode.io/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">pxCode</a> on web browser</p><p>• Flexible edit on design without limitation</p><p>• Edit Responsive Webpage with CSS Media Query</p><p>• Preview design as Responsive Webpage</p><p>• Export Developer-Friendly Code or WordPress Plugin</p><p><br></p><h2><strong>Try pxCode at: </strong></h2><p><a href=\"https://www.pxcode.io/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\"><strong>pxCode</strong></a><strong> </strong>👈</p><h2><strong>Tutorials:</strong></h2><p><a href=\"https://university.pxcode.io/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\"><strong>pxCode university</strong></a><strong> </strong>👈</p>","id":"946962210053893234","installCount":26029,"lastUpdateDate":"2022-07-06T11:33:44.940Z","likeCount":364,"name":"Figma to HTML/React by pxCode - Responsive HTML, React & WordPress Support","publisherHandle":"pxcode","publisherId":"3677007","publisherName":"pxCode","runCount":28021,"viewCount":42422},{"description":"<p>A tiny Figma plugin that just creates a Rounded Rectangle (a.k.a squircle).</p><p><br></p><p>For the people that are used to Sketch (using the U shortcut to create a Rounded Rectangle).</p><p><br></p><p>Once installed, you can you use this trick to create a keyboard shortcut:</p><p><a href=\"https://twitter.com/DavidWilliames/status/1169053934243069952\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">https://twitter.com/DavidWilliames/status/1169053934243069952</a></p><p><br></p><p>I personally recommend Control+U (as CMD+U and Alt+U don't work), but you can set anything you want.</p>","id":"947127714285846698","installCount":329,"lastUpdateDate":"2021-02-26T15:15:46.973Z","likeCount":4,"name":"Rounded Rectangle (Squircle)","publisherHandle":"joost","publisherId":"54298","publisherName":"Joost","runCount":343,"viewCount":1143},{"description":"<p>Let chance influence your designs – press some buttons and BOOM: You got a ton of gradients. Pick the one you like, throw away the rest.</p><p><br></p><p>–––––––––––––––––––––––––</p><p><br></p><h2>All random or a little fiddle?</h2><p><br></p><p>The plugin works by using the HSL scale. If you feeling blue, use the blue hues. Or no, maybe bring the lightness up, and set the saturation to vivid. Or just go all random.</p><p><br></p><p>Great things can come from accidents, just think of Penicillin – now it's easier than ever to incorporate it in you design, with the Accidently Great Gradients Figma plugin.</p><p><br></p><p>🌈🍀</p>","id":"947245928539421914","installCount":4161,"lastUpdateDate":"2021-03-13T12:39:30.029Z","likeCount":53,"name":"Accidently Great Gradients","publisherHandle":"accidentlygreat","publisherId":"930134308919255038","publisherName":"Johan","runCount":3387,"viewCount":5670},{"description":"<p>Remove any hidden fills, strokes, and effects from your pages. Keep your Figma files clean.</p><p><br></p><p>Automatically removes any hidden styles from frames, components, text layers, rectangles, vectors, and other shapes.</p><p><br></p><p>Run the plugin on any pages you want to clean up, one page at a time. It’ll scan all elements on that page and remove any hidden fills, strokes, and effects.</p>","id":"947376972204574960","installCount":1478,"lastUpdateDate":"2021-02-27T06:31:50.004Z","likeCount":32,"name":"Hidden Styles Remover","publisherHandle":"serhiirevva","publisherId":"947063204632102197","publisherName":"Serhii Revva","runCount":1127,"viewCount":2591},{"description":"<p>This plugin is no longer needed. Install the <a href=\"https://www.figma.com/community/plugin/742121299910255177/RTL-PLZ\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">RTL PLZ plugin</a> and use the \"reset to original text\" command to upgrade and reset your old texts.</p><p>Currently, in Figma If an RTL text is readable to you, that will be unreadable for developers or users that want to copy the original text. This plugin makes a big frame over your document and duplicates text layers with the original text, so when the developer tries to select a text layer, the replica layer with the original text will be selected.</p><p>How to use: Select some layer with RTL text (that was written with the <a href=\"https://www.figma.com/community/plugin/742121299910255177/RTL-PLZ\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\"><strong>RTL PLZ plugin</strong></a>) and run the plugin.</p><p>Layers that have LTR text or are written with other tools are currently being skipped.</p>","id":"947478767900326156","installCount":2007,"lastUpdateDate":"2021-09-13T08:34:22.792Z","likeCount":28,"name":"RTL PLZ Handoff","publisherHandle":"thewall","publisherId":"943497109383323481","publisherName":"Wall","runCount":1498,"viewCount":1476},{"description":"<p>Plugin provides ability to search and insert icons for IntelliJ platform based IDEs. All the icons are listed on the <a href=\"https://jetbrains.design/intellij/resources/icons_list/\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">website</a>.</p>","id":"948276470997072333","installCount":1139,"lastUpdateDate":"2021-03-01T17:58:20.671Z","likeCount":29,"name":"IntelliJ Icons","publisherHandle":"JetBrains","publisherId":"931907944920736873","publisherName":"JetBrains","runCount":780,"viewCount":2209},{"description":"<p>Use this plugin to generate a 5x5 grid of words that are secretly assigned to either the red or blue team. Spymasters have a separate page where they can view a map of the assigned colors and give clues to their team to guess which words belong to which team.</p>","id":"948336225528049119","installCount":87,"lastUpdateDate":"2021-03-01T21:52:12.163Z","likeCount":1,"name":"Spymaster","publisherHandle":"kelsey","publisherId":"2501791","publisherName":"Kelsey Whelan","runCount":59,"viewCount":299},{"description":"<p>A Translate plugin</p>","id":"948479138222198270","installCount":112,"lastUpdateDate":"2021-03-15T09:57:25.572Z","likeCount":3,"name":"LegoTranslate","publisherHandle":"Pino","publisherId":"1639512","publisherName":"Z zz","runCount":111,"viewCount":292},{"description":"<p>Manage your Figma style libraries with ease.</p><p><br></p><ul><li>Quickly export your styles to a new collection.</li><li>Select all styles or choose what you want to export.</li><li>Import the styles you need to your new document.</li><li>Export components.</li><li>Publish web pages to share your styles and components with others.</li></ul>","id":"948597523260583481","installCount":3141,"lastUpdateDate":"2022-03-20T09:29:25.952Z","likeCount":94,"name":"Style Manager","publisherHandle":"outermeasure","publisherId":"916022160243868557","publisherName":"outermeasure","runCount":3591,"viewCount":10331},{"description":"<p>日本語に対応しているフォントを試しながら選択することができます。</p><p><br></p><p>With this plugin, you can pick Japanese font while trying to see how font looks on the text you apply to.</p>","id":"948851319619581556","installCount":7411,"lastUpdateDate":"2021-10-15T13:32:50.489Z","likeCount":65,"name":"Japanese Font Picker","publisherHandle":"seya","publisherId":"3945922","publisherName":"Kazuya Seki","runCount":7145,"viewCount":15135},{"description":"<p>Don't you sometimes think \"Oh, I wanna see some cat image...\" while designing? Then this plugin is for you!</p><p>You can paste a random cat image by running this plugin. just 1 click.</p><p><br></p><p>It may also be useful as a placeholder of image.</p><p><br></p><p>photo credit: Unsplash</p>","id":"948896635713189521","installCount":349,"lastUpdateDate":"2021-03-21T04:04:55.928Z","likeCount":9,"name":"Random Cat","publisherHandle":"seya","publisherId":"3945922","publisherName":"Kazuya Seki","runCount":417,"viewCount":633},{"description":"<p>This plugin exports your artboards layers so that they can be easily and correctly imported into BeatFlyer: https://beatflyer.com</p><p><br></p><p>If you export the layers manually yourself you risk to lose their horizontal or vertical position within the whole composition.</p><p><br></p><p>This plugin makes also sure that your background fill gets exported as first layer, if available.</p>","id":"948942429394250406","installCount":269,"lastUpdateDate":"2021-03-03T14:15:21.789Z","likeCount":3,"name":"BeatFlyer Exporter","publisherHandle":"nuthinking","publisherId":"42023","publisherName":"Christian Giordano","runCount":180,"viewCount":528},{"description":"<p>Use the plugin to navigate multiple selected siblings. Best use is with component instances.</p><p><br></p><p><strong>How to use:</strong></p><ol><li>Select multiple (same) instances.</li><li>Press Enter key to enter the instance.</li><li>Use plugin to move through siblings.</li></ol><p><br></p><p>See <a href=\"https://www.loom.com/share/adb4ed620d09477986aa2c893ef22930\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">video</a> explainer.</p><p><br></p><p>Create keybindings (macOS only):</p><ol><li>Go to Keyboard &gt; Shortcuts tab</li><li>Select \"App Shortcuts\" on the left pane</li><li>Add (+) Figma from \"Application\" dropdown</li><li>Upward — under \"Menu Title\" write Upward and add your custom keybinding in \"Keyboard Shortcuts\"</li><li>Downward — under \"Menu Title\" write Downward and add your custom keybinding in \"Keyboard Shortcuts\"</li><li>Restart Figma and try it out ;)</li></ol><p><br></p><p>—</p><p>Read a story — \"<a href=\"https://design.infinum.com/case/community-strikes-back-figma-plugin-story\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Community Strikes Back — Figma plugin story</a>\" — or, how we created this plugin.</p>","id":"948944981491521191","installCount":608,"lastUpdateDate":"2022-05-19T08:51:22.187Z","likeCount":46,"name":"Navigate Multiple Siblings","publisherHandle":"mihaeltomic","publisherId":"5104","publisherName":"Mihael","runCount":472,"viewCount":1637},{"description":"<p>Auto-convert your Figma designs to React.js code that works. It is even compatible with existing codebase! CopyCat will help you build UI faster than anybody else.</p><h2><br></h2><h2><strong>Do You...</strong></h2><p>...face sprint delays and design inconsistencies while developing UI?</p><p>...find yourself doing a lot of tedious, redundant work?</p><p>...feel dissatisfaction with your job?</p><p>And are you looking for intelligent ways to develop UI quickly?</p><p><br></p><h2><strong>Your Solution</strong></h2><p>You can build UI faster than your competition with CopyCat. Just copy production-ready code generated directly from Figma designs using AI. As a result, you can focus on building interactions, animations, networking and everything else that will make you stand out. You can be an exceptional front end developer who develops UI quickly using CopyCat.</p><p><br></p><p>Devs in the fastest growing companies in the world use CopyCat: Amazon, JP Morgan, Walmart, and more.</p><p><br></p><p><em>We know what it's like to do redundant work.</em> Our goal is to help you avoid development rework that leads to delivery delays. Let us help you find efficient ways to write quality code.</p><p><br></p><h2><strong>Get Started For Free</strong></h2><p>Steps to start building faster:</p><ol><li>Install the Figma plugin and sign up with your Figma account</li><li>Open CopyCat plugin on your design</li><li>Copy generated code to your code editor</li></ol><p>You'll be 2X faster at developing UI. You'll meet your deadlines and spend your time solving exciting challenges, too! Best of all, you'll eliminate sprint delays and design inconsistencies.</p><p><br></p>","id":"949398715671878472","installCount":3615,"lastUpdateDate":"2022-05-13T02:53:29.231Z","likeCount":56,"name":"CopyCat | React code generator (Beta)","publisherHandle":"copycat","publisherId":"949357427487770107","publisherName":"CopyCat","runCount":3404,"viewCount":7172},{"description":"<p>Provides to replace the frames with Team Library Component(Design System).</p><p><br></p><h2>What It can help...</h2><p>- Recover components which lost any links.</p><p>&nbsp;- when you move your frames to another file.</p><p>&nbsp;- when imported a Sketch file.</p><p>- Replace your frames with the component which belongs to Team Library.</p><p><br></p><h2>How to Use</h2><p>0. Make sure the target Frame, Group and Instance name and Team Library component name are same.</p><p>&nbsp;- NOTE: Set the child component name when you use Variants.</p><p>1. Open your Team Library file and run <code>Save master components</code>.</p><p>2. Choose the target Frames, Groups, Instances then run <code>Replace all selections with saved master components</code>.</p><p><br></p><h2>Known issues &amp; Feature requests</h2><p>🚧Any text and other properties will be lost when replace them with instances.</p><p><a href=\"https://github.com/rei-suzuki/figma-team-component-attacher/issues\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">https://github.com/rei-suzuki/figma-team-component-attacher/issues</a></p><p><br></p><p>Welcome your contributions!</p>","id":"949581722458746736","installCount":605,"lastUpdateDate":"2021-03-20T08:09:23.887Z","likeCount":37,"name":"Team Library Component Attacher","publisherHandle":"rei_suzuki","publisherId":"277","publisherName":"Rei Suzuki","runCount":469,"viewCount":2269},{"description":"<p><strong>Fae.dev Figma connector.</strong></p><ol><li>Take high quality Figma designs using auto-layout and text/color styles.</li><li>Combine multiple components into one React component</li><li>Export readable React code</li></ol><p><br></p><p><strong>Supported exports:</strong></p><ul><li>React + Styled Components</li><li>React + SCSS</li><li>React + CSS Modules</li><li>React + CSS (standard classes)</li><li>React + Inline styles</li></ul><p><br></p><p><br></p><p>More info: <a href=\"https://www.fae.dev\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">www.fae.dev</a></p>","id":"949622274776270722","installCount":640,"lastUpdateDate":"2021-10-27T11:51:59.405Z","likeCount":29,"name":"Fae.dev - Design to clean React code (beta)","publisherHandle":"fae","publisherId":"950779871752935538","publisherName":"Fae","runCount":603,"viewCount":1805},{"description":"<ol><li>Select cells of one column</li><li>Run plugin</li><li>Copy Rows from excel (newline as separate value)</li><li>Press Fill</li></ol><p><br></p><pre class=\"ql-syntax\" spellcheck=\"false\">Text Position - is index of text in designed cell\n</pre>","id":"949662645759303566","installCount":571,"lastUpdateDate":"2021-03-17T20:25:05.973Z","likeCount":2,"name":"FillTableCells","publisherHandle":"idlewee","publisherId":"1980253","publisherName":"Anton Alekseev","runCount":643,"viewCount":2249},{"description":"<p>Nigerian Logos is an open-source plugin to import the logos of various Nigerian brands. Built with the <a href=\"https://nigerialogos.com/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">NigerianLogos</a> API.</p>","id":"949697027067571105","installCount":3223,"lastUpdateDate":"2022-03-02T17:59:03.129Z","likeCount":62,"name":"Nigerian Logos","publisherHandle":"seyii","publisherId":"1373999","publisherName":"Seyi Oluwadare","runCount":3061,"viewCount":4094},{"description":"<p>Add measurements to your design, like cad</p><p>How to use:</p><ol><li>Select a frame (or not)</li><li>Select line direction.</li><li>Click new measurement.</li><li>Click recalculate if needed.</li></ol><p><br></p><p>Note: You can select multiple measurements and recalculate them at once.</p>","id":"949750262028441524","installCount":2852,"lastUpdateDate":"2022-02-20T12:31:29.309Z","likeCount":26,"name":"Measurement","publisherHandle":"measurement","publisherId":"26433","publisherName":"Maged Ezzat William","runCount":3590,"viewCount":5984},{"description":"<p><strong>ReBo </strong>is a simple Figma utility allowing you to precisely place, and organize guides to your frames!</p><p><br></p><h2><strong>&nbsp;Features Include...</strong></h2><p>✨&nbsp;Easily&nbsp;add&nbsp;mirrored&nbsp;margin&nbsp;bounds&nbsp;to&nbsp;your&nbsp;frames</p><p>✨&nbsp;Create&nbsp;Columns&nbsp;for&nbsp;a&nbsp;quick&nbsp;column&nbsp;(or&nbsp;row)&nbsp;grid</p><p>✨&nbsp;Save&nbsp;your&nbsp;guides&nbsp;for&nbsp;use&nbsp;later</p><p>✨&nbsp;Quick-guide&nbsp;shortcuts&nbsp;to&nbsp;add&nbsp;center&nbsp;margins</p><p>✨&nbsp;Multi-frame&nbsp;guides&nbsp;clear</p><p>✨&nbsp;<strong>KeyCombo</strong>!&nbsp;<code>Control</code>&nbsp;+&nbsp;<code>Shift&nbsp;</code>+&nbsp;<code>S</code>&nbsp;to&nbsp;save&nbsp;your&nbsp;current&nbsp;guides</p><p><br></p><h2>Adding guides</h2><p>By default, your margins are locked, meaning anything you input on a \"Left\" margin, will mirror the \"Right\" side. Same is true for <strong>Rows</strong> with \"Top\" &amp; \"Bottom\". Once you've entered your desired values, <em>Make sure you have a Frame selected</em>, then hit <code>Add Guides</code>. That's it!</p><p><br></p><p>You can also add columns, and it will respect margins you have placed, if any.</p><p><br></p><h2><strong>Saving guides</strong></h2><p>If adding these settings (columns and margins) are part of your normal workflow, you can save these settings by click the <code>▴</code> on the bottom right corner <strong><em>or</em></strong> press <code>Control</code>+&nbsp;<code>Shift</code>&nbsp;+&nbsp;<code>S</code> to bring up the Save Dialog. Give your guides a name, and bam! it should now appear under <strong>Saved Guides</strong>.</p><p><br></p><p>--</p><p>If you encounter any bugs or usability issues, feel free to DM me on twitter @ltrademark, or leave a comment below.</p>","id":"949842685113537477","installCount":254,"lastUpdateDate":"2021-05-21T15:18:29.236Z","likeCount":19,"name":"ReBo","publisherHandle":"ltrademark","publisherId":"65676","publisherName":"Leo Herrera","runCount":168,"viewCount":760},{"description":"<p>This plugin <strong>analyzes</strong> any design to understand its children’s arrangement. It then automatically deduces the dominant direction and alignment to apply <strong>auto-layout </strong>accordingly. The algorithm automatically runs this process <strong>recursively</strong> until the design and all its children containers become <strong>responsive</strong>. As a result, you can <strong>resize</strong> the design and see how it responds smartly to growing and shrinking content.</p><p>&nbsp;</p><p>To tweak the results, you can undo (Cmd+Z) all changes and make smaller layers responsive rather than fixing the whole design at once.</p><p><br></p><p>Resources:</p><ul><li>Tutorial file: <a href=\"https://www.figma.com/exit?url=http%3A%2F%2Fbit.ly%2Fauto-responsive-figma\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">http://bit.ly/auto-responsive-figma</a> </li><li>Video demo: <a href=\"https://www.figma.com/exit?url=http%3A%2F%2Fbit.ly%2Fauto-responsive-demo\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">http://bit.ly/auto-responsive-demo</a></li></ul>","id":"949920030355361745","installCount":2766,"lastUpdateDate":"2022-04-25T04:43:28.361Z","likeCount":49,"name":"Auto Responsive","publisherHandle":"vietanh","publisherId":"170263","publisherName":"Vietanh Nguyen","runCount":2678,"viewCount":4670},{"description":"<p>Find layers and texts in your design, navigate between the results and replace all in one click.</p><p><br></p><p>Supports Figma files and Figjam.</p><p><br></p><p><strong>How to use:</strong></p><ol><li>Select search scope (Selection / Page / File)</li><li>Type a phrase</li><li>Select if to 'match word'</li><li>Select search elements (Layers / Texts)</li><li>If 'Layers' selected - Choose layer type</li><li>Run the plugin</li><li>Click on the result name to<strong> zoom on layer</strong></li><li><strong>Select </strong>all / specific result</li><li><strong>Replace </strong>the phrase you typed in the layers names / texts with new phrase</li></ol><p><br></p><p><strong>Important notes:</strong></p><ul><li>Don't search for phrases that will return <strong>lots of results</strong>. It will take a long time to get them or the plugin will crash.</li><li>You can't<strong> select all / replace</strong> multiple layers when the results contain layers from different pages</li></ul>","id":"949983833489656822","installCount":17764,"lastUpdateDate":"2022-05-28T19:35:46.331Z","likeCount":178,"name":"Find in page","publisherHandle":"1836422","publisherId":"1836422","publisherName":"Tsurit Ben-Tsur","runCount":17876,"viewCount":26570},{"description":"<h1>Color thief help to generate a color palette from any selected image using the most prominent colors in that image.</h1>","id":"950021064390069245","installCount":1192,"lastUpdateDate":"2021-03-07T13:32:52.004Z","likeCount":32,"name":"Color-thief 🥶","publisherHandle":"aroicx","publisherId":"544943","publisherName":"AroicX","runCount":630,"viewCount":3055},{"description":"<p>Standardize the pages your team uses in its workflow and create them on demand.</p><p><br></p><p>PageFlow is open source. You can contribute at:</p><p><br></p><p>https://github.com/rrhyne/pageflow-figma-plugin</p>","id":"950120156580543496","installCount":107,"lastUpdateDate":"2021-03-09T05:18:40.002Z","likeCount":4,"name":"PageFlow","publisherHandle":"robrhyne","publisherId":"3577984","publisherName":"rob rhyne","runCount":129,"viewCount":572},{"description":"<p>flips everything around (created by accident)</p>","id":"950134490363840524","installCount":481,"lastUpdateDate":"2021-03-09T12:32:49.465Z","likeCount":5,"name":"flip","publisherHandle":"crow","publisherId":"945700735909666619","publisherName":"Meshal Alshammari","runCount":625,"viewCount":1621},{"description":"<h1>Voronoi</h1><p>Generate a <a href=\"https://en.wikipedia.org/wiki/Voronoi_diagram\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">Voronoi diagram</a> from a single frame containing one or more ellipses.</p><p><br></p><h2>How To Use</h2><ol><li>Create a frame</li><li>Add ellipses to the frame (the size of the ellipses doesn't matter—just make sure they're visible)</li><li>Select the frame</li><li>Run the plugin with the frame selected</li><li>A new frame containing vector Voronoi cells is non-destructively generated beside the source frame</li></ol><p><br></p><h2>How It Works</h2><p>The plugin uses the X and Y position of the ellipses as the input nodes for creating the Voronoi cells. The cell bounds are calculated using the <a href=\"https://github.com/d3/d3-delaunay\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">d3-delaunay</a> library. The plugin creates a new frame beside the source frame, and draws each cell into it as a vector shape.</p>","id":"950202611096034331","installCount":818,"lastUpdateDate":"2021-03-13T19:51:50.417Z","likeCount":25,"name":"@sposhe/voronoi","publisherHandle":"sposhe","publisherId":"950091864463167533","publisherName":"Sean O'Shea","runCount":615,"viewCount":1825},{"description":"<p>Figma Blueprint gives you a prebuilt structure for common UI parts such as Card and List items.</p><p>UI parts generated by this plugin have minimum styling so that you can easily customize for your own app, and have basic behaviors such as Auto Layout and constraints to save your time.</p>","id":"950361840949586992","installCount":718,"lastUpdateDate":"2021-03-29T15:11:19.334Z","likeCount":29,"name":"Figma Blueprint","publisherHandle":"seya","publisherId":"3945922","publisherName":"Kazuya Seki","runCount":580,"viewCount":2308},{"description":"<p>When triggered this plugin autosizes text to fit within its textbox. If text it too small it will grow to fit the bounds or if text it too big it will shrink to fit the bounds.</p><p><br></p><p>This plugin has three different options to select textboxes to resize.</p><p><br></p><p><strong>Full Page</strong>- Resizes all textboxes on current page</p><p><strong>Selection</strong> - Resizes currently selected textboxes</p><p><strong>Textbox Names</strong> - comma seperated list of textbox names to resize (ex. <em>textbox1,textbox2</em> with resize textboxes that have names <em>textbox1</em> and <em>textbox2</em>)</p><p><br></p><p>Visit <a href=\"https://github.com/anovis/autosizetext\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">github</a> for more information on how to use the plugin, how to report issues, and how to suggest further improvements.</p>","id":"950454402091975756","installCount":592,"lastUpdateDate":"2022-02-13T03:04:50.818Z","likeCount":8,"name":"autosizetext","publisherHandle":"anovis","publisherId":"1316933","publisherName":"Austen Novis","runCount":480,"viewCount":980},{"description":"<p>Automater is a continuously growing collection of basic and advanced utilities. It focuses on extending, and giving quick access to the familiar actions.</p><p><br></p><h2><strong>You can support by</strong></h2><ul><li>🥰 Like</li><li>💬 Comment</li><li>🎉 Share</li><li>☕️ <a href=\"https://www.buymeacoffee.com/andrei.iancu\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Consider buying me a coffee</a></li></ul><p><br></p><h2><strong>MacOS recommended shortcuts</strong></h2><ul><li><code>Command</code> <code>Control</code> <code>Option</code> <code>C</code> - Copy selection</li><li><code>Command</code> <code>Control</code> <code>Option</code> <code>S</code> - Swap instances with copied</li><li><code>Control</code> <code>.</code> - Select next siblings</li><li><code>Control</code> <code>,</code> - Select previous siblings</li></ul>","id":"950514102619019349","installCount":2759,"lastUpdateDate":"2022-07-26T16:18:13.894Z","likeCount":171,"name":"Automater","publisherHandle":"andrei_iancu","publisherId":"363052","publisherName":"Andrei Iancu","runCount":2284,"viewCount":9814},{"description":"<p>It's a Figma plugin for creating trippy generated graphics. Works with any Vector, Shape or Text layer.</p><p><br></p><p><strong>Looper Legacy</strong> is a fork of the original <a href=\"https://www.figma.com/community/plugin/754418010908848797/Looper\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">Looper</a> plugin created by @kuldar with more features.</p><p><br></p><p><strong>Usage</strong></p><p><br></p><p>1. Select a layer to multiply</p><p>2. Set the iteration count</p><p>3. Set the incremental changes for</p><p>- position and rotation</p><p>- scaling change</p><p>- opacity</p><p>- fill color</p><p>- stroke width and color</p><p>4. Magic 🎉</p><p><br></p><p><strong>What's new:</strong></p><ul><li>auto update option</li><li>color picker for fill and stroke</li><li>iteration buttons with predefined values</li><li>presets</li><li>other minor bug fixes and changes</li></ul><p><br></p><p>Examples:</p><p><a href=\"https://twitter.com/kkuldar/status/1173364146114564101\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">https://twitter.com/kkuldar/status/1173364146114564101</a></p><p><a href=\"https://www.figma.com/community/file/847442393560196579\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">https://www.figma.com/community/file/847442393560196579</a></p><p><br></p><p>Open source:</p><p><a href=\"https://github.com/kuldar/figma-looper\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">https://github.com/kuldar/figma-looper</a></p><p><a href=\"https://github.com/girafic/figma-looper\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">https://github.com/girafic/figma-looper</a></p>","id":"950725709690256515","installCount":10899,"lastUpdateDate":"2021-03-08T14:27:59.019Z","likeCount":226,"name":"Looper Legacy","publisherHandle":"girafic","publisherId":"812","publisherName":"Stas Haas","runCount":7943,"viewCount":15098},{"description":"<p>A free and open source plugin to export <strong>Figma</strong> frames to <strong>DeckDeckGo</strong> slides.</p><p><br></p><p>How does it work?</p><p><br></p><ul><li>Use the plugin to export your frames</li><li>Download the resulting file</li><li>Go to the <a href=\"https://app.deckdeckgo.com\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">DeckDeckGo</a> editor</li><li>Open the data to create a new presentation</li></ul><p><br></p><p>About:</p><p><br></p><p><a href=\"https://deckdeckgo.com\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">DeckDeckGo</a> is a web open source editor for presentations.</p><p><br></p><ul><li>Interact with your audience with live polls</li><li>Interact with your presentations with a remote control</li><li>Create, present and share your slides as Progressive Web Apps</li><li>Use predefined rich and responsive templates</li><li>Search Unsplash and Tenor GIFs</li><li>Integrate easily Youtube video</li><li>Showcase your best developer code snippets</li><li>Interact with your presentations with a remote control</li><li>Present and work offline</li><li>Push the source code of your online slides to GitHub</li></ul><p><br></p><p>To reach us on <a href=\"https://join.slack.com/t/deckdeckgo/shared_invite/enQtNzM0NjMwOTc3NTI0LTBlNmFhODNhYmRkMWUxZmU4ZTQ2MDJiNjlmYWZiODNjMDU5OGRjYThlZmZjMTc5YmQ3MzUzMDlhMzk0ZDgzMDY\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Slack</a>, <a href=\"mailto:hello@deckdeckgo.com\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Email</a> or <a href=\"https://twitter.com/deckdeckgo\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Twitter</a>.</p><p><br></p><p>Report any issues or bugs in&nbsp;the plugin repo on <a href=\"https://github.com/deckgo/figma-deckdeckgo-plugin\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">GitHub</a>.</p><p><br></p><p>Your support is very much appreciated!</p>","id":"950777256486678678","installCount":390,"lastUpdateDate":"2022-05-04T14:52:05.998Z","likeCount":6,"name":"Figma to DeckDeckGo","publisherHandle":"daviddalbusco","publisherId":"947421542177143181","publisherName":"David Dal Busco","runCount":452,"viewCount":2228},{"description":"<p>Unwind by playing a classic game of Pong, right in your Figma documents!</p>","id":"950871409613899955","installCount":289,"lastUpdateDate":"2021-03-09T17:53:00.749Z","likeCount":12,"name":"Pong","publisherHandle":"cjdenio","publisherId":"3378260","publisherName":"Caleb Denio","runCount":288,"viewCount":576},{"description":"<p>Turn vector lines into freehand strokes.</p><p><br></p><h2>Quickstart</h2><p><br></p><ol><li>Select the <strong>Pencil Tool </strong>(Shift + P).</li><li>Draw or write something on the canvas.</li><li>Select your pencil lines.</li><li>In this plugin, click the&nbsp;<strong>Apply</strong>&nbsp;button.</li></ol><p><br></p><p>To revert a stroke to its original shape, click the&nbsp;<strong>Reset</strong>&nbsp;button.</p><p><br></p><h2>Options</h2><p><br></p><p>You can use the plugin's options to change the appearance of a mark. See the&nbsp;<strong>Options</strong>&nbsp;section below for more information on each option.</p><p><br></p><p><strong>Size</strong></p><p>Sets the base width for the stroke.</p><p><br></p><p><strong>Thinning</strong></p><p>Sets the effect of pressure on the stroke's width.</p><p><br></p><p><strong>Smoothing</strong></p><p>Reduces the overall number of points. A higher value will produce a smoother stroke.</p><p><br></p><p><strong>Taper Start</strong></p><p>Tapers the beginning of the stroke.</p><p><br></p><p><strong>Taper End</strong></p><p>Tapers the end of the stroke.</p><p><br></p><p><strong>Easing</strong></p><p>Applies an easing curve to the line's simulated pressure.</p><p><br></p><h2>Tips</h2><p><br></p><p>You can continue adjusting a stroke's options after applying the effect.</p><p><br></p><p>Setting a negative&nbsp;<strong>Thinning</strong>&nbsp;value will cause the stroke to become thicker at minimum pressure.</p><p><br></p><p>In general, areas with more vector nodes will result in greater pressure and so a thicker stroke, while areas with less detail will result in less simulated pressure and a thinner stroke. To force a mark to be thicker, try adding extra nodes yourself.</p><p><br></p><p>If you'd like a better drawing experience—including real stylus pressure as well as better simulated pressure—try&nbsp;<a href=\"https://perfect-freehand-example.vercel.app/\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">this link</a>, a demo for the&nbsp;<a href=\"https://github.com/steveruizok/perfect-freehand\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">perfect-freehand</a>&nbsp;library used by this plugin. You can copy your drawing from there and paste it into Figma.</p><p><br></p><h2>Feedback &amp; Contribution</h2><p><br></p><p>If you would like to reach the author, you can tweet me at&nbsp;<a href=\"https://twitter.com/steveruizok\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">@steveruizok</a>.</p><p><br></p><p>The source code for this plugin is available&nbsp;<a href=\"https://github.com/steveruizok/figma-plugin-perfect-freehand/issues/new\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">on Github</a>. If you would like to contribute to the project's code, that's the best place to start.</p><p><br></p><p>If you think you've found a bug in the plugin, please create an issue&nbsp;<a href=\"https://github.com/steveruizok/figma-plugin-perfect-freehand/issues/new\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">here</a>.</p><p><br></p><p>If you have ideas about how to make the plugin better, or for any other concern not mentioned above, post on the&nbsp;<a href=\"https://github.com/steveruizok/figma-plugin-perfect-freehand/discussions\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">Discussions board</a>.</p>","id":"950892731860805817","installCount":5759,"lastUpdateDate":"2021-05-05T16:15:14.550Z","likeCount":110,"name":"Perfect Freehand","publisherHandle":"steveruiz","publisherId":"76300","publisherName":"Steve Ruiz","runCount":4721,"viewCount":9534},{"description":"<p>English | <a href=\"https://github.com/imgcook/imgcook/blob/master/extensions/imgcook-figma/README.zh-CN.md\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">简体中文</a></p><p><br></p><h1>imgcook for Figma</h1><p><br></p><p><strong>A intelligent tool that converts design to code.</strong></p><p><br></p><p><a href=\"https://www.imgcook.com/\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">imgcook</a> is an ingenious chef who specializes in cooking with various images (Sketch / PSD / static images). it will intelligently generate front-end codes, including view codes, data-binding codes, component codes as well as part of business logic codes from different kinds of design documents.</p><p><br></p><p>Our Website: <a href=\"https://www.imgcook.com\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">https://www.imgcook.com</a></p><p><br></p><p><br></p><h2><strong>How to use the imgcook plugin?</strong></h2><p><br></p><p>1. Make sure you are logged into your imgcook account.</p><p>2. In Figma, go to Plugins and pick imgcook. You should see a new export window.</p><p>3. Select any number of frames and hit <code>Export</code>. imgcook will open the \"Export successfully, copied to clipboard!\" prompt pop-up layer, and then click <code>Go to Paste to restore</code>.</p><p><br></p><p><strong>Other functions</strong></p><ul><li>merge: Merge all the layers in the folder into one picture.</li><li>group: Circle some layers under a dom node.</li></ul><p><br></p><p>4. imgcook will open the editor in a new browser tab. Paste and restore in the editor <code>ctr+v</code> and save as a module, and that’s it.</p><p><br></p><p><br></p><h2><strong>Community support</strong></h2><p><br></p><p>For general help using imgcook, please refer to<a href=\"https://www.imgcook.com/docs\" rel=\"noreferrer noopener nofollow\" target=\"_blank\"> the documentation</a>. For additional help, you can use one of these channels to ask a question:</p><p><br></p><p>- <a href=\"https://github.com/taofed/imgcook/issues\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">GitHub</a> (Bug reports)</p><p>- <a href=\"https://medium.com/imgcook\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">Medium</a> (Get blogs and articles)</p><p>- <a href=\"https://zhuanlan.zhihu.com/imgcook\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">知乎专栏</a> (Get blogs and articles in Simplified Chinese)</p>","id":"951438743886938495","installCount":1243,"lastUpdateDate":"2021-04-19T07:26:46.106Z","likeCount":38,"name":"imgcook","publisherHandle":"imgcook","publisherId":"951038801745716919","publisherName":"Imgcook","runCount":1081,"viewCount":3339},{"description":"<p>Diversify your product mockups with the All Hands Mockups.</p><p><br></p><p>This plugin allows you to drop your designs into one of several hands in two easy steps. Simply choose your frame, choose a hand, and voilà, you have a beautiful (and inclusive) mockup to show off your work.</p><p><br></p><p>This plugin is free to all Figma users.</p><p><br></p><p>Devices:</p><ul><li>iPhone X</li></ul><p><br></p><p>Hands:</p><ul><li>BIPOC ✅</li><li>Gender fluid ✅</li><li>Body positive ✅</li><li>Age inclusive ✅</li></ul><p>&nbsp;</p><p>Notes:</p><ul><li>The plugin does not support Safari.</li><li>For best results, frames should be iPhone X aspect ratio (375x812).&nbsp;</li><li>The plugin will only see top-level frames.</li><li>Images are processed client side. Loading time could be impacted by other programs running on your machine, like video recording.</li><li>We introduce additional layers that add effects to make the mockup look more realistic. These layers are editable so you can customize to your preference once the mockup is created.</li></ul><p>&nbsp;</p><p>To see the full collection of All Hands photos, visit: <a href=\"https://nappy.co/all-hands\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">nappy.co/all-hands</a></p>","id":"951652764251042235","installCount":10566,"lastUpdateDate":"2021-03-16T16:48:04.299Z","likeCount":268,"name":"All Hands Mockup Generator | MetaLab x Nappy","publisherHandle":"metalab","publisherId":"1741","publisherName":"MetaLab","runCount":9397,"viewCount":19995},{"description":"<p>Utopia is a systematic approach to fluid type and space design. This plugin generates named type styles and space components from a handful of editable values. This kickstarts your design project with a palette of related building blocks for use at your minimum and maximum viewport widths.</p><p><br></p><p>The purpose of the plugin is to automate the laborious process of creating and organising an initial set of components and styles.</p><p><br></p><p>If you prefer, you can configure your type and space scales at <a href=\"https://utopia.fyi/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">utopia.fyi</a> and paste the resulting URL into this plugin.</p><p><br></p><p>Values can be edited by running the plugin again. Changes made to the generated type styles will persist as long as the styles are not renamed. For instance you can change the font in Figma and re-run the plugin without the text reverting back to the default font. To reset everything, delete the artboards and the U/ style folder.</p>","id":"951884648789524000","installCount":617,"lastUpdateDate":"2022-04-21T13:48:44.045Z","likeCount":27,"name":"Utopia / Fluid type + space calculator","publisherHandle":"trys","publisherId":"2552873","publisherName":"Trys Mudford","runCount":479,"viewCount":1572},{"description":"<p>Text Crop is a plugin that removes the whitespace around text boxes.No longer will you have extra leading above and below your text. Layout designs in the way you intended.</p><p><br></p><p>This plugin creates a component, which dynamically resizes to ensure text is the right size. You can use any styles you want in the component, just hit 'Crop'.</p><p><br></p><p>Fully responsive, the text crop component works inside any auto layout frames, and even works inside nested components!</p><p><br></p><p>Feel free to use this in your design system as a component, it even works across libraries</p><p><br></p><h2>Instructions</h2><p><a href=\"https://www.figma.com/community/file/1106697675173909838?fuid=455413513797375234\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">An in-depth guide has been kindly written by the James Newson from the NewsKit Design Team.</a></p><p><br></p><ol><li>Create the Text Crop components by running the command 'Create Components'</li><li>Make an instance of the crop component. Change any of the text properties, the plugin will handle them.</li><li>For paragraphs use the variant \"multi-line\" switch</li><li>Open the Instance cropping panel. 'Crop Instances'</li><li>Set your cropping preferences, and click \"Crop\"</li></ol><p><br></p><p>Text Crop can crop multiple selections, and crop entire pages of Text Crop instances using the relaunch buttons in the side panel.</p>","id":"951930713294228024","installCount":2132,"lastUpdateDate":"2022-04-15T19:12:07.189Z","likeCount":57,"name":"Text Crop","publisherHandle":"Finch","publisherId":"167182","publisherName":"Luke Finch","runCount":1835,"viewCount":5106},{"description":"<p>RELAY can make the collaboration smoother for business, product, design, and R&amp;D. And also increasing the efficiency of online management in design projects.</p><p>We are trying to develop a workplace for one-stop design assistance that provides online design draft management, intelligent design marking, slice download, design draft comment, edition management, style code, and other core abilities.</p><p>Please visit the official website for tutorials <a href=\"https://relay.jd.com/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://relay.jd.com</a></p>","id":"952162111950747252","installCount":520,"lastUpdateDate":"2022-07-21T11:35:43.724Z","likeCount":28,"name":"RELAAAY","publisherHandle":"RELAY_JD","publisherId":"952137703764313634","publisherName":"RELAY","runCount":533,"viewCount":2052},{"description":"<h2>🔥🤩💥NON-UI Plugin</h2><h2>Select a frame 🖼 or frames 🖼🖼🖼 that could contain instances 🐔 or masters 🥚 → run the plugin ⛹️‍♂️🧨 → <strong>DETACH THEM ALL!!! </strong>🌋⚡️🔥</h2><p><br></p><p>✧⋄⋆⋅⋆⋄✧⋄⋆⋅⋆⋄✧⋄⋆⋅⋆⋄✧⋄⋆⋅⋆⋄✧</p><p><br></p><h1>👉🏾👉🏾👉🏾 <a href=\"https://github.com/PavelLaptev/DETACH-WITHIN-FRAME\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">Github Project here</a></h1><p><br></p><p>✧❁❁❁✧✿✿✿✧❁❁❁✧</p><p><br></p><h1>💸💰💶 <a href=\"http://www.paypal.me/pavellaptev\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">Support plugin</a></h1><p><br></p><p>╱╲❀╱╲╱╲❀╱╲╱╲❀╱╲</p>","id":"952189489892583044","installCount":1260,"lastUpdateDate":"2021-03-23T14:26:47.138Z","likeCount":35,"name":"Detach within frames","publisherHandle":"PavelLaptev","publisherId":"134689","publisherName":"Pavel Laptev","runCount":1445,"viewCount":2614},{"description":"<p>How many times have you created a rectangle, ellipse or image and styled it, only to realise that you need it to be the frame background instead because Auto-Layout ruins everything?</p><p><br></p><p>Well, with Shape››frame, you can simply run the <code>Shape to Frame</code> plugin command from the Figma menu to immediately convert your selected rectangle, ellipse or image into a Frame with all the properties automatically applied.</p><p><br></p><p>You can also convert any of those shapes back into Frames too with the <code>Frame to Shape</code> command.</p><p><br></p><p>And, if you want to apply Auto Layout properties, you can run the <code>Shape to Auto Layout Frame</code> command to do so.</p><p><br></p><p>Finally, if you want to convert those pesky Groups into Frames, well, now you can too with <code>Group to Frame</code>!</p><p><br></p><p>This applies to <strong>all</strong> shapes in your selection. Note that <code>Group to Frame</code> expects a base Rectangle layer currently.</p>","id":"952557548511056612","installCount":2568,"lastUpdateDate":"2022-04-11T13:35:14.834Z","likeCount":66,"name":"Node››frame","publisherHandle":"_kejk","publisherId":"3878431","publisherName":"Karl Koch","runCount":2521,"viewCount":5942},{"description":"<p><strong>Meet Scribe – The Mail Merge for Figma for crafting data-driven graphics.</strong></p><p><br></p><p>Scribe can help you automate and mass generate frames with real dynamic data!</p><p><br></p><p>===</p><p>Let me walk you through an example. You are Albus Dumbledore and you need to generate acceptance letters for the new batch at Hogwarts. The new batch has 40 students and Professor McGonagall has already handed off the letter to you on Figma.</p><p><br></p><p>Now, you are definitely not going to change the name and export the letter 40 times. That's too brutal. That's too naïve.</p><p>Let Scribe cast its magic.</p><p>===</p><p><br></p><p>And with this new and upgraded version – <strong>Scribe is more powerful than ever.</strong></p><p><br></p><h2><strong>Here's what Scribe can do:</strong></h2><p>💿 Import data from a CSV or a Google Sheet</p><p>🎞 Generate from multiple frames in one go</p><p>🔒 No more publicly published Google Sheets. Scribe Bot can now be added to your Sheet and Drive as a collaborator</p><p>💬 Replace the content of Text Layers</p><p>🗯 Partially replace the content of Text Layers</p><p>📸 Replace fill of Frame Layer with images</p><p>⚡️ Transform layers with Customisations</p><p>☁️ Special integration with Google Drive to make managing images painless</p><p>📦 Customise your exports</p><p>🏎 Under the hood, Scribe is rewritten from scratch with performance at the centre stage. On my machine (MacBook Pro 2020, M1), It generated 1000 frames with Text Layers in about 724 seconds. That's 0.72 seconds per frame. That's ffaasstt!</p><p><br></p><h2><strong>How to use:</strong></h2><p><strong>✏️ Name the layers</strong></p><p>The layer names of text layers must begin with a <code>#</code> followed by the field name of the Data Source column that they'd be substituted by.</p><p>For example: For a Data Source containing names of people in the column <code>name</code> , the name of the text layer in Figma would be <code>#name</code>. <em>Naming is case-sensitive.</em></p><p>There are plenty more customisations available in the documentation.</p><p><br></p><p><strong>🏃‍♀️ Run Scribe</strong></p><p>Select your frame and run Scribe.</p><p><br></p><p><strong>📀 Import data</strong></p><p>You can import the data from a CSV file or a Google Sheet.</p><p><br></p><p><strong>⚙️ Configure and scribe</strong></p><p>Tweak some settings to make the setup really personal. Finally, scribe and have your graphics handcrafted and exported to you in mere seconds.</p><p><br></p><h2><strong>Why Scribe?</strong></h2><p>There's so much Scribe can do.</p><p>- Generate certificates for the awesome attendees of your conference</p><p>- Perform a batch generation of coupons</p><p>- Create personalised gratitude-full letters for all your small-business supporters</p><p><br></p><p>Give Scribe a try if you want to:</p><p>- Create beautiful data-driven graphics in a fraction of the time it takes to do by hand</p><p>- Automate the process of creating a bunch of graphics with real data</p><p><br></p><p>There's a Kitchen Sink available here to showcase the power of Scribe:&nbsp;</p><p>👾 https://youtu.be/EOWnPWuPNPI</p><p><br></p><p>And here's the entire documentation:</p><p>📝 https://docs.scribe.ishanchhabra.com</p>","id":"952689592792995578","installCount":570,"lastUpdateDate":"2022-05-14T19:59:13.926Z","likeCount":28,"name":"Scribe","publisherHandle":"chh_abracadabra","publisherId":"3224526","publisherName":"Ishan Chhabra","runCount":468,"viewCount":2884},{"description":"<h2>Based CDN</h2><p><a href=\"https://www.basedcdn.com/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">basedcdn.com</a> is a design to development asset pipeline. We make it possible for your design team to seamlessly make updates to assets in production without requiring development resources. We enable your team to make required design changes and publish these to a CDN. Once published you can share all of your asset URL's with development to use as the asset source.</p><p><br></p><h2>How to Install</h2><ol><li>Install on Figma plugin community</li><li>Provide your email and namespace.</li><li>Start publishing your assets.</li><li>Share your BasedCDN URL's with your development team.</li></ol><p><br></p><h2>FAQ</h2><p><strong>What is BasedCDN?</strong></p><ul><li>BasedCDN is a design to development asset pipeline. We make it possible for your design team to seamlessly make updates to assets in production without requiring development resources. We enable your team to make required design changes and publish these to a CDN. Once published you can share all of your asset URL's with development to use as the asset source.</li></ul><p><strong>Why do you need my email?</strong></p><ul><li>We use your email as your internal ID and as a way to communicate with you.</li></ul><p><strong>What is a namespace?</strong></p><ul><li>The namespace is used as a unique resource identifier. This namespace will be used on all of your URL's in this format:&nbsp;<code>https://static.basedcdn.com/&lt;namespace&gt;/asset.png</code></li></ul><p><strong>How much does this cost?</strong></p><ul><li>Free! ...up to the first 10,000 requests. After your account has reached 10,000 requests we will contact you on our pricing options.</li></ul><p><strong>How long does it take to update?</strong></p><ul><li>Assets will update instantly but in somecases up to 15 seconds. After an asset is updated we invalidate all versions of the previously cached asset.</li></ul><p><strong>What format is the asset in?</strong></p><ul><li>We support PNG and SVG assets</li></ul><p><strong>How do I install my assets on NPM?</strong></p><ul><li>An NPM install link is provided while viewing all of your assets.</li></ul><p><br></p><p><br></p><p><br></p><p>For more information please visit <a href=\"https://www.basedcdn.com\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">basedcdn.com</a></p>","id":"952719219374967553","installCount":589,"lastUpdateDate":"2022-02-15T02:46:55.580Z","likeCount":10,"name":"Based CDN","publisherHandle":"based","publisherId":"847499","publisherName":"Based CDN","runCount":403,"viewCount":2292},{"description":"<h1>Poisson</h1><p>Generates a random distribution of one or more elements a minimum distance apart. Optionally randomizes rotation.</p><p><br></p><h2>How to Use</h2><ol><li>Create a frame</li><li>Add one or more elements to the frame (these can be shapes, component instances, or other frames)</li><li>Select the frame</li><li>Run the plugin</li><li>Set a minimum distance threshold (and optionally set if rotation should be randomized)</li><li>Press the \"Create\" button</li></ol><p><br></p><h2>How it Works</h2><p>The plugin creates a new frame beside the source frame, and draws copies of the source element(s) using the poisson-disc distribution algorithm until the frame is filled. If more than one source element is used, the source element for each node is chosen randomly.</p><p><br></p><h2>Under the Hood</h2><p>The plugin uses Beau Gunderson's <code><a href=\"https://github.com/beaugunderson/poisson-disc-sampler\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">poisson-disk-sampler</a></code> javascript package, which is based on <a href=\"http://bl.ocks.org/mbostock/19168c663618b7f07158\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">Mike Bostock's implementation</a> of <a href=\"https://www.jasondavies.com/poisson-disc/\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">Jason Davies' implementation</a> of <a href=\"https://www.cct.lsu.edu/~fharhad/ganbatte/siggraph2007/CD2/content/sketches/0250.pdf\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">Bridson's algorithm</a>. View Mike Bostock's great explanation of <a href=\"https://bl.ocks.org/mbostock/dbb02448b0f93e4c82c3\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">how poisson-disc sampling works</a>.</p>","id":"952740405797990147","installCount":934,"lastUpdateDate":"2021-03-31T21:20:12.100Z","likeCount":25,"name":"@sposhe/poisson","publisherHandle":"sposhe","publisherId":"950091864463167533","publisherName":"Sean O'Shea","runCount":799,"viewCount":2251},{"description":"<p>Hey folks,</p><p>I'm paying at-least $25 to $30 a month out of my pocket to keep the server running.</p><p><br></p><p>And the monthly costs are constantly increasing as more people are using it. Please consider donating</p><p><br></p><p><strong>Please consider donating</strong></p><p><a href=\"https://buymeacoffee.com/HzGaYrm\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://buymeacoffee.com/HzGaYrm</a></p><p><br></p><p>—————————————</p><p><br></p><p>Upload Figma frames to Google Slides with ease. For a hassle free presentation making.</p><p><br></p><p><a href=\"https://sync-to-slides.com/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://sync-to-slides.com/</a></p>","id":"952824515190483725","installCount":4774,"lastUpdateDate":"2021-05-24T06:34:00.027Z","likeCount":85,"name":"Sync to Slides","publisherHandle":"websiddu","publisherId":"31601","publisherName":"Siddhartha Gudipati","runCount":3629,"viewCount":11553},{"description":"<p>Nicolas Cage Image Replacer is an easy way to bring one of the most meme-actors into your Figma file. It's also could be a fun way to prank colleagues 😃</p><p><br></p><h2>🍽<strong> How to use</strong></h2><p>Run the plugin. Click on the <strong>\"Cage on the page!\"</strong> button — the plugin will take all frames or shapes with the image fill and add an additional Nicolas Cage image on the top.</p><p><br></p><h2><strong>⚙️ How it works</strong></h2><ul><li>The plugin <strong>don't replace the existing image</strong>, but add an additional image fill to the layer on the top.</li><li>You <strong>can remove all Cage images</strong> by just one button.</li><li>You can <strong>remove all Cage images even if you closed the plugin</strong>. All images with hash IDs will be associated with the plugin until you delete them. Hash IDs will be created for each page where you run the plugin.</li></ul><p><br></p><h2><strong>📺 </strong><a href=\"https://youtu.be/LRYkoxEPe3w\" rel=\"noreferrer noopener nofollow\" target=\"_blank\"><strong>Youtube Demo</strong></a></h2><h2><strong>🕹 </strong><a href=\"https://github.com/PavelLaptev/Nicolas-Cage-Figma\" rel=\"noreferrer noopener nofollow\" target=\"_blank\"><strong>GitHub Repo</strong></a></h2>","id":"953318991680776075","installCount":428,"lastUpdateDate":"2021-03-31T22:17:00.722Z","likeCount":32,"name":"Nicolas Cage Image Replacer","publisherHandle":"PavelLaptev","publisherId":"134689","publisherName":"Pavel Laptev","runCount":386,"viewCount":1352},{"description":"<p>This Figma plugin enables you to delete multiple pages at once. Nothing more, nothing less.</p><p><br></p><h2>How to use</h2><p>In Figma, go to 'Plugins &gt; Delete multiple pages'. Select the pages you want to delete and press the button to continue.</p><p>You can manually refresh the list of pages if you need to.</p><p><br></p><h2>Roadmap</h2><ul><li>Delete pages by (exact) name.</li></ul>","id":"953656637827255284","installCount":954,"lastUpdateDate":"2022-04-20T14:39:18.879Z","likeCount":19,"name":"Delete multiple pages","publisherHandle":"mzilverberg","publisherId":"875359516438441275","publisherName":"Maarten Zilverberg","runCount":952,"viewCount":1470},{"description":"<p>Figma plugin for styling and painting your layouts with different color themes.</p><p><br></p><p>Provides additional options for managing and editing styles in your layout, as well as a new method of organizing them for working with projects that are unified in different styles.</p><p><br></p><p>The plugin also allows you to work with theme schemas in json, with the ability to import and export them, which can also be convenient for developers to work with styles and their communication with designers.</p><p><br></p><p><a href=\"https://github.com/friktor/figma-complex-themes/blob/master/samples/sample.gif\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">Sample of using</a></p><p><a href=\"https://github.com/friktor/figma-complex-themes/blob/master/samples/sample.fig\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">Sample mockup</a></p><p><br></p><h2>What does plugin do</h2><p>- Styles</p><p>- Themes</p><p>- Create new theme</p><p>- Duplicate existing theme</p><p>- Remove theme</p><p>- Create theme with styles from selected layers (it groups same styles, and allows you to adapt existing mockups for subsequent adaptation to themes)</p><p>- Styles group</p><p>- Duplicate styles group</p><p>- Remove styles group</p><p>- Styles</p><p>- Search styles</p><p>- Rename style, move to another theme or group</p><p>- Select all nodes with style (double click on style preview circle in list)</p><p>- Edit style</p><p>- Simple color picker for solid colors</p><p>- Simple gradient picker for create gradient (unstable!)</p><p>- Redrawer</p><p>- Nested redraw selected nodes with entries</p><p>- Redraw one of selected nodes</p><p>- Redraw all selected nodes</p><p>- Redraw supported for</p><p>- Stroke paint styles</p><p>- Fill paint styles</p><p>- Text styles (but at the moment, only a named style template can be created in the plugin, you cannot change it in the plugin - use figma tools)</p><p>- Library</p><p>- Store your themes and apply it to new mockup</p><p>- Download serialized json of theme (can be useful for example to give to the programmer necessary variables for all components)</p><p><br></p><h2>How it works?</h2><p>The core feature of this plugin is redrawer. It works based on style naming conventions: <code>GroupName[theme_name]/StyleName</code> or <code>Button[light]/Primary</code></p><p><br></p><p>The core concept of this convention I'm took from <a href=\"https://github.com/glmrvn/Appearance-figma-plugin\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">Appearance Plugin</a>.</p><p><br></p><p>But this approach is not native to figma, and therefore adding each such style manually - is rather annoying and time-consuming, so the plugin has its own style and theme editor to simplify the naming process and quickly insert the desired styles.</p><p><br></p><p>This is convenient because you can work with one target layout, and then simply duplicate the existing theme, and replace the necessary styles - so you can quickly create a new layout variation.</p><p><br></p><h2>Is it stable?</h2><p>This is an alpha release, it implements the basic concept of working with themes, styles, redrawing. Most of them work stably, but this is not a polished version of the plugin, so in case of any errors and problems, the best option is either to restart the plugin or roll back certain changes in the layout using `Ctrl+Z`.</p><p><br></p><p>At Now the plugin is at the stage of polishing, and this version is intended primarily for enthusiasts to check it in battle, and collect feedback (you can leave issues on github, or write to the mail)</p><p><br></p><h2>Planned improvements</h2><ul><li>Create detailed tutorial video</li><li>Fix reaction bugs in ui side of plugin</li><li>Adding some validators</li><li>Adding simple text style editor</li><li>Adding style guides generator</li></ul><p><br></p><p><a href=\"https://github.com/friktor/figma-complex-themes\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">Source Code</a></p>","id":"953979671302711395","installCount":444,"lastUpdateDate":"2021-11-23T23:44:48.810Z","likeCount":15,"name":"Complex Themes","publisherHandle":"tapok_satan","publisherId":"740814","publisherName":"Anton Shramko","runCount":465,"viewCount":2298},{"description":"<p><strong>Dynamic Data</strong>&nbsp;is a simple plug-in that gives you the option of saving time through automation. This plug-in can save you hours of tedious work, enhancing organisation, and thus, productivity.&nbsp;</p><p><br></p><p>Built with the ability to create multiple variations of your artwork, it can integrate a single data source file, such as a CSV or XLSX file with a Figma document. If you are looking for a source that can assist you in saving time and avoiding data entry errors, <strong>Dynamic Data</strong> is the solution.</p><p><br></p><p>Examples of tasks it can assist with include the output of business cards and issuing numerous amounts of certificates for hundreds of individuals. Any job that is repetitive or monotonous can be time-consuming, but with <strong>Dynamic Data</strong> these endless hours spent on manually entering text data from a spreadsheet can be re-used using the same design.</p><p><br></p><p><br></p><h2><strong>How to Use Dynamic Data</strong></h2><p><br></p><ol><li>Select a frame layer</li><li>Ensure to rename the dynamic text layers (<em>variable1 ... variable9</em>)</li><li>Tick the \"<em>Variable frame name</em>\" checkbox if you want to rename the new cloned frames (the first column in the spreadsheet will be used)</li><li>Select the spreadsheet with the data</li><li>Select the export format</li><li>Click on Fetch and the new cloned frames will be ready to be exported once finished</li><li>Click on Export and all the files will be exported at once in the format you selected</li></ol><p><br></p><p><br></p><p><strong>Please note the following:</strong></p><ul><li>Naming the variables is not case sensitive.</li><li>The plug-in skips empty columns in the data source file. So, if the first column is empty, the second column will be used for Variable1.</li></ul>","id":"954021564250730610","installCount":2019,"lastUpdateDate":"2022-05-27T04:37:51.936Z","likeCount":84,"name":"Dynamic Data","publisherHandle":"eberawi","publisherId":"1788545","publisherName":"eberawi","runCount":1679,"viewCount":9022},{"description":"<p>Export drawing to SVG, optimize it an then send to external site (Wiki for example)</p><p>Note! Text are exported as text. not as paths.</p><p><br></p><p>External site settings are configured in plugin settings.</p>","id":"954285911681083601","installCount":159,"lastUpdateDate":"2021-12-16T08:56:25.305Z","likeCount":3,"name":"Post SVG to Wiki","publisherHandle":"seregapru","publisherId":"1814259","publisherName":"sergei","runCount":167,"viewCount":536},{"description":"<p>Add single sided borders with shadows</p>","id":"954324466119518433","installCount":624,"lastUpdateDate":"2021-03-20T10:31:23.584Z","likeCount":5,"name":"Shadow Borders","publisherHandle":"pbn","publisherId":"2333396","publisherName":"Peter","runCount":617,"viewCount":1517},{"description":"<p>Drafta is a tool to keep track of project design screens and share them with others. It is a team-oriented service with one-click access to every project, with up-to-date design screens. A sidebar features page names, serving as the sitemap. It makes easy to navigate between screens, especially when you are working on a project with 70+ pages in different stages of completion.</p><p><br></p><p><a href=\"https://drafta.co\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">www.drafta.co</a></p>","id":"954481314936984872","installCount":114,"lastUpdateDate":"2021-03-18T20:49:33.062Z","likeCount":11,"name":"Drafta","publisherHandle":"scadalv","publisherId":"882589","publisherName":"Karl","runCount":57,"viewCount":895},{"description":"<p>This plugin will assist you in the chatbot development process. It provides an automate formatting process of texts components on Figma, converting setences written with italics or bold to costumized markup notations for developers. You can also choose form predefined rules for channels such as&nbsp;whatsapp and HTML notation.</p><p><br></p><p>To use, click on any text element with italics or bold and watch the markup occur. Currently this plugin allows three types of configurations:</p><p><br></p><p>1) WhatsApp Markup</p><p>- Italic: _..._&nbsp;</p><p>- Bold: *...*</p><p><br></p><p>2) HTML Markup</p><p>- Italic: &lt;i&gt;...&lt;/i&gt;</p><p>- Bold: &lt;b&gt;...&lt;/b&gt;</p><p><br></p><p>3) Customized Markup</p><p>- Italic: {{iS}}...{{iE}}</p><p>- Bold: {{bS}}...{{bE}}</p><p><br></p><p>Made with ♥ in Brazil.</p>","id":"954531586394206516","installCount":623,"lastUpdateDate":"2021-08-29T19:25:43.057Z","likeCount":17,"name":"Chatbot Markup","publisherHandle":"jugp","publisherId":"1468897","publisherName":"Juliane","runCount":675,"viewCount":1935},{"description":"<p>Titleitos: basic (Medium)</p><p><br></p><p><strong>Create titles and comments with a click of a button.</strong></p><p><strong>It's that simple.</strong></p><p><br></p><p>Use a keyboard shortcut, or select Titleitos from your plugins menu (or just type it on cmd bar CMD+/) and that's it! you made a titleito!</p><p><br></p><p>If you select an Object / Frame and use the Titleitos plugin, the title will appear above on the y axis. If not, it will just float on your screen for fast use.</p><p><br></p><p><strong>How to add a keyboard shortcut (Mac)?</strong></p><ol><li>Go to System Preferences</li><li>Search for Keyboard</li><li>Click on Shortcuts tab</li><li>Search for \"App Shortcuts\"</li><li>Add Figma.app</li><li>Click on the + and Type in: \"<strong>Titleitos Title Maker</strong>\"</li><li>Chose your shortcut by typing for example: <strong>CMD+Option+Shift+/</strong></li><li>That's it!</li></ol><p><br></p><p>Enjoy!</p><p><br></p><p>(I made this plugin for my own use, but why not to share it?)</p>","id":"954731209270776171","installCount":182,"lastUpdateDate":"2021-03-26T12:28:27.479Z","likeCount":7,"name":"Titleitos Title Maker","publisherHandle":"yuvalez","publisherId":"861340455311179550","publisherName":"Yuval Ezov","runCount":172,"viewCount":744},{"description":"<p>Titleitos: note (Small)</p><p><br></p><p><strong>Create titles and comments with a click of a button.</strong></p><p><strong>It's that simple.</strong></p><p><br></p><p>Use a keyboard shortcut, or select Titleitos from your plugins menu (or just type it on cmd bar CMD+/) and that's it! you made a titleito!</p><p><br></p><p>If you select an Object / Frame and use the Titleitos plugin, the title will appear above on the y axis. If not, it will just float on your screen for fast use.</p><p><br></p><p><strong>How to add a keyboard shortcut (Mac)?</strong></p><ol><li>Go to System Preferences</li><li>Search for Keyboard</li><li>Click on Shortcuts tab</li><li>Search for \"App Shortcuts\"</li><li>Add Figma.app</li><li>Click on the + and Type in: \"<strong>Titleitos note</strong>\"</li><li>Chose your shortcut by typing for example: <strong>CMD+Option+Shift+.</strong></li><li>That's it!</li></ol><p><br></p><p>Enjoy!</p><p><br></p><p>(I made this plugin for my own use, but why not to share it?)</p>","id":"954733387898431852","installCount":210,"lastUpdateDate":"2021-03-26T12:28:48.258Z","likeCount":7,"name":"Titleitos note","publisherHandle":"yuvalez","publisherId":"861340455311179550","publisherName":"Yuval Ezov","runCount":246,"viewCount":1004},{"description":"<p>Easy to select brand colors in Japan.</p><p><br></p><p>日本の企業や店舗のブランドカラーを選択できるプラグインです。</p><p><br></p><p>Official Web</p><p><a href=\"https://brandcolor.info/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://brandcolor.info/</a></p>","id":"955011817910389142","installCount":162,"lastUpdateDate":"2022-06-14T07:49:53.571Z","likeCount":3,"name":"Japanese Brand Colors","publisherHandle":"shin_ya","publisherId":"871669266396655431","publisherName":"SHIN-YA","runCount":117,"viewCount":587},{"description":"<p>Titleitos: glow (Large)</p><p><br></p><p><strong>Create titles and comments with a click of a button.</strong></p><p><strong>It's that simple.</strong></p><p><br></p><p>Use a keyboard shortcut, or select Titleitos from your plugins menu (or just type it on cmd bar CMD+/) and that's it! you made a titleito!</p><p><br></p><p>If you select an Object / Frame and use the Titleitos plugin, the title will appear above on the y axis. If not, it will just float on your screen for fast use.</p><p><br></p><p><strong>How to add a keyboard shortcut (Mac)?</strong></p><ol><li>Go to System Preferences</li><li>Search for Keyboard</li><li>Click on Shortcuts tab</li><li>Search for \"App Shortcuts\"</li><li>Add Figma.app</li><li>Click on the + and Type in: \"<strong>Titleitos glow</strong>\"</li><li>Chose your shortcut by typing for example: <strong>CMD+Option+Shift+,</strong></li><li>That's it!</li></ol><p><br></p><p>Enjoy!</p><p><br></p><p>(I made this plugin for my own use, but why not to share it?)</p>","id":"955108381199578544","installCount":240,"lastUpdateDate":"2021-03-26T12:28:36.865Z","likeCount":7,"name":"Titleitos glow","publisherHandle":"yuvalez","publisherId":"861340455311179550","publisherName":"Yuval Ezov","runCount":207,"viewCount":901},{"description":"<p>Titleitos: comment (Tiny)</p><p><br></p><p><strong>Create titles and comments with a click of a button.</strong></p><p><strong>It's that simple.</strong></p><p><br></p><p>Use a keyboard shortcut, or select Titleitos from your plugins menu (or just type it on cmd bar CMD+/) and that's it! you made a titleito!</p><p><br></p><p>If you select an Object / Frame and use the Titleitos plugin, the title will appear above on the y axis. If not, it will just float on your screen for fast use.</p><p><br></p><p><strong>How to add a keyboard shortcut (Mac)?</strong></p><ol><li>Go to System Preferences</li><li>Search for Keyboard</li><li>Click on Shortcuts tab</li><li>Search for \"App Shortcuts\"</li><li>Add Figma.app</li><li>Click on the + and Type in: \"<strong>Titleitos comment</strong>\"</li><li>Chose your shortcut by typing for example: <strong>CMD+Option+Shift+m</strong></li><li>That's it!</li></ol><p><br></p><p>Enjoy!</p><p><br></p><p>(I made this plugin for my own use, but why not to share it?)</p>","id":"955109113124457905","installCount":180,"lastUpdateDate":"2021-03-26T12:28:59.286Z","likeCount":3,"name":"Titleitos comment","publisherHandle":"yuvalez","publisherId":"861340455311179550","publisherName":"Yuval Ezov","runCount":185,"viewCount":818},{"description":"<h2>What</h2><p>Interior designers use 3D/2D elevation renderings with callouts to specific design materials used. It's tedious to add the layout and then add the callouts, while keeping track of what materials are being used for specific clients.</p><p><br></p><h2>How</h2><p>Design board provides a way to simplify this workflow.</p><ol><li>Sync master list of items from google sheets</li><li>Add/update/delete items from plugin (keeps sheet in sync)</li><li>Choose items to add to layout</li><li>Save active items back to sheets</li></ol><p><br></p><h2>Get started</h2><ol><li>Clone the sheets template from <a href=\"https://docs.google.com/spreadsheets/d/1HYwZYhbeVH56Ub8fs5m_H4CFmrnmeGhMe21DOlcJNo0/edit?usp=sharing\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">sample sheet</a>. The spreadsheet needs to have sheets named <code>master</code> and <code>active</code> to read/write items.</li><li>Use <a href=\"https://designboard.destinationeichler.com/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://designboard.destinationeichler.com/</a> to login and get credentials for google sheets access</li><li>Login to plugin using the credentials and view your master items.</li><li>Use a card template from this <a href=\"https://www.figma.com/file/H8Bvsa9OVOkBVs4cRsxqRE/Design-Board-Template?node-id=0%3A1\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">sample</a> figma design. The elements in the template card need to be named as <code>name, desc, qty-val, price-val, cost-val, img</code></li></ol><p><br></p><p><strong>NOTE - </strong>If you don't want to set up a sheet, use <code><strong>mock</strong></code> as the token name and the plugin will load with some test data.</p><p><br></p><h2>Contact</h2><p>Reach out to the team for bug fixes, feature requests use <a href=\"https://docs.google.com/forms/d/e/1FAIpQLSeShkHAXx8kolFvqq0fITs6xZgY1G0lpjIM1H31vYU79WHV7A/viewform?usp=sf_link\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">this</a> form.</p>","id":"955147178019033535","installCount":495,"lastUpdateDate":"2022-03-05T15:34:38.739Z","likeCount":13,"name":"Design Board","publisherHandle":"ayimwos","publisherId":"860873346490866187","publisherName":"Sowmiya Nagarajan","runCount":485,"viewCount":2614},{"description":"<p>⚡️ Get all images of your file! Watch this <a href=\"https://www.youtube.com/watch?v=YcDgpRuKhM8\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">video</a> about \"How to use it\" </p><p><br></p><p>Features:</p><ul><li><strong>Display all images</strong> used in your Figma file</li><li><strong>Target elements</strong> that uses image by clicking on it</li><li><strong>Open original image url</strong> to download raw file</li><li><strong>Copy all images url</strong> in one&nbsp;touch</li><li><strong>Download all images</strong> with generated shell script</li></ul>","id":"955149600865163713","installCount":632,"lastUpdateDate":"2021-03-25T09:13:53.014Z","likeCount":52,"name":"Sources","publisherHandle":"gigantz","publisherId":"1405","publisherName":"Orkhan Jafarov 🦄","runCount":412,"viewCount":2333},{"description":"<p>Make CSV from you styles and typography if you are using prototype for embedded or desktop application and local settings.</p><p><br></p><p>This plugin converts figma styles and typography to CSV strings for fast parsing in embedded and desktop applications.</p><p><br></p><p>Color style supports:</p><ul><li>SOLID</li><li>Multiple SOLID</li></ul><p><em>coming soon: GRADIENTS</em></p>","id":"955841494824331901","installCount":355,"lastUpdateDate":"2021-03-24T11:05:44.600Z","likeCount":7,"name":"Figma styles to CSV","publisherHandle":"pdp","publisherId":"4210091","publisherName":"Николай Лихошерстов","runCount":304,"viewCount":1181},{"description":"<p>Select elements to inspect their properties and the properties of their children.</p>","id":"955869853916822148","installCount":139,"lastUpdateDate":"2021-03-26T21:26:26.067Z","likeCount":0,"name":"Inspect Element","publisherHandle":"xenodesign","publisherId":"128657","publisherName":"matt","runCount":123,"viewCount":783},{"description":"<p>Easily manage your custom icon library with component and SVG Spritesheet generation.</p>","id":"955982205019431590","installCount":997,"lastUpdateDate":"2021-07-16T03:36:43.346Z","likeCount":13,"name":"elvish svg","publisherHandle":"fallsimply","publisherId":"762","publisherName":"fall simply","runCount":502,"viewCount":2666},{"description":"<p>Selection Mark (Blue)</p><p><br></p><p><strong>Create rectangles around selections.</strong></p><p><br></p><p>Use a keyboard shortcut, or select \"Selection Mark\" from your plugins menu (or just type it on cmd bar CMD+/) and that's it! you made a selection mark!</p><p><br></p><p><strong>How to add a keyboard shortcut (Mac)?</strong></p><ol><li>Go to System Preferences</li><li>Search for Keyboard</li><li>Click on Shortcuts tab</li><li>Search for \"App Shortcuts\"</li><li>Add Figma.app</li><li>Click on the + and Type in: \"<strong>Selection Mark</strong>\"</li><li>Chose your shortcut by typing for example: <strong>CMD+Option+Shift+[</strong></li><li>That's it!</li></ol><p><br></p><p>Enjoy!</p><p><br></p><p>(I made this plugin for my own use, but why not to share it?)</p>","id":"956273561027264252","installCount":141,"lastUpdateDate":"2021-03-27T19:59:48.182Z","likeCount":3,"name":"Selection Mark","publisherHandle":"yuvalez","publisherId":"861340455311179550","publisherName":"Yuval Ezov","runCount":167,"viewCount":847},{"description":"<p>Cover designs all over the place? Updating project statuses got you down? Creating the same pages and messing around with creating sections over an over? This plugin is for you!</p><p><br></p><p>Easily start projects with consistent cover pages and a readme file&nbsp;</p><p><br></p><p>Add sections and pages for things like Eng Handoff, Explore, User Testing etc at the click of a button</p><p><br></p><p>Update the status of the project and have it reflected on the cover quickly and easily&nbsp;</p><p><br></p><p><br></p><p>The plugin source code is available here: </p><p>https://github.com/jzingarelli/headStart</p><p><br></p><p>Please comment with any questions or feature requests, I will try to address them!</p>","id":"956646029952472926","installCount":504,"lastUpdateDate":"2022-04-26T23:55:44.838Z","likeCount":45,"name":"Head Start","publisherHandle":"joeyzingarelli","publisherId":"4416783","publisherName":"Joey Zingarelli","runCount":351,"viewCount":1339},{"description":"<p>GCODE Export for Vector Paths!</p>","id":"956650544710680415","installCount":73,"lastUpdateDate":"2021-03-26T18:01:34.912Z","likeCount":4,"name":"GCODE","publisherHandle":"ajudeht","publisherId":"32931","publisherName":"Aidan Harris-Tyrrell","runCount":53,"viewCount":255},{"description":"<p>Track the local time of everyone on your team, if they're not in the same place with you, so you no longer have to guess. The clock(s) are visible to everyone in the file.</p><p><br></p><p><strong>Pro tips:</strong> Open a <strong>separate</strong> <strong>window</strong> to run this plugin, so the plugin can work in the 'background' while you do your thing.</p>","id":"956815209957585811","installCount":715,"lastUpdateDate":"2021-03-26T01:11:51.931Z","likeCount":34,"name":"World Clock","publisherHandle":"MrBiscuit","publisherId":"1241","publisherName":"Mr.Biscuit","runCount":694,"viewCount":3134},{"description":"<p>Arrow Pointer (green)</p><p>\"This one\" / \"Start here\"</p><p><br></p><p><strong>Create arrow pointer over your selections with a click of a button.</strong></p><p><br></p><p>Use a keyboard shortcut, or select <strong>\"Arrow Pointer\"</strong> from your plugins menu (or just type it on cmd bar CMD+/) and that's it! you made a pointer arrow!</p><p><br></p><p><strong>How to add a keyboard shortcut (Mac)?</strong></p><ul><li>Go to System Preferences</li><li>Search for Keyboard</li><li>Click on Shortcuts tab</li><li>Search for \"App Shortcuts\"</li><li>Add Figma.app</li><li>Click on the + and Type in: <strong>\"Arrow Pointer\"</strong></li><li>Chose your shortcut by typing for example: <strong>CMD+Option+Shift+\\</strong></li><li>That's it!</li></ul><p><br></p><p>Enjoy!</p><p><br></p><p><br></p><p>(I made this plugin for my own use, but why not to share it?)</p>","id":"957609450858527910","installCount":767,"lastUpdateDate":"2021-03-27T11:58:22.368Z","likeCount":5,"name":"Arrow Pointer","publisherHandle":"yuvalez","publisherId":"861340455311179550","publisherName":"Yuval Ezov","runCount":1442,"viewCount":3640},{"description":"<p><strong>J4F</strong> <em>(Jira for Figma) </em>helps you to manage your Jira issues right from Figma. You can change issues status and attach related frames links to the issue in one click. No more jumping between tabs and copy-pasting links.</p><p><br></p><p>J4F is not affiliated with Jira or Figma, it's developed by a third-party developer. </p><p><br></p><p>Before you start, please open \"Settings\" and fill required data.</p><p><br></p><p>The plugin requires an internet connection for work.</p><p><br></p><p>We are in beta now, we will be glad to get any feedback and feature requests right here in comments or by email to karimshakirov+j4f@gmail.com.</p><p><br></p><p>We are using Mixpanel for analytics to make our product better. We store your Email, Jira URL, and Documents IDs to create customer profiles to understand different usage scenarios. We will not share or sell your data.</p><p><br></p><p>Pricing: While in Beta, J4F will be free, later we might change the pricing model.</p>","id":"957889474923510992","installCount":507,"lastUpdateDate":"2021-03-28T12:39:35.092Z","likeCount":19,"name":"J4F","publisherHandle":"k2589","publisherId":"540891","publisherName":"Karim","runCount":407,"viewCount":2541},{"description":"<p>Free yourself from the constraints of linear &amp; radial gradients.</p><p><br></p><p><strong>Mesh Gradient</strong> generates a gradient image with an underlying 2d mesh, and lets you edit the vertices &amp; edges of the mesh to get the perfect gradient look.</p><p><br></p><p>Achieving something similar with existing gradients would be impossible, since layering numerous gradients results in muddied colors and sub-par results.</p><p><br></p><p>Features:</p><ul><li><strong>Live preview</strong> in plugin</li><li><strong>Save</strong> gradients and <strong>load</strong> them later to edit</li><li><strong>Render</strong> high-definition gradient images</li></ul><p><br></p><p>Features in development:</p><ul><li>Color eyedrop tool</li><li>Performance improvements</li></ul><p><br></p><p>Bugs, questions, or feedback? --&gt; <a href=\"https://twitter.com/GuamHat\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://twitter.com/GuamHat</a></p>","id":"958202093377483021","installCount":94533,"lastUpdateDate":"2022-05-13T03:07:21.873Z","likeCount":1510,"name":"Mesh Gradient","publisherHandle":"gautham","publisherId":"1268466","publisherName":"Gautham 🌶","runCount":82159,"viewCount":87320},{"description":"<p>Create voting boxes for your designs. Once created, you can vote on your designs via a button in the sidebar.</p><p><br></p><p><br></p><p><strong>How do I vote?</strong></p><p>1. Select the nodes to vote on.</p><p>2. Run the plugin.</p><p>3. Style the boxes to your taste.</p><p>4. Select the nodes or boxes and vote via the sidebar.</p><p><br></p><p><strong>Who can vote?</strong></p><p>Anyone who has write access to your document. Users with read-only access unfortunately cannot vote.</p><p><br></p><p><strong>Can I vote from presentation view or put a link into my presentation?</strong></p><p>Unfortunately not (yet).</p><p><br></p><p><strong>What if someone removes the plugin-section from the sidebar or deletes the box?</strong></p><p>You can simply run the plugin on the original node again. The voting score will be recovered.</p><p><br></p><p><strong>What will users that don't have the plugin installed see?</strong></p><p>Users still see a plugin section in the sidebar, stating 'Install vote'</p>","id":"958275057915231517","installCount":893,"lastUpdateDate":"2021-04-24T21:37:36.254Z","likeCount":16,"name":"vote","publisherHandle":"PhilipGrefe","publisherId":"1018244","publisherName":"Philip Grefe","runCount":763,"viewCount":2890},{"description":"<p>A simple utility for counting the number of frames in a selection or on a page.</p>","id":"958564537441709436","installCount":1014,"lastUpdateDate":"2021-03-30T03:17:39.417Z","likeCount":9,"name":"Count Frames","publisherHandle":"parker","publisherId":"57094","publisherName":"Parker Henderson","runCount":998,"viewCount":1963},{"description":"<p>Figmage makes it easy to embed your Figma designs on websites and in other places.</p><p><br></p><p>Just copy the link we provide and use it anywhere just like this:</p><p><br></p><p><code>&lt;img src=\"https://figmage.com/myimage\"/&gt;</code></p><p><br></p><p>Publish your changes to update your images, and manage it all from Figma. You don't need to go back and forth from developer to designer to update assets anymore.</p><p><br></p><h2>Why?</h2><p><br></p><p>It's hard to get designs right on the first try, especially for the web.</p><p><br></p><p>Wrong sizes, mismatching colors or disagreement with the team. You're constantly exporting and uploading images.</p><p><br></p><p>Figmage gives you one link for your designs. Simply push your changes from Figma to use everywhere.</p><p><br></p><p><a href=\"https://figmage.com/images/QrZ8n3T4gKwBzij3sVn-T.png\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">[Example]</a></p><p><br></p><h2>Uses</h2><p>Use it wherever you embed images. You can update a frame and push changes without sending new links.</p><p><br></p><ul><li>Blog Posts</li><li>Social Media Covers</li><li>Link Previews</li><li>Slide Shows</li></ul><p><br></p><p>Figmage also works with <strong>Bynder </strong>to store your images.</p>","id":"958586987746249089","installCount":943,"lastUpdateDate":"2022-03-28T05:58:43.255Z","likeCount":47,"name":"Figmage","publisherHandle":"877909e0_286f_4","publisherId":"2310992","publisherName":"Raviteja Lingineni","runCount":842,"viewCount":3026},{"description":"<p>This plugin adds the Acrolinx Sidebar to Figma and FigJam!</p><p><br></p><p>Acrolinx is an AI-powered platform that eliminates content chaos and delivers strategy-aligned content, at scale.</p><p><br></p><p>Our technology captures the way your enterprise communicates, aligns your content with your guidelines, shortens your editorial process with automation, and analyzes the performance of your entire content operation.</p><p><br></p><p>Get customers faster, keep them longer, and reduce risks in communication.</p><p><br></p><p>As you write, the Acrolinx Sidebar guides you to create content that’s aligned with your strategy. Acrolinx ensures you’re using the words and phrases that are relevant to your company tone of voice and the audience you’re trying to reach. See where your content is strong and where it could be stronger with a detailed Acrolinx Scorecard and Analytics insights.</p><p><br></p><p>Acrolinx is not a stand-alone authoring tool. It’s an enterprise tool, <strong>which requires a paid existing Acrolinx account.</strong> If your company doesn’t have Acrolinx installed (or you’re not sure) we’d love to help you learn more.</p><p><br></p><p>Visit www.acrolinx.com to discover how you can supercharge your content.</p>","id":"958664126259609000","installCount":407,"lastUpdateDate":"2022-06-23T12:36:22.344Z","likeCount":10,"name":"Acrolinx for Figma and FigJam","publisherHandle":"2b7e7d5c_7952_4","publisherId":"958650024245328084","publisherName":"Josh","runCount":419,"viewCount":1272},{"description":"<p>A very simple tool to make a selection in Figma and copy the fill colors to a coding language.</p><p><br></p><p>Use special syntax to create incrementing variable names.</p><p>auto c_${1} = ofColor(255, 212, 58, 255);</p>","id":"958718454979702212","installCount":207,"lastUpdateDate":"2021-05-06T18:26:39.047Z","likeCount":5,"name":"Color to Code","publisherHandle":"vanderlin","publisherId":"1065144","publisherName":"Todd Vanderlin","runCount":237,"viewCount":838},{"description":"<p>一个用来生成画框标题（Frame）的插件</p><p><br></p><p><strong>痛点：</strong></p><p>产品经理在导出全部界面图的时候，经常需要给每个界面上都放一个命名的标题。</p><p><br></p><p>这个插件帮你自动做了这件事情，你只需要：</p><ol><li>给每个画框命名</li><li>运行插件</li><li>自动给画框顶上增加一个同名的标题</li></ol><p><br></p><p>如果你修改了画框的数量或者位置，只需要重新运行一次就可以了。</p>","id":"959020946270604837","installCount":161,"lastUpdateDate":"2021-09-02T02:10:39.862Z","likeCount":14,"name":"Auto Frame Title","publisherHandle":"kok","publisherId":"112409","publisherName":"kok","runCount":156,"viewCount":792},{"description":"<p>Simple generator for React Component.</p><p>Select any node and run the plugin, it will&nbsp;generate React code.</p><p><br></p><p>To get most out of this plugin, be sure to</p><ul><li><strong>use Auto Layout as possible</strong> - layout style is derived from Auto Layout properties</li><li><strong>name Nodes appropriately</strong> - Node names are used for component name and class names</li><li><strong>Use Spacer component for different margins in Auto Layout frame </strong>- This is the best way to design and code space in my opinion. Please read the article below for further thoughts on this subject</li></ul><p><br></p><p><a href=\"https://dev.to/seya/how-to-style-margin-with-react-8m9\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://dev.to/seya/how-to-style-margin-with-react-8m9</a></p>","id":"959795830541939498","installCount":4669,"lastUpdateDate":"2022-06-26T06:20:55.265Z","likeCount":109,"name":"Figma to React Component","publisherHandle":"seya","publisherId":"3945922","publisherName":"Kazuya Seki","runCount":4627,"viewCount":15838},{"description":"<p>Extract strings from your frames into a single JSON</p>","id":"959900444171665246","installCount":132,"lastUpdateDate":"2021-04-02T19:42:14.426Z","likeCount":0,"name":"text2json","publisherHandle":"jnrmprd","publisherId":"127411","publisherName":"JR","runCount":127,"viewCount":435},{"description":"<p>Create beautiful chart lines with ease. Edit a randomly generated line to fit perfectly in your chart or choose one of the presets. Go and make your charts better!</p>","id":"960109239648737173","installCount":21321,"lastUpdateDate":"2021-04-17T19:11:52.722Z","likeCount":176,"name":"Chartline","publisherHandle":"fransruben","publisherId":"916830","publisherName":"Ruben","runCount":19273,"viewCount":20871},{"description":"<p>To solve for UX copy, we at Zeta built Ghost UXWriter plugin to make UX copy accessible and humane. UX designers, UX writers, and developers can use the plugin, making it a go-to plugin every time they need a hand with UX copy.</p><p><br></p><p><strong>So here's what in-store for you :</strong></p><ul><li>Operates on the designer’s art board.</li><li>Inserts selected copy directly in the text field or copy to the clipboard.</li><li>Categorise UX copy with a voice and tone variation ranging from plain, casual, and playful.</li><li>Has integrated search engine to find the copy that you are quickly looking for.</li><li>Bookmark the copy &amp; add your own personal copy.</li></ul>","id":"960778033371641874","installCount":4584,"lastUpdateDate":"2021-09-20T04:31:48.117Z","likeCount":163,"name":"Ghost UXWriter","publisherHandle":"zetadesign","publisherId":"904995377312408848","publisherName":"Zeta","runCount":3845,"viewCount":7924},{"description":"<p>Plugin for checking the correct structure and styles of form layouts that are based on the qpalette design system</p><p><br></p><p>The plugin is based on deeply reworked sources of</p><p><a href=\"https://www.figma.com/community/plugin/801195587640428208/Design-Lint?fuid=753936249196165850\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Design Lint – Figma</a></p>","id":"961003645772937312","installCount":215,"lastUpdateDate":"2022-07-20T15:56:36.479Z","likeCount":1,"name":"QPallete Linter","publisherHandle":"thedainilius","publisherId":"2197443","publisherName":"Danila Luzhin","runCount":191,"viewCount":523},{"description":"<p>zip | base64</p>","id":"961091183292849274","installCount":34,"lastUpdateDate":"2021-04-06T05:38:34.867Z","likeCount":0,"name":"iZip64","publisherHandle":"56878af6_c36d_4","publisherId":"953185799318351807","publisherName":"余程洋","runCount":6,"viewCount":123},{"description":"<p>Let you use Markdown in Figma</p><p>Instructions:</p><ul><li>Select the text layer</li><li>Cmd+/ Search Markdown</li><li>Run the plugin</li></ul><p><br></p><p>帮助你在 Figma 中使用 Markdown</p><p>使用方法：</p><ul><li>选中文本图层</li><li>Cmd+/ 搜索 Markdown</li><li>运行插件</li></ul>","id":"961125519572930689","installCount":442,"lastUpdateDate":"2021-05-19T04:41:49.283Z","likeCount":13,"name":"Markdown","publisherHandle":"jiangzilong","publisherId":"923515618965061354","publisherName":"ZiLong Jiang","runCount":479,"viewCount":2363},{"description":"<p>A Figma plugin that allows you to merge multiple `<code>SVG</code>` paths into a single one for selected icons and then save them as a `<code>JSON</code>` file.</p><p><br></p><h2><strong>📺 </strong><a href=\"https://youtu.be/po-FzKP7wjc\" rel=\"noreferrer noopener nofollow\" target=\"_blank\"><strong>Youtube demo</strong></a></h2><h2><strong>🤖 </strong><a href=\"https://www.figma.com/file/r5TqC09BRHtNanD8vSBkqA/%F0%9F%97%9C%EF%B8%8F-Icons-Squeeze-machine-TEST-ICONS?node-id=1%3A768\" rel=\"noreferrer noopener nofollow\" target=\"_blank\"><strong>Icons to test</strong></a></h2><h2>👾 <a href=\"https://github.com/PavelLaptev/Icons-json-figma\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">GitHub Page</a></h2><p><br></p><p>--</p><p><br></p><h1><strong>What is the plugin for</strong></h1><p><br></p><p>In case if you use icons in a project as an `<code>Icon</code>` component, important to store all assets in one place and as compact as possible. In this case it better to load only one `<code>path d</code>` instead of store multiple paths for one SVG icon.</p><p><br></p><p><strong>If you not familiar with the method </strong><a href=\"https://david-gilbertson.medium.com/icons-as-react-components-de3e33cb8792\" rel=\"noreferrer noopener nofollow\" target=\"_blank\"><strong>check this article</strong></a></p><p><br></p><p>So the plugin cuts the chain ⛓️: <strong><em>export icons → load to icomoon.io → export and save font → extract `JSON` → clean it. 🏁</em></strong></p><p><br></p><p>With the plugin the chain should be ⛓️:<strong> <em>export icons. 🏁</em></strong></p><p><br></p><p>--</p><p><br></p><h1><strong>How to use</strong></h1><p><br></p><ol><li>Run the plugin.</li><li>Select your icons set. Important — icons should be selected, not the only one frame where they are. In this case the plugin will try to merge all icons into one within this frame.</li><li>Click on the `<code>Preview</code>` button.</li><li>Check that all icons are displayed as they should.</li><li>Click on the `Download JSON` button.</li></ol><p><br></p><p>Plugin will generate `<code>ZIP</code>` folder with `<code>JSON</code>` file and `<code>HTML</code>` file that will preview all icons from the saved `<code>JSON</code>`.</p><p><br></p><p>--</p><p><br></p><h1>How it works</h1><p><br></p><p>The full `SVG` code for an icon will be:</p><p><code>&lt;svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"&gt;</code></p><p><code>&lt;path d=\"M8 15C8.55228 15 9 14.5523 9 14C9 13.4477 8.55228 13 8 13C7.44772 13 7 13.4477 7 14C7 14.5523 7.44772 15 8 15Z\" fill=\"#17191C\"/&gt;</code></p><p><code>&lt;path d=\"M12 15C12.5523 15 13 14.5523 13 14C13 13.4477 12.5523 13 12 13C11.4477 13 11 13.4477 11 14C11 14.5523 11.4477 15 12 15Z\" fill=\"#17191C\"/&gt;</code></p><p><code>&lt;path d=\"M17 14C17 14.5523 16.5523 15 16 15C15.4477 15 15 14.5523 15 14C15 13.4477 15.4477 13 16 13C16.5523 13 17 13.4477 17 14Z\" fill=\"#17191C\"/&gt;</code></p><p><code>&lt;rect x=\"7\" y=\"1\" width=\"2\" height=\"2\" fill=\"#17191C\"/&gt;</code></p><p><code>&lt;rect x=\"15\" y=\"1\" width=\"2\" height=\"2\" fill=\"#17191C\"/&gt;</code></p><p><code>&lt;path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M2 7C2 4.79086 3.79086 3 6 3H7V5H9V3H15V5H17V3H18C20.2091 3 22 4.79086 22 7V17C22 19.2091 20.2091 21 18 21H6C3.79086 21 2 19.2091 2 17V7ZM4 9V17C4 18.1046 4.89543 19 6 19H18C19.1046 19 20 18.1046 20 17V9H4Z\" fill=\"#17191C\"/&gt;</code></p><p><code>&lt;/svg&gt;</code></p><p><br></p><p>The shortened code generated by the plugin will be:</p><p><code>\"M8 15C8.55228 15 9 14.5523 9 14C9 13.4477 8.55228 13 8 13C7.44772 13 7 13.4477 7 14C7 14.5523 7.44772 15 8 15Z M12 15C12.5523 15 13 14.5523 13 14C13 13.4477 12.5523 13 12 13C11.4477 13 11 13.4477 11 14C11 14.5523 11.4477 15 12 15Z M16 15C16.5523 15 17 14.5523 17 14C17 13.4477 16.5523 13 16 13C15.4477 13 15 13.4477 15 14C15 14.5523 15.4477 15 16 15Z M9 1H7V3H6C3.79086 3 2 4.79086 2 7V17C2 19.2091 3.79086 21 6 21H18C20.2091 21 22 19.2091 22 17V7C22 4.79086 20.2091 3 18 3H17V1H15V3H9V1ZM9 3V5H7V3H9ZM4 17V9H20V17C20 18.1046 19.1046 19 18 19H6C4.89543 19 4 18.1046 4 17Z M15 3V5H17V3H15Z\"</code></p><p><br></p><p>--</p><p><br></p><h2><strong>Possible issues</strong></h2><p><br></p><ul><li><strong>Failed union Boolean operation.</strong> Icon elements were merged incorrectly. Solution — fix vector shapes manually — flatten shapes and outline curves. Sometimes the layers order could be an issue. </li><li><strong>You selected a frame with icons but not icons</strong>. Please, note that you need to select icons, not the parent frame.</li></ul><p><br></p><p>--</p><p><br></p><p>Plugin doesn't run any custom code to outline, flatten and union icons, it uses only figma API methods</p>","id":"961245776147091630","installCount":954,"lastUpdateDate":"2021-04-23T20:24:43.304Z","likeCount":27,"name":"ICONS SQUEEZE MACHINE","publisherHandle":"PavelLaptev","publisherId":"134689","publisherName":"Pavel Laptev","runCount":751,"viewCount":2006},{"description":"<p>Parses some stuff for eliq :).</p><p>Don't use this.</p>","id":"961247444145567920","installCount":42,"lastUpdateDate":"2021-04-14T12:23:31.267Z","likeCount":1,"name":"Eliq Json Parser","publisherHandle":"d004cdcb_a694_4","publisherId":"954682551598436307","publisherName":"Olof Enström","runCount":21,"viewCount":203},{"description":"<p>Sometimes you need to batch manage a bunch of images. Setting the scale mode can be finicky or annoying at scale, so can resizing a whole set of images or removing that pesky grey background layer that shows up.</p><p><br></p><p>Batch››Image-format resolves all of these issues in a single, helpful utility plugin.</p>","id":"961254533460516019","installCount":492,"lastUpdateDate":"2022-07-16T09:15:51.650Z","likeCount":15,"name":"Batch››format","publisherHandle":"_kejk","publisherId":"3878431","publisherName":"Karl Koch","runCount":400,"viewCount":1630},{"description":"<p>Generate an organized file structure for new design projects.</p>","id":"961268319224363191","installCount":180,"lastUpdateDate":"2022-05-12T21:24:58.943Z","likeCount":11,"name":"SM Scaffold","publisherHandle":"mapk","publisherId":"951653567094537154","publisherName":"Mark Uraine","runCount":196,"viewCount":801},{"description":"<p>Jitter is a fast, simple and friendly animation tool. It lets you animate your Figma designs quickly: import your pixel-perfect frames in 1 click, add animations in a few seconds, customize everything, and export the animation as a video, GIF or Lottie. You can also create your motion design system with animated components and animation styles you can reuse on all your layers, and let developers inspect animation parameters.</p><p><br></p><h2><strong>What is Jitter?</strong></h2><p><a href=\"https://jitter.video?utm_source=figma&amp;utm_medium=referral&amp;utm_id=figma-plugin\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Jitter</a> is an easy-to-use animation tool on the web. It's like Figma, but for motion design: we enable creators to design stunning animated content and interfaces, with their teams. Jitter is a modern alternative to After Effects, with no learning curve: it's fast, easy, collaborative, and you can export your animations as HD video (60 fps), GIF or Lottie.</p><p><br></p><h2>How to use the plugin</h2><ol><li>Open the plugin</li><li>Select a frame, and click the “Export” button</li><li>Open the project in Jitter and create some magic! ✨</li></ol><h2><br></h2><h2>FAQ</h2><p><strong>What kind of animations can I do with Jitter?</strong></p><p>Whether you are designing an app, a website, an illustration, a presentation video, a social media post, an Instagram Story, a YouTube intro, or anything else, you can import your design into Jitter in 1 click and animate right away. We are a design tool like Figma, so we give you total control over the parameters: your imagination is the limit.</p><p><br></p><p><strong>Can I animate text?</strong></p><p>Yes, text animation is actually our specialty: you can put a text in motion with an animation preset, and then customize several parameters like speed, duration, easing – and more importantly, you can choose if you want to animate letter by letter, word by word, or line by line.</p><p><br></p><p><strong>Can I design micro-interactions?</strong></p><p>Yes, you can animate all the basic properties of your layers and masks (position, size, rotation, scale, opacity, corner radius, shadow…).</p><h2><br></h2><p><strong>What format can I export to?</strong></p><p>You can export your animated designs as HD videos (1080p, 60 fps), GIF, and Lottie.</p><p><br></p><p><strong>Can I export my Figma design to Lottie?</strong></p><p>Yes, Jitter actually the best workflow to do that today: you can import your Figma designs in 1 click with this plugin, add your animations in Jitter, and export to Lottie format. You can include your Lottie animations to your apps, websites, Webflow projects, LottieFiles workspace…</p><p><br></p><p><strong>How are you different from other plugins?</strong></p><p>We use a unique way to make animations: After Effects and most animations plugins (Motion, Figmotion, Aninix, SVG Motion, Bannerify and the other Figmatic plugins…) use the traditional keyframe system. Instead, we use an animation model where we give <strong><em>instructions</em></strong> to the layers (like “Slide in”, “Fade out”…): building an animation is more intuitive, and the timeline is easy to read. Building an animation with Jitter is as simple as building an animation in PowerPoint or Keynote, but you have total control over the parameters.</p><h2><br></h2><p><strong>How do I handoff the animation to the developers?</strong></p><p>You can share the project URL, so that your developers can inspect the animation parameters. We know this is a common use case, so we plan to develop the animation inspector further for easy handoff, and to build your own motion design system.</p><p><br></p><p><strong>Does it support all features from Figma?</strong></p><p>Our priority is to make a pixel-perfect import. We support most Figma properties natively. For layers that are too complex to be supported in Jitter, we convert the layer to a PNG or SVG. That way, you always get a pixel-perfect import.</p><p>Here are the known limitations:</p><ul><li>Rich texts (multiple colors or font weight in the same text layer) and Variable fonts are exported as images</li><li>Elements with gradient fills, multiple fills, strokes, multiple shadows or effects are exported as images</li><li>Only simple masks are supported in Jitter (when the masking layer is the last layer of the group) – in all other cases, mask groups are exported as images</li><li>Blend modes are not supported in Jitter</li><li>Individual strokes are not supported</li></ul><p><br></p><p><strong>Can I import multiple artboards?</strong></p><p>At the moment, you can only import one artboard / frame at a time. We will add support for multiple artboards / frames in the future.</p><p><br></p><p><strong>I found a bug, what should I do?</strong></p><p>If you encounter any bugs, please reach out to us and we'll be able to fix it rapidly :) You can contact us at <a href=\"mailto:figma.plugin@jitter.video\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">figma.plugin@jitter.video</a>, or on our website <a href=\"https://jitter.video\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://jitter.video</a>.</p>","id":"961270034818256057","installCount":44890,"lastUpdateDate":"2022-05-25T10:18:35.446Z","likeCount":1028,"name":"Jitter · Animate your Figma designs","publisherHandle":"jittervideo","publisherId":"959755238084347779","publisherName":"Jitter","runCount":40786,"viewCount":85383},{"description":"<h2>fyfill is now \"<strong>covr\"</strong></h2><p><br></p><p>With covr, you can connect your <strong>Spotify</strong> account with <strong>Figma</strong> to use album cover images as fills. You can also put artist names and album titles in text nodes.</p><p><br></p><p>The code is completely <strong>open source</strong> and I will never store any data from you.</p><p><br></p><p><strong>Plugin:</strong> <a href=\"https://github.com/ph1p/figma-covr\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://github.com/ph1p/figma-covr</a></p><p><strong>Server:</strong> <a href=\"https://github.com/ph1p/covr-server\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://github.com/ph1p/covr-server</a></p>","id":"961383676925301983","installCount":903,"lastUpdateDate":"2022-04-21T22:46:39.289Z","likeCount":37,"name":"covr","publisherHandle":"p","publisherId":"791757","publisherName":"Phil","runCount":930,"viewCount":2649},{"description":"<p>The world's first design systems workbook for Figma</p><p><br></p><p>Learn how to build your design system from scratch by doing exercises in Figma</p><p><br></p><p><a href=\"https://www.figmaster.co\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Visit the official website to learn more</a></p><p><br></p><h2><strong>What is Figmaster?</strong></h2><p>In short, the Figmaster plugin is a workbook for Figma that contains a large set of&nbsp;<strong>exercises on how to build your modern design system</strong>&nbsp;from scratch.</p><p><br></p><h2><strong>How does it work?</strong></h2><p>By doing exercises in Figma, you learn and create your guide style and component library simultaneously. It is a format that will help you get the most out of each lesson.&nbsp;<strong>By learning - you create</strong>, and by the way, you get to know keyboard shortcuts, plugins, and techniques of working in Figma that will speed up your workflow. <strong>Everything happens in Figma</strong>&nbsp;- no distractions.</p><p><br></p><h2><strong>Course description</strong></h2><p>Design Systems are becoming so popular because they make products more consistent, accessible, improve their usability, and reduce design decision-making.</p><p>Nowadays, companies and individuals need to learn how to design advanced components, style guides, and documentation in Figma. Improving the workflow and onboarding the new designers to the team is also a challenge.</p><p>In Figmaster, you will learn how to create a design system from scratch in Figma. The Figmaster is purely and simply about practice, so you can start using acquired knowledge right away.</p><p>In this course, you will learn how to set up all the needed&nbsp;<strong>design tokens</strong>, such as defining proper&nbsp;<strong>grids, layouts,</strong>&nbsp;<strong>spacing</strong>, managing icons, choosing and creating&nbsp;<strong>color</strong>&nbsp;and&nbsp;<strong>typographic scales</strong>. You will also learn how to make the&nbsp;<strong>components</strong>&nbsp;like buttons, inputs, modals, text areas, checkboxes, notifications, radio buttons… You will learn how to name components correctly using naming conventions and translate your components into&nbsp;<strong>variants</strong>. You will also learn how to&nbsp;<strong>improve your workflow</strong>&nbsp;by using handy&nbsp;<strong>keyboard shortcuts</strong>,&nbsp;<strong>plugins</strong>, and&nbsp;<strong>tricks</strong>. At the end of this course, you will create your own complete Design System and apply it anywhere&nbsp;<strong>with confidence</strong>.</p><p>In the team version, you will learn how to&nbsp;<strong>work on a design system in a team</strong>&nbsp;and how to&nbsp;<strong>onboard new designers</strong>&nbsp;with the Figmaster. I will also share resources so you can learn more about&nbsp;<strong>design systems theory</strong>&nbsp;and get inspiration from the existing systems.</p><p>We will use the full potential of Figma, making our Design System with&nbsp;<strong>variants</strong>,&nbsp;<strong>auto layout,</strong>&nbsp;and the latest Figma feature:&nbsp;<strong>interactive components</strong>. 🎉</p><p>So if you want to learn how to create a Design System from scratch in Figma,&nbsp;<strong>this is for you.</strong></p><p><br></p><h2>Module 1. Style Guide </h2><p>In the first module, we'll create design tokens and convert them into Figma Styles. We'll prepare the icon library for the entire system. We'll also set up some spacing rules that we'll follow in the next modules.</p><p><br></p><h2><strong>Module 2. Components </strong></h2><p>In the second module, we'll use the Styles, icons, and rules from the previous module to create the components.</p><p><br></p><h2><strong>Module 3. Documentation</strong></h2><p>In the third module, we'll create documentation components and frames. Then, we'll document our components and styles. In this module, you'll also learn how to make your components interactive.</p><p><br></p><h2><strong>Module 4. Use it</strong></h2><p>In the fourth module, we'll build a simple UI with our design system. I'll also show you how to customize it for your needs. That is, change the colors, typography, or component properties to match your product or brand requirements.</p><p><br></p><h2><strong>Module 5. Team license bonus </strong></h2><p>In the last module, I'll show you how to work with a design system we created in a team. You'll also learn how to onboard new designers to the library. As a bonus, you'll also get access to additional resources on design systems, such as links, articles, book recommendations, etc.</p>","id":"961662168712449344","installCount":4898,"lastUpdateDate":"2021-04-07T16:32:58.433Z","likeCount":185,"name":"Figmaster","publisherHandle":"mateusz","publisherId":"267018","publisherName":"Matt Wierzbicki","runCount":3589,"viewCount":8262},{"description":"<p><strong>Optimize your handoff design workflow with version controlling and structured Figma project using the “Clean handoff” free Figma plugin.&nbsp;</strong></p><p><br></p><p>Coordinating between the Design and Development departments while working simultaneously on Figma projects can be a hassle, for the most part, it can take a while for both teams to find an organized path to achieving the ultimate goal from my own experience.&nbsp;</p><p>So how about a new Figma plugin to ameliorate the whole Design/Implementation process?</p><p><br></p><p>The process goes as follows; Designers design mockups (high fidelity) on Figma and then hand them to the Frontend team for implementation. Here’s the pain in this process; edits can still occur from the Design team. Not often, but it can happen. It could be simply by mistake or intentional. Either way, changes have been made while the Developers are working on the same Figma page and specifically on the same Frame.&nbsp;</p><p><br></p><p>Following this encounter, my goal was to generate a sustainable and efficient solution for all who might be facing this type of problem on Figma.</p><p><br></p><p><strong>I then developed a new Figma Plugin that would help teams have:</strong></p><p><br></p><ol><li>Better structures for Figma projects</li><li>Version control system for a better trackability</li><li>Improved workflow between Developers and Designers</li></ol><p><br></p><h2><strong>Easy to use:</strong></h2><p><strong>[First feature] </strong>Generate a structured Figma project by clicking the first option.&nbsp;</p><p><strong>[Second feature] </strong>Open the handoff design modal and follow the steps:</p><ul><li>Select any frames you want for handoff designs (Default: all frames selected).</li><li>Select “Create new page” or handoff frames to an existing page.</li><li>Add a handoff design version number (Required for handoff to a new page) with the option of locking selected frames (toggle).</li><li>Add related Link e.g. asana task, Jira ticket, or Github PR link ... (Optional)</li><li>Add a short description about changes done (Optional)</li><li>Hit the “Handoff designs” button, and the plugin will take it from there 🎉✨ .</li></ul><p><br></p><p>Start improving your workflow today.</p><p><br></p><p>Contributing to the community is such an incredible feeling ♥️, I am happy to receive your feedback to improve this plugin. So&nbsp;<strong>Figmers</strong>, feel free to share your thoughts.</p>","id":"961732653399887186","installCount":469,"lastUpdateDate":"2021-04-11T04:34:20.474Z","likeCount":29,"name":"Clean handoff","publisherHandle":"Samihammami","publisherId":"931359986453909226","publisherName":"Samy Hammami","runCount":424,"viewCount":2791},{"description":"<p>Scaling in Figma is awesome, but it often leaves you with undesired decimal values and you can't pick an exact width or percentage to scale by.</p><p><br></p><p>This plugin makes that process super easy.</p><p><br></p><p>With Scale››better you can scale any number of items in your current selection by percentage, width or height. You can even scale up and down to the largest or smallest item in your selection.</p>","id":"962438678016435824","installCount":4906,"lastUpdateDate":"2022-07-16T17:10:49.614Z","likeCount":145,"name":"Scale››better","publisherHandle":"_kejk","publisherId":"3878431","publisherName":"Karl Koch","runCount":4011,"viewCount":9927},{"description":"<p>Use real development labels in your designs from your <a href=\"http://localise.biz\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">localise.biz</a> projects.</p><p><br></p><p><strong>Features</strong></p><ul><li>Automatically translate your mockups with real copy</li><li>Find any label from Localise and use it in your designs</li><li>Update translations so you don’t have to leave Figma</li><li>Automatically match copy to existing labels</li><li>Compare your Figma copy with Loco labels</li></ul><p><br></p><p><strong>How to use the plugin?</strong></p><p>Labels are linked to localise by using the asset ID as a layer name. A <strong>#</strong> sign will be added before the layer name, so you know which copy is managed by Localise.</p><p><br></p><p><strong>Where can I find my API key?</strong></p><p><a href=\"https://www.craft.do/s/uWvGw9BgkqhVhq\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Guide to link your account to the Localise plugin</a></p>","id":"962726373703605951","installCount":273,"lastUpdateDate":"2022-06-03T15:51:41.352Z","likeCount":7,"name":"Localise","publisherHandle":"niels","publisherId":"40270","publisherName":"Niels Boey","runCount":304,"viewCount":1047},{"description":"<p>Export your frames and instances to tabular data (.csv).</p><p><br></p><p>Let's say you manage some tasks on your Figma files and want to export a .csv to filter by status, send it to someone or upload to Google Sheets. Tablefy will help you do just that.</p><p><br></p><h2>How to use it</h2><p>Tablefy relies on your <strong>layers naming</strong> to recognize how to transform your frames / instances to tabular data.</p><p><br></p><p>As an example, you could create a list of instances with the following layer structure and names:</p><p><br></p><p>👉 Instance named \"<strong>Item</strong>\"</p><p>Group named \"<strong>Column</strong>\"</p><ul><li>Text Layer named \"<strong>Header</strong>\" filled with text \"Name\"</li><li>Text Layer named \"<strong>Value</strong>\" filled with text \"Task 1\"</li></ul><p>Group named \"<strong>Column</strong>\"</p><ul><li>Text Layer named \"<strong>Header</strong>\" filled with text \"Status\"</li><li>Text Layer named \"<strong>Value</strong>\" filled with text \"To do\"</li></ul><p><br></p><p>So, you could open the plugin and set the values:</p><ul><li>Row identifier: \"<strong>Item</strong>\"</li><li>Column Identifier: \"<strong>Column</strong>\"</li><li>Value text layer: \"<strong>Value</strong>\"</li><li>Header text layer: \"<strong>Header</strong>\"</li></ul><p><br></p><p>When you hit Tablefy button, it will generate a .csv with two columns (Name, Status) and as many rows as the frames or instances you selected.</p><p><br></p><p>You can add as many columns as you want! If your frame just have one useful column, you can ignore \"Column Identifier\" and keep it empty.</p><p><br></p><p>It's recommended that you always use instances, since they guarantee each selected frame has always the same layers.</p><p><br></p><h2>Custom columns:</h2><p>You can add custom dynamic columns. Let's say you want to export an url to your frame listed as a row in the csv. You could add a custom column and set its value to \"${url}\". You can use node parameters as well, like ${node-id}, ${node-name}, ${node-x}.</p><p>Available variables:</p><ul><li>${url} - creates an url to the frame</li><li>${index} - adds a counter relative to the frame list position</li><li>${node-prop} - retrieve properties from the figma node object, like \"node-id\", \"node-name\", \"node-x\"</li><li>${predict:\"frameName\", category: \"frameTextLayer\"}</li><li>${layerName} - fetch a layer inside that row with this name and get its text contents</li></ul><p><br></p><h2>Predict columns with Machine Learning</h2><p>Use the \"predict\" variable in a dynamic column to apply a classification automatically using the KNN (K-Nearest Neighbours) algorithm. It finds the nearest frame to the row node and sets a value from a layer of that closer framer.</p><p><br></p><p>This can be really useful if your spacial organization has some meaning that you want to export to the rows. If you have a canvas with titled areas, you could export with your rows which title frame was closer to it.</p><p><br></p><p><strong>An example:</strong></p><p>If you set a custom column value field like: <code>${predict:\"frameName\", category: \"frameTextLayer\"}</code></p><p>For each node (row) we will look at all the frames named \"frameName\", find which one is closer to the node and apply to this column that frame's \"frameTextLayer\" content. </p>","id":"962937914340602604","installCount":2842,"lastUpdateDate":"2021-05-06T01:36:21.083Z","likeCount":32,"name":"Tablefy","publisherHandle":"kikoherrschaft","publisherId":"25543","publisherName":"Kiko Herrschaft","runCount":5314,"viewCount":7121},{"description":"<p>Reset Frame height with one click based on the bottom element of the page.</p><p><br></p><p>根据页面中最下方的元素一键重置 Frame 高度。</p><p><br></p><p><a href=\"https://love.figma.cool/\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">❤️赞助我们</a> | Made by <a href=\"http://figma.cool/\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">Figma.Cool</a></p>","id":"963088930763202337","installCount":502,"lastUpdateDate":"2021-04-21T15:52:16.169Z","likeCount":23,"name":"AutoHeight","publisherHandle":"figmacool","publisherId":"4385338","publisherName":"Figma.Cool","runCount":386,"viewCount":1979},{"description":"<p>Easily generate QR codes in raster or vector.</p><p><br></p><p>Just type in any URL or text and the plugin will generate the QR code that you can use your phone camera to scan.</p><p><br></p><p>Supported types:</p><ul><li>Plain text</li><li>URLs (www.example.com)</li><li>Email (mailto:example@gmail.com)</li><li>Phone numbers (tel:+12125551212)</li></ul><p><br></p><p>Coming soon!</p><ul><li>WIFI</li><li>MECARD</li></ul><p><br></p><p>This is also great for creating QR codes to share Figma links.</p><p><br></p><p>This plugin is open source. Feel free to open issues/request features or pull requests at <a href=\"https://github.com/nathakits/qr-figma-plugin\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">https://github.com/nathakits/qr-figma-plugin</a></p>","id":"963138214942646066","installCount":6272,"lastUpdateDate":"2021-04-14T05:17:56.506Z","likeCount":50,"name":"QR Coder","publisherHandle":"nathakits","publisherId":"191464","publisherName":"Nathakit Sae-Tan","runCount":5287,"viewCount":6664},{"description":"<p>figma elements download</p>","id":"963261925920020294","installCount":86,"lastUpdateDate":"2021-04-22T13:53:52.984Z","likeCount":3,"name":"EFDev-Export","publisherHandle":"f68c665f_31d0_4","publisherId":"966222921705761429","publisherName":"广州腾讯科技有限公司 - EFDev","runCount":49,"viewCount":262},{"description":"<p>Finding all instances by specific properties should be super easy. Get››all makes that so. Just select an element and hit one of the buttons to find and select every node with that matching property on the current page.</p><p><br></p><p>If you've got a specific property type you'd like included, leave me a comment!</p>","id":"963807322482539548","installCount":1992,"lastUpdateDate":"2021-10-13T11:02:02.287Z","likeCount":53,"name":"Get››all","publisherHandle":"_kejk","publisherId":"3878431","publisherName":"Karl Koch","runCount":1590,"viewCount":5337},{"description":"<p><strong>Turn Figma designs into real websites in a few clicks</strong></p><p><br></p><p>(Note that Pygma is still in beta and you might run into bugs. If you do we are on hand to fix them ASAP for you. Just send an email to emile@pygma.app if you need help)</p><p><br></p><h2><strong>Features</strong></h2><ul><li>Create multiple projects/websites</li><li>Create unlimited pages for each website</li><li>Responsive breakpoints - group breakpoint frames under one page and the deployed site will be automatically responsive.</li><li>One-click deployment of updates</li><li>Connect a custom domain</li></ul><p><br></p><h2><strong>How to use</strong></h2><p><br></p><p><strong>Create an account</strong></p><ul><li>Log in / sign up using Figma OAuth - Pygma only has access to the files you specify.</li></ul><p><br></p><p><strong>Create a project</strong></p><ul><li>Make sure you are in the same Figma file as the design you want to turn into a website.</li><li>Add the Figma file key which is needed to publish your site. You can find this from the Share link for your file.</li><li>Choose the Figma page that contains the frames for your site.</li><li>Give your project a name.</li><li>A random subdomain on pygma.app will be generated for your site, but you can change this later.</li></ul><p><br></p><p><strong>Create a page</strong></p><ul><li>Add the path for your page. For example, for the homepage you might use '/' or '/pricing' for the pricing page.</li><li>Add the title for the page (this is the title that will appear in the browser).</li><li>Add the frames for the page. If you have multiple frames for different breakpoints, check all of them and they will become responsive breakpoints in the final website.</li></ul><p><br></p><p><strong>Connect a domain (temporarily free, will be paid in the near future)</strong></p><ul><li>You can change a project's domain on the project config page. Once you use a custom domain, you will see DNS settings for the A record and CNAME record appear underneath the domain. Add these to the DNS registrar where you purchased or manage your domain. Here's some links to a few guides:</li></ul><p><br></p><p><strong>Deploy a site</strong></p><ul><li>Once your pages have been added, just click the deploy button - this process is usually complete within 2 minutes and you will be able to go to your domain/subdomain to see your site (if it's a custom domain you will need to connect it first as above).</li></ul><p><br></p><p><strong>Add links between pages</strong></p><ul><li>Just connect frames using the prototype tool in Figma and Pygma will interpret these as links in the final site.</li></ul><p><br></p><p><strong>Add external links</strong></p><ul><li>In the name of the layer/node that you want to add an external link to, add a '#' followed by the full link including the scheme. E.g. to add a link to Pygma on a button with name 'button / primary' in Figma, it would become 'button / primary #<a href=\"https://pygma.app'.\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">https://pygma.app'.</a></li></ul><p><br></p><p><strong>Manage subscription</strong></p><ul><li>Open the menu and go to \"Billing\". From there you can manage your subscription using Stripe Portal.</li></ul><p><br></p><p><strong>Unsynced account/config changes.</strong></p><ul><li>In rare events, some data might be out of sync (e.g. your subscription status). Try logging out and logging in again to fix this.</li></ul>","id":"963890855798739008","installCount":2649,"lastUpdateDate":"2021-06-15T15:47:04.480Z","likeCount":74,"name":"Pygma - Publish websites from Figma","publisherHandle":"pygma","publisherId":"954695657282969674","publisherName":"Pygma","runCount":2104,"viewCount":8744},{"description":"<h1>figma-i18n-plugin</h1><ul><li>국제화를 위한 Figma 플러그인</li><li>Figma plugin for i18n</li><li>国際化のためのFigmaプラグイン</li></ul><h2>KO</h2><ul><li>Global Language 관리: figma page에서 사용할 언어를 추가/삭제/변경한다.</li><li>Apply all: 선택한 언어로 전체 Text를 변경한다.</li><li>Node ID: 선택한 node의 ID를 조회한다.</li><li>선택한 Node의 언어를 변경할 수 있다.</li><li>JSON 파일로 i18n 파일을 내보내기 할 수 있다.</li><li>내보내기 한 JSON파일을 import하여 i18n 적용할 수 있다.</li></ul><h2>EN</h2><ul><li>Global Language Management: Add/delete/change the language to be used in the figma page.</li><li>Apply all: Change the entire Text to the selected language.</li><li>Node ID: queries the ID of the selected node.</li><li>You can change the language of the selected node.</li><li>You can export i18n files to JSON files.</li><li>The exported JSON file can be imported and i18n applied.</li></ul><p><br></p><p><em>본 플러그인의 로고 및 커버 이미지는 대한민국 공군의 공군 픽토그램을 이용하였으며 공내디(https://afplay2.tistory.com/)에서 무료로 다운받으실 수 있습니다. The logo and cover images of this plug-in are used by the Air Force Pictogram of the Republic of Korea Air Force and can be downloaded free from Gongnaedi (https://afplay2.tistory.com/).</em></p>","id":"964091801268277395","installCount":254,"lastUpdateDate":"2021-05-17T10:19:34.532Z","likeCount":13,"name":"Figma i18n Plugin","publisherHandle":"74b17778_e215_4","publisherId":"964092255187085161","publisherName":"Hyunchae Kim's team","runCount":229,"viewCount":1115},{"description":"<p>Very easy to search all Figma plugins in your design work.</p><p><br></p><p>非常轻松地在设计稿中搜索全部 Figma 插件。</p><p><br></p><p>Data from https://github.com/yuanqing/figma-plugins-stats</p><p><br></p><p><a href=\"https://love.figma.cool/\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">❤️赞助我们</a> | Made by <a href=\"http://figma.cool/\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">Figma.Cool</a></p>","id":"964142928021463219","installCount":5232,"lastUpdateDate":"2021-07-20T05:09:27.229Z","likeCount":114,"name":"Plugin Store","publisherHandle":"figmacool","publisherId":"4385338","publisherName":"Figma.Cool","runCount":3554,"viewCount":10408},{"description":"<p><strong>What's Localazy?</strong></p><p><a href=\"https://localazy.com\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Localazy</a> is a continuous localization platform and web-based translation management system (<a href=\"https://localazy.com/dictionary/translation-management-system-tms\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">TMS</a>) that strives to make the usually awful software localization and translation experience efficient and enjoyable for individuals and product teams of any size.</p><p><br></p><p><strong>Why Figma and Localazy?</strong></p><p>So you can start localizing your designs in Figma right away!&nbsp;</p><p><br></p><p>Localazy Figma Plugin allows you to upload all the text content from a Figma file to Localazy, translate the content into as many languages as you want, and then download translated content back to Figma to create localized designs quickly.</p><p><br></p><p>All the texts uploaded to Localazy are also immediately ready to be transferred into your mobile/web projects or other types of client UIs for a streamlined multilingual development experience.</p><p><br></p><p><strong>Common issues with designs</strong></p><p>Here’s a list of problems that might surprise you unprepared during the design process.</p><ul><li>Bi-directionality (LTR/RTL) of languages</li><li>Distribution of word lengths in various languages</li><li>Copying strings from design to code (time-consuming duplications)</li><li>Continuous design localization problem &amp; keeping track of updates</li><li>and more…</li></ul><p><br></p><p>Figma Plugin by Localazy helps to resolve these problems with ease.</p><p><br></p><p><strong>How do I start?</strong></p><ol><li>In your project, go to the Plugins and select Localazy</li><li>Connect your existing project on Localazy (if you don't have an account make you register and create one first)</li><li>Go back to Figma and upload your texts</li></ol><p><br></p><p><strong>Documentation:</strong></p><p><a href=\"https://localazy.com/docs/figma\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://localazy.com/docs/figma</a></p><p><br></p><p><strong>NOTE</strong>: To use Localazy Figma Plugin, you need Localazy account and activate the Localazy <a href=\"https://localazy.com/pricing\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Autopilot Plan subscription</a> or higher.</p><p><br></p><p><strong>REQUEST A 7-DAY FREE TRIAL:</strong></p><p>Send us a request, and we will activate the Figma plugin for 7 days for your account.&nbsp;Please fill in this quick form:&nbsp;<a href=\"https://e2lskwdhfja.typeform.com/to/cRD9g8FC\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://e2lskwdhfja.typeform.com/to/cRD9g8FC</a></p>","id":"964257457772706017","installCount":366,"lastUpdateDate":"2022-06-22T18:05:35.408Z","likeCount":14,"name":"Localization plugin by Localazy","publisherHandle":"xbilek18","publisherId":"856768869680463347","publisherName":"Jan Bílek","runCount":398,"viewCount":1577},{"description":"<p>Do you find yourself spending hours doing repetitive steps just to create print on demand designs? If so, this Figma plugin can give your precious time back. Create a design template with variables. Submit a CSV file. The plugin will replace the variables with the text supplied by your CSV file.</p>","id":"964364318923754744","installCount":89,"lastUpdateDate":"2021-05-11T04:59:15.024Z","likeCount":7,"name":"Print on Demand Automator","publisherHandle":"15bb7852_7b5d_4","publisherId":"963986727761737804","publisherName":"Lih Chen","runCount":44,"viewCount":616},{"description":"<p>Make your text flow between text boxes.</p><p><br></p><p><strong>Found a bug or have a suggestion?</strong></p><p><br></p><p>Please, <a href=\"https://github.com/javierarce/go-with-the-flow\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">open a ticket</a>.</p>","id":"964835595999796629","installCount":584,"lastUpdateDate":"2021-04-16T11:14:42.191Z","likeCount":13,"name":"Go with the Flow","publisherHandle":"javier","publisherId":"216","publisherName":"Javier Arce","runCount":461,"viewCount":2799},{"description":"<p>Generate a web info card that can be opened with a link.</p><p>生成一个可以打开链接的网页信息卡片。</p><p><br></p><ul><li>Website ICO Icon</li><li>Site Name</li><li>Site Description</li><li>URL</li></ul><p><br></p><ul><li>网站 ICO 图标</li><li>网站名称</li><li>网站描述</li><li>网址</li></ul><p><br></p><p>Tip: The plugin requires an Internet connection to run..</p><p>提示：插件需要联网才能运行。</p><p><br></p><p>How to run：</p><ol><li>Paste the URL into Figma</li><li>Run WebCard</li></ol><p><br></p><ol><li>将 URL 粘贴到 Figma</li><li>运行 WebCard</li></ol><p><br></p><p><a href=\"https://love.figma.cool/\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">❤️赞助我们</a> | Made by <a href=\"http://figma.cool/\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">Figma.Cool</a></p>","id":"964923142929990075","installCount":1027,"lastUpdateDate":"2021-08-13T04:24:21.901Z","likeCount":37,"name":"WebCard","publisherHandle":"figmacool","publisherId":"4385338","publisherName":"Figma.Cool","runCount":760,"viewCount":3389},{"description":"<p>A useful tool for inserting symbols/characters/glyphs into your design. Unipaste delivers the easiest way to work with special characters in Figma.</p><p><br></p><h2>Key features</h2><ul><li>500+ glyphs</li><li>Search</li><li>Favorites</li><li>List/Grid layout</li><li>Direct text editing</li><li>Fully keyboard controllable</li><li>Available in Figma and FigJam</li><li>Dark mode support</li></ul><p><br></p><h2>How to use</h2><ul><li>If you are editing text, the glyphs is inserted at the cursor position or instead of the selected part of the text.</li><li>Otherwise, the glyph is copied to the clipboard.</li><li>With the text node selected: The left mouse button inserts a character at the beginning of the text, the right mouse button at the end of the text.</li></ul><p><br></p><h2>Keyboard controls</h2><ul><li><strong>Arrow down:</strong> Enter the list/grid</li><li><strong>Arrows:</strong> Navigate in the list/grid</li><li><strong>Enter:</strong> Paste the selected glyph into design (and close Unipaste plugin)</li><li><strong>Esc:</strong> Close Unipaste plugin</li></ul><p><br></p><h2>Roadmap</h2><ul><li>Parameter input support ✅</li><li>FigJam support ✅</li><li>Keyboard control ✅</li><li>Searching by HTML entity name ✅</li><li>Dark mode ✅</li><li>Anything that comes out of the feedback</li></ul><p><br></p><h2>Warning</h2><p><em>Fonts typically do not contain all unicode characters, so for some exotic characters, the character may not be visible in the text.</em></p>","id":"964930640501844415","installCount":8769,"lastUpdateDate":"2022-05-12T09:47:07.203Z","likeCount":236,"name":"Unipaste","publisherHandle":"danmaslo","publisherId":"3517641","publisherName":"Daniel Máslo","runCount":5528,"viewCount":19912},{"description":"<p>Plugin to Export all text from nodes into a translatable XML format.</p><p>Once translated, updated text and formatting positions can be re-imported into the design.</p><p><br></p><p><a href=\"https://youtu.be/8Ew3aZ3ws78\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Short YouTube demonstration</a></p><p><br></p><p><strong>Export</strong></p><p>Once your source file has been created, make a copy of it. export from this copy by clicking generate XML.</p><p><br></p><p>Choose to export all font information if you wish to change the fonts within the XML. Useful when mass font changes are required.</p><p><br></p><p><strong>Translation</strong></p><p>Use of a CAT tool such as memoQ is recommended.</p><p>Translate the content of the \"String\" element. consider all elements within that as \"Inline\". You may wish to segment on \"br\" elements.</p><p>Ensure whitespace is preserved and not normalised. Especially if you are using multiple spaces for controlling layout of text on screen.</p><p><br></p><p><strong>Import</strong></p><p>On the import tab use \"Choose file\" to selected the translated XML, then click import translations.</p><p><br></p><p>Choose to import regardless of source differences.</p><p>useful if you want to reimport a modified XML over the top of a previous import.</p><p><br></p><p><strong>WARNINGS</strong></p><ul><li>Right-to-Left languages aren't well supported in Figma at present</li><li>In order for the import to function fully you must not have any missing font warnings on your design.</li><li>Contents of the \"base\" element should remain untranslated. this element is used to check for consistency between the source of the translation and the current contents of the node.</li></ul>","id":"965300293958451734","installCount":1416,"lastUpdateDate":"2022-05-23T14:44:27.868Z","likeCount":12,"name":"Conversis Translation XML Text Export & Import","publisherHandle":"be959624_b181_4","publisherId":"959766461421952710","publisherName":"Ian Barrow","runCount":1513,"viewCount":3745},{"description":"<p>Create the brillant Typography Styleguide page using your local Text Styles.</p>","id":"965313760136371738","installCount":7325,"lastUpdateDate":"2021-07-30T12:51:12.455Z","likeCount":137,"name":"Typography Styleguide","publisherHandle":"hiloki","publisherId":"410711","publisherName":"Hiroki Tani","runCount":6623,"viewCount":8446},{"description":"<p>Adjust corner radius and corner smoothing in bulk and with precision.</p>","id":"965354174052461091","installCount":1101,"lastUpdateDate":"2021-05-21T07:58:11.448Z","likeCount":18,"name":"Radii","publisherHandle":"janos","publisherId":"194740","publisherName":"Janos Pauer","runCount":929,"viewCount":2161},{"description":"<h1>Lorem ipsum zh-tw 隨機繁體中文產生器</h1><p>A Lorem ipsum generator with Traditional Chinese used in Taiwan (zh-tw) for Figma plugin.</p><p>給需要製作中文語系介面的設計工作者做的隨機繁體中文產生器</p><p><br></p><p>Use it to append random zh-tw words into the selected text box with the same font. And Punctuation mark is optional.</p><p>可以在選取的文字方塊內，隨機產生所需字數/有無標點符號</p><p><br></p><p>The generated words will be set properties identical to the last character in the text box.</p><p>產生的隨機文字會與文字方塊內最後的字元有相同的屬性（properties）</p><p><br></p><p><a href=\"https://imgur.com/3bsF8kL.gif\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">Demo</a></p><p><br></p><h2>Credits</h2><ul><li><a href=\"http://technology.chtsai.org/charfreq/\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">Frequency and Stroke Counts of Chinese Characters</a></li><li>Inspired by&nbsp;<a href=\"https://github.com/sooxin/Chinese-Lorem-Ipsum\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">sooxin/Chinese-Lorem-Ipsum</a></li></ul><h2><br></h2><h2>Authors</h2><ul><li>Developer -&nbsp;<a href=\"https://github.com/louis222220\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">Louis</a></li><li>Icon/Banner Designer -&nbsp;<a href=\"https://www.tsengyuting.com/\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">Nagi Tseng</a></li></ul><h2><br></h2><p><br></p>","id":"965545553558758970","installCount":1751,"lastUpdateDate":"2021-05-22T02:05:37.169Z","likeCount":19,"name":"Lorem ipsum zh-tw","publisherHandle":"louis222220","publisherId":"907523357584617014","publisherName":"Louis Su","runCount":1557,"viewCount":1727},{"description":"<p>Reset all text layers name in selection at once.</p><p><br></p><h3><strong>How do I get started?</strong></h3><p>Select at least one Frame,&nbsp;Group or Text Layer and run plugin to reset name on text layers.</p><p><br></p><p>You're done.&nbsp;❤️</p>","id":"965643858347310681","installCount":366,"lastUpdateDate":"2021-04-18T18:21:51.377Z","likeCount":8,"name":"Reset Text Layers Name in Selection","publisherHandle":"lismarcin","publisherId":"1432310","publisherName":"Marcin Lis","runCount":338,"viewCount":927},{"description":"<p>Sometimes you have lots of text that repeats, and it's not part of a component/instance system. When you want to simply and easily replace the contents of each of those, you can quickly grab Text››helper to help you!</p><p><br></p><p>There's three main ways to replace something:</p><ol><li>Type text into the Find input, type replacement text in the Replace input and press \"Find &amp; Replace\" (or hit enter) to replace everything that matches</li><li>Select a single item to fill the Find input with that text value, type replacement text in the Replace input and press \"Find &amp; Replace\" (or hit enter) to replace everything that matches</li><li>Highlight multiple items, type a value in the Replace input and press \"Replace only\" (or hit enter) to replace everything within your current selection</li></ol><p><br></p><p>You can also insert text before or after your selected strings, great for easily prepending or appending \"-light\" to your selection. And you can easily see the current selection(s) total character count.</p>","id":"965889760815013524","installCount":2549,"lastUpdateDate":"2022-07-16T20:26:35.682Z","likeCount":54,"name":"Text››helper","publisherHandle":"_kejk","publisherId":"3878431","publisherName":"Karl Koch","runCount":2033,"viewCount":6492},{"description":"<h2>Variable fonts, now in Figma!</h2><p><br></p><p>A plugin to provide basic variable fonts support through&nbsp;<a href=\"https://github.com/Lorp/samsa\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">samsa.js</a>.</p><h2><br></h2><p>This plugin enables you to:</p><ul><li>Render variable fonts&nbsp;as graphics&nbsp;on the Figma canvas</li><li>Preview, create, and edit/update these graphics</li><li>Choose from all the axes in a variable font</li><li>Choose from all the variable fonts available from Google Fonts</li></ul><p><br></p><h2>Usage</h2><p><br></p><p>You should see the Variable Fonts palette appear, similar to the screenshot above.</p><p><br></p><ul><li>Pick one of the dozens of variable fonts available from&nbsp;<a href=\"https://fonts.google.com/?vfonly=true\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">Google Fonts</a>.</li><li>In the Preview section, enter some custom text.</li><li>Set the color and axes values you want.</li><li>Then click the&nbsp;Add&nbsp;button at the top of the Preview section.</li></ul><p><br></p><p>This will add a Vector graphic object to your Figma canvas.</p><p><br></p><p>That result is a normal Figma Vector object that you can do all the normal things you can typically do with such objects.</p><p><br></p><p>It is&nbsp;<strong>NOT</strong>&nbsp;a Text object!</p><p><br></p><p>Do you have a bug, feature request, or improvement? Submit a PR or file an issue here: <a href=\"https://github.com/Tgemayel/variable-fonts-figma/issues\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">https://github.com/Tgemayel/variable-fonts-figma/issues</a></p>","id":"966184368629063440","installCount":7681,"lastUpdateDate":"2021-05-26T06:00:53.798Z","likeCount":115,"name":"Variable Fonts","publisherHandle":"tg","publisherId":"830496","publisherName":"Toni Gemayel","runCount":6726,"viewCount":13382},{"description":"<h1>About</h1><p>A figma plugin to upload assets to cloud services. Currently compatible with Contentful, Cloudinary, and Firebase.</p><p><br></p><p>For more information 👉 <a href=\"https://www.queue-inc.com/projects/figma-asset-uploader\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">https://www.queue-inc.com/projects/figma-asset-uploader</a></p><p><br></p><p>Leave comment and let us know what kind of features or connections are useful for you.</p>","id":"966234070788647717","installCount":300,"lastUpdateDate":"2021-06-01T06:43:06.625Z","likeCount":11,"name":"Figma Asset Uploader","publisherHandle":"kt83","publisherId":"424406","publisherName":"Keita Mitsuhashi","runCount":229,"viewCount":1512},{"description":"<p>🧩 Use dynamic data on your Figma from Google Spreadsheets.</p><p>🔥 Fast data replace from Google Spreadsheet.</p><p>😎 Use Google Sheets as dynamic data on your design.</p><p>✅ Works with Components, Frames, Layers... all (as long as the layer has sub-layers/children).</p><p><br></p><p>⬇️ ⬇️ ⬇️ <strong>CHECK THE STEPS BELOW</strong> ⬇️ ⬇️ ⬇️</p><p><br></p><p>Not affiliated with Google • Created with ❤️ by André Pinto</p><p><br></p><p>If you want to support the continued development of this plugin, why not buy me a coffee at:</p><p><br></p><p><a href=\"https://ko-fi.com/apinix\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">ko-fi.com/apinix</a></p><p><br></p><p><strong>SHARE THIS IF YOU LOVE IT! LETS MAKE THE BEST PLUGIN TO HELP THE COMMUNITY!</strong></p><p><br></p><p>--------</p><p><br></p><h2>STEP 1:</h2><p>Your Google Spreadsheet has to be public</p><ul><li><code>Share &gt; Get shareable link</code></li></ul><h2><br></h2><h2>STEP 2:</h2><p>Use the correct naming on your <strong>Figma layers</strong>.</p><p><strong>AUTO RENAMING... </strong>Rename manually or use the <strong>new renaming</strong> by clicking on the table (when on advanced mode).</p><p><strong>MANUALLY RENAMING...</strong> add a <code>#</code> prefix followed by the name of the column you want to sync (<strong>ex:</strong> <code>#Title</code>).</p><p>You can nest multiple columns in one layer (<strong>Note:</strong> it is not case sensitive, and will ignore <code>spaces</code>).</p><p>Google Sheets column example names: (ex: <a href=\"https://docs.google.com/spreadsheets/d/1P888OymI2-Lgqswjtdb6pDqSfeHLQ_cC3_6vyEboO6g/edit#gid=0\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Sheet</a> / <a href=\"https://www.figma.com/file/iXrKORVQlsvRrxrAFhcp32/Spreadsheet-Sync-Example?node-id=0%3A1\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Figma</a>)</p><ul><li><strong>Text</strong> (<code>Just text</code>)</li><li><strong>Fill Color</strong> (<code>/#E24A08</code>)</li><li><strong>Stroke Width and Color</strong> (<code>/2|#E24A08</code>) or (<code>/|#E24A08</code>)</li><li><strong>Show</strong> (<code>/Show</code>)</li><li><strong>Hide</strong> (<code>/Hide</code>)</li><li><strong>Image</strong> (<code>http://image-path...</code>)</li><li><strong>Multiple</strong> (<code>#Name#Color#Show</code>)</li><li><strong>Multiple with Placeholders</strong> (layer name: <code>#Value1#Value2</code> -&gt; actual text: 'This is {#Value1} and is in the same sentence of {#Value 2}')</li></ul><h2><br></h2><h2><strong>Google Sheets example:</strong></h2><pre class=\"ql-syntax\" spellcheck=\"false\">| Title           | Variant     | Fill Color | Stroke     | Hidden  | Image             |\n| --------------- | ----------- | ---------- | ---------- | ------- | ----------------- |\n| This is a title | Color=blue  | /#ff0000   | /2|#ff0000 | /Show   | http://image-path |\n| This is a text  | Color=green | /#0099ff   | /|#0099ff  | /Hide   | http://image-path |\n</pre><p><br></p><h2><strong>Figma layer naming example:</strong></h2><pre class=\"ql-syntax\" spellcheck=\"false\">| ------------------------ |\n| #Title                   | -&gt; normal text replace\n| ------------------------ |\n| #Color.randsave          | -&gt; gets a random value from a random \"saved\" row (if you want to use the same random row on another layer)\n| ------------------------ |\n| #Hidden                  | -&gt; hides or shows layer\n| ------------------------ |\n| #Image.rand              | -&gt; gets a random value\n| ------------------------ |\n| #Title.1#Color.randsave  | -&gt; text replacement and the same random saved color from before (if under the same selection))\n| ------------------------ |\n</pre><p><br></p><p><br></p><h2>STEP 3:</h2><p>Paste your <strong>Google Spreadsheet link</strong> (copy from browser address bar), select the amount of layers and click Sync.</p><p><br></p><h2><strong>EXTRA:</strong></h2><p>🔥🔥🔥 Use the <strong>\"Preview\"</strong> button for an <strong>advanced usage</strong> (little blue button with eye icon next to the url input).</p><ul><li>You can rename layer(s) with just a click</li><li>You can even multiple rename layers if you click SHIFT key</li></ul><p><br></p><p>--------</p><p><br></p><h2>EXAMPLES:</h2><ul><li><a href=\"https://www.figma.com/file/U8cAOL8VuvYd7BxxLECaiG/Figma-Spreadsheet-Sync-Community?node-id=0%3A1\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Figma File</a></li><li><a href=\"https://docs.google.com/spreadsheets/d/1P888OymI2-Lgqswjtdb6pDqSfeHLQ_cC3_6vyEboO6g/edit#gid=0\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Google Spreadsheet (example card)</a></li><li><a href=\"https://docs.google.com/spreadsheets/d/1OyaW9qhZDsX18HFUSVtiMhmg0GE7pw7Fykce4abec9E/edit#gid=0\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Google Spreadsheet (example table)</a></li></ul><p><br></p><p>--------</p><p><br></p><h2>TODO:</h2><ul><li>📔 Documentation</li><li>🎬 YouTube video</li><li>💪 Always bringing more updates. Keep using it!</li></ul>","id":"966291261554174793","installCount":1866,"lastUpdateDate":"2021-10-06T19:28:33.174Z","likeCount":56,"name":"Spreadsheet Sync (Altar.io)","publisherHandle":"apinix","publisherId":"26166","publisherName":"Andre Pinto","runCount":1851,"viewCount":6068},{"description":"<p>Quickly sample thousands of ready-to-use graphics and photos for free. Unlock high resolution assets and SVGs starting at $2. Level up your designs with original icons, photos, and illustrations by independent artists — right within Figma! The Creative Market plugin is a world of design at your fingertips.</p>","id":"966753973971133461","installCount":5439,"lastUpdateDate":"2021-04-21T17:42:47.820Z","likeCount":86,"name":"Creative Market","publisherHandle":"creativemarket","publisherId":"941736653775216996","publisherName":"Creative Market","runCount":3770,"viewCount":9868},{"description":"<p>Find and select similar text in your designs by font styles. Just choose a text, adapt filter to fit with your preferences, and click on the “Select similar” button.</p><p><br></p><p>You can select text similarity by :</p><ul><li><em>Same Size</em></li><li><em>Same Weight</em></li><li><em>Same Family</em></li></ul><p><br></p><p>I hope this plugin will help you, as simple as it may be !</p>","id":"967038426246346875","installCount":1620,"lastUpdateDate":"2021-05-11T18:15:21.861Z","likeCount":29,"name":"Similar text selector","publisherHandle":"bastien","publisherId":"358763","publisherName":"Bastien Moiroux","runCount":1370,"viewCount":2926},{"description":"<p><a href=\"https://illustrationkit.com/\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">Illustration kit</a></p><p><br></p><p>IllustrationKit is a collection of premium free illustrations. It's absolutely free for personal and commercial projects and no attribution is required :)</p><p>You can use these illustrations for your website landing page, onboarding screens, email marketing, newsletter, social media posts, blogs, advertisements and almost anywhere you like 😊</p><p><br></p><p>Designed by <a href=\"https://twitter.com/khushmeensidhu\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">Khushmeen</a></p>","id":"967114006118823084","installCount":16919,"lastUpdateDate":"2021-07-02T15:04:16.065Z","likeCount":171,"name":"Illustration kit","publisherHandle":"dilpreetsio","publisherId":"970202","publisherName":"Dilpreet Singh","runCount":16792,"viewCount":18607},{"description":"<p>Scales selected layers to 50% of the original width and height. Useful for quickly resizing retina screenshots pasted from the clipboard to their original size.</p>","id":"967357103964091666","installCount":351,"lastUpdateDate":"2021-04-23T11:28:58.301Z","likeCount":9,"name":"Halvation","publisherHandle":"alexanderjuhl","publisherId":"1831769","publisherName":"Alexander Juhl","runCount":215,"viewCount":752},{"description":"<p>Get the number of characters in all strings in the selected range.It also detects any text contained within a group or component or frame.</p>","id":"967662523796625802","installCount":890,"lastUpdateDate":"2021-05-05T01:37:04.914Z","likeCount":12,"name":"CountTextLength","publisherHandle":"0a040eca_a6e6_4","publisherId":"639601","publisherName":"Ric","runCount":676,"viewCount":1058},{"description":"<p>Quickly generate a modular scale for your typography. In a couple of clicks you can transform a single line of text into a harmonious typographic scale, based on your choice of ratio.</p>","id":"967802396210455992","installCount":8126,"lastUpdateDate":"2021-11-06T08:57:29.311Z","likeCount":103,"name":"Typescale","publisherHandle":"smth","publisherId":"990078","publisherName":"Sam Smith","runCount":8955,"viewCount":9747},{"description":"<p><strong>A powerful tool for finding and selecting elements, you can flexibly cross select various elements by various attributes of the element. Supported languages: Chinese, English, Spanish.</strong></p><p><br></p><p><strong>一个强大的查找和选择元素的工具，你可以通过元素的各种属性来灵活的交叉选择各种元素，支持中英、西班牙语。</strong></p><p><br></p><p>If helpful please click the ❤️.</p><p><br></p><p><strong>🔍 支持以下过滤方式 Supported filtering methods：</strong></p><p><br></p><h2><strong>搜索图层名称 By Layer Name</strong></h2><p><br></p><h2><strong>按查找层级 By search hierarchy:</strong></h2><p><br></p><p><strong>未选择元素或查找范围为整个文档时 No selected or search the entire document：</strong></p><ul><li>所有元素 All elements</li><li>根元素 Root element （页面的子级元素 Child of the page)</li><li><br></li></ul><p><strong>选中一个或多个元素时 One or more elements are selected: ：</strong></p><ul><li>内在元素 Inside （包含被选择元素自身及其所有子孙元素 The selected element and all children)</li><li>同级元素 Siblings</li><li>子级元素 Child</li><li>子孙元素 Children</li></ul><p><br></p><p><strong>按元素类型或排除类型选择 Select by element type or exclusion type ( 可多选 </strong>Multiple <strong>) :</strong></p><ul><li>所有 All（不区分类型 Regardless of type)</li><li>组件 Components</li><li>组件集 Components Set</li><li>实例 Instances</li><li>框架 Frames</li><li>自动布局 Auto Layout</li><li>组 Groups</li><li>图片 Images</li><li>文本 Text</li><li>切片 Slices</li><li>方形 Rectangle</li><li>布尔形状 Boolean</li><li>形状 Shapes</li><li>线条 Lines</li><li>圆形</li><li>三角形 Triangles</li><li>星形 Stars</li></ul><p><br></p><h2><strong>按状态或排除状态 Status or exclusion Status</strong></h2><h2><strong> ( 可多选 </strong>Multiple <strong>)：</strong></h2><ul><li>所有 All ( 不区分 Unclassified )</li><li>无填充 No Fills</li><li>无描边 No Strokes</li><li>隐藏的图层（图层的眼睛关闭的状态，要同时查找透明度为零或填充透明度为0的元素请在属性过滤里添加对应的属性） Hidden layers (the layer's eyes are closed, add the corresponding properties in the Filter properties to find elements with zero opacity at the same time)</li><li>锁定的图层 Locked layers</li><li>蒙版 Masks</li><li>无子元素的图层 Layers with no child elements</li><li>剪切子元素的框架 Frames for clipping child elements</li><li>包含导出的图层 Contain exported layers</li></ul><p><br></p><h2><strong>按属性 Props ( 可叠加 </strong>Multiple <strong>)：</strong></h2><p><strong>图层相关属性 Layer ：</strong></p><ul><li>图层透明度 Layer opacity</li><li>元素X坐标 X</li><li>元素Y坐标 Y</li><li>元素宽度 Width</li><li>元素高度 Height</li><li>子元素数量 Number of Children</li><li>旋转角度 Rotation</li><li>图层是否展开 Expanded</li><li>图层叠加模式 Blend Mode</li></ul><p><br></p><p><strong>绝对渲染边界 Absolute Render Bounds：</strong></p><ul><li>绝对宽度 Absolute Render Width</li><li>绝对高度 Absolute Render Height</li><li>绝对X Absolute X</li><li>绝对Y Absolute Y</li></ul><p><br></p><p><strong>填充相关属性 Fills：</strong></p><ul><li>填充色 Fills Color</li><li>填充叠加模式 Fills Blend Mode</li><li>填充透明度 Fills Opacity</li><li>填充类型 Fills Type</li><li>填充是否可见 Fills Visible</li><li>完整填充样式 Fully Fills Style （匹配被选择元素的所有填充样式 Matches all fill styles of the selected element）</li><li>填充样式ID Fills Style ID （通过ID来匹配样式 Matches style by ID）</li></ul><p><br></p><p><strong>图层圆角 Radius:</strong></p><ul><li>左上 Radius-top left</li><li>右上 Radius-top right</li><li>左下 Radius-bottom left</li><li>右下 Radius-bottom right</li></ul><p><br></p><p><strong>描边相关属性 Strokes：</strong></p><ul><li>描边颜色 Strokes Color</li><li>描边透明度 Strokes Opacity</li><li>描边叠加模式 Strokes Blend Mode</li><li>描边类型 Strokes Type</li><li>描边可见度 Strokes Visible</li><li>描边对齐 Strokes Align</li><li>描边端点 Strokes Cap</li><li>描边转角 Strokes Join</li><li>描边斜接限制 Strokes Miter Limit</li><li>完整描边样式 Fully Strokes Style （匹配被选择元素的所有描边样式 Matches all Strokes styles of the selected element）</li><li>描边样式ID Strokes Style ID （通过ID来匹配样式 Matches style by ID）</li></ul><p><br></p><p><strong>图层效果 Effects：</strong></p><ul><li>完整效果样式 Fully Effects</li><li>效果样式ID Effect Style ID</li></ul><p><br></p><p><strong>自动布局相关属性 Auto layout：</strong></p><ul><li>排列方向 Direction</li><li>元素间距 Items Spacing</li><li>上内边距 Padding Top</li><li>下内边距 Padding Bottom</li><li>左内边距 Padding Left</li><li>右内边距 Padding Right</li></ul><p><br></p><p><strong>文本相关属性 Text：</strong></p><ul><li>文本内容 Characters</li><li>字体 Font Family</li><li>字重 Font Weight</li><li>文号 Font Size</li><li>是否有链接 Hyperlink</li><li>水平对齐 Horizontal Align</li><li>垂直对齐 Vertical Align</li><li>文字修饰 Text Decoration</li><li>文本间距 Letter Spacing</li><li>文本间距单位 Letter Spacing Unit</li><li>行高 Line Height</li><li>行高单位 Line Height Unit</li><li>是否包含丢失字体 Has Missing Font</li><li>段落缩进 Paragraph Indent</li><li>段落间距 Paragraph Spacing</li></ul><p><br></p><p><strong>组件相关 Component：</strong></p><ul><li>组件描述 Description</li><li>相同母组件ID | Main Component ID</li></ul><p><br></p><p><strong>交互相关 Prototype：</strong></p><ul><li>交互动作 Reactions</li><li>滚动溢出方向 Overflow Scrolling</li><li>固定子元素数量 Number Of Fixed Children</li></ul><p><br></p><p><strong>💻 主要功能说明 Functions：</strong></p><ul><li>默认查找当页元素，你可以为想要的结果添加各种过滤。</li><li>Default find at current page, you can add various filters for desired results.</li></ul><p><br></p><ul><li>点击最上方的”当前页“，可以切换到查找整个文档</li><li>Click”Current Page“，can select \"All Files\"</li></ul><p><br></p><ul><li>选择一个或多个元素后，以选中元素作为基准进行查找，你可以额外的选择一些层级进行过滤。</li><li>When one or more elements have been selected, you can use the selected element as a benchmark to look up, and you can select additional level for filtering.</li></ul><p><br></p><ul><li>选择一个或多个元素后，界面上会显示选中的第一个元素的名称和其他元素的数量，搜索框和属性过滤的输入控件后面会显示一个填充按钮，点击按钮会自动将选中的元素对应的属性值填入。这样你就可以查找相似的元素了。</li><li>Select one or more elements, the screen will displays the name of the first element selected and the number of other selected elements. The search box and the added properties will display a fill button that automatically fills in the values of the selected elements.Then you can find and select similar layers.</li></ul><p><br></p><p><br></p><p><strong>找到查找结果后右下方会显示” 选中所有“、”挨个查看“和”结果列表“按钮，在查找整个文档时只会显示一个结果列表的按钮。结果列表会按页面显示查找到元素，点击列表名称可以收起/展开列表元素，点击具体元素可以直接定位到元素。刚得到查找结果后如果数量有点多，点击结果列表按钮可能会有点延迟，此时可以多次点击。</strong></p><p><br></p><p><strong>When the results are found, the 'select all', 'View by view,' and 'result list' buttons are displayed in the lower right corner, and only one result list button is displayed when the whole document is searched. The result list will display the found elements according to the page. Click the list name to collapse/expand the list element, and click the specific element to directly locate the element.If the number of search results is a little high, results list will not work good to show, so you can click it several times.</strong></p><p><br></p><p><strong>🛠 额外功能 Additional functionality：</strong></p><p><br></p><p>点击右上角比较不明显的icon会进入额外的功能界面，目前只有两个功能——一键清除参考线和给我打钱....</p><p><br></p><p>Clicking on the less obvious icon in the upper right corner will bring you into the interface of additional functions. Currently, there are only two functions -- Clear the guide and send me money....</p><p><br></p><p><br></p><p>需要更多查找方式和功能可以留言，</p><p>You can leave a message if you need more search methods and functions,</p><p><br></p><p>✉️ 如果使用中遇到问题或有任何建议，可以通过以下方式联系我：</p><p>If you encounter any problems or have any suggestions, you can contact me through the following ways:</p><p><br></p><p><strong>WeChat:Mr-chat</strong></p><p><strong>Email：xingzhuo1989@live.cn</strong></p>","id":"968465923536935510","installCount":7666,"lastUpdateDate":"2022-05-14T07:20:57.591Z","likeCount":211,"name":"A Selector","publisherHandle":"Xingzhuo","publisherId":"444804","publisherName":"Xing Zhuo","runCount":7201,"viewCount":12780},{"description":"<p>A tiny plugin to align any selected object in a column or row with a custom spacing without using Auto layout.</p><p>Useful to organise big group of variants.</p><p><br></p><ol><li>Select some objects</li><li>Run the plugin</li><li>Set the layout direction and the spacing needed</li><li>Hit Align objects</li></ol><p><br></p><p>All your objects selected will be organised in a single row or column.</p>","id":"968604782751953570","installCount":197,"lastUpdateDate":"2021-10-21T17:26:20.700Z","likeCount":4,"name":"Set Layout Direction","publisherHandle":"_gonzalo","publisherId":"512309","publisherName":"Gonzalo Vasquez","runCount":183,"viewCount":748},{"description":"<p>&nbsp;See how your designs perform before you click <em>\"publish\"</em></p><p>&nbsp;</p><p>Artificial Intelligence instantly predicts where users will look after engaging with your design so you can save time and avoid fixes after the launch. Don’t doubt even for a moment &amp; prove your design vision!</p><p>&nbsp;</p><p>Learn if the CTA button is visible enough, conduct A/B testing, see which object attracts the most attention, and create a better user experience based on data!</p><p><br></p><h2><strong>🤔 How Does It Work</strong></h2><p>Select a Figma Frame which you want to test;</p><p>Go to: Plugins &gt; Attention Insight &gt; 🎈Analyze design;</p><p>Wait for 30 seconds 🕓 and check the results.</p><p>&nbsp;</p><h2><strong>👑 Features</strong></h2><p>💎 Attention Heatmaps</p><p>💎 Clarity Score</p><p><br></p><h2><strong>🤖 Technology</strong></h2><p>Our attention prediction model is based on deep learning and can automatically detect visual attention shifts. More about the technology - <a href=\"https://attentioninsight.com/technology/\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">https://attentioninsight.com/technology/</a></p><p><br></p><h2><strong>🧐 Hey, Don’t You Have an Account Yet?&nbsp;</strong></h2><p>No worries! Register for a Free Trial and get 5 free tests per month.</p><p><a href=\"https://app.attentioninsight.com/auth/signin\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">https://app.attentioninsight.com/auth/signin</a></p>","id":"968765016617421513","installCount":2495,"lastUpdateDate":"2021-06-03T11:29:17.536Z","likeCount":53,"name":"Attention Insight","publisherHandle":"c3acc320_3217_4","publisherId":"968865560671572058","publisherName":"Attention Insight","runCount":2095,"viewCount":4090},{"description":"<p>Este plugin cria páginas para organizar melhor o seu novo projeto.</p><p>Este modelo de organização foi adaptado do <a href=\"https://medium.com/ifood-tech/nosso-processo-de-organização-de-arquivos-no-figma-c9bc76482335\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">modelo de organização da galera do iFood</a>, publicada no Medium deles.</p><p><br></p><h2>Releases futuras</h2><ul><li>Cover para thumbnail gerada automaticamente</li></ul>","id":"969307818341091241","installCount":310,"lastUpdateDate":"2021-04-29T00:32:45.438Z","likeCount":6,"name":"File organizer","publisherHandle":"eduvivaa","publisherId":"2867496","publisherName":"Eduardo Viva","runCount":161,"viewCount":947},{"description":"<p>This simple color picker allows you to use the LCH color space in your designs with ease. The LCH color space is perceptually uniform and significantly simplifies creating and modifying color systems. If you'd like to find out more, check out this great <a href=\"https://lea.verou.me/2020/04/lch-colors-in-css-what-why-and-how/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">article</a>!</p><p><br></p><h2><strong>Features</strong></h2><ul><li>Pick colors by adjusting lightness, chroma, hue and alpha levels;</li><li>Use it in your designs for fills, strokes and gradients;</li><li>Adjust colors of multiple objects simultaneously using <code>Ctrl</code> (<code>⌘</code>) and <code>Shift</code> keys;</li><li>Import/export colors from/to <code>hex</code>, <code>rgb()</code> and <code><a href=\"https://www.w3.org/TR/css-color-4/#specifying-lab-lch\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">lch()</a></code> CSS strings.</li></ul><p><br></p><h2>Feedback and troubleshooting</h2><p>Source code is available at <a href=\"https://github.com/zisest/figma-lch-plugin\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">GitHub</a>.</p><p><br></p><p>If you have any suggestions or encounter any bugs, feel free to message me at <a href=\"mailto:zisest@gmail.com?subject=Figma%20LCH%20Plugin\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">zisest@gmail.com</a>.</p><p><br></p><h2><strong>Acknowledgements</strong></h2><p>This plugin was inspired by <a href=\"https://lea.verou.me/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Lea Verou</a>'s color picker available at <a href=\"https://css.land/lch/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">css.land/lch/</a>. </p><p><br></p><p>Conversion logic is by <a href=\"https://svgees.us/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Chris Lilley</a>.</p>","id":"969496279507778512","installCount":784,"lastUpdateDate":"2022-03-24T20:25:54.514Z","likeCount":28,"name":"LCH","publisherHandle":"zisest","publisherId":"2368961","publisherName":"Nikita Antonov","runCount":715,"viewCount":1684},{"description":"<p><a href=\"https://www.telerik.com/unite-ux\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Unite UX</a>&nbsp;is a design-to-development UI components style builder,&nbsp;leveraging&nbsp;the Telerik and Kendo UI&nbsp;web&nbsp;components. On the design side, the Unite UX plugin supports the transfer of metrics, layers,&nbsp;components,&nbsp;icons&nbsp;and design tokens from Figma to the developers using the Unite UX app.&nbsp;&nbsp;</p><p>&nbsp;</p><p>Kickstart your UI library by using the Telerik and Kendo UI kits based on Bootstrap and Material Design and modify to your vision and needs. When you’re ready to handoff the designs, export from Figma via the Unite UX plugin and share with the team of developers. Hassle-free!&nbsp;</p><p>&nbsp;</p><p>Now your development team is ready to implement your design requirements on top of the Telerik and Kendo UI components in an assisted way, no code.&nbsp;The result&nbsp;is the ready-to-use CSS and SASS of your component library&nbsp;and a generated custom documentation in Storybook.&nbsp;</p>","id":"969582819918741496","installCount":3374,"lastUpdateDate":"2022-05-18T12:14:22.956Z","likeCount":46,"name":"Unite UX","publisherHandle":"progress","publisherId":"953919576296700692","publisherName":"Progress","runCount":2715,"viewCount":9103},{"description":"<p>Chinese Copywriting Linter 帮助你自动在中文和半角的英文、数字、符号之间插入空格，并且替换半角符号为全角符号。</p><p><br></p><p>Chinese copywriting guidelines for better written communication／中文文案排版指北</p><p><a href=\"https://github.com/sparanoid/chinese-copywriting-guidelines\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">https://github.com/sparanoid/chinese-copywriting-guidelines</a></p><p><br></p><p><a href=\"https://love.figma.cool/\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">❤️赞助我们</a> | Made by <a href=\"http://figma.cool/\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">Figma.Cool</a></p>","id":"969605084843030535","installCount":2170,"lastUpdateDate":"2021-04-29T15:09:11.041Z","likeCount":48,"name":"Chinese Copywriting Linter","publisherHandle":"figmacool","publisherId":"4385338","publisherName":"Figma.Cool","runCount":1247,"viewCount":4556},{"description":"<p>Bomberos tracker is a plugin made for managing the activities on the <a href=\"https://www.figma.com/community/file/969639692881611105/Planner---Bomberos\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">Bomberos Planner</a> community file.</p><p><br></p><p>Select a summary card and hit calculate.</p>","id":"969640081521886230","installCount":221,"lastUpdateDate":"2021-11-10T09:57:18.450Z","likeCount":4,"name":"Bomberos Tracker","publisherHandle":"lucagiraudo","publisherId":"935827800568711489","publisherName":"Luca Giraudo","runCount":198,"viewCount":859},{"description":"<p>This is a tool to generate a dynamic, accessibility-first color palette for your design systems within Figma.</p><p><br></p><p>Using key colors, you can target specific contrast ratios against a chosen background color and color space. These constraints will generate a color palette based on that key color. You can choose to test and find out more information, or set the color styles for your file based on these results.</p><p><br></p><p>If you'd like a video walkthrough on how I use this tool, <a href=\"https://youtu.be/q4dGTPE4McU?t=585\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">you can see that here on my Youtube Channel</a>.</p><p><br></p><p>This tool leverages the work done by Nate Baldwin on <a href=\"https://leonardocolor.io/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">LeonardoColor.io</a>, an open source color tool, to bring similar functionality into generating test palettes, and updating styles in your system. Thus allowing you to check your work with more data from their tool.</p><p><br></p><p>If you have any questions, you can reach out to me on Twitter at <a href=\"http://twitter.com/darianrosebrook\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">@darianrosebrook</a></p>","id":"970405419734718732","installCount":3877,"lastUpdateDate":"2022-03-23T16:25:55.934Z","likeCount":158,"name":"Accessible color palettes","publisherHandle":"darian","publisherId":"316622","publisherName":"Darian Rosebrook","runCount":3978,"viewCount":7311},{"description":"<p>Rename layer by naming cases.</p><p><br></p><p>NOTE:</p><ul><li>Component as Variant is excluded.</li></ul>","id":"970748258682052941","installCount":213,"lastUpdateDate":"2021-05-03T07:55:39.996Z","likeCount":11,"name":"Renaming Convention","publisherHandle":"hiloki","publisherId":"410711","publisherName":"Hiroki Tani","runCount":198,"viewCount":758},{"description":"<p><strong>The fastest way to archive your work and look back at previous iterations. No more manual hassle - get rid of the copy/paste and duplicate pages process.&nbsp;</strong></p><p><br></p><p>✅ Save copies of frames you're working on, in a single click.</p><p>✅ Explore a visual chronological timeline of your saved frames.</p><p>✅ Navigate faster with a time saving version preview.</p><p>✅ Easily search and browse through saved frames.</p><p><br></p><h2><strong>⚙️</strong> <strong>How it works</strong></h2><p>Select the frame you want to save and click the Save button. Frame History will send a copy of the frame to a page called “Frame History” that keeps a visual chronological timeline of your saved versions.</p><p><br></p><p>Every time you save a version, Frame History will automatically add a version preview to the plugin’s UI. Version previews are only visible to the creator, and are easy to find using the search feature.</p><p><br></p><h2><strong>⭐ Help us improve</strong></h2><p>Feedback and questions are welcome: <a href=\"mailto:ColoRocket.Contact@gmail.com\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">colorocket.contact@gmail.com</a></p><p><br></p><h2>🚀 <strong>Roadmap</strong></h2><p>Frame History is currently in beta. We are planning to add more cool features to make it even better!&nbsp;</p><p><br></p><p>User requests:</p><ul><li><s>Detach all instances when saving</s></li><li>Save multiple frames at once</li><li>Resize plugin window</li></ul>","id":"970748860959178062","installCount":1427,"lastUpdateDate":"2021-08-04T21:16:57.681Z","likeCount":55,"name":"Frame History","publisherHandle":"5293b030_38aa_4","publisherId":"973844516792463771","publisherName":"ColoRocket Team","runCount":916,"viewCount":4721},{"description":"<p>Export selected frame name and link URL to another page in the current file.</p><p><a href=\"https://workabroad.jp/posts/2252\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\"><strong>More detail is here.</strong></a></p><ul><li>Get share link URL from \"Share\" button.</li><li>Select frames you want to export the name.</li><li>Execute this plugin and past your URL.</li><li>You will have a new page named \"Screen Name ${DateTime}\".</li></ul>","id":"970942453220570484","installCount":248,"lastUpdateDate":"2022-01-07T07:02:53.697Z","likeCount":6,"name":"Screen Name Export","publisherHandle":"shunwitter","publisherId":"1259692","publisherName":"Shunsuke","runCount":263,"viewCount":1234},{"description":"<h1>Scale brand decisions with confidence.</h1><p>Arcade is for enterprise teams of designers, product managers, and engineers who want to work with design tokens without writing code.</p><p><br></p><h2>Figma, meet Arcade.</h2><p>Arcade enables your team to leverage design tokens in the correct way. Your designers will be able to use and update tokens in their Figma file, your engineers will have access to zero-configuration code exports, and anyone will be able to see the live-updating tokens in Arcade. One functional source for everyone. It's a thing of beauty.</p><p><br></p><h2>Features</h2><ul><li>Create, edit or delete tokens stored on Arcade right from within Figma</li><li>Use tokens in your designs: Full support for spacing, sizing, border radii or color tokens!</li><li>Publish your tokens to be used by your engineering team: We provide export to JS, JSON, CSS, SCSS, LESS, Swift, Android, Style Dictionary, Theo, DSP.</li><li>Built-in versioning support: Only publish what you think is production-ready!</li></ul>","id":"971048754527773100","installCount":706,"lastUpdateDate":"2021-06-08T11:51:29.339Z","likeCount":23,"name":"Arcade","publisherHandle":"usearcade","publisherId":"968882886975398316","publisherName":"Arcade","runCount":673,"viewCount":2603},{"description":"<p>🚀 This plugin generates <strong>React Native styling code</strong> for any object you select on the canvas.</p><p><br></p><p>🧑‍💻 At HoneyBook, our mobile app is built in React Native and our amazing developers needed a way to quickly copy code that follows the React Native styling syntax.</p><p><br></p><p>🏗 This plugin was written by one of our designers as a side project and we really wanted to share it with the community, so please let us know if you find any issues or if you have suggestions on how to improve it!</p>","id":"971127575300155852","installCount":1201,"lastUpdateDate":"2021-06-03T22:59:40.570Z","likeCount":20,"name":"React Native Styling Inspector","publisherHandle":"honeybook","publisherId":"966566627116262316","publisherName":"HoneyBook","runCount":914,"viewCount":2246},{"description":"<p>This plugin is a customization of <a href=\"https://www.figma.com/community/plugin/795096273369409539/Status-Annotations?fuid=848078675115518560\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">Status annotations</a></p><p><br></p><p>Figma 디자인의 진행 상태를 이해하기 쉽도록 시각적 형태로 보여줍니다.</p>","id":"971306608854701561","installCount":138,"lastUpdateDate":"2021-05-06T01:47:27.477Z","likeCount":5,"name":"Figma Status","publisherHandle":"f68f4dd4_ab89_4","publisherId":"848078675189657544","publisherName":"Seung Gyun Lee","runCount":199,"viewCount":1764},{"description":"<p>Visio Studio allows you to edit and optimise your pictures directly inside Figma or Figjam thanks to a powerful background removal model.</p><p><br></p><p>Advanced background removal</p><p>→ Use our advanced background removal tool, powered by high-end computer vision technology to provide you the pixelcut results.</p><p><br></p><p>How to use Visio Studio:</p><p><br></p><p>1. Simply select the Frame you want to edit from your Figma or Figjam.</p><p><br></p><p>2. With one tap Visio Studio will remove the background of your picture.</p><p><br></p><p>3. That's it!</p><p><br></p><p>Check https://visio.studio for more information</p><p>or drop us a line at hello@gaspardbruno.com for any comments or feedback.</p>","id":"971323795334996480","installCount":1856,"lastUpdateDate":"2021-10-13T14:07:10.899Z","likeCount":15,"name":"Visio Studio","publisherHandle":"gaspardbruno","publisherId":"758591","publisherName":"Gaspard+Bruno","runCount":1845,"viewCount":2109},{"description":"<p>This plugin helps creating \"Link to Frame\" list.</p><p><br></p><p>📝How to run:</p><ul><li>Add `#` to the Frame name of the link.</li><li>Run the Plugin.</li><li>A list of links will be built.</li></ul>","id":"971347067329627666","installCount":367,"lastUpdateDate":"2022-07-26T18:12:03.394Z","likeCount":11,"name":"ToC Builder","publisherHandle":"hiloki","publisherId":"410711","publisherName":"Hiroki Tani","runCount":318,"viewCount":1692},{"description":"<p><strong>Randomise colour</strong> - Premium color randomization straight outta Europe, for your viewing pleasure!</p><p><br></p><p>Applies colour variations to selected objects (Everything with solid fill, stroke or gradients works, including text). Great for creating an organic, handmade look, or wild patterns.</p><p><br></p><p>Applies variations using normal distribution, with original colour as mean, and distance setting as sigma, sometimes resulting in extreme outliers. Selected object's original colours are cached as long as the plugin is open.</p><p><br></p><p><strong>Options:</strong></p><ul><li>Hue distance from original colour</li><li>Saturation distance from original colour</li><li>Lightness distance from original colour</li><li>Opacity distance from original colour</li><li>Include fills</li><li>Include strokes</li><li>Include gradients</li></ul>","id":"971378736211263006","installCount":1266,"lastUpdateDate":"2021-05-04T17:39:38.083Z","likeCount":27,"name":"Randomise colour","publisherHandle":"lhli","publisherId":"4390616","publisherName":"smlsvnssn","runCount":975,"viewCount":2432},{"description":"<h2><strong>Figma and XTM Cloud – Picture Perfect</strong></h2><p>Figma’s design features bring ideas to life and make content sing.</p><p>XTM Cloud’s translation technology keeps the voices in tune for any audience.</p><p>With Figma and XTM Cloud, you can go where your imagination takes you.</p><ul><li>Synchronise between Figma and XTM Cloud and start translating design content from the moment of creation</li><li>Give linguists <strong>visual context</strong> so they can tailor messages to multilingual audiences</li><li>Make an image and a brand equally appealing and resonant in Berlin, Beijing and Buenos Aires</li></ul><p><br></p><p><strong>Intelligent Automation For Design Content</strong></p><ul><li>Transfer of content from Figma to XTM Cloud is instantaneous</li><li><strong>XTM Cloud transcreation</strong> delivers creativity and a range of alternative translations to choose from</li><li>Multilingual content is returned to Figma at the click of a button</li></ul><p><br></p><p><strong>You’re The Voice</strong></p><ul><li>Project managers, linguists and designers all have valuable opinions to share</li><li><strong>XTM Connect - Figma</strong> unites each team members – and each voice – in pursuit of excellence</li><li>No thread is lost, no question left unanswered&nbsp;</li></ul><p><br></p><p><strong>Get It Fast <em>And</em> Get It Right</strong></p><ul><li>Linguists work on content while designers are working on images</li><li>Designers have <strong>instant visibility</strong> of translated content and how it will appear in context</li><li>Talented people working more quickly, working more productively <strong>and working together</strong></li></ul><p><br></p><p><strong>What’s Your 2020s Vision?</strong></p><ul><li>Share it with confidence</li><li>Share it with persuasiveness</li><li>Share it with the world</li></ul><p><br></p><p><strong>These customers trust us, and so can you</strong></p><p>GAP, Swiss Post, Kyocera, Crown, Sony Interactive Entertainment, Expedia Group, BigPoint, RICOH</p><p><br></p><p><strong>Getting the most out of XTM Connect - Figma</strong></p><p>To&nbsp;take full advantage of XTM Connect - Figma, create an account on XTM Cloud. Get in touch with our <a href=\"mailto:partners@xtm-intl.com\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Partner team</a> and they’ll give you all the help you want.</p><p>For more information or for a <a href=\"https://xtm.cloud/trial/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\"><strong>free trial of XTM Cloud</strong></a>, check out our website: <a href=\"https://xtm.cloud\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">xtm.cloud</a></p>","id":"971389911140395557","installCount":174,"lastUpdateDate":"2022-04-04T10:01:22.037Z","likeCount":5,"name":"XTM Connect - Figma","publisherHandle":"a5b19280_cf2d_4","publisherId":"966553312195332249","publisherName":"XTM International Ltd.","runCount":166,"viewCount":962},{"description":"<p>The Variant Switcher plugin recursively changes component instances to a different variant based on the specified property.</p><p><br></p><p>If you have a lot of different components in your design system that share a same property (e.g., \"theme\"), you can use this plugin to switch them to the same property value (e.g., \"theme=dark theme\").</p><p><br></p><p>Video tutorial <a href=\"https://youtu.be/JBiuas4_Occ\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">on YouTube</a>.</p><p><br></p><h2>Usage</h2><p>The Variant Switcher plugin has three main input fields:</p><ul><li><strong>Property Name</strong>: the property you want to change</li><li><strong>From Variant</strong>: (Optional) the current value you want to target (leave blank to select all instances with the selected property regardless of the current value)</li><li><strong>To Variant</strong>: the new value you want to set the property</li></ul><p><br></p><p>And a few advanced options:</p><ul><li><strong>Deep Switch</strong>: When unchecked, the plugin will not switch children after switching parent instance. (<a href=\"https://github.com/brightlayer-ui/figma-plugins/blob/master/variant-switcher/_assets_/deep-switch-diagram.png\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Diagram explanation</a>)</li><li><strong>Switch Full Document</strong>: When checked, the plugin will traverse through the entire document. When unchecked, the plugin will only switch the current selection, or the current page if nothing is selected.</li><li><strong>Main Component Name</strong>: (Optional) Change only instances with the specified main component name</li></ul><p><br></p><h2>Contact Us</h2><ul><li>🐛Bugs report or feature request? <a href=\"https://github.com/brightlayer-ui/figma-plugins/issues\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://github.com/brightlayer-ui/figma-plugins/issues</a></li><li>✉️General inquiries? brightlayer-ui@eaton.com</li><li>❤️ Visit our home page! <a href=\"http://brightlayer-ui.github.io\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">brightlayer-ui.github.io</a></li></ul><h2><br></h2>","id":"971482182464094790","installCount":917,"lastUpdateDate":"2022-03-09T20:35:49.351Z","likeCount":42,"name":"Variant Switcher","publisherHandle":"eaton_community","publisherId":"1023324960527588936","publisherName":"Eaton Design System","runCount":932,"viewCount":3799},{"description":"<p><strong>A plugin to sync the colors from the codebase and the design files, the easy way!</strong></p><p><br></p><p>In Figma, colors are handled as <em>styles </em>and there is no way to ensure these variable are consistent between the code and the design files.</p><p>Figma Color Manager solves this by <em>acting as an interface between your Figma styles and your codebase</em>.</p><p><strong>You'll always have the same colors with the same name, on both sides. </strong></p><p><br></p><h2>Recommended Workflow</h2><ul><li>Use a single CSS file that holds the colors, it'll be easier to update it regularly</li><li>Whenever changes are made in figma, <em>export </em>your colors and copy them in your code.</li><li>Use the<em> import feature</em> if your colors come from your codebase</li><li>If your color styles have a description, store your colors as JSON or JS and build it using <code><a href=\"https://www.npmjs.com/package/json-to-css-variables\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">json-to-css-variables</a></code></li><li>If you don't care about color descriptions, you can just export to <code>CSS</code></li></ul><p><br></p><h2>Other usages</h2><ul><li>As a developer, you started a project using HTML and CSS and now want to design it in Figma. You can copy your colors CSS variables and import them in your new Figma project.</li><li>As a designer, you delivering a design to development. You can export the colors, and give it to them. It'll ensure they use the right colors and they'll have the same names, avoiding confusion.</li><li>You want to use <em>only </em>colors from another Figma project. Using it as a library would overload your components and text styles. Just export the colors and import them in your other project.</li></ul><h2>Next Features</h2><ul><li><code>SCSS</code> support for import and export</li><li>Figma colors can have spaces in them, in the code they can't. For now we <code>camelCase</code> it in <code>JS</code>/<code>JSON</code> and <code>kebab-case</code> it for <code>CSS</code>. I plan on making this configurable.</li></ul><h2>About Me</h2><p>I am Tom Quinonero, a developer that always works close to the design team. I bring back together coders and UI teams by making tools and process that improve collaboration. If you need my help on a project, <a href=\"mailto:tomquinonero@hey.com\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">send me an email</a>!</p>","id":"971807532885631684","installCount":1966,"lastUpdateDate":"2022-04-08T17:05:03.613Z","likeCount":98,"name":"Figma Color Manager","publisherHandle":"tomquinonero","publisherId":"34401","publisherName":"Tom Quinonero","runCount":1712,"viewCount":7050},{"description":"<p>Add flavour to your ipsum text with themes like Sport, Fashion, Hard Yakka, Mo Money, Super Luxe, Dining, Cruising and more.&nbsp;</p><p><br></p><p>The paragraphs are compiled from a large collection of selected words and phrases related to each theme. I love Super Luxe and Mo Money myself.&nbsp;</p><p><br></p><h2><strong><em>\"...Russian billionaire's bachelor party, Jay Z's guest list skiing in Aspen super yachts private art collection. Upgrade lifestyle Rolls Royce that's B for billions, I'm a Saudi Prince international jetset gold cars in London...\"</em></strong></h2><p><br></p><p>and Faahshion&nbsp;</p><h2><strong><em>\"...Rockin Forever 21 - just turned thirty. What do models eat anyway? Long live the queen - long live Kate Moss, Karl Lagerfeld’s cat Choupette after party Alexander McQueen. I’m Hugo’s boss Burberry trench just another Vogue fashion night out, it’s Prada daahling...\"</em></strong></h2><p><br></p><p>Want more flavours? Let me know what you want and I'll add them.</p><p><br></p><p>Put a smile on your work and a grin on your client's face.&nbsp;</p>","id":"972149794657913669","installCount":835,"lastUpdateDate":"2021-07-30T12:28:24.592Z","likeCount":7,"name":"The Write Flavour","publisherHandle":"userkind","publisherId":"847796302550137728","publisherName":"Garreth Wills","runCount":752,"viewCount":1451},{"description":"<p>Quickly desaturate one or many layers with image fills. If you work in grayscale and have to manually desaturate images many times a day, this is the plugin for you.</p><p><br></p><h2>Usage</h2><p>Select the layers you want to desaturate and run the plugin. When selecting a frame or a group, it automatically desaturates all children layers as well.</p><h2><br></h2><p>After running the plugin once, use the \"Run Last Plugin\" shortcut (⌥⌘P / Alt + Ctrl + P) to run the plugin rapidly.</p><p><br></p><p>To undo desaturation, use the undo shortcut (⌘Z / Ctrl + Z) like usual.</p><p><br></p><h2>Open Source</h2><p>Desaturate is an open source project. Check it out <a href=\"https://github.com/aashreys/figma-desaturate\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">here</a>.</p>","id":"972353621057384319","installCount":6377,"lastUpdateDate":"2021-05-15T22:21:47.616Z","likeCount":50,"name":"Desaturate","publisherHandle":"aashreys","publisherId":"697643","publisherName":"Aashrey Sharma","runCount":5861,"viewCount":6562},{"description":"<p>Merge multiple text layers into one paragraph text.</p><p>合并多个文本图层为一个段落文本。</p><p><br></p><p>How to use</p><ol><li>Select multiple text layers</li><li>Run MergeText</li></ol><p><br></p><p>如何使用</p><ol><li>选中多个文本图层</li><li>运行 MergeText</li></ol><p><br></p><p><a href=\"https://love.figma.cool/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">❤️赞助我们</a> | Made by <a href=\"http://figma.cool/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Figma.Cool</a></p>","id":"972423632807749534","installCount":746,"lastUpdateDate":"2022-04-22T12:32:54.663Z","likeCount":23,"name":"MergeText","publisherHandle":"figmacool","publisherId":"4385338","publisherName":"Figma.Cool","runCount":573,"viewCount":1952},{"description":"<p>Round to remove decimals of attributes such as x, y, width, height, border, and so on</p><p><br></p><p>四舍五入，去掉图层 x、y、宽、高、边框、圆角等属性的小数点</p>","id":"972907074446766155","installCount":3001,"lastUpdateDate":"2021-06-01T02:51:47.713Z","likeCount":44,"name":"Better Round to Pixel","publisherHandle":"jiangzilong","publisherId":"923515618965061354","publisherName":"ZiLong Jiang","runCount":2329,"viewCount":3439},{"description":"<p>Transform Figma styles to semantic CSS</p>","id":"972939585144317012","installCount":1869,"lastUpdateDate":"2021-07-15T00:14:04.177Z","likeCount":37,"name":"Figma to CSS","publisherHandle":"5a63af60_c1c7_4","publisherId":"3037289","publisherName":"LeonidasEsteban","runCount":2179,"viewCount":2147},{"description":"<p>This plug-in is used by designers to quickly mark the size of the frames / groups / component for developers.</p><ol><li>Create a slice layer with the same size and the same name in the frame / group / component / instance).</li><li>Prevent developers from selecting elements in the frame / instance, getting the wrong icon size and element position.</li><li>Add a red background to mark the size of the frame / component / instance.</li><li>Hides / shows / selects / deletes all Slice layers in the Frame / Group / Component that you selected.</li></ol><p>If you find problems or have any suggestions during use, it is recommended to enter the following link to contact me.</p><p><a href=\"https://www.wjx.cn/vj/hmuWich.aspx\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://www.wjx.cn/vj/hmuWich.aspx</a></p><p><br></p><p>设计师可以使用本插件来为开发工程师快速标注切图（支持 frame / group / component）的大小。</p><ol><li>支持在 frame / group / component / instance 中创建一个等大、同名的 slice 层。</li><li>支持阻止开发工程师选中 frame / group / component / instance 的内部元素，防止他们选中错误的图标、测量到错误的间距。</li><li>支持给 frame / component / instance 添加半透明的红色背景来标注它的大小。</li><li>隐藏、显示、选中和删除您选中的 frame / group / component 内的所有Slice层。</li></ol><p>如果您在使用中发现什么问题或者有一些功能改进的建议，推荐通过下面的链接填写问卷来联系我（使用中文即可）。<a href=\"https://www.wjx.cn/vj/hmuWich.aspx\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://www.wjx.cn/vj/hmuWich.aspx</a></p>","id":"973141935723343978","installCount":531,"lastUpdateDate":"2022-02-20T06:27:05.516Z","likeCount":17,"name":"Fast Slice","publisherHandle":"dokestudio","publisherId":"850572544431036611","publisherName":"Doke","runCount":613,"viewCount":1383},{"description":"<p>This plugin allows you to export images from your selection without any crop and in their native size.</p><p><br></p><p>If you ever received a design without the images used in the file attached, this plugin is here to help.</p><p><br></p><p>How to use:</p><ul><li>Select one or multiple elements having an image in their Fill property or simply a frame</li><li>Run the plugin</li><li>Customize the settings</li><li>Save your selection on your computer</li></ul><p><br></p><p>Settings:</p><ul><li>Format (PNG or JPEG)</li><li>Quality (JPEG only)</li><li>Selection (Export all layers in the selection or only the direct selection)</li></ul><p><br></p><p>Good to know:</p><ul><li>If you select only one image, the plugin will export that image directly.</li><li>If you select multiples images, a zip file will be exported.</li><li>The original metadata of the images cannot be exported, only the original pixels are.</li><li>The plugin can be slow when you have large images loaded in your design. Try exporting one image at a time if it seems to be stuck.</li></ul>","id":"973190386632562805","installCount":9948,"lastUpdateDate":"2022-02-07T17:03:27.079Z","likeCount":103,"name":"Export Original Images","publisherHandle":"Mamboleoo","publisherId":"177630","publisherName":"Louis Hoebregts","runCount":10041,"viewCount":22187},{"description":"<p>This plugin collects all components from frames in the current figma page and then copies and rearranges them into new printable frames. The printable frames can then be exported and printed on regular letter head. This plugin is especially helpful for frames with auto-layout since they can only scale in only one direction, making printing difficult.</p><p><br></p><p>Visit <a href=\"https://github.com/anovis/print-resizer\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">github</a> for more information on how to use the plugin, how to report issues, and how to suggest further improvements.</p><p><br></p>","id":"973303055878323341","installCount":256,"lastUpdateDate":"2021-05-11T22:22:31.081Z","likeCount":6,"name":"Print Resizer","publisherHandle":"anovis","publisherId":"1316933","publisherName":"Austen Novis","runCount":218,"viewCount":1037},{"description":"<h2>Speed up your Flutter development</h2><p>Become a pioneer by using an AI powered Figma to Flutter converter</p><p><br></p><p>Update: We will soon be launching public beta version of&nbsp;Codis.io&nbsp;that you can waitlist for at&nbsp;<a href=\"https://codis.io/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://codis.io</a></p><p><br></p><h2>Our vision - to enable an automated and scalable creation of Flutter widgets</h2><p><br></p><p>The design implementation takes at least 50% of a developer's coding time. We want to completely automate the conversion of UI design into Flutter code, therefore enabling developers to focus on the implementation of functionality.</p><p><br></p><h2>Our goal is to change the way of developing Web and Mobile applications</h2><p><br></p><p>High scalable service converts a design into Flutter widgets that have accurate Figma design implementation. Developers pick-up ready to use Flutter widgets and then continue with business logic implementation.</p>","id":"973567327675124944","installCount":471,"lastUpdateDate":"2022-06-23T04:23:06.068Z","likeCount":4,"name":"Codis.io: Design to Flutter AI Converter","publisherHandle":"codis","publisherId":"973558057661127246","publisherName":"Codis.io","runCount":764,"viewCount":1306},{"description":"<p>Figma Tips is a plugin that helps you up your design game in Figma by watching short tutorial videos about designing in Figma!</p><p><br></p><p><strong>What you can do:</strong></p><ul><li>Watch tutorial videos in Figma as you design</li><li>Save a tip to a file to share tips with others</li><li>Share tips via Twitter</li><li>Save your favorite tips to a saved list in the plugin</li></ul><p><br></p><p><strong>Who creates the tips?</strong></p><p>Figma Tip videos are created by Designer Advocates at Figma and are added regularly. If you can't find a video for your needs, we are adding multiple tips every week.</p><p><br></p><p><strong>Got ideas or experiencing bugs?</strong></p><p>Shoot me an email @ <a href=\"mailto:rogie@figma.com\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">rogie@figma.com</a> if you have a topic you'd like us to cover for upcoming tip videos. If you found a bug or have an idea to improve this plugin, I'm all ears!</p><p><br></p><p>Plugin creation fueled by coffee — <a href=\"https://www.buymeacoffee.com/rogie\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">buy me a cuppa</a>.</p>","id":"973621811122426089","installCount":4963,"lastUpdateDate":"2021-05-25T19:59:37.086Z","likeCount":314,"name":"Figma Tips","publisherHandle":"rogie","publisherId":"1105","publisherName":"Rogie King","runCount":2270,"viewCount":8654},{"description":"<p>Plugin for the selection of font pairs with availability to export an example of using font pair as a template to your artboard</p><p><br></p><p>Learn more at <a href=\"http://soroka.tools\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">soroka.tools</a></p>","id":"974335140113080867","installCount":10884,"lastUpdateDate":"2021-06-09T16:49:53.209Z","likeCount":109,"name":"Soroka","publisherHandle":"mirero","publisherId":"587408","publisherName":"Оксана Кочуева","runCount":8084,"viewCount":10711},{"description":"<p><strong>A tool for randomly assigning colors to a selection of objects from a chosen color palette!</strong></p><p><br></p><h2><strong>Usage</strong></h2><p>Quickly apply an assortment of colors to large selection of objects.</p><ul><li>Create cool, complex patterns for backgrounds!</li><li>Make color iterations of logos, buttons, etc!</li><li>Mock up data visualizations without the hassle!</li></ul><p><br></p><h2><strong>Instructions:</strong></h2><ol><li>Install CoShuffler by pressing the \"Install\" button in the top-right corner of this page.</li><li>In your figma file, open the CoShuffler by right clicking on the canvas -&gt; Plugins -&gt; CoShuffler</li><li><strong>Set your palette:</strong> Select a group of objects which contain your desired color palette, and then click \"Set colors\".</li><li><strong>Select your objects: </strong>Once your palette is set, select one or more objects that you want to shuffle</li><li><strong>Start Shuffling:</strong> Click \"GO!\" to start shuffling between colors in your palette!</li><li>(Optional) On the \"info\" page, choose whether to enable or disable strokes and fills from being adjusted by the CoShuffler.</li></ol><p><br></p><h2><strong>Constraints:</strong></h2><ul><li>Currently, <strong>CoShuffler will ignore groups, frames, and components</strong>. If you want to shuffle objects in groups, either directly select the objects or ungroup them.</li><li>Image and gradient fills will be ignored.</li><li>If your object has multiple fills, CoShuffler will only change the top fill. It won't affect opacity settings of fills either.</li></ul><p><br></p><p><strong>This plugin was made for fun in my free time, if you want to see more of my work, check my website: </strong><a href=\"https://ndrewgood.com/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">ndrewgood.com </a></p><p><br></p><p><strong>If you have any complaints, concerns, or want to share what you're making with CoShuffler, you can reach me via </strong><a href=\"mailto:hey@ndrewgood.com\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">email</a> or <a href=\"http://instagram.com/ndrewgood\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Instagram</a>. Cheers, and happy shuffling! 🥳</p>","id":"974496433337884240","installCount":639,"lastUpdateDate":"2022-05-24T02:52:06.276Z","likeCount":22,"name":"CoShuffler","publisherHandle":"ndrewgood","publisherId":"1066332","publisherName":"Andrew Goodridge","runCount":606,"viewCount":1517},{"description":"<p>SF Symbols Browser allows you to quickly access Apple's SF Symbols right in your Figma project.</p>","id":"976095819747589110","installCount":2794,"lastUpdateDate":"2021-05-25T20:12:06.099Z","likeCount":23,"name":"SF Symbols Browser","publisherHandle":"be519ba4_2a7c_4","publisherId":"918553301896703382","publisherName":"Simon Boer","runCount":2948,"viewCount":4739},{"description":"<p>Figma search is an open source plugin that helps you find assets on a page within your Figma file.</p><p><br></p><p>Quickly find what you need and continue your workflow without disruptions.</p><p><br></p><p>How to use:</p><p>1. Open plugin</p><p>2. Select what search type (or leave it at “all”)</p><p>3. Type your search term</p><p>4. Navigate to the element you are looking for</p>","id":"976153400648431633","installCount":2590,"lastUpdateDate":"2021-08-16T22:35:03.128Z","likeCount":32,"name":"Figma Search","publisherHandle":"elasticpath","publisherId":"883045241173980912","publisherName":"Elastic Path's Team","runCount":2353,"viewCount":5607},{"description":"<p><strong>Create customized striped backgrounds in Figma with ease. Zebra lets you design loading bars, inaccessible zones, and much more with few clicks!</strong></p><p><br></p><h2><strong>Functionalities</strong></h2><ul><li>Two-color striped background creation</li><li>Angle input for stripes pointing to any direction</li><li>Width &amp; Height input to adjust the background's size</li><li>Stripes width input to adjust the stripes width</li><li>Only a portion of the striped background is visible. If you need to adjust the offset of the stripes, just unlock the background and drag it inside the outer frame.</li></ul><p><br></p><h2><strong>Future plans</strong></h2><ul><li>Multiple-colored stripes</li><li>Adjusting the width of individual stripes</li></ul><p><br></p><h2><strong>Contact</strong></h2><p>This project is completely open-sourced if you want to see the codebase and help me implement new features, see&nbsp;<a href=\"https://github.com/Thesoreon/figma-background-stripes-plugin\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">the GitHub repository</a>. If you have issues with the plugin, create a GitHub issue 😉</p><h2><br></h2>","id":"976173007149517845","installCount":1941,"lastUpdateDate":"2021-05-22T08:43:29.826Z","likeCount":15,"name":"Zebra - Striped backgrounds","publisherHandle":"pavelsusicky","publisherId":"689093","publisherName":"Pavel Sušický","runCount":2054,"viewCount":3510},{"description":"<p><strong>Convert design to code in minutes!</strong> Export iOS code of designed UI, save time by removing repetitive manual work in the UI, and focus on the functionality/creativity more.</p><p>It's free to start and try it out! Download the Monday Hero app, use the Monday Hero Plugin to import your designs, and start working on your developer-friendly code!</p><p><br></p><p><strong>Our functions that developers &amp; teams love:</strong></p><p>*Creating native iOS components,</p><p>*Exporting the source-code, assets, fonts, colors, and UI for iOS via plugins and working independently,</p><p>*UI/Layout (Storyboard) support,</p><p>*Responsive UI/Layout to support all screen sizes,</p><p>*Exporting the design as a new project / into an existing project / only selected screens,</p><p>*Working in an all-in-one place with the team,</p><p>*Kotlin and Flutter support is on the way, coming soon!</p><p>… and many more.</p><p><br></p><p><strong>Download here: </strong><a href=\"https://mondayhero.io/download/\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">https://mondayhero.io/download/</a></p><p><strong>Read the docs: </strong><a href=\"https://learn.mondayhero.io/\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">https://learn.mondayhero.io/</a></p><p><strong>For more information: </strong><a href=\"https://mondayhero.io/\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">https://mondayhero.io/</a></p>","id":"976479062173362312","installCount":1215,"lastUpdateDate":"2021-06-04T14:33:09.025Z","likeCount":18,"name":"Monday Hero","publisherHandle":"mondayhero","publisherId":"976416616141212371","publisherName":"Monday Hero","runCount":968,"viewCount":2093},{"description":"<p>Index Page allows you to create a new frame with thumbnails and frame names that can be used for presentational purposes as a starting screen.</p><p><br></p><p>See <a href=\"https://youtu.be/2SgvH4MwFHw\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Youtube video</a>.</p><p><br></p><p><strong>How to Use:</strong></p><ol><li>Select frames that you want to add to Index Page.</li><li>Run the plugin.</li><li>A new frame 'Index Page' is created with thumbnails and frame names with prototype connections to corresponding frames.</li></ol><p><br></p><p>If you make changes to your designs, just select the frames and run the plugin again. The thumbnails will be updated on the Index Page automatically. You can easily add new frames the same way.</p>","id":"976837040692846864","installCount":1605,"lastUpdateDate":"2022-06-15T09:20:26.970Z","likeCount":69,"name":"Index Page","publisherHandle":"marianbrchan","publisherId":"311","publisherName":"Marian Brchan","runCount":1291,"viewCount":4124},{"description":"<p>Have you wanted to just automatically sort the lines of text in your document?  Well now you can!  With the new and improve “Sort Text” plugin from Submersible Industries.  Simplify install this plugin in Figma, and start automatically sorting your text like a rockstar!</p><p><br></p><p>Go from this</p><p><br></p><ul><li>Zukini</li><li>Coconuts</li><li>Apples</li><li>Bananas</li></ul><p><br></p><p>To this</p><p><br></p><ul><li>Apples</li><li>Bananas</li><li>Coconuts</li><li>Zukini</li></ul><p><br></p><p>In a click of a button!  Get started today.</p><p><br></p><p>Created with love, by Ryan Munro.</p>","id":"976999973384544592","installCount":397,"lastUpdateDate":"2021-05-20T04:58:10.690Z","likeCount":8,"name":"Sort Text","publisherHandle":"munro","publisherId":"684027","publisherName":"Ryan Munro","runCount":349,"viewCount":1078},{"description":"<p>Create fixed aspect ratios with fixed positioned overlays.</p><p><br></p><p><strong>Ratios</strong></p><p>Enter any ratio above 1/2.2, meaning the height cannot be greater than 2.2 times the width.</p><p>Ratios can be entered as 00:00 or 00/00.</p><p><br></p><p><strong>Overlays</strong></p><p>Add optional fixed positioned overlays on top of the fixed aspect ratio.</p><p><br></p><p><strong>Resizing</strong></p><p>Resize the fixed aspect ratios by changing their width only (note that it might produce subpixel heights). Adjusting their height or using the “shift” key will break the aspect ratios.</p><p><br></p><p><strong>Get ratio</strong></p><p>Get the closest aspect ratio for the currently selected object by clicking on the icon next to the ratio input field where the result will be displayed.</p><p><br></p><p><em>This plugin was created for the AREA 17 design team and is based on the article </em><a href=\"https://medium.com/@solo_cube/figma-components-with-a-fixed-aspect-ratio-elements-c7272e2ada9\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\"><em>Figma components with a fixed aspect ratio elements</em></a><em>, the Figma file </em><a href=\"https://www.figma.com/community/file/873125264217713781/Fixed-aspect-ratio-in-Figma-Auto-Layout\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\"><em>Fixed aspect ratio in Figma Auto Layout</em></a><em> by </em><a href=\"https://www.figma.com/@solo_cube\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\"><em>Vitalli</em></a><em> and </em><a href=\"https://www.figma.com/community/file/862602142262930294/Auto-Layout-Fixed-Aspect-Ratio\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\"><em>Auto Layout Fixed Aspect Ratio</em></a><em> by </em><a href=\"https://www.figma.com/@chudoloo\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\"><em>Chudo Loo</em></a></p>","id":"977155744958829960","installCount":575,"lastUpdateDate":"2022-03-24T16:21:33.719Z","likeCount":46,"name":"Ratios","publisherHandle":"AREA17","publisherId":"999339984261594238","publisherName":"AREA 17","runCount":793,"viewCount":1617},{"description":"<h2>About the pack</h2><p><br></p><p>Carefully designed icons to help your projects shine like a diamond. More than 1100 icons divided into 4 styles and several categories are ready as react components to speed up building your product.</p><p><br></p><p>Start using SWM Icon Pack Plugin - browse, search, and copy icons into your project to boost your interfaces.</p><p><br></p><h2>What’s in it for you?</h2><p><br></p><ul><li>More than 1100 icons, ready to use right away;</li><li>4 styles of icons - outline, broken, duotone, and curved;</li><li>Customization options - stroke, size, set, and color;</li><li>Easy preview on <a href=\"https://www.figma.com/community/file/942053544758339202/SWM-Icon-Pack\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">Figma Community</a>;</li></ul>","id":"977277388711779807","installCount":7642,"lastUpdateDate":"2021-11-24T13:30:51.685Z","likeCount":45,"name":"SWM Icon Pack","publisherHandle":"kamilagraf","publisherId":"3444678","publisherName":"Kamila Graf","runCount":7572,"viewCount":6368},{"description":"<p>figma设计直转cocostudio1.6</p><p>支持: image、button、panel，text、9image</p>","id":"977409075315360269","installCount":132,"lastUpdateDate":"2021-11-24T07:52:33.803Z","likeCount":1,"name":"FigmaToCocos","publisherHandle":"6f2a3b2a_4553_4","publisherId":"966953822910956706","publisherName":"Bella","runCount":120,"viewCount":498},{"description":"<p>Create an Interactive 3D globe based on your flat world map design.</p><p><br></p><p>Checkout the <a href=\"http://globe-3d.vercel.app/\" rel=\"noreferrer noopener nofollow\" target=\"_blank\"><strong>Globe 3D landing page</strong></a></p>","id":"977567760148608604","installCount":4891,"lastUpdateDate":"2021-05-24T10:10:25.571Z","likeCount":90,"name":"Globe 3D","publisherHandle":"sonny","publisherId":"123","publisherName":"Sonny Lazuardi","runCount":4738,"viewCount":12327},{"description":"<p>The All-in-One design helper to supercharge your design process. For all beginners and pros!</p><p><br></p><p>This plugin was made by a designer for designers. It offers a comprehensive library of design thinking methodologies, allows you to set up your design file, prepare for a design review with slide templates, and gives you an insight into the meeting structure of a genuine product design team. I created this plugin months ago for TripActions internally. Now I'm shipping the public version for the community in the hope it may make your life easier, regardless of your level.</p><p><br></p><p>This plugin does not store any data from you and never will! If you have improvement ideas, shoot them down in the comments or drop me an email&nbsp;<a href=\"mailto:hello@justali.co\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">hello@justali.co</a></p><p><br></p><p>I hope you enjoy this plugin as much as I enjoyed the process of making it.</p><p><br></p><p>Made with love in Amsterdam</p>","id":"977600732677252720","installCount":680,"lastUpdateDate":"2021-05-21T20:06:02.253Z","likeCount":52,"name":"Mentor","publisherHandle":"justalico","publisherId":"1101867","publisherName":"Ali Öztürk","runCount":536,"viewCount":2415},{"description":"<p>Mirror and sync any screen in your file to create user flows without creating more versions of content. Keep a single source of truth.</p><p>&nbsp;</p><h2><strong>Sound interesting? Try it now in</strong><a href=\"https://www.figma.com/community/file/977797826186922410/MockupMirror-Playground\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\"><strong> MockupMirror Playground</strong></a><strong>...</strong></h2><p>https://www.figma.com/community/file/977797826186922410/MockupMirror-Playground</p><p>&nbsp;</p><h2><strong>How to Mirror like a pro:</strong></h2><ol><li>Select any frame you want to mirror.</li><li>Click <strong>+Mirror</strong> to capture a PNG image of the source.</li><li>Paste Mirrors into your designs, on any page in the file.</li><li>When you change the source design, click <strong>Sync All</strong> to update Mirrors.</li></ol><p>&nbsp;</p><h2><strong>What can MockupMirror do?</strong></h2><p>MockupMirror allows you to retain a single source of truth for your designs and keep everything in sync. It allows you to capture designs as PNG files that sync. We call these ‘Mirrors’. Jump instantly from Mirror to source for quick editing. Keep everything up-to-date with one-click sync.</p><p>&nbsp;</p><h2><strong>Why did we create MockupMirror?</strong></h2><p>Complicated user experience flows and information architecture maps require designers to reproduce numerous identical versions of the same designs. Scattered instances are hard to manage and can fall out of sync with the original design. MockupMirror simplifies the design process by capturing PNG images of your designs to paste into flows anywhere in the file. Use hyperlinks to jump from image to source for quick editing. Sync changes with one click.</p>","id":"977817643287778988","installCount":4828,"lastUpdateDate":"2022-05-01T12:35:12.628Z","likeCount":110,"name":"MockupMirror","publisherHandle":"chloehung","publisherId":"825305","publisherName":"Chloe","runCount":5330,"viewCount":14965},{"description":"<p><strong>Continuous Design</strong> is a Figma plugin that lets you run GitHub Actions, Bitbucket Pipelines, and Azure DevOps Pipelines from Figma.</p><p><br></p><p>If you want to practice \"continuous design\" using Figma and a modern development toolchain, it may be time to start deploying design changes straight from Figma!</p><p><br></p><h2><strong>Prerequisites</strong></h2><p>You will need:</p><p>- An account with your provider</p><p>- A pre-existing repository with your provider</p><p>- A pre-existing CI workflow</p><p>- For a GitHub Actions reference, see my repo <a href=\"https://github.com/mikaelvesavuori/github-ci-demo\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">github-ci-demo</a></p><p>- For a Bitbucket Pipelines reference, see my repo <a href=\"https://github.com/mikaelvesavuori/bitbucket-ci-demo\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">bitbucket-ci-demo</a></p><p>- For an Azure DevOps Pipelines reference, see my repo <a href=\"https://github.com/mikaelvesavuori/azure-devops-ci-demo\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">azure-devops-ci-demo</a></p><p>- A means of authentication</p><p>- <strong>GitHub</strong>: A personal access token (with \"repo\" scope\"). You can create one at <a href=\"https://github.com/settings/tokens\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">https://github.com/settings/tokens</a>. If you are stuck, follow the instructions at <a href=\"https://docs.github.com/en/github/authenticating-to-github/keeping-your-account-and-data-secure/creating-a-personal-access-token\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">GitHub</a>.</p><p>- <strong>Bitbucket</strong>: An application password. You can create one at <a href=\"https://bitbucket.org/account/settings/app-passwords/\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">https://bitbucket.org/account/settings/app-passwords/</a>. More <a href=\"https://support.atlassian.com/bitbucket-cloud/docs/app-passwords/\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">instructions here</a>.</p><p>- <strong>Azure</strong>: A personal access token. <a href=\"https://docs.microsoft.com/en-us/azure/devops/organizations/accounts/use-personal-access-tokens-to-authenticate?view=azure-devops&amp;tabs=preview-page\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">Instructions here</a>.</p><p><br></p><h2><strong>Permissions and data collection</strong></h2><p>Depending on your provider, you will need either a personal access token or an application password. These are are the accepted ways of handling plugins and other external tooling in the GitHub/Bitbucket/Azure DevOps contexts.</p><p><br></p><p><strong>The plugin itself never sends this information anywhere other than to call the respective provider APIs.</strong></p><p><br></p><p>You can however decide to store the state of all fields privately within Figma. Doing so stores the current state (including the PAT value) in Figma's contained asyncStorage (essentially a sandboxed localStorage).</p><p><br></p><h2><strong>Using the plugin</strong></h2><p>Given that you have the prerequisites under control, it's just a matter of filling out the fields.</p><p><br></p><p>The strictly necessary fields to get a success response are:</p><p>- <strong>Personal access token/Application password</strong>: Your token or password from GitHub/Bitbucket/Azure.</p><p>- <strong>User name</strong>: Your user name.</p><p>- <strong>Repository name</strong>: Your repository name as it appears in a typical URL.</p><p>- <strong>Workflow name [GitHub only</strong>: Has to be specified in the style of `filename.yml`. Defaults to `main.yml`.</p><p>- <strong>Organization name [Bitbucket only]</strong>: Your organization's name (might also be called \"workspace\").</p><p>- <strong>Definition ID [Azure only]</strong>: The seemingly random (?) ID that each pipeline receives. The easiest way to get it is to navigate to your pipeline in the Azure DevOps web console and check the URL bar which should look like: `https://dev.azure.com/YOUR_USER/YOUR_PROJECT/_build?definitionId=16`.</p><p>- <strong>Branch</strong>: Should be same as the branch you want to trigger. Defaults to `main`.</p><p><br></p><p>The optional fields are:</p><p>- <strong>Message</strong>: Can be used to provide the CI workflow some context on what's changed.</p><p>- <strong>Version</strong>: Can be used to provide the CI workflow information on a version. See the below example for how this can be used with—for example—Figmagic to pull data from a given version of your Figma document.</p><p><br></p><p>You will receive a popup/alert that informs you that the workflow is starting/failing.</p>","id":"977948326423807703","installCount":277,"lastUpdateDate":"2021-07-21T11:52:11.802Z","likeCount":8,"name":"Continuous Design - Run CI from Figma","publisherHandle":"MikaelVesavuori","publisherId":"86803","publisherName":"Mikael Vesavuori","runCount":177,"viewCount":2212},{"description":"<p>Space››cleaner allows you to easily remove multiple spaces from within text content.</p><p><br></p><p>You can choose to run the plugin across your entire document or just your current selection to remove all those pesky extra spaces.</p><p><br></p><p>Great for copying and pasting content in Rich Text format where additional spaces can carry across, as well as just a sanity check when you might have accidentally hit space twice.</p>","id":"977968775104001765","installCount":661,"lastUpdateDate":"2022-07-16T17:17:29.083Z","likeCount":23,"name":"Space››cleaner","publisherHandle":"_kejk","publisherId":"3878431","publisherName":"Karl Koch","runCount":453,"viewCount":1526},{"description":"<p>serial numbers generator, when we need some mock sku numbers or like room numbers, e.g. A001, A002, ..., A101, numbers we don't want to be a random serial, meet <strong>slope</strong>, growing number by given base number, or even more, we'd like to have a prefix, just select the elements, <strong>BUT</strong>, currently your selections might not in the same order you look, I suggest create a correct order element in need.</p>","id":"978200655090799378","installCount":111,"lastUpdateDate":"2022-06-17T16:40:46.450Z","likeCount":4,"name":"Slope","publisherHandle":"unickhow","publisherId":"2816966","publisherName":"uNickHow","runCount":97,"viewCount":481},{"description":"<p>The <em>Addjust</em> plugin adds hundreds of unique 3D illustrations and icons in PNG format to Figma. You can repaint and choose the right angle to be displayed.</p><p>A large collection of icons and illustrations can be used to design presentations, create websites or apps.</p><p><br></p><p><strong>Palette Customization</strong></p><p>Figma has the option to save palettes for each document. It's convenient if you work with several projects of different brands which have their own brand colors. In the Addjust extension, you can also edit, delete and complement your own palette collections.</p><p><br></p><p><strong>Free content</strong></p><p>The plugin has a large selection of free 3D icons and illustrations which will be updated periodically.</p><p><br></p><p><strong>Artists</strong></p><p>We collaborate with outstanding artists and illustrators from all over the world who have created unique icons and illustrations for you. Each image or icon has its own author. You can visit their profiles to learn more details about them.</p><p><br></p><p><strong>Just a Few Easy Steps:</strong></p><ul><li>Open the Addjust plugin and select the appropriate collection. Each collection is categorized, e.g. Business, Design, Leisure, etc.</li><li>Click the icon or illustration you want to insert into the canvas.</li><li>In the editor window, you can change the display angle, choose a color from the default palette, or apply your own.</li><li>Once an icon or illustration has appeared on the canvas, you can adapt it even better for your layout or product. To do this, click on the icon twice and select the desired parameters in the menu that appears.</li></ul><p><br></p><p><br></p><p>------------</p><p><br></p><p>We can't wait to see what you create with the Addjust plugin!</p><p>Share your creations with the hashtag <strong><em>#withaddjust</em></strong></p><p><br></p><p><br></p><p><em>MORQUA team</em></p>","id":"978648737523411901","installCount":17785,"lastUpdateDate":"2021-05-24T14:03:59.635Z","likeCount":268,"name":"Addjust","publisherHandle":"morqua","publisherId":"930567135904019989","publisherName":"MORQUA","runCount":13376,"viewCount":25324},{"description":"<h1>A Document create tools (Japanese)</h1><p>Figmaのコメント機能とは別に、3種類のメモをファイル上に残すことができます。</p><p>AutoLayoutなのでメモの文字数に応じてサイズは自動で切り替わります。</p><p><br></p><p>使い方はプラグインからFigdocを選択し、使用したいメモを選択すると今見ているところにメモが配置されます。（３つのメモの違いは今のところ色だけです）</p>","id":"978698238136308683","installCount":90,"lastUpdateDate":"2021-06-01T10:22:12.755Z","likeCount":5,"name":"Figdoc","publisherHandle":"090adb30_7bc4_4","publisherId":"476530","publisherName":"unotovive","runCount":87,"viewCount":484},{"description":"<p>This plugin makes it super easy to add any crypto icons right into your design.</p><p><br></p><p>Search for crypto by name or symbol</p><p>Select/click and you’re done!</p><p><br></p><p>Thank you to Trust Wallet for the comprehensive, open source collection of crypto assets. https://github.com/trustwallet/assets</p><p><br></p><p>Made by Fred and Thianh</p>","id":"978809605092434948","installCount":3910,"lastUpdateDate":"2021-05-25T00:22:20.161Z","likeCount":40,"name":"Crypto Icons","publisherHandle":"thianhlu","publisherId":"323698","publisherName":"thianh","runCount":3176,"viewCount":4602},{"description":"<p>엔토스 미디어 파사드 맵핑 앱</p>","id":"978912700428830781","installCount":33,"lastUpdateDate":"2021-05-25T06:56:25.113Z","likeCount":1,"name":"MFMapper","publisherHandle":"4e6ba218_57ce_4","publisherId":"2992051","publisherName":"hando han","runCount":7,"viewCount":114},{"description":"<p>This utility plugin updates multiple text styles within a selection. Editable properties include font family, font style, font size, line height, paragraph spacing and letter spacing. All text styles within the current selection – including those inside a component or frame – will be updated.</p>","id":"979005485047252094","installCount":1790,"lastUpdateDate":"2021-10-22T08:20:13.713Z","likeCount":33,"name":"Utopia / Batch update text styles","publisherHandle":"trys","publisherId":"2552873","publisherName":"Trys Mudford","runCount":1973,"viewCount":3415},{"description":"<p>This plugins creates and assigns color styles for all element/nodes. This can be done per page or for the entire file. You can also choose to generate swatches for all your color styles.</p>","id":"979441006797488478","installCount":2011,"lastUpdateDate":"2021-05-26T19:38:14.778Z","likeCount":24,"name":"Automate Color Styles","publisherHandle":"muzzbanana","publisherId":"979427007776777408","publisherName":"Meaza Abate","runCount":1740,"viewCount":2956},{"description":"<p>Forms is the plugin to get your form design game on point. Enjoy custom forms integrated with <strong>your design library</strong>. Pick from your own font styles, spacings and colors. Every form element will <strong>automatically</strong> generate variants for error, disabled, focus and hover <strong>states</strong> so you don’t have to! 😉 🎉</p><p><br></p><p><strong>Key features:</strong></p><p>— Custom forms</p><p>— All elements are generated with the elements primary states</p><p>— Apply your library styles or pick new ones</p><p>— Different component page so your workspace doesn't get cluttered</p><p>— Use inputs, textareas, checkboxes, buttons and more to come</p><p>— Free trial</p><p><br></p><p><strong>Customer support:</strong></p><p><a href=\"mailto:support@oneblinq.com\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">support@oneblinq.com</a></p><p><br></p><p><strong>Buy your license:</strong></p><p><a href=\"https://gumroad.com/l/obforms\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://gumroad.com/l/obforms</a></p>","id":"980021361387673169","installCount":7598,"lastUpdateDate":"2022-05-03T09:03:01.618Z","likeCount":54,"name":"Forms","publisherHandle":"OneBlinq","publisherId":"979759042382572107","publisherName":"OneBlinq","runCount":8646,"viewCount":12103},{"description":"<p>That missing photo editing feature you have been waiting for.</p>","id":"980292884581579470","installCount":1973,"lastUpdateDate":"2021-05-29T03:00:39.580Z","likeCount":27,"name":"Tone Curve","publisherHandle":"alvinleung","publisherId":"1314765","publisherName":"alvin leung","runCount":1464,"viewCount":3371},{"description":"<p>Automatically optimize, beautify and export your SVG assets to your disk or clipboard</p>","id":"980340882594944725","installCount":870,"lastUpdateDate":"2021-06-09T02:53:11.621Z","likeCount":14,"name":"SVG Toolkit","publisherHandle":"7fbba739_cba9_4","publisherId":"2437789","publisherName":"Tobias Strebitzer","runCount":853,"viewCount":2562},{"description":"<p>Bring your Figma creations to life with stunning animations and seamless export to web.</p><p><br></p><p><strong>How it create SVG Animations:</strong></p><ol><li>Select the Frame you want to animate and click on Enable SVG Export.</li><li>Select a node within that Frame to set up animations such as X Position, Y Position, Scale, Rotation and Opacity.</li><li>Use the built-in live-preview to tweak your animations until you're happy with the result.</li><li>Download or copy the animated SVG and paste it on your website.</li></ol><p><br></p><p><strong>How to use SVG Animations on my Website:</strong></p><ol><li>SVG Animate uses a small web component library under the hood to make your animations work.</li><li>This library uses <a href=\"https://greensock.com/gsap/\" rel=\"noreferrer noopener nofollow\" target=\"_blank\"><strong>GreenSock GSAP</strong></a>, a powerful, lightweight and performant animation engine.</li><li>When exporting from SVG Animate, you can download or copy the snippet with the click of a button, and paste it on your website. No complicated setup needed.</li></ol>","id":"980366185319754464","installCount":6149,"lastUpdateDate":"2021-06-27T01:45:08.113Z","likeCount":47,"name":"SVG Animate","publisherHandle":"7fbba739_cba9_4","publisherId":"2437789","publisherName":"Tobias Strebitzer","runCount":6414,"viewCount":18069},{"description":"<h2>Buzzy lets you build working native apps &amp; websites straight from Figma.</h2><p><br></p><p>Create fully working native apps and responsive websites, MVPs or prototypes with real data, user-generated content and live forms straight from Figma, without coding. Use the plugin to mark up your design, connect to data and publish.</p><p><br></p><p>Note this is a full stack solution - not just the front end code - it includes the database, data binding, business logic, file storage (s3) and if you are publishing native apps they go straight into your app store (Apple or Android).</p><p><br></p><p><strong>You get a live web app you can edit and update directly from Figma.&nbsp;</strong>Color changes? No problem. Add a new section? Done. Conduct user tests with real data and working forms? Easy.</p><p><br></p><p><strong>How it works</strong></p><ul><li>Install the Buzzy plugin</li><li>Connect to Buzzy with the plugin</li><li>Mark up your design</li><li>Publish</li><li>Made changes in Figma? Simply re-publish</li></ul><p><br></p><p><strong>Getting Started</strong></p><p>There’s a lot going on when you convert a Figma file to a live app - we really recommend you start here and ease your way into it.</p><p><br></p><ol><li>Go to our ‘<a href=\"https://www.buzzycompany.com/getting-started\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Getting Started</a>’ guide and watch the step-by-step videos</li><li>Grab an&nbsp;<a href=\"https://www.figma.com/@buzzy\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">example file</a>&nbsp;and see how it’s done</li><li>Try it out with one of your designs</li><li>Questions? Jump on&nbsp;<a href=\"https://join.slack.com/t/buzzyfigmacommunity/shared_invite/zt-whn20rjp-t19q4JrPplR0VCRmG8fW6w\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Slack</a>&nbsp;or&nbsp;<a href=\"mailto:support@buzzycompany.com\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">email</a>&nbsp;us - we’re happy to help out!</li></ol><p><br></p><p><strong>Resources</strong></p><ul><li><a href=\"https://www.buzzycompany.com/getting-started\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Getting Started</a></li><li><a href=\"https://www.buzzycompany.com/support\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Support</a></li><li><a href=\"https://discord.gg/GFC3KeVv\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Discord</a></li><li><a href=\"mailto:support@buzzycompany.com\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">support@buzzycompany.com</a></li></ul>","id":"980407395621457657","installCount":2133,"lastUpdateDate":"2022-05-13T02:23:49.140Z","likeCount":70,"name":"Buzzy - No Code Native App & Website Builder","publisherHandle":"buzzy","publisherId":"1023043048738136760","publisherName":"Buzzy","runCount":2279,"viewCount":6762},{"description":"<p>Deck manager helps you manage a collection of frames as a slide deck.</p><p>You can add and amend notes.</p><p>When you are ready, you can export the current page as a slide deck as Markdown or JSON.</p><p>All the images are automatically inlined and the speaker's notes are included.</p><p>The Markdown file is compatible with <a href=\"https://www.deckset.com/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Deckset for Mac</a> and <a href=\"https://marp.app/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Marp</a>.</p>","id":"981102004295309230","installCount":211,"lastUpdateDate":"2022-06-03T10:30:54.477Z","likeCount":3,"name":"Deck manager","publisherHandle":"892442d0_629a_4","publisherId":"912167361235072106","publisherName":"Daniele","runCount":220,"viewCount":833},{"description":"<p>Generate sample cryptocurrency addresses.</p><p><br></p><p>Supported address types:</p><ul><li>Ethereum</li><li>Zkopru</li><li>Bitcoin</li></ul><p><br></p><p>Simply select one or more text fields and select the address type to generate. Each field will be filled with a valid and unique address.</p><p><br></p><p>Warning: Do not use the generated addresses for receiving transactions. The corresponding private keys are either not created or destroyed immediately.</p><p><br></p><p><a href=\"https://github.com/JChanceHud/lorem-ipsum-crypto/\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">Source code here</a>.</p>","id":"981270178842523698","installCount":1957,"lastUpdateDate":"2021-06-01T07:27:11.813Z","likeCount":6,"name":"Lorem ipsum crypto","publisherHandle":"892226d1_81dd_4","publisherId":"1312202","publisherName":"Chance Hudson","runCount":2210,"viewCount":2312},{"description":"<p>Let this plugin handle the tedium of document management for you. Automatically add page numbers, section numbers, and a table of contents to your document in seconds.</p><p><br></p><p>This plugin assumes that all pages of your document are top-level frames on a single Figma page. The plugin contains a link to full instructions, as well as a document template to get you started.</p><p><br></p><p>Product Management &amp; Requirements: Erik Mickelsen</p><p>Coding: Joseph X Brick</p>","id":"981338055656424515","installCount":1498,"lastUpdateDate":"2021-08-13T21:08:07.661Z","likeCount":22,"name":"Organize Document","publisherHandle":"josephbrick","publisherId":"888127795830455080","publisherName":"Joseph X Brick","runCount":1390,"viewCount":4371},{"description":"<p>「<a href=\"https://moonvy.com/?homepage\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Moonvy · 月维</a>」是一个轻量而又专业的设计交付平台。你可以用它将设计生成具有充分细节的规范文件，并与你的团队成员分享。</p><p><br></p><p>a lightweight and yet professional design handoff platform. You can use it to generate design into specification files with a full amount of detail and share them with your team members.</p>","id":"981500558205940871","installCount":5986,"lastUpdateDate":"2022-07-14T12:47:03.842Z","likeCount":201,"name":"Moonvy · 月维","publisherHandle":"moonvy_team","publisherId":"964017219082800888","publisherName":"Moonvy","runCount":6150,"viewCount":15386},{"description":"<p>Use FigLink to swap instances or any node with the same name or selected component.</p><p><br></p><p>If you are migrating from Sketch, First import all of your Sketch files, including library and other artboards, then publish components.</p><p>After publishing the components, run the \"Collect Components\" command from the plugin menu and wait for collecting.</p><p>Now go to each file in your team, run the \"Link Instances to Library\" command from the plugin menu and wait.</p><p><br></p><p>It looks for instances with the same name as your library components and replaces them with a new instance of the library component.</p><p><br></p><p>It preserves text overrides based on the position of text nodes.</p><p><br></p><p>Add \"_\" or \".\" to the starting of the component or page's name to skip collecting them. It also skips hidden nodes or nodes with a name starting with \"_\" or \".\".</p>","id":"981531596501862559","installCount":464,"lastUpdateDate":"2021-09-19T07:49:28.296Z","likeCount":36,"name":"FigLink","publisherHandle":"thewall","publisherId":"943497109383323481","publisherName":"Wall","runCount":366,"viewCount":1781},{"description":"<h2>Introducing Localy, a growing collection of clean, minimal, and fully customizable maps. Delicately named and organized. Perfect choice for apps, web &amp; more.</h2><p><br></p><h1>Get full version:</h1><h1><a href=\"https://gum.co/localy\" rel=\"noreferrer noopener nofollow\" target=\"_blank\"><strong>Download now</strong></a></h1><p><br></p><p><br></p><p>What's inside:</p><p><br></p><p>📌 6 Popular cities designed for you!</p><p>We’ve selected six popular cities in the world, illustrating them beautifully with mind-blowing details.</p><p><br></p><p>🎉 All Cities in 10 styles</p><p>Every object is designed perfectly in the path view.</p><p><br></p><p>✌️ 2 Map types</p><p>Each style has two types, “Detailed” and “Minimal”. Details include Street &amp; Avenue names, based on Google Maps.</p><p><br></p><p>🔥 Figma plugin</p><p>You can use it in Figma for your next projects.</p><p><br></p><p>🧩 Organized library and Figma variants</p><p>Easy to browse and use. Optimized layers and variants in Figma.</p><p><br></p><p>💬 Premium support</p><p>Feel free to contact us in case you had any feedback, issues, or special requests.</p><p><br></p><p>_</p><p>🤙 If you have any questions about what’s included reach out to us before purchasing at&nbsp;<a href=\"mailto:http://info@piqo.design/\" rel=\"noreferrer noopener nofollow\" target=\"_blank\"><strong>info@piqo.design</strong></a></p><p>A product created by&nbsp;<a href=\"http://www.piqo.design/\" rel=\"noreferrer noopener nofollow\" target=\"_blank\"><strong>www.piqo.design</strong></a></p>","id":"981634016155981016","installCount":18162,"lastUpdateDate":"2021-06-01T19:54:42.383Z","likeCount":100,"name":"Localy — Map Generator","publisherHandle":"piqodesign","publisherId":"876509330827039833","publisherName":"Piqo","runCount":25266,"viewCount":28803},{"description":"<p>The basic problem is this:</p><p>You have a workspace with components being linked <em>across </em>files within the workspace. You now want to migrate your files to a different workspace, but in the process, you find that the instances of components reference their root definitions from the old workspace.</p><p><br></p><p>This plugin works to solve that problem by, well, relinking the components.</p><p><br></p><p>Follow the below steps to get it working:</p><ul><li>First off, you need to make sure that your new workspace is on the Professional plan (or above)</li><li>Go to the file in the new workspace that holds the component definitions. a) We run our plugin, and press the button called \"Select Library\". b) We publish all components within this file.</li><li>Next, we go to the file which holds our component instances (currently they are linking back to the old workspace). We run the plugin, and a) In the dropdown, select the name of the file that holds the root definitions b) Press the button called \"Relink Components\"</li></ul><p><br></p><p>And there it is. The plugin may take a few minutes to link the components up.</p><p><br></p><p><br></p>","id":"981892464363185469","installCount":759,"lastUpdateDate":"2021-06-04T16:53:15.223Z","likeCount":20,"name":"Component Relinker","publisherHandle":"okaybueno","publisherId":"974330150823271605","publisherName":"okay bueno","runCount":922,"viewCount":2801},{"description":"<p>With the Figma to Handoff, you can quickly convert your designs to <strong>HTML</strong>, <strong>CSS</strong> and <strong>Vue</strong> code.</p><p><br></p><p>It allows you to copy-paste Auto Layout enabled layers to Handoff. From the Handoff interface, you can export the code as a .zip file or copy-paste the code right into your IDE.</p><h2><br></h2><h2>How it works</h2><ol><li>Install the plugin</li><li><a href=\"https://app.handoff.design/signup\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">Sign up for a free Handoff account</a></li><li>In Figma, right-click → plugins → Figma to code with Handoff</li><li>Select a layer</li><li>Click 'Export layers'</li><li>In Handoff, right-click → Paste from Figma</li></ol><p><br></p><p>Tip: To make full use of this plugin and <strong>to ensure good code quality</strong>, please read the <a href=\"https://www.notion.so/handoff/Import-from-Figma-affa24be9f8341b6ad133d37e2edc334\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">Handoff documentation article 'Importing from Figma'.</a></p><p><br></p>","id":"981906962740892997","installCount":821,"lastUpdateDate":"2021-11-08T14:51:32.379Z","likeCount":13,"name":"Figma to Handoff","publisherHandle":"nvdb31","publisherId":"1082127","publisherName":"Nick van den Berg","runCount":927,"viewCount":2179},{"description":"<p>The plugin randomizes variants for the selected variant instances.</p><p><br></p><h2>Features</h2><ul><li>Randomise multiple variants</li><li>Restrict duplicates</li><li>Choose which properties you want to use</li></ul><p><br></p><p>---</p><p><br></p><h2><strong>🎥 </strong><a href=\"https://youtu.be/zc8qcvYaj6w\" rel=\"noreferrer noopener nofollow\" target=\"_blank\"><strong>Youtube demo</strong></a></h2><p><br></p><p>---</p><p><br></p><p>For issues — <a href=\"https://github.com/PavelLaptev/variants-randomizer/issues\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">github.com/PavelLaptev/variants-randomizer/issues</a></p><p>For ideas — <a href=\"https://github.com/PavelLaptev/variants-randomizer/projects/1\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">github.com/PavelLaptev/variants-randomizer/projects/1</a></p>","id":"981938541965949273","installCount":2209,"lastUpdateDate":"2021-09-26T22:39:42.964Z","likeCount":79,"name":"Variants Randomizer","publisherHandle":"PavelLaptev","publisherId":"134689","publisherName":"Pavel Laptev","runCount":2023,"viewCount":5218},{"description":"<p>Export frames from Figma to HTML and CSS in a few clicks.</p><p><br></p><p><strong>Step 1</strong>: Sign up for Pygma at https://pygma.app. You're activity on the plugin will be synced there.</p><p><br></p><p><strong>Step 2</strong>: Authenticate with Figma. We need access to read the information associated with your Figma files. This doesn't allow Pygma to delete or overwrite any of your files.</p><p><br></p><p><strong>Step 3</strong>: Open the plugin and select the frames that you want to generate code from. You will need to add your Figma file key so we can get the right data. Click generate code. A link to your generated code should be prepared within 10 seconds.</p><p><br></p><p>Any problems, please reach out to emile@pygma.app and I'll fix your export for free if the plugin didn't work well.</p>","id":"981951145474026847","installCount":3906,"lastUpdateDate":"2022-03-04T12:24:16.538Z","likeCount":28,"name":"Pygma - Export HTML and CSS from Figma","publisherHandle":"pygma","publisherId":"954695657282969674","publisherName":"Pygma","runCount":5374,"viewCount":5236},{"description":"<p>Gets the text from the selected frame or layer.Multiple selections are possible.</p><p>If you select a frame, you will get the text from all the layers contained in the frame.</p>","id":"982226615649863105","installCount":377,"lastUpdateDate":"2021-09-15T14:57:35.771Z","likeCount":6,"name":"Simple Text Getter","publisherHandle":"hirogw","publisherId":"792765","publisherName":"hiroyuki ogawa","runCount":357,"viewCount":728},{"description":"<p>Set and enforce character limits on text layers with Check Character Limit.</p><p><br></p><h2>Usage</h2><ol><li>Add <code>[CharLimit:XX] or [CharLimit: XX]</code> to the name of your text layers. XX is the maximum character count for the layer. For example: <code>Description Text [CharLimit:2000]</code>.</li><li>When you ready to check character limits, select the layers you'd like to check and run the plugin. <em>If no layers are selected before running, the plugin will check the entire page (see note below).</em></li><li>Text layers that exceed their limits will be flagged in red. Check the top of your layer list to locate the flags.</li><li>Select a flag from the layer list and press Shift + 2 to locate it visually.</li><li>Edit the text layer to fit your character limit.</li></ol><p><br></p><h2>Note</h2><p>If nothing is selected while running the plugin it will check all the text layers on the page. To check a specific layer or all layers inside a frame, select the layers or frame and run the plugin.</p><p><br></p><h2>Open Source</h2><p>This plugin is open source and can be found <a href=\"https://github.com/aashreys/figma-check-character-limit\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">here</a>.</p>","id":"982732544385962656","installCount":693,"lastUpdateDate":"2021-08-23T13:56:43.886Z","likeCount":17,"name":"Check Character Limit","publisherHandle":"aashreys","publisherId":"697643","publisherName":"Aashrey Sharma","runCount":738,"viewCount":1962},{"description":"<p>Startup Ipsum: Tech Twitter's Lorem Ipsum generator</p><p><br></p><p>Generate ‘Startup Ipsum’ to fill your text layers with text that looks like GPT-3 started reading TechCrunch.</p><p><br></p><p><strong>How it works:</strong></p><ol><li>Select a text layer</li><li>Choose numbers of paragraphs</li><li>Add a headline (optional)</li><li>Hit “Generate”</li><li>Chuckle to yourselves</li></ol><p><br></p><p>Startup Ipsum is a drop by Party Round</p><p><br></p><p>partyround.com</p>","id":"983162917210557182","installCount":705,"lastUpdateDate":"2021-06-06T00:48:12.713Z","likeCount":13,"name":"Startup Ipsum","publisherHandle":"partyround","publisherId":"973678406459986354","publisherName":"Party Round","runCount":716,"viewCount":1204},{"description":"<h2><strong>Multiplayer platforming in Figma with friends! 🕹</strong></h2><p><br></p><p>Play and create race courses to compete with your friends! <a href=\"https://www.figma.com/community/file/983449023070835589?fuid=407309632208199131\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Example courses</a></p><p><br></p><p>To create a game, select a world and run this Plugin.</p><p><br></p><p>To join a game, run the Plugin while another game is running. The Plugin will automatically find and join a game if one exists in the same Figma file.</p><p><br></p><p><strong>Create custom courses</strong></p><p>To create custom courses, create a Frame and place rectangles inside! Optionally place something that looks like a goal post somewhere. Players will spawn at the bottom-left of the frame. Collision detection is done <strong>only</strong> between rectangles, so only non-rotated rectangles are supported and every other layer is ignored. Also overlapping rectangles can cause weirdnesses right now so try to have them not overlap if possible. You can name a layer \"bg\" to have collision detection ignore it (for custom art). When you're done, select your Frame and run this Plugin to race!</p><p><br></p><p><strong>How it works</strong></p><p>This is a simple plugin that takes in user input and does some simple platforming calculations to move a node around. The viewport then follows that node. The magic lies in Figma's multiplayer, which lets <a href=\"https://www.figma.com/blog/coming-together-at-config-2021/#_500-users\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">up to 100 users</a> run this plugin simultaneously to edit nodes on the same page. There is no countdown timer to start the race, no finish line detection, no concept of lives or death.</p>","id":"983446464948439880","installCount":1556,"lastUpdateDate":"2021-06-06T19:09:52.980Z","likeCount":65,"name":"100 Race","publisherHandle":"minigolf2000","publisherId":"98046","publisherName":"Golf Sinteppadon","runCount":1480,"viewCount":3276},{"description":"<h1>Stop nudging around pixels. Select what space you need and align or distribute!</h1><p><br></p><h2><strong>Align inside</strong></h2><ul><li>Choose a single layer in a frame or group and click on direction you want to align</li><li>Choose 2 layers. Layer on top will align to layer on back</li></ul><p><br></p><h2>Distribute</h2><ul><li>Choose multiple layers and click on direction to spread out</li><li>You don’t need to tidy up. Just spread it out!</li></ul><p><br></p><h2>Roadmap</h2><ul><li>Ability to customize spacing and add token names</li></ul>","id":"983672137155100557","installCount":623,"lastUpdateDate":"2021-06-07T10:14:36.852Z","likeCount":26,"name":"Token space 8","publisherHandle":"7c961091_9f98_4","publisherId":"1746456","publisherName":"O","runCount":500,"viewCount":1969},{"description":"<p>Save time adding <strong>Lorem Ipsum</strong> to text blocks in Figma.</p><p><br></p><p>Add words, sentences or paragraphs.</p><p><br></p><p>Auto close or keep open.</p><p><br></p><p><br></p><p><strong>Support the cause. </strong><a href=\"https://www.buymeacoffee.com/robcoyle\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\"><strong>Buy me a coffee</strong></a></p><p><em>_</em>_</p><p><em>Thanks to \"Corpus Delicti\" on NounProject for the Lorey Unicorn Icon</em></p>","id":"984557085378252054","installCount":17476,"lastUpdateDate":"2022-01-08T06:48:01.008Z","likeCount":37,"name":"LORE (for Lorem Ipsum)","publisherHandle":"RobMacCumhaill","publisherId":"975321770684669795","publisherName":"Robert Coyle","runCount":23244,"viewCount":9874},{"description":"<p>Better brand logos. Vector versions of popular company wordmarks, lockups, and symbols.</p><p><br></p><p>Comment below or email us at <a href=\"mailto:betterlogos@zacht.studio\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">betterlogos@zacht.studio</a> to request new logos or updates based on rebrands.</p><p><br></p><p>———————————————————————————</p><p><br></p><p>Commonly, brand logos are protected by trademark and copyright laws. To be safe, use brand logos in descriptive contexts to refer to these companies or to cite their goods and services. You should not use brand logos to falsely create the impression that you are in a business relationship with a company or its goods and services. Need more guidance? Consult a lawyer.</p>","id":"984840399144699277","installCount":9789,"lastUpdateDate":"2022-03-07T13:12:16.488Z","likeCount":97,"name":"Better Logos","publisherHandle":"zacht","publisherId":"1622","publisherName":"Zacht Studios BV","runCount":10462,"viewCount":9362},{"description":"<p>Import blocks from Are.na channels into Figma to create a customizable mood board! This was created using Are.na's open-source api and is not an official plugin by Are.na.</p>","id":"985994820569981598","installCount":268,"lastUpdateDate":"2021-06-13T19:51:58.582Z","likeCount":6,"name":"Are.na Mood Board","publisherHandle":"uditdesai","publisherId":"4379","publisherName":"udit","runCount":179,"viewCount":831},{"description":"<p>A tool for easily toggling between Light/Dark theme or any 2 themes, and also for theme creation.</p><p><br></p><h2>How it works</h2><p><br></p><p><strong>Video</strong></p><p><a href=\"https://youtu.be/LfTFuMJFAac\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://youtu.be/LfTFuMJFAac</a></p><p><br></p><p><strong>Playground</strong></p><p><a href=\"https://www.figma.com/community/file/993838088453586739/DarkSide-Playground\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://www.figma.com/community/file/993838088453586739/DarkSide-Playground</a></p><p><br></p><p><strong>Switch</strong></p><ol><li>You need to group your styles. Example: “Light”/“Dark”, “Desktop”/“Mobile”.</li><li>If this is your team style file, you need to publish the file and click “Save team styles”, local files ignore this step.</li><li>Click the \"OmegaEffect\" button to complete the theme switch.</li></ol><p><br></p><p><strong>Create</strong></p><ol><li>Create the node, its name will become the style name.</li><li>Select all the nodes that need to be created as styles.</li><li>Select the corresponding create button according to the type of create style.</li></ol><p><br></p><p>Creators: <a href=\"http://wenhaoqi.com\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">@CuriosityWen</a> <a href=\"http://www.thewashingtonhua.com\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">@WashingtonHua</a></p>","id":"986289377230504703","installCount":3427,"lastUpdateDate":"2022-05-17T11:16:20.628Z","likeCount":143,"name":"DarkSide","publisherHandle":"wenhaoqi","publisherId":"2580372","publisherName":"CuriosityWen","runCount":3277,"viewCount":10453},{"description":"<p>Stunicons brought in figma</p>","id":"986549709687678796","installCount":877,"lastUpdateDate":"2021-07-24T21:57:34.380Z","likeCount":9,"name":"Stunicons","publisherHandle":"claranceliberi","publisherId":"929832899375236093","publisherName":"clarance liberi","runCount":610,"viewCount":977},{"description":"<p>Directly edit panel attributes on canvas.</p>","id":"986640827067490181","installCount":607,"lastUpdateDate":"2021-08-10T08:17:42.214Z","likeCount":72,"name":"Free Hands","publisherHandle":"MrBiscuit","publisherId":"1241","publisherName":"Mr.Biscuit","runCount":433,"viewCount":1930},{"description":"<p>Just another Image Plugin.</p><p>Search and click on the image to insert it.</p><p><br></p><p>Current version 0.1</p>","id":"986808042206428125","installCount":869,"lastUpdateDate":"2021-06-16T07:47:28.343Z","likeCount":2,"name":"Just Another Image Plugin","publisherHandle":"76adf413_320a_4","publisherId":"972557847606035545","publisherName":"Antonio Serrano Martín","runCount":997,"viewCount":1411},{"description":"<p><strong>Wantedly Preflight</strong>&nbsp;is a&nbsp;<a href=\"https://www.figma.com/\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">Figma plugin</a>&nbsp;that validates your project satisfies the rules of the design system of&nbsp;<a href=\"https://www.wantedly.com/\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">Wantedly</a>.</p><p><br></p><h2>Features</h2><ul><li><strong>&nbsp;Validation</strong>&nbsp;― You can check whether the node is valid just by running the plugin. The result will come out with a detailed message and you can jump into fixing it immediately with a focus button.</li><li><strong>&nbsp;Configurable</strong>&nbsp;― Wantedly Preflight has 6+ sophisticated rule and all of them are well-tested. However, in case if you would like to opt-out of some of the rule in your project, you can independently configure items to enable.</li><li><strong>&nbsp;Ignore</strong>&nbsp;― Exceptions are always there. On the result page, you have a check button to ignore the specific node. After you ignored a node, it will always be considered appropriate regardless of whether it violates our rules or not.</li></ul><p><br></p><h2>Our Design System</h2><p>See&nbsp;<a href=\"https://www.figma.com/community/file/994992887565225147\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">Wantedly UI Components</a></p>","id":"986860048472454117","installCount":39,"lastUpdateDate":"2021-07-09T03:23:33.777Z","likeCount":0,"name":"Wantedly Preflight","publisherHandle":"wantedly","publisherId":"994979509154794757","publisherName":"Wantedly","runCount":31,"viewCount":228},{"description":"<h1>Bored?</h1><h1>Tired?</h1><h1>Or you just wanna procrastinate a bit?</h1><p><br></p><p>Then just play <strong>Snake for Figma</strong>! :-)</p><p><br></p><p><strong>Use the arrows</strong> to move the Snake and make it as long as you can!</p>","id":"987064253764453451","installCount":237,"lastUpdateDate":"2021-06-17T11:36:01.606Z","likeCount":2,"name":"Snake For Figma","publisherHandle":"76adf413_320a_4","publisherId":"972557847606035545","publisherName":"Antonio Serrano Martín","runCount":199,"viewCount":520},{"description":"<h2>Editor X - Figma to Responsive Site (Beta)&nbsp;</h2><p><br></p><p>Export your Figma designs to <a href=\"https://www.editorx.com/prowebsites/home?utm_source=mb&amp;utm_medium=cpc&amp;utm_campaign=ma_ads_edx-figma-plugin\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Editor X</a> for a fast, effective way to start creating your next code-free website.&nbsp;</p><p><br></p><p>*Please note that this plugin is in its first release for testing, and under active development. We are constantly optimizing the process and collecting feedback to make the experience flawless. If you have any suggestions or comments, please send them to <a href=\"mailto:hi@editorx.com\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">hi@editorx.com</a>*</p><p><br></p><p>Editor X is an advanced, fully collaborative website creation platform. With it, creators can build responsive sites with complete design control using CSS and flexbox technology, powered by smooth drag and drop. This combined with built-in business infrastructure makes it a full-stack solution for web creators.</p><p><br></p><p>This plugin was designed to make migrating Figma designs to Editor X an easy, quick and efficient process.&nbsp;</p><p><br></p><p>During the migration, your design assets, styles and structure are moved to Editor X, Figma frames are converted to Editor X pages and elements are turned into components.&nbsp;</p><p><br></p><p>Once the transfer process is complete, you can build a fully responsive site on Editor X. On the platform you’ll have complete control over your design plus the ability to add interaction effects, advanced functionality using custom code and integrated business solutions.</p><p><br></p><p><strong>Learn more about Editor X at </strong><a href=\"https://www.editorx.com/prowebsites/home?utm_source=mb&amp;utm_medium=cpc&amp;utm_campaign=ma_ads_edx-figma-plugin\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\"><strong>editorx.com</strong></a><strong> and get in touch at </strong><a href=\"mailto:hi@editorx.com\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\"><strong>hi@editorx.com</strong></a><strong>.</strong></p>","id":"987294632651817123","installCount":908,"lastUpdateDate":"2022-07-14T06:29:11.077Z","likeCount":36,"name":"Editor X","publisherHandle":"8e39acf7_8719_4","publisherId":"1011927360335712502","publisherName":"figma2x","runCount":957,"viewCount":3227},{"description":"<p>A simple plugin to proportionally scale any selected elements by a set amount. No popup – just choose your scaling factor and voilà. </p><p><br></p><p>Assigning keyboard shortcuts is on you but the individual menu commands make that easy as pie. If you’ve not done this before Apple have <a href=\"https://support.apple.com/en-nz/guide/mac-help/mchlp2271/mac\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">instructions for setting shortcuts on a mac</a>.</p><p><br></p><p>Why such a basic plugin? Right now Figma pastes retina images at their full pixel dimensions. If (like me) you find yourself scaling these by 50% an awful lot, a keyboard shortcut is a rather handy thing. Ideally the plugin would be called \"Paste and scale\" but triggering a system paste in a Figma plugin seems tricky or a no-go – contributions welcome!</p><p><br></p>","id":"987648439069836583","installCount":385,"lastUpdateDate":"2021-07-02T07:31:40.973Z","likeCount":8,"name":"Quick scale","publisherHandle":"mrgarethprice","publisherId":"91516","publisherName":"Gareth","runCount":359,"viewCount":830},{"description":"<p>Сreate motion design systems, export animations for promos, and provide animation specs for developers all within Figma interface.</p><p><br></p><p>The purpose of Aninix is to provide the handiest way to create UI animations. We believe you have to do it in the place where you design actual UI, not in an external software. Created by designers for designers.</p><p><br></p><p>🎥 Quick introductory guide (10 mins video):</p><ul><li><a href=\"https://youtu.be/LzECe8iynyU\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">English version</a>;</li><li><a href=\"https://youtu.be/dUePU_ZuC4I\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Русская версия</a>.</li></ul><p><br></p><p>🗒 Interactive guide and animated examples (10 mins reading and clicking):</p><ul><li><a href=\"https://www.figma.com/community/file/1037503079763073886/Aninix-%E2%80%93-Playground?fuid=365753868036325323\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">English version</a>;</li><li><a href=\"https://www.figma.com/community/file/1061257108616406661/%5BRU%5D-Aninix-%E2%80%93-%D0%A0%D1%83%D0%BA%D0%BE%D0%B2%D0%BE%D0%B4%D1%81%D1%82%D0%B2%D0%BE-%D0%BF%D0%BE%D0%BB%D1%8C%D0%B7%D0%BE%D0%B2%D0%B0%D1%82%D0%B5%D0%BB%D1%8F\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Русская версия</a>.</li></ul><p><br></p><p>---</p><p><br></p><p><strong>Currently in public beta.</strong></p><p><br></p><p>We are at a very early stage and would appreciate any feedback from the community.</p><p>💬 To reach our team directly please join our discord: <a href=\"https://discord.gg/qf4A396qey\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://discord.gg/qf4A396qey</a></p><p>📚 Or find detailed documentation, supported features and hotkeys at our wiki: <a href=\"https://www.aninix.com/wiki?utm_source=figma\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://www.aninix.com/wiki</a></p><p><br></p><p>---</p><p><br></p><h2><strong>FEATURES</strong></h2><p><br></p><p><strong>Flexible keyframes system</strong></p><p>Create any micro-interactions or animations you want. You have total control over animation.</p><p><br></p><p><strong>Animation specs</strong></p><p>Share animation inspector with developers. So they can get all required info they need to recreate your animations.</p><p><br></p><p><strong>Motion design system</strong></p><p>Use curve styles to build your own motion design system. It works similar to Figma's color styles but for animation.</p><p><br></p><p><strong>Animation presets</strong></p><p>Use animation presets to speed up your exploration process.</p><p><br></p><p><strong>Export of Lottie files</strong></p><p>You can export your animations directly to Lottie files (<a href=\"https://lottiefiles.com\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://lottiefiles.com</a>).</p><p><br></p><p><strong>And export to other popular formats</strong></p><p>Also we support exporting to mp4, webm and gif.</p><p><br></p><p>---</p><p><br></p><h2>FAQ</h2><p><br></p><p><strong>How it differentiate from other animation plugins?</strong></p><p>We aim to create an analog to After Effects, but much simpler, so that designers can create powerful animations in a fast and easy way.</p><p>Our main difference is in the rendering engine and viewport. In Aninix, you work in a separate window and don't use the Figma viewport, unlike other plugins.</p><p>This feature allows us to create the best UX we can provide.</p><p><br></p><p><strong>How it differentiate from other animation apps?</strong></p><p>It's just our mentality and vision of how animation should work. We are strongly focused on UI animation and do our best to make life easier for product designers. We really love Figma and want to take it to the next level with animation flows.</p><p><br></p><p><strong>How to start using Aninix?</strong></p><p>Just run plugin: \"Plugins -&gt; Aninix\" and it will navigate you through next steps.</p><p><br></p><p><strong>What kind of animations I can do with this plugin?</strong></p><p>Aninix is best suits with the development of a motion design system, where you animate buttons, screen appearing and transitions, etc.</p><p>Also you can create promotional material for social media or other animated content, but that's like a side effect of what we do.</p><p>You can check examples at our <a href=\"https://www.figma.com/community/file/1037503079763073886/Aninix-%E2%80%93-Playground?fuid=365753868036325323\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">playground</a>.</p><p><br></p><p><strong>Does it support all features from Figma?</strong></p><p>Currently no. You can check full list of supported features here: <a href=\"https://www.aninix.com/wiki/supported-figma-features?utm_source=figma\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://www.aninix.com/wiki/supported-figma-features</a></p><p><br></p><p><strong>Is there any special requirements to files?</strong></p><p>No 🙂</p><p>But Aninix is ignoring all unsupported features. So it would be better to design file with using of supported features only.</p><p>But this is temporal turnaround because we plan to add all features from Figma in nearest future.</p><p><br></p><p><strong>Where I can check the list of hotkeys?</strong></p><p>Please visit: <a href=\"https://www.aninix.com/wiki/hotkeys?utm_source=figma\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://www.aninix.com/wiki/hotkeys</a>.</p><p><br></p><p><strong>Where is my data stored?</strong></p><p>All animation data is stored locally in Figma files. Only when you generate animation specs, we host your project in our cloud (hosted by Google). Your data is safe and secure.</p><p><br></p><p><strong>I found a bug. What I have to do?</strong></p><p>First of all don't panic 😉</p><p>Aninix saves your data automatically so you wouldn't lost any progress. And as the next step please leave comment here or reach our founder directly at <a href=\"mailto:tony@aninix.com\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">tony@aninix.com</a>.</p><p><br></p><p>---</p><p><br></p><h2><strong>CONTACTS</strong></h2><p><br></p><p>👾 Discord: <a href=\"https://discord.gg/qf4A396qey\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://discord.gg/qf4A396qey</a></p><p>🎥 Youtube: <a href=\"https://www.youtube.com/channel/UCIOURq8ExveSHjjiMAAz2SQ\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://www.youtube.com/channel/UCIOURq8ExveSHjjiMAAz2SQ</a></p><p>🌎 Website: <a href=\"https://www.aninix.com/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://www.aninix.com</a></p>","id":"988173868842375596","installCount":12787,"lastUpdateDate":"2022-07-26T23:49:34.910Z","likeCount":343,"name":"Aninix · UI animation","publisherHandle":"aninix","publisherId":"1036364887865936828","publisherName":"Aninix","runCount":15804,"viewCount":22352},{"description":"<p>Draw perfect orthogonal connectors between layers.</p><h2><br></h2><p><em>Draw Connector is a premium Figma plugin with a limit of 5 free runs per Figma file.</em></p><p><br></p><h2><a href=\"https://gum.co/draw-connector-figma-plugin\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\"><strong>Buy a license to unlock unlimited use →</strong></a></h2><h2><br></h2><ul><li>Draw connectors that take the shortest possible path and the fewest possible 90° turns</li><li>Customize the edges to connect</li><li>Customize the connector terminals (to one of <em>None</em>, <em>Circle</em>, <em>Arrow</em>, or <em>Orthogonal</em>)</li><li>Offset the connector terminals</li><li>Set the stroke color, stroke width, stroke style (solid/dashed), corner radius, and margin</li><li>Auto-updates when the position or dimension of any connected layers change</li></ul>","id":"988836825341227586","installCount":21880,"lastUpdateDate":"2022-07-15T09:47:56.571Z","likeCount":383,"name":"Draw Connector","publisherHandle":"yuanqing","publisherId":"1682602","publisherName":"Yuan Qing Lim","runCount":21958,"viewCount":34866},{"description":"<p>The <strong>BRiX Fusion plugin</strong> allows you to push your design assets from Figma to HubSpot and vice-versa.</p>","id":"989265865840177880","installCount":108,"lastUpdateDate":"2021-06-22T20:36:11.833Z","likeCount":3,"name":"BRiX Fusion","publisherHandle":"ViBViB","publisherId":"82266","publisherName":"Alberto Contreras","runCount":64,"viewCount":452},{"description":"<p>Generate <strong>Flow Arrows</strong> based on <strong>Prototype Interactions.</strong></p><p>If you wish to use FigJam connectors instead of arrows, just copy a connector from FigJam to your file and give it to the plugin and see the magic.</p><p>Currently, FigJam connectors can't connect to the instance's sublayers and the plugin will use arrows as a fallback.</p><p><br></p><p><a href=\"https://www.producthunt.com/posts/protoflow\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">🔼 Upvote in Producthunt</a></p><p><br></p><p>Let me know if you have any problems.</p>","id":"989539821393693492","installCount":19221,"lastUpdateDate":"2022-04-20T14:30:39.159Z","likeCount":372,"name":"ProToFlow","publisherHandle":"thewall","publisherId":"943497109383323481","publisherName":"Wall","runCount":21439,"viewCount":37241},{"description":"<p>Automatically remove background, just a click, things have never been that easy!</p><p><br></p><p><em>Note:</em></p><ol><li><em>You will need a </em><a href=\"http://removal.ai\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\"><em>Removal.ai</em></a><em> account, </em><a href=\"https://removal.ai/pricing\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\"><em>Removal.ai Subcription</em></a><em> (can use preview limit) and its api token for this feature.</em></li><li><em>Plugin developed by </em><a href=\"https://removal.ai/about-us/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\"><em>REMOVAL.AI LTD</em></a><em>, using </em><a href=\"https://removal.ai/api-documentation/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\"><em>Removal.ai API</em></a><em>. For more information, see our </em><a href=\"https://removal.ai/terms-conditions/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\"><em>terms and conditions</em></a><em>.</em></li></ol>","id":"989743143186277232","installCount":5388,"lastUpdateDate":"2022-01-14T09:40:31.350Z","likeCount":19,"name":"Removal.ai","publisherHandle":"trinhpapa","publisherId":"937158212050024971","publisherName":"Trình Đại Ca","runCount":7050,"viewCount":5330},{"description":"<p>Mirror the actual size of your current design on Figma Mirror. Very useful when you don't have all devices with different sizes, or you are designing for IoT or print materials. E.g. a Raspberry Pi screen, a business card.</p><p><br></p><p>How to</p><ul><li>Run plugin, or select a frame and run plugin</li><li>Enter the screen specs</li><li>Hit enter. This plugin will frame your artboard so what you see on Figma Mirror is the actual size.</li><li>(use a ruler to check if you doubt 🌞 )</li><li>Enjoy the actual sizing on your Figma Mirror app.</li></ul><p><br></p><p>Github repo: https://github.com/rickyzhangca/Mirror-Actual-Screen-Size</p>","id":"989887108667938748","installCount":552,"lastUpdateDate":"2022-04-28T20:17:18.250Z","likeCount":8,"name":"Mirror Actual Size","publisherHandle":"rickyzhangca","publisherId":"554424","publisherName":"Ricky Zhang","runCount":581,"viewCount":1908},{"description":"<p>Copy and paste SVG code directly into Figma.</p>","id":"989991864471238635","installCount":306,"lastUpdateDate":"2021-06-25T00:14:14.534Z","likeCount":6,"name":"SVG2Layers","publisherHandle":"kev","publisherId":"4329","publisherName":"Kevin Gutowski","runCount":308,"viewCount":509},{"description":"<p>Save any frame as PNG</p><p><br></p><p>How to use:</p><ol><li>Choosse frame or artboard</li><li>Open plugin</li><li>Press „Download“ button</li></ol><p><br></p>","id":"990026124251578367","installCount":3015,"lastUpdateDate":"2021-06-25T14:55:15.783Z","likeCount":8,"name":"downloadPNG","publisherHandle":"c3e1e498_75b9_4","publisherId":"909359348289080223","publisherName":"Leva","runCount":3104,"viewCount":2893},{"description":"<p>create maze inside the frame and play with friends using this Figma gaming plugin! 🕺💃</p><p><br></p><h2>Game Setup:</h2><ol><li>Find a Frame to be your maze (<strong><em>better not to use your working frame 📌</em></strong>)</li><li>Set all the obstacle inside the frame as their name -&gt; \"<strong>rect</strong>\" in the layer panel</li><li>Set your character inside the frame as the name -&gt; \"<strong>target</strong>\" in the layer panel</li><li>Open the plugin and you're ready to go.</li><li>have some fun with your friends and design team member, Figma handles all the realtime-sync!</li></ol><p><br></p><h2><strong>Game Instruction:</strong></h2><ol><li>use arrow key to control the direction: (left &lt;-) / (right-&gt;), use x to jump.</li><li>your character might fall out the frame / stick at some where, you can close the plugin, put the character back to a safe area, and re-start the plugin again</li></ol>","id":"990157354034115614","installCount":276,"lastUpdateDate":"2021-07-10T18:08:15.840Z","likeCount":12,"name":"Figma 2D World","publisherHandle":"lichin","publisherId":"459","publisherName":"Lichin","runCount":253,"viewCount":1207},{"description":"<p>Want to remove background from image free?&nbsp;<a href=\"https://pixcut.wondershare.com/?utm_source=Figma&amp;utm_medium=Plugin\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Wondershare PixCut</a>&nbsp;plugin will help you to make image background transparent automatically for free. Users could&nbsp;<strong>remove 10 images for FREE per month</strong>&nbsp;with the help of PixCut Plugin.&nbsp;</p><p>&nbsp;</p><p><strong>How to Get Remove Background from Image with 3 Steps?</strong></p><p><br></p><p>1. Sign up&nbsp;<a href=\"https://pixcut.wondershare.com/?utm_source=Figma&amp;utm_medium=Plugin\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">pixcut.wondershare.com</a> and get&nbsp;<a href=\"https://pixcut.wondershare.com/account.html?part_id=appkey&amp;utm_source=Figma&amp;utm_medium=Plugin\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">a free app-key</a>.&nbsp;</p><p>2. Select one picture and run the Background Remover from the Plugins menu.</p><p>3. Get your image without background, but with the original image size and quality.</p><p>&nbsp;<strong>&nbsp;</strong></p><p><strong>Meet the Best Online Image Editor – Wondershare PixCut</strong>&nbsp;</p><p><br></p><p><a href=\"https://pixcut.wondershare.com/?utm_source=Figma&amp;utm_medium=Plugin\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">PixCut</a>&nbsp;is a multi-purpose image tool developed by Wondershare Technology to help you do all kinds of alterations to your image. People can use PixCut to design posters, banners, YouTube thumbnails, Instagram posts, and many more for marketing, career, or other related purposes.&nbsp;</p><p><br></p><p><strong>What Makes PixCut the Best Online Editing Tool?</strong></p><p><br></p><p>1. Automatic AI &amp; Quick Speed&nbsp;</p><p>You don't have to outline the background to be removed manually. The automatic removal of the background does not take more than a few seconds to complete.&nbsp;</p><p><br></p><p><em>2.&nbsp;</em>API&nbsp;</p><p>The supported environments are URL, Node.js, Python, Java, PHP, Objective-C, and .Net. You can get a successful API call for one credit.&nbsp;&nbsp;</p><p><br></p><p>3. Remove Watermark&nbsp;</p><p>With one simple click, all the displeasing scratches, defects, and watermarks from your image will disappear into thin air.&nbsp;</p><p><br></p><p>4. Online Bulk Remove&nbsp;</p><p>Need to remove the backgrounds of multiple images? You can remove the backgrounds of up to 30 images, all at once.&nbsp;</p><p><br></p><p>5. Enlarge Image&nbsp;</p><p>You can enlarge your image to 4 times while still keeping the high resolution intact.&nbsp;</p>","id":"990188175789012011","installCount":35817,"lastUpdateDate":"2022-07-06T08:16:20.801Z","likeCount":184,"name":"PixCut Background Remover","publisherHandle":"4bce635a_e68e_4","publisherId":"898480380441593675","publisherName":"Wondershare PixCut","runCount":42565,"viewCount":26328},{"description":"<p>Import your .procreate files into Figma, complete with named layers, groups, blend modes, and clipping masks.</p><p><br></p><p>Supported:</p><ul><li>Clipping masks</li><li>Background color</li><li>sRGB color space</li><li>Blend modes</li><li>File and layer names</li><li>Import size options</li><li>Procreate groups</li><li>Import of all layers (or option to flatten on import)</li></ul><p><br></p><p>Not supported (yet):</p><ul><li>Text layers (rasterize in Procreate to import)</li><li>GIF import</li><li>P3 color space (results will vary)</li></ul>","id":"990407184454470770","installCount":2467,"lastUpdateDate":"2021-07-13T12:22:56.066Z","likeCount":153,"name":"Procreate Import","publisherHandle":"rogie","publisherId":"1105","publisherName":"Rogie King","runCount":1105,"viewCount":4307},{"description":"<p>Quick demo: https://youtu.be/JMY3Xd4Fty4</p><p><br></p><p>Provides a way for you to assign keyboard shortcuts for \"Space Between\" and \"Packed\"&nbsp;</p><p><br></p><p>AutoLayout is great, I spend all day using it. But I need an easier way to switch between spacing modes. Usually- I have to move my cursor, click a dropdown, and click.<em> This plugin exposes the \"Space Between\" and \"Packed\" options to the menubar, making it possible to assign keyboard shortcuts to them.</em></p><p><br></p><p>Definetly a hack, but still useful!!</p><p><br></p><p>Thanks @desktopofsamuel for sharing the original asset used in my cover art.</p>","id":"990663129955266740","installCount":144,"lastUpdateDate":"2021-06-26T23:37:40.571Z","likeCount":6,"name":"Autolayout Shortcut Helper","publisherHandle":"luciannovo","publisherId":"386486","publisherName":"Lucian Novosel","runCount":109,"viewCount":1134},{"description":"<p>Lazy load lets you generate skeleton loading screens in one click. Now you can save enough time while designing loading screens for developer handoff.&nbsp;</p><p><br></p><p><strong>How to use the plugin?</strong></p><p>Select your screen</p><p>Run the plugin</p><p>Thats it!!</p><p><br></p><h2><strong>🔥 Pro Tips</strong></h2><p><br></p><p><strong>Want to ignore the background layers from being converted into skeleton?</strong></p><p>=&gt; Hide the layer or Reduce opacity to 0% (Shortcut: You can do this by simply pressing 0 twice)</p><p><br></p><p><strong>Want to ignore inner button text, icon vector or any child elements of a group or frame?</strong></p><p>=&gt; Lock the parent group or frame containing these elements (Shortcut: You can do this by ⌘+SHIFT+L )</p><p><br></p><h2>🤔 FAQs</h2><p><br></p><p><strong>Why are some of the elements in my screen not converted into loader elements?</strong></p><p>=&gt; By default the plugin is developed to ignore</p><ul><li>Layers with 0% Opacity</li><li>Layers with Disabled Visibility</li><li>Masked Layers</li><li>Layers with height/width less than 0.01</li></ul>","id":"990910408295947511","installCount":12296,"lastUpdateDate":"2021-08-17T19:36:45.681Z","likeCount":192,"name":"Lazy Load","publisherHandle":"manikux","publisherId":"3224425","publisherName":"Manik Chugh","runCount":10435,"viewCount":13275},{"description":"<p>Export / Generate productions ready IconCrab from Figma in seconds.</p><p><br></p><h2><strong>Features</strong></h2><ul><li>Customizable sizes</li><li>Resize multiple icons with multiple sizes in Figma</li><li>Export all selected icons Folder according to their size</li><li>Export multiple file extensions</li></ul><p><br></p><h2><strong>To use IconCrab</strong></h2><ol><li>Install and run the “IconCrab - Icon Exporter” plugin.</li><li>Highlight frame(s) in your Figma project to preview your icon(s) on left side as slider.</li><li>Choose sizes which you want to. You can customize your special sizes on the right side</li><li>Choose file extension(s)</li><li>If you want to export icons as a zip file check the file checkbox. If not, only can check Figma.</li><li>Click the <strong>Export </strong>button</li></ol><p><br></p><h2>License</h2><p>After you've tried exporting icons with IconCrab 3 times, you'll be asked to enter your license key. Your license key will allow you or your team to export an unlimited amount of favicons using IconCrab.</p><p><br></p><p>To purchase a license for you or your team, please visit <a href=\"https://gum.co/iconcrab\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">https://gum.co/iconcrab</a> (Gumroad)</p>","id":"990959887419570438","installCount":2180,"lastUpdateDate":"2021-06-27T20:53:53.529Z","likeCount":26,"name":"IconCrab - Icon Exporter","publisherHandle":"gurayyarar","publisherId":"913413757713767860","publisherName":"Güray Yarar","runCount":1954,"viewCount":4649},{"description":"<p><strong>A one-click utility to resize an object to fill the frame according to top and left margins.</strong></p><p><br></p><h2><strong>🤔 How to use</strong></h2><ol><li>Place your object in a frame with your desired spacing from the top edge and the left edge.</li><li>Select your object (or multiple objects).</li><li>Run the plugin by finding it your plugins menu or open the Figma quick actions menu with <strong>Cmd + / </strong>or <strong>Cmd + P</strong> (or <strong>Ctrl + /</strong> or <strong>Ctrl + P </strong>on Windows), type <strong>mcm, </strong>and hit enter to quickly run the function.</li></ol><p><br></p><p><strong>Done! </strong>The object(s) will be resized so that the shape fills the frame with the bottom and right margins matching the previously established top and left margins.</p><p><br></p><h2><strong>📕 Notes and background</strong></h2><p><strong>Why this plugin?</strong></p><p>I often find myself placing an object in a frame according to how far I want it from the top left corner. Then I have to drag out the bottom right corner and eyeball where it approximately matches the same spacing I applied to the top left corner, wasting several seconds pressing alt to check spacing, and dragging/nudging the edges to fit. I find that this plugin cuts out a couple precious seconds of hassle.</p><p><br></p><p><strong>Plugin Notes:</strong></p><ul><li>All object types (such as shapes, components, text boxes, frames, and groups) are supported.</li><li>Multiple objects, within the same frame or across multiple different frames, can be selected and resized at once.</li><li>Selected objects must exist within a parent frame.</li></ul><p><br></p><h2><strong>☕️ Support the plugin</strong></h2><p>If you love the plugin and feel inclined to provide some small financial support to encourage the development of new features and bug fixes, that would be greatly appreciated. No pressure, of course!</p><p><a href=\"https://ko-fi.com/dnlrj\" rel=\"noreferrer noopener nofollow\" target=\"_blank\"><strong>Buy me a coffee</strong></a></p><p><br></p><p>_</p>","id":"991036921978543383","installCount":178,"lastUpdateDate":"2021-08-19T17:20:42.146Z","likeCount":14,"name":"match corner margins","publisherHandle":"dnlrj","publisherId":"466014","publisherName":"Dan Araujo","runCount":133,"viewCount":786},{"description":"<h2><strong>Makers is a website builder inside Figma.</strong></h2><p><br></p><p>Click a button and publish your design to a custom domain.</p><p><br></p><h2><strong>Demo</strong></h2><p>Here's a <a href=\"https://twitter.com/joaodmj/status/1488216877511884805?s=20\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">quick demo</a> of the Makers Plugin in action.</p><p><br></p><h2><strong>How it works</strong></h2><p>I want to say it as early as possible: you have to design using our built-in components. I know, I know, you have to duplicate your work if you already have a design. But the extra work is to guarantee the best output possible!</p><p><br></p><p>Why? Well, it's the most reliable way to understand what you are designing: is it a navigation bar, or a button, or an input? By using the built in components you are telling us what to convert them to 🙂</p><p><br></p><h2><strong>How to get started?</strong></h2><ol><li>Install the Plugin</li><li>Select the components you want to use</li><li>Customize at your own will</li><li>Click \"Preview\" to open it in the browser (<strong>you have to create a Makers account</strong>*)</li><li>Whenever you are ready: Publish it 🚀</li></ol><p><br></p><h2><strong>Why do I have to create an account?</strong></h2><p>To save your sites securely. When you Preview a design within the Makers Plugin you are already creating a website that you can share with your friends, colleagues or mom 😍</p><p><br></p><p>The most secure way to know the site is yours is by associating it with an account. You get this, right?</p><p><br></p><h2><strong>What you can easily build:</strong></h2><ul><li>Landing Pages</li><li>Portfolio / Personal sites</li><li>Blogging</li><li>Careers / Wiki sites</li></ul><p><br></p><h2><strong>Templates:</strong></h2><p>Templates are the best way to <a href=\"https://makers.so/templates\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">get started with makers</a>.</p><p><br></p><h2><strong>Tutorials:</strong></h2><p>Here are the official resources of <a href=\"https://makers.so/tutorials\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">how to make and publish sites with Figma</a>.</p><p><br></p><p><br></p><p>—</p><p><br></p><p>If you read thus far, thank you! I really hope this Plugin can help you make your life easier 😎</p><p><br></p><p>Create something insanely great 🙌</p><p>I can’t wait to see what you create with Makers!</p><p><br></p><p><br></p><h2><strong>Why I build Makers:</strong></h2><p>As a front-end developer I've converted hundreds of Figma designs into code. My clients are usually busy startups or web agencies wanted to speed up their workflow.</p><p><br></p><p>However the ability to automatically publish Figma designs into a custom domain (without going to an engineer and \"design to code\") is something that would benefit all the community. Specially for simple projects.</p><p><br></p><h2><strong>Questions:</strong></h2><p>Feel free to comment in this page or drop me an email at <a href=\"mailto:support@makers.so\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">support@makers.so</a></p>","id":"991438050654881175","installCount":12067,"lastUpdateDate":"2022-06-28T11:20:11.939Z","likeCount":303,"name":"Makers • From Figma to Site","publisherHandle":"makers","publisherId":"2304127","publisherName":"John da Maia","runCount":11503,"viewCount":15360},{"description":"<p>A simple plug-in that adds ₹ Indian Rupee symbol to text layers.</p>","id":"991593123470386614","installCount":1037,"lastUpdateDate":"2021-06-29T06:37:55.105Z","likeCount":8,"name":"Indian Rupee","publisherHandle":"ashish_pixel","publisherId":"976092620740423189","publisherName":"Ashish Kejriwal","runCount":953,"viewCount":2187},{"description":"<p>Quickly create documentation for all your figma styles.</p><p><br></p><p><em>*Alpha Release*</em></p><p>This is an alpha (pre-stable) release. Please submit any issues as well as feature requests to the [Github repo](https://github.com/rttnbrgr/harmony)</p>","id":"991866272578143756","installCount":412,"lastUpdateDate":"2021-08-07T23:56:18.735Z","likeCount":13,"name":"Figma Docs","publisherHandle":"rttnbrgr","publisherId":"193344","publisherName":"Nathan Rothenberger","runCount":400,"viewCount":1826},{"description":"<p>Connect Nodes in One Click!</p>","id":"991975059967102509","installCount":2647,"lastUpdateDate":"2021-07-02T03:36:05.938Z","likeCount":152,"name":"Sankey Connect","publisherHandle":"MrBiscuit","publisherId":"1241","publisherName":"Mr.Biscuit","runCount":2091,"viewCount":8560},{"description":"<p>Apply the perfect corner radius to nested layers based on the parent corner radius and padding.</p><p><br></p><h2>👉 Usage</h2><ol><li>Set the corner radius of the parent frame.</li><li>Make sure the parent frame has auto layout enabled and its padding is uniform.</li><li>Select the child layer and run the plugin.</li></ol><p><br></p><h2>✅ Supported</h2><ul><li>Apply to multiple selections at once</li><li>Frames with mixed corner radii</li><li>Corner smoothing</li></ul><p><br></p><h2>❌ Not Supported</h2><ul><li>Frames with mixed padding</li><li>Layer types other than <code>RECTANGLE</code>, <code>FRAME</code>, and <code>COMPONENT</code></li><li>Changing the parent corner radius based on child corner radius</li></ul>","id":"992062770244527699","installCount":565,"lastUpdateDate":"2021-08-26T19:40:14.045Z","likeCount":13,"name":"Nested Corners","publisherHandle":"toddham","publisherId":"2640437","publisherName":"Todd Hamilton","runCount":520,"viewCount":1462},{"description":"<p>A small text generator for books, courses and documents.</p><p><br></p><p>To generate this text, simply have text fields selected and click on whichever data you want to generate.</p><p><br></p><p><strong>Example: </strong>If you want to generate a Document Title, select a text field and click on the 'Title' button under the 'Documents' section.</p><p>If you want to generate a Book Author, select a text field and click on the 'Author' button under the 'Books' section.</p><p><br></p><p>If you would like to generate <strong>all</strong> the data of a section, for example the <strong>Title</strong>, <strong>Course</strong> and <strong>Institution</strong> of a <strong>Document</strong>, you need to have three text fields selected each named appropriately. The fields should be named by section and type, so <code>section_type</code></p><p><br></p><p><strong>Example</strong>. Select 3 text fields named</p><ol><li><code>document_title</code></li><li><code>document_course</code></li><li><code>document_institution</code></li></ol><p>And click on the <strong>Document</strong> button in the <strong>Documents</strong> tab. This will generate all information into these text fields.</p>","id":"992329760854028970","installCount":37,"lastUpdateDate":"2021-07-26T09:16:13.623Z","likeCount":1,"name":"StuDocreator","publisherHandle":"ruanh","publisherId":"959805440138840346","publisherName":"Ruan","runCount":11,"viewCount":98},{"description":"<h2>Export your Figma prototype to HTML and CSS, React, Vue, Angular and many other JavaScript frameworks.</h2><p><br></p><p>Export your components and design system to teleportHQ, integrate the generated code into your web application codebase and publish your website with one click.</p><p><br></p><h2>How to use the plugin?</h2><ul><li>Select any layers from your high fidelity prototypes, export them to teleportHQ and get the code with one click. <strong>No sign-up required!</strong></li><li>Use the “Copy to Clipboard” functionality to copy and paste the layers into your existing teleportHQ project</li></ul><p><br></p><p>Learn more about how to use this plugin <a href=\"https://teleporthq.io/figma-export-to-html-plugin?figma\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">here</a>.</p><h2><br></h2><h2><strong>Code Export </strong></h2><ul><li>to React with: CSS, Inline Styles, CSS Modules, Styled Components, JSX, JSS</li><li>to Next JS, Gatsby JS</li><li>to Vue JS, Nuxt JS, Gridsome</li><li>to Angular, Preact, Stencil JS</li></ul><p><br></p><p>Make responsive adjustments, test everything in teleportHQ and publish with one click.</p><p><br></p><p>Developer handoff has never been easier!</p><p><br></p><h2><strong>Open Source Code Generators</strong></h2><p><a href=\"https://github.com/teleporthq/teleport-code-generators\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">teleportHQ's code generators</a> are open source<strong>. </strong>If you don't find exactly what you need you can build your own. We'll support you!</p><p><br></p><p>Want to learn more? Check out the <a href=\"https://repl.teleporthq.io/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">REPL</a> where you can test the code generators with all the js frameworks or css-in-js libraries.</p><p><br></p><h2><strong>Limitations</strong></h2><p>The current version of the teleportHQ design to code plugin does not yet support</p><p><br></p><ul><li>Masks</li><li>Background blur and layer blur</li><li>Scales &amp; rotations</li><li>Radial gradients</li><li>Shadow tokens</li><li>Component overrides and variants</li><li>GIFs</li><li>Rich-text elements</li></ul><p><br></p><h2>About Us</h2><p><a href=\"https://teleporthq.io/?figma-page\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">teleportHQ is a low-code platform</a> and a suite of open-source tools that focus on the designer-developer handoff and the visual building of user interfaces.</p><p><br></p><h2>Follow Us</h2><p><a href=\"https://twitter.com/TeleportHQio\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Twitter</a> - <a href=\"https://www.facebook.com/teleportHQ\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Facebook</a> - <a href=\"https://www.linkedin.com/company/teleportHQ\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">LinkedIn</a></p><p><br></p><h2>Support/Community</h2><p>Need help? Join us on our <a href=\"https://discord.com/invite/uJrbeuHhyR\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Discord community</a> and discuss with one of our team members.</p>","id":"992726161890204477","installCount":14507,"lastUpdateDate":"2022-07-15T08:10:14.929Z","likeCount":215,"name":"teleportHQ - Figma to Code - Export HTML, CSS, React & Vue","publisherHandle":"teleporthq","publisherId":"961234565440647927","publisherName":"teleportHQ","runCount":17563,"viewCount":26829},{"description":"<h2>Free, open source health icons</h2><h3>Free for use in your next commercial or personal project.Editing is ok. Republishing is ok. No need to give credit.</h3><p>Learn more - <a href=\"https://healthicons.org/\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">https://healthicons.org/</a></p>","id":"992844281461869440","installCount":2684,"lastUpdateDate":"2021-07-05T17:25:51.416Z","likeCount":38,"name":"Health Icons Figma Plugin","publisherHandle":"tkmadeit","publisherId":"156890","publisherName":"Tekeste Kidanu","runCount":2074,"viewCount":3560},{"description":"<p>Generate beautiful color palettes and apply instantly to illustrations, images, interfaces, literally anything on the canvas with one click!</p><p><br></p><h2>Working with colors has never been this easy</h2><p>Break out of the trial-error loop and instantly see how color palettes come alive on your design!</p><p><br></p><h2><strong>Create and iterate effortlessly</strong></h2><p>Building a color system, designing complex vector art, or making UI flows- supercharge your workflow from hours to seconds!</p><p><br></p><p>------------------------------------------------------------</p><p><br></p><p>Spectrum also has a free web generator and more cool stuff. Check out -&gt; <a href=\"https://colorspectrum.design/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://colorspectrum.design/</a></p><p><br></p><p>If you've any questions, feedback, feature requests, or need a student license, reach out to me over Twitter -&gt; <a href=\"https://twitter.com/millons098\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://twitter.com/millons098</a> or drop a mail at -&gt; <a href=\"mailto:colorspectrum.design@gmail.com\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">colorspectrum.design@gmail.com</a></p>","id":"993087744324640694","installCount":10809,"lastUpdateDate":"2022-04-03T13:19:23.443Z","likeCount":295,"name":"Spectrum","publisherHandle":"milanmaheshwari","publisherId":"94095","publisherName":"Milan Maheshwari","runCount":8616,"viewCount":18744},{"description":"<p>Contrast Grid plugin is Inspired by <a href=\"https://contrast-grid.eightshapes.com/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Eightshapes Contrast Grid</a>.</p><p><br></p><p>Check contrast multiple foreground and background color combos for compliance with WCAG 2.1 minimum contrast.</p><p><br></p><p>Include one color per line, with an optional comma-separated alpha value.</p>","id":"993414361395505148","installCount":1532,"lastUpdateDate":"2022-05-02T08:54:59.414Z","likeCount":40,"name":"Contrast Grid","publisherHandle":"hiloki","publisherId":"410711","publisherName":"Hiroki Tani","runCount":1348,"viewCount":2666},{"description":"<p>Insert one-click content from your VK account directly into layouts.&nbsp;Only compatible with VKUI. Use ↳ Image, ↳ Title, etc. in layer names to make it work in your own layouts.</p><p><br></p><p><em>Unofficial plugin.&nbsp;</em></p><p><em>Authorization with your VK account is required.</em></p><p><br></p><p><br></p><p>Вставляйте в один клик контент из Вашего аккаунта ВКонтакте прямо в макеты. Совместимо только с VKUI. Используйте в названиях слоёв ↳ Image, ↳ Title и т.п., чтобы это работало в Ваших собственных макетах.</p><p><br></p><p><em>Неофициальный плагин. </em></p><p><em>Необходима авторизация с помощью аккаунта ВКонтакте.</em></p><p><br></p><p>GitHub: https://github.com/IlyaGrshin/VK-Data</p>","id":"993993889730044076","installCount":190,"lastUpdateDate":"2022-05-10T23:38:38.741Z","likeCount":22,"name":"VK Data","publisherHandle":"ilyagrshn","publisherId":"844569","publisherName":"Ilya Grishin","runCount":141,"viewCount":717},{"description":"<p>Connect to your Canto media library from Figma.</p><p>&nbsp;</p><p>Search, Preview and Import specific files from your Canto library directly from within Figma. Save clicks and time by adding images to Figma from Canto – depending on your business needs.</p><p>&nbsp;</p><p>No Canto account yet? Start your FREE trial today: <a href=\"https://apc01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fwww.canto.com%2Fsignup%2F&amp;data=04%7C01%7Clevi.gao%40nagarro.com%7Cb1e874b61c65456a16a208d960ef5a71%7Ca45fe71af4804e42ad5eaff33165aa35%7C0%7C0%7C637647403453715355%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C1000&amp;sdata=tUFeTv05FdFbQZOGCjC5t8cSWdT%2FGVULlxwhz9gn%2Byk%3D&amp;reserved=0\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://www.canto.com/signup/</a></p>","id":"994523166867613003","installCount":134,"lastUpdateDate":"2022-02-22T16:47:29.928Z","likeCount":1,"name":"Canto Figma Connector","publisherHandle":"f27eea38_168b_4","publisherId":"1009332196953797916","publisherName":"Canto","runCount":113,"viewCount":709},{"description":"<p>Text style manager allows you to update your global text styles all at once rather than individually, so if you have any type hierarchy then you no longer need to update each font individually.</p>","id":"994600505813171559","installCount":1126,"lastUpdateDate":"2022-03-26T13:44:49.677Z","likeCount":18,"name":"Straple Text Style Manager","publisherHandle":"93137bcd_87e6_4","publisherId":"994600725624302396","publisherName":"Gravita","runCount":1254,"viewCount":2732},{"description":"<p>Color Better, Color Faster. in your Workspace.</p><p>Dopely Colors is a super app for anything related to colors designed for creatives like you.</p><p><br></p><ul><li>Explore millions of amazing color palettes, gradients, colors and type combos, and add them to your projects.</li><li>Create color palettes from any image.</li><li>Find beautiful color harmonies for all your colors.</li><li>Check the contrast of colors all over your project and fix contrast problems with smart suggestions!</li><li>Convert hex, HSL, HSB, RGB, CMYK, Lab, NCOL, and Pantone to any color model you want!</li><li>Test the accessibility of your design with the vision simulator and try to make the world’s products accessible.</li><li>Create shades, tints, and tones for your colors.</li></ul><p><br></p><p>Enjoy<a href=\"https://fsymbols.com/heart/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">♡&nbsp;</a></p>","id":"994656899889548666","installCount":3986,"lastUpdateDate":"2022-01-30T13:51:00.903Z","likeCount":63,"name":"Dopely Colors","publisherHandle":"dopely","publisherId":"994654064377340976","publisherName":"Dopely","runCount":4037,"viewCount":6047},{"description":"<p>Have you heard about <strong>interpolation spaces ?</strong> They affect how gradient goes from one color to another.</p><p>It always been with sRGB interpolation, and linear. <em>Till now</em>.</p><p>It's time to discover HSL, ZYX and LCH interpolation spaces 🦄 And what about a sweet <em>Ease In Cubic</em> curve too?</p><p><br></p><p>Come and give a new dimension to your designs ✌🤙⚡</p><p><em>Your gradient will never be boring anymore</em> 🥳</p>","id":"994688620598149516","installCount":4372,"lastUpdateDate":"2021-08-09T15:21:59.800Z","likeCount":89,"name":"Non Boring Gradients","publisherHandle":"tomquinonero","publisherId":"34401","publisherName":"Tom Quinonero","runCount":3535,"viewCount":6393},{"description":"<p>Get your frames URL easier</p>","id":"994888066621439419","installCount":617,"lastUpdateDate":"2021-07-08T08:52:47.434Z","likeCount":8,"name":"Easy URL","publisherHandle":"chou","publisherId":"40687","publisherName":"André Chou","runCount":658,"viewCount":2337},{"description":"<p><strong>Review and report instances and components from Figma.</strong></p><p><br></p><p>Topo is a Figma Plugin that will allow you report and comment on specific components and post it to any Slack channel or endpoint you want.</p><p><br></p><p>You can try Topo for free for up to 3 component reports. Once you buy a license you're entitled to a lifetime license key and updates, while supporting and contributing to build better features and more plugins and tools.</p><p><br></p><p><a href=\"https://santiagomoreno.gumroad.com/l/figma-topo\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">Get lifetime license</a></p><p><br></p><p>General usage:</p><ul><li>Add Topo integration for Slack</li><li>With Topo opened, select an Instance or Component you want to review or report in your Figma file.</li><li>Hit 'Report'.</li><li>Check the Slack channel and keep track of what's being reported and resolved.</li></ul><p><br></p><p><strong>Crafted for design system and library management teams</strong></p><p>Allow everyone to report component errors, bugs or issues in a single channel, integrated with the tools you use everyday. Keep track of what’s being resolved.</p><p><br></p><p><strong>No need to stop designing</strong></p><p>Stop jumping into calls and sending messages that get lost in the discussion. Report without leaving Figma.</p><p><br></p><p><strong>Connect your own endpoint for integration with other tools</strong></p><p>If you don’t want to use the default Slack app, you can send the reported data to any custom endpoint. Maybe your own API to create JIRA tickets?</p>","id":"995501500470656623","installCount":219,"lastUpdateDate":"2021-07-10T03:54:19.804Z","likeCount":25,"name":"Topo","publisherHandle":"santiagomoreno","publisherId":"570857","publisherName":"Santiago Moreno","runCount":151,"viewCount":2541},{"description":"<h2>Bring user research to where the work happens</h2><p><br></p><p>Drag and drop playable video embeds from the Blossom plugin as editable video cards, presentation slides, and sticky notes inside both Figma and FigJam.</p><p><br></p><p>See how the user research team at Figma uses Blossom in <a href=\"https://www.youtube.com/watch?v=bhDUMTjfhF4#t=44m30s\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Figma’s office hours</a>.</p><p><br></p><p><strong>Key Features:</strong></p><ul><li>Sync your recorded Zoom meetings and notes to Blossom.</li><li>Upload your user research into Blossom and have it transcribed in minutes.</li><li>Create clips inside Blossom and drag and drop into Figma and FigJam.</li><li>Embed media directly into Figma or FigJam from industry leading platforms such as YouTube, Loom, Chorus, Cloudapp, Google Drive, Vimeo, Twitter and many more!</li><li>Invite your entire team to your Blossom workspace participate in research.</li><li>Curate your clips into playable highlight reels to captivate your stakeholders and teammates.</li><li>Add video to your Figma presentations and publish via shareable links.</li></ul><p><br></p><p><strong>Follow the steps below or </strong><a href=\"https://www.youtube.com/watch?v=V2UhN7DtMuY\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">watch the tutorial</a><strong>:</strong></p><ol><li>Install the Blossom plugin for Figma / FigJam.</li><li>Sign up for a free trial of Blossom.</li><li>Import research recordings from the plugin or your Blossom workspace.</li><li>Create clips from your recordings</li><li>Drag and drop your embeds, clips, or reels from the Blossom plugin into any Figma canvas or FigJam board.</li></ol><p><br></p><p><strong>Get in touch</strong></p><p>Blossom is expanding everyday. Have a question or idea for us? Send it over to: <a href=\"mailto:team@tryblossom.io\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">team@tryblossom.io</a>.</p>","id":"995608071385132676","installCount":13740,"lastUpdateDate":"2022-05-10T16:33:14.058Z","likeCount":110,"name":"Blossom","publisherHandle":"aaronveale","publisherId":"3383640","publisherName":"Aaron Veale","runCount":15878,"viewCount":15094},{"description":"<p>A simple and intuitive tool to generate <strong>design tokens</strong> based on Figma design system in one click.</p><p><br></p><p>Copy and use this page from community file as boiler plate:</p><p><a href=\"https://www.figma.com/file/aZL0Y2Xy2gZKpMFtbhqvjU/Toukan?node-id=0%3A1\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">https://www.figma.com/file/aZL0Y2Xy2gZKpMFtbhqvjU/Toukan?node-id=0%3A1</a></p><p><br></p><p>Don't forget to give your feedback! :)</p>","id":"995763475526131389","installCount":443,"lastUpdateDate":"2021-07-27T08:56:14.675Z","likeCount":11,"name":"Toukan","publisherHandle":"tabishrafiq","publisherId":"1232170","publisherName":"Tabish Rafiq","runCount":335,"viewCount":2016},{"description":"<p>You can make Indexes with links to frames and page in a file using <strong>Indexer.</strong></p><p><br></p><p><strong>Features:</strong></p><ol><li>Make a list of all the pages in a file(with links).</li><li>Make a list of all the frames in a file(with links).</li><li>Make a list of all frames in a page(with links).</li><li>Make a list of selected frames in a page(with links).</li><li>Make a list of set of frames which have specific width or height in a page(with links).</li></ol><p><br></p><p>Leave a comment if you have any suggestions or feedback.</p>","id":"995922087422639826","installCount":592,"lastUpdateDate":"2021-07-11T14:50:40.024Z","likeCount":22,"name":"Indexer","publisherHandle":"sriram","publisherId":"241356","publisherName":"Sriram Boppana","runCount":574,"viewCount":2574},{"description":"<p>Sometimes you need to reuse your prebuild color palette with extension ACO(.aco) that you've on your another APP, but currently on Figma doesn't provide this thing. This plugin provide you to easily convert .aco file to color palette.</p>","id":"996053836935027425","installCount":1367,"lastUpdateDate":"2021-07-11T17:11:12.697Z","likeCount":22,"name":"Aco Reader","publisherHandle":"umebozu","publisherId":"3681986","publisherName":"Faisal Al Isfahani","runCount":1267,"viewCount":2213},{"description":"<p>A small set of tools to help tabletop games designers prototyping new ideas!</p><p><br></p><p>Roll dice, set hourglass, pick randomly, create grids and shuffle objects.</p>","id":"996546054674548564","installCount":719,"lastUpdateDate":"2021-09-11T03:37:41.014Z","likeCount":8,"name":"Tabletop Tools","publisherHandle":"victorsferreira","publisherId":"951719206520820707","publisherName":"victor ferreira","runCount":954,"viewCount":3706},{"description":"<p>Easily export your variants to SVG. </p><p><br></p><p>Figma variants are neat however they can be frustrating to export since you can't control the naming scheme. This plugin lets you export your variants in two key ways: <strong>folders</strong> and <strong>file names</strong>.</p><p><br></p><p><strong>Folders</strong></p><p>Variant names are used for each folder letting you combine component sets together.</p><p><br></p><p><strong>File names</strong></p><p>A flat, simple approach that creates helpful filenames based on each variant name.</p><p><br></p><p><strong>Note</strong></p><p>When using a boolean variant the property name will be used for the \"true\" or \"on\" state while variants with \"off\" or \"false\" states will have the property omitted.</p>","id":"996640798188777330","installCount":771,"lastUpdateDate":"2021-07-13T05:05:16.627Z","likeCount":30,"name":"Export Variants","publisherHandle":"kev","publisherId":"4329","publisherName":"Kevin Gutowski","runCount":723,"viewCount":2014},{"description":"<p>Are you tired of dealing with two different versions (RTL and&nbsp;LTR) of your design at the same time? we have got your back! with Aks you can easily assign the translation to the text and convert the whole layout from LTR to RTL with one click!</p><p><br></p><p>The tool is specially designed for Urdu, Arabic, Persian, and other RTL languages.</p><p><br></p><p><strong>Get your job done in three simple steps:</strong></p><p><br></p><ol><li>Select the text and assign font and translation.</li><li>Select and mark \"Do not flip\" to non-symmetrical elements.</li><li>Select the main frame, and simply click the \"Convert\" button.</li></ol><p><br></p><p>We promise it is as easy as it sounds :)</p>","id":"996850126930357189","installCount":1413,"lastUpdateDate":"2022-04-04T19:24:16.337Z","likeCount":18,"name":"Aks - LTR to RTL","publisherHandle":"tabishrafiq","publisherId":"1232170","publisherName":"Tabish Rafiq","runCount":1534,"viewCount":1767},{"description":"<p>Import .HEIC images from your iPhone/iOS into Figma as PNG, JPEG or GIF.</p>","id":"997126103738146818","installCount":2920,"lastUpdateDate":"2021-10-26T14:02:16.156Z","likeCount":89,"name":"HEIC Import (iPhone photos in Figma)","publisherHandle":"rogie","publisherId":"1105","publisherName":"Rogie King","runCount":2236,"viewCount":4886},{"description":"<p>This plugin is intended to work hand in hand with a full version of the<strong> </strong><a href=\"https://mrbiscuit.gumroad.com/l/FigmaDataViz\" rel=\"noreferrer noopener nofollow\" target=\"_blank\"><strong>Data Visualization Library</strong></a></p><p><br></p><h2><strong>Feature Highlights</strong></h2><ul><li>Live Preview and Code Export.</li><li>JSFiddle integration.</li><li>Easy Color Style Customization.</li><li>and much more...</li></ul><p><br></p><h2><strong>Features Planed</strong></h2><ul><li>Multiple Chart Library support (allows switching for targeted front end chart libraries).</li><li>Support more chart types.</li></ul>","id":"997505997850086520","installCount":2276,"lastUpdateDate":"2021-07-28T14:31:26.192Z","likeCount":32,"name":"DataViz Companion","publisherHandle":"MrBiscuit","publisherId":"1241","publisherName":"Mr.Biscuit","runCount":2680,"viewCount":5917},{"description":"<p>Create a document on Figma using the Markdown.</p><p><br></p><p>⚠️NOTE</p><p>Figdoc supports:</p><ul><li>Heading ✔</li><li>Paragraph ✔</li><li>Unordered list ✔</li><li>Ordered list ✔</li><li>Strong ▲</li><li>Emphasis ▲</li><li>Hyperlink ✕</li><li>Table ✕</li><li>Code ✕</li><li>Blockquote ✕</li></ul><p><br></p>","id":"997529321448602758","installCount":259,"lastUpdateDate":"2021-07-15T15:51:56.389Z","likeCount":19,"name":"Figdoc","publisherHandle":"hiloki","publisherId":"410711","publisherName":"Hiroki Tani","runCount":240,"viewCount":1121},{"description":"<p>Remove background from one or many images at once!</p><p><br></p><p><strong>100% free:</strong></p><ul><li><strong>No limits</strong> on the number of images.</li><li><strong>No subscription or registration</strong> is required.</li><li><strong>No API key</strong> is needed.</li></ul><p><br></p><p><strong>How it works:</strong></p><ol><li>Select one picture or a batch, or simply everything you have on canvas.</li><li>Run the Background Remover from the Plugins menu.</li><li>Get images without backgrounds, but with the original image size and quality.</li></ol><p><br></p><p>You can also use the <a href=\"https://icons8.com/bgremover?utm_source=figma-plugin-bgremover&amp;utm_medium=cross-promo&amp;utm_campaign=web-version\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">web version</a>. It's free, and it works on mobile devices.</p><p><br></p><p><strong>More AI-powered tools to enhance your photos:</strong></p><ul><li><a href=\"https://icons8.com/upscaler?utm_source=figma-plugin-bgremover&amp;utm_medium=cross-promo&amp;utm_campaign=smart-upscaler\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Smart Upscaler</a> to make it bigger without losing quality</li><li><a href=\"https://icons8.com/swapper?utm_source=figma-plugin-bgremover&amp;utm_medium=cross-promo&amp;utm_campaign=face-swapper\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Face Swapper</a> to make high-res and high-quality face swaps</li></ul><p><br></p><p><strong>Places to find unique and diverse faces:</strong></p><ul><li><a href=\"https://generated.photos/faces?utm_source=figma-plugin-bgremover&amp;utm_medium=cross-promo&amp;utm_campaign=generated-photos\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Generated Photos</a> to get worry-free avatars for your designs</li><li><a href=\"https://generated.photos/face-generator?utm_source=figma-plugin-bgremover&amp;utm_medium=cross-promo&amp;utm_campaign=face-generator\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Face Generator</a> to create a unique person with your parameters in one click</li></ul>","id":"997643096679511216","installCount":56821,"lastUpdateDate":"2021-12-08T13:06:07.464Z","likeCount":404,"name":"Icons8 Background Remover","publisherHandle":"Icons8","publisherId":"1428660","publisherName":"Icons8","runCount":60089,"viewCount":39664},{"description":"<p>Plugin para facilitar a criação de trackings</p>","id":"998409611720567160","installCount":65,"lastUpdateDate":"2022-01-20T15:21:40.130Z","likeCount":0,"name":"Tracking Take Blip","publisherHandle":"iSterra","publisherId":"3800491","publisherName":"isterra","runCount":47,"viewCount":356},{"description":"<p>Apply your own custom variant component as tags to frames.</p><p><br></p><p>Features:</p><p>Apply tags to one or multiple frames</p><p>Filter tagged frames</p><p>No need to run the plugin for change tag; change the first property of the tag instance, and the plugin will detect the changes (FigTag uses it as the status)</p><p>Auto delete tag on frame remove</p><p>Live tag position based on frame position</p><p>Tags will move with frames if the plugin is open.</p>","id":"998914249119019489","installCount":432,"lastUpdateDate":"2021-12-14T13:34:37.000Z","likeCount":42,"name":"FigTag","publisherHandle":"thewall","publisherId":"943497109383323481","publisherName":"Wall","runCount":437,"viewCount":2808},{"description":"<p>Create an auto-layout list of your components + label in no time 👍 Handy when documenting your design system.</p>","id":"999016598490251786","installCount":560,"lastUpdateDate":"2021-07-20T15:05:57.025Z","likeCount":5,"name":"ListCreator","publisherHandle":"1a032388_97f7_4","publisherId":"984548924518771112","publisherName":"Belfius Bank","runCount":733,"viewCount":2135},{"description":"<p>Bavatars is a free crowd-sourced avatar gallery of Black people to use in your personal or commercial design projects or live apps.</p>","id":"999661511334406897","installCount":3945,"lastUpdateDate":"2021-08-04T16:08:09.171Z","likeCount":87,"name":"Bavatars","publisherHandle":"seyii","publisherId":"1373999","publisherName":"Seyi Oluwadare","runCount":3957,"viewCount":5048},{"description":"<p>Generate radial, linear or unform vector halftone gradients.</p>","id":"1000012087652644703","installCount":7525,"lastUpdateDate":"2021-08-11T20:12:59.000Z","likeCount":99,"name":"HLFTN","publisherHandle":"PavelLaptev","publisherId":"134689","publisherName":"Pavel Laptev","runCount":6363,"viewCount":8833},{"description":"<p>蓝湖是一个提供最佳用户体验的的产品设计协作平台，可以无缝衔接产品、设计、研发流程，帮助团队降低沟通成本，缩短研发周期，大大提高工作效率。</p><p>使用蓝湖，帮助你轻松完成以下任务：</p><p>-&nbsp;团队项目集中管理</p><p>-&nbsp;产品经理轻松表达需求</p><p>-&nbsp;设计师高效交付设计图</p><p>-&nbsp;工程师快速省心开发</p>","id":"1000018270921149282","installCount":23021,"lastUpdateDate":"2022-07-14T11:00:04.501Z","likeCount":355,"name":"Lanhu · 蓝湖","publisherHandle":"Lanhu","publisherId":"994864304078251203","publisherName":"Lanhu","runCount":23065,"viewCount":47472},{"description":"<p>Close Vector Path Effortlessly!</p>","id":"1000208017155888036","installCount":1925,"lastUpdateDate":"2021-08-24T02:07:12.043Z","likeCount":30,"name":"Close Path","publisherHandle":"MrBiscuit","publisherId":"1241","publisherName":"Mr.Biscuit","runCount":1137,"viewCount":3889},{"description":"<p>This is a simple plugin that picks an instance and creates a new component with variants of 3 different sizes (12 &gt; 16 &gt; 24) while changing their stroke width according to a balanced proportion.</p><p><br></p><h2>How to use:</h2><ol><li>Select an instance of the icon component</li><li>Run the plugin</li><li>Change the variant names, sizes to match your workflow</li><li>(optional) Change the stroke width of each variant <em>or leave blank if you don't use stroke based icons</em></li><li>(optional) Check to remove the origin layer after creating the variants</li><li>Click Save &amp; Create variants</li></ol><p><br></p><p><em>Credits:</em></p><p>Figma plugin toolkit by <a href=\"https://www.figma.com/@yuanqing\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">@yuanqing</a></p>","id":"1000211110592209830","installCount":2392,"lastUpdateDate":"2022-06-18T23:52:33.034Z","likeCount":63,"name":"Icon Sizes","publisherHandle":"jorgemartins","publisherId":"2569","publisherName":"jorgemartins","runCount":1653,"viewCount":3941},{"description":"<h2>Design in one theme &amp; automate the rest</h2><p>A plugin that helps you keep your Design System simpler in one theme. Enables you to automate any other themes with a few clicks. Works for you and your team across all your projects.</p><p><br></p><ul><li>Easily switch hundreds of layers to any theme</li><li>Compatible with any Design System</li><li>Not only for dark mode but for any theme</li><li>One-time setup</li><li>Works for the whole team</li></ul><p><br></p><p>👉 How to use it <a href=\"https://darkvader.zerox.me/\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">https://darkvader.zerox.me/</a></p><p>👩‍💻 The plugin is in Beta, so for any errors or feedback, please reach out on twitter @zerox_me</p>","id":"1000857171878658140","installCount":646,"lastUpdateDate":"2021-11-14T00:20:23.643Z","likeCount":31,"name":"Dark Vader Beta 🖤💛","publisherHandle":"zero_","publisherId":"913380338569178008","publisherName":"Zero","runCount":691,"viewCount":2717},{"description":"<p><strong>Create global variables and link them to any property across any layer. Experiment with your designs, keep organized, and unlock new functionality within Figma.</strong></p><p><br></p><h2>📕<strong> Playground and documentation</strong></h2><p>Start by duplicating <a href=\"https://www.figma.com/community/file/1000887127710719764\" rel=\"noreferrer noopener nofollow\" target=\"_blank\"><strong>this handy file</strong></a> in the community! Check out interactive lessons and documentation, and see how variables can transform the way you work in Figma.</p><p><br></p><h2>✅<strong> Features</strong></h2><ul><li><strong>Use variables to control nearly 50 layer properties</strong> like blurs, shadows, size, rotation, text, padding, and much more.</li><li><strong>Use combo variables to modify your existing variables with math.</strong> For example, set a variable to be the value of another variable divided by 2, or multiply two of your variables together.</li><li><strong>Change variable scope to work for you.</strong> Have a different set of variables for each page in a document, share variables across the whole document, or even use one set of variables for all your documents.</li><li><strong>Batch edit specific properties</strong>, like blur, shadow offset, and contrast, across different images or shadows without requiring the other properties to match.</li><li><strong>Realtime syncing for multiple editors.</strong> Add, modify, or delete a variable and your changes will automatically sync to all users.</li></ul><p><br></p><h2>🤔<strong> How to use</strong></h2><p>That’s really up to you! Variables and linked properties work together to do whatever you want. At the bare minimum, you create a variable in the Variables tab. You can then use that variable to link it to the same property across different layers. Or different properties on the same layer. Or any combination you can dream up. Go wild! For inspiration, check out the <a href=\"https://www.figma.com/community/file/1000887127710719764\" rel=\"noreferrer noopener nofollow\" target=\"_blank\"><strong>playground and documentation file</strong></a><strong>.</strong></p><p><br></p><h2>☕️ Support the plugin</h2><p>If you love the plugin and feel inclined to provide some small financial support to encourage the development of new features and bug fixes, that would be greatly appreciated. No pressure, of course!</p><p><a href=\"https://ko-fi.com/dnlrj\" rel=\"noreferrer noopener nofollow\" target=\"_blank\"><strong>Buy me a coffee</strong></a></p><h2><br></h2><h2><strong>🚧 Roadmap</strong></h2><ul><li>The option for layers with linked variables to be automatically updated when you rename a variable.</li><li>Variable value previews in the Properties tab</li><li>Much more!</li></ul><p><br></p><p>_</p>","id":"1000963812142874727","installCount":3800,"lastUpdateDate":"2021-08-30T06:28:21.650Z","likeCount":314,"name":"variables","publisherHandle":"dnlrj","publisherId":"466014","publisherName":"Dan Araujo","runCount":3318,"viewCount":14662},{"description":"<p>Plugin to sync copies from Google Spreadsheet to Figma.</p><p><br></p><h2>How it works?</h2><ol><li>Create a Google SpreadSheet with two columns. The first column is the copy id, the second column the copy value.</li><li>Publish the document to the web (File &gt; Publish to the web) and copy the url of the .tsv file.</li><li>In your Figma document, create text layers using the ids in the Google SpreadSheet as names.</li><li>Run <strong>marketgoo copies</strong> plugin and paste the .tsv url.</li><li>All content of the text layers with the same name as the ids in the Google SpreadSheet will be updated with the final copies.</li><li>After editing any copy in the Google Spreadsheet document, just run the plugin again to update the copies in Figma.</li><li>Running the plugin after selecting any layer, will update only the selected text layers (instead of the whole document).</li></ol><p><br></p><h2>Features</h2><ul><li>You can use dynamic variables with the notation <code>{{ varname }}</code> in your copies. The plugin will ask you for the final value.</li><li>You can use the HTML tag <code>&lt;br&gt;</code> to force a line break.</li><li>Any other HTML tag will be removed in Figma, but used to detect the ranges of all styles in the a text layer. For example: <code>Hello &lt;strong&gt;world&lt;/strong&gt;</code>.</li></ul>","id":"1001444625792698603","installCount":100,"lastUpdateDate":"2021-09-15T11:16:29.276Z","likeCount":8,"name":"marketgoo copies","publisherHandle":"oscarotero","publisherId":"946718836008847815","publisherName":"Oscar Otero","runCount":55,"viewCount":473},{"description":"<p>Press a button and “explode” (move and rotate) the frames currently in view.</p><p><br></p><p>Great for letting off steam on a hard design, getting a co-workers attention or just playing around!</p><p><br></p><p>Have fun with it!</p>","id":"1002305807367001638","installCount":4716,"lastUpdateDate":"2021-09-16T16:19:39.645Z","likeCount":58,"name":"Figsplosion","publisherHandle":"travisse","publisherId":"13552","publisherName":"Travisse Hansen","runCount":4904,"viewCount":5492},{"description":"<p>Simple pride flags and colors via gradients.</p><p><br></p><p>Show the pride in your designs. The filled-in shapes are fully resizable, rotatable, and editable, without distorting the gradients.</p><p><br></p><p>At the moment, the plugin contains these gradients:</p><p><br></p><ul><li>Pride flag</li><li>Trans flag</li><li>Subtle trans</li><li>Nonbinary flag</li><li>Subtle NB</li><li>Bisexual flag</li><li>Subtle bi</li><li>Pansexual flag</li><li>Asexual flag</li><li>Subtle ace</li><li>Lesbian flag</li><li>MLM flag</li></ul>","id":"1002324870709884461","installCount":454,"lastUpdateDate":"2021-09-07T00:20:12.289Z","likeCount":5,"name":"Pride Flags & Gradients","publisherHandle":"8ee3c9a7_94d1_4","publisherId":"2260937","publisherName":"Tadeas Jun","runCount":516,"viewCount":1639},{"description":"<p>Seek &amp; Destroy. Detach instances and unstyle layers in selection.</p><p><br></p><ul><li>Detaches all nested instances</li><li>Doesn't destroy components</li><li>Removes all styles from the layer</li></ul><p><br></p><p>Start fresh or archive.</p><p><br></p><p><a href=\"https://www.buymeacoffee.com/mkaralevich\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Buy me a coffee</a></p>","id":"1002696113544894116","installCount":1664,"lastUpdateDate":"2022-04-18T22:24:02.568Z","likeCount":58,"name":"Seek and Destroy","publisherHandle":"mkaralevich","publisherId":"425676","publisherName":"Maksim","runCount":1707,"viewCount":2413},{"description":"<p>FontScanner plugin to get all font families, weights and sizes and its quantities in current file. It allows you to select based on type or font size on current page or you get names of pages that use them. Serves as analysis tool for developers. Helps you find mistakes and forgotten or unused fonts.</p><p><br></p><p>First versions. Hit me up for improvement suggestions.</p>","id":"1002875535237160651","installCount":5108,"lastUpdateDate":"2021-12-27T08:49:53.050Z","likeCount":35,"name":"FontScanner","publisherHandle":"crishpeen","publisherId":"4002923","publisherName":"Honzik Kryspin","runCount":5985,"viewCount":6246},{"description":"<p>Turn your Figma design into a website without a single line of code.</p><p><br></p><p>The Figment process:</p><ol><li>Design website</li><li>Run Figment plugin</li><li>Publish website</li><li>Drink coffee</li></ol><p><br></p><p>When you run it, the Figment plugin will do a bunch of translations under the hood to convert the design over to a website, for a modestly-sized website this process can take up to 10 seconds - so please be patient!</p><p><br></p><p>Once it finishes, you will be asked whether this design is meant for Mobile or Desktop screens (don't worry, you can export both into the same website). Finally, after selecting a screen type, your website design will be hosted on our editor so that you can make some final changes to it, such as adding links, textfields, videos, etc.</p><p><br></p><p>Give it a try now and host your first website completely free!</p><p><br></p><p>Need support?</p><p>DM us on Twitter:</p><p><a href=\"https://twitter.com/useFigment\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">@useFigment</a></p><p><br></p><p>Built with ❤️ by <a href=\"https://twitter.com/nikita_builds\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">@nikita_builds</a> and <a href=\"https://twitter.com/tknndy\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">@tknndy</a></p>","id":"1003000718170427134","installCount":4405,"lastUpdateDate":"2022-03-03T21:49:58.542Z","likeCount":124,"name":"Figment.so - Figma to Website","publisherHandle":"nikitaj","publisherId":"895460146373241519","publisherName":"Nikita Jerschow","runCount":4440,"viewCount":7581},{"description":"<p>🔄✨ Create radial interfaces and patterns with rotated copies of elements.</p><p><br></p><p><strong>Copy &amp; Rotate</strong> harnesses the power of Figma components and creates instantiated&nbsp;copies can be modified after being created by the plugin.</p><p><br></p><p>In addition to changing the number of copies and radius of the rotation, <strong>individual copies can be skipped</strong> and the <strong>sweep angle</strong> can be adjusted.</p><p><br></p><p>⚠️ Caveats</p><ul><li>If you want to copy &amp; rotate multiple elements, group them first. Only one element must be selected.</li><li>It's not possible to rotate groups that contain component nodes. Remove the component or componentize the entire group first.</li><li>It's not possible to rotate elements that are <em>children</em> of components or instances. Select the parent instance or component element instead.</li></ul><p><br></p><p>❌ Node types that are <strong>not</strong> supported</p><ul><li>Document nodes</li><li>Page nodes</li><li>Slice nods</li></ul>","id":"1003651932772848456","installCount":8473,"lastUpdateDate":"2021-08-20T16:08:29.862Z","likeCount":238,"name":"Copy & Rotate","publisherHandle":"aw","publisherId":"3641231","publisherName":"Alex Widua","runCount":6236,"viewCount":9386},{"description":"<p>Insert image into your layer/frame with URL</p><p><br></p><p>From Victor:</p><p>Hi community, this is my first attempt to create plugin for Figma, feel free to add comment to give me feedback or feature suggestion. Here is the <a href=\"https://github.com/VictorChenLi/PopImg/issues\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">github issue list link</a> you can also checkout here to see what I'm going to develop next.</p>","id":"1004204435648317366","installCount":355,"lastUpdateDate":"2022-03-30T13:58:02.378Z","likeCount":5,"name":"PopImg","publisherHandle":"victorchen","publisherId":"921497036686281303","publisherName":"Victor Chen","runCount":370,"viewCount":948},{"description":"<h2><strong>No more front-end coding by integrating Figma with React/vue.js/webpack</strong></h2><p><br></p><p>Lasca is a new type of no-code platform designed for developers to automate front-end coding for not only static websites but also production applications, and build them dramatically faster.</p><p><br></p><p>No-code is generally considered to be skeptical and not developer-friendly because of its technical debt and high learning and switching cost. However,<strong> Lasca enables front-end automation in a completely developer-friendly way</strong> through the following approaches.</p><p><br></p><p><br></p><p><strong>How it works</strong></p><p><br></p><p><strong>1. Convert Figma designs including responsiveness to HTML &amp; CSS perfectly</strong></p><p><br></p><p>Lasca converts not only visual elements but also responsive web design using Figma’s constraints and auto layout precisely.</p><p><br></p><p><strong>2. Configure UI logics &amp; interaction with APIs</strong></p><p><br></p><p>Lasca allows you to configure UI logics (condition, loop, variable, event) and interaction with API. They are essential to web applications.</p><p><br></p><p><strong>3. With combination with your own coding, there is nothing you can’t build</strong></p><p><br></p><p>Converted code will be automatically inserted into your frontend code in the place of lasca tag ( &lt;lasca&gt;&lt;/lasca&gt; ) through your build process with webpack.</p><p><br></p><p>Lasca does not control entire our vue.js project. It is incrementally adoptable. You can choose to automate the front-end using the lasca tag or code it yourself in various ways.</p><p><br></p><p><br></p><p><strong>Get started</strong></p><p><br></p><p>You can test Lasca quickly using Get started guide <a href=\"https://doc.lasca.app/\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">here</a>.</p><p><br></p><p><br></p><p><strong>Resources</strong></p><p><br></p><p>You may find certain features do not export correctly. Please reach out to a list of limitations of Figma export <a href=\"https://doc.lasca.app/design/limitations.html\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">here</a>. Also, if you encounter any bugs, please let us know and we'll be able to fix it rapidly :) You can contact us from <a href=\"https://join.slack.com/t/lasca-community/shared_invite/zt-yak1v48g-Mnkip3BAVFYCMuRS6k_exA\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">here</a>.</p>","id":"1004251583775744964","installCount":610,"lastUpdateDate":"2021-12-02T13:59:28.106Z","likeCount":14,"name":"Lasca - No more frontend-coding","publisherHandle":"lasca","publisherId":"986837484483978085","publisherName":"Lasca","runCount":650,"viewCount":1193},{"description":"<p>Localiser gives you the ability to translate the text elements to another one by importing the translations from google sheets.&nbsp;</p><p><br></p><p>You can export all the text elements from current page to a csv file.&nbsp;</p><p>Use the spreadsheet link to import the spreadsheet data to your plugin, which then displays the available languages.&nbsp;(Languages added in the sheet will be picked up. Check the example of sheet below) </p><p>On selecting the language, the text elements will change to the new text provided in the sheet.&nbsp;</p><p><br></p><p>What your google sheet should contain:</p><ol><li>id's of the text elements of the figma page. (Column 1)</li><li>Current language text. (Column 2)</li><li>New language converted text. (Rest of the Columns)</li></ol><p><br></p><p>id | English | Hindi | Tamil</p><p>1:39 | All Subjects | सभी विषयों | அனைத்து பாடங்களும்</p><p>.</p><p>.</p><p>.... so on and so forth.</p>","id":"1004442318837288943","installCount":64,"lastUpdateDate":"2021-08-20T16:47:42.561Z","likeCount":0,"name":"Localiser","publisherHandle":"06860ae8_146f_4","publisherId":"1002842594418892794","publisherName":"Ankit Jain","runCount":46,"viewCount":183},{"description":"<p>A crisp set of icons designed by the Modulz team.</p>","id":"1004461092590904310","installCount":2771,"lastUpdateDate":"2021-08-03T18:52:05.790Z","likeCount":36,"name":"Radix Icons","publisherHandle":"tkmadeit","publisherId":"156890","publisherName":"Tekeste Kidanu","runCount":2125,"viewCount":3634},{"description":"<p>Find &amp; Select. Select layers by name.</p><p><br></p><ul><li>Works in selection only</li><li>Case sensitive</li><li>Takes regex</li></ul><p><br></p><p>Select specific components or find unnamed Frame layers in selection.</p>","id":"1004902898211100754","installCount":763,"lastUpdateDate":"2021-08-06T22:46:45.688Z","likeCount":19,"name":"Find and Select","publisherHandle":"mkaralevich","publisherId":"425676","publisherName":"Maksim","runCount":812,"viewCount":1816},{"description":"<p><strong>Create beautiful visual sitemaps in seconds.</strong></p><p><br></p><p>With easy-to-use text editor to design custom tree diagrams and sitemaps straight into FigJam.</p><p><br></p><p>Looking for extra design-fanciness? <code>Copy/Paste</code> a visual sitemap into Figma and gain access to the fullest level of customization.</p><p><br></p><p>—————————————————————————</p><p><br></p><p><strong>HOW TO</strong></p><ul><li>Open the plugin and start typing on the editor. You can copy/paste an existing list or start from scratch.</li><li>Each list element will generate a separate node on the visual sitemap.</li><li>To connect and create a hierarchy among the nodes, use <code>Tab ↹</code> key and indent any list element.&nbsp;</li></ul><p><br></p><p>—————————————————————————</p><p><br></p><p><strong>Questions or Feature Requests?</strong></p><p>Feel free to <a href=\"https://twitter.com/mirkosantangelo\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">connect with me here.</a></p>","id":"1004954729018393690","installCount":21842,"lastUpdateDate":"2021-08-20T00:25:01.296Z","likeCount":294,"name":"Visual Sitemap","publisherHandle":"mirkosantangelo","publisherId":"206939","publisherName":"Mirko Santangelo","runCount":19194,"viewCount":24676},{"description":"<p>Automate your Figma tasks in one click.</p><p><br></p><p><strong>Supercharge Figma</strong></p><p>Build custom drag and drop automations that do time-sensitive Figma tasks for you in one click.</p><p><br></p><p><strong>Powerful Actions</strong></p><p>Choose from over 100 actions that expose the power of the Figma Plugin API at your fingertips.</p><p><br></p><p><strong>Get Started</strong></p><p><a href=\"https://automator.design\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">automator.design</a></p><p><a href=\"https://automator.community\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">automator.community</a></p><p><a href=\"https://blog.withdiagram.com/p/welcome-to-automator\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Read the FAQ</a></p><p><a href=\"https://discord.gg/7KEhhD8Bkx\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Join the Discord</a></p>","id":"1005114571859948695","installCount":20085,"lastUpdateDate":"2022-07-20T17:15:40.996Z","likeCount":1119,"name":"Automator","publisherHandle":"withdiagram","publisherId":"1004440237929203297","publisherName":"Diagram","runCount":16423,"viewCount":53050},{"description":"<p>A simple utility to convert paragraphs or text layers into sticky notes. This is great for incorporating conversations, notes, or written resources outside of figjam into figjam more easily.</p><p><br></p><p>This plugin can:</p><ul><li>Convert paragraphs of text into sticky notes line by line.</li><li>Convert any selected text layers into sticky notes.</li></ul><p><br></p><p>This code is open source and available on<a href=\"https://github.com/destefanis/figma-table-of-contents\" rel=\"noreferrer noopener nofollow\" target=\"_blank\"> Github</a>.</p>","id":"1005240989771352255","installCount":10887,"lastUpdateDate":"2021-09-01T15:34:23.547Z","likeCount":129,"name":"Create Sticky From Text","publisherHandle":"daniel","publisherId":"859657","publisherName":"Daniel Destefanis","runCount":8595,"viewCount":14995},{"description":"<p>Center selected objects to view without changing zoom level.</p><p><br></p><p>To assign keyboard shortcuts, you will need BetterTouchTool (AutoHotKey on Windows) installed.</p>","id":"1005290003683115208","installCount":136,"lastUpdateDate":"2021-08-06T02:53:15.958Z","likeCount":8,"name":"Center Selection","publisherHandle":"MrBiscuit","publisherId":"1241","publisherName":"Mr.Biscuit","runCount":101,"viewCount":879},{"description":"<p>Extract texts from your designs in a structured format as yaml or json. </p><p><br></p><p>This simple plugin is a complementary tool of <a href=\"https://pub.dev/packages/flutter_translation_sheet\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">flutter translator sheet</a>.</p><p><br></p><h2>Usage:</h2><p><br></p><p>Just select any amount of elements on your canvas (Layers, Pages, Components), and select <strong>Plugins &gt; fts extractor &gt;</strong></p><p>And choose one of the menu options.</p><p><br></p><p>It will generate a structured tree from the Strings found in the selection, based on the document's nodes hierarchy, so you can have a \"cleaner\" output if you name your layers properly.</p><p><br></p><p>The layers represents the <em>field names</em> in the yaml / json output. They are sanitized for illegal characters, spaces, and normalized in <em>snake_case</em> style.</p><p><br></p><p>Here's an example of the type of output you can get:</p><p><br></p><pre class=\"ql-syntax\" spellcheck=\"false\">payment_details:\n&nbsp;card_details: Card Details\n&nbsp;mastercard:\n&nbsp;&nbsp;eden_hazard: Eden Hazard\n&nbsp;&nbsp;k_4754: '4754'\n&nbsp;&nbsp;k_3243: '3243'\n&nbsp;&nbsp;k_25000_aed: 25000 AED\n&nbsp;payment_details: ' Payment details'\n&nbsp;holder_name: Holder name\n&nbsp;card_number: Card number\n&nbsp;coupon_promo_code: coupon/ promo code\n&nbsp;m_m_yy: MM/YY\n&nbsp;cvv: CVV\n&nbsp;button_s_primary_default:\n&nbsp;&nbsp;confirm: Confirm\n</pre><p><br></p><p><br></p><p>The idea is that you modify this file as needed to use as <em>master template</em> in <a href=\"https://pub.dev/packages/flutter_translation_sheet\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">fts cli</a>.</p><p><br></p><p>So, power-up your Flutter development flow on internationalization, using <strong>flutter translator sheet</strong>, <strong>Figma</strong> and the <strong>fts extractor</strong> plugin.</p>","id":"1005324910626168012","installCount":301,"lastUpdateDate":"2021-08-06T04:40:33.411Z","likeCount":11,"name":"fts extractor","publisherHandle":"roipeker","publisherId":"998946","publisherName":"Rodrigo López","runCount":191,"viewCount":807},{"description":"<p>Quickly add superscript - even for fonts that don't support it.</p><p><br></p><p>Currently, Figma only supports superscript if the font itself has superscript character support. This means even standard fonts like Arial and Helvetica will not support superscript.</p><p><br></p><p>If you're doing work in the legal or medical sector, superscript is necessary for compliance. This plugin aims to make adding and removing references simple.</p><p><br></p><h2><br></h2><h2>How it works</h2><p><br></p><p>This plugin works by finding characters such as:</p><p><br></p><p>0 1 2 3 4 5 6 7 8 9 * † ‡ § ± | # ≤ ≥ µ © v V</p><p><br></p><p>And replacing them with a custom font that forces superscript (credit to @Tony_Allsopp):</p><p><br></p><p>⁰ ¹ ² ³ ⁴ ⁵ ⁶ ⁷ ⁸ ⁹ * † ‡ § ± | # ≤ ≥ µ © ▾ ▼</p><p><br></p><p><br></p><h2><strong>Installation</strong></h2><p><br></p><ol><li>Install plugin</li><li>Download and install this custom font to your computer - <a href=\"https://drive.google.com/file/d/1q-akVx9QwJP6JfSzc4jwF9XQb3yBmDE6/view?usp=sharing\" rel=\"noreferrer noopener nofollow\" target=\"_blank\"><strong>download here</strong></a></li></ol><p><br></p><p><br></p><h2><strong>Usage</strong></h2><p><br></p><p><strong>Adding superscript</strong></p><p><br></p><ol><li>Highlight text that needs superscript</li><li>Go to <em>Plugins &gt; Superscript &gt; Add superscript</em></li></ol><p><br></p><p><strong>Removing superscript</strong></p><p><br></p><ol><li>Highlight text that you want to remove superscript from</li><li>Go to Plugins &gt; Superscript &gt; Remove superscript</li></ol><p><br></p><p><br></p><h2><strong>Credits</strong></h2><p><br></p><p>@Tom_Lowry for the original plugin code</p><p>@Tony_Allsopp for the custom font</p>","id":"1005407136869907685","installCount":4852,"lastUpdateDate":"2021-08-06T09:31:25.734Z","likeCount":27,"name":"Superscript","publisherHandle":"dannycare","publisherId":"1685604","publisherName":"Danny","runCount":4931,"viewCount":10646},{"description":"<p>Instantly add all your selection's styles to your local file. Perfect for creating initial Design Systems from nothing. Also good for updating your Design System file when you add in new assets as it ignores any styles that already exists. Just hit <code>CMD (CTRL) + A</code> and run the plugin.</p><p><br></p><p>To get the best results, use the classic Figma <code>slash</code> naming convention (e.g. <code>iOS/Icon/S</code>) and you'll get the folders for free.</p>","id":"1005464966294664447","installCount":1649,"lastUpdateDate":"2021-11-13T13:17:30.476Z","likeCount":32,"name":"Instant››styler","publisherHandle":"_kejk","publisherId":"3878431","publisherName":"Karl Koch","runCount":1668,"viewCount":3313},{"description":"<p>Convert HTML to Figma</p><p>demo plugin for https://github.com/sergcen/html-to-figma</p>","id":"1005496056687344906","installCount":3546,"lastUpdateDate":"2021-08-06T15:26:45.349Z","likeCount":14,"name":"html-to-figma DEV-plugin","publisherHandle":"ssav","publisherId":"4219706","publisherName":"Sergei","runCount":4345,"viewCount":5472},{"description":"<p>With this plugin you can export your creations for <a href=\"https://avatars.dicebear.com\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">DiceBear Avatars</a> in no time.</p><p><br></p><p>1. Create components for the different parts of your avatar according to the pattern \"group/name\".</p><p>2. Place at least one component on a frame with identical height and width.</p><p>3. Select the frame, open the plugin, enter your avatar style information and export your work.</p><p><br></p><p>Further documentation:</p><p><a href=\"https://avatars.dicebear.com\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">avatars.dicebear.com</a></p>","id":"1005765655729342787","installCount":181,"lastUpdateDate":"2021-10-17T16:29:56.174Z","likeCount":1,"name":"DiceBear Exporter","publisherHandle":"floriankoerner","publisherId":"1505033","publisherName":"Florian Körner","runCount":158,"viewCount":877},{"description":"<p><strong>Figma 2 Notion</strong> is useful plugin for export and sync images to Notion documents.</p><p><br></p><p><strong>Features</strong></p><ul><li><code>Synced Images</code> - You just run again plugin when you change your Figma document. Image in Notion will&nbsp;be refresh automatically</li><li><code>Responsive</code> - Perfect fit for all view. Auto resize for all resolutions</li><li><code>Embed</code> - Style options for you use case. Naked or Browser window</li></ul>","id":"1006193850477266308","installCount":612,"lastUpdateDate":"2021-12-05T22:27:41.386Z","likeCount":21,"name":"Figma 2 Notion","publisherHandle":"enesdabanlioglu","publisherId":"3532710","publisherName":"Ahmet Enes DABANLIOGLU","runCount":699,"viewCount":2213},{"description":"<p>Plugin for setting informations about actions. Helpful if you want to describe actions for development team.</p>","id":"1006230883363292559","installCount":56,"lastUpdateDate":"2021-08-08T16:21:42.689Z","likeCount":1,"name":"devflow","publisherHandle":"rogwild","publisherId":"1495999","publisherName":"rogwild","runCount":30,"viewCount":202},{"description":"<p>Export your Figma designs directly into Noodl</p>","id":"1006908263044642341","installCount":419,"lastUpdateDate":"2021-08-10T14:11:31.191Z","likeCount":15,"name":"Noodl","publisherHandle":"8385a67e_bb77_4","publisherId":"854426334707251177","publisherName":"Michael Cartner","runCount":640,"viewCount":986},{"description":"<p><strong>1. </strong>Auto variant creation <strong>2. </strong>Clone components <strong>3.</strong> Copy and paste prototype 👉 Save ton of time in your design workflows like variant making, design system, prototype, animations etc.</p><p>Welcome to Time Saving Experience in Figma.</p><h2><a href=\"http://www.figma.com/community/file/1017430250998311413?fuid=1005464423070931253\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Explore Playground &amp; Help</a></h2><p>——————————</p><p>🚀 <strong>Update (June 02, 2022)</strong></p><ul><li>Now new users can take a trial of this plugin without any signups.</li><li>Existing unpaid users also will be able to try this plugin once again.</li><li><strong>If you have already paid before June 02, 2022 </strong>then please click on the buy now button and enter the license key received in email by gumroad to use the plugin with lifetime access.</li><li>Licence key will be automatically bound with your current Figma account from which you will apply the licence key.</li><li>Plugin will be opened faster from now on.</li><li>Other performance improvements to make this plugin more reliable.</li><li>Please send a feature request to&nbsp;<a href=\"mailto:figterate@gmail.com\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">figterate@gmail.com</a></li></ul><p><br></p><p><strong>Features brief</strong></p><p><strong>1.Variations</strong></p><ul><li>Automatically create many variations with layer on &amp; off functionality.</li><li>Layer names will be updated automatically to show them as property in variant, so no more manual work now. (Optional)</li><li>These features support multiple component operations at same time.</li></ul><p><br></p><p>1.1 Unique Combination</p><p>This feature will create variations for all possible unique combinations from all selected layers of components.</p><p><br></p><p>1.2 Hide one by one &amp; show others</p><p>This feature will create variations by hiding one by one layer &amp; showing other layers from all selected layers of components.</p><p><br></p><p>1.3 Show one by one &amp; hide others</p><p>This feature will create variations by showing one by one layer &amp; hiding other layers from all selected layers of components.</p><p><br></p><p><em>Use Cases</em></p><ul><li>When you want to create many variations for many UX components like buttons, chips, cards, text fields, tooltip, navigation drawer, app bar etc.</li><li>When you want to make variant out of all these created variations of components within no time.</li></ul><p><br></p><p><em>Prerequisites</em></p><ul><li>This feature can be used with components only.</li><li>Selected layer name must be unique per component if you turn on switch \"Update layer name for variant property\"</li></ul><p><br></p><p><strong>2.Clone</strong></p><ul><li>Automatically create components with incremental changes in any property for selected layers in components.</li><li>This feature can make variations from any component with your desired changes in properties like X Position, Y Position, Width, Height, Rotation, Radius, Stroke, Opacity etc.</li><li>Layer names will be updated automatically to show them as property, so no more manual work now. (Optional)</li><li>You can ignore current value of property for selected layers and start with 0(Zero) to create components. (Optional)</li><li>These features support multiple component operations at same time.</li></ul><p><br></p><p><em>Use Cases</em></p><ul><li>When you want to turn hand of any character at different angles.</li><li>When you want to move any object with specific distances in incremental manner.</li><li>Similarly, when you want to change different properties in incremental way for any selected layer.</li></ul><p><br></p><p><em>Prerequisites</em></p><ul><li>This feature can be used with components only.</li><li>Selected layer name should be unique per component if you turn on switch \"Update layer name for variant property\"</li></ul><p><br></p><p><em>Example</em></p><p>Step 1:</p><p>Draw a rectangle of 100 width &amp; 100 height &amp; make it a component.</p><p>Step 2:</p><p>Now in \"Time Saver\" plugin set following values in clone section.</p><ul><li>Iteration:&nbsp;05, X = 5+, Y = 5+, Width = 5+, Height = 5+</li><li>Turn off 'Ignore current value &amp; start with 0'</li><li>Turn off \"Update layers name for clone property\" (Optional)</li></ul><p>Now press create button and it will create 5 components with updated properties, you can verify now.</p><p><br></p><p><em>Supported input values &amp; its results</em></p><p>Following values are for example only, you can enter any desired value in any property in clone.</p><p>For iteration value = 5</p><ul><li>2+&nbsp;will clone objects with updated value like&nbsp;2, 4, 6, 8, 10</li><li>2-&nbsp;will clone objects with updated value like&nbsp;2, 0, -2, -4, -6</li><li>2*&nbsp;will clone objects with updated value like&nbsp;2, 4, 8, 16, 32</li><li>2&nbsp;will clone objects with same value as&nbsp;2, 2, 2, 2, 2</li></ul><p><br></p><p><em>Notes</em></p><ul><li>(minus) value supported only in X &amp; Y Positions.</li><li>Figma supports opacity between 0 to 100 %. So, if selected object has 100 &amp; opacity then + (plus) &amp; * (multiply) operation will throw error.</li></ul><p><br></p><p><strong>3.Prototype</strong></p><ul><li>Copy and paste prototype for one or many objects like Frames, Components, Instances, Variants in short wherever Figma supports prototype interactions.</li><li>These features support copy &amp; pasting prototype for one OR many interactions.</li></ul><p><br></p><p>3.1 Copy</p><p>Copy prototype from any object whether it is</p><ul><li>Single object with single interaction or multiple interaction</li><li>Multiple objects with single interaction or multiple interactions.</li></ul><p><br></p><p>3.2 Paste</p><p>3.2.1 Paste as copied on one or many</p><ul><li>You can paste copied prototype on one or many objects.</li><li><em>Example</em>: When you have copied prototype from 3 object then you can paste it on same number of object or on multiply number of objects like 3 or 6 or 9.</li><li>This will behave as multi paste feature but in multiply manner.</li></ul><p>3.2.2 Paste &amp; connect all layers</p><ul><li>When you have copied interaction from one object then it can be pasted on one or many objects.</li><li>And you can connect selected objects with each other in selected direction.</li><li>You can also connect last object with first object. (Optional)</li></ul><p><br></p><p><em>Use Cases</em></p><ul><li>When you want to animate anything with repetitive interaction for multiple objects whether it is in variant or not.</li><li>Let's say you have added state interaction between 5 different buttons and now you want to apply this to all variations of buttons in design system.</li></ul><p><br></p><p><em>Prerequisites</em></p><ul><li>Minimum one prototype or interaction should be added on selected object to copy it.</li></ul><p><br></p><p>——————————</p><h2><strong>Trial</strong></h2><p>For trial, you will get <strong>50</strong> attempts to try all plugin features.</p><p>——————————</p><h2><strong>Pricing</strong></h2><p>🎉 No Subscriptions</p><p>Pay once <strong>$50</strong> and get lifetime access with free updates.</p><p>——————————</p><h2><strong>License</strong></h2><p>You need to buy licence to use plugin. After installing \"Time Saver\" plugin click on \"buy now\" button and enter licence key received into email to activate it.</p><p>——————————</p><h2><strong>About us</strong></h2><p>We build products to iterate faster in Figma &amp; Figjam.</p><p>As passionate team at <strong>Figterate</strong> we are committed to bring new innovations for design &amp; UX workflow to save time.</p><p>Happy designing.</p><p>——————————</p><h2><strong>Support</strong></h2><p>Please contact us anytime on following channels for support, feedback, feature request or if something is broken and you want to share with us.</p><p>Email - <a href=\"mailto:figterate@gmail.com\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">figterate@gmail.com</a></p><p>Twitter - <a href=\"https://twitter.com/figterate\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">@figterate</a></p><p>#figmatimesaver</p>","id":"1006929924118773289","installCount":1461,"lastUpdateDate":"2022-06-02T08:03:19.804Z","likeCount":47,"name":"Time Saver","publisherHandle":"figterate","publisherId":"1005464423133383269","publisherName":"Figterate","runCount":1151,"viewCount":4671},{"description":"<p>This simple plugin allows you to get data from Spotify onto your canvas.&nbsp;</p><p><br></p><h2><strong>How to use</strong></h2><ol><li><strong>Call a Spotify API&nbsp;</strong>endpoint with desired parameters. You can make it right in your browser via&nbsp;<a href=\"https://developer.spotify.com/console/\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">Spotify Developer Console</a>.</li><li><strong>Copy the response</strong>&nbsp;(make sure it contains an array of playlists, albums, tracks, artists or categories) and paste it into the plugin.</li><li><strong>Press the button</strong>&nbsp;and wait for a little. Getting covers takes some time. Done!</li></ol><p><br></p><h2><strong>Example</strong></h2><ol><li>Let's pretend your project needs some playlists. You go to the&nbsp;<a href=\"https://developer.spotify.com/console/get-featured-playlists\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">Featured Playlists endpoint</a>&nbsp;and fill in the needed options.</li><li>Then you have to get a token. Spotify will ask you to authorize. Simply, just press green buttons, and it's done.</li><li>Press \"Try it\", then select and copy the API response from the right side.</li><li>Now open the plugin and just paste it. Press \"Get data\" and there you go!</li></ol><p><br></p><h2>Good to know</h2><p>If you close the plugin while it's working, it will stop without filling in the remaining data. When the job is done, the plugin will close automatically.</p><p><br></p><p>This plugin was designed to work with arrays of data (several albums, playlist tracks), so it may behave unpredictably with some endpoints like \"Get an Album\".</p><p><br></p><h2>Roadmap</h2><p><em>This plugin was created for specific needs and its development is dependent on the demand.&nbsp;</em></p><p>Please, suggest the needed features. I guess the next steps could be:</p><ul><li><s>Going to GitHub as an open-source project</s> ✔</li><li>Expanding the list of supported endpoints</li><li>Way to customize receiving data</li><li>Way to call endpoints right from the plugin</li></ul><h2><br></h2><p>If you're interested in this plugin and want to make it better (features, refactoring), contact me.</p><p><br></p><h2>Problem? Idea? Kind words?</h2><p>You can contact me via e-mail at&nbsp;<a href=\"mailto:nick.denq@gmail.com?subject=Spotify%20to%20Figma\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">nick.denq@gmail.com</a>.</p><p>But the most rapid way is&nbsp;<a href=\"http://t.me/qurle\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">Telegram</a>.</p><p>This project is open sourced <a href=\"https://github.com/qurle/spotify-to-figma\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">on Github</a>.</p><p><br></p><p>Don't hesitate, I'd like to know your thoughts on this plugin (or we can talk about anything else).</p><p><br></p><h2>&lt;3</h2>","id":"1006955584406522418","installCount":853,"lastUpdateDate":"2021-08-23T12:19:13.996Z","likeCount":21,"name":"Spotify to Figma","publisherHandle":"qurle","publisherId":"209417","publisherName":"Nick Qurle","runCount":899,"viewCount":2343},{"description":"<p>When working with typography in Figma you often have to manually move text layers and align them to the grid or ruler. This happens because of glyph sidebearings which create huge “white holes”. It gets even worse if you have two text layers of different sizes. In this case the “holes” become much more visible.</p><p><br></p><p>Our plugin compensates for the sidebearings and works with layers in two ways. <em>Strict Alignment</em> moves the text layer to the first visible pixel. It can be useful when you work with a group of single-line text layers. <em>Optically Correct Alignment</em> moves the layer to the sidebearing value of a straight glyph stem (Latin <em>n/u</em>, Cyrillic <em>н</em>). You can use this option for multi-line layers, especially when the text is set in small sizes.</p>","id":"1007645801320386272","installCount":193,"lastUpdateDate":"2022-01-14T10:14:11.698Z","likeCount":13,"name":"Text Visual Alignment","publisherHandle":"devexperts","publisherId":"877304885130261355","publisherName":"Devexperts","runCount":245,"viewCount":769},{"description":"<p>Copy-Paste Layer Fills and Image Filters with Ease</p><h2><br></h2><h2><strong>How To Use:</strong></h2><ol><li>Run <code>Layer Fills &gt; Copy</code> on the layer you wish to copy from.</li><li>Select the layers you wish to paste to, then run <code>Layer Fills &gt; Paste ...</code></li></ol>","id":"1008046255636575048","installCount":610,"lastUpdateDate":"2021-08-16T06:06:29.115Z","likeCount":31,"name":"Layer Fills","publisherHandle":"MrBiscuit","publisherId":"1241","publisherName":"Mr.Biscuit","runCount":363,"viewCount":1674},{"description":"<p>A simple Figma plugin that generates a boilerplate file structure and sharp looking thumbnail.</p><p><br></p><p>--</p><p><br></p><p>Fork it on Github!</p><p><a href=\"https://github.com/yungbeto/Lever-A-Figma-File-Starter\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">https://github.com/yungbeto/Lever-A-Figma-File-Starter</a></p>","id":"1008125233177309016","installCount":132,"lastUpdateDate":"2021-08-13T21:31:33.332Z","likeCount":8,"name":"Lever - A Figma File Starter","publisherHandle":"roby","publisherId":"22583","publisherName":"Roby","runCount":105,"viewCount":629},{"description":"<p>Allows you to take notes in a single window and stores the text on the canvas for everyone to see.</p><p><br></p><ol><li>Select <em>any</em> text frame. (does <em>not</em> create frames.)</li><li>Edit text in plugin window (plain text and single level unordered lists only)</li><li>Keeps notes visible while you present &amp; drag canvas around</li></ol>","id":"1008205442719890274","installCount":141,"lastUpdateDate":"2021-08-24T02:26:29.866Z","likeCount":2,"name":"Meeting Notes","publisherHandle":"tomger","publisherId":"32520","publisherName":"Tom","runCount":169,"viewCount":825},{"description":"<p>Want to generate Color Palettes from Images? </p><p><br></p><p>This plugin helps you do so, you no longer need to have your image inside your Figma file, you can just select an image from your computer and generate a color palette</p><p><br></p><p>What are some awesome features of this plugin ?</p><p><br></p><p>(1) Palette from Image does not send your images to a server - it is all generated inside your application</p><p><br></p><p>(2) Palette from Image has offline support -  you don't need to be online to generate color palettes</p><p><br></p><p>(3) Palette from Image gives you access to the color code of each block of color in the palette ( by simply tapping on it)</p><p><br></p><p>Want to know more ? Here's a link to the web version with more features ( we plan on adding these features to this plugin with time )  </p><p><br></p><p>Link below 👇</p><p><a href=\"https://www.colorpalettehub.com/color-palette-generator\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">Color Palette Generator | Color Palette Hub</a></p><p><br></p><p>FAQ 💭</p><p><br></p><p>(1) Is Palette From Image secure ?</p><p><br></p><p>Yes it is secure -  we don't send your images to a server to process them, the plugin can even work offline - all the color extraction and selection happens within the web environment given to me by Figma</p><p><br></p><p>(2) Can I use this Palette from Image offline ?</p><p><br></p><p>Yes you can use the plugin offline</p><p><br></p><p>(3) Can I Export Palette to Image ?</p><p><br></p><p>No, you can't for now, but we have a web version that allows that here's a link : <a href=\"https://www.colorpalettehub.com/color-palette-generator\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">Color Palette Generator | Color Palette Hub</a></p>","id":"1008382434333520774","installCount":2496,"lastUpdateDate":"2021-08-15T16:10:55.242Z","likeCount":4,"name":"Palette From Image","publisherHandle":"2238d8eb_9a1c_4","publisherId":"2859283","publisherName":"Amena Clifford","runCount":1817,"viewCount":2172},{"description":"<p>First Chinese Figma workshop plugin that teach you how to use Figma <strong><em>inside Figma!</em></strong></p><p>visit: <a href=\"https://designtips.today/\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">https://designtips.today/</a></p><p><br></p><h2><strong>首創在 Figma 裡面學習 Figma 的中文教學套件</strong></h2><p>不需要離開 Figma，就能開啟學習的大門 🖼designtips.today 裡會將中文化的第一手學習資源都端上來給你。系統化的文字搭配清楚的圖片敘述，讓學習 Figma 再也不徬徨!</p><h2><br></h2><h2>這座圖書館，任你自由探索</h2><p>Figma 熱鍵技巧、設計系統建立、Prototyping 練習...我們將會陸續上架不同面向的課程，讓你想學什麼，就學什麼✌️</p><p><br></p><h2>From zero to hero，精熟工具、套件、到實作概念</h2><p>一步步從基礎開始建立觀念，慢慢介紹套件與流程上的眉角，最終讓你茁壯到能輕鬆解決各種需求! 🚀</p><p><br></p><h2>What is designtips.today?</h2><p>這個知識庫不僅僅是個套件，更是培養你建立思考問題的習慣與面對需求時的解決方法，希望在它的幫助下，你可以成為更獨當一面的讚讚設計師 🦄</p>","id":"1008725692377636781","installCount":1154,"lastUpdateDate":"2021-08-28T17:21:09.453Z","likeCount":80,"name":"Designtips.today","publisherHandle":"lichin","publisherId":"459","publisherName":"Lichin","runCount":930,"viewCount":3756},{"description":"<p>Organize your canvas to start at x=0 and y=0</p>","id":"1008795501746481085","installCount":96,"lastUpdateDate":"2021-08-24T03:23:52.518Z","likeCount":9,"name":"Zero Point","publisherHandle":"loreina","publisherId":"43504","publisherName":"Loreina Chew","runCount":66,"viewCount":289},{"description":"<p>Fly through your Figma or FigJam file with smooth animations, helpful for presentations and bookmarking views</p><p><br></p><p><strong>Adding views</strong></p><ul><li>Add views from your current location on the page</li><li>Add views connected to the elements on the page</li><li>You can add multiple connected views at once</li><li>You can also add multiple elements in one connected view as a group</li></ul><p><br></p><p><strong>Updating views</strong></p><ul><li>Easily update, sort and delete views</li><li>Double click to rename</li><li>Auto deletes views connected to elements when they are deleted from the page</li></ul><p><br></p><p><strong>Presentation</strong></p><ul><li>Click on your views to animate to the corresponding location and zoom level</li><li>Navigate using the arrow buttons or keyboard keys</li><li>Toggle between regular and compact mode</li><li>Share your screen with your teammates or ask them to observe you in your file to follow your presentation</li></ul><p><br></p><p><strong>Demos</strong></p><p>Basics:</p><p><a href=\"https://twitter.com/eminsinani/status/1467100163512668161\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://twitter.com/eminsinani/status/1467100163512668161</a></p><p><br></p><p>Group views + Insert:</p><p><a href=\"https://twitter.com/eminsinani/status/1473306239010545666\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://twitter.com/eminsinani/status/1473306239010545666</a></p>","id":"1008819354278038466","installCount":5929,"lastUpdateDate":"2022-05-15T09:22:44.718Z","likeCount":168,"name":"FlyOver","publisherHandle":"eminsinani","publisherId":"649","publisherName":"Emin Sinani","runCount":5074,"viewCount":10265},{"description":"<p>A simple plugin to flip any selected layers size. not a rotation.</p><p><br></p><p><strong>ProTip</strong> : Set a custom keyboard shortcut to lauch the plugin and speed up your transposition process</p><h2><br></h2><h2><strong>Object handled</strong></h2><ul><li>RECTANGLE</li><li>ELLIPSE</li><li>POLYGON</li><li>TEXT</li><li>SHAPE_WITH_TEXT</li><li>GROUP</li><li>FRAME</li><li>COMPONENT/ INSTANCE</li></ul><p><br></p><h2><strong>Roadmap</strong></h2><ul><li><strong>transpose each selected objects</strong></li><li><strong>figjam support</strong></li><li>pack and transpose a selection of object or text</li><li>add plugin parameters</li></ul><p><br></p>","id":"1009022712992810988","installCount":143,"lastUpdateDate":"2022-01-27T02:13:25.233Z","likeCount":11,"name":"Transpose","publisherHandle":"Steven","publisherId":"2420089","publisherName":"Steven H-A","runCount":143,"viewCount":530},{"description":"<p>Crie templates das suas features e rapidamente mude para o tema desejado.</p><p><br></p><ol><li>Crie os componentes com propriedade específicas de estilo/brand.</li><li>Selecione os frames desejados e inicie o plugin.</li><li>Escolha a propriedade desejada e alterne os valores chave.</li><li>Feito! Você terá a replica dos seus designs com um tema distinto ✌️</li></ol>","id":"1009179738712029232","installCount":87,"lastUpdateDate":"2021-08-16T19:23:21.718Z","likeCount":0,"name":"Theme Swap","publisherHandle":"isabelasilveira","publisherId":"261679","publisherName":"Isabela Silveira","runCount":103,"viewCount":674},{"description":"<p>Programmatically import Roblox Studio theme colours to your project as Colour Styles.</p><p><br></p><p>This plugin is by no means optimised or well-written, so expect some delay while colours are imported, and perhaps the occasional bug (Figma plugins are hard! :/)</p>","id":"1009209611304577085","installCount":112,"lastUpdateDate":"2021-08-18T09:10:41.526Z","likeCount":4,"name":"Import Roblox Studio Themes","publisherHandle":"csqrl","publisherId":"3223263","publisherName":"csqrl","runCount":67,"viewCount":373},{"description":"<p>Randomize your grid! This plugin visually reorders your layers.</p><p><br></p><h2>How to use</h2><p><strong>Just select some layers</strong>&nbsp;<strong>and use it&nbsp;</strong>via Quick Actions or Plugin menu. If you don't like the result, press Cmd/Ctrl+Alt+P a few times.</p><p><br></p><p><em>If you select only one group, the plugin will shuffle its contents.</em></p><p><br></p><h2><strong>How it works</strong></h2><p>The plugin will store layers' positions, mix them and reassign to selected layers. Shuffle is perfect for grid-aligned items. However, it works with everything.</p><p><br></p><h2><strong>Roadmap</strong></h2><p>Shuffle is simple, fast and non-disruptive. It just does its work. If you still have any ideas on how to make it better, leave a comment or contact me.</p><p><br></p><h2><strong>Problem? Idea? Kind words?</strong></h2><p>You can contact me via e-mail at&nbsp;<a href=\"mailto:nick.denq@gmail.com?subject=Spotify%20to%20Figma\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">nick.denq@gmail.com</a>.</p><p>But the most rapid way is&nbsp;<a href=\"http://t.me/qurle\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Telegram</a>.</p><p>This project is open sourced <a href=\"https://github.com/qurle/shuffle\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">on Github</a>.</p><p><br></p><p>Don't hesitate, I'd like to know your thoughts on this plugin (or we can talk about anything else).</p><p><br></p><h2><strong>&lt;3</strong></h2>","id":"1009251283244986435","installCount":531,"lastUpdateDate":"2021-08-17T02:30:29.043Z","likeCount":12,"name":"Shuffle","publisherHandle":"qurle","publisherId":"209417","publisherName":"Nick Qurle","runCount":501,"viewCount":1519},{"description":"<p>Generate icon components from an Icomoon project.</p><p><br></p><p><strong>Tutorial</strong></p><p><a href=\"https://youtu.be/H4QF4VqX_Lg\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">https://youtu.be/H4QF4VqX_Lg</a></p><p><br></p><p><strong>Import Icomoon Icons as Components</strong></p><p>Before you begin, the .ttf font exported with your Icomoon project must first be installed as a system font.</p><p><br></p><p>All you will need is selection.json (exported with your Icomoon project). Run the plugin, import selection.json, then click Build Components to build out all components for each icon in the set.</p><p><br></p><p>As icons are added to your Icomoon project, rerun the plugin with selection.json and it will add only new icons it finds. You will need to reinstall the .ttf font when updates are made to your font.</p><p><br></p><p><strong>Notes on Installing Icomoon’s Exported .ttf Font</strong></p><p>Because the components use the text glyph of the font, you will need the .ttf component installed as a system font as well as any other Figma user who will be using the components, e.g. from a team library.</p><p><br></p><p>The Figma desktop app will need to be restarted in between the installation or updating of system fonts.</p>","id":"1009264747545596999","installCount":2110,"lastUpdateDate":"2021-10-19T12:09:34.970Z","likeCount":9,"name":"Icomoon to Figma Components","publisherHandle":"317005","publisherId":"317005","publisherName":"Kurt Emch","runCount":1996,"viewCount":4385},{"description":"<p>Easy access to specified frames and components.</p>","id":"1009330872280993883","installCount":440,"lastUpdateDate":"2022-01-18T23:59:57.393Z","likeCount":12,"name":"Jump","publisherHandle":"katsunori_o","publisherId":"2883864","publisherName":"Osanai","runCount":537,"viewCount":1320},{"description":"<p>Easy way to convert Frames to components</p>","id":"1009415037972201588","installCount":173,"lastUpdateDate":"2021-08-18T19:47:33.377Z","likeCount":1,"name":"Frame to Component","publisherHandle":"masud","publisherId":"976246714730304915","publisherName":"Masud Afsar","runCount":225,"viewCount":701},{"description":"<p><strong>Select text layers and replace them with randomly generated numbers, lightning fast. Replace existing numbers within a text layer, reuse a custom range, disable duplicates, and format long numbers with commas.</strong></p><p><br></p><h2><strong>🎥 Watch demo video</strong></h2><p>Check out this <a href=\"https://www.youtube.com/watch?v=_GNl5pRnoG8\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">quick video</a> to see what this plugin can do!</p><p><br></p><h2><strong>⚡️ Generating numbers with quick action commands</strong></h2><p>The quickest way to use this plugin is to use Figma's quick actions menu. To open this menu on Mac, use <strong>Cmd + / </strong>or <strong>Cmd + P</strong>. On Windows, use <strong>Ctrl + /</strong> or <strong>Ctrl + P</strong>. With this menu open, you can type a command and hit enter to quickly generate random numbers.</p><p><br></p><p><strong>[-] Type a valid prefix before the command</strong></p><p><strong>‣ g </strong>| For example: <strong>g</strong>100 / <strong>g</strong>thousand / <strong>g </strong>saved</p><p><strong>‣ rng </strong>| For example: <strong>rng </strong>10000 / <strong>rng</strong> million / <strong>rng</strong> saved</p><p><strong>‣ random </strong>| For example: <strong>random</strong>10 / <strong>random</strong> hundred / <strong>random</strong>saved</p><p><strong>‣ num </strong>| For example: <strong>num </strong>1000000 / <strong>num</strong>hundredthousand / <strong>num</strong>saved</p><p><br></p><p><strong>‣ [-]10, [-]100, ... , [-]1000000</strong></p><p>This will generate random numbers for all selected text layers between 1 and whatever amount of zeros you typed. For example, pressing <strong>Cmd + /, </strong>typing <strong>g100000, </strong>and hitting <strong>Enter</strong> will generate numbers between 1 - 100,000.</p><p><br></p><p><strong>‣ [-] ten, [-] hundred, ... , [-] million</strong></p><p>This has the same functionality as the above, but you can type the name of the number instead. For example, pressing <strong>Cmd + /, </strong>typing <strong>random ten, </strong>and hitting <strong>Enter</strong> will generate numbers between 1 - 10.</p><p><br></p><p><strong>‣ [-] saved</strong></p><p>This will generate numbers from your saved range. By default, this will be 1 through 50, but you can change it in the plugin UI. For example, pressing <strong>Cmd + /, </strong>typing <strong>rng saved, </strong>and hitting <strong>Enter</strong> will generate numbers between <em>Custom X</em> -<em> Custom Y</em>.</p><p><br></p><h2><strong>⚙️ Using the plugin UI</strong></h2><p>Open up the plugin UI by navigating to it in your Plugins dropdown, or open up the quick actions menu (Cmd + /) and type <strong>rng settings</strong>. In the plugin settings window, you can do the following:</p><p><br></p><p><strong>‣ Modify your saved range</strong></p><p>Set up your minimum and maximum to generate your random numbers from. You can go really high (into the billions), so go wild. The plugin will remember this range, and you can also quickly generate new numbers from your saved range without the plugin open. See <strong>[-] saved</strong> above.</p><p><br></p><p><strong>‣ Rapidly generate numbers</strong></p><p>Keep clicking \"Randomize\" or hitting the Enter key and you'll regenerate numbers for all your selected text layers. Keep going until you see a set of numbers that is perfect.</p><p><br></p><p><strong>‣ Toggle the \"Only replace existing numbers\" setting </strong>(Off by default)</p><p>Decide whether to replace the entire contents of a selected text layer with a generated number, or scan through the layer and replace any numbers found with newly generated number. Text layers without numbers in them will not be affected.</p><p><br></p><p><strong>‣ Toggle the \"Prevent Duplicate\" setting </strong>(Off by default)</p><p>Decide whether to prevent duplicate numbers when generating numbers. This is a good way to generate unique sets of numbers or randomize list order. If the amount of numbers you are generating exceeds the amount you define in your range, the plugin will need to generate some duplicates.</p><p><br></p><p><strong>‣ Toggle the \"Format with commas\" setting </strong>(On by default)</p><p>Decide whether to show commas for numbers above 999. For example, you'd want to toggle this on if you're generating regular numbers, but you might want to toggle it off if you're generating numbers for a data centric UI or a random list of years (2021 vs 2,021).</p><p><br></p><h2><strong>☕️ Support the plugin</strong></h2><p>If you love the plugin and feel inclined to provide some small financial support to encourage the development of new features and bug fixes, that would be greatly appreciated. No pressure, of course!</p><p><a href=\"https://ko-fi.com/dnlrj\" rel=\"noreferrer noopener nofollow\" target=\"_blank\"><strong>Buy me a coffee</strong></a></p><p><br></p><p>_</p>","id":"1009688420146523321","installCount":1081,"lastUpdateDate":"2021-09-01T15:33:53.931Z","likeCount":14,"name":"random number generator","publisherHandle":"dnlrj","publisherId":"466014","publisherName":"Dan Araujo","runCount":1208,"viewCount":2222},{"description":"<p>Wrap any Figma frame in a 4K ultra-realistic 3D mockup device frames for the perfect showcase in your slide decks, landing pages and portfolio. Or, grab screenshots directly from your iPhone via a USB cable. Without leaving Figma.</p><p><br></p><p>Exclusively for macOS, Rotato uses its own renderer based on Apple Metal, optimized for both M1 and Intel.</p><p><br></p><p>Rotato for Mac, version 126 required. <a href=\"https://rotato.app/download\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Download free.</a></p><p><br></p><h2>Stand out with 3D mockups right in Figma</h2><p>Click anywhere in a frame and then “Render” in the plugin. The plugin matches your design with a mockup so your iPhone designs are wrapped in an iPhone device frame—or you can choose your own. You can now drag and drop the rendered 4K image onto your page in Figma. Click “Adjust in Rotato” to adjust the phone’s color, rotation, clay mode, shadows, and even animate and export as a video with a solid or transparent background.</p><p><br></p><h2>Bring it home with hypnotic layer explosions</h2><p>Explode all the layers of your design in a 3D explosion for an effect that highlights the detail of your design in an impossible-to-look-away showcase of your app design.</p><p>Simply check the “Explode layers” checkbox when you render your design. You can adjust and animate the explosions by continuing in Rotato.</p><p><br></p><h2>Instant snapshots from your iPhone</h2><p>Got a design on your iPhone you want to showcase? Connect your phone and Mac with a charging cable and click your iPhone’s name in the plugin’s top menu. You can now transfer screenshots—and even wrap them in 3D mockups in one, single little click.</p><p><br></p><h2>Choose between 30+ scenes and always expanding</h2><p>Rotato comes with iPhones, Samsung and Pixel Androids, iPads, Apple Watches, Macbook and surface laptops, and subtle, generic devices so you always have the perfect backdrop for your hard design work.</p>","id":"1009741687635558607","installCount":11934,"lastUpdateDate":"2022-01-15T20:09:04.821Z","likeCount":136,"name":"Rotato 3D Mockups + Explosions","publisherHandle":"rotato","publisherId":"1058496985069957631","publisherName":"Rotato","runCount":15747,"viewCount":19925},{"description":"<p>Fill layers in Figma with avatars and random data from the free crowd-sourced app tinyfac.es.</p><p><br></p><p>Features:</p><p><br></p><p>-  📒 Fills text layers with random names</p><p>-&nbsp;&nbsp;👦🏼 Fills shapes with random avatar stock photos</p><p>-&nbsp;&nbsp;🎚 Choose between high quality or low quality images</p><p>-&nbsp;&nbsp;💑 Filter to male, female or non-binary</p><p>-  💟 Supports components</p><p><br></p>","id":"1009744160501872848","installCount":8641,"lastUpdateDate":"2021-08-25T09:32:01.374Z","likeCount":67,"name":"TinyFaces 👦🏼👨🏾👩🏻","publisherHandle":"max","publisherId":"175457","publisherName":"Maxime De Greve","runCount":9854,"viewCount":9732},{"description":"<p>Turn any frame into a stunning 3D mockup instantly!</p><h2><br></h2><h2>How It Works</h2><ol><li>Choose any frame (or image) you want</li><li>Run the plugin</li><li>Adjust the sliders until the 3d effect is fancy</li><li>Place it into your work as an image</li></ol><p><br></p><h2>Features</h2><p>🌎Rotate the frame into the 3D world</p><p>🤘Works with both frames and images</p><p>💾Saves automatically your last used values</p><p>🔄Run with another image without closing the modal</p><p><br></p><p>Please, be careful that your initial selection <strong>must be a Figma frame or a layer with image fill. </strong></p>","id":"1009780509659307229","installCount":43727,"lastUpdateDate":"2022-01-07T08:57:48.195Z","likeCount":477,"name":"3D Transformer","publisherHandle":"dmraptis","publisherId":"632","publisherName":"Jim Raptis","runCount":45450,"viewCount":53558},{"description":"<p>Convert your Figma components into clean React, React Native or HTML code, helping you accelerate your developer handoff.&nbsp;</p><p><br></p><p>Learn more about us here: <a href=\"https://useunify.app/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://useunify.app/</a></p><p><br></p><p>For any questions or feedback, feel free to ping us on <a href=\"https://discord.com/invite/A97XRP9TFE\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Discord</a>, shoot us an <a href=\"mailto:use.unify@gmail.com\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">email</a>, or <a href=\"https://calendly.com/use-unify/chat\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">book some time</a> with us.</p>","id":"1009866256233241860","installCount":10113,"lastUpdateDate":"2022-05-19T14:57:33.816Z","likeCount":155,"name":"Unify: Figma to React, React Native and HTML/CSS","publisherHandle":"teamunify","publisherId":"1009861011162050704","publisherName":"Team Unify","runCount":11492,"viewCount":16201},{"description":"<h2>How \"Magic Fill\" Works</h2><p><a href=\"https://youtu.be/3twZYizm9lk\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://youtu.be/3twZYizm9lk</a> (🎥 3min)</p><p><br></p><p>For users in China:</p><p><a href=\"https://www.bilibili.com/video/BV1PP4y1b7X7\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://www.bilibili.com/video/BV1PP4y1b7X7</a> (🎥 3min)</p><p><br></p><h2><strong>Playground</strong></h2><p><a href=\"https://www.figma.com/community/file/1022027088430321546/Contento-Playground\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://www.figma.com/community/file/1022027088430321546/Contento-Playground</a></p><h2><br></h2><h2>Features</h2><p><strong>1. Brand new \"Discover\" Channel</strong></p><p>\"Discover\" is the place to discover more contents, having a lot of PNG (transparent background) image stocks, previewing and playing around with format options and very easily duplicating them into your own collections.</p><p><br></p><p><strong>2. Apply Content for Sublayers</strong></p><p>Many times when applying data, selecting multiple list elements individually will become very cumbersome. In Contento, you only need to select the parent layer, and apply different contents to sublayers that have different names.</p><p><br></p><p><strong>3. Unsplash Photos</strong></p><p>You can choose photos from Unsplash to create image library. You can also provide any external image urls.</p><p><br></p><p><strong>4. Content Types &amp; Settings</strong></p><p><strong>Any Image Library</strong> provides settings:</p><ul><li>Pixel: \"auto\" by default, which automatically chooses pixels according to the width &amp; height of each layer individually. Note: this feature is only for Unsplash image urls.</li><li>Order: random / ascending</li></ul><p><strong>Any Number Library</strong> provides settings:</p><ul><li>Min value</li><li>Max value</li><li>Prefix</li><li>Suffix</li><li>Decimal number</li><li>Thousand separators</li><li>Order</li></ul><p><strong>Any Date &amp; time Library </strong>provides settings:</p><ul><li>Date format</li><li>Time format</li><li>Time range</li><li>Order</li></ul><p><strong>Any Serial number</strong> <strong>Library</strong> provides settings:</p><ul><li>Start value</li><li>Interval value</li><li>Places</li><li>Prefix</li><li>Suffix</li></ul><p><strong>Any Text Library</strong> provides settings:</p><ul><li>Order</li><li>Prefix</li><li>Suffix</li></ul><p><br></p><p><strong>5. Custom Libraries</strong></p><p>You can create custom content libraries with types like text, image, number, date &amp; time and serial number.</p>","id":"1010552515551148469","installCount":6395,"lastUpdateDate":"2022-03-06T06:54:44.600Z","likeCount":177,"name":"Contento","publisherHandle":"bahtiyar","publisherId":"873132504184456525","publisherName":"Bahtiyar Ahmidi","runCount":6293,"viewCount":9811},{"description":"<p>Quickly add <a href=\"https://webaim.org/articles/contrast/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">WCAG</a> contrast ratio info to your color styles for easy reference right in the color panel. <em>No need to break your design flow to check accessibility!</em></p><p><br></p><p>This helps everyone working in the file know which color pairs are safe to use by providing contextual information directly in the Figma UI.</p><p><br></p><ul><li><strong>Easy to setup </strong>Just run once! Setup is as easy as running the plugin and selecting which colors you are using for text. The plugin will determine the contrast ratio for each color you select against every other color style in the file. </li><li><strong>Easy to use </strong>No need to open the plugin again, contrast info is now visible in the Figma UI! Hover over the swatches of your color styles to see the contrast ratio for that color.</li><li><strong>Flexible </strong>You can calculate the contrast ratio for as many colors as you want!</li></ul><p><br></p><p><strong>Limitations</strong></p><p>This only works with solid fill colors. No gradients or images.</p><p><br></p><p><strong>Support &amp; Bug Reporting</strong></p><p><a href=\"https://github.com/aspencer116/contrast-description\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Contribute to this plugin on GitHub</a></p>","id":"1010556985353208247","installCount":1129,"lastUpdateDate":"2021-12-03T22:00:36.918Z","likeCount":28,"name":"Contrast Description","publisherHandle":"thoughtbot","publisherId":"1039740942889734218","publisherName":"thoughtbot","runCount":1216,"viewCount":2050},{"description":"<p><strong>Writer | Clear, consistent, on-brand copy | Checks grammar + spelling&nbsp;</strong></p><p><br></p><p><br></p><p><a href=\"http://writer.com\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Writer</a> is the AI writing assistant for teams. Use the Writer + Figma plugin to make sure all your content is clear, consistent, and error-free.</p><p><br></p><p>This plugin checks your content for:</p><p>✅ Spelling</p><p>✅ Grammar</p><p>✅ Readability / grade level</p><p>✅ Punctuation errors</p><p>✅ Stats: Reading time, word count, sentence length</p><p><br></p><p>You will require a <a href=\"https://writer.com/plans/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\"><strong>Writer subscription</strong></a> to sign into the plugin. A free plan gives you basic spelling and grammar suggestions, and the Pro plan ($99/year) gives you advanced writing suggestions and writing style customizations.</p><p><br></p><p>Contact us at <a href=\"mailto:hello@writer.com\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">hello@writer.com</a> for Team plans that also give you access to a content design system, product taxonomy tools, and collaboration features.&nbsp;</p>","id":"1010580776466011580","installCount":15756,"lastUpdateDate":"2022-07-25T17:39:38.730Z","likeCount":315,"name":"Writer for Figma","publisherHandle":"writer","publisherId":"895411549909152441","publisherName":"Writer","runCount":14708,"viewCount":23238},{"description":"<p><a href=\"https://docs.ampier.io/figma/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\"><strong>Documentation</strong></a></p><p><br></p><p><strong>About</strong></p><p>Ampier plugin for Figma lets you create stunning AMP and HTML email designs for your email marketing campaigns within your favorite design environment. Export production ready code that work for all common email clients, including Gmail, Apple Mail, Outlook, and others.</p><p><br></p><p><strong>Why Ampier plugin</strong></p><ul><li><strong>Intuitive Workflow</strong>. No tech skills required. Create your HTML and/or AMP email templates in a fast and convenient way.</li><li><strong>HTML + AMP Code</strong>. Unique AMP for email functionality. Create, preview and export bulletproof HTML and AMP code that simply works.</li></ul><p><br></p><p><strong>Features</strong></p><ul><li>Ampier plugin generates clean and responsive HTML and AMP versions from your design</li><li>Create feedback forms that work right inside the email message thanks to the AMP for emails technology</li><li>Use special syntax to set links (URLs) to your texts and buttons</li><li>Define special HTML parts as fallbacks for the clients that don’t support AMP</li><li>Predefined assets for quick start built-in to the plugin</li><li>Beautiful assets packs. Check it <a href=\"https://www.figma.com/@ampier?fuid=647057839015309373\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">here</a></li><li>Preview your real email at different device sizes directly</li><li>Make a quick screenshot to show your progress to a colleague or a client</li><li>Check the light mode and dark mode (regular Dark mode and Gmail dark mode on iOS)</li><li>Provide the invisible preheader and/or short preheader</li><li>No coding required! Export responsive, production ready HTML and AMP code</li><li>Code compression and minification to stay below the 100kbs limit for email messages</li><li>Download the exported .zip file with HTML, AMP and <a href=\"https://docs.ampier.io/framework/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">TJML</a> parts to your computer from Figma</li></ul><p><br></p><p><strong>How to use</strong></p><ol><li>Create your design from predefined assets or create your own with auto layout</li><li>Select the root frame and run the plugin to preview your template</li><li>Check desktop and mobile, dark and light modes. Export the HTML/AMP files</li></ol><p><br></p><p><strong>Questions and bug reports</strong></p><p>Please feel free to <a href=\"mailto:support@ampier.io\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">contact us</a> if you have any questions or suggestions. We’re always open to new features!</p>","id":"1010864160468009465","installCount":1324,"lastUpdateDate":"2022-07-26T11:24:17.966Z","likeCount":23,"name":"Ampier HTML and AMP Email Generator","publisherHandle":"ampier","publisherId":"888289","publisherName":"Todd","runCount":1320,"viewCount":2764},{"description":"<p>Mail-merge type of plugin. Generate personalized PDFs with Google Sheets</p><p><br></p><p>### Note / How-to Use</p><p>- Make sure to generate your own Google Sheets-scoped API key so you can access your Google Sheet file</p><p>- Make sure your Google Sheet file is visible to anyone with the link (not limited to people added)</p><p>- Headers will always be on the first row</p><p>&nbsp;- They can only be alphanumeric, with dashes, and underscores</p><p>- Make sure a frame layer is selected</p><p>- Make sure to insert `%%{header name}%%`on your text, the plugin will loop over the text layers under the selected frame</p><p>- Only Text layer is supported at the moment</p><p><br></p><p>### If you're having problems or want something to be better feel free to open an issue!</p>","id":"1010867408833823226","installCount":155,"lastUpdateDate":"2021-09-01T19:51:08.386Z","likeCount":5,"name":"Composer","publisherHandle":"marqroldan","publisherId":"2794345","publisherName":"Marq Roldan","runCount":154,"viewCount":696},{"description":"<p><a href=\"https://backgroundcut.co/\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">BackgroundCut </a>auto background removal platform will quickly remove any image background in just a few seconds.</p><p>This Plugin help user to remove image background automatically.</p><ul><li>Create an account with <a href=\"https://backgroundcut.co/\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">BackgroundCut </a>to get your API-KEY.</li><li>Run plugin and wait just a few seconds to get results.</li></ul>","id":"1010874802336709117","installCount":6431,"lastUpdateDate":"2021-09-11T23:08:56.399Z","likeCount":18,"name":"BackgroundCut","publisherHandle":"a037281d_0519_4","publisherId":"868248943164131150","publisherName":"HARSH RANJAN","runCount":10264,"viewCount":6100},{"description":"<p>Dig out patterns from production HTML; enter a URL and Pickaxe fetches visual patterns from a website and re-creates them as components in Figma.</p>","id":"1010961151179038213","installCount":297,"lastUpdateDate":"2021-10-28T18:51:06.582Z","likeCount":2,"name":"Pickaxe","publisherHandle":"pickaxeapp","publisherId":"1021583255700524041","publisherName":"Pickaxe","runCount":326,"viewCount":1204},{"description":"<p>Find the visual center of any vector shape.</p><p><br></p><p>The plugin uses two methods for determining the visual center depending on the shape.</p><p><br></p><ol><li>For triangles the plugin will find the centroid to determine visual center.</li><li>For vector shapes with more than three vertices the plugin uses the center of the smallest enclosing circle (<a href=\"https://www.nayuki.io/page/smallest-enclosing-circle\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">https://www.nayuki.io/page/smallest-enclosing-circle</a>).</li></ol><p><br></p><h2><strong>👉 Usage</strong></h2><p><br></p><ol><li>Select one or more vector shapes and run the plugin</li><li>A guide layer will be added to the page and grouped together with the selected shape.</li></ol><p><br></p><h2><strong>👉 Supported Node Types</strong></h2><p><br></p><ul><li>VECTOR</li><li>STAR</li><li>RECTANGLE</li><li>POLYGON</li><li>ELLIPSE</li></ul><p><br></p><h2><strong>🤔 Edge cases</strong></h2><p><br></p><p>This plugin <strong>is not</strong> a bulletproof solution to finding the exact visual center. There are still cases in which manual alignment is necessary.</p>","id":"1011367955824608832","installCount":1071,"lastUpdateDate":"2021-08-26T19:37:12.309Z","likeCount":23,"name":"Visual Center","publisherHandle":"toddham","publisherId":"2640437","publisherName":"Todd Hamilton","runCount":731,"viewCount":1426},{"description":"<p>Create cool looking waves using audio style knobs!</p><p><br></p><p>Inspired by hardware synthesizers.</p>","id":"1011425479480211015","installCount":3113,"lastUpdateDate":"2021-09-15T12:02:01.114Z","likeCount":33,"name":"Line Synthesizer","publisherHandle":"tomquinonero","publisherId":"34401","publisherName":"Tom Quinonero","runCount":3054,"viewCount":5681},{"description":"<p>Create icon with keyline fast in figma.</p><ol><li>Enter icon name.</li><li>Select icon size or enter custom size.</li><li>Click 「create button」.</li><li>You get icon components with keyline.</li></ol>","id":"1011485973059052108","installCount":837,"lastUpdateDate":"2021-08-30T03:02:34.114Z","likeCount":16,"name":"icKeylineMaker","publisherHandle":"tseng","publisherId":"867350491627047632","publisherName":"tseng","runCount":674,"viewCount":1221},{"description":"<h2>Showcase your artwork live in meetings with Sessions</h2><p><br></p><p><br></p><p>Meeting collaboration tool meets vector graphics editor</p><p>Figma users worldwide are now able to showcase their designs during a virtual meeting powered by Sessions. Sessions is not just another video conferencing app. It is the platform that makes meetings better by bringing all your collaboration tools into one single space.</p><p><br></p><p>When it is time to present or ask a colleague for an opinion on your Figma project, it is dead easy to share it with them. When organizing a meeting in Sessions, in the agenda of the meeting where you design the time slots, it is now possible to dedicate time to display a Figma project in the meeting without having to share your screen. The best part of Sessions is that you can access all the other functionalities (taking notes, uploading resources) as well, in order to have a complete, engaging and productive meeting.</p><p><br></p><p>The wireframes are available in Sessions as static pictures displayed one after the other in the order added when exporting. All the participants present in the meeting are able to view the wireframes.&nbsp;</p><p><br></p><p><strong>With Sessions, there is no time like the present to share your prototype:</strong></p><p>To be able to enjoy this capability, register an account with Sessions as well. Open an account free of charge with Sessions by accessing <a href=\"https://sessions.us\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">https://sessions.us</a>.</p><p><br></p><p><strong>Getting started:</strong></p><ol><li>On your Figma design, add the Sessions plug-in. Click on <strong>Sync with Sessions</strong>. See details, here (<a href=\"https://help.figma.com/hc/en-us/articles/360040450413-Find-and-install-plugins\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">https://help.figma.com/hc/en-us/articles/360040450413-Find-and-install-plugins</a> ).</li><li>The Sessions log-in page is displayed. If you are already logged in, you are asked for permissions.</li><li>Export the wireframes you wish to present in the meeting. They are imported as resources in Sessions.</li><li>Access Sessions with your newly created account. Create a From Scratch meeting and add the agenda block.</li><li>Select for the agenda block the artifact Figma. Choose the wireframes recently exported.&nbsp;</li><li>Publish the session. That’s it!</li></ol><p><br></p><p>This is what a sessions looks like: <a href=\"https://youtu.be/VNVg_aD1NPc\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">https://youtu.be/VNVg_aD1NPc</a></p><p><br></p><p>Join Sessions’ Slack community at <a href=\"https://join.slack.com/t/sessionscommunity/shared_invite/zt-rsbysxs3-00rRoSXKiAz6bLU6QLy8NQ\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">https://join.slack.com/t/sessionscommunity/shared_invite/zt-rsbysxs3-00rRoSXKiAz6bLU6QLy8NQ</a></p><p><br></p><p>Subscribe to our YouTube channel <a href=\"https://www.youtube.com/channel/UCmkBi4amiGhE68Q8RZVoAPw\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">https://www.youtube.com/channel/UCmkBi4amiGhE68Q8RZVoAPw</a></p>","id":"1011512061726401104","installCount":251,"lastUpdateDate":"2021-09-30T14:49:43.214Z","likeCount":13,"name":"Sessions","publisherHandle":"d702febb_0d4f_4","publisherId":"1010822307493070052","publisherName":"Sessions","runCount":236,"viewCount":1043},{"description":"<p>Split your text layer by word or letters.</p><p>Super useful for designing logos or to do youtube thumbnails.</p><p><br></p><p>No UI simply launch the plugins and select your parameters!</p><p><br></p><h2>About Me</h2><p>I am Tom Quinonero, a developer that always works close to the design team. I bring back together coders and UI teams by making tools and process that improve collaboration. If you need my help on a project, <a href=\"mailto:tomquinonero@hey.com\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">send me an email</a>!</p>","id":"1011625987479815803","installCount":5108,"lastUpdateDate":"2021-11-25T11:44:26.291Z","likeCount":83,"name":"Text Splitter","publisherHandle":"tomquinonero","publisherId":"34401","publisherName":"Tom Quinonero","runCount":2919,"viewCount":12326},{"description":"<p>Sprinkle even more hues into FigJam and paint your Jams with <strong>your brand</strong> colors! Built for <em>speed</em>: use automatic one-click recoloring to quickly apply your palette, then use selection colors section to make more precise adjustments in bulk.</p><p><br></p><p>Paint is becoming paid soon! <a href=\"https://tools.lemonsqueezy.com/checkout/buy/cf82434e-4ea5-4839-812d-53a80594bd82?media=0&amp;discount=0\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\"><strong>Get a no-subscription lifetime license</strong></a> for the early bird price! 🤑</p><p><br></p><p>The default set of swatches includes a set of useful swatches which are not available in FigJam natively such as TRUE RED™, bright blue and pink. Default swatches will be free to use forever!</p><p><br></p><h2>Use your own colors</h2><p><em>Get styles from the file:</em> open a Figma file which contains solid color styles and run the “Save Palette” command.</p><p><br></p><p><em>Get colors from selected objects:</em> select color swatches (rectangles or ellipses filled with different colors would do, but you can use anything) and run “Save Palette” command.</p><p><br></p><p>Video demo from the Figma team: <a href=\"https://twitter.com/figmadesign/status/1451669085335396352\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://twitter.com/figmadesign/status/1451669085335396352</a></p>","id":"1011949369096003271","installCount":13174,"lastUpdateDate":"2022-02-23T13:51:32.032Z","likeCount":111,"name":"Paint","publisherHandle":"g","publisherId":"328","publisherName":"Gleb","runCount":11917,"viewCount":11119},{"description":"<p><em>Life is short, make counting votes(stamps) in FigJam easier.</em></p><p><br></p><p><strong>How to</strong></p><ol><li>Select sticky(s) and click on the blue counting button.</li><li>Try to add some votes. (stamps or components).</li><li>You will see the stats update in realtime.</li></ol>","id":"1012008792333568747","installCount":5490,"lastUpdateDate":"2021-10-20T06:59:01.435Z","likeCount":30,"name":"FigJam Polls","publisherHandle":"lichin","publisherId":"459","publisherName":"Lichin","runCount":5097,"viewCount":4240},{"description":"<p>Import projects made with Stage to Figma to continue further work.</p><p>Learn more about Stage at&nbsp;<a href=\"https://stage.so/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://stage.so</a></p><p><br></p><p><strong>How it works</strong></p><ol><li>Export Stage project</li><li>Install ‘Stage to Figma’ plugin and run it</li><li>Upload the exported file in the plugin and wait while a project is importing</li></ol><p><br></p><p><strong>What is Stage</strong></p><p>Stage is made to empower people without design or technical background to visualize their app ideas. Modern design tools are made especially for professional designers. Designing with Stage is that simple as dragging pre-made components and tweaking intuitive settings.</p><p>Start with a library of mobile patterns and create a user flow. Customize and make it live. Create preview links and test on real users. Export to Figma to continue further work.</p>","id":"1012107248856076135","installCount":1053,"lastUpdateDate":"2022-02-15T14:06:18.405Z","likeCount":17,"name":"Stage to Figma","publisherHandle":"serjobas","publisherId":"427292","publisherName":"Sergey Bunas","runCount":843,"viewCount":3328},{"description":"<p>This plugin helps the designers and developers to automate the process of syncing Figma design system changes straight to the codebase design system.</p><p><br></p><p>It is quite useful for the designers to make changes in the design system without notifying developers about each change. Adding 10 new icons in Figma can now be easily transformed to the code as files with one click instead of exporting them manually by the developer. Changing the accent color will not only take effect everywhere it's used in Figma components, but also in the code components just as fast.</p><p><br></p><p>At the moment, the plugin works with such design tokens as</p><ul><li>icons — it searches for \"COMPONENT\" types on a Figma page and returns them in .svg format only</li><li>colors — it searches for \"PAINT\" types on a Figma page and returns them in .json format</li><li>typography — it searches for \"TEST\" types on a Figma page and returns them in .json format</li></ul><p><br></p><p>For instance, if we run the plugin on the page with icons and send the changes, the PR will be creates with all the new .svg files, which are not in the base branch yet.</p><p><br></p><p>Plugin form has several fields which are necessary to be provided:</p><ul><li>repo name — the name of your Github repository with the code design system</li><li>your Github token — <a href=\"https://docs.github.com/en/github/authenticating-to-github/keeping-your-account-and-data-secure/creating-a-personal-access-token\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">here are the instructions</a> of how to create it)</li><li>owner name — your Github nickname if you own the repo or the name of the company</li><li>head branch — the name of the branch where you make the changes to your design system</li><li>base branch — the name of the base branch where you are to pull your changes</li></ul><p><br></p><p>By pushing the \"Sync\" button it pushes all found token styles to the head branch of the provided repo and creates a pull request to the main branch.</p><p><br></p><p>📩 Do not hesitate to suggest any additional functionality if you think the plugin might be helpful to you!</p>","id":"1012112455906916204","installCount":775,"lastUpdateDate":"2021-10-08T13:02:42.584Z","likeCount":18,"name":"DSync","publisherHandle":"lizasvit","publisherId":"1965234","publisherName":"Liza Svitanko","runCount":530,"viewCount":3168},{"description":"<p>Tour Guide is a tiny but powerful plugin that turns any FigJam board or page in a Figma file into a slide show presentation! It’s simple and easy to use:</p><p><br></p><p>1. Select any object(s) and add them to your tour.</p><p>2. Tap the arrows to navigate your FigJam board or Figma page.</p><p>3. Tap the X button to remove a view or the trash can to start from scratch.</p><p>4. NEW! Drag a view up or down to reorder (on desktop only)</p><p><br></p><p>With Tour Guide, you can screen share a FigJam board or Figma page as if it were a slide deck, and quickly navigate to the highlights you’ve selected. No more need to scroll and hunt.&nbsp;</p><p><br></p><p>Tour Guide is built with a little intelligence in the background. If you move objects, Tour Guide will continue to follow them around. If you delete objects, Tour Guide will remove them from the tour automatically.</p><p><br></p><p>I built this plugin so I could present in FigJam and Figma easily, and welcome your feedback to make it even better for the future.</p>","id":"1012194842754462625","installCount":2968,"lastUpdateDate":"2022-05-12T03:09:24.436Z","likeCount":29,"name":"Tour Guide","publisherHandle":"ntfromchicago","publisherId":"1232151","publisherName":"Nelson Taruc","runCount":2939,"viewCount":2872},{"description":"<p>Find and filtering nodes</p>","id":"1012199923695112111","installCount":91,"lastUpdateDate":"2021-08-25T03:21:32.905Z","likeCount":3,"name":"Node sniffer","publisherHandle":"kamrade","publisherId":"383431","publisherName":"Dennis","runCount":70,"viewCount":538},{"description":"<p>Makes everything you select in FigJam #FF5386 pink. This is the color of my brand <a href=\"https://gleb.sexy\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">gleb.sexy</a>. Use this when you feel like your diagrams lack a bit of pink. Share your pink creations with me&nbsp;— I always need more pink in my life!</p><p><br></p><p>Made as a <a href=\"https://twitter.com/zyumbik/status/1430360363342737409\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">response</a> to <a href=\"https://www.figma.com/@anthony\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">@anthony</a>.</p>","id":"1012211502448859068","installCount":1681,"lastUpdateDate":"2021-08-25T05:50:13.028Z","likeCount":28,"name":"Pink","publisherHandle":"g","publisherId":"328","publisherName":"Gleb","runCount":1514,"viewCount":4813},{"description":"<p>更适合中国用户或亚洲用户的头像，可填充任意形状，更贴合中国设计师的日常产品设计需求。</p><p><br></p><p>-- 使用方法：选择椭圆或其他形状，使用插件，图片会自动填充，目前一次只能填充一张，男女图片概率分别为50%</p><p><br></p><p>-- 联系我的电子邮件寻求帮助：pjm@uime.me</p><p><br></p><p>插件提供的所有图片仅供设计使用，禁止用于商业用途。</p><p>----------</p><p>It is more suitable for Chinese or Asian users’ avatars, randomly filled with any shape, which is more suitable for the daily product design needs of Chinese designers.</p><p><br></p><p>- How to use: Choose an ellipse or other shape, use the plug-in, the picture will be automatically filled, currently only one can be filled at a time, the probability of male and female pictures is 50% respectively</p><p><br></p><p>- Contact my email for help: pjm@uime.me</p><p><br></p><p>All images provided by the plug-in are for design use only, and commercial use is prohibited. You can also send your own beautiful photos to my mailbox to get the opportunity to be photographed.</p><p>------------------------&lt;meta&gt;--------------------</p><p>月维美女四喜茶茶牛逼yyds交付对接神器芜湖起飞</p>","id":"1012261172866714611","installCount":3133,"lastUpdateDate":"2021-08-25T09:42:36.709Z","likeCount":21,"name":"NB Avatars","publisherHandle":"ansinx","publisherId":"1706001","publisherName":"Ansinx","runCount":3620,"viewCount":4032},{"description":"<p>Jumpstart your design discussion with UX tools. Each UX tool and method helps you get more clarity about the problem you are trying to solve.</p><p><br></p><p><strong>Version 1.0</strong></p><p>At present we are having 8 in the list and more will be updated soon.</p>","id":"1012416367844254957","installCount":11972,"lastUpdateDate":"2021-08-30T10:47:02.509Z","likeCount":88,"name":"Toolset for UX Design","publisherHandle":"pavankusuma","publisherId":"3577452","publisherName":"Pavan Kusuma","runCount":9827,"viewCount":16827},{"description":"<p>A simple plugin that helps you create designs for social media at the right size. Any feedback is appreciated. There's room for improvements</p>","id":"1012728803821150806","installCount":1745,"lastUpdateDate":"2021-09-15T08:59:18.010Z","likeCount":12,"name":"Social media sizes","publisherHandle":"razvanpop","publisherId":"848220449501777587","publisherName":"Pop Razvan","runCount":2106,"viewCount":2631},{"description":"<p>Handy tool to apply different fonts to CJK and Latin characters in one or more selected text layers. It can also add space to CJK and Latin word boundaries for the sake of aesthetic.</p><p><br></p><p><a href=\"https://github.com/haishanh/figma-plugin-mixed-lang-text\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">Source code on GitHub</a></p><p><br></p>","id":"1012962159348529943","installCount":325,"lastUpdateDate":"2021-09-22T15:18:20.570Z","likeCount":10,"name":"Mixed Language Text","publisherHandle":"hais","publisherId":"114380","publisherName":"Haishan","runCount":273,"viewCount":900},{"description":"<p>Spell Checking (Grammarly) for Bahasa Indonesia. This makes it easy to check the typo or spelling mistakes in your design.</p><p><br></p><p>Open source <a href=\"https://github.com/sonnylazuardi/cek-ejaan\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\"><strong>https://github.com/sonnylazuardi/cek-ejaan</strong></a></p>","id":"1013364535408157858","installCount":443,"lastUpdateDate":"2022-07-06T02:18:26.381Z","likeCount":22,"name":"Gramatika Bahasa Indonesia","publisherHandle":"sonny","publisherId":"123","publisherName":"Sonny Lazuardi","runCount":364,"viewCount":1792},{"description":"<h2>Generate color themes via <a href=\"https://leonardocolor.io/theme.html\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">leonardocolor.io</a></h2><p><br></p><p><strong>Usage</strong></p><ul><li>Generate a color theme(s) via https://leonardocolor.io/</li><li>Copy Theme URL(s)</li><li>Run the plugin</li><li>Paste &amp; press \"Run\"</li></ul><p><br></p><p><strong>Keep in mind</strong></p><ul><li>A short link to your theme will be attached to each color in the description.</li><li>If you want to change the colors in the created themes – you don't need to reconnect the colors where they are used, just update the theme URL in the plugin.</li><li>All generated themes will be visible in the plugin even after it is restarted</li></ul>","id":"1013391800762935476","installCount":617,"lastUpdateDate":"2022-05-20T23:00:01.246Z","likeCount":7,"name":"leonardo-converter","publisherHandle":"jamillazarev","publisherId":"90866","publisherName":"Jamil Lazarev","runCount":532,"viewCount":1623},{"description":"<p><a href=\"https://siter.io/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Siter.io</a>&nbsp;is a website builder that lets you create and publish entire websites without any coding at all. It works by directly <strong>exporting Figma design</strong> files without hassle of converting your layout into HTML and CSS. After the export, you can make changes and adjustments directly on&nbsp;<a href=\"https://siter.io/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Siter.io</a>, and easily add responsive versions for your pages.</p><p><br></p><p><strong>How it works:</strong></p><ul><li>Install the plugin</li><li>In Figma select the art-board with your website</li><li>Choose \"Plugins\" and click on Export Design to Siter.io</li><li>Pair the<a href=\"http://siter.io/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\"> </a>Siter.io with Figma</li><li>Export your designs!</li></ul><p><br></p><p><strong>Watch video</strong> -&gt; <a href=\"https://www.youtube.com/watch?v=BG8rsZdR_SQ\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://www.youtube.com/watch?v=BG8rsZdR_SQ</a></p><p><br></p><p><strong>Suggestions?</strong> →<a href=\"https://siter.io/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\"> https://siter.io/</a></p><p><strong>Status</strong> -&gt; <a href=\"https://status.siter.io/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://status.siter.io/</a></p>","id":"1014191120140241695","installCount":9019,"lastUpdateDate":"2022-07-13T12:59:30.850Z","likeCount":210,"name":"Siter.io - Export Figma Designs to Websites","publisherHandle":"designmodo","publisherId":"864942","publisherName":"Designmodo","runCount":9833,"viewCount":26027},{"description":"<p><strong>Automatically mark width and height in Figma.</strong></p><p><br></p><p><a href=\"https://youtu.be/QHpHNIqSWYo\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Function demonstration video.</a></p><p><br></p><p>Using this plug-in, you can do interactive measurement effects in your Figma documents, directly label the width and height, you only need to follow the steps below:</p><p><br></p><p>1. Create a new text node with any content text.</p><p><br></p><p>2. Input the text node in a frame.</p><p><br></p><p>3. Select the text node in the frame and turn on the [Node under control] switch in the plugin panel. At this time, the content of the text node will be replaced with the width number of the outer frame.</p><p><br></p><p>4. Adjust the measurement settings you need, click [Apply all] button, then the plug-in settings will be applied to all nodes in the document that are set to [Node under control].</p><p><br></p><p>5. Add auto layout and label lines in your frame, and then adjust the frame width, you can achieve the effect of the demo video.</p><p><br></p><p>6. If you just need the prefix of the label and want to switch the width and height of the text, just rotate the outer frame.</p><p><br></p><p>Notice:</p><p><br></p><p>1. The plug-in can only recognize the width of the container frame. To mark the height, please refer to the demo video.</p><p><br></p><p>2. After optimization, when adjusting the size of a single label, there will be no stalls, but if there are many annotations in the document, such as hundreds of them, there may be a short stall when clicking [Apply all] button.</p><p><br></p><p>3. You can directly copy the finished label and reset its width, just like the demo video.</p><p><br></p><p>3. The plugin will automatically recognize your font.</p><p><br></p><p>4. You need to keep the plugin turned on to use the functions.</p><p><br></p><p>5. After closing the plug-in, the set options will not be retained. If you need to retain the setting function, please feedback in the comment area.</p><p><br></p><p><strong>在figma内自动标注宽高</strong></p><p><br></p><p>使用本插件，你可以在你的figma文档中实现交互式标注效果，直接标注宽高，你只需要按以下步骤进行操作：</p><p><br></p><p>1.新建一个文本节点，内容文字任意</p><p><br></p><p>2.把文本节点装在一个frame里</p><p><br></p><p>3.选中frame里的那个文本节点，打开插件中的【是否受插件控制】开关，此时文本节点的内容会被替换为外层frame的宽度</p><p><br></p><p>4.调整你需要的标注设置，点击【应用全部】，此时插件设置会应用到文档里全部设置了【是否受插件控制】的节点上</p><p><br></p><p>5.给你的frame添加自动布局和标注线，再调整frame宽度时，就可实现演示视频的效果</p><p><br></p><p>6.如果你恰好需要标注的前缀，想要切换宽高的文字，旋转标注frame就可以了</p><p><br></p><p>注意：</p><p><br></p><p>1.插件只能识别容器frame的宽度，要标注高度可以参考演示视频</p><p><br></p><p>2.经过优化，在调整单个标注的大小时，不会出现卡顿，但如果文档中有很多标注，比如几百个，点击【应用全部】时可能会出现短暂卡顿</p><p><br></p><p>3.可以直接复制做好的标注并重新设置其宽度，就像演示的那样</p><p><br></p><p>3.插件会自动识别你的字体</p><p><br></p><p>4.你需要保持插件开启才可以使用功能</p><p><br></p><p>5.关闭插件后，设置好的选项不会保留，如果你们需要保留设置功能请在评论区反馈</p>","id":"1014351715209805744","installCount":268,"lastUpdateDate":"2022-01-07T13:46:33.356Z","likeCount":3,"name":"Auto Number","publisherHandle":"SydLiu","publisherId":"867938628917123243","publisherName":"刘松迪","runCount":408,"viewCount":1537},{"description":"<p>Set variants properties fast and easy using toggles.</p><p><br></p><p>No more writing each variant’s property over and over with every component in your design system.</p><p>Now you can select from a pre-made list of properties the ones you want using toggles in order to get true/false switches.</p><p><br></p><ul><li>Create true/false properties on the fly</li><li>Save templates</li><li>Delete and update templates</li><li><br></li></ul><p>using the plugin:</p><p><br></p><p>To use the templates, select one component set and click on the name of the template you want.</p><p><br></p><p>To use the no-template option, select one component set and write the properties you want seperated by commas.</p><p><br></p><p>Update template by clicking on the setting icon. you can change the name and properties of the template and save the changes, or you can delete the template.</p><p><br></p><h2><strong>For more plugins and gifs with usage examples:</strong></h2><h2><a href=\"https://figmaop.netlify.app/\" rel=\"noreferrer noopener nofollow\" target=\"_blank\"><strong>FigmaOP - open source Figma plugins-&gt;</strong></a><strong> </strong></h2><h2><br></h2><h2><a href=\"https://www.buymeacoffee.com/TalmSnir\" rel=\"noreferrer noopener nofollow\" target=\"_blank\"><strong>Support My Work on Figma Plugins-&gt;</strong></a></h2><p><br></p><p><br></p>","id":"1014435448527160306","installCount":2194,"lastUpdateDate":"2021-11-07T11:13:59.806Z","likeCount":62,"name":"Fast Variants Properties","publisherHandle":"TalmSnir","publisherId":"893556449536344028","publisherName":"Tal Snir","runCount":2000,"viewCount":5752},{"description":"<p>You can replace the layer with a custom element, and the replaced layer will inherit the size attribute.</p><p><br></p><p>你可以用自定义的元素替图层，被替换的图层会继承尺寸属性。</p><p><br></p><p><strong>Different with the official 'Paste to replace' :</strong></p><p><br></p><ul><li>To replace A with B, 'Paste to replace' replaces the size of B together. Using A Replacer inherits size attributes from A to B.</li></ul><p><br></p><ul><li>'Paste to replace' Ctr/CMD + C If the properties of the replacement source are changed, Ctr/CMD + V will replace the original element. A Replacer Always uses the current status of the replacement source for replacement.</li></ul><p><br></p><p><strong>Usage:</strong></p><p><br></p><ul><li>Select an element and add it to the replace source list</li><li>Select the element to be replaced, and then click the element in the \"replacement source\" list.</li><li>You can add multiple required replacement elements in the replacement source list in advance</li><li>The \"replacement source\" of each document is private</li><li>You can replace other elements with instances of the component by adding the component to the \"replacement source\". If you need to add a team component, please add the instance of the component to the document and add the instance as the \"replacement source\"</li></ul><p><br></p><p><strong>与官方 \"Paste to replace\"的区别：</strong></p><p><br></p><ul><li>将A替换为B时，使用’ Paste to replace‘会将B的尺寸一起替换过去。使用 A Replacer 会将A的尺寸属性继承给B。</li></ul><p><br></p><ul><li>’ Paste to replace‘ Ctr/CMD + C 复制了替换源后如果替换源的属性进行过更改，Ctr/CMD + V 替换的还是原本的元素。A Replacer 替换时始终使用替换源当前状态进行替换。</li></ul><p><br></p><p><strong>使用方式：</strong></p><ul><li>选择一个元素，然后将其添加到“替换源”列表</li><li>选择需要被替换的元素，然后点击“替换源”列表中的元素。</li><li>可以在“替换源”列表中预先添加多个需要的替换元素</li><li>每个文档的“替换源”都是私有的</li><li>你可以通过将组件添加到“替换源”来将其他元素替换为该组件的实例，如果需要添加团队组件，请将组件的实例添加到文档后将该实例添加为“替换源”</li></ul>","id":"1014541589866306695","installCount":223,"lastUpdateDate":"2021-10-24T00:42:12.219Z","likeCount":9,"name":"A Replacer","publisherHandle":"Xingzhuo","publisherId":"444804","publisherName":"Xing Zhuo","runCount":239,"viewCount":765},{"description":"<ul><li>中文句子生成器，可用来填充文本内容；</li><li>适合 UI 设计中占位符、评论、签名等文字模块；</li><li>句子来源于<a href=\"https://hitokoto.cn/\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">「一言（Hitokoto）」</a>的句子库，涵盖动画、漫画、游戏、文学、诗词、影视等各种内容。</li></ul>","id":"1014572374531097782","installCount":1125,"lastUpdateDate":"2021-08-31T17:07:52.992Z","likeCount":13,"name":"Chinese Text Generator","publisherHandle":"muxindesign","publisherId":"979648630684600665","publisherName":"MuXin","runCount":1073,"viewCount":947},{"description":"<h2>Offset frames, components and component sets by a uniform distance from their contents.</h2><p><br></p><p>Offset Resizer is for when you have a frame you want to “Resize to fit”, but you also need a margin. It works on frames, components and component sets.</p><p><br></p><p><strong>NEW – We've added an option to set the left &amp; right margin independently</strong></p><p><br></p><h2><strong>How to run Offset Resizer</strong></h2><p><br></p><p>Offset Resizer is keyboard operated.</p><p><br></p><p><strong>→</strong> Select the frame (or frames) you want to resize.</p><p><strong>→</strong> Type <code>⌘</code> + <code>/</code> to open Figma’s quick actions search bar (or <code>Ctrl</code> + <code>/</code> if you are on Windows).</p><p><strong>→</strong> Type “Offset” to search for and run the plugin.</p><p><strong>→</strong> Enter the offset you want to apply, or select one of the preset values.</p><p><strong>→</strong>&nbsp;Hit&nbsp;<code>Enter</code>&nbsp;to run the plugin, or&nbsp;<code>Tab</code>&nbsp;to enter a separate left &amp; right margin.</p><p><br></p><p><em>_</em></p><p><br></p><p><em>Many thanks to&nbsp;</em><a href=\"https://www.figma.com/@qurle\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\"><em>Nick Qurle</em></a><em>&nbsp;for his help on the latest update.</em></p>","id":"1014823942756498831","installCount":7274,"lastUpdateDate":"2021-12-23T12:22:46.013Z","likeCount":195,"name":"Offset Resizer","publisherHandle":"perrysmotors","publisherId":"3736694","publisherName":"Giles Perry","runCount":4137,"viewCount":18365},{"description":"<p>This plugin allows you to update the styles and logos of Marriage Pact assets to reuse your design for other colleges. Aside from creating two components and changing paint styles, this plugin will not mutate your Figma file in any way.</p><p><br></p><p><strong>Colors</strong></p><p>Your file should already have color styles with a hierarchy relatively like \"[Print/Digital/Text] &gt; [Primary/Secondary]\". If not, clicking any colored square should initialize them with the appropriate brand colors.</p><p><br></p><p><strong>Logo</strong></p><p>When clicking \"<strong>Update Logo</strong>\", the plugin looks for the group \"Logos/Editable Digital Logo\" on the <strong>first page</strong> and creates (or updates) the components \"Digital Logo\" and \"Print Logo\", which are scalable copies of whatever lies in Editable Digital Logo.</p><p><br></p><p>If your file doesn't have any such component, \"Update Logo\" will display an error in the plugin, and no action will be taken.</p><p><br></p><p>---</p><p>If you have any questions, feel free to contact jerryh2@stanford.edu.</p>","id":"1015478141131019294","installCount":61,"lastUpdateDate":"2021-09-03T04:47:12.191Z","likeCount":4,"name":"MP Asset Generator","publisherHandle":"jerryhong","publisherId":"1717197","publisherName":"Jerry Hong","runCount":50,"viewCount":236},{"description":"<p>Elements for Figma. More than 100K + Elements for the free and daily updates. With love by Mr.Dat Download more figma resource: <a href=\"https://ui4free.com/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">ui4free.com</a></p>","id":"1015573996486828177","installCount":3491,"lastUpdateDate":"2021-12-18T16:04:42.429Z","likeCount":46,"name":"Elements","publisherHandle":"mrdat","publisherId":"73","publisherName":"Mr.Dat","runCount":4009,"viewCount":5456},{"description":"<p>Join the top brands and agencies using Vizard to scale their creatives.</p><p><br></p><p>✅ Handoff ✅ Personalization at scale ✅ Creative Automation</p><p><br></p><h2><strong>Designers</strong></h2><p>Look, we know your time is precious!</p><p>You don't enjoy talking to the marketing fellas, do you? They want you to center-align a triangle in a circle; they don't really know what a visual center is!</p><p><br></p><p>Vizard lets you keep control of design guidelines while saving you all the time of going back &amp; forth with marketers.</p><p><br></p><p>You already handled the developers with Figma/Zeplin, good job! 👏 Marketers are your mile. This is your true&nbsp;<em>fire &amp; forget!</em></p><p><br></p><p><strong>Features</strong></p><ul><li>Handoff designs to other stakeholders while keeping your Figma designs intact</li><li>Seamlessly collaborate with marketers</li><li>Save your precious time by doing things ONCE!</li></ul><p><br></p><p>Now, please skip the next section. Promise?</p><p><br></p><h2><strong>Marketers</strong></h2><p>Here is our little secret -&nbsp;<em>We really made Vizard for you! Sssshhh..!</em>&nbsp;We are giving you control to own your assets &amp; the freedom to make unlimited versions of them without bothering the designers. No need to learn a design software &amp; yet be able to generate thousands of variations on-brand!</p><p><br></p><p><strong>Features</strong></p><ul><li>Scale your design workflow</li><li>Generate unlimited variations without involving designers</li><li>No need for design knowledge or extra training</li></ul><p><br></p><p><strong>How to use</strong></p><ol><li>Sign-up on <a href=\"https://studio.vizardapps.com\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://studio.vizardapps.com</a></li><li>Install Vizard Figma Plugin</li><li>Select one or more Frames that you would like to share with the marketing team, run the plugin</li><li>(First time only) Click on 'Connect Vizard'. It will open authorization page in browser. Click on 'Authorize Figma'</li><li>If the preview looks good, click 'Send to Vizard'. That's it!</li><li>The design will be available to you &amp; your marketing team under <strong>Your Templates</strong> on <a href=\"https://studio.vizardapps.com\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://studio.vizardapps.com</a></li></ol><p><br></p><p><strong>Known issues</strong></p><ul><li>Mixed styling in text is currently not supported</li><li>Currently, only Google fonts are supported. All non-google fonts are converted to Fira Sans font</li><li>Figma Arrow elements get imported as straight lines</li><li>Only outside stroke is supported. Inside &amp; center strokes get converted to outside strokes</li></ul><p><br></p><p>For questions &amp; suggestions, please reach out to us at&nbsp;<a href=\"mailto:hello@vizardapps.com\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">hello@vizardapps.com</a></p><p><br></p><p>Learn more about Vizard at <a href=\"http://www.vizardapps.com\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">www.vizardapps.com</a></p>","id":"1015600976971251880","installCount":288,"lastUpdateDate":"2021-12-19T12:11:47.006Z","likeCount":8,"name":"Vizard -> Design handoff for marketers","publisherHandle":"vizard","publisherId":"1015072611461411277","publisherName":"Vizard","runCount":205,"viewCount":1395},{"description":"<p>The Sizze plugin makes it ten times easier to develop your products. Speed up the mobile app development process by quickly converting design into React Native code with Sizze.</p><p><br></p><p><strong>Skip the coding part</strong></p><p>The Sizze plugin can instantly convert your mobile app design into React Native code. You no longer need to write code from scratch.</p><p><br></p><p><strong>Clean structure</strong></p><p>The whole structure and names of elements in the layout are repeated in the code, which gives convenient navigation in the project.</p><p><br></p><p><strong>Convertible components</strong></p><p>All components created in Figma will be faithfully converted to React Native code components.</p><p><br></p><p><strong>Other features included:</strong></p><p><br></p><p>Auto Layout</p><p><br></p><p>All components assembled in Auto Layout mode turn into elements that are easy to use for building dynamic lists and connecting backends.</p><p><br></p><p>Constraints&nbsp;</p><p><br></p><p>We have developed algorithms to adapt layouts for all application screens. Just add the constraints property, and you will see how easy it is.</p><p><br></p><p>Scroll and grid&nbsp;</p><p><br></p><p>Create dynamic content directly from your prototypes. All you need to do is write properties to elements, and you'll get results without any coding.</p><p><br></p><p><strong>Learn more</strong>: https://www.sizze.io</p>","id":"1016243269511956141","installCount":5473,"lastUpdateDate":"2022-07-04T12:40:11.451Z","likeCount":182,"name":"Sizze - Figma to React Native","publisherHandle":"sizze","publisherId":"1016239188351096318","publisherName":"Sizze","runCount":5196,"viewCount":20392},{"description":"<p><strong>QA for your designs! Spend less on checking, earn more on automation.</strong> Save from 3 to 10 hours monthly on finding issues in your design.</p><p><br></p><p><strong>In case there is a need to implement the rules that are not a part of the plugin: </strong></p><p>We can develop a personalized version of Formalist meeting these standards. Let us know if we can add custom checks for your needs: write a letter to <a href=\"mailto:support@formalistplugin.com\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">support@formalistplugin.com</a>.</p><p>Note: you should <a href=\"https://formalist.gumroad.com/l/formalist\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">subscribe «Pro»‎ or «Organisation» plan</a> to get this feature.</p><p><br></p><p><strong>Formalist looks for common mistakes in Figma designs</strong></p><p>The idea behind it is simple, and based on what software engineers call a linter: The plugin runs through a list of rules, checking the Figma file for errors. If the designer has, for example, forgotten to name layers, use Figma styles, or fractional coordinates, the plugin will hunt them, find them, and help fix them.</p><p><br></p><p><strong>In free mode you will have these checks for 15 free scans:</strong></p><ul><li>The object doesn't use the style in the font, fill, stroke, effects</li><li>Fonts less than 12px</li><li>Fractional coordinates and size</li><li>The default name of the object, property, or variant</li><li>Something's wrong with the component or the instance</li><li>The parent component was deleted</li><li>Too much Auto-layouts</li><li>Missing \".base\" in component's name</li><li>Empty auto-layout in a component</li><li>Using different colors or fonts in the same text box</li></ul><p><br></p><p><strong>After 15 scans only these checks will be available:</strong></p><ul><li>Fonts less than 12px</li><li>Fractional coordinates</li><li>Fractional size</li><li>Default names</li></ul><p><br></p><p><a href=\"https://www.figma.com/community/file/1030532442821235127\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\"><strong>Try out the demo project to learn more about plugin!</strong></a></p><p><strong>Note</strong>: duplicate the file from the link above to your drafts to try the plugin</p><p><br></p><p>Stay tuned for the updates.</p><p><br></p><p>Looking for those, who made this? Here we are:</p><p>Nikita Bryuzgin</p><p>Danila Mikhaltsov</p>","id":"1016769583931337913","installCount":1028,"lastUpdateDate":"2022-04-10T18:48:49.501Z","likeCount":37,"name":"Formalist: Progressive Design Linter","publisherHandle":"aprilworkteam","publisherId":"1005177715583766875","publisherName":"April","runCount":917,"viewCount":4195},{"description":"<p>Reorder a frame's children by their X or Y position (from right to left, top to bottom, etc).</p><p><br></p><p>To use:</p><p><br></p><ol><li>Select one or more frames with child nodes.</li><li>Run the plugin</li><li>Select a direction and press \"Reorder\"</li></ol><p><br></p><p><br></p><p><br></p><p><br></p>","id":"1016775617158948031","installCount":139,"lastUpdateDate":"2021-09-12T14:22:05.023Z","likeCount":2,"name":"@sposhe/reorder","publisherHandle":"sposhe","publisherId":"950091864463167533","publisherName":"Sean O'Shea","runCount":192,"viewCount":682},{"description":"<h4>Remix Icon is a set of open-source neutral-style system symbols elaborately crafted for designers and developers.</h4><h4><br></h4><p><strong>This is not an official plugin, I just love the project and wanted to help out</strong></p><p><br></p><p>Website: <a href=\"https://remixicon.com/\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">https://remixicon.com/</a></p><p><br></p><p>This plugin is open source: <a href=\"https://github.com/milos5593/figma-plugin-remix-icons\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">https://github.com/milos5593/figma-plugin-remix-icons</a></p>","id":"1017064001014586889","installCount":5359,"lastUpdateDate":"2021-09-07T13:44:07.004Z","likeCount":23,"name":"Remix Icon","publisherHandle":"milos_vujinic","publisherId":"24423","publisherName":"Milos Vujinic","runCount":5529,"viewCount":3608},{"description":"<h2>Ghost</h2><p>Ghost is a lightweight plugin that converts high fidelity mockups to loading or “skeleton” screens.</p><h2><br></h2><h2>How it Works</h2><p>Ghost detects all text and shape layers (i.e., rectangles, ellipses, vectors, frames, etc.) selected. It then measures their dimensions before replacing them with rectangles; the original layers are removed. To generate a layout faithful to the original, Ghost removes auto-layout, thereby preventing some of the anomalies that occur when inserting children into frames.</p><h2><br></h2><h2>Basic Usage</h2><ol><li>Select a shape, text box, or an entire screen.*</li><li>Select a color.</li><li>Ghost!</li></ol><p><br></p><p>*Note: unpredictable things can happen if you select more complex elements.</p><p><br></p><h2>Recommended Usage</h2><p>Loading is a state specific design akin to&nbsp;<code>disabled</code>&nbsp;or&nbsp;<code>destructive</code>,&nbsp;<code>hover</code>&nbsp;or&nbsp;<code>active</code>. Create a \"ghosted\" loading variant in a set of components.</p><h2><br></h2><h2>Roadmap</h2><p>I'd like to introduce a color picker—depending on whether Figma’s new input parameters add support for HTML-like inputs like&nbsp;<code>input type=color</code>.</p>","id":"1017135840453013129","installCount":20924,"lastUpdateDate":"2022-04-01T14:13:28.992Z","likeCount":721,"name":"Ghost","publisherHandle":"ckark","publisherId":"159483","publisherName":"Christopher Kark","runCount":17277,"viewCount":33164},{"description":"<p>Determining the colours can be the most challenging thing to start a project, especially a project that begins only based on the logo provided by the client.</p><p><br></p><p>We believe that projects that start earlier will result in more explorable findings.</p><p><br></p><p>With current technology we can access the colour data on the picture. Combine that with simple and yet powerful AI algorithm to extract the right accurate colours.</p><p><br></p><p>With Pikaso, we hope that it can be a solution for everyone to start something faster and more efficiently. Please, feel free to give feedback and comment! We'd like to hear from you all!</p><p><br></p><p>Buy Me a Coffee: <a href=\"https://www.buymeacoffee.com/terimakasih\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://www.buymeacoffee.com/terimakasih</a></p><p>Saweria: <a href=\"https://saweria.co/terimakasihh\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://saweria.co/terimakasihh</a></p>","id":"1017464036112800781","installCount":548,"lastUpdateDate":"2021-09-08T16:50:17.207Z","likeCount":15,"name":"Pikaso","publisherHandle":"danieldanuega","publisherId":"880773412357132576","publisherName":"Daniel Danuega","runCount":451,"viewCount":1586},{"description":"<p>Much like how components work on the web, Slot Editor lets you make any content within a component a slot, allowing you to make changes without effecting other instances.</p><p><br></p><h2>Making a slot</h2><p><br></p><ol><li>To make a slot, select one or more objects within a component.</li><li>Run the plugin command <code>Make Slot</code>. This will turn the content into an instance.</li></ol><p><br></p><h2>Editing a slot</h2><p><br></p><ol><li>Select one or more slots or instances with slots</li><li>Run the plugin command <code>Edit Slot</code>. This will make all slots editable in place.</li><li>When you're done making changes, click <code>Cancel</code> in the notification below.</li></ol><p><br></p><p>Alternatively you can edit any slot by selecting an instance or slot and clicking <em>Edit Slot</em> from the the Properties Panel.</p><p><br></p><h2>Removing a slot</h2><p><br></p><ol><li>Select one or more objects with slots within them.</li><li>Run the plugin command <code>Remove Slot</code>. This will not remove the object itself.</li></ol><p><br></p><p>The plugin won't remove nested slots. To remove these, run command again until there are no slots left.</p>","id":"1017768834174399811","installCount":560,"lastUpdateDate":"2021-10-02T12:08:47.961Z","likeCount":55,"name":"Slot Editor","publisherHandle":"gavinmcfarland","publisherId":"9971","publisherName":"Gavin McFarland","runCount":360,"viewCount":2267},{"description":"<p><strong>Calculator for quick actions in Figma.</strong></p><p><br></p><p>1) Open quick actions bar by pressing:</p><ul><li>Mac: <strong>⌘ Command + /</strong> or <strong>⌘ Command + P</strong></li><li>Windows: <strong>Control + /</strong> or<strong> Control + P</strong></li></ul><p>2) Type <strong>calc </strong>in your search field</p><p>3) Enter what you want to calculate 🎉</p>","id":"1017772706282712397","installCount":2640,"lastUpdateDate":"2021-09-27T07:43:30.101Z","likeCount":60,"name":"calc","publisherHandle":"girafic","publisherId":"812","publisherName":"Stas Haas","runCount":2007,"viewCount":7749},{"description":"<ul><li><strong>Batch Writer</strong></li><li><strong>Free Writer</strong></li><li><strong>Replacer</strong></li></ul><p><br></p><p><strong>LTR &amp; RTL </strong>Full Support</p><p><strong>Find &amp; Replace</strong> any text or character</p><p><strong>Auto Direction</strong> Texts</p><p><br></p><p>we would appreciate any suggestion or critics.</p><p><br></p><p>This plugin is created and developed with ❤️ for whom that makes the world beautiful.</p><p><br></p><p>Contact Us:</p><ul><li>Develop: <a href=\"https://www.figma.com/@plumber\" rel=\"noreferrer noopener nofollow\" target=\"_blank\"><strong>Plumber</strong></a> <a href=\"mailto:sha.a.wf@gmail.com\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">sha.a.wf@gmail.com</a></li><li>UI Developer: <a href=\"https://www.figma.com/@rahmani\" rel=\"noreferrer noopener nofollow\" target=\"_blank\"><strong>Rahmani</strong></a><strong> </strong><a href=\"mailto:alirezaa.rahmanii@gmail.com\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">alirezaa.rahmanii@gmail.com</a></li><li>Designer : <a href=\"https://www.figma.com/@Shendow\" rel=\"noreferrer noopener nofollow\" target=\"_blank\"><strong>Shendabadi</strong></a><strong> </strong><a href=\"mailto:mohamad.shendabadi@gmail.com\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">mohamad.shendabadi@gmail.com </a></li></ul><p><br></p><p>With special thanks to all others who helped us with their idea &amp; feedbacks.</p><p><br></p><p>استاد بزرگ 🤙</p>","id":"1017783253632600414","installCount":525,"lastUpdateDate":"2021-11-09T00:02:40.124Z","likeCount":13,"name":"XWrite","publisherHandle":"plumber","publisherId":"876190405589494923","publisherName":"Plumber","runCount":453,"viewCount":909},{"description":"<p>💪🏻 Use the native Figma »Layout Grids« together with Auto Layout!</p><p><br></p><p>✨ Supports <strong>default grids</strong>, <strong>copying from other frames</strong> and <strong>local grid styles</strong>!</p><p><br></p><p>🥳 Once you've added any grid to the Auto Layout Frame, you can edit/extend/use it the way you like, since it's the figma native grids, you can also add grids from libraries of course.</p><p><br></p><p>—</p><p><br></p><h2><strong>Feature requests? 😊 Questions?</strong></h2><p>Just hit me on Twitter (<a href=\"https://twitter.com/madebyfabian\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">@madebyfabian</a>), via mail (<a href=\"mailto:hello@madebyfabian.com\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">hello@madebyfabian.com</a>) or via an Issue on GitHub.</p><p><br></p><p>—</p><p><br></p><p>Made with ❤️ by Fabian B. in Nuremberg, Germany. Want to support me? Would appreciate that very much! <a href=\"http://buymeacoff.ee/madebyfabian\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">http://buymeacoff.ee/madebyfabian</a></p>","id":"1017842387720709543","installCount":9677,"lastUpdateDate":"2021-12-06T11:34:51.640Z","likeCount":220,"name":"Auto Layout Grids","publisherHandle":"f","publisherId":"358726","publisherName":"Fabian B.","runCount":6820,"viewCount":30578},{"description":"<p>Get rid of default numbers in layer names. Why keep Rectangle 164 if it's just a Rectangle?</p><p><br></p><p><a href=\"http://qurle.net/numbers?f\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Check out simple and pretty page with No Numbers stats.</a></p><p>It counts how many layers were renamed and how fast it was! 101% anonymous. Check at <a href=\"http://qurle.net/numbers?f\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">qurle.net/numbers</a></p><p><br></p><h2><strong>How to use</strong></h2><p><strong>Just run it</strong>&nbsp;from the Quick Actions or Plugin menu. The plugin will remove default numbers from every layer on the page.</p><p>Alternatively, you can select some layers. The plugin will rename them and their children (if any).</p><p><br></p><h2><strong>How it works</strong></h2><p>It turns default layer names like&nbsp;<em>Rectangle 420</em>&nbsp;or&nbsp;<em>Frame 69&nbsp;</em>to simple&nbsp;<em>Rectangle&nbsp;</em>or&nbsp;<em>Frame</em>. It will beautify layers mess and help to keep your files clean and pretty.</p><p><br></p><p>The plugin won't affect any other layer names. It works with frames, groups, slices and any vector objects as well.</p><p><br></p><h2><strong>Problem? Idea? Kind words?</strong></h2><p>I accept feature suggestions and ideas to improve the plugin. No need to mess with locked layers? Rename on all pages at once? Useful exceptions? If you have any ideas or issues, let me know in the comments.</p><p><br></p><p>Or you can contact me via e-mail at&nbsp;<a href=\"mailto:nick.denq@gmail.com?subject=Spotify%20to%20Figma\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">nick.denq@gmail.com</a>&nbsp;and&nbsp;<a href=\"http://t.me/qurle\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Telegram</a>.</p><p>This project is open sourced <a href=\"https://github.com/qurle/no-numbers\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">on Github</a>.</p><p><br></p><h2>&lt;3</h2>","id":"1017928273649269221","installCount":1066,"lastUpdateDate":"2021-10-14T22:57:17.865Z","likeCount":37,"name":"No Numbers","publisherHandle":"qurle","publisherId":"209417","publisherName":"Nick Qurle","runCount":992,"viewCount":1343},{"description":"<p>Instantly create linked functional color styles.</p><p><br></p><p>Instructions coming soon. In the meantime, watch <a href=\"https://www.loom.com/share/2a2dad6140d3488792e7f53d2bc88e76\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">https://www.loom.com/share/2a2dad6140d3488792e7f53d2bc88e76</a></p>","id":"1018552603902710764","installCount":846,"lastUpdateDate":"2021-09-13T18:01:09.708Z","likeCount":43,"name":"Color System","publisherHandle":"brian","publisherId":"22538","publisherName":"Brian Lovin","runCount":938,"viewCount":3712},{"description":"<p>This is a plugin that allows you to bookmark your favorite objects.</p><p>You can bookmark components you see frequently and find them quickly.</p><p><br></p><h2>usage</h2><p>Select the component and click the plus button.</p><p>You can change the order by dragging.</p><p>Use the directional keys to toggle the selection.</p><p>You can change the name, and even delete it.</p><p>This is similar to Figma's operation.</p><p>Bookmarks are managed on a project-by-project basis.</p><p><br></p><p>Data cannot be shared between the browser version and the desktop version.</p>","id":"1018556921170761713","installCount":433,"lastUpdateDate":"2022-03-17T15:27:57.545Z","likeCount":9,"name":"figmark","publisherHandle":"raihara3","publisherId":"604361","publisherName":"raihara3","runCount":388,"viewCount":1383},{"description":"<p>The heatmap can be drawn directly by clicking the mouse.</p><p>What is drawn is a png image with a transparent background.</p><p><br></p><p>website: <a href=\"https://www.nbcharts.com/heatmap/index.php\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://www.nbcharts.com/heatmap/index.php</a></p><p>video: <a href=\"https://www.youtube.com/watch?v=NnBtNbcaxuU\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://www.youtube.com/watch?v=NnBtNbcaxuU</a></p>","id":"1019087167633715500","installCount":1868,"lastUpdateDate":"2021-12-22T01:31:54.961Z","likeCount":30,"name":"NB heatmap","publisherHandle":"www_pslkzs_com","publisherId":"870114250878292665","publisherName":"NB Charts","runCount":2029,"viewCount":3856},{"description":"<p><a href=\"https://are.na\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">Are.na</a> ↔ Figma, download and upload content from and to your Are.na channels.</p><p><br></p><p><em>You'll need to have an active Are.na account in order to use the plugin and will need to generate an access token to authenticate. An are.na access token can be generated at the following website: </em><a href=\"https://arena-token-gen.vercel.app\" rel=\"noreferrer noopener nofollow\" target=\"_blank\"><em>https://arena-token-gen.vercel.app</em></a><em>.&nbsp;</em></p><p><br></p><p>Learn more about <a href=\"https://are.na\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">are.na</a>. </p><p>Are.na official partner plugin built by <a href=\"https://56.digital\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">56</a>.</p><p><br></p>","id":"1019249999442600461","installCount":391,"lastUpdateDate":"2021-09-13T14:17:30.581Z","likeCount":27,"name":"Are.na","publisherHandle":"671c105d_bbd9_4","publisherId":"1009907736730785085","publisherName":"56","runCount":274,"viewCount":1079},{"description":"<p>Carousel previewer for social media. Comment if you would like to have a preview for more platforms. Also, there's room for improvements, so feel free to contact me.  </p>","id":"1019889208033654941","installCount":1961,"lastUpdateDate":"2021-09-15T08:38:01.834Z","likeCount":19,"name":"Carousel preview","publisherHandle":"razvanpop","publisherId":"848220449501777587","publisherName":"Pop Razvan","runCount":2298,"viewCount":3758},{"description":"<p>Chart Maker is a chart plugin based on Nivo. In addition to the chart components from Nivo, Chart maker comes with an easy-to-learn configuration GUI that allows you to change parameters and generate mock data. This plugin is in development and we welcome your feedback via comments or email. Many thanks!</p><p><br></p><p>View updates <a href=\"https://burnt-elderberry-505.notion.site/Bugfix-cae79d86b0154980a40560af24a39463\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">here</a>.</p><p><br></p><p>Chart Maker 是一个基于 Nivo 的 Figma 图表配置插件。在 Nivo 图表组件的基础之上，Chart Maker 提供了可调整图表属性以及生成模拟数据的图形界面。此插件仍在开发当中，欢迎通过评论或邮箱给我们提供反馈。</p><p><br></p><p>Nivo: <a href=\"https://nivo.rocks\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">https://nivo.rocks</a></p><p>My email address: <a href=\"mailto:c.chen.ed5557@gmail.com\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">c.chen.ed5557@gmail.com</a></p>","id":"1019974184922505532","installCount":10286,"lastUpdateDate":"2021-12-08T15:16:44.537Z","likeCount":80,"name":"Chart Maker","publisherHandle":"chen_ed5557","publisherId":"1945589","publisherName":"Chen Chen","runCount":11824,"viewCount":20903},{"description":"<p>Accelerate your design to code journey. Style your next OutSystems application directly in Figma.</p>","id":"1020355261360565972","installCount":556,"lastUpdateDate":"2021-11-15T09:54:34.688Z","likeCount":11,"name":"OutSystems UI Plugin","publisherHandle":"hiinteractive","publisherId":"988710916738897619","publisherName":"Pedro Oliveira / Hi INTERACTIVE","runCount":603,"viewCount":1229},{"description":"<h2>Generate evenly balanced columns from long form text</h2><p><br></p><h2>✨ To Use</h2><ul><li>Run the plugin</li><li>Select an element containing text</li><li>Update settings if required</li><li>Click 'Create Columns'</li></ul><p><br></p><h2><strong>✨ </strong>Notes</h2><ul><li>This plugin will work on any text element</li><li>Columns are created without splitting words</li><li>If only one text style is used it will be used in the newly created columns. Due to Figma's api, if multiple text styles are used in the reference element, the default font style (Roboto) will be used in the new columns instead.</li><li>Due to the way Figma returns text strings, soft returns (<code>&lt;br&gt;</code>) are ignored. Unfortunately I'm not sure if there is a fix for this until they update the api.</li><li>The <strong>Prioritise Paragraphs</strong> option ensures paragraphs are not split</li><li>The <strong>Prioritise Even Split</strong> option ensures each column has an even amount of words (the end result will likely need some manual finessing depending on your design)</li></ul><p><br></p><h2>❌ If you encounter any errors ❌</h2><ul><li>Any time the plugin does not work, the cause is most likely due to invisible/zero width characters in your text element (this happens if you work between Mac and PC or Word and Figma, where invisible characters can carry across)</li><li>To check if this is the case, you can open up the console by clicking Plugins &gt; Development &gt; Open console. Copy and paste the text string in the console log to <a href=\"https://regex101.com/\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">https://regex101.com/</a>. If there are any weird characters in there you'll see them highlighted.</li><li>If this happens to you please submit an issue on Github so I can fix it in the regex! Thank you.</li></ul><p><br></p><p>---</p><p>♡ If you run into any bugs, have feature requests, or would like to improve on the plugin please submit an issue on Github. 😄</p>","id":"1020700094489447475","installCount":2950,"lastUpdateDate":"2021-11-27T06:00:28.987Z","likeCount":35,"name":"Text to Columns","publisherHandle":"jaclyntan","publisherId":"654690","publisherName":"Jaclyn Tan","runCount":3202,"viewCount":5979},{"description":"<p>Dead simple to use screen recording tool.</p><p><br></p><p>Berrycast your colleagues.&nbsp;</p><p>It’s more productive.</p><p><br></p><p>The ability to share what’s on your screen within Figma and FigJam collaborations with your colleagues has never before been so easy. With Berrycast, simply hit the record button and add your spoken narrative. Your team will be more productive, and your message will be clearer than ever before.&nbsp;</p><p><br></p><p>Get started now &gt; berrycast.com.</p><p><br></p><p>Our mission is to make every second of your life more productive. We believe that starts with clear communications supported by the most appropriate tools.</p><p><br></p><p>Berrycast is a lightweight extension and native app combo that helps you share messages on your screen, using your voice and your face (both optional) to support your message. By clearly being able to show and articulate your user experience, viewers can learn and understand what you are trying to convey.&nbsp;</p><p><br></p><p>There’s no longer any need to download an app and then create a video that needs to be uploaded to YouTube. Create and share clear video messages in less time than it would take to type an email.&nbsp;</p><p><br></p><p>It takes 5 easy steps to Berrycast:</p><ol><li>Hit record</li><li>Strut your stuff (narrate if desired while showing the screen)</li><li>Stop the video</li><li>Copy the automatically-created URL</li><li>Share away!&nbsp;</li></ol><p><br></p><p>How can you use Berrycast to improve productivity? Let us count the ways.</p><p><br></p><ol><li><strong>Designs</strong>: As you iterate on your app’s design, recruit your teammates to provide feedback on their own time and at their own convenience. Easily highlight specific elements and narrate the feedback, preventing misunderstandings and confusion, and saving yourself from unnecessary and gruelling review meetings.</li><li><strong>Onboarding</strong>: Easily record hellos and welcomes to new teammates, communicate goals and progress, saving meeting times for real meetings. Using a new team collaboration tool? Teach your colleagues how to use the product with a quick Berrycast that can be watched at their convenience at varying speeds.</li><li><strong>Technical support</strong>: Got an issue with something? Record the issue, get the URL, and send it to your tech team to evaluate. This is also perfect for customers to communicate what design concerns they may be observing in your product to improve overall user experience.&nbsp;</li></ol>","id":"1020727956315288661","installCount":505,"lastUpdateDate":"2021-09-17T16:08:48.519Z","likeCount":3,"name":"Berrycast: Simple Screen Recorder & Sharing Tool","publisherHandle":"dbertholet","publisherId":"2063309","publisherName":"Damien Bertholet","runCount":690,"viewCount":1753},{"description":"<p>Automate keyboard and controller prototypes in seconds with Prototyper.</p><p><br></p><p>Choose from many navigation presets (D-Pad, LS, RS, Arrow Keys, etc.), create custom binds, add transitions, automatically move navigation focus with variants and more. Prototyper completely automates the most tedious parts of creating prototypes.</p><p><br></p><p>Get started with a <a href=\"https://www.youtube.com/watch?v=AVZ_HMK5n8o\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">quick overview</a>.</p><p><br></p><h2><strong>Generate Prototypes</strong></h2><p>Generate a prototype to navigate an entire screen of your design. Select the component instances you'd like to navigate in your screen and click <em>Generate</em>. Prototyper will automatically create all intermediate navigation frames and interactions for your prototype.</p><p><br></p><h2><strong>Link Frames</strong></h2><p>Connect multiple screens of your design into a prototype. Select all the screens you'd like to navigate and click <em>Link</em>. Prototyper will automatically create interactions between your screens.</p><p><br></p><h2>Navigating Your Prototype</h2><p>Prototyper determines the direction of navigation in your prototype based on how your component instances or frames are arranged. For example: if you are prototyping a grid of items, then Prototyper will assign up, down, left and right navigation based on the neighbors of each item.</p><p><br></p><h2><strong>Supported Devices</strong></h2><p>Keyboard and Xbox One, PlayStation and Switch Pro controllers.</p><p><br></p><h2>Open Source</h2><p>Prototyper is <a href=\"https://github.com/aashreys/prototyper\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">open source</a> and contributions are welcome!</p><p><br></p><h2>Contributors</h2><ul><li><a href=\"https://twitter.com/atokmakchiev\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Alex Tokmakchiev</a>&nbsp;- PlayStation Controller Keycodes</li><li><a href=\"https://twitter.com/AntoinePlu\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Antoine Plu</a>&nbsp;- PlayStation Controller icons</li></ul>","id":"1020894954864594118","installCount":970,"lastUpdateDate":"2022-05-28T06:42:38.210Z","likeCount":43,"name":"Prototyper","publisherHandle":"aashreys","publisherId":"697643","publisherName":"Aashrey Sharma","runCount":931,"viewCount":4541},{"description":"<h2><strong>Close any plugin like a boss.</strong></h2><p>The smallest functional plugin ever, with a single line of code.</p><p><br></p><h2><strong>How To Use:</strong></h2><ol><li>Open any plugin</li><li>Run <code>Close Plugin</code></li></ol><p><br></p><h2>Suggested Shortcut: ⇧+RightClick</h2><p><br></p>","id":"1020938420011369716","installCount":622,"lastUpdateDate":"2021-09-18T08:28:49.948Z","likeCount":27,"name":"Close plugin","publisherHandle":"MrBiscuit","publisherId":"1241","publisherName":"Mr.Biscuit","runCount":617,"viewCount":1778},{"description":"<p>Copy SVG source to clipboard with one click.</p><p><br></p><ul><li>\"Mono\" button removes height, sets width to 100% (or remove width) and change fills to currentColor</li><li>\"Poly\" button removes height, sets width to 100% (or remove width) and makes ids unique</li></ul><p><br></p><p><strong>If you wanna donate, you're welcome:</strong></p><p>crypto (all evm-chain, any assets): <em>0x6f6291d998ecde8a17c444f7171924c07b11b2c9</em></p><p>yoomoney (ru): <a href=\"https://yoomoney.ru/to/41001353934621\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://yoomoney.ru/to/41001353934621</a></p>","id":"1020972132670952724","installCount":741,"lastUpdateDate":"2021-10-21T20:51:29.053Z","likeCount":5,"name":"One Click SVG","publisherHandle":"93e7459a_2a2d_4","publisherId":"518481","publisherName":"konfuzz","runCount":1073,"viewCount":1458},{"description":"<p>Design Mirror is a plugin that sync your artworks with mobile app. You can preview your design on mobile phone in real time.</p><p><br></p><p>This plugin works with a desktop app and a mobile app which can be download from https://www.psmirror.cn?locale=en</p><p><br></p><p>Features:</p><p><br></p><ol><li>connect with wifi network, preview your artworks in many devices</li><li>usb cable connection, faster and more stable</li><li>useful features to ease previewing&nbsp;&nbsp;</li></ol><p><br></p><p><br></p><p>Design Mirror是一款运行在Figma上的插件，可以让你通过手机实时预览你的设计稿，它需要和一个桌面客户端以及手机app一起工作，你可以在这里下载对应的客户端https://www.psmirror.cn?locale=zh</p>","id":"1021010214021436737","installCount":1133,"lastUpdateDate":"2022-05-17T13:22:36.727Z","likeCount":13,"name":"Design Mirror","publisherHandle":"cutterman","publisherId":"843881","publisherName":"emptykid","runCount":1461,"viewCount":2114},{"description":"<p>Speed up your design process with powerful automations. Use Figma Workflows to automate the boring stuff.</p><p><br></p><p>Open Source repo here https://github.com/corpulent/figma-workflows.  Feel free to report bugs, request features, or just ask questions.</p>","id":"1021090917104575891","installCount":782,"lastUpdateDate":"2022-03-23T19:44:26.610Z","likeCount":59,"name":"Figma Workflows","publisherHandle":"outermeasure","publisherId":"916022160243868557","publisherName":"outermeasure","runCount":711,"viewCount":3300},{"description":"<p><strong>Your Handy Color CoWorker</strong></p><p><br></p><p>Get Access to thousands of color palettes. Explore latest palette trends. Just search any color and get work-ready results or go ahead and customize one.</p><p>Discover the best handpicked collection of beautiful color gradients. Find your favorite one and apply it with a single Click!</p><p>Explore collection of official brand color palettes. Get inspired by Popular color selections and use them with a single click!</p><p>Check Colors contrast check and make sure you selected the right colors for your design with a simple workflow!</p><p><br></p>","id":"1021330896087182877","installCount":1545,"lastUpdateDate":"2021-09-19T08:10:21.712Z","likeCount":20,"name":"Coco","publisherHandle":"uxplugins","publisherId":"1017481645849358531","publisherName":"uxplugins","runCount":1360,"viewCount":2560},{"description":"<p><strong>Bring Illustrator’s warping features to Figma.</strong></p><p>This premium plugin lets you use Smudge, Bulge, Free transform and 9 more tools for distorting your designs.</p><p><br></p><p>See preview here: <a href=\"https://figmawarp.tools\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://figmawarp.tools</a></p><p><br></p><p><strong>Full list of available tools</strong></p><p>Smudge, Twirl, Bulge, Pinch, Free transform, Arc transform, Arc upper transform, Arc lower transform, Arch transform, Flag transform, Fish transform, Wave transform</p><p><br></p><p><strong>Free trial</strong></p><p>This premium plugin comes as a free trial. You can insert the warped result three times, after that you need to <a href=\"https://figmawarp.tools/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">buy the full version</a> to continue using the plugin.</p><p><br></p><p><strong>Usage</strong></p><ul><li>Select the group/frame/layer you want to transform.</li><li>Run the plugin</li><li>Transform the design using the tools available.</li><li>When you’re happy with the result, tap the “Insert” button to place it on the page.</li></ul>","id":"1021499620946646699","installCount":14536,"lastUpdateDate":"2022-02-11T17:07:47.466Z","likeCount":238,"name":"Warp Tools","publisherHandle":"petter","publisherId":"1999271","publisherName":"Petter Nilsson","runCount":15068,"viewCount":17993},{"description":"<p>This plugin simply converts layer names to class and id attributes when exporting to SVG. Just add a dot before the name you want to get as a class. You can specify more than 1 class. You can also combine ID and classes. It is very convenient when you want to manage SVG via CSS and JS.</p>","id":"1021742684310785880","installCount":555,"lastUpdateDate":"2021-10-05T12:33:59.932Z","likeCount":18,"name":"SVG .class export","publisherHandle":"m2_ru","publisherId":"1027145575128258981","publisherName":"M²DESIGN","runCount":569,"viewCount":1475},{"description":"<p>Correct all spelling &amp; grammar mistakes in a click.</p><p><br></p><p>No more worrying about these little mistakes ruin your design. It's just easy, smart and efficient.</p><p><br></p><p>Any questions or suggestions, contact me: nowork.app@gmail.com</p>","id":"1021747508522126171","installCount":8238,"lastUpdateDate":"2022-04-23T14:35:32.255Z","likeCount":53,"name":"GRAMMAR: Spelling & Grammar Checker","publisherHandle":"nowork","publisherId":"1021661660923531625","publisherName":"NOWORK","runCount":10059,"viewCount":9234},{"description":"<p>With this plugin you can measure time, the design still looks terrible, I know, but i'll work on that</p>","id":"1021845397866362896","installCount":135,"lastUpdateDate":"2021-09-22T14:11:47.499Z","likeCount":0,"name":"cronos","publisherHandle":"caiohenrique","publisherId":"987851242601411156","publisherName":"Caio Henrique","runCount":199,"viewCount":797},{"description":"<p>Create, save and reuse prototype interactions.</p>","id":"1021879782774011952","installCount":2050,"lastUpdateDate":"2022-05-20T13:53:46.289Z","likeCount":120,"name":"Protofly","publisherHandle":"santiagomoreno","publisherId":"570857","publisherName":"Santiago Moreno","runCount":1684,"viewCount":4863},{"description":"<p>A lean plugin that generates randomized text and numbers for multiple layers as effortlessly as possible.</p><p>This plugin was created with productivity in mind, allowing you to create randomized data for prototypes with just a few keystrokes.</p><h2><strong>How to use it</strong></h2><ol><li>Run the Random Text Generator plugin</li><li>Select the text layers</li><li>Write the text you want to use, wrapping the randomized data in as described.</li><li>Choose between Replace text (default) or attach to the beginning or end of the selected text layers.</li><li>Press return or click the Change text button. Voilà!</li></ol><h2><strong>Example uses</strong></h2><ol><li>Currency amounts → <strong>$[100-999].[10-99]</strong></li><li>Last online → <strong>Last online [1-9][d;hr;m] ago</strong></li><li>Phone numbers → <strong>+1 (800) [100-999]-[1000-9999]</strong></li><li>Status → <strong>[Online;Offline;Away;Do not disturb]</strong></li><li>Adding emails to a list of names using <em>Append after</em> → <strong>@[gmail;hotmail;yahoo;company].com</strong></li></ol><h2><strong>What's coming next</strong></h2><ul><li>Find and replace within the selected layers.</li><li>Allow faster execution of the plugin, using Parameters through Figma Quick Actions menu: ⌘ /</li></ul><h2><strong>Support or feature requests</strong></h2><p>Feel free to reach out on Twitter at <a href=\"https://twitter.com/uxjavi\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">twitter.com/uxjavi</a></p>","id":"1021887126626182197","installCount":2479,"lastUpdateDate":"2021-10-15T19:13:24.284Z","likeCount":30,"name":"Random Text Generator","publisherHandle":"uxjavi","publisherId":"3874789","publisherName":"Javier Miguelez","runCount":3027,"viewCount":3894},{"description":"<p>Create awesome real mesh gradients right inside Figma.</p>","id":"1022080009046000838","installCount":25710,"lastUpdateDate":"2021-10-15T15:17:50.864Z","likeCount":270,"name":"Mesh gradients","publisherHandle":"93faa415_788a_4","publisherId":"1022080332819931363","publisherName":"oodesign","runCount":35089,"viewCount":22830},{"description":"<p>Whatever in layers is easy to copy now , such as fills, strokes, effects, fonts ...</p><p>Copy once and choose what you want to paste.&nbsp;</p><p>No need to copy many times, just once, all you need is here.&nbsp;</p><p><br></p><p>It’s your choice now to choose what only will be pasted.</p><p><br></p><p>Any questions or suggestions, contact me: nowork.app@gmail.com</p>","id":"1022166927173641583","installCount":558,"lastUpdateDate":"2022-06-12T04:40:43.837Z","likeCount":17,"name":"Copier: copy whatever you want only","publisherHandle":"nowork","publisherId":"1021661660923531625","publisherName":"NOWORK","runCount":527,"viewCount":1630},{"description":"<p>When scaling, keeping aspect ratio is important!</p><p><br></p><p>For example, lock the aspect ratio of inner layer when scaling its outer layer.</p><p><br></p><p>It's easy to use!</p><ol><li>Add your layers to lock</li><li>Just scale as usual</li></ol><p><br></p><p><br></p><p>Any questions or suggestions, contact me: nowork.app@gmail.com</p>","id":"1022603713483830184","installCount":1131,"lastUpdateDate":"2021-12-05T10:33:51.295Z","likeCount":11,"name":"Scaler: keep aspect ratio when scaling","publisherHandle":"nowork","publisherId":"1021661660923531625","publisherName":"NOWORK","runCount":1359,"viewCount":2910},{"description":"<p>Quickly create some lorem ipsum placeholder text.</p><p><br></p><h2><strong>How to use</strong>:</h2><ul><li>Call the plugin while <strong>selecting an existing text box</strong> to change its contents to lorem ipsum placeholder text.</li><li>Call the plugin <strong>anywhere else</strong> to create a new textbox with lorem ipsum placeholder text.</li></ul><p><br></p><p>That's it!</p><p><br></p><h2>Help me help you</h2><p>If you have any questions, feedback, or bug reports with the plugin, feel free to get in touch via the \"Support\" email under the Details section.</p>","id":"1022744188040560638","installCount":3822,"lastUpdateDate":"2021-09-28T20:16:08.691Z","likeCount":11,"name":"Generate Placeholder Text","publisherHandle":"rx","publisherId":"3246973","publisherName":"Richard Lu","runCount":3992,"viewCount":5344},{"description":"<h2>Hide/Show all the private components in your file with one click.</h2><p><br></p><p>In Design Systems adding a \"_\" or \".\" to the beginning of the name to hide components from libraries is a smart way to keep complex components separated from their smaller parts.</p><p>&nbsp;</p><p>In some cases you'll also want to hide those secondary components from the design system user's eye so he doesn't get distracted with secondary information.</p><p>&nbsp;</p><p>This plugin simply hides and shows all the private components for you.</p>","id":"1023001953544725842","installCount":391,"lastUpdateDate":"2021-10-12T11:15:14.654Z","likeCount":25,"name":"Private Components","publisherHandle":"jorgefernandes","publisherId":"3124395","publisherName":"Jorge Fernandes","runCount":347,"viewCount":2765},{"description":"<p>A plugin to quickly select elements inside auto-layout frames. It allows to pick just one element and then expand the selection in a certain way. Can be useful when dealing with mockups containing long lists of blocks, such as news feeds, chat interfaces and many more.</p><p><br></p><p>Supports the commands listed below:</p><p><br></p><p><strong>Select to the Beginning</strong></p><p>Selects all the elements located before a selected one (i.&nbsp;e., those positioned above or to the left of the element in&nbsp;an&nbsp;auto-layout frame)</p><p><br></p><p><strong>Select to the End</strong></p><p>Similarly, expands a selection so as it will include the&nbsp;elements located <em>after</em> a selected one (positioned below or to the right of the element)</p><p><br></p><p><strong>Expand a Selection Backward</strong></p><p>Adds the previous element to a selection</p><p><br></p><p><strong>Expand a Selection Forward</strong></p><p>Similarly, adds the next one</p><p><br></p><p><strong>Select the First</strong></p><p>Basically, selects the first element in a list.</p><p><br></p><p><strong>Select the Last</strong></p><p>Does the same, but with the last element.</p>","id":"1023271295543606907","installCount":104,"lastUpdateDate":"2022-07-19T13:39:37.628Z","likeCount":4,"name":"Select Siblings in Auto-Layout","publisherHandle":"gnchrv","publisherId":"408559","publisherName":"Misha Goncharov","runCount":145,"viewCount":337},{"description":"<p><strong>Super smart batch selection by name, type or component instance.</strong></p><p><br></p><p>Selective Surgery is a plugin for Figma that makes bulk editing a breeze. It offers a convenient palette of methods to quickly get your hands on the layers you need. Whenever you find yourself&nbsp;<code>cmd + click</code>'ing, use Selective Surgery instead!</p><h2><br></h2><h2><strong>1) Launch the plugin</strong></h2><p><br></p><p>Use the&nbsp;<code>Plugins &gt; Selective Surgery</code>&nbsp;menu item</p><p><br></p><p>or better yet...</p><p><br></p><p>Use the quick actions bar (<code>⌘ Command</code>&nbsp;+&nbsp;<code>/</code>). Find Selective Surgery in the list!</p><h3><br></h3><h2><strong>2) Choose your operation 🔪</strong></h2><p><br></p><p><strong>➤ By Name</strong>&nbsp;- select layers by name</p><p><br></p><p>💡 Selective Surgery will aggregate all unique names in the current selection scope and provide helpful fuzzy matching.</p><p><br></p><p><em>Conditions:</em></p><p><br></p><ul><li>is</li><li>is not</li><li>include</li><li>does not include</li><li>matches regex</li></ul><p><br></p><p><br></p><p><strong>➤ By Component</strong>&nbsp;- select layers by a specific component instance</p><p><br></p><p>💡 The plugin will pull up all unique components used in the current selection scope</p><p><br></p><p><em>Conditions:</em></p><p><br></p><ul><li>is</li><li>is not</li></ul><p><br></p><p><strong>➤ By Type</strong>&nbsp;- select layers by their native Figma type</p><p><br></p><p><em>Conditions:</em></p><p><br></p><ul><li>is</li><li>is not</li></ul><p><br></p><p><em>Figma Types:</em></p><p><br></p><ul><li>Text</li><li>Rectangle</li><li>Line</li><li>Ellipse</li><li>Image</li><li>Group</li><li>Frame</li><li>Component</li><li>Component Instance</li><li>Vector</li><li>Polygon</li><li>Union</li><li>Subtract</li><li>Intersect</li><li>Exclude</li><li>Star</li><li>Slice</li></ul><p><br></p><h2><strong>3) Do something with your selection!</strong></h2><p><br></p><p><em>Examples:</em></p><p><br></p><ul><li>Bulk update text styles across deeply nested layers</li><li>Concurrently paste the same things into multiple frames</li><li>Skillfully rename all those pesky&nbsp;<code>Frame 134081</code>&nbsp;copies</li><li>...or any normal design task you might do in Figma</li></ul><p><br></p><p>-----</p><p>Made @&nbsp;<a href=\"https://www.freeassociation.is/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Free Association</a></p><p><br></p><p>Are you a design or developer passionate about tooling and designer experience? <strong>Join our team! </strong>We help design organizations at the world's top enterprises and startups level up with customized design systems, applications, automation and more.</p><p><br></p><p><a href=\"https://www.freeassociation.is/careers\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://www.freeassociation.is/careers</a></p><p><br></p>","id":"1023301829529134737","installCount":547,"lastUpdateDate":"2021-12-21T19:19:59.826Z","likeCount":35,"name":"Selective Surgery","publisherHandle":"freeassociation","publisherId":"984548327769283493","publisherName":"Free Association","runCount":568,"viewCount":1320},{"description":"<p>Optically scale and distribute logos in a grid. The algorithm takes into account the proportions of each logo so they all look great together in a grid — no matter how tall, wide, small, or large each logo may originally be. Create massive logo grids without wanting to quit design.</p><p><br></p><p><strong>How it works:</strong></p><ol><li>Select two or more objects</li><li>Choose an alignment option</li><li>Set a grid gap</li><li>Choose the number of rows you'd like</li><li>Click \"Apply Layout\" and sit back as Logo Layout does the rest</li><li>Rearrange a few logos by hand if you'd prefer a different order. Run the plugin again to restore order and alignment.</li></ol>","id":"1023743344702871419","installCount":4539,"lastUpdateDate":"2021-09-26T00:03:24.606Z","likeCount":182,"name":"Logo Layout","publisherHandle":"coryetzkorn","publisherId":"769","publisherName":"Cory Etzkorn","runCount":3837,"viewCount":6807},{"description":"<p>A plugin we use at Discord to generate \"skeleton placeholders\" for help in designing lofi screens.</p><p><br></p><p>The idea is to help focus feedback where you need it, and less on usernames, avatars, chat text, server icons, etc.</p><p><br></p><p>Currently generates:</p><p><br></p><ul><li>Messages</li><li>Server List</li><li>Channel List (voice and text)</li><li>Member List</li></ul><p><br></p><p><a href=\"https://github.com/bryanberger/figma-skeleton-generator\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">Source code on Github</a></p>","id":"1023773703747635078","installCount":1352,"lastUpdateDate":"2021-10-20T20:23:50.860Z","likeCount":70,"name":"Discord Skeleton Generator","publisherHandle":"discord","publisherId":"1508","publisherName":"Discord","runCount":1704,"viewCount":4604},{"description":"<p>(Easy)grid lets you create a grid layout in seconds and place it into Figma without the math. It can also let you quickly align and scale pre-existing elements as layout-items/cells for a quicker design flow. By using the four flexible options (columns, rows, column gap, and row gap) you can write out a layout that is the exact fit and rapidly modify until perfect.</p><p><br></p><p>How many times have you had to create a grid or layout, and found yourself spending too much time finding the correct sizes for each element, messing around with spacing to ensure it looks perfect, or having to perfectly align it? This is where the (Easy)grid plugin comes into play.</p><p><br></p><p>See <a href=\"https://easygrid-app.web.app/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://easygrid-app.web.app/</a> or continue reading to learn more about the plugin and about how to use it.</p><p><br></p><p>Support the project by duplicating or visiting the GitHub repo: </p><p><a href=\"https://github.com/eliraz003/easygrid-plugin\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://github.com/eliraz003/easygrid-plugin</a></p><p><br></p><p>You can also support me and the project by visiting <a href=\"https://www.paypal.me/elirxxatia\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://www.Paypal.me/elirxxatia</a></p><p><br></p><p><br></p><p><strong>FEATURES</strong></p><p><br></p><p>🎨 Create layouts in seconds — Create layout patterns in seconds ranging from a couple of rows or columns to creating the layout for whole tools and software.</p><p><br></p><p>🎛 <strong>[NEW FEATURE]</strong> Populate cells with components — When applying your layout to the selected layer, you may select more than one layer to populate the layouts' with its cells as the additional layers selected.</p><p><br></p><p>💾 <strong>[NEW FEATURE]</strong> Saving created layouts — Save your layout and reuse them in other Figma projects to quickly insert your most common layouts.</p><p><br></p><p>🗂 <strong>[NEW FEATURE] </strong>Pre-made Layouts — Select from 5 pre-made grids to make your design come to life even faster, these grids include: Golden Ratio, 12 Column Grid, iPad App With Sidebar, Notched iPhone Layout, and a Rule Of Thirds grid.</p><p><br></p><p>👨‍💻 Work faster, not harder — Reduce mistakes and time taken by not needing to worry about sizing or positioning your layout and letting (easy)grid handle the mathematical side of things.</p><p><br></p><p>📲 Insert to Figma In A Click — Insert the layout from the plugin directly over your selected Figma layer in a single click.</p><p><br></p><p>⏳ Remembers what you wrote — Your layout options are remembered after you move them into Figma, even after you change your selection, letting you test a layout over different sized screens, or quickly prototyping variations.</p><p><br></p><p><br></p><p><strong>CAN BE USED FOR&nbsp;</strong></p><p><br></p><ul><li>Simple Repetitive Layouts</li><li>Web / App Layouts</li><li>Creating Lists / Grids</li><li>Creating Patterns</li><li>Guides For Digital Design</li><li>Rapidly Testing Out Various Layouts</li><li>Quickly Populating Elements Without CMD+C and CMD+V And Dragging</li></ul><p><br></p><p><br></p><p><strong>TO USE</strong></p><p><br></p><ol><li>Select a layer to create the grid over, can be a rectangle or a frame.</li><li>Enter the amount of cells you want in the Grid column / Grid row fields. You can also enter the size of each cell by writing it manually (separated by spaces) either by using exact values (in points) or by using a total fraction of the grid.</li><li>Adjust the Column gap / Row gap to your liking</li><li>Optionally, you can merge cells to create a more complicated pattern, using the preview menu, drag and drop on the cells you want to create them as a single shape.&nbsp;</li><li>Press the “Apply To Selected” button to insert the grid into Figma.</li><li>(Optional) Undo (CTRL / CMD + Z) and change values if not happy with the results.</li></ol><p><br></p><p><br></p><p><strong>MORE INFORMATION</strong></p><p><br></p><p>Visit our website at <a href=\"https://easygrid-app.web.app/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://easygrid-app.web.app/</a>. We also respond to all questions and feedback posted in the comments area.&nbsp;</p>","id":"1023805574372075411","installCount":1560,"lastUpdateDate":"2022-06-02T13:59:39.499Z","likeCount":25,"name":"(Easy)Grid","publisherHandle":"elirazatia","publisherId":"692","publisherName":"Eliraz Atia","runCount":1742,"viewCount":3990},{"description":"<p>The text of the text nodes in the selection can be edited together from the plug-in window.</p><p><br></p><p><strong>Precautions for use</strong></p><p>After creating the text node, edit the name to something analog and easy to understand. If you don't, the name of the text node will change every time you edit the text, and it will not work properly.</p><p><br></p><p><strong>How to use</strong></p><ol><li>Select Frame, Group, Component, etc</li><li>Activate the plugin</li><li>Edit the text from the window</li></ol>","id":"1023935452055623724","installCount":278,"lastUpdateDate":"2021-09-26T12:49:46.702Z","likeCount":3,"name":"Text Editor In Selection","publisherHandle":"742127","publisherId":"742127","publisherName":"nju33","runCount":328,"viewCount":878},{"description":"<p>Generate vector points and bezier handles of your selected layers. Style each element to your need.</p><p><br></p><p><strong>Usage:</strong></p><ul><li>Select one or multiple direct vector layers (no groups or frames)</li><li>Customize the points and line styles to your liking</li><li>Hit \"Create\"</li></ul><p><br></p><p><strong>Supported layer types:</strong></p><ul><li>All vector layer types</li><li>Image layers</li><li>Text layers</li></ul><p><br></p><p>Keep in mind that all the selected layers will be flattened.</p><p>Feel free to contact or tag me on social media whenever you use the plugin. Would love to see this in the wild.</p>","id":"1024004436621409385","installCount":3413,"lastUpdateDate":"2021-10-09T15:25:49.970Z","likeCount":71,"name":"Vector Points","publisherHandle":"m2rt","publisherId":"903303944985929961","publisherName":"Märt Villemsaar","runCount":3268,"viewCount":5867},{"description":"<p>Is the button visible enough? Is my design too cluttered? Is the content in the right place?</p><p><br></p><p>Instantly see how users will respond to your designs - as early as a high fidelity wireframe or prototype - so you know what works and what doesn’t, before you go live.&nbsp;</p><p><br></p><p>EyeQuant is an essential product for designers to create more successful digital experiences and maximise design performance.&nbsp;</p><p><br></p><p><strong>Features&nbsp;</strong></p><p><br></p><ul><li>Attention Heatmaps&nbsp;</li><li>Clarity scores&nbsp;</li><li>Excitingness scores&nbsp;</li><li>Regions of Interest&nbsp;</li></ul><p><br></p><p><strong>How does the EyeQuant plugin work?</strong></p><p><br></p><ol><li>Select the Figma frame you want to analyse</li><li>Go to Plugins &gt; EyeQuant Inspect &gt; Analyse&nbsp;</li><li>View the results</li></ol><p><br></p><p>If you don’t have an EyeQuant account, you can try<strong> for free</strong>.</p><p><br></p><p><strong>The Tech&nbsp;</strong></p><p><br></p><p>EyeQuant’s technology fuses AI and neuroscience to simulate a 200-person study in seconds, giving you instant, actionable results.&nbsp;</p><p><br></p><p>It is the result of more than a decade of institutional academic research by leading neuro and data scientists at CalTech and the University of Osnabrück.</p><p><br></p><p>See more here —&gt; <a href=\"https://www.eyequant.com/how/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://www.eyequant.com/how/</a></p><p><br></p><p><em>Want to help improve this plugin? Send us your feedback → </em><a href=\"mailto:support@eyequant.com\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\"><em>support@eyequant.c</em>om</a></p>","id":"1024395026904248839","installCount":527,"lastUpdateDate":"2022-06-28T11:30:27.952Z","likeCount":21,"name":"EyeQuant Inspect","publisherHandle":"f0d56b92_bfa4_4","publisherId":"1068896553704548307","publisherName":"eyequant","runCount":721,"viewCount":1281},{"description":"<h2><strong>Create Color Palettes based on great Design Systems like: Material, Atlassian, Orbit and Ant Design!</strong></h2><p><br></p><p>Foundation: Color Generator is the tool kit that helps you create fast color palettes, using state of the art Design Systems as reference.</p><p><br></p><p>A great tool to kickoff projects and to create color tokens to share with developers.</p><p><br></p><p>Ensure your colors are accessible by checking the contrast ratio right from the shade generator.</p><p><br></p><p>Render your color schemes and add them to your styleguide!</p><p><br></p><h2><strong>Features</strong></h2><p>Main features:</p><ul><li>Profiles</li><li>Contrast Checker</li><li>Color Tokens</li><li>Styles Generator</li><li>Palette render</li><li>Color Picker</li><li>Color name generator</li></ul><p><br></p><h2><strong>Suggestions</strong></h2><p>If you have any suggestions/features/profiles you want to be added please send me an email to:</p><p><a href=\"mailto:work@jorge-fernandes.com\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">work@jorge-fernandes.com</a></p>","id":"1024452006068794933","installCount":6567,"lastUpdateDate":"2022-02-10T16:04:26.597Z","likeCount":128,"name":"Foundation: Color Generator","publisherHandle":"jorgefernandes","publisherId":"3124395","publisherName":"Jorge Fernandes","runCount":7339,"viewCount":6925},{"description":"<p>Update all auto-layout properties across your entire current active page. No more random instances of 18px item-spacing, or the odd 22px left padding.</p><p><br></p><p>No need to hunt down all those frames, highlight them and change the properties. Also no need to dig into those auto-layout child frames that live inside auto-layout parent frames.</p><p><br></p><p>Type once, change them all in an instant.</p>","id":"1024951132590065786","installCount":948,"lastUpdateDate":"2022-07-16T09:02:01.448Z","likeCount":29,"name":"Allto››layout","publisherHandle":"_kejk","publisherId":"3878431","publisherName":"Karl Koch","runCount":866,"viewCount":2736},{"description":"<h2>Простой, быстрый и удобный инструмент для коммуникации между дизайнером и клиентом</h2><p>Оставляй комментарии и рисунки прямо в макете, отслеживай все изменения.</p>","id":"1025014984624078048","installCount":75,"lastUpdateDate":"2021-11-29T19:47:03.561Z","likeCount":5,"name":"DesignGo","publisherHandle":"designgo","publisherId":"618539","publisherName":"Смирнов Максим","runCount":131,"viewCount":480},{"description":"<h2>Select same property and Find Replace !</h2><p><br></p><p>This plugin allows you&nbsp;select layers by layer name、layer type、size、width、height、x、y、position、font size 、characters~</p><p><br></p><h2>Replace： Find All the text <strong>content </strong>or layer name ,and then quickly replace with your new input values</h2><p><br></p><h2>Tips to use</h2><p>1：replace panel search then click keyboard ← and → to switch next and previous layer</p><p><br></p><p>2:select panel right click the item menu，you will find some new features</p><p><br></p><p>hope you like this plugin ,<a href=\"https://paypal.me/kai1688\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">buying me a drink on PayPal</a></p><p><br></p><h2>你可以通过图层名字、类型、大小、位置、文本内容、文字大小快速选择相同图层</h2><h2><br></h2><h2>查找替换：查找当前页面的所有文本内容，并且替换</h2><p><br></p><p>希望你喜欢这个插件！欢迎<a href=\"http://junyuewl.com/kai/fl/like.html\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">赞赏我们</a>💖</p><p><br></p><h2>使用技巧：</h2><p>1：在图层面板，右键一些按钮【一般来说是位置相关的按钮才有】，可以进行微调选择，±1到±7</p><p><br></p><p>2：替换面板，按←和→方向键可以切换上下图层</p>","id":"1025595135347505021","installCount":408,"lastUpdateDate":"2022-06-24T09:49:37.227Z","likeCount":9,"name":"A Tools 一个小工具","publisherHandle":"1050142515","publisherId":"3396291","publisherName":"1050142515","runCount":481,"viewCount":1468},{"description":"<p>Select frames or variants, run the plugin and in a blink of an eye, you will have 3 frames of each selection with borders around the children frames and variants.</p><p>&nbsp;</p><p>Each frame created is one nesting level deeper than the other.</p><p>the 4th and the last frame (furthest to the right) will contain all the variants of components found in each selection.</p><p>&nbsp;</p><p>With the help of this plugin, the developer and the designer will have the ability to see clearly the layout of each frame and the variants of components that were used to build it.</p><p>&nbsp;</p><p>All that without extra effort.</p><p><br></p><h2><strong>For more plugins and gifs with usage examples:</strong></h2><h2><a href=\"https://figmaop.netlify.app/\" rel=\"noreferrer noopener nofollow\" target=\"_blank\"><strong>FigmaOP - open source Figma plugins-&gt;</strong></a><strong> </strong></h2><h2><br></h2><h2><a href=\"https://www.buymeacoffee.com/TalmSnir\" rel=\"noreferrer noopener nofollow\" target=\"_blank\"><strong>Support My Work on Figma Plugins-&gt;</strong></a></h2><p><br></p><p>**Credits go to<a href=\"https://www.figma.com/@aravinddesign\" rel=\"noreferrer noopener nofollow\" target=\"_blank\"> @aravinddesign</a> for the design used in the cover art - taken from the Landify UI kit.</p>","id":"1025794954481152114","installCount":1264,"lastUpdateDate":"2021-11-07T11:12:30.241Z","likeCount":53,"name":"Layout Handoff","publisherHandle":"TalmSnir","publisherId":"893556449536344028","publisherName":"Tal Snir","runCount":1242,"viewCount":3871},{"description":"<p>New Effect with Figma!</p><p>Make Everything into 3D Wave!</p><p>Soften everything like fabric~</p><p><br></p><p>Just inspire your creativity!</p><p><br></p><p>Any questions or suggestions, contact me: <a href=\"mailto:nowork.app@gmail.com\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">nowork.app@gmail.com</a></p>","id":"1026141971534783843","installCount":16553,"lastUpdateDate":"2022-05-22T03:19:31.144Z","likeCount":239,"name":"3D Wave: Soften everything like fabric","publisherHandle":"nowork","publisherId":"1021661660923531625","publisherName":"NOWORK","runCount":15912,"viewCount":20966},{"description":"<p>Set of tools to save you from redoing the same thing over and over again while designing or using your favorite icons.</p><p><br></p><p>Tools:</p><ul><li>Save frame sizes and icons max-width preferences in a form of a button to have for future use.</li></ul><p>save as many preferences as you like and delete unused ones.</p><ul><li>Flatten multiple selected icons.&nbsp;</li><li>Flatten all icons on a page.</li><li>Duplicate multiple selected icons and rescale them to different sizes.</li></ul><p><br></p><p>All of the above with a press of a button!!!</p><p><br></p><p>Last but not least, you have the option to preserve the stroke width in each resize or, you can let the plugin do the computations for you and change the weight according to the scaling ratio.</p><p><br></p><h2><strong>For more plugins and gifs with usage examples:</strong></h2><h2><a href=\"https://figmaop.netlify.app/\" rel=\"noreferrer noopener nofollow\" target=\"_blank\"><strong>FigmaOP - open source Figma plugins-&gt;</strong></a><strong> </strong></h2><h2><br></h2><h2><a href=\"https://www.buymeacoffee.com/TalmSnir\" rel=\"noreferrer noopener nofollow\" target=\"_blank\"><strong>Support My Work on Figma Plugins-&gt;</strong></a></h2>","id":"1026762327285154536","installCount":3603,"lastUpdateDate":"2021-10-19T06:31:57.708Z","likeCount":30,"name":"Icons Toolbox","publisherHandle":"TalmSnir","publisherId":"893556449536344028","publisherName":"Tal Snir","runCount":3853,"viewCount":6442},{"description":"<h2><strong>How To Use</strong><a href=\"https://outlinetosinglestroke.plasmic.site/\" rel=\"noreferrer noopener nofollow\" target=\"_blank\"><strong> (</strong>Tutorial<strong>)</strong></a></h2><ol><li>Select a <strong>filled vector </strong>on canvas</li><li><strong>⌘/</strong> ⌨️ <code><strong>outline to single stroke</strong></code></li><li>Press ⌨️ <strong>Tab⇥</strong> and enter the <strong>line weight </strong>of your vector</li><li>Press ⌨️ ↩︎ to run plugin (if the line weight is omitted the plugin will try to infer an approximation, but sometimes this can be far from accurate)</li></ol><p><br></p><p>🚨 The plugin will not work on vector shapes with varying line weight, nor on vectors that doesn't have fill applied</p><p><br></p><p>💡 <strong>⌥⌘P</strong> to quickly execute again with the line weight you entered last time</p>","id":"1027037684003682350","installCount":9216,"lastUpdateDate":"2021-11-09T01:27:23.270Z","likeCount":399,"name":"Outline to Single Stroke","publisherHandle":"MrBiscuit","publisherId":"1241","publisherName":"Mr.Biscuit","runCount":6831,"viewCount":21489},{"description":"<p>Nothing special. Just removing the clutter.</p><p><br></p><p>Frame 237438291</p><p>Frame 237438292</p><p>↓</p><p>Run Caption Sweeper</p><p>↓</p><p>Frame</p><p>Frame</p><p><br></p><p>Works with frames, groups, rectangles, vectors, lines, ellipses.</p>","id":"1027197385272592622","installCount":222,"lastUpdateDate":"2021-10-05T14:19:46.598Z","likeCount":12,"name":"Caption Sweeper","publisherHandle":"fjort","publisherId":"159579","publisherName":"Ayrapetov Tigran","runCount":150,"viewCount":440},{"description":"<p>Don’t you think DVDs and shining stickers are cool?</p><p>Let’s do it! Just make everything laser style, it’s new FASHION!</p><p><br></p><p>Any questions or suggestions, contact me: <a href=\"mailto:nowork.app@gmail.com\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">nowork.app@gmail.com</a></p>","id":"1027278905449497956","installCount":3398,"lastUpdateDate":"2021-11-28T14:17:54.547Z","likeCount":44,"name":"LASER: make laser style with one click","publisherHandle":"nowork","publisherId":"1021661660923531625","publisherName":"NOWORK","runCount":3233,"viewCount":3608},{"description":"<p>See and control all nested variants instances in selection. Switch between variants without clicking through to find all the nested ones. Reduce the complexity of your design system by creating nested variants! Or simply use the to switch variants in bulk by selecting multiple objects — useful when working with lists or tables.</p><p><br></p><p>Open design file: <a href=\"https://figma.fun/uxf00U\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://figma.fun/uxf00U</a> — feel free to add your ideas and comments! If you want to edit the file to add your ideas, send me your Figma email address and I'll invite you to edit. Open editing of the file is closed now due to constant vandalism.</p><p><br></p><p>Want this feature in Figma natively? Vote for this suggestion: <a href=\"https://forum.figma.com/t/nested-variant-component-override-controls/673\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://forum.figma.com/t/nested-variant-component-override-controls/673</a></p>","id":"1027413532986522043","installCount":4465,"lastUpdateDate":"2022-01-12T03:00:33.434Z","likeCount":214,"name":"Selection Variants","publisherHandle":"g","publisherId":"328","publisherName":"Gleb","runCount":4144,"viewCount":10089},{"description":"<p>To make working with spirographs fun again and usable in UI designs, we at Zeta built <strong>Spirous</strong> which can mathematically generate beautiful vectors with desired shape, color, stroke width and insert them on the Figma artboard.</p><p><br></p><h2><strong>Here's what the plugin offers you:&nbsp;</strong></h2><p><br></p><ul><li>Hand-picked templates to try out</li><li>Customise spirograph based on color, stroke width and other config options</li><li>Insert spirograph directly in the art board by clicking anywhere on the preview panel</li><li>Create and save custom spirographs</li><li>Feature to randomise spirograph config for generating new patterns</li></ul><p><br></p><h2><strong>First-time plugin usage:</strong></h2><p><br></p><ul><li>Run the Spirous plugin</li><li>Choose from hand-picked templates</li><li>Select the template you like</li><li>Insert selected template by clicking anywhere on preview panel</li><li>That's it!! Now use the beautiful Spirograph in your designs</li></ul>","id":"1027629657711671993","installCount":4402,"lastUpdateDate":"2021-10-26T11:43:21.731Z","likeCount":80,"name":"Spirous","publisherHandle":"zetadesign","publisherId":"904995377312408848","publisherName":"Zeta","runCount":4196,"viewCount":5960},{"description":"<p>Confused about the position of gradient colors is 50% or not?</p><p>It will show you and average them at the same distance with just one click.</p><p><br></p><p>Any questions or suggestions, contact me: <a href=\"mailto:nowork.app@gmail.com\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">nowork.app@gmail.com</a></p>","id":"1027668701137352436","installCount":607,"lastUpdateDate":"2021-10-15T19:24:24.398Z","likeCount":18,"name":"Gradient Position: average them seriously","publisherHandle":"nowork","publisherId":"1021661660923531625","publisherName":"NOWORK","runCount":642,"viewCount":1275},{"description":"<p>Font Viewer makes it easy to pick the right font, and shows the local font and web font in different tabs.</p>","id":"1027863721483813752","installCount":10659,"lastUpdateDate":"2021-10-07T08:51:19.943Z","likeCount":35,"name":"Font Viewer","publisherHandle":"kradz","publisherId":"3895692","publisherName":"KRAD","runCount":11543,"viewCount":13783},{"description":"<p>Allows to inspect design tokens set by <a href=\"https://www.figma.com/community/plugin/843461159747178978/Figma-Tokens\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">Figma Tokens</a> Plugin without risk of accidental breaking tokens.</p><p><br></p><p>Works even on components from Design Librariers!</p>","id":"1027918127238203371","installCount":750,"lastUpdateDate":"2021-10-07T12:21:12.385Z","likeCount":15,"name":"Figma Tokens Inspector","publisherHandle":"jakubhajduk","publisherId":"2997110","publisherName":"Jakub Hajduk","runCount":766,"viewCount":1862},{"description":"<p>Allows you to select only instances with a specific variant from within a selection such as a group or frame. This can be used, for example, to select only those buttons in the selection that have a Size of Big and a Shape of Round.</p><p><br></p><h2>How To Use</h2><ol><li>Select the group or frame that contains the instance you want to select.</li><li>Activate this plug-in.</li><li>Choose the Component Set name.</li><li>Select all the values of the variant you want to select.</li><li>Press the Select button.</li></ol><p><br></p><p>Is it difficult to understand? Please refer to the video.</p><p>https://cloud.nju33.com/6LKZbultMemOiNSamKev</p>","id":"1028168452877806837","installCount":501,"lastUpdateDate":"2021-10-08T05:11:50.112Z","likeCount":9,"name":"Select The Same Instance","publisherHandle":"742127","publisherId":"742127","publisherName":"nju33","runCount":746,"viewCount":1712},{"description":"<p><strong>Stop 💅 styling buttons – Start 🏗️ building apps!</strong></p><p><br></p><p>Create your next app right inside Figma. No design skills required. </p><p><br></p><p>Skip the blank pages and placeholder buttons -&gt; Create realistic app screens in minutes. </p><p><br></p><p>Choose from ready-made <strong>Material UI Mobile App Screens</strong>, customize <strong>Color Styles</strong> and add<strong> Content Blocks</strong>.  Wire the screens together and share high fidelity prototypes with your team. </p><p><br></p><p>More info -&gt; <a href=\"http://ui-kit.co/figma-plugin\" rel=\"noreferrer noopener nofollow\" target=\"_blank\"><strong>ui-kit.co/figma-plugin</strong></a></p><p><br></p><p><strong>What's included?</strong></p><p><br></p><p><strong>50+</strong> App layouts &amp; designs</p><p><strong>100+</strong> Content blocks</p><p>Auto-Layout &amp; Variants</p><p><br></p><p><a href=\"http://ui-kit.co/explore\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">Show all Material UI Blocks -&gt;</a></p><p><br></p><p><strong>Why this plugin?</strong></p><p>There’s hundreds of Figma Design Systems and App UI Kits and most of them provide a library of elements (buttons, cards, tooltips, icons) but no actual mobile app screens (page layouts or mobile pattern). </p><p><br></p><p>We're trying to change that ☺️</p><p><br></p><p><strong>Available Mobile Pattern</strong></p><p>Launch Screen, Login &amp; Signup, Register, Home Screen, Search, Content Feed, Shopping &amp; Ecommerce, Empty State, Dashboard, Filter, Gallery, Profile &amp; Account...</p><p><br></p><p><strong>Feedback or ideas? -&gt; hello@ui-kit.co</strong></p>","id":"1028308803768423865","installCount":7390,"lastUpdateDate":"2021-10-08T14:20:16.281Z","likeCount":74,"name":"App UI Builder","publisherHandle":"uikit","publisherId":"1922","publisherName":"Twins","runCount":7923,"viewCount":10298},{"description":"<p>Resize Frames, or Main Components; to fit their contents one or multiple edges at the same time. Or adjust the padding of Auto Layout frames, or Main Components.</p><p><br></p><h2><strong>How to use Resize Frame to Contents ❓</strong></h2><ol><li>Select one or more frames;</li><li>Run plugin;</li><li>The plugin will automatically filter the selection for Frames and Main Components;</li><li>If the Frame, or Main Component, has Auto Layout the plugin will update the padding value for the selected edge(s).</li><li>If not, the plugin will adjust the Frame, or Main Component, to fit its content in the selected edge(s). Note that Shadows, Outside Strokes, and other effects count as part of the contents.</li></ol><p><br></p><h2><strong>Use Cases 🔨</strong></h2><ul><li>Adjusting one or more Frames, or Main Components, to their contents;</li><li>Make sure an icon pack has consistent padding;</li><li>Make sure all app screens have consistent spacing around the contents;</li><li>Anything else you find it useful for!</li></ul><p><br></p><h2><strong>In Detail 🔎</strong></h2><ul><li>Any type of layers can be selected, the plugin will then look for Frames or Main Components within that selection;</li><li>A Main Component will have its Auto Layout padding value updated, an Instance will not;</li><li>The operation time will increase if a large amount of Frames or Main Components is selected;</li><li>The plugin will measure the success of the operation by showing how many frames had their dimensions or Auto Layout padding changed.</li></ul><p><br></p><p>❤ Trim Frame? <a href=\"https://www.buymeacoffee.com/ruipcabrinha\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Buy me a coffee</a>!</p>","id":"1028761915982516982","installCount":461,"lastUpdateDate":"2022-02-11T20:55:08.888Z","likeCount":9,"name":"Resize Frame to Contents","publisherHandle":"rui_p_cabrinha","publisherId":"1001403","publisherName":"Rui P. Cabrinha","runCount":533,"viewCount":1708},{"description":"<p>Don't write all the Swift UI code by hand anymore. Autogenerate it with Swifty and save a ton of time!</p><p><br></p><ul><li>Select a layer</li><li><strong>Get production ready Swift UI code</strong></li><li><strong>Profit 💰</strong></li></ul>","id":"1028762250848585464","installCount":485,"lastUpdateDate":"2022-02-22T22:03:13.262Z","likeCount":16,"name":"Swifty","publisherHandle":"rojcyk","publisherId":"204237","publisherName":"Denis Rojčyk","runCount":519,"viewCount":1714},{"description":"<p>Variant Inspector makes it easy to get variant properties and place it above your variant. This will be a great help to engineer when <strong>designing component API</strong>.</p><p><br></p><p>This plugin is a quick solution since Figma not yet integrating the variant props when inspecting a variant.</p>","id":"1029334595972104332","installCount":446,"lastUpdateDate":"2021-10-22T06:26:23.801Z","likeCount":28,"name":"Variant Inspector","publisherHandle":"afnizarnur","publisherId":"39541","publisherName":"Afnizar Nur Ghifari","runCount":386,"viewCount":1679},{"description":"<p>Export compressed frames from Figma</p><p><br></p><p><a href=\"https://icons8.com\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">Compress icon by icons8</a></p>","id":"1029362858509317302","installCount":159,"lastUpdateDate":"2021-10-21T12:18:45.931Z","likeCount":0,"name":"Compress Frames","publisherHandle":"DawidPacanowski","publisherId":"976449725364979030","publisherName":"Dawid Pacanowski","runCount":196,"viewCount":464},{"description":"<p>Color Luminance Manager</p>","id":"1029393128034896109","installCount":72,"lastUpdateDate":"2021-10-11T14:04:41.388Z","likeCount":3,"name":"Color Luminance Manager","publisherHandle":"hahus","publisherId":"983603105622867627","publisherName":"HAHUS","runCount":79,"viewCount":369},{"description":"<p>Let's make Figma friendly for C# developers. This plugin can help you convert vector shapes to xaml (eXtensible Application Markup Language).</p><p><br></p><h2>Usage</h2><p><br></p><ol><li>Select the required code format from the dropdown menu</li><li>Select only one layer with frame, group, component or instance</li><li>Press <code>Get code</code> and then <code>Copy</code> button</li><li>Use the code for example to create Resource Dictionary</li></ol><p><br></p><h2>Supported features</h2><p><br></p><ul><li><a href=\"https://docs.microsoft.com/en-us/dotnet/api/system.windows.media.geometrydrawing\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">GeometryDrawing</a></li><li><a href=\"https://docs.microsoft.com/en-us/uwp/api/windows.ui.xaml.shapes.path\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Path</a></li><li><a href=\"https://docs.microsoft.com/en-us/uwp/api/windows.ui.xaml.media.ellipsegeometry\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">EllipseGeometry</a></li><li><a href=\"https://docs.microsoft.com/en-us/uwp/api/windows.ui.xaml.media.rectanglegeometry\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">RectangleGeometry</a></li><li><a href=\"https://docs.microsoft.com/en-us/uwp/api/windows.ui.xaml.media.linegeometry\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">LineGeometry</a></li><li>...</li><li><a href=\"https://github.com/igorageev/figma2xaml/wiki/Supported-features\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">See complete list of features</a></li></ul>","id":"1029415284789228817","installCount":1299,"lastUpdateDate":"2021-12-18T09:47:36.545Z","likeCount":18,"name":"Figma2xaml","publisherHandle":"igorageev","publisherId":"323046","publisherName":"behance.net/igorageev","runCount":1336,"viewCount":4284},{"description":"<p>Magic Marker recognizes shapes you draw in FigJam and converts them to native shapes with editable text. Perfect for wireframing on both tablets and desktops.</p><p><br></p><p>If you're wondering how it works, here's <a href=\"https://twitter.com/alexeinars/status/1503841109105156102\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Magic Marker in action</a>.</p><p><br></p><p>Plugin recognizes these shapes:</p><p>▭ Rectangle</p><p>⭘ Ellipse</p><p>◇ Diamond</p><p>△ Triangle ↑</p><p>▽ Triangle ↓</p><p>▱ Parallelogram</p><p>╱ Line</p><p>↗ Connector</p><p>⌇ Eraser</p><p><br></p><p>⚠ Important note:</p><p>It takes about a second to recognize a shape and if you draw another one during that time, the previous shape will be skipped.</p><p><br></p><p>Made with 💜 &amp; ✨</p><p>Alex</p>","id":"1029671634406705647","installCount":9740,"lastUpdateDate":"2022-05-18T08:07:43.680Z","likeCount":89,"name":"Magic Marker","publisherHandle":"ae","publisherId":"1099640","publisherName":"Alex","runCount":8167,"viewCount":8697},{"description":"<p>Extract prominent colors from an image (Vibrant, lightVibrant, darkVibrant, Muted, lightMuted, darkMuted)</p><p><br></p><p>This plugin is open source, you can find the code here : <a href=\"https://github.com/lea37/figma-vibrant\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://github.com/lea37/figma-vibrant</a></p><p><br></p><p>You can contribute to the code or reuse it to do a better, smarter plugin 🙂</p><p><br></p><p>Credits: <a href=\"https://github.com/Vibrant-Colors/node-vibrant\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">node-vibrant</a> to get vibrant palette.</p>","id":"1029761464761569929","installCount":573,"lastUpdateDate":"2022-05-10T17:50:01.404Z","likeCount":9,"name":"Vibrant","publisherHandle":"leatortay","publisherId":"97485","publisherName":"lea tortay","runCount":459,"viewCount":1167},{"description":"<p>Quickly count stamps in a file or selection and jump to top-rated ideas or any other objects!</p><p><br></p><p>If you're wondering how this plugin works, here's <a href=\"https://twitter.com/alexeinars/status/1432808500682428417\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">Stamp Counter in action.</a></p><p><br></p><p>Made with 💙 &amp; ✨</p><p>Alex</p>","id":"1030286099326451028","installCount":4611,"lastUpdateDate":"2021-10-28T12:41:21.037Z","likeCount":51,"name":"Stamp Counter","publisherHandle":"ae","publisherId":"1099640","publisherName":"Alex","runCount":4004,"viewCount":4043},{"description":"<p>Plugin for easy convert from Figma designs to Android Jetpack Compose code.</p><p><br></p><p>Very often designs contain many different properties for elements of distance, color, proportion, as well as their layout. Developing such projects can be very tedious, and inconsistencies in design and development can negatively affect the overall design view after development.</p><p><br></p><p>Figma2Android plugin reduces the number of measurements of sizes, indents and positions of nodes, layer design operations and saves time / energy, even if the developer and designer are the same person.</p><p><br></p><h2><strong>Usage</strong></h2><p>Just open the plugin window in Figma, select a node to get the Jetpack Compose code to display it!</p><p><br></p><p>You can convert entire design pages, but Jetpack Compose has a limitation on the content of one function, and to make the code easier to reuse, we recommend converting in smaller blocks, just like when you develop an application in the usual way. This method will not only speed up the development of the entire application, but also immediately create a base of reusable blocks in the code.</p>","id":"1030354617366499719","installCount":3397,"lastUpdateDate":"2021-12-12T10:59:33.667Z","likeCount":51,"name":"Figma2Android","publisherHandle":"accessible892","publisherId":"4281080","publisherName":"Sherhan Arifjanov","runCount":3470,"viewCount":8917},{"description":"<p>Worried about your gradient not looking good? That’s because there are gray dead zone in the middle of your gradient.</p><p><br></p><p>Don’t worry! Just a click, it will magically beautify your gradient.</p><p><br></p><p>Vivid Gradient is so amazing! Have a try and you will love it!</p><p><br></p><p>Any questions or suggestions, contact me: <a href=\"mailto:nowork.app@gmail.com\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">nowork.app@gmail.com</a></p>","id":"1030667240351768358","installCount":6552,"lastUpdateDate":"2022-05-01T17:39:46.768Z","likeCount":93,"name":"Vivid Gradient: beautify your gradient","publisherHandle":"nowork","publisherId":"1021661660923531625","publisherName":"NOWORK","runCount":6771,"viewCount":9028},{"description":"<p>Watch YouTube while you design!</p>","id":"1030677329642768173","installCount":1446,"lastUpdateDate":"2022-05-27T08:39:52.673Z","likeCount":11,"name":"YouTubeView","publisherHandle":"pranavprakasan","publisherId":"858935951536898053","publisherName":"pranav prakasan","runCount":2191,"viewCount":3284},{"description":"<p><strong>Visually connect 2 figma elements. </strong></p><p><strong>Made with workflow speed and performance in mind.</strong></p><p><br></p><p><strong>Purpose</strong></p><p>It solves a need to see how items are related to each other by visually connecting them. Original purpose is to design complex systems and their architecture.</p><p><br></p><p><strong>Terminology</strong></p><ul><li>Item - is any figma element (text, frame, group, image)</li><li>Flow - is a line that goes from item -&gt; to item</li></ul><p><br></p><p><strong>How&nbsp;to&nbsp;use</strong></p><ul data-checked=\"true\"><li>Create/Update flow - select the first and the second items by holding <strong>shift</strong>.</li></ul><ul data-checked=\"false\"><li>Delete flow - set 'lock' switch to disabled state, select flow directly and delete it by pressing [Delete].</li><li>Get static flow - select flows you need, group them by pressing [Ctrl + G] and move outside the 'ItemFlow' group</li></ul><p>Interface&nbsp;guide&nbsp;is&nbsp;in the&nbsp;cover art or on <a href=\"https://imgur.com/H0SSEQm\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">imgur</a></p><p><br></p><p><strong>Technical&nbsp;stuff</strong></p><p>The more flows you got, the less frequent plugin will update them in order to save you fps.</p><p><br></p><p><strong>There&nbsp;are&nbsp;many plugins&nbsp;like&nbsp;that, why&nbsp;am&nbsp;i&nbsp;copying their ideas?</strong></p><p>(UX&nbsp;opinion&nbsp;from&nbsp;september&nbsp;2021)&nbsp;</p><p>I&nbsp;tried&nbsp;many&nbsp;free&nbsp;plugins&nbsp;to&nbsp;create&nbsp;flows&nbsp;and&nbsp;all&nbsp;of&nbsp;them&nbsp;had&nbsp;great&nbsp;implementations&nbsp;of&nbsp;how&nbsp;it&nbsp;should&nbsp;be,&nbsp;but they&nbsp;also got&nbsp;weak&nbsp;sides&nbsp;to&nbsp;do&nbsp;<strong><em>architecture&nbsp;stuff</em></strong>.</p><p><br></p><p>Get the source code and/or contribute&nbsp;<a href=\"https://github.com/AgitoReiKen/figma-itemflow\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Github</a></p><p><br></p><p>Because its free, i feel in power to advertise <a href=\"https://mmo.su\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">our group</a> :)</p><p>We&nbsp;are&nbsp;designing&nbsp;mmorpg&nbsp;and&nbsp;looking&nbsp;for&nbsp;enthusiasts</p>","id":"1030736498877484902","installCount":5527,"lastUpdateDate":"2022-02-23T01:23:03.757Z","likeCount":54,"name":"ItemFlow","publisherHandle":"agitoreiken","publisherId":"1834556","publisherName":"AgitoReiKen","runCount":6562,"viewCount":11485},{"description":"<h2>Welcome to Figma Knob Creator</h2><p><br></p><p>Knob Creator is a Figma plugin to create knob stack images. These can be used for creating themes for digital audio workstations, VST plugins and more. The aim of this plugin is to make this as easy as possible.</p><p><br></p><p>Go to the <a href=\"https://navelpluisje.github.io/figma-knob-creator/howto\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">Howto Page</a> page for an explanation on how to use this plugin.</p><p><br></p><h2>Contribute</h2><p><br></p><p>If you would like to contribute, you can do it by:</p><p><br></p><ul><li>Fork the repo, add your code and create a PR</li><li><a href=\"https://www.buymeacoffee.com/navelpluisje\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">Buy me a coffee</a></li></ul><p><br></p><h2>Issues</h2><p><br></p><p>Did you run into issues, or have any feature requests? Add them <a href=\"https://github.com/navelpluisje/figma-knob-creator/issues\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">here</a>.</p>","id":"1030842037042371583","installCount":146,"lastUpdateDate":"2021-10-15T14:01:23.034Z","likeCount":2,"name":"Knob Creator","publisherHandle":"navelpluisje","publisherId":"2522249","publisherName":"Erwin Goossen","runCount":140,"viewCount":528},{"description":"<p>Apply custom fill colors to any objects in your FigJam file.</p><p><br></p><p>Now you can have stickies and shapes with with custom colors!</p>","id":"1030933889092035687","installCount":9025,"lastUpdateDate":"2021-10-15T20:05:51.345Z","likeCount":21,"name":"Color Picker for Figjam","publisherHandle":"tkmadeit","publisherId":"156890","publisherName":"Tekeste Kidanu","runCount":8403,"viewCount":2669},{"description":"<p>Supercharge your Figma comments and gather external feedback from stakeholders.</p><p><br></p><h2>Features</h2><p><br></p><ul><li>Organize Figma comments with custom statuses on a kanban board.</li><li>Supercharge your Figma comments by adding tags, due dates and todos.</li><li>See all todos assigned to you (and your own private todos) in one place.</li><li>Easily filter your Figma comments by frames, dates, status, users, tags.</li><li>Instantly search for Figma comments with autocomplete results.</li><li>Add markdown formatting, links and lists to your Figma comments.</li><li>Gather external design feedback from anyone outside of your Figma file.</li><li>Automatically apply external text and image feedback in Figma with one click.</li><li>Export your Figma comments, todos and external feedback to a spreadsheet.</li></ul><p><br></p><h2>To use Commentful</h2><p><br></p><ol><li>Install and run the “Commentful Feedback Process” plugin.</li><li>Paste in your Figma API Token and Figma File URL to link your Figma comments.</li><li>Click the \"Figma Comments\" tab to organize and supercharge your Figma comments.</li><li>Click the \"My Todos\" tab to see and check-off any assigned or private todo lists.</li><li>Click the \"Reviews\" tab to create shareable review URLs and view incoming feedback.</li></ol><p><br></p><h2>Documentation</h2><p><br></p><p>For Commentful documentation, visit <a href=\"https://docs.hypermatic.com/commentful\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://docs.hypermatic.com/commentful</a></p><p><br></p><h2>License</h2><p><br></p><p>After you've tried using Commentful 20 times, you'll be asked to enter your license key. Your license key will allow you or your team to have unlimited use of Commentful.</p><p><br></p><p>To purchase a license for you or your team, please visit <a href=\"https://hypermatic.com/commentful\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://hypermatic.com/commentful</a></p>","id":"1030968261424288884","installCount":533,"lastUpdateDate":"2022-07-14T22:17:40.591Z","likeCount":15,"name":"Commentful Feedback Workflow","publisherHandle":"hypermatic","publisherId":"247","publisherName":"Hypermatic","runCount":725,"viewCount":2190},{"description":"<p>Theme Composer is a Figma plugin that allows you to create a complete website with<strong> Figma + HTML5 and CSS</strong> without writing a single line of code.</p><h2><br></h2><h2><strong>Theme Composer Tutorial:</strong></h2><p>1 - <a href=\"https://youtu.be/TPeyYGTOP3M\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Landing Page Design From Figma to HTML</a></p><p>2 - <a href=\"https://www.youtube.com/watch?v=vyEcF0vxvVQ&amp;ab_channel=RaoufBelakhdar\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">How to design a landing page for your eBook</a></p><p>3 - <a href=\"https://www.youtube.com/watch?v=i_k7k8wPFXE&amp;t=8s&amp;ab_channel=RaoufBelakhdar\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Course Landing Page Design From Figma To Html</a></p><p>4 - <a href=\"https://www.youtube.com/watch?v=PmLVw15IPUI&amp;t=100s&amp;ab_channel=RaoufBelakhdar\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Law Firm Landing Page Design From Figma To Html</a></p><p><br></p><h2>UI Library</h2><p>From hero sections and contact forms - we've created 150 Elements that you can use to build a website straight away.&nbsp;</p><ul><li>150 Ui Elements</li><li>50 Landing Pages</li><li>Figma Auto layout</li><li>Color and Text Styles</li></ul><p><br></p><h2>HTML Previewer</h2><p>Convert every User Interface in the <strong>UI Library</strong> to <strong>HTML </strong>easily.</p><ul><li>HTML 5 + CSS 3</li><li>Bootstrap 5</li><li>SASS Included</li><li>Fully Responsive</li></ul><p><br></p><p><strong>Home Page: </strong><a href=\"https://figmaland.com/uikit/theme-composer\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">T</a><a href=\"https://captain-design.com/plugin/theme-composer\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">heme Composer</a></p>","id":"1031231406409957685","installCount":4227,"lastUpdateDate":"2022-04-12T18:12:03.430Z","likeCount":83,"name":"Theme Composer","publisherHandle":"raoufBelakhdar","publisherId":"2998302","publisherName":"Raouf Belakhdar","runCount":4156,"viewCount":7049},{"description":"<p>Quickly tally stamp votes for stickys!</p><p><br></p><p>Select everything you want to tally up (including the stickys and stamps) and run the plugin. It will add a visual tally count to the bottom right of every sticky for everyone to see.</p><p><br></p><p>Notes: </p><ul><li>Don't worry if the selection contains other types of components, they won't affect the tally. Just drag a big rectangle selection over the entire area and let Tally handle the rest!</li><li>You will need to re-select and run the plugin every time new stamps are added that you want to include in the count</li><li>Stamps do not need to be directly on a sticky for them to be counted. If a stamp is part of the selection, it will count towards the sticky that it's closest to</li></ul>","id":"1031993957214678928","installCount":577,"lastUpdateDate":"2021-10-21T15:43:05.380Z","likeCount":1,"name":"Tally","publisherHandle":"ayushm","publisherId":"1010375492155330323","publisherName":"Ayush Mehra","runCount":601,"viewCount":602},{"description":"<p>Meet your newest teammate. Rendition looks at your Figma design and writes responsive React code for you - at the click of a button. Yes, it’s that easy. And it works!</p><p><br></p><p>Technical details:</p><ol><li>Built for developers</li><li>React only for now</li><li>Styled components for CSS</li><li>Best for designs made with Figma's autolayout</li></ol><p><br></p><p>Watch this video to see Rendition in action: https://youtu.be/3WucRJ7B6h0</p><p><br></p><p>Join our discord if you have questions: https://discord.com/invite/ZpaYuRTHkt</p><p><br></p><p>Here are 3 things that make Rendition wonderful to work with:</p><ul><li>It’s as simple and fast. Click a button and get React code.</li><li>It’s as flexible as can be. Get code from a small component design or even a whole page design.</li><li>It’s good at giving you high-quality, modern React code. You want code that you would actually feel comfortable shipping yourself, so our bar is high.</li></ul><p><br></p><p>How does this work? Here’s how (it’s easy):</p><p><br></p><ol><li>When your Figma design is ready, launch the Rendition plugin.</li><li>Pick the element you want as a React component.&nbsp;</li><li>Press Get Code.</li><li>Witness Rendition do its thing. You’ll be taken to a code sandbox with your new React code.</li><li>Review the code and mess around with it as you please.</li><li>When you’re happy, copy and paste the code wherever you want. It’s yours.</li></ol><p><br></p><p>What does this cost to use?</p><p><br></p><p>We think you’ll like rendition so much that it’s completely free to use for the first couple of times. After that, you can unlock unlimited access for just a few bucks per month. This way, we can continue to make the Rendition better and better - which makes life easier and easier for you.</p><p><br></p><p>Also, we want you to get the most out of Rendition. This was created by designers and developers, for designers and developers. If you have any questions or feedback, please reach out to us on discord: https://discord.com/invite/ZpaYuRTHkt</p><p><br></p><p>We’re here for you!</p><p><br></p><p><strong>To manage trial or cancel subscription</strong>: open the Rendition plugin in a Figma file, click the \"account\" button on the bottom row, and in the web browser choose \"my subscription\". Or send an email to rob@tryrendition.com</p><p><br></p><p>- Team Rendition</p>","id":"1031998871372194709","installCount":4702,"lastUpdateDate":"2022-06-29T19:47:11.565Z","likeCount":153,"name":"Rendition [Beta]: Figma->React Components in one click","publisherHandle":"robertnowell","publisherId":"874774465455437362","publisherName":"Robert Nowell","runCount":5379,"viewCount":12957},{"description":"<p>Create your own markers to help you keep track of you files.</p><h2>Features</h2><ol><li>Allows you to search for the markers that you have placed throughout your Figma file.</li><li>Allows you to update all the green markers of a category to red to flag changes needed for a screen.</li><li>Create a Dashboard to show which page contains what markers.</li></ol><p><br></p><h2><strong>Instructions</strong></h2><ol><li>Create a page and call it ‘##Plugin components##’</li><li>Create a component called ‘#traffic-status’</li><li>The component should have two properties</li></ol><ul><li><em>Status</em>, with two properties called red and green (compulsory).</li><li><em>Screen,</em> as many as you need. Name needs to be lowercase and have no spacing.</li><li>Do not add them into a group or the plugin wont be able to find it.</li></ul><p>I have created an instruction video to explain how to use it.</p><p><a href=\"https://youtu.be/RLqVMvwIo9U\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">https://youtu.be/RLqVMvwIo9U</a></p>","id":"1032111792919656443","installCount":140,"lastUpdateDate":"2021-10-30T06:51:42.170Z","likeCount":4,"name":"Markers","publisherHandle":"issacting","publisherId":"494960","publisherName":"issac ting","runCount":228,"viewCount":1216},{"description":"<p><strong>What is POEditor?</strong></p><p><br></p><p>POEditor is a highly scalable online translation platform and localization management system, designed to bring together developers, product managers, translators, designers and copywriters in their effort of making multilingual software, and to automate the localization workflow.</p><p><br></p><p>Trusted by companies like Bosch, Adidas and Ubisoft, POEditor brings transparency to the localization process, boosting productivity and collaboration between product, design and localization teams and helping avoid possible localization bugs.</p><p><br></p><p>For more information on the POEditor platform, please visit: <a href=\"https://poeditor.com/\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">https://poeditor.com/</a></p><p><br></p><p><strong>How Figma and POEditor work together</strong></p><p><br></p><p>To connect Figma to a POEditor account, enter the API key of that POEditor account in the Figma plugin.</p><p><br></p><p>You’ll be able to create new projects on that account using the plugin, or work with projects which already exist in POEditor.</p><p><br></p><p>The POEditor plugin for Figma works both ways, so you can send texts from Figma files to POEditor translation projects and fetch translations from POEditor to Figma.</p><p><br></p><p>In POEditor, multiple translation options are available:&nbsp;</p><ul><li>assigning your own translators to specific languages, by adding them as contributors</li><li>crowdsourcing translations from your community, using public projects</li><li>ordering human translation services from integrated language service providers</li><li>using machine translation APIs from DeepL, Google or Bing </li></ul><p><br></p><p>More information on how the POEditor Figma plugin works <a href=\"https://bit.ly/3C0TrDl\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">here</a>.</p>","id":"1032634079536376448","installCount":254,"lastUpdateDate":"2021-11-10T15:01:32.989Z","likeCount":6,"name":"POEditor","publisherHandle":"poeditor","publisherId":"1030024715512774230","publisherName":"POEditor","runCount":273,"viewCount":1307},{"description":"<p>Simply unlocks all layers on a page with 1 click. Displays how many it unlocked when complete.</p><p><br></p><p><a href=\"https://github.com/pjmdesi/Unlock-All\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">Repo</a></p><p><a href=\"https://www.flickr.com/photos/arnisto/1715332001\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">Texture in cover</a></p>","id":"1032688500948147925","installCount":779,"lastUpdateDate":"2021-10-20T16:42:53.692Z","likeCount":12,"name":"Unlock All Layers","publisherHandle":"pjmdesign","publisherId":"1017665","publisherName":"PJ Mullen","runCount":781,"viewCount":1914},{"description":"<p>一款自动制作表格的中文插件。</p><p>支持导入Excel，插件自带中文内容填充功能。</p><p>官方网站：https://pslkzs.com/figmaTable/index.php</p><p>视频教程：https://www.bilibili.com/video/BV1Kf4y137qR</p>","id":"1032928820086037433","installCount":2668,"lastUpdateDate":"2022-03-23T03:56:05.489Z","likeCount":37,"name":"NB Table For Chinese","publisherHandle":"www_pslkzs_com","publisherId":"870114250878292665","publisherName":"NB Charts","runCount":3147,"viewCount":4679},{"description":"<p>Functions to simplify your pages problems:</p><p><br></p><p>✅ Select and delete multiple pages or choose to delete all of the pages in a file.</p><p>✅ Add multiple pages in one go.</p><p>✅ Save pages templates.</p><p>✅ Create pages index in a click.</p><p><br></p><p>✳️ If you want to create a separator page e.g -------------&nbsp;just type “-” as a page name.</p><p>And if you want to add a separator with a name e.g ----cover---- just type “-cover-” as a page name.</p><p>check</p><p><br></p><p>for example:</p><p>-cover-,page 1,page 2,-,page 3 =&gt;</p><p><br></p><p>✔ ---------cover---------</p><p>&nbsp;&nbsp;&nbsp;page 1</p><p>&nbsp;&nbsp;&nbsp;page 2</p><p>&nbsp;&nbsp;&nbsp;------------------</p><p>&nbsp;&nbsp;&nbsp;page 3</p><p><br></p><h2><strong>For more plugins and gifs with usage examples:</strong></h2><p><br></p><h2><a href=\"https://figmaop.netlify.app/\" rel=\"noreferrer noopener nofollow\" target=\"_blank\"><strong>FigmaOP - open source Figma plugins-&gt;</strong></a><strong> </strong></h2><p><br></p><h2><a href=\"https://www.buymeacoffee.com/TalmSnir\" rel=\"noreferrer noopener nofollow\" target=\"_blank\"><strong>Support My Work on Figma Plugins-&gt;</strong></a></h2><p><br></p><h2><br></h2>","id":"1032966286384619512","installCount":836,"lastUpdateDate":"2021-11-07T11:11:01.683Z","likeCount":19,"name":"Pages","publisherHandle":"TalmSnir","publisherId":"893556449536344028","publisherName":"Tal Snir","runCount":685,"viewCount":1772},{"description":"<p>Export from Figma to clickable HTML with images. Includes Gallery and Element Inspector</p><p><br></p><p><strong>Export examples</strong></p><p><a href=\"https://maxbazarov.github.io/demo-station-plugin/export-examples/registration\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Example 1</a>, <a href=\"https://maxbazarov.github.io/demo-station-plugin/export-examples/finpay/?label&amp;g=m\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Example 2</a></p><p><br></p><p><strong>Features</strong></p><ul><li>Upload to cloud hosting</li><li>Overlays</li><li>Gallery (map and grid modes)</li><li>Play mode (on a full screen)</li><li>Element Inspector (Developer handoff)</li><li>Show layout grid (currently single grid of \"cols\" type only)</li><li>Text search by frame name and text node content across all project</li></ul><p><br></p><p><strong>Curent limitations</strong></p><p>The plugin doesn't run properly in Figma for Safari. Please use Chrome browser or Figma Desktop App.</p><p><br></p><p><strong>Contacts</strong></p><p>Send any feedback to <a href=\"mailto:mbazarov@gmail.com\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">mbazarov@gmail.com</a></p><p><br></p><p><strong>More details</strong></p><p><a href=\"https://maxbazarov.github.io/demo-station-plugin\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://maxbazarov.github.io/demo-station-plugin</a></p>","id":"1033284895522313541","installCount":690,"lastUpdateDate":"2022-07-12T21:07:13.254Z","likeCount":24,"name":"Demo Station","publisherHandle":"mbazarov","publisherId":"1662371","publisherName":"Maxim Bazarov","runCount":817,"viewCount":2095},{"description":"<p>No more searching for the right grid to match your frame size!!!</p><p><br></p><p>Functions to simplify your grids problems:</p><p><br></p><p>✅ Save grid templates with min and max sizes.</p><p><br></p><p>✅ Apply auto grids to frames -the plugin detects the frame’s sizes and applies the right grid that you saved as a template.</p><p><br></p><p>✅ Show all grids in selected frames with one click.</p><p><br></p><p>✅ Hide all grids in selected frames with one click.</p><p><br></p><p>✅ Delete and update templates.</p><p><br></p><p><br></p><h2>&nbsp;<strong>For more plugins and gifs with usage examples:</strong></h2><h2><a href=\"https://figmaop.netlify.app/\" rel=\"noreferrer noopener nofollow\" target=\"_blank\"><strong>FigmaOP - open source Figma plugins-&gt;</strong></a><strong> </strong></h2><h2><br></h2><h2><a href=\"https://www.buymeacoffee.com/TalmSnir\" rel=\"noreferrer noopener nofollow\" target=\"_blank\"><strong>Support My Work on Figma Plugins-&gt;</strong></a></h2><p><br></p><p>&nbsp;</p><p>&nbsp;</p>","id":"1033367904576323011","installCount":4553,"lastUpdateDate":"2021-11-27T10:39:21.489Z","likeCount":53,"name":"Grid System","publisherHandle":"TalmSnir","publisherId":"893556449536344028","publisherName":"Tal Snir","runCount":4651,"viewCount":6912},{"description":"<p>Export bitmap to Arduino</p>","id":"1033822117745248055","installCount":60,"lastUpdateDate":"2021-10-24T20:40:08.871Z","likeCount":2,"name":"Arduino","publisherHandle":"petrgrishin","publisherId":"1333854","publisherName":"petrgrishin","runCount":47,"viewCount":341},{"description":"<p><strong>The days of Lorem ipsum are numbered. Your clients, and yourself, deserve better content.</strong></p><p><br></p><p>Whether you are designing an app or a website, UI Copy will help you come up with better copy for your layout‘s content.</p><p><br></p><p>The plugin is not AI-based. We used our wordsmithing intelligence to analyze thousands of conversion-oriented websites and built a repository of words and phrases that you can apply in your marketing copy. No AI tool can do that.</p><p><br></p><p><strong>🤙&nbsp;</strong>UI Copy emphasizes two key features:</p><p><br></p><p><strong>Voice and Tone</strong>. Helps you sound either casual and witty or as a soulless corporate suit. As you might‘ve guessed, we prefer the former, but we are still being objective and balance the repository with 50/50 of each.</p><p><br></p><p><strong>Smart Variables</strong>. We used the syntactic constructions of the English language to predict where things stay stable in a sentence and sprinkle in variables to assemble phrases for your specific need.</p><p><br></p><p><strong>🤘&nbsp;</strong>Give it a try. If you want a discount for an exchange of feedback, write to us before making a purchase.</p><p><br></p><p><strong>👉 Official website:&nbsp;</strong><a href=\"https://www.uicopy.io/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\"><strong>uicopy.io</strong></a></p>","id":"1033824181209762620","installCount":5339,"lastUpdateDate":"2022-07-09T12:50:41.811Z","likeCount":87,"name":"UI Copy","publisherHandle":"mightyalex","publisherId":"12749","publisherName":"Aleksandar Tasevski","runCount":6246,"viewCount":33962},{"description":"<p>Filter all child in <strong>selection</strong>, by types or names or font sizes / familys / weights.</p>","id":"1034178978552865811","installCount":3347,"lastUpdateDate":"2022-06-04T06:17:28.156Z","likeCount":51,"name":"Filter","publisherHandle":"linci","publisherId":"153547","publisherName":"Linci","runCount":4027,"viewCount":4059},{"description":"<p>Super-simple perceptually uniform 10-step color palette generator using <a href=\"http://hsluv.org\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">HSLUV</a>.</p><p><br></p><h2>How to Use:</h2><ol><li>Select an element with the desired fill color</li><li>Open Krakatoa (Plugins &gt; Krakatoa)</li><li>Rename your color in the Krakatoa UI</li><li>Click generate palette</li></ol><p><br></p><h2>Coming Soon:</h2><ul><li>Generate styles</li><li>Optional dark mode palette</li><li>Change contrast stepper values</li><li>Custom amount of colors</li></ul><p><br></p><p><em>Created by </em><a href=\"https://cole.lol\" rel=\"noreferrer noopener nofollow\" target=\"_blank\"><em>Cole Fortson</em></a><em> and </em><a href=\"https://awillingham.dev\" rel=\"noreferrer noopener nofollow\" target=\"_blank\"><em>Armond WIllingham</em></a></p>","id":"1034211499420215348","installCount":477,"lastUpdateDate":"2021-11-03T19:48:30.513Z","likeCount":30,"name":"Krakatoa","publisherHandle":"4t","publisherId":"880879963120549521","publisherName":"Cole Fortson","runCount":448,"viewCount":905},{"description":"<p>Figma officially released individual stroke. let's use it!!!</p><p><s>This plugin adds a Rectangle node as a border.</s></p><p><s>I hope Figma implements one sided border in the future but please use this plugin until that day.</s></p>","id":"1034803209452863197","installCount":1168,"lastUpdateDate":"2021-11-09T13:45:42.483Z","likeCount":26,"name":"Add Border","publisherHandle":"seya","publisherId":"3945922","publisherName":"Kazuya Seki","runCount":1332,"viewCount":3586},{"description":"<p>Lilt allows you to experiment, iterate, and optimize designs for your customers around the world:</p><ul><li>Iteratively test design spacing, layout, and format across languages</li><li>Design a UX that accommodates (and optimizes for!) multiple languages</li><li>Build a smooth user experience, no matter your customer locale</li></ul><p><br></p><p>What is Lilt?</p><p>Lilt is the modern language services and technology provider. We provide end-to-end, fully managed translation services for enterprise organizations worldwide.</p><p>Lilt combines world-class professional translators, an all-star service team, and adaptive neural machine translation technology to give organizations everything they need to scale their content localization, go-to-market faster than ever, and improve the global customer experience. For more information about working with Lilt, please reach out to <a href=\"mailto:sales@lilt.com\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">sales@lilt.com</a>.</p><p><br></p><p><br></p><p>How does the Lilt Figma plugin work?</p><p>The Lilt Figma plugin makes it easy to design great customer experiences across any language, right from within Figma. The Lilt Figma plugin offers a dual translation approach, offering the user the flexibility to experiment, iterate, and finalize designs that have been optimized for multiple languages.</p><p>Users can choose Instant Translation, in which translated content is populated from a custom machine translation engine, or Verified Translation, in which content is translated by a human translator with the assistance of the Lilt Platform.</p><p><br></p><p>The Lilt Figma plugin enables you to:</p><ol><li>Design in your base language.</li><li>Test your design by language with Instant Translate.</li><li>Iterate with Instant Translate until satisfied.</li><li>Send your design for Verified Translation when you have finalized your design.</li></ol><p><br></p><p>Key features and functionality include:</p><p>Choosing your preferred translation method</p><p>Sending Figma files to Lilt for localization</p><p>Applying translation memories for each locale</p><p>Receiving completed translations directly in your Figma instance</p><p><br></p><p>For rapid iteration, Instant Translation provides a machine translated version of your design right in Figma within seconds. Once design has been finalized, Verified Translations sends your designs to Lilt, where human linguists translate, review, and approve your newly localized designs before sending them back to your Figma instance.</p><p><br></p><p>An overview video of the <a href=\"https://www.loom.com/share/4eaac6d6c2d84be9aa6e99d41cbed882\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Lilt Figma plugin can be seen here</a>.</p><p><br></p><p>How to launch this plugin:</p><p>Launch the plugin:</p><ol><li>Open your Figma account.</li><li>Go to the Plugins section and choose Lilt.</li><li>In Figma, launch the Lilt plugin and navigate to Settings.</li><li>Enter your Lilt API key</li><li>Enter the Lilt API URL</li><li>Click \"Save Settings\" to conclude the setup process.</li></ol><p><br></p><p>When the setup is complete, start using the plugin by pushing your Figma strings to the Lokalise project so translators can start working on them right away.</p><p><br></p><p>For more information, visit the <a href=\"https://support.lilt.com/hc/en-us/articles/4407545041815-Figma-\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Lilt knowledgebase here</a>.</p><p><br></p><p>To use this plugin, your company must be a Lilt customer.</p>","id":"1034960139249970136","installCount":153,"lastUpdateDate":"2022-06-29T20:25:24.732Z","likeCount":33,"name":"Lilt Figma Connector","publisherHandle":"lilt","publisherId":"1022185066796948781","publisherName":"Figma Lilt","runCount":171,"viewCount":978},{"description":"<h2><strong>Visualize dynamic color and create a custom Material Theme</strong></h2><p>The Material Theme builder is built to assist in exploring the possibilities of dynamic color, harmonizing brand colors, and providing a type scale. All with implementation in mind to bridge designer and developer workflows.</p><p><br></p><p><strong>Visualize dynamic color in your UI</strong></p><p>Material Design’s <a href=\"http://m3.material.io/styles/color/dynamic-color/overview\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\"><strong>Dynamic color</strong></a> brings user personalization to apps by generating accessible light and dark color schemes from a user’s device wallpaper.</p><p>Select an image or color to visualize dynamic color in your UI. Material Theme Builder utilizes design tokens available in the new <a href=\"https://goo.gle/m3-design-kit\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\"><strong>Material 3 Design Kit</strong></a></p><p><br></p><p><strong>Generate a custom theme</strong></p><p>Build a custom Material Theme, allowing you to migrate to Material Design 3’s new color system, and export it to code.&nbsp;</p><p><br></p><p>⚠ <em>Token structure in the Material Design Kit and Material Theme Builder have been updated for easier readability and to work with Figma updates. MTB has a migration script built in for the Kit and generated color diagrams.</em></p><p><em>Use Swap on elements with the previous token structure to update them to the new structure.</em>⚠</p><p><br></p><h2>How to use:</h2><p><strong>Setup and explore dynamic color</strong></p><ol><li>After installing, open the plugin from the Figma menu or command and click Get Started to generate a theme (material-theme) and Material Design tokens as Figma styles.</li><li>Using design kit components? Select and <strong>Swap</strong> to update the theme used in the components.</li><li>Assign MD tokens (Figma styles) to custom elements and components, then <strong>swap</strong> to the currently selected theme.</li><li>With Dynamic selected, drop an image in or click to <strong>choose an image</strong> to derive key colors into a scheme from an image. Below the image the source color will update based on the image. The theme’s colors and any elements or components using the theme will update based on the image.</li><li>Or enter a source color manually to emulate inputting an image.&nbsp;</li><li>Don’t want to choose an image or color? Randomize the source color with <strong>Shuffle</strong>.</li></ol><p><br></p><p><strong>Create a custom theme</strong></p><p>Your brand’s colors can still take advantage of the Material You color story without dynamic color controlling the UI with the help of some resources. Colors will be shifted to generate accessible colors within the same color space as dynamic colors.&nbsp;</p><p><br></p><ol><li>With <strong>Custom</strong> selected, select the color input for Primary.&nbsp;</li><li>A full scheme can be generated from Primary or input your available brand colors into the rest of the color inputs in their appropriate color assignments.&nbsp;</li></ol><p><br></p><p><strong>Extended Colors</strong></p><ol><li>To extend past user-generated dynamic colors or the baseline schemes. In <strong>Custom</strong>, click <strong>Add a color</strong>. A color input will appear and update the color schematic.&nbsp;</li><li>Click on the color input to prompt a color picker to update the color.&nbsp;</li><li>To rename a custom color, with the modal closed. Find the source group and update the Custom style name. The color name will be updated next time the plugin is open.</li><li>Delete by deleting the custom color source (in Figma styles).</li></ol><p><br></p><p><strong>Add theme and presets</strong></p><p>You can change the current theme, add a new theme, and reset the current theme within the <strong>Theme menu </strong>(dropdown at top).&nbsp;</p><p><br></p><p>Selecting a different theme changes the current theme to edit. <strong>Swap </strong>will update whatever is selected to the current theme in the dropdown.&nbsp;</p><p><br></p><p>Presets are available in the menu to reset the current theme back to the Material baseline theme.&nbsp;</p><p><br></p><p><strong>Export</strong></p><p>Ready to implement your theme? Click <strong>Export</strong> and select your desired code format.&nbsp;</p><p>Learn about themes and <a href=\"https://material.io/blog/migrating-material-3\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\"><strong>migrating to M3</strong></a> or try out implementation with <a href=\"https://codelabs.developers.google.com/codelabs/apply-dynamic-color#0\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\"><strong>Adding dynamic color to your app codelab</strong></a>.&nbsp;</p><p><br></p><p><strong>Learn more about the Material Theme Builder</strong> <a href=\"http://material.io/material-theme-builder\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\"><strong>material.io/material-theme-builder</strong></a></p><p><strong>Suggestions or feedback? Ping us </strong><a href=\"https://twitter.com/materialdesign\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\"><strong>@materialdesign on Twitter</strong></a><strong>.</strong></p><p><br></p><p><strong>File Bugs Here:</strong></p><p><a href=\"https://github.com/material-foundation/material-theme-builder/issues/new/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://github.com/material-foundation/material-theme-builder/issues/new/</a></p>","id":"1034969338659738588","installCount":51244,"lastUpdateDate":"2022-07-02T04:57:25.006Z","likeCount":1601,"name":"Material Theme Builder","publisherHandle":"materialdesign","publisherId":"2555098","publisherName":"Material Design","runCount":49391,"viewCount":119912},{"description":"<p>Inspector and editor for shared plugin data. Edit the shared metadata stored on each layer of your Figma file.</p>","id":"1035631852812281649","installCount":104,"lastUpdateDate":"2021-11-22T23:29:38.654Z","likeCount":3,"name":"Monocle","publisherHandle":"5c7ddc84_1b85_4","publisherId":"1010626961807366064","publisherName":"Michael Daross's Team","runCount":86,"viewCount":312},{"description":"<p>Benson is the copy solution designers and project managers have been waiting for. It's your own personal on demand copywriter that powers your content gaps from concept to live.</p>","id":"1035816058119890909","installCount":495,"lastUpdateDate":"2021-12-06T03:22:34.110Z","likeCount":23,"name":"Benson","publisherHandle":"7de42e22_c965_4","publisherId":"1039872751854438372","publisherName":"Oakland","runCount":468,"viewCount":1940},{"description":"<p>Change the font in FigJam and Figma files using the quick actions bar.</p><p><br></p><p>The list displays of both Google Fonts and local fonts.</p><p><br></p><p><strong>How to use:</strong></p><ol><li>Select Text Layers, Connectors, Shapes with Text, Sticky Notes or Code Blocks, or select a specific piece of text.</li><li>Launch Quick Actions (press <code>⌘ Cmd + /</code> on Mac or <code>Ctrl + /</code> on Windows).</li><li>Write \"Change Font\" and press <code>Tab</code>.</li><li>Filter the list by typing the name of the font and select the desired font by pressing <code>Enter/Return</code>.</li><li>Done! Font applied.</li></ol><p><br></p><p>The plugin can apply local text styles, this happens automatically. It is important that the properties of the selected text layer (such as: font size, line height, letter and paragraph spacings, etc.) fully match the properties of the local text style.</p><p><br></p><p><em>The list of results is limited to 500 fonts. To see other fonts, enter any characters in the input field.</em></p><p><br></p><p><em><span class=\"ql-cursor\"></span>--</em></p><p><em>by </em><a href=\"https://www.figma.com/@tank666\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\"><em>Yury Zeliankouski</em></a></p>","id":"1036021586377337050","installCount":20439,"lastUpdateDate":"2022-05-22T16:54:50.288Z","likeCount":151,"name":"Change Font","publisherHandle":"tank666","publisherId":"3489343","publisherName":"Yury Zeliankouski","runCount":18768,"viewCount":36710},{"description":"<p>Document your color styles with just one tap.</p><p>(B/W Text Contrast Checker built in.)</p>","id":"1036172256720814370","installCount":1134,"lastUpdateDate":"2021-10-30T13:06:17.366Z","likeCount":34,"name":"Color Guide","publisherHandle":"sriram","publisherId":"241356","publisherName":"Sriram Boppana","runCount":1398,"viewCount":2665},{"description":"<p>Use more accurate Scale Tool, find and select layers by name, save and restore selections, mark and count layers, etc. Make your workflow smoother and deliver design with a Sonic speed. No more switching between tons of plugins.</p><p><br></p><p>Guru is adapted for fast work:</p><ul><li>Supports keyboard control.</li><li>Feature list reordering via drag and drop.</li><li>Quick search (made for the future, because the list of features is growing).</li></ul><p><br></p><p><em>We regularly develop new features and adjust current ones. Want something new? Just text us via feedback form.</em></p>","id":"1036619416000610898","installCount":688,"lastUpdateDate":"2021-10-31T12:47:28.496Z","likeCount":58,"name":"Guru — all Figma missing features","publisherHandle":"danilov","publisherId":"215232","publisherName":"Denis Danilov","runCount":586,"viewCount":2252},{"description":"<p>Copy and paste layers from Figma straight into Framer.</p><p><br></p><p>Select the layers you want to copy, run the plugin, and paste them directly into Framer.</p><p><br></p><p>Learn more at <a href=\"http://www.framer.com/figma\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">www.framer.com/figma</a>.</p>","id":"1037108608720448600","installCount":13415,"lastUpdateDate":"2022-03-10T12:48:23.230Z","likeCount":313,"name":"Framer Copy Paste","publisherHandle":"framer","publisherId":"1030825209175599639","publisherName":"Framer","runCount":13626,"viewCount":19364},{"description":"<h2>DhiWise Figma to code</h2><p>Convert Figma designs to clean, scalable and responsive code in minutes for Android (Kotlin), iOS (Swift), Flutter, and React.js FOR FREE 🤯</p><p><br></p><p><strong>Generates design to code before your coffee gets cold!</strong> 😉</p><ul><li>Install the plugin and sign in/sign up</li><li>Select the technology in which you need the code [iOS (Swift), Flutter, Android (Kotlin) or React (Web)]</li><li>Wait for a few minutes and receive the downloadable source code in your registered email</li></ul><h2><br></h2><h2><strong>Why use DhiWise?</strong> 🤭</h2><ul><li>Support of a <strong>wide range of UI components</strong> and generates executable code.</li><li><strong>Responsive code</strong> that works everywhere!</li><li>DhiWise identifies duplicate screens, components, and awful variable names to provide you better <strong>code readability and quality.</strong></li><li>Become a clean coder with <strong>CC (Clean Code) architecture</strong> that makes apps scalable and easy to maintain.</li><li>The generated <strong>source code is debugged</strong> and <strong>downloadable within minutes.</strong></li><li>Prototype supported - Actions added while prototyping Figma design will also be captured in the generated code.</li><li><strong>Export code</strong> from DhiWise and <strong>integrate it</strong> into your current projects!</li></ul><h2><br></h2><h2><strong>Limitations</strong> ⚠️</h2><p>We are reliant on your designs being created using standard design practices or guidelines. Still many of the designs might not be identified due to being unique or complex.</p><p><br></p><p><strong>Easy solutions!</strong> 👇</p><p><br></p><p>⛑️ Hint: Create Figma designs for your application using standard <a href=\"https://docs.dhiwise.com/knowledgehub/mobile-app-builders/figma\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">design guidelines</a> in mind to get maximum accuracy for your design.</p><p>Explore our <a href=\"https://www.figma.com/community/file/1060490163552841072?fuid=995306497389201393\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">UI kit</a> &amp; <a href=\"https://docs.dhiwise.com/knowledgehub/mobile-app-builders/figma\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Guidelines</a> to get a better design-to-code accuracy 🤘</p><p>Join our <strong>awesome tech community on </strong><a href=\"https://discord.com/invite/rFMnCG5MZ7\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\"><strong>Discord</strong></a><strong>! 💃</strong></p><h2><br></h2><h2><strong>What else can you do with DhiWise?</strong> 💪</h2><p>DhiWise is made to increase productivity with total code ownership &amp; build full stack apps! 🚀</p><p><a href=\"https://app.dhiwise.com/sign-up?utm_campaign=community&amp;utm_source=figma_plugin_intro&amp;utm_medium=figmawebsite\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\"><strong>Sign up to DhiWise</strong></a><strong> </strong>&amp; build the basic setup of their web &amp; mobile app in just a few hours and focus on things that matters most! With DhiWise you can set-up/manage following features in your mobile &amp; web apps :</p><ul><li>Integrate APIs by uploading postman collection (Data to view and view to data binding support)</li><li>Set up permissions (Camera, Gallery and others)</li><li>Alert box (Snackbar, Toast and Alert)</li><li>Manage navigation (With back navigation support)</li><li>Firebase integration <strong>(Flutter &amp; Android)</strong></li><li>Supabase integration <strong>(Flutter)</strong></li><li>Social authentication (Google and Facebook)</li><li>Manage lifecycle</li><li>Preview your Flutter design on DhiWise</li></ul><p><br></p><p>Explore our <a href=\"https://www.figma.com/community/file/1060490163552841072?fuid=995306497389201393\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">UI kit</a> &amp; <a href=\"https://docs.dhiwise.com/knowledgehub/mobile-app-builders/figma\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Guidelines</a> to get a better design-to-code accuracy 🤘</p><p>Join our <strong>awesome tech community on </strong><a href=\"https://discord.com/invite/rFMnCG5MZ7\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\"><strong>Discord</strong></a><strong>! 💃</strong></p><p>Feedback and improvements are welcome, please drop us an email at <a href=\"mailto:help@dhiwise.com\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">help@dhiwise.com</a></p><p>Made with ❤️ by <a href=\"https://www.dhiwise.com?utm_campaign=community&amp;utm_source=figma_plugin&amp;utm_medium=figmawebsite\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">DhiWise</a>.</p>","id":"1037309320238203168","installCount":4683,"lastUpdateDate":"2022-07-08T08:32:43.111Z","likeCount":103,"name":"DhiWise - Figma to Code","publisherHandle":"dhiwise","publisherId":"995306497476533838","publisherName":"DhiWise Pvt Ltd","runCount":5229,"viewCount":8881},{"description":"<p>Just a shortcut to create a new page or multiple pages by the keyboard.</p><p><br></p><p><strong>You can:</strong></p><p>Run it without parameter to create a new page,</p><p>Or run it with these 4 shapes of parameters:</p><ul><li>A single name to create a page with a custom name</li><li>Comma-separated names for multiple pages with custom name</li><li>A Number for multiple pages</li><li>A name multiplied by a number for multiple pages with a custom name. like this MyCustomPage*3</li></ul>","id":"1037336302051693897","installCount":194,"lastUpdateDate":"2021-11-03T23:14:16.099Z","likeCount":12,"name":"New Page","publisherHandle":"saeed","publisherId":"689","publisherName":"Saeed Alipoor","runCount":180,"viewCount":845},{"description":"<p>Quickly turn transparent frames or PNGs into masked knockout fill frames.</p><p><br></p><ol><li>Select a frame with transparency</li><li>Run AlphaMasker</li><li>Change the color of the resulting frame</li></ol><p><br></p><p>AlphaMasker uses the selected frame to generate a transparent PNG which it uses as a mask layer for a solid color. This lets you quickly generate solid-color knockout illustrations with adjustable colors.</p>","id":"1037409015041360290","installCount":683,"lastUpdateDate":"2021-11-21T20:11:43.290Z","likeCount":7,"name":"AlphaMasker","publisherHandle":"thoughtbot","publisherId":"1039740942889734218","publisherName":"thoughtbot","runCount":608,"viewCount":1474},{"description":"<p>Associates colors to styles if it finds matching or very similar ones. In one click.</p><p><a href=\"https://twitter.com/milsinery\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">About the current version and updates</a>.</p><p><br></p><p>Связывает цвета со стилями, если находит совпадающие или очень похожие.</p><p><a href=\"https://t.me/areyoureallydesigner\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Подробнее о текущей версии и будущих обновлениях</a>.</p>","id":"1037616212525799012","installCount":1526,"lastUpdateDate":"2021-11-20T09:30:26.014Z","likeCount":41,"name":"Color Fixer","publisherHandle":"milsinery","publisherId":"232442","publisherName":"Vladimir B.","runCount":1436,"viewCount":3679},{"description":"<p>The easiest way to resize and scale your frames for different social media platforms.</p><p><br></p><p><strong>Plugin Demo: </strong></p><ol><li><a href=\"https://youtu.be/w8dDwu1LYE0\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\"><strong>Thumblisher Video Tutorial</strong></a></li><li><a href=\"https://www.youtube.com/watch?v=eAGTkdmG48c&amp;ab_channel=RaoufBelakhdar\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\"><strong>How to create multiple post sizes</strong></a></li><li><a href=\"https://www.youtube.com/watch?v=FSExC6Zdo1w&amp;ab_channel=RaoufBelakhdar\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\"><strong>How to scale your social media cover graphics</strong></a></li></ol><p><br></p><h2><strong>Expand your frames to the following Social Media Image Sizes :</strong></h2><p><strong>Facebook: </strong>Profile, Cover, Post, Event, Ad, Story cover, Group cover.</p><p><strong>Instagram: </strong>Profile, Post, Story, Ad, Thumbnails, IGTV.</p><p><strong>Twitter: </strong>Profile, Cover, Post, Card, Ad</p><p><strong>LinkedIn: </strong>Logo, Cover, Hero, Business Banner, Dynamic Ads.</p><p><strong>YouTube: </strong>Cover Desktop, Cover Mobile, Display ads, Overlay ad, Companion banner ads, Dynamic Ads.</p><p><strong>Pinterest: </strong>Profile, Board Display, Standard Pin, Overlay ad, Companion banner ads, Dynamic Ads.</p><p><strong>TikTok: </strong>Profile.</p><p><strong>Dribbble: </strong>Shot, Shot HD.</p><p><strong>Producthunt: </strong>Thumbnail, Gallery.</p><p><strong>Google Play: </strong>Portrait, Landscape.</p><p><strong>App Store: </strong>Portrait, Landscape.</p><p><br></p><h2><strong>To use this plugin</strong></h2><ol><li>First, select your frame or image</li><li>Choose the social media image size you’d like to generate for</li><li>Click the “Create” button</li></ol>","id":"1037826586645134259","installCount":932,"lastUpdateDate":"2022-01-29T08:55:17.690Z","likeCount":28,"name":"Thumblisher","publisherHandle":"raoufBelakhdar","publisherId":"2998302","publisherName":"Raouf Belakhdar","runCount":786,"viewCount":2544},{"description":"<p>Edit your code blocks using VSCode right from FigJam!</p><p>Use autocomplete, keyboard shortcuts, typechecking, and more!</p>","id":"1037832253284626367","installCount":1288,"lastUpdateDate":"2021-11-03T20:57:59.700Z","likeCount":30,"name":"Better Code Blocks","publisherHandle":"sawyerafterdark","publisherId":"932466","publisherName":"Sawyer Hood","runCount":1297,"viewCount":1640},{"description":"<p>A theme builder for <a href=\"https://sonnat.dev\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Sonnat ui kit</a>.</p><p>Give the base colors and the color palettes will be generated or updated automatically.</p><p>More configuration will be available soon.</p>","id":"1037849474159092686","installCount":209,"lastUpdateDate":"2021-12-22T09:55:00.622Z","likeCount":15,"name":"Sonnat Theme Builder","publisherHandle":"thewall","publisherId":"943497109383323481","publisherName":"Wall","runCount":195,"viewCount":1272},{"description":"<p><strong>A plugin to help designers and viewers organize and navigate Figma files.</strong></p><p><br></p><h2><strong>Features</strong></h2><p><br></p><p>Generate pages by sections in one-click</p><ul><li>Customizable section names.</li><li>Parse existing file page sections, and saves previously used sections.</li><li>Allow hiding certain sections/pages/artboards from the ToC by starting the name with `_`.</li></ul><p>Generate table-of-contents</p><ul><li>Organized by section &gt; page &gt; artboard.</li><li>Each page/artboard is clickable, links directly to that item.</li><li>Allow include/exclude artboard/page/sections by the name.</li><li>Re-run anytime to fresh.</li></ul><p>Placeholder cover page</p><ul><li>\"Last updated\" auto updates whenever the plugin runs.</li></ul>","id":"1037946448690949150","installCount":109,"lastUpdateDate":"2022-01-16T21:50:41.976Z","likeCount":11,"name":"ToC+","publisherHandle":"yangguangli","publisherId":"42903","publisherName":"Yangguang Li","runCount":158,"viewCount":571},{"description":"<p>Use this plugin with <a href=\"https://www.figma.com/community/file/1037975581461148707/Scrapbook-Template\" rel=\"noreferrer noopener nofollow\" target=\"_blank\"><strong>this template file</strong></a> to quickly generate a scrapbook! Gather up some photos, pop them in, and share your 'handmade' scrapbook with your parents, grandparents, or team!</p>","id":"1037958847413071911","installCount":83,"lastUpdateDate":"2021-11-04T06:17:24.715Z","likeCount":2,"name":"Scrapbook It","publisherHandle":"claraujiie","publisherId":"80566","publisherName":"Clara Ujiie","runCount":82,"viewCount":273},{"description":"<p><strong>Import your Trello board directly into Figma</strong></p><p><br></p><p>Dynamic elements and \"drag and drop\" included.</p><p><br></p><p>Get started with these three easy steps:</p><ol><li>Click the link in the plugin to authorise your Trello account and get an authorisation Token.</li><li>Paste the token in the Authorisation token field.</li><li>Enter the name of the Trello board you want to import in the board name field. Note: the name of the board must be exact, including spacing and spelling.</li></ol><p><br></p><p>The plugin is open source, check out the code here:</p><p><a href=\"https://github.com/thomasbrettell/trello-for-figma-plugin\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">https://github.com/thomasbrettell/trello-for-figma-plugin</a></p><p><br></p><p><em>This is an unofficial Trello plugin, not affiliated with Atlassian</em></p>","id":"1038053479650349214","installCount":424,"lastUpdateDate":"2021-11-20T23:20:38.958Z","likeCount":13,"name":"Trello for Figma","publisherHandle":"thomasbrettell","publisherId":"876122615804097920","publisherName":"Thomas Brettell","runCount":564,"viewCount":1736},{"description":"<p>Theme Builder for the upcoming version of Stack Browser</p><p><br></p><p><br></p><p>This plugin helps you to generate color palettes based on given base colors: Background, Spacebar, Accent, and Surface</p>","id":"1038822221814377265","installCount":102,"lastUpdateDate":"2021-11-30T12:38:40.218Z","likeCount":3,"name":"Stack Theme Builder (Alpha)","publisherHandle":"ddramone","publisherId":"3823998","publisherName":"Ika","runCount":95,"viewCount":315},{"description":"<p>This is a simple plugin to help you quickly label your slides by number.</p><p><br></p><p><strong>How to:</strong></p><ol><li>Select the numbering text layers in all your slides</li><li>Run the plugin</li><li>Optional: set prefix, start number, concat text, and total number of slides</li><li>Click \"Apply\"</li><li>Done</li></ol>","id":"1039275928529118354","installCount":694,"lastUpdateDate":"2022-04-15T14:38:29.825Z","likeCount":9,"name":"Label Slides","publisherHandle":"zhenwang","publisherId":"93586","publisherName":"Zhen","runCount":761,"viewCount":1133},{"description":"<p>Turn any text in your FigJam or design file into a set of fridge magnets. Great for writers' block or a team poetry writing jam.</p><p><br></p><p>How to use:</p><p><br></p><ol><li>Select anything on the canvas with text—any number of text boxes, frames, stickies, shapes, etc.</li><li>Run the plugin</li><li>Get fridge magnets made from your text! Move around and arrange as you please.</li></ol>","id":"1039409208297926871","installCount":189,"lastUpdateDate":"2021-11-08T05:26:09.993Z","likeCount":4,"name":"Word magnet generator","publisherHandle":"jenny","publisherId":"4593","publisherName":"Jenny Wen","runCount":175,"viewCount":383},{"description":"<p>Switch font family from the quick actions and keep the font weight.</p><p><br></p><p>The font-weight will be retained if the new font family has that weight.</p><p><br></p><p><strong>How to:</strong></p><ol><li>Select some nodes with texts (Text, Sticky, Connector, Shapes with text, etc.)</li><li>Open quick action&nbsp;(Win: Ctrl+/ or Ctrl+P) - (Mac: Cmd + / or Cmd + P)</li><li>Type \"Font switcher\" and press Tab</li><li>Reach your font and press \"Enter\"</li></ol>","id":"1039430358164496626","installCount":2653,"lastUpdateDate":"2021-11-08T06:47:50.049Z","likeCount":23,"name":"Font Switcher","publisherHandle":"thewall","publisherId":"943497109383323481","publisherName":"Wall","runCount":2889,"viewCount":3095},{"description":"<p>Easily wrap your selected components, media or texts on a frame.</p><p>Only select all the resources you need to be wrapped on a frame, then you can run the plugin.</p><p><br></p><p>If you are a developer feel free to send pull requests on github.</p>","id":"1039612610420362774","installCount":138,"lastUpdateDate":"2021-11-24T18:16:23.353Z","likeCount":3,"name":"EasyFramer","publisherHandle":"yjdev","publisherId":"910645242810487928","publisherName":"YJDev","runCount":173,"viewCount":569},{"description":"<p>Unmix mixed fonts, with dynamic baseline alignment</p>","id":"1039804395780906653","installCount":2421,"lastUpdateDate":"2021-12-21T09:06:57.077Z","likeCount":65,"name":"Unmix Fonts","publisherHandle":"MrBiscuit","publisherId":"1241","publisherName":"Mr.Biscuit","runCount":2381,"viewCount":4228},{"description":"<p>Not sure if the color you are using meets the contrast ratio?</p><p>Try this plug-in.</p><p>It outputs the contrast ratios for all possible combinations of color styles.</p><p><br></p><h2>Main Functions</h2><ul><li>Generates a table of contrast ratios for all local color styles</li><li>Flexible as each part is componentized</li><li>Enables to limit the display according to the contrast.</li></ul><p><br></p><h2>Future updates</h2><ul><li>Allow output of exact contrast ratio values for colors with opacity less than 100%.</li></ul><p><br></p><p><strong>Bug reports and feedback welcome!</strong></p><p><br></p><p>自分の使っているカラーがコントラスト比を満たしているかわからない？</p><p>そんな時はこのプラグインを使ってみましょう。</p><p>カラースタイルの全通りの組み合わせのコントラスト比を出力します。</p><p><br></p><h2>主な機能</h2><ul><li>local color styleの全通りのコントラスト比の表を生成</li><li>各パーツがコンポーネント化されているので柔軟に対応ができます</li><li>コントラストに応じて表示を制限することが可能になります</li></ul><p><br></p><h2>将来的なアップデート</h2><ul><li>opacityがあるカラーのコントラスト比の正確な値を出力できるようにする</li></ul><p><br></p><p><strong>バグ報告・フィードバックお待ちしています！</strong></p>","id":"1039910246084959068","installCount":773,"lastUpdateDate":"2022-04-24T10:37:42.103Z","likeCount":20,"name":"Color Contrast Grid","publisherHandle":"Ayako0224","publisherId":"2426655","publisherName":"ayako","runCount":916,"viewCount":1896},{"description":"<h2><strong>Bring excitement back to virtual collaboration with video messaging</strong></h2><p><br></p><p>The Vimeo Record plugin allows you to record your screen, webcam, or both directly from the files you’re collaborating on in Figma and FigJam. This means that you can spend less time typing out your feedback, and more time capturing ideas right as inspiration strikes.</p><p><br></p><p>To leave live feedback in FigJam, simply record your comments in the file of choice, then watch your video preview unfurl alongside your work. When working on a project in Figma Design, you can embed your video as a thumbnail directly on the Figma canvas. Your collaborators can then watch your comments, ideas, or accolades via simple playback within your whiteboard or canvas.</p><p><br></p><p><strong>Here’s how your team can use Vimeo Record to work better together:</strong></p><p><br></p><ul><li><strong>Project onboarding</strong>: Record a short welcome video to review goals, progress, and next steps so new team members can get up to speed quickly without the need for another meeting or lengthy email.</li><li><strong>Design feedback</strong>: Highlight specific visual elements while narrating your feedback to keep your ideas in context.</li><li><strong>Async ideation</strong>: Share your ideas at the moment inspiration strikes to add more engaging context to your projects -- then let your team watch and respond with comments when it’s convenient for them.</li></ul><p><br></p><p><strong>How to get started:</strong></p><ol><li>Download the Vimeo Record plugin</li><li>Connect Vimeo to your Figma account</li><li>Select recording modes</li><li>Create your video</li><li>Add video to canvas or share link to it with your team</li><li><a href=\"https://vimeo.zendesk.com/hc/en-us/articles/4415753338509\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Check this How-to article for more details</a></li><li><a href=\"https://vimeo.com/record?utm_campaign=screen_recorder&amp;utm_content=figma_community_page_cta&amp;vcid=\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Install Vimeo Record Chrome Extension to record videos wherever you go</a></li></ol>","id":"1039957324840667051","installCount":5240,"lastUpdateDate":"2022-06-07T22:45:26.376Z","likeCount":143,"name":"Vimeo Record","publisherHandle":"2609bee5_500d_4","publisherId":"984548592423782910","publisherName":"Vimeo","runCount":5136,"viewCount":10165},{"description":"<p>This plug let you extract all the colors from a design file as XAML resources that are directly embeddable in XAML-compatible application frameworks  like WPF, Avalonia, Xamarin Forms, MAUI etc.</p><p>XamlStyles supports both solid (as SolidColorBrush) and gradient colors (only LinearGradientBrush), including variations.</p>","id":"1040029907329459191","installCount":327,"lastUpdateDate":"2021-11-09T22:28:27.167Z","likeCount":2,"name":"XamlStyles","publisherHandle":"adospace","publisherId":"990024","publisherName":"Adolfo Marinucci","runCount":347,"viewCount":1151},{"description":"<p><em>Dynamically Generate Social Media Link Preview Images from your figma designs</em></p><p><br></p><p><strong>metaimage - dynamic og images</strong></p><p><br></p><ul><li>automatically generate og images for thousands of pages based off your figma designs</li><li>specify <strong>dynamic image and text layers</strong></li><li>fill the dynamic layers with text and image information from your pages</li></ul>","id":"1040077180224578586","installCount":286,"lastUpdateDate":"2021-11-10T01:36:10.868Z","likeCount":7,"name":"Mediamask Figma Plugin","publisherHandle":"fullsnack","publisherId":"177061","publisherName":"Gregor Vostrak","runCount":250,"viewCount":761},{"description":"<p><strong>📺 一分钟学习如何使用 DSM</strong></p><p><a href=\"https://www.bilibili.com/video/BV1K34y1773E?share_source=copy_web\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://www.bilibili.com/video/BV1K34y1773E?share_source=copy_web</a></p><p><br></p><p><br></p><p><strong>📪 简介</strong></p><p>通过Semi DSM，打造符合业务和品牌多样化视觉需求的风格。</p><p>配合插件，可以将 DSM 中定义的样式应用在设计稿中。在提升效率的同时，进一步保证设计和研发的持续对齐，降低产研间的沟通成本。</p>","id":"1040108157914286126","installCount":1178,"lastUpdateDate":"2022-05-20T10:45:02.048Z","likeCount":67,"name":"Semi-DSM","publisherHandle":"semi","publisherId":"39615","publisherName":"Semi Design","runCount":1214,"viewCount":3302},{"description":"<p>forget lorem impsum instead use Bob Ross's happy quotes as placeholder text.</p><p><br></p><p>Inspired by - https://www.bobrosslipsum.com/</p>","id":"1040116132312926263","installCount":1700,"lastUpdateDate":"2022-07-20T15:15:00.827Z","likeCount":25,"name":"Happy ipsum","publisherHandle":"tkmadeit","publisherId":"156890","publisherName":"Tekeste Kidanu","runCount":1947,"viewCount":2371},{"description":"<p><strong>Assign color value (Hex and HSL are supported) to text node</strong></p><p><br></p><p>Replace your text named like <code>$hex</code> ,<code>$hsl</code> with the corresponding frame color value</p><p><br></p><p>=== Usage ===</p><p><br></p><ol><li>Make a frame or group</li><li>Fill them with a single color</li><li>Put a text node with name <code>$hex</code>, <code>$hsl</code> (more in the section Supported Signifier!) inside (nested are allowed) the frame or group</li><li>Select the frame or group, and then run this plugin</li><li>Find out the text node's text is replaced with the selected frame or group's color code (hex is like #ffffff, and hsl is like hsl(0, 0, 100%).</li></ol><p><br></p><p>=== Supported Signifier ===</p><p><br></p><ul><li><code>$hex</code></li><li><code>$hsl</code></li><li><code>$hsla</code></li><li><code>$rgb</code></li><li><code>$rgba</code></li><li><code>$alpha</code></li><li><code>$styleName</code></li></ul>","id":"1040245744043159776","installCount":276,"lastUpdateDate":"2022-03-01T15:24:47.930Z","likeCount":10,"name":"Assign Color Value to Text","publisherHandle":"qsf","publisherId":"88252","publisherName":"たふみ","runCount":350,"viewCount":1137},{"description":"<p>Use Text Volume to get a sense of whether the amount of text in your UI is right for your target audience. The research that informs the suggestions in this plugin is in development and will be refined as we learn more in our studies on the topic of text volume and user cognition. </p>","id":"1040340750434492789","installCount":468,"lastUpdateDate":"2021-11-10T19:08:42.018Z","likeCount":19,"name":"Text Volume","publisherHandle":"ChimeFinancial","publisherId":"984548267757243946","publisherName":"Chime","runCount":401,"viewCount":1640},{"description":"<p>Quickly select multiple layers by searching for parts of the layer name, complete names or regular expressions. It all happens within Figma's Quick Action bar. This is useful for editing multiple layers in one go, especially if they are deeply nested within component instances.</p><p><br></p><p>You also get a neat list of automatic suggestions consisting of ...</p><ul><li>up to three <strong>recently used queries</strong> and</li><li>most <strong>frequently found layer names</strong> in your <strong>current selection</strong>, filtered live by your query.</li></ul><p><br></p><p>The little number in front of the suggestions shows how many layers match this query. The selection you end up with might differ from that number, because the preview counts both, matching parent layers and matching children layers. Your selection will only contain the matching parent layer in such cases.</p><p><br></p><h2>Commands</h2><ul><li><strong>Select: </strong>Select layers with the help of an index of all layer names in the selection (or page).</li><li><strong>Select ⏭: </strong>Skip creating the index. Useful if working with huge sets of layers, where creating the layer name index can get slow.</li><li><strong>Subtract: </strong>Remove layers from the selection. Only affects the parent layers in the selection, not the children.</li></ul><p><br></p><h2>Modes</h2><ul><li><strong>Default</strong>: Select all layers that contain your query. Position within the name and case doesn't matter.</li><li><strong>\"Complete and precise\": </strong>Select only layers with exactly the name you select. This is case sensitive and white space also matters. Quotes mark these type of queries, no need to type the quotes, though.</li><li><strong>/Regular expression/: </strong>Select layers that match the regular expression that you enter as a parameter. Slashes mark these type of queries, no need to type them. Regular expressions show up as a suggestion when you use expressions like [0-9] or ^ in your query.</li></ul><p><br></p><p>The plugin is inspired by <a href=\"https://www.figma.com/community/plugin/799648692768237063/Select-Layers\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Select Layers</a> by Yuan Qing Lim, I've been an avid user of the \"Select layers by name\" function and saw an opportunity to make that workflow in particular a bit quicker and more powerful using the new parameters API and regular expressions.</p>","id":"1040373257649266080","installCount":1584,"lastUpdateDate":"2022-05-11T08:50:15.336Z","likeCount":47,"name":"Select by Name","publisherHandle":"richy","publisherId":"64","publisherName":"Richard Bruskowski","runCount":1799,"viewCount":2897},{"description":"<p>Generate realistic placeholder data into text layers, brought to you by <a href=\"https://twilio.com\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Twilio</a> and <a href=\"https://paste.twilio.design/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Paste</a>.</p><p><br></p><p>Supported data:</p><ul><li>SID</li></ul><p><br></p><p>For data requests, please reach out to the <a href=\"https://paste.twilio.design/getting-started/working-guide\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Twilio Design Systems team</a>, <a href=\"https://github.com/twilio-labs/twilio-ipsum/issues\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">create an issue</a>, or <a href=\"https://github.com/twilio-labs/paste/discussions\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">start a Github discussion</a>.</p>","id":"1040423794729523647","installCount":541,"lastUpdateDate":"2022-03-31T19:17:48.624Z","likeCount":6,"name":"Twilio Ipsum","publisherHandle":"twilio","publisherId":"910622172972968791","publisherName":"Twilio","runCount":819,"viewCount":1353},{"description":"<p>Restaurant generator allows you to populate your components with realistic, matching restaurant data. Simply name each of the layers by their supported data types and instant generate content for any component, frame, group, or layer. Supports multi-select and a hard coded set of restaurant data, but more to come!</p><p><br></p><p>For this to properly work, you need to name the field inside a component or group with the following options:</p><p>[data-name], [data-cuisine], [data-address], [data-cover]</p>","id":"1040477961904666099","installCount":134,"lastUpdateDate":"2021-11-11T04:19:42.407Z","likeCount":6,"name":"Restaurant Generator","publisherHandle":"arnaud_ritual","publisherId":"1296882","publisherName":"Arnaud Ladoucette","runCount":167,"viewCount":370},{"description":"<p><strong>Mirotone</strong> is a small and lightweight design system kit that tries to match Miro styles for helping you design, build and integrate apps.</p><p>Mirotone icons, is just another easy way for you to consume them, feel free to explore <a href=\"http://www.mirotone.xyz\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">www.mirotone.xyz</a> for more.</p><p><br></p><p>This simple app is under beta feature flag, so feel free to provide feedback.</p>","id":"1040629471915005702","installCount":2456,"lastUpdateDate":"2021-12-12T15:24:24.919Z","likeCount":17,"name":"Mirotone icons","publisherHandle":"boriskirov","publisherId":"3613314","publisherName":"Boris Kirov","runCount":2417,"viewCount":3610},{"description":"<p>With the AWS Amplify Theme Editor you can update the color themes for your Amplify Studio application directly within Figma. All changes made to components in Figma will automatically update the UI theme for your app in Studio. The Amplify UI theme uses design tokens so you can customize every part of your application. This plugin will update your Figma file and sync your theme changes with Amplify Studio.</p>","id":"1040722185526429545","installCount":2326,"lastUpdateDate":"2022-07-21T19:04:58.960Z","likeCount":34,"name":"AWS Amplify Theme Editor","publisherHandle":"awsamplify","publisherId":"1029878478900868415","publisherName":"AWS Amplify","runCount":2437,"viewCount":4464},{"description":"<p>Generate SwiftUI from your design tokens and export as package. Once included in Xcode, developers will have access to design tokens directly through Xcode's editor and code complete.</p><p><br></p><p>To get started install the plugin and run it on <a href=\"https://www.figma.com/community/file/1053494698824132011/Swift-Package-Exporter-Sample-File\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">this sample file</a>.</p><p><br></p><ul><li><a href=\"https://www.youtube.com/watch?v=FL9weFvjsqQ\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Demo video</a></li><li><a href=\"https://www.youtube.com/watch?v=CZolAz91prw\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Getting started video</a></li></ul><p><br></p><p>Learn more: <a href=\"https://figmatoswift.com\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://figmatoswift.com</a></p><p><br></p><h2>👉 Supported Styles</h2><p>Styles defined in your document will be automatically recognized by the plugin including:</p><p><br></p><ul><li>✅ Text</li><li>✅ Solid Colors</li><li>✅ Linear Gradients</li><li>✅ Angular Gradients</li><li>✅ Drop Shadows</li><li>✅ Layer Blurs</li><li>✅ Grid styles</li></ul><p><br></p><p><em>* Radial and diamond gradients are not currently supported.</em></p><p><em>* Inner shadow and background blur are not currently supported.</em></p><p><br></p><h2><strong>👉 </strong>Images</h2><p>Requirements for adding images to Swift package:</p><ul><li>Only <strong>vector images</strong> are supported</li><li>Images must be <strong>defined as components</strong></li><li>Images must be wrapped in a frame named <strong>Images.swift</strong></li></ul><p><br></p><h2><strong>👉 </strong>Adding the Package to Xcode</h2><ol><li>Unzip the exported file and drag the entire DesignSystem folder into the Xcode project navigator right below the project name.</li><li>Add the DesignSystem package to Frameworks, Libraries and Embedded Content inside your projects general settings.</li><li>Import the DesignSystem module in any views that you want to use design tokens with <code>import DesignSystem</code></li></ol><p><br></p><h2><strong>👉 </strong>Example Usage</h2><ul><li><code>.font(Font.DesignSystem.headline1)</code></li><li><code>.foregroundColor(Color.DesignSystem.primary)</code></li><li><code>.modifier(Effect.DesignSystem.Elevation1())</code></li><li><code>.padding(Spacing.DesignSystem.xSmall4)</code></li><li><code>Image.DesignSystem.welcome</code></li></ul><p><br></p><h2><strong>👉 FAQs &amp; Known Issues</strong></h2><ul><li>Style names that contain numbers can sometimes cause issues in Xcode. For ex \"<em>blue/1</em>\" and \"<em>blue/-1</em>\" will cause an error)</li><li>Apple docs on <a href=\"https://developer.apple.com/documentation/uikit/text_display_and_fonts/adding_a_custom_font_to_your_app\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">adding custom fonts to Xcode</a></li><li>The Mac App Store version of Xcode has a bug that prevents packages from working. Download Xcode directly from Apple's Developer site to resolve. <a href=\"https://developer.apple.com/download/all/?q=Xcode%2013.2\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Apple Developer Site</a></li></ul><p><br></p><h2>Feedback and Support</h2><ul><li>For more information please visit: <a href=\"http://figmatoswift.com\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">http://figmatoswift.com</a></li><li>For feedback, questions or support please reach out on <a href=\"http://twitter.com/toddham\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Twitter</a> or <a href=\"mailto:toddham@gmail.com?subject=Swift Package Exporter Support\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Email</a></li></ul>","id":"1041038879576667317","installCount":885,"lastUpdateDate":"2021-12-16T02:04:49.332Z","likeCount":15,"name":"Swift Package Exporter","publisherHandle":"toddham","publisherId":"2640437","publisherName":"Todd Hamilton","runCount":835,"viewCount":2793},{"description":"<p>Flip coins, make important decisions.</p>","id":"1041230807023764771","installCount":226,"lastUpdateDate":"2021-12-10T06:15:41.070Z","likeCount":3,"name":"Coin Flip","publisherHandle":"heyman","publisherId":"890177","publisherName":"tarik","runCount":258,"viewCount":561},{"description":"<p><strong>Having trouble finding important groups of layers?</strong></p><p>Now you have the ability to set a Special Icon on individual layers in the layer list.</p><p>I really hope it will help you and increase your productivity!</p><p><br></p><p>Any questions or suggestions, contact me: <a href=\"mailto:nowork.app@gmail.com\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">nowork.app@gmail.com</a></p>","id":"1041358934859550106","installCount":927,"lastUpdateDate":"2021-11-27T15:24:07.882Z","likeCount":16,"name":"Layer Icon: for your important layer","publisherHandle":"nowork","publisherId":"1021661660923531625","publisherName":"NOWORK","runCount":893,"viewCount":2169},{"description":"<p>FrameSearch is the perfect searching tool you've been missing from Figma.</p><p><br></p><p>---</p><p>Thanks to all the comments and feedbacks from you guys, now the <strong>keyboard navigation</strong> between search results is supported! You can use both <code><strong>Tab</strong></code> or the <strong>Arrow</strong> buttons to navigate between search results and hit <code><strong>Enter</strong></code> to jump to any Frame.</p><p><br></p><p><strong>Frames</strong>, <strong>Groups</strong>, and <strong>Instances</strong> are all searchable now!</p><p>---</p><p><br></p><p>Please hit the like ❤️ button if you find this tool to be useful! This will encourage me to improve functionality with a faster speed. LOL.</p><p><br></p><h2><strong>Search for any Frames across all Pages of the document.</strong></h2><p><br></p><p><strong>→ </strong>Launch the plugin and input the name of the Frame you are looking for.</p><p><strong>→ </strong>Tap <code><strong>Enter</strong></code> to find any <strong>Frame / Group/ Instance</strong> across all <strong>Pages</strong> and jumps to the location by clicking the results.</p><p><strong>-&gt; </strong>You can also tap <code><strong>Up Arrow</strong></code> / <code><strong>Down Arrow</strong></code> on your keyboard to select the Last or the Next results, and hit <code><strong>Enter</strong></code> to jump and focus!</p><p><strong>→ </strong>Don't remember the exact name? No problem! Fuzzy match is supported.</p><p><strong>→ </strong>Separate your keyword with empty space for more accurate results.</p><p><br></p><p><br></p><h2><strong>Binding keyboard shortcut: </strong> <code>⌘command</code> <strong> + </strong> <code>F</code></h2><p><br></p><p>By binding the exact name <strong>FrameSearch</strong> with a keyboard shortcut, you can use <code><strong>Command</strong></code><strong> + </strong><code><strong>F</strong></code><strong> </strong>to launch the plugin and start searching immediately.</p>","id":"1041592393049095741","installCount":655,"lastUpdateDate":"2022-03-20T06:06:16.268Z","likeCount":21,"name":"FrameSearch","publisherHandle":"chrislll","publisherId":"969121","publisherName":"Chris Liu","runCount":812,"viewCount":1414},{"description":"<p><strong>Plugin for creating SVG code of the selected frame or image.</strong></p><p>Instruction manual:</p><ol><li>Launch the plugin.</li><li>Perform authorization or registration.</li><li>Reload the plugin.</li><li>Select the desired frame in the Figma layout.</li><li>Click the button in the plugin (HTML, CSS, IMG) depending on the required code. Currently there is support for three SVG formats. 1.<code>&lt;svg&gt;...&lt;/svg&gt;</code> 2.<code>background-image: url(...)</code> 3. <code>&lt;img src=\"...\"&gt;</code>. The selected frame will be translated into code and automatically copied to the clipboard.</li><li>Paste the copied code into the code editor by pressing CTRL+V or by right-clicking in the code editor field.</li></ol><p><br></p><p>For the convenience of work, the plugin can be minified. To do this, click on the \"Mini version\" button.</p>","id":"1041976583581285249","installCount":1820,"lastUpdateDate":"2022-05-11T08:13:27.670Z","likeCount":0,"name":"SVG Converter","publisherHandle":"mitfleg","publisherId":"910569762347662279","publisherName":"Mit Fleg","runCount":2382,"viewCount":2404},{"description":"<p>Plugin for checking the correct structure and styles of form layouts that are based on the qpalette design system</p><p><br></p><p>The plugin is based on deeply reworked sources of</p><p><a href=\"https://www.figma.com/community/plugin/801195587640428208/Design-Lint?fuid=753936249196165850\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">Design Lint – Figma</a></p>","id":"1042034416979013631","installCount":49,"lastUpdateDate":"2021-11-16T13:56:58.279Z","likeCount":0,"name":"QPallete Linter Beta","publisherHandle":"thedainilius","publisherId":"2197443","publisherName":"Danila Luzhin","runCount":29,"viewCount":147},{"description":"<p>Your design, with real data, running on real devices, validated by real users.</p><p><br></p><h2>Prototyping on Steroids</h2><p><br></p><p>If clickable prototypes still don't cut it and you need real functional prototypes, who you gonna call?</p><p><br></p><p>weave.ly enables you to get more out of your designs. That means:</p><p><br></p><ul><li><strong>More</strong> <strong>fidelity</strong>: Gradually add functionality and real data to those parts of your design that most require it!</li><li><strong>More</strong> <strong>testing</strong>: Our platform turns your designs automatically into fully functional web apps. Just share the link with users and let them test it in the field!</li><li><strong>More</strong> <strong>data</strong>: our apps automatically track usability statistics, provided in a handy dashboard for you to draw insights from!</li></ul><p><br></p><p>For more complete information and tutorials go to https://weave.ly.</p><p><br></p><h2>BETA</h2><p><br></p><p>This plugin is currently released as a beta prototype of the final product. What this means for you is:</p><ul><li>Functionality and support for various Figma design elements is currently limited, but expanded on a regular basis.</li><li>You will most definitely encounter bugs!</li><li>Any and all feedback is more than appreciated, just send us a mail at info@weave.ly.</li></ul>","id":"1042115889884558460","installCount":150,"lastUpdateDate":"2022-07-06T13:24:19.937Z","likeCount":12,"name":"weave.ly","publisherHandle":"weavely","publisherId":"933750823966130214","publisherName":"weave.ly","runCount":169,"viewCount":836},{"description":"<p>Easily organize nodes into a wrapped layout, a-la flexbox. Nodes will automatically wrap into the next row when the width of the containing frame is reached.</p><p><br></p><h2>Current limitations</h2><ul><li>Only supports top-&gt;bottom, left-&gt;right flow</li></ul><p><br></p><h2>Support</h2><p><a href=\"https://github.com/setphen/WrappedLayout\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">https://github.com/setphen/WrappedLayout</a></p>","id":"1042129478204950669","installCount":1126,"lastUpdateDate":"2021-11-24T13:56:59.626Z","likeCount":40,"name":"Wrapped Layout","publisherHandle":"setphen","publisherId":"2756690","publisherName":"Stephen Lindberg","runCount":1465,"viewCount":4008},{"description":"<p>Add images/text to your designs directly from wherever they are, directly in Figma.</p><p>Access Stock Images or use your workflow for approval.&nbsp;</p><p>Share with your Team. in Dropbox or Google Drive and more.</p><p>And never leave Figma.&nbsp;</p><p><br></p><p>Supports already: Adobe CC Library, Adobe Lightroom, Adobe Stock, Adstream, Aprimo, Box, Brandfolder, Brandmaster, Brandworkz, Bynder, Celum, Censhare, Cliplister, Dash, Dropbox, Eyebase, Fadel, Fotoware, Gelato, Getty Images, Google Drive, Google Photos, Imageshop, Istock, Keepeek, Myview, OneDrive, Opentext, Picturepark, Pimcore, Pixelboxx, Purered, Sharedien, Sharepoint, Shutterstock, SiteFusion, Unsplash, Veeva, Webdam, WIden, Workfront</p><p><br></p><p><em>This is not an official plugin created by Google or Microsoft or any other• It is simply created with </em>❤️<em> by CI HUB</em></p><p><br></p><p><strong>STEP 1:</strong></p><p>Install the Plugin</p><p><br></p><p><strong>STEP 2:</strong></p><p>Setup your CI HUB ID at <a href=\"https://ci-hub.com\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">https://ci-hub.com</a></p><p><br></p><p><strong>STEP 3:</strong></p><p>Connect to where your Files are and start using.</p><p><br></p><p>--------</p><p><br></p><p>Visit our CI HUB Academy to learn how to save time in Figma: <a href=\"https://docs.sheetssync.app/\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">https://ci-hub.com/academy/</a></p><p><br></p><p>--------</p><p><br></p><p><strong>Free Trial, and Subscription Payment:</strong></p><p>All first-time users receive a 30-day free trial upon registration/creation of a CI HUB ID.</p><p>Payment via credit card is required upon the conclusion of the trial period to continue use. VISIT https://ci-hub.com for all the latest pricing and details. Corporate plans are available on request at sales@ci-hub.com.</p><p><br></p><p><strong>Important Notes:</strong></p><p>To use the CI HUB Connector to connect to one of the offered third party systems, you may need a login/user account with the selected system. The availability and/or the right to connect to the third-party system is not part of the CI HUB Connector or the CI HUB Services. To use the third-party system, there may be additional cost and/or agreements with the provider of the third-party system needed. CI HUB reserves the right to remove the third-party system from the list of avail. systems or add new third party systems at any time and without notice. To use CI HUB Connector, a full connection to the Internet is required at all times. (Corporate setups with Proxy or Firewalls on request)</p><p><br></p><p>To see Demo-Video, Tutorials and more go to https://ci-hub.com/ci-hub-how-to-tutorial/ or visit our Youtube Channel.</p><p><br></p><p>We are always here to help you! Let us know any issue, suggestion or feedback: support@ci-hub.com</p>","id":"1042436430698322448","installCount":618,"lastUpdateDate":"2021-11-16T13:58:06.837Z","likeCount":17,"name":"CI HUB Connector","publisherHandle":"cihub","publisherId":"1039648190743660914","publisherName":"CI HUB Connector","runCount":646,"viewCount":1901},{"description":"<h2>Generate grid styles via <a href=\"https://gridissimo.jamillazarev.com\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">gridissimo.jamillazarev.com</a></h2><h2><br></h2><p><strong>Usage</strong></p><ul><li>Generate grids using https://gridissimo.jamillazarev.com/</li><li>Click \"For Figma\" in the upper right corner</li><li>Run the plugin, Paste &amp; press \"Generate styles\"</li></ul><p><br></p><p><strong>Keep in mind</strong></p><ul><li>A short link, properties &amp; CSS will be attached to style in the description.</li><li>The plugin knows what you have already generated – you don't need to reconnect the styles if you don't change names. Just paste the new URL into the plugin.</li></ul>","id":"1042543949816080060","installCount":677,"lastUpdateDate":"2021-11-23T10:40:08.019Z","likeCount":6,"name":"gridissimo-converter","publisherHandle":"jamillazarev","publisherId":"90866","publisherName":"Jamil Lazarev","runCount":832,"viewCount":1397},{"description":"<p>With this plugin, you can beautifully your design system and make informative style guides in just a couple of minutes. It works with templates that you can customize.</p><p><br></p><p>Before working with the plugin, I advise you to read the instructions, as well as templates for working with it are stored there&nbsp;- <a href=\"https://www.figma.com/community/file/1070229436428798703/DS-Templater----Guide?fuid=887636254001390910\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://www.figma.com/community/file/1070229436428798703/DS-Templater----Guide</a></p><p><br></p><p>At the moment, the plugin is a beta version in the future it will only get better.</p><p><br></p><p><strong>About issues write here:</strong></p><p>💬 - <a href=\"https://t.me/NeutralWinter\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Telegram</a></p><p>📧 - NeutralVVinter@gmail.com</p><p><br></p><p>💗<strong> Also follow me on social media</strong></p><p><a href=\"https://teletype.link/neutralwinter\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://teletype.link/neutralwinter</a></p>","id":"1042681939283501853","installCount":559,"lastUpdateDate":"2022-06-05T17:39:31.495Z","likeCount":17,"name":"DS-Templater (beta)","publisherHandle":"neutralwinter","publisherId":"887636254055482237","publisherName":"Denis","runCount":709,"viewCount":1778},{"description":"<p>In our design, texts are always in different layers. You needed multiple clicks to edit it.</p><p>But now, we made all texts in one place when you select them.</p><p>Faster and easier, just like using a plain text editor.</p><p><br></p><p>Even more powerful with searching, finding &amp; replacing, making numbered list...</p><p><br></p><p><br></p><p>Any questions or suggestions, contact me: <a href=\"mailto:nowork.app@gmail.com\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">nowork.app@gmail.com</a></p>","id":"1042878342391996546","installCount":4733,"lastUpdateDate":"2022-06-30T16:16:39.113Z","likeCount":85,"name":"Text Editor: edit, find, replace in one place","publisherHandle":"nowork","publisherId":"1021661660923531625","publisherName":"NOWORK","runCount":5322,"viewCount":7599},{"description":"<p>\"Delete for now!\"</p><p>\"Next time!\"</p><p>\"Pend!\"</p><p><strong>Have you ever been in a sad situation like this?</strong></p><p>This is the perfect plug-in for you.</p><p><br></p><p><strong>How to</strong></p><p>Simply select the FRAMES or COMPONENTS you no longer need and choose between 'Deleted', 'Pending', and 'Moved'.</p><p>(If you would like to use different wording, simply select \"Customize\".)</p><p><br></p><p>-------------------</p><p><br></p><p>せっかく頑張って作ったのに</p><p>「この画面・機能一旦なしで」</p><p>「一旦ペンディングで」</p><p>という台無しな一言…</p><p><br></p><p>Don't Needはこんな場面にピッタリのプラグインです。</p><p><br></p><p><strong>使い方</strong></p><p>一旦必要なくなったFRAMEやCOMPONENTを選択して「Deleted」「Pending」「Moved」から選ぶだけです。</p><p>（もし、他の文言を使いたい方は「Customize」を選択して文言を入れるだけです。）</p>","id":"1043058429181195560","installCount":131,"lastUpdateDate":"2022-05-25T07:19:47.630Z","likeCount":10,"name":"Don't Need","publisherHandle":"kurokky","publisherId":"1040435397021460078","publisherName":"黒木シンタロー","runCount":129,"viewCount":499},{"description":"<h2>Generate text styles via <a href=\"https://typographyssimo.jamillazarev.com\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">typographyssimo.jamillazarev.com</a></h2><h2><br></h2><p><strong>Usage</strong></p><ul><li>Generate text styles using https://typographyssimo.jamillazarev.com/</li><li>Click \"For Figma\" in the upper right corner</li><li>Run the plugin, Paste &amp; press \"Generate styles\"</li></ul><p><br></p><p><strong>Keep in mind</strong></p><ul><li>A short link, properties &amp; CSS will be attached to style in the description.</li><li>The plugin knows what you have already generated – you don't need to reconnect the styles if you don't change names. Just paste the new URL into the plugin.</li></ul>","id":"1043331909393642154","installCount":573,"lastUpdateDate":"2021-11-23T10:40:32.010Z","likeCount":5,"name":"typographyssimo-converter","publisherHandle":"jamillazarev","publisherId":"90866","publisherName":"Jamil Lazarev","runCount":532,"viewCount":1266},{"description":"<p>View the pixel fidelity render when designing your icons.</p>","id":"1043591651911818218","installCount":1103,"lastUpdateDate":"2022-05-10T17:04:28.719Z","likeCount":40,"name":"Icon Pixel Preview","publisherHandle":"a","publisherId":"1951744","publisherName":"Aaron Iker","runCount":966,"viewCount":2392},{"description":"<p>A quick and easy way to prototype 3D, VR and AR surfaces without ever leaving Figma.</p><p><br></p><p>3D UI Generator automatically scales and adjusts any graphic, board or frame to create a 3D surface + environment. It supports full rotation, skew, scale, zoom, FOV and curve amount in perspective 3D and isometric views.</p><p><br></p><p><strong>NEW: </strong>3D grid helpers, custom colors, transparent and full scene exports. A 3D user can be toggled for immersive testing with animated gestures.</p>","id":"1043890631255427270","installCount":11460,"lastUpdateDate":"2022-02-14T07:08:47.324Z","likeCount":156,"name":"3D for XR","publisherHandle":"jcastellano","publisherId":"3530973","publisherName":"Jeffrey Castellano","runCount":12809,"viewCount":19091},{"description":"<h2>Generate variables via <a href=\"https://sizessimo.jamillazarev.com\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">sizessimo.jamillazarev.com</a></h2><h2><br></h2><p><strong>Dependency: </strong><a href=\"https://www.figma.com/community/plugin/1000963812142874727/variables\" rel=\"noreferrer noopener nofollow\" target=\"_blank\"><strong>variables plugin</strong></a></p><p><br></p><p><strong>Usage</strong></p><ul><li>Generate variables using https://sizessimo.jamillazarev.com/</li><li>Click \"For Figma\" in the upper right corner</li><li>Run the plugin, Paste &amp; press \"Run\"</li><li>Install &amp; run variables plugin</li></ul><p><br></p><p><strong>Keep in mind</strong></p><ul><li>A short link, properties &amp; CSS will be attached to the hidden layer.</li><li>The plugin knows what you have already generated – you don't need to reconnect the variables if you don't change names. Just paste the new URL into the plugin and press “update variables” in variables plugin</li></ul>","id":"1044203295979443614","installCount":250,"lastUpdateDate":"2021-11-25T11:07:21.734Z","likeCount":2,"name":"sizessimo-converter","publisherHandle":"jamillazarev","publisherId":"90866","publisherName":"Jamil Lazarev","runCount":184,"viewCount":580},{"description":"<p>Simple graphical button to duplicate selection</p>","id":"1044252084528589263","installCount":138,"lastUpdateDate":"2021-11-21T19:08:41.063Z","likeCount":1,"name":"Duplicate","publisherHandle":"pierre_petiteau","publisherId":"1042757493428527767","publisherName":"Pierre Petiteau","runCount":154,"viewCount":427},{"description":"<p>Based on your color palette, discover, generate and validate all the accessible color combinations you can have in a fast and easy way.</p><p><br></p><p>In this first version, you can generate all the AAA validated color combinations that your color palette allows.&nbsp;</p><p><br></p><p>How to use it:</p><ol><li>Install the plugin&nbsp;</li><li>Run the plugin on your Figma File</li><li>Define the base color on your color palette. Juliette will generate the extended palette with lighter and darker colours and the combinations available that validate AAA.</li><li>Click “Export” and a new page will be created with all the possible combinations.</li></ol><p><br></p><p>Stay tuned for the updates!</p>","id":"1044333944861264414","installCount":870,"lastUpdateDate":"2022-03-06T22:23:41.744Z","likeCount":19,"name":"Juliette - Generate accessible color combinations","publisherHandle":"peanutbuttr","publisherId":"1044326205045653874","publisherName":"Peanutbuttr","runCount":934,"viewCount":2447},{"description":"<p>Build beautiful design with DrawKit 3D builder you can easily mix and match 3D illustrations and icons and drop them into your Figma file.</p><p><br></p><ul><li><strong>6 Categories:</strong>&nbsp;Social Media, Cryptocurrency, Sparks, Primitive shapes, UI elements, Icons and more coming</li><li>Total&nbsp;<strong>400+</strong>&nbsp;images on the library</li><li>Each pack comes with&nbsp;<strong>color variations</strong>&nbsp;</li><li>Free to use&nbsp;</li></ul><p><br></p><p>We will be updating and adding more plug-ins going forward so be sure to follow us in Figma and subscribe to our newsletter so you don’t miss them.&nbsp;</p><p><br></p><p>Love what we do?&nbsp;<strong>Give us a like and share this plug-in</strong>&nbsp;to your social media to support us!</p><p><br></p><p>PS: Psst! If you like our 3D Builder, check out&nbsp;<a href=\"http://designstripe.com/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Designstripe</a>&nbsp;where you can build, edit and customize thousands of illustrations easily on our awesome web-app (They&nbsp;<a href=\"https://designstripe.com/catalog?styleId=5d48a2c3-8369-47c9-b55b-d32014e6d050\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">have free versions</a>&nbsp;to try too!)</p>","id":"1044419856113171023","installCount":13956,"lastUpdateDate":"2021-11-30T00:38:22.277Z","likeCount":218,"name":"Drawkit 3D Builder","publisherHandle":"drawkit","publisherId":"1010450921993622378","publisherName":"DrawKit","runCount":14129,"viewCount":18248},{"description":"<p>Keep track of your UX writing copy for each text layer inside a frame.</p><p><br></p><p>Allow your team to follow the status of any copy while staying full in context, without leaving Figma.</p><p><br></p><p>As a UX writer or product designer, you will be able to identify the progress of the work that is being done for a copy inside a frame, you can set the following status for your text:</p><p>To do</p><p>In progress</p><p>To review</p><p>Done</p><p><br></p><p>The Plugin will add the status in the name of the layer.</p><p><br></p><p><a href=\"https://github.com/lodgify/copy-status-figma-plugin/\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">Github</a></p>","id":"1044632054433601396","installCount":141,"lastUpdateDate":"2021-11-22T15:19:20.234Z","likeCount":8,"name":"UX writing status","publisherHandle":"fabienren","publisherId":"50780","publisherName":"fab","runCount":169,"viewCount":875},{"description":"<p><strong>Generate random confetti pattern on your canvas. </strong></p><p>It works with frame layers. Select the amount of confetti you want to add to selected frames and click 'Generate'.</p><p><br></p><p><strong>Workflow</strong></p><ol><li>Run the plugin</li><li>Select target frames</li><li>Select density of confetti you want to generate</li><li>Select one or more confetti elements using checkboxes. By default all the boxes would be selected</li><li>Add colors of your choice to the palette or leave as it is if you prefer random colors</li><li>Generate Confetti using selected colors or random colors by clicking 'Generate' action buttons</li></ol>","id":"1044658409805883306","installCount":3708,"lastUpdateDate":"2022-01-20T08:13:12.184Z","likeCount":54,"name":"Confetti Genie","publisherHandle":"abhijitchirde","publisherId":"99767","publisherName":"Abhijit Chirde","runCount":3946,"viewCount":5342},{"description":"<p><strong>Polyfill for auto-layout :</strong></p><p><br></p><p>A common problem with a simple solution!</p><p>Run the plugin to add a reverse button to each auto-layout frame\\component in the current page.</p><p>&nbsp;</p><p>Great for creating bidirectional components for LTR and RTL languages, chat components, and more.</p><p><br></p><h2><strong>For more plugins and gifs with usage examples:</strong></h2><h2><a href=\"https://figmaop.netlify.app/\" rel=\"noreferrer noopener nofollow\" target=\"_blank\"><strong>FigmaOP - open source Figma plugins-&gt;</strong></a><strong> </strong></h2><h2><br></h2><h2><a href=\"https://www.buymeacoffee.com/TalmSnir\" rel=\"noreferrer noopener nofollow\" target=\"_blank\"><strong>Support My Work on Figma Plugins-&gt;</strong></a></h2><p><br></p>","id":"1044913520786715800","installCount":519,"lastUpdateDate":"2021-11-27T10:09:48.308Z","likeCount":5,"name":"Auto Layout Reverse","publisherHandle":"TalmSnir","publisherId":"893556449536344028","publisherName":"Tal Snir","runCount":585,"viewCount":1996},{"description":"<p>Plugin designed to compress frames</p>","id":"1044920834929441954","installCount":82,"lastUpdateDate":"2021-11-23T10:32:07.170Z","likeCount":0,"name":"SunGroup Compress","publisherHandle":"SunGroup","publisherId":"1044918845359093904","publisherName":"SunGroup","runCount":107,"viewCount":253},{"description":"<p>Sympli Pulse is a version tracking application that lets you and your team clearly understand what's going on — even with hundreds of frames and design files — and answer the most painful questions about who changed what and why. You can examine the contents of a file in a layer-by-layer way or inspect your team's activities across all your files to monitor your projects' health from a bird's view.</p><p><br></p><p><strong>Single timeline</strong>: Sympli Pulse keeps discussions and commits in a single feed and gives you the necessary context to maintain your design files.</p><p><br></p><p><strong>Commit Preview</strong>: Sympli Pulse helps you create meaningful commits by showing all the changes made to the designs before committing, so you can double-check your commit message and ensure everyone —including developers — is on the same page and no changes are lost.</p><p><br></p><p><strong>Detailed tracking</strong>: Choose any component or frame on the design to see its history or history of the nearest tracked parent, and subscribe to changes in it. You'll get notified when the new version is published (Notifications are coming soon).</p>","id":"1045014719714064722","installCount":281,"lastUpdateDate":"2022-01-28T21:17:09.855Z","likeCount":14,"name":"Sympli Pulse","publisherHandle":"Sympli","publisherId":"2452044","publisherName":"Sympli ✨","runCount":308,"viewCount":1495},{"description":"<p>Generate random (and daily) nouns and import them as SVG.</p><p><br></p><p>Learn more about nouns <a href=\"http://nouns.wtf\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">here</a>.</p>","id":"1045020359359636829","installCount":381,"lastUpdateDate":"2021-11-23T19:04:48.408Z","likeCount":17,"name":"Nouns","publisherHandle":"snowberry","publisherId":"1035543635264253718","publisherName":"sn0wberry","runCount":361,"viewCount":1207},{"description":"<p>Removes all color layers which don't affect  on resultant color.</p>","id":"1045078538451234206","installCount":740,"lastUpdateDate":"2021-11-26T07:23:22.210Z","likeCount":18,"name":"Color Layers Cleaner","publisherHandle":"andrey_ger","publisherId":"891786740566016092","publisherName":"Андрей Герасимов","runCount":758,"viewCount":1074},{"description":"<p>Lanhu 本地部署插件，支持将Figma设计稿交付到企业和金融政府机构本地部署的蓝湖系统。本地部署版本的蓝湖，是一款满足企业对数据存储私密性需求的高效产品设计协同解决方案，无缝衔接产品、设计和研发流程，缩短研发周期，为企业快速实现数字化升级赋能。</p>","id":"1045276346404842107","installCount":838,"lastUpdateDate":"2021-11-24T10:12:25.198Z","likeCount":17,"name":"Lanhu 本地部署","publisherHandle":"Lanhu","publisherId":"994864304078251203","publisherName":"Lanhu","runCount":1103,"viewCount":2421},{"description":"<h2>Import a harmonious typography design system to Figma with the Archetype to Figma plugin.</h2><p><br></p><p>The Archetype to Figma plugin allows Archetype users  (<a href=\"https://archetypeapp.com\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">https://archetypeapp.com</a>) to export their beautifully crafted typography design projects into Figma as reusable typography components. Components are generated in Figma to include all of the styling and spacing created in Archetype, so you can effortlessly move your Archetype typography designs into your Figma projects.</p><p><br></p><p>(Please note, the Archetype export to Figma is available for Pro Archetype subscribers. Please see <a href=\"https://archetypeapp.com/\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">https://archetypeapp.com/</a> for details).</p><p><br></p><h2>About Archetype</h2><p><br></p><p>Archetype lets designers and developers quickly and easily create consistent typography styling and spacing live, in the browser. These styles are all underpinned by established typographic best practices meaning less guesswork and more harmonious designs.</p><p><br></p><p>Archetype helps you create a design system of consistent, reusable components which can be easily implemented as your finished design is exported as developer-friendly CSS, to Figma, or Sketch.</p><p><br></p>","id":"1045319780051202741","installCount":713,"lastUpdateDate":"2021-12-08T12:03:23.308Z","likeCount":10,"name":"Archetype to Figma","publisherHandle":"jamiegilman","publisherId":"4426306","publisherName":"Jamie Gilman","runCount":718,"viewCount":2013},{"description":"<p>Easy rename <strong>multi(choose or all)</strong> \"INSTANCE names\" or \"COMPONENT names\" or \"FRAME names\" at <strong>one time</strong>.</p><p><br></p><p>How to Use.</p><p><br></p><p>1. CHOOSE \"Type\" (ALL INSTANCES or ALL COMPONENTS or ALL FRAMES) or Click Objetcs.</p><p>2. CLICK \"Get List\"</p><p>3. EDIT names (NOT REMOVE UID)</p><p>4. CLICK \"Rename\"</p><p><br></p><p>--------------</p><p><br></p><p>一度に複数のインスタンスやコンポーネント、フレームの名前を変更したい時、<strong>規則性がなくて「置換しづらい」</strong>ことないですか？</p><p>このプラグインは<strong>全て</strong>の「インスタンス」や「コンポーネント」や「フレーム」の名前をリスト化し、リスト名を変更することで一度に大量の置換を行う事ができます。</p><p>もちろん、置換したいものだけのリストにすれば、そのリストだけが置換されます。</p><p><br></p><p>過去に作られた命名規則のないインスタンス名を一度に変更する際など是非使ってみてください。</p><p><br></p><p>使い方</p><ol><li>ALL INSTANCES / ALL COMPONENTS / ALL FRAMESのどれかを選択してください。(名前を変更したいオブジェクトを複数選択のみでもOK）</li><li>「Get List」をClickするとIDと名前のタブ区切りテキスト(TSV)のリストが表示されます。</li><li>テキストエディタやエクセルに貼り付けて対象の名前を変更します。（この時<strong>左側にあるIDはFigmaで使っているIDなので変更しないでください</strong>）</li><li>名前を編集し終わったTSVをテキストエリアに上書きして「Rename」ボタンをクリック</li></ol><p><br></p><p>※リストで置換しないものはリストから削除しても大丈夫です。</p>","id":"1045498965938708372","installCount":293,"lastUpdateDate":"2021-12-20T13:19:37.445Z","likeCount":10,"name":"Multi Renamer","publisherHandle":"kurokky","publisherId":"1040435397021460078","publisherName":"黒木シンタロー","runCount":461,"viewCount":1119},{"description":"<p>Go from high fidelity Figma designs to developer friendly XAML code which can be built upon and extended quickly. Easily generate packages ready to use in your projects.</p><p><br></p><p><strong>Step 1</strong></p><p>In addition to this&nbsp;Uno Platform Plugin for Figma&nbsp;also Download (“Duplicate”)&nbsp;<a href=\"https://www.figma.com/community/file/1110792522046146058\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Uno Platform Material Toolkit from Figma community</a>. For your convenience, the Material Toolkit file will also contain the sample Commerce App.</p><p><strong>Step 2</strong>: Export XAML</p><p>Inside Figma, navigate to <code>Example App</code> inside Uno Platform Material Toolkit. Select any one screen, right-click and select <code>Uno Platform</code> plugin to see your app screen as it will render on the device. Inside the Plugin then generate XAML by clicking <strong>&lt;/&gt;</strong>.</p><p><strong>Step 3</strong>: See XAML in your App</p><p>Copy XAML generated in step 2 and paste inside your Uno Platform App inside Visual Studio. If you need a sample Uno Platform app, use our&nbsp;<a href=\"https://platform.uno/docs/articles/external/figma-docs/overview/getting-started-uno-figma.html\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Getting Started guide</a>.</p>","id":"1045528009520465828","installCount":807,"lastUpdateDate":"2022-05-24T05:32:09.184Z","likeCount":24,"name":"Uno Platform","publisherHandle":"uno_platform","publisherId":"1045525027938593803","publisherName":"Uno Platform","runCount":880,"viewCount":2411},{"description":"<p>The fastest way to insert font based material design icons.</p><p><br></p><p>Quick Material Icons is optimized for speed of use. The gist: run the plugin, search for an icon and add it to your file. But the details make this experience feel great.</p><p><br></p><pre class=\"ql-syntax\" spellcheck=\"false\">I highly recommend adding a shortcut to the plugin. (see below for instructions)\n</pre><p><br></p><h2>Usage</h2><ul><li><code>CMD+P</code>, then type \"icon\", enter. Or setup a shortcut (instructions below)</li><li>You'll see a list of icons. After choosing your first, you'll see a list of recent icons</li><li>When you type, the full icon list is filtered and sorted based on recency.</li><li>Click or press Enter to select the icon. (you can also use arrow keys).</li></ul><p><br></p><h2>Features</h2><ul><li>Recent icons show by default.</li><li>Select with your keyboard.</li><li>After searching, results are sorted by recency.</li><li>When a text object is selected, and it has the same name as an icon, the plugin will automatically replace the text for that icon. Eg. a text object using Helvetica has <code>close</code> as characters. Running the plugin will use the Material Icons font and show an icon instead.</li><li>Running the plugin without a selection will add an icon in the center of the viewport.</li><li>If multiple text elements are selected, the plugin will run for each element.</li><li>If a frame or group is selected, the icon will be added to the center of the object.</li></ul><p><br></p><h2>How to set a shortcut to run the plugin (mac)</h2><ul><li>Go to <code>System Preferences &gt; Keyboard &gt; Shortcuts</code></li><li>Select <code>App Shortcuts</code> from the left sidebar</li><li>Click the <code>[+]</code> button</li><li>Choose <code>Figma</code> from the Applications dropdown</li><li>In <code>Menu Title</code> type <code>Quick Material icons</code></li><li>In <code>Keyboard Shortcut</code>, type whatever works best for you. I recommend <code>ctrl + l</code></li></ul>","id":"1045578614217951186","installCount":7567,"lastUpdateDate":"2021-12-22T05:21:23.523Z","likeCount":17,"name":"Quick Material Icons","publisherHandle":"bernatfortet","publisherId":"428814","publisherName":"Bernat Fortet","runCount":7403,"viewCount":6668},{"description":"<p>Simplified <a href=\"https://semver.org/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Semantic Versioning</a> for your Figma Nodes without external dependencies and consumable via API.</p><h2><br></h2><p>Features:</p><ul><li>Guided Semantic Versioning for your Nodes.</li><li>Issue Figma Document-Versions alongside the node versions.</li><li>History (and undo) the versioning.</li><li>Commit Messages</li><li>Consumable version information via Figma REST-API</li></ul><p><br></p><p>This plugin intents to help you keeping track of changes to your design by simply attaching a version number to your nodes.</p><p><br></p><p>The version number might be used to indicate the expected backend work triggered by the current design changes.</p><p><br></p><p>And it also allows you to reference the version in other tools and assets like issue trackers and documentation.</p><p><br></p><p>This plugin has&nbsp;<strong>no</strong>&nbsp;external dependencies, the version information is saved in the current document.</p><p><br></p><p><em>Be aware the meaning of the word \"backend\" depends highly on your project setup. In a progressive web app the \"backend\" is usually a front-end implementation whereas backend in a classical server-based webpage will be the actual server-side webapp implementation.</em></p><h2><br></h2><h2>How to use this Plugin?</h2><p>Select one or more nodes and run the plugin.</p><h2><br></h2><h2>How to use the Version Workflow?</h2><p>The version number consist of three to four numerical parts:</p><p><br></p><pre class=\"ql-syntax\" spellcheck=\"false\">MAJOR.MINOR.PATCH(-rfc.RFC)\n</pre><p><br></p><p>The Rfc-part in brackets is optional and depends on the \"requests for comments\" setting.</p><p>The numbers are supposed to increment only.</p><p><br></p><p><strong>MAJOR</strong></p><p>The MAJOR-release number increase marks a&nbsp;backward-incompatible&nbsp;change of your design.</p><p><br></p><p>Imagine you changed a frame containing a form by removing an input. As you might assume this will break the current implementation of the app using this design because the app actually works with that input and might expect a value attached to it.</p><p><br></p><p>Propagating this change will likely break the backend-implementation. You communicate this by increasing the major release number by one actually saying this is a backward-incompatible change. And you expect it to break the current implementation.</p><p><br></p><p><strong>MINOR</strong></p><p>The MINOR-release number increase marks a&nbsp;backward-compatible&nbsp;change of your design, usually by adding a feature.</p><p><br></p><p>Imagine you extended the functionality of a frame by changing the design to display an additional input element. While this will require backend work to make the input actually work, rolling out the design won't break the application. So that is a backward compatible change of the current design.</p><p><br></p><p>Increasing the MINOR release version communicates you added a change which might require backend work but won't break the current backend implementation.</p><p><br></p><p><strong>PATCH</strong></p><p>The PATCH-release number increase marks a simple fix of your design which does not require any backend work.</p><p><br></p><p>Let's say you adjust some colors or got a ticket telling you a responsiveness feature isn't working as expected. By fixing this you correct the intentional implementation of the current design.</p><p><br></p><p>By using the PATCH version number you communicate there is no change in the backend-interface of your design and it won't require any backend changes.</p><p><br></p><p><strong>RFC</strong></p><p>Depending on your surrounding development process you might not be able to decide on your own when a design is ready to release. In this case you may enable the \"request for comments\"-based workflow.</p><p><br></p><p>The Rfc-workflow adds a&nbsp;<code>-rfc.1</code>-label to the version reflecting the current iteration in your approval process.</p><p><br></p><p>Let's say you make a first draft of a form, since it's a minor change, you choose to add a minor-change and because you have the rfc-workflow enabled you're only minor release option (given your current version is&nbsp;<code>1.0.0</code>) is&nbsp;<code>1.1.0-rfc.1</code>. This communicates you drafted a first version of the intended minor change.</p><p>Your team then discusses your draft and gives you some feedback which requires changes. After these changes you increase the Rfc number resulting in&nbsp;<code>1.1.0-rfc.2</code>. After another discussion with your team all are fine with the changes and you release the design to&nbsp;<code>1.1.0</code>.</p><h2><br></h2><h2>How to use the Settings?</h2><p>The settings are saved per document. That said you will have to adjust the settings once per document.</p><p><br></p><p><strong>Use \"request for comments\"</strong></p><p>Checking this option enables a \"pre-release\" path for your versioning which adds the&nbsp;<code>-rfc.&lt;&lt;number&gt;&gt;</code>&nbsp;counter to the version.</p><p><br></p><p>Using this feature allows you to mark your changes as a \"proposal\" depending on the workflow your design work is embedded in.</p><p><br></p><p>Unchecking this option changes only the available options for you next version change and does&nbsp;not&nbsp;automatically change any saved versions in the document.</p><p><br></p><p><strong>Use commit messages</strong></p><p>Checking this option shows a text field to take a optional commit message. The draft of a commit message is internally saved in the node. The commit message is saved in a small history (currently up to 5 elements) being consumabe via the Figma API.</p><p><br></p><p><strong>Use version appendix at Node names</strong></p><p>Checking this option enables&nbsp;<code>@</code>-prefixed version appendices for node names. When you save a version on a node, an&nbsp;<code>@</code>-symbol will be added to node name (if it not already exists) and the saved version is appended to the name.</p><p><br></p><p>This feature also adds two more version options \"From Appendix\" and \"To Appendix\" to the user interface (if the version appendix and the internal version of that node differ) allowing you to f.e. manually set or remove the version. Please keep in mind that&nbsp;<code>0.x</code>&nbsp;versions are not supported by this plugin.</p><p><br></p><p>Unchecking this option does currently not remove any version appendices. If you want to remove any version appendices from your nodes you will have to do this manually at the moment.</p><h2><br></h2><p><strong>Issue the save of a new Figma file version..</strong></p><p>With this option enabled, the plugin will submit any version change (may it be Initial, Major, Minor, Patch, Rfc or Release) to the Figma version history (<a href=\"https://help.figma.com/hc/en-us/articles/360038006754-View-a-file-s-version-history\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://help.figma.com/hc/en-us/articles/360038006754-View-a-file-s-version-history</a>).</p><p><br></p><p>The version title will be \"Nodename@Version\" and the description will be the commit message if enabled and provided.</p><p><br></p><p><br></p><h2>API</h2><p>Purpose of this interface is to provide external access to the stored version number and the retained commit history per node.</p><p><br></p><p>Please consult the repository for more information: <a href=\"https://github.com/florianb/figma-semantic-versioning#api\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://github.com/florianb/figma-semantic-versioning#api</a></p>","id":"1046106377087666849","installCount":179,"lastUpdateDate":"2022-02-10T11:04:48.835Z","likeCount":9,"name":"Semantic Versioning","publisherHandle":"florian_neumann","publisherId":"1021775861120328923","publisherName":"Florian Neumann","runCount":216,"viewCount":2120},{"description":"<h2><strong>Generate various types of sample data specific to Indian users</strong>.</h2><p>This plugin includes a comprehensive set of user data generators especially designed for Indian users.</p><p><br></p><h2><strong>Workflow</strong></h2><p><strong>Generate data in your text layers</strong></p><ul><li>Select text layers on your Figma page</li><li>Click plugin buttons to generate corresponding data items in your text layers</li></ul><p><strong>Generate a table of user instances</strong></p><ul><li>Open '<em>Generate user data table</em>' tab of the plugin</li><li>Select required fields using the checkboxes. Some basic fields are already checked.</li><li>Enter the number of users needed in your table</li><li>Click on generate to create a set of users.</li><li>It will add a table filled with selected user data to your current Figma page.</li></ul><p><br></p><h2><strong>Features</strong></h2><ul><li>Generate unlimited combinations of Indian user data for your design</li><li>Add from a range of different data types to your text layers</li><li>Configure user tables using many options available and add them to your canvas</li></ul><p><br></p><h2><strong>Data generators included</strong></h2><ul><li>First-name, Last-name, Full-name</li><li>Date of birth, Age</li><li>Email</li><li>Mobile</li><li>Rural &amp; Urban addresses</li><li>City &amp; States</li><li>Pin Code</li><li>Professions based on different domains</li><li>Indian Passport numbers</li><li>Unique ID (Aadhar) numbers</li><li>PAN (Tax ID) numbers</li><li>UPI payment address (name &amp; mobile no.)</li><li>Driving license (DL) details</li><li>Vehicle registration (RC) details</li><li>Ethereum and ENS address</li><li>Bitcoin address</li></ul>","id":"1046328883372627755","installCount":543,"lastUpdateDate":"2022-01-20T07:30:23.332Z","likeCount":30,"name":"Indian User Data Tools","publisherHandle":"abhijitchirde","publisherId":"99767","publisherName":"Abhijit Chirde","runCount":522,"viewCount":1752},{"description":"<p>Check out the demo: https://twitter.com/imohanvadivel/status/1528290607160250370</p><p><br></p><ul><li>Select a node and run the plugin</li><li>Enter the total number of nodes to be created (inclusive of the initial node)</li><li>All replicas, along with the handle, appear on the canvas</li><li>Drag the red handle to rotate other nodes accordingly</li></ul><p><br></p><p><strong>Tip</strong></p><p>Since the handle is a line node, you can use Figma's default alignment option to quickly position the origin.</p><p><br></p><p>File bugs: https://github.com/imohanvadivel/rotate-replicas/issues</p>","id":"1046408980285879143","installCount":116,"lastUpdateDate":"2022-06-15T13:24:00.921Z","likeCount":3,"name":"Rotate replicas","publisherHandle":"mohanvadivel","publisherId":"321262","publisherName":"mohan vadivel","runCount":286,"viewCount":380},{"description":"<p>The official<a href=\"https://flat-icons.com/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\"> Flat-Icons</a> plugin with more than 27,900 icons. Why get this icon library?</p><p><br></p><p>✔ Access to <strong>hundreds of FREE icons</strong> without logging in</p><p><br></p><p>✔ <strong>User-friendly search</strong> – filter by <em>name</em>, <em>style</em>, and <em>format</em></p><p><br></p><p>✔ <strong>23 popular styles</strong> (full list<a href=\"https://flat-icons.com/bundle/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\"> here</a>)</p><p><br></p><p>✔ ALL icons in <strong>PNG </strong>and<strong> SVG format</strong> (free ones included)</p><p><br></p><p>✔ <strong>New additions</strong> – we’re constantly expanding the collection</p><p><br></p><p>Want more options? Check out our<a href=\"https://flat-icons.com/bundle/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\"> Lifetime Bundle</a> for unlimited possibilities.</p><p><br></p><p>Already own the bundle? Simply<a href=\"https://flat-icons.com/login/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\"> log in</a> and access all your premium icons from the Figma plugin.</p><p><br></p><p>For support and/or questions, don’t hesitate to get in touch at: contact@flat-icons.com</p><p><br></p><p>P.S. We are pretty liberal with our icons but, in case you’d like to check, here’s our<a href=\"https://flat-icons.com/license/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\"> License Agreement</a>.</p><p><br></p><p>About Us:<a href=\"https://flat-icons.com/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\"> Flat-Icons.com</a> is a growing design team that delivers free and premium resources to fellow professionals. Instead of subscriptions that drain your cash every month, our goal is to give you something really valuable that you can use forever. Let’s make every design beautiful!</p>","id":"1047249844599510706","installCount":31078,"lastUpdateDate":"2022-01-17T16:36:15.440Z","likeCount":100,"name":"Flat-Icons","publisherHandle":"6a15376b_4bab_4","publisherId":"1052329140023448040","publisherName":"Flat-Icons","runCount":40644,"viewCount":25551},{"description":"<p>NFTIZ is a Figma plugin that enables you to transform your design into a NFT. With NFTIZ, it's super easy to turn your Figma creations into NFT, put them on sale on OpenSea or send them as gifts to your friends.&nbsp;&nbsp;</p><p><br></p><h2>How to transform your design into NFT with NFTIZ?</h2><ol><li>Open the NFTIZ plugin</li><li>Select the frame you want to mint</li><li>Fulfill the form with a name, a description and the Ethereum address where you want to receive your NFT ⇒ Click on \"Mint\"</li></ol><p>Easy as 1,2,3...</p><p><br></p><p><a href=\"https://nftiz-app.xyz/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://nftiz-app.xyz/</a></p>","id":"1047579004421824566","installCount":640,"lastUpdateDate":"2022-01-09T16:04:08.021Z","likeCount":11,"name":"NFTIZ","publisherHandle":"meyanis","publisherId":"861238463462787623","publisherName":"Yanis Meziane","runCount":550,"viewCount":1711},{"description":"<p><strong>Plugin to generate random placeholder text in Indian languages.</strong></p><p>Create blocks of randomly generated text and add them to your canvas.</p><p><br></p><p>Select all the text layers you want to add text to and click 'Generate'. Each layer will be filled with a block of unique text.</p><p><br></p><p><strong>What is Desi?</strong></p><p>'Desi' is a word derived from Sanskrit 'Desa/Desam' (देश/देशम्), which means country. It is generally used to describe the people, culture, languages, and products of Indian origin.</p><p><br></p><p><strong>Currently supports 11 languages</strong></p><ol><li>Hindi</li><li>Marathi</li><li>Sanskrit</li><li>Tamil</li><li>Kannada</li><li>Telugu</li><li>Malayalam</li><li>Gujarati</li><li>Bangla</li><li>Odia</li><li>Punjabi</li></ol><p><br></p><p><strong>Features</strong></p><ol><li>Generates requested number of words, sentences or paras.</li><li>Language-specific punctuation marks</li></ol><p><br></p><p><strong>Workflow</strong></p><ol><li>Run plugin</li><li>Select one or more text layers where you want to add generated text</li><li>Enter the number and select type of text blocks such as Words, Sentences, or Paragraphs</li><li>Select the language from the dropdown list</li><li>Click on 'Generate' to add 'Desi Ipsum' text to your canvas</li></ol>","id":"1047585682551481419","installCount":770,"lastUpdateDate":"2022-02-02T06:49:09.221Z","likeCount":14,"name":"Desi Ipsum","publisherHandle":"abhijitchirde","publisherId":"99767","publisherName":"Abhijit Chirde","runCount":819,"viewCount":1252},{"description":"<p>Craftwork icons plugin provides a free and growing collection of the cuttest open source icons from <a href=\"http://craftwork.design\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Craftwork</a>.</p><p><br></p><p>Over 650 and growing icons in 3 packs and various commonly used categories to help you in search of what you need.</p><p><br></p><p>Disclaimer: The icons are owned by Craftwork.</p>","id":"1047665302404244638","installCount":5476,"lastUpdateDate":"2022-04-23T00:28:37.852Z","likeCount":28,"name":"Craftwork Icons","publisherHandle":"thierryntoh24","publisherId":"4382736","publisherName":"Thièrry Ntoh","runCount":5552,"viewCount":5300},{"description":"<h2><strong>Keep your variants tidy with Variant Organiser</strong></h2><p><br></p><p>Variant Organiser automatically arranges variants in a grid and creates property labels.</p><p><br></p><p><strong>NEW – Save spacing preferences</strong></p><p><br></p><h2><strong>How to run Variant Organiser</strong></h2><p><br></p><p>Variant Organiser is keyboard operated from Figma’s quick actions search bar:</p><p><br></p><p><strong>→</strong>&nbsp;Type&nbsp;<code>⌘</code>&nbsp;+&nbsp;<code>/</code>&nbsp;to open Figma’s quick actions search bar (or&nbsp;<code>CTRL</code>&nbsp;+&nbsp;<code>/</code>&nbsp;if you are on Windows)</p><p><strong>→</strong>&nbsp;Start typing “Variant Organiser” to search for the plugin</p><p><br></p><h2>Using the 'Organise' command</h2><p><br></p><p><strong>→</strong>&nbsp;First select the component set you want to organise</p><p><strong>→</strong>&nbsp;Search for and select&nbsp;<code>Variant Organiser &gt; Organise</code>&nbsp;in Figma’s quick actions search bar</p><p><strong>→</strong> Follow the prompts:</p><ol><li>Select which property to use for <strong>columns</strong> in the primary grid</li><li>Select which property to use for <strong>rows</strong> in the primary grid. If your component only has two properties, that's sufficient to arrange the variants in a simple grid. If you have more properties, this grid will be repeated to form blocks of variants within a larger grid.</li><li>Hit <code>Tab</code> to if you want to chose a property to generate <strong>horizontal blocks</strong>. This step is optional.</li><li>Hit <code>Enter</code> to generate the full grid structure. Any remaining properties will be used to group variants vertically.</li></ol><p><br></p><h2>How to edit spacing preferences</h2><p><br></p><p>You can edit the&nbsp;<em>spacing between variants</em>, as well as the&nbsp;<em>block spacing</em>&nbsp;in&nbsp;<code>Preferences</code>.</p><p><br></p><p><strong>→</strong>&nbsp;Search for and select&nbsp;<code>Variant Organiser &gt; Preferences</code>&nbsp;in Figma’s quick actions search bar</p><p><strong>→</strong>&nbsp;Follow the prompts:</p><ol><li>Enter the&nbsp;<code>Variant spacing</code></li><li>Enter the&nbsp;<code>Block spacing</code></li><li>Hit&nbsp;<code>Enter</code>&nbsp;to save your preferences</li></ol>","id":"1047796251364453654","installCount":2107,"lastUpdateDate":"2021-12-22T15:14:39.706Z","likeCount":139,"name":"Variant Organiser","publisherHandle":"perrysmotors","publisherId":"3736694","publisherName":"Giles Perry","runCount":2039,"viewCount":6019},{"description":"<p>First plugin/first version :)</p><p>Need to adjust your path with your grid?</p><p><br></p><ol><li>select at least one vector path</li><li>choose the value and snap!</li></ol><p><br></p><p>Feel free to adjust the position of your path to finish.</p><p><br></p><p>NB: All values are rounded, control poînts and line points, x and y.</p>","id":"1047845197554514292","installCount":348,"lastUpdateDate":"2021-12-03T11:38:26.502Z","likeCount":6,"name":"Snap Point In Path","publisherHandle":"modulofont","publisherId":"2438680","publisherName":"benoit","runCount":297,"viewCount":1015},{"description":"<p><strong>If you ever needed to replace all instances of a remote main component with its local equivalent, you know exactly how painful that can be, especially at scale</strong>.</p><p><br></p><p>The manual&nbsp;finding and swapping&nbsp;of&nbsp;instances and replacing remote styles with local styles&nbsp;can be very tedious.&nbsp;</p><p>&nbsp;</p><p>The default&nbsp;<em>*Copy/Paste*</em>&nbsp;functionality in Figma creates new top-level components in the destination file but keeps nested instances as instances of the main components in the origin file.&nbsp;A shortcoming of this approach is that it fails to&nbsp;relink all nested instances to the local main components.&nbsp;</p><p><br></p><p>But sweat no more—meet&nbsp;<strong>InstaRelinker</strong>&nbsp;by the&nbsp;Progress&nbsp;<a href=\"https://www.figma.com/community/plugin/969582819918741496/Unite-UX\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Unite&nbsp;UX Team</a>.</p><p><br></p><p>Check out <a href=\"https://www.youtube.com/watch?v=uKEvcwOQAnw\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">👀 </a> <a href=\"https://youtu.be/hGicyhYLBeQ\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Introductory video</a> (4:02)</p><p><br></p><p>We&nbsp;built&nbsp;this plugin&nbsp;to complement the continuous&nbsp;evolution&nbsp;of the&nbsp;<a href=\"https://www.figma.com/community/search?model_type=hub_files&amp;q=kendo\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Telerik and&nbsp;Kendo UI Kits for&nbsp;Figma</a>. As new&nbsp;UI&nbsp;components are added regularly&nbsp;to our libraries, we faced the need to replicate&nbsp;them&nbsp;between the multiple kits we support.&nbsp;Additionally,&nbsp;our&nbsp;users&nbsp;faced the need&nbsp;to upgrade to newer versions of the Telerik and Kendo UI&nbsp;kits, while&nbsp;preserving&nbsp;any&nbsp;modifications&nbsp;they had&nbsp;already&nbsp;made to their version.&nbsp;&nbsp;</p><p><br></p><p><strong>What the&nbsp;Plugin&nbsp;Does</strong>&nbsp;</p><p>The plugin enables nested&nbsp;<em>*remote*</em>&nbsp;instances and styles within selected&nbsp;<em>*local*</em>&nbsp;main components to be relinked to their local equivalents. When the plugin runs, it will scan the current Figma file for&nbsp;<em>*local*</em>&nbsp;main components and automatically relink any remote instance for which&nbsp;a&nbsp;local main component is matched by name. If no match is&nbsp;found,&nbsp;then the plugin will allow users to manually select&nbsp;the&nbsp;local main component for each remote&nbsp;instance and&nbsp;relink it. The same process is applied for&nbsp;remote&nbsp;styles.&nbsp;</p><p><br></p><p><strong>How&nbsp;It’s&nbsp;Done&nbsp;</strong>&nbsp;</p><p>The plugin relies on Figma's built-in&nbsp;Copy-Paste functionality to&nbsp;move&nbsp;main components from one file to another.&nbsp;</p><p>&nbsp;</p><p><strong>Replicate Components and Run the Plugin:</strong>&nbsp;</p><p><strong>1.</strong>&nbsp;Open the file&nbsp;containing&nbsp;the main components.&nbsp;This is the origin (or source) file.&nbsp;</p><p><strong>2.&nbsp;</strong>Select the main components or component sets to be replicated.&nbsp;</p><p><strong>3.&nbsp;</strong>Use&nbsp;copy&nbsp;to put them in the clipboard.&nbsp;</p><p><strong>4.</strong>&nbsp;Open the file where&nbsp;you want to replicate&nbsp;the main components.&nbsp;This is the destination (or target) file.&nbsp;</p><p><strong>5.</strong>&nbsp;Paste the components into the file.&nbsp;</p><p><strong>6.</strong>&nbsp;Make sure the pasted main components are selected and run&nbsp;<strong>InstaRelinker</strong>.&nbsp;</p><p><strong>7.&nbsp;</strong>The plugin will scan the selection for remote instances and styles.&nbsp;</p><p>&nbsp;</p><p><strong>Note:</strong>&nbsp;<em>For complex components with many nested instances,&nbsp;this may&nbsp;take&nbsp;a&nbsp;few&nbsp;seconds to complete.&nbsp;</em></p><p><strong>8.</strong><em>&nbsp;It will then scan for matching local components.&nbsp;</em></p><p>&nbsp;</p><p><strong>Note:</strong>&nbsp;<em>For large files with thousands of main components,&nbsp;this may take some time,&nbsp;typically several&nbsp;seconds,&nbsp;to complete.&nbsp;</em></p><p><br></p><p><strong>9.</strong>&nbsp;Once&nbsp;the&nbsp;scanning is complete, the plugin will pop.&nbsp;</p><p><strong>Resolve&nbsp;No-Match Local Components:</strong>&nbsp;</p><p>When&nbsp;a&nbsp;matching local component is found for a remote instance, it is automatically relinked to it. When no match is found,&nbsp;then the plugin&nbsp;will ask you to point to the&nbsp;matching local component for each unresolved instance.&nbsp;</p><p>&nbsp;</p><p><strong>1.</strong>&nbsp;Use the \"Search for local component\" button to display&nbsp;a&nbsp;searchable list with all local components:&nbsp;</p><p>&nbsp;</p><p><strong>Note:</strong>&nbsp;<em>When a component is selected from the list, the plugin will automatically navigate&nbsp;to&nbsp;and select the component within Figma's document.&nbsp;</em></p><p>&nbsp;</p><p><strong>2.</strong>&nbsp;Select the desired local component and press the \"Relink\" button on the right:&nbsp;</p><p>&nbsp;</p><p><strong>Note:</strong>&nbsp;<em>You can manually change the currently selected component within&nbsp;the&nbsp;Figma file&nbsp;and the change will be reflected&nbsp;in the currently selected list item&nbsp;in&nbsp;the plugin.&nbsp;</em></p><p>&nbsp;</p><p><strong>3.&nbsp;</strong>Repeat&nbsp;for all conflicts.&nbsp;</p><p><strong>Resolve&nbsp;No-Match Local Styles:</strong>&nbsp;</p><p>When&nbsp;a&nbsp;local style is&nbsp;matched&nbsp;to&nbsp;a remote style, it is automatically relinked to it. When no match&nbsp;is found,&nbsp;then&nbsp;you will&nbsp;need&nbsp;to&nbsp;match&nbsp;or link&nbsp;the styles&nbsp;manually.&nbsp;</p><p><br></p><p>There are two options:&nbsp;</p><p>&nbsp;</p><ul><li>Search&nbsp;for&nbsp;and relink to&nbsp;a&nbsp;local style&nbsp;</li><li>Clone the remote style as local&nbsp;</li></ul><p><br></p><p><strong>Relink to&nbsp;a&nbsp;Local Style</strong>&nbsp;</p><p><strong>1.</strong>&nbsp;Use the \"Search for local styles\" button to display&nbsp;a&nbsp;searchable list with all local styles. Items in the dropdown will be filtered by the style type—paint,&nbsp;effect&nbsp;or text.&nbsp;</p><p><strong>2.</strong>&nbsp;Select the desired local style from the dropdown list and it will become the relink target for the current remote style.&nbsp;</p><p><strong>3.</strong>&nbsp;Repeat the above steps for all conflicts.&nbsp;</p><p>&nbsp;</p><p><strong>Clone&nbsp;a&nbsp;Remote Style as Local</strong>&nbsp;</p><p>If there is no appropriate local style for a remote one, you can clone it&nbsp;and save it&nbsp;as local by pressing the \"Plus\" button&nbsp;located&nbsp;on&nbsp;the right&nbsp;of each list item.&nbsp;</p><p>&nbsp;</p><p><strong>Detach from Component/Style</strong>&nbsp;</p><p>In case the auto-mapping of component/style is&nbsp;incorrect, or you have manually linked the wrong local component, use the \"Detach from Component/Style\" button on the right of an already linked item.&nbsp;</p><p>&nbsp;</p><p><strong>Apply Selection</strong>&nbsp;</p><p>When you’re&nbsp;done selecting local components and styles,&nbsp;press the \"Apply Selection\" button&nbsp;at&nbsp;the bottom right of the&nbsp;plugin.&nbsp;</p>","id":"1047874318864404919","installCount":973,"lastUpdateDate":"2022-04-19T13:23:35.274Z","likeCount":50,"name":"InstaRelinker","publisherHandle":"progress","publisherId":"953919576296700692","publisherName":"Progress","runCount":1175,"viewCount":3173},{"description":"<p>A tiny utility for copying properties from selected layers, right from quick actions bar 🔍</p><p><br></p><p>✅ Copy fill colors</p><p>🔲 Copy effects</p><p>🔲 Copy strokes</p><p>🔲 Copy texts</p>","id":"1048003170461690444","installCount":247,"lastUpdateDate":"2021-12-14T06:22:06.429Z","likeCount":14,"name":"Copy","publisherHandle":"thewall","publisherId":"943497109383323481","publisherName":"Wall","runCount":278,"viewCount":954},{"description":"<p><strong>使用方法</strong></p><p>1. 选中 1 个 FRAME 图层</p><p>2. 运行插件</p><p>3. 将与选中图层名称相同的图层构建目录</p><p><br></p><p>1. 选中多个 FRAME 图层</p><p>2. 运行插件</p><p>3. 将选中的图层构建目录</p><p><br></p><p><strong>How to use it</strong></p><p>1. Select the FRAME layer</p><p>2. Run the plug-in</p><p>3. Build a catalog of layers with the same name as the selected layer</p><p><br></p><p>1. Select multiple FRAME layers</p><p>2. Run the plugin</p><p>3. Build the table of contents of the selected layer</p>","id":"1048103390719092358","installCount":460,"lastUpdateDate":"2022-04-21T03:13:53.680Z","likeCount":5,"name":"Table of contents","publisherHandle":"jiangzilong","publisherId":"923515618965061354","publisherName":"ZiLong Jiang","runCount":607,"viewCount":2775},{"description":"<p>The plugin for Figma automates your color design tokens. With Token Master, you can edit styles in design tokens and quickly create new color modes. Just pick tokens with the same color and edit them at once!</p><p><br></p><h2><strong>How it works</strong></h2><ol><li>Install Token Master</li><li>Download all styles from your file or add a new color mode. Use keywords [light] and [dark] in your style names to add a new color mode. Example: [light]Style name/ [dark]Style name</li><li>To edit a style, click on it. Then, you can use the eyedropper or the color picker in the modal window to select a color</li><li>Also, you can copy the whole group of your design tokens and create a new color mode</li></ol><p><br></p><h2><strong>Styles name examples</strong></h2><p>We recommend using [light] / [dark] at the beginning of the style name:</p><pre class=\"ql-syntax\" spellcheck=\"false\">[light] Color name \n[dark] Color name \n</pre><p><br></p><p>But you can use [light] / [dark] at any place of your style name:</p><pre class=\"ql-syntax\" spellcheck=\"false\">Color name [light]\nColor name [dark]\nStyle / color-name [light]\nStyle / color-name [dark]\nStyle [light] / color-name\nStyle [dark] / color-name\n</pre><p><br></p><h2>Issues or feature requests</h2><p><a href=\"https://github.com/SpiritMod/token-master\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Open an issue on the github</a></p>","id":"1048365292339473455","installCount":1791,"lastUpdateDate":"2022-01-07T20:18:43.751Z","likeCount":124,"name":"Token Master","publisherHandle":"parimatch","publisherId":"984504537309817117","publisherName":"Parimatch","runCount":1299,"viewCount":4357},{"description":"<p>Translate texts in Figma width DeepL's engine</p><h2><br></h2><h2>Why</h2><ul><li>Create robust UI that won't break in different languages like Russian</li><li>Translate designs for multilingual user testing</li><li>Localise assets for AppStore, Google Play etc.</li></ul><p><br></p><h2>Features</h2><ul><li>Translates entire page or selection</li><li>Auto-detects source language</li><li>Translates to one of the 26 languages</li><li>Handles text styles</li></ul><p><br></p><p><strong>Languages</strong></p><p>DeepL supports Bulgarian, Czech, Danish, German, Greek, English, Spanish, Estonian, Finnish, French, Hungarian, Italian, Japanese, Lithuanian, Latvian, Dutch, Polish, Portuguese, Romanian, Russian, Slovak, Slovenian, Swedish, Chinese</p><p><br></p><h2>How to use</h2><p>Plugin uses DeepL API key. To get started, get a <strong>free</strong> api key <a href=\"https://www.deepl.com/pro-api?cta=figma-plugin/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">here</a></p><p><br></p><p>Thanks to Arneo for <a href=\"https://www.figma.com/community/file/928616537165660051\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">SRP design</a></p>","id":"1048568556219675901","installCount":914,"lastUpdateDate":"2022-06-28T20:04:49.546Z","likeCount":22,"name":"Deepl translate","publisherHandle":"elenaborisova","publisherId":"2191115","publisherName":"Elena Borisova","runCount":1369,"viewCount":1977},{"description":"<p>✨4k installs special, new logo! —</p><p><br></p><p>Free and ready to use replacement logo in various styles and compositions for your design — the logo mirrors the web app at logoipsum.com</p><p><br></p><p>Temporary fill the logo space with logoipsum until you have the real logo, because that top left corner doesn't look good to be empty.</p><p><br></p><p>All logos on Logoipsum collection are made to be abstract and flexible enough to fit with any graphic, UI, or layout style.</p><p><br></p><p>Note on regular updates: The new logo update will be live on logoipsum.com first and then later in this plugin.</p><p><br></p><p>FAQ at <a href=\"http://logoipsum.com\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">logoipsum.com</a></p>","id":"1048610713268120902","installCount":9475,"lastUpdateDate":"2022-05-03T10:22:43.592Z","likeCount":69,"name":"Logoipsum","publisherHandle":"rizal","publisherId":"3633741","publisherName":"Rizal Renaldi","runCount":12464,"viewCount":10134},{"description":"<p>一些实用的位图功能</p><p><br></p><p>#### 位图等比缩放</p><p>快速将位图缩放至1倍、2倍等整数倍；</p><h2><br></h2><h2>#### 精灵图裁剪</h2><p>将 sheetpng 按行列裁剪成宽高相等的序列帧图片；</p><p><br></p><p>#### 切片转png</p><p>将带有导出选项的切片/形状等转成png，并自动添加到舞台上；</p><p><br></p><p><br></p><p>#### 选中切片生成gif</p><p>选中 切片/frame 等对象后快速生成gif；</p><p>图层名后加“#500ms”字样可以自定单帧的延迟；</p><p>gif序列帧先后顺序按图层层级排列；</p><p><br></p><p><br></p><p>#### 导入lottie序列帧</p><p>导入lottie动画到舞台，特别适合导入矢量动画到舞台；</p><p><br></p><p>#### 组件转画框</p><p>快速将 compent 转成frame</p>","id":"1048890018608642572","installCount":83,"lastUpdateDate":"2021-12-06T16:40:20.332Z","likeCount":4,"name":"Bitmap Tool","publisherHandle":"hufang360","publisherId":"2011533","publisherName":"hufang360","runCount":134,"viewCount":346},{"description":"<p>This plugin will help you quickly add photos from popular search engines to any selected frame or several at once, and will also keep access to the original image. The “User Profile” function will generate a unique face of a non-existent person using a neural network from <a href=\"https://thispersondoesnotexist.com\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">here</a>.</p><p><br></p><p>1. Select a frame.</p><p><br></p><p>2. Select a search engine.</p><p><br></p><p>3. Tap on the desired photo, or tap and hold to select multiple.</p><p><br></p><p>4. Click on it, the photo will automatically load into the frame.</p><p><br></p><p>5. Or generate a random photo in one click by category from above.</p><p><br></p><p>The plugin is completely free. You can <a href=\"https://www.buymeacoffee.com/zhironkin\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">support</a> our further development of such plugins.</p>","id":"1048916364594249246","installCount":883,"lastUpdateDate":"2022-04-23T17:46:43.045Z","likeCount":9,"name":"Fast Photo Paste","publisherHandle":"scnipper","publisherId":"1742499","publisherName":"Andrew","runCount":1081,"viewCount":1154},{"description":"<p>Simple plugin for detecting fonts in document or selection.</p>","id":"1048926788011036203","installCount":2678,"lastUpdateDate":"2022-03-26T19:12:16.636Z","likeCount":4,"name":"GetFonts","publisherHandle":"Cryzen","publisherId":"944566139464321242","publisherName":"Cryzen","runCount":2759,"viewCount":2295},{"description":"<p>A project using&nbsp;<a href=\"https://www.tensorflow.org/js\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">TensorFlow JS</a>&nbsp;to create the <code>spell check</code> of design systems, that helps designers by keep-watching numerous design elements instead of humans.</p>","id":"1049316538308913961","installCount":215,"lastUpdateDate":"2022-03-22T02:58:40.610Z","likeCount":15,"name":"Figma ML","publisherHandle":"dusskapark","publisherId":"908643724521269527","publisherName":"Joo Hyung Park","runCount":191,"viewCount":710},{"description":"<p>Create recipes for working with colors and color styles systematically, directly on the canvas where you can see what's happening.</p><p><br></p><p><a href=\"https://www.figma.com/community/file/1050566100341643748/Color-Kitchen-Demo\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Demo file</a></p><p><br></p><h2>How to</h2><ol><li>Run <strong>Create components</strong> to create a page with components needed for the Color Kitchen plugin</li><li>Place instances of the <em>Color Kitchen Recipe</em> component on your canvas.</li><li>Select a color or a color style as source by applying it to the first ⚪️ <em>Swatch Layer</em> on the left side.</li><li>Change the ⚙️ <em>Modifier</em> components and the modifiers 🎚 <em>Value</em> as you please. You can also detach the recipe to be able to move things around more freely within the recipe. Add as many ⚙️ <em>Modifiers</em> and ⚙️<em>Color Swatches</em> as you want.</li><li>Select one or more recipes and <strong>Run recipes</strong> to see the modifiers changing all the color swatches on their right. Or run all recipes on the page by not selecting anything before running the command.</li><li>If you want to link two or more styles create or apply existing styles to one or more ⚪️ <em>Swatch Layers</em> on the right side.</li></ol><p><br></p><h2>Additional features</h2><ul><li>Add ⚙️<em>Print</em> instances to the recipe to see color values, contrast ratios, style names or descriptions printed on the canvas.</li><li>Change the variant properties of ⚙️<em>Color Swatch</em> layers to override specific color values in styles with multiple fills, effects and gradients. You need to specify which of the effects, fills or color stops in a gradient you want to override by providing the coordinates as a number. 0 is the first fill/effect. In the case of gradients you need to provide two numbers, the number of the fill and the number of the color stop, like that: 0:1</li></ul><p><br></p><h2>Use cases</h2><ul><li>Variation: Link multiple styles with varying opacity or luminance to one main style.</li><li>Inheritance: I.e. link colors in shadows or gradients to your main color styles.</li><li>Exploration: Try different treatments and color models to create palettes.</li><li>Documentation &amp; Collaboration: Make color choices traceable and reproducible.</li><li>Theming: Make all colors dependent on a few accent colors.</li></ul><p><br></p><h2>Available color transformations</h2><ul><li>Brighten/darken</li><li>Saturate/desaturate</li><li>Channels: Set or modify a value of a single channel (i.e. red or hue or lightness)</li><li>Opacity: Set or add to/subtract from opacity</li><li>Luminance: Set to make contrasts work</li><li>Mix two colors</li><li>Blend two colors using different blend modes</li><li>Contrast Minimum: Darken or brighten, until the given contrast ratio in relation to a given second color is met. (Ignores opacity)</li></ul><p><br></p><h2>Sources</h2><ul><li>Most color functions are using <a href=\"https://gka.github.io/chroma.js/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">chroma-js</a>, check the docs for more information.</li><li>Built with <a href=\"https://yuanqing.github.io/create-figma-plugin/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Create Figma Plugin</a> by Yuan Qing Lim</li><li><a href=\"https://www.figma.com/community/plugin/933372797518031971/Node-Decoder\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Node Decoder</a> by Gavin Mc Farland was a huge help</li></ul><p><br></p><h2>Roadmap</h2><ul><li>Modifiers to work with additional useful color models like <a href=\"https://www.hsluv.org/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">HSLuv</a> or <a href=\"https://github.com/material-foundation/material-color-utilities\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Material Designs' HCT</a></li><li>Generate new styles in addition to syncing existing ones</li><li>Cooking with noodles: Use prototyping links or maybe FigJam's connectors to connect color swatches</li><li><s>Additional guidance within the component descriptions.</s></li><li><s>More comfortable ways to use a color for multiple shadows</s></li><li><s>Add demo file</s></li><li><s>Modifiers that ensure a certain contrast threshold minimum against a selected background color.</s></li><li><s>Add label elements that print color values and style names to the canvas for readability</s></li></ul>","id":"1049477946127252395","installCount":1257,"lastUpdateDate":"2022-05-11T08:29:55.352Z","likeCount":50,"name":"Color Kitchen","publisherHandle":"richy","publisherId":"64","publisherName":"Richard Bruskowski","runCount":1376,"viewCount":4520},{"description":"<p>Typograff fixes typographical errors for you. Based on original ArtLebedev's design-studio eponymous Typograf.&nbsp;</p><p><br></p><p>Plugin solves multiple typographical errors automatically. Web typography is an essential aspect of modern design. Typograff Figma plugin automatically removes unnecessary spaces, adding non-breaking spacing between a word and a preposition, changing (C) character to ©, and countless other fixes.</p>","id":"1049664459081470114","installCount":2029,"lastUpdateDate":"2022-05-15T09:52:09.537Z","likeCount":39,"name":"Typograff","publisherHandle":"artkoch","publisherId":"157660","publisherName":"Arthur Kocharyan","runCount":2109,"viewCount":2693},{"description":"<p><strong>What is locize?</strong></p><p><strong></strong></p><p>locize is a new online service that offers true continuous localization. The translations are managed in your locize project and published from there to the locize CDN to be consumed from your application. The localization team can take care of the translations from the first day and keep up with changes with ease. The processes are separated. Translations can be updated without the need to release an update of your app. locize is bridging the gap between translation and development!</p><p><br></p><p><strong>Best for</strong></p><p><br></p><p><em>All involved in the software localization process: Developers, Designers, Team Leads, Heads of Engineering, Translation/Localization team, Product Managers, Project Leaders, Marketing, etc...</em></p><p>&nbsp;</p><p>For more information please visit: <a href=\"https://locize.com\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://locize.com</a></p><p>&nbsp;</p><p><strong>Why connect locize and Figma?</strong></p><p>&nbsp;</p><p>Bridging the gap between translation and design with locize, a modern and affordable localization-management-platform. It makes your website, app, game or whatever your project is, global, vibrant, and more engaging especially when unleashing the continuous localization capabilities.</p><p><br></p><p>Pushing texts from Figma to locize. Send first text content from within Figma to locize in seconds so that your Translators can start their work right away.</p><p>&nbsp;</p><p>Try your designs in a different language by fetching other translations directly into Figma. Preview your designs in all your languages before handoff to Developers.</p><p>&nbsp;</p><p>Increase your overall translation quality and reduce feedback loops.</p><p><br></p><p><strong>How to set up</strong></p><p>For more information and to learn how to install the plugin visit <a href=\"https://docs.locize.com/more/figma-plugin\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://docs.locize.com/more/figma-plugin</a></p><p>Don’t have a locize account? Try it for free! <a href=\"https://www.locize.app/register\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://www.locize.app/register</a></p>","id":"1049710666643539175","installCount":144,"lastUpdateDate":"2022-06-03T20:08:18.800Z","likeCount":3,"name":"locize","publisherHandle":"locize","publisherId":"1049708892918874855","publisherName":"locize","runCount":175,"viewCount":422},{"description":"<p>Are you tired of typing fake amounts all the time? Didn't even know currency formats can be so different? Well, today is your lucky day!</p><p><br></p><p>Make your selection, set your preferences, and this plugin will generate properly formatted amounts in any currency and language that exists on planet Earth.</p><p><br></p><p>For feedback or reporting an issue -&gt; <a href=\"https://twitter.com/noxiousone\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">@noxiousone</a></p>","id":"1049715741730726129","installCount":430,"lastUpdateDate":"2021-12-10T23:21:09.150Z","likeCount":13,"name":"Amounter","publisherHandle":"boris","publisherId":"45260","publisherName":"Boris Borisov","runCount":452,"viewCount":1084},{"description":"<p>Perfecter is a plugin that allows you to use popular math constants to create harmonic ratios in your design.</p><p><br></p><p>You can resize:</p><ul><li>Font size of a text layer relative to its line height and vice versa.&nbsp;</li><li>Width of a shape layer/component/group/frame relative to its height and vice versa.</li></ul><p><br></p><p><a href=\"https://buymeacoffee.com/volorf\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Buy me a coffee</a> ☕️</p>","id":"1049796958452198728","installCount":2216,"lastUpdateDate":"2022-06-04T12:01:03.197Z","likeCount":80,"name":"Perfecter","publisherHandle":"volorf","publisherId":"135257","publisherName":"Volorf","runCount":1913,"viewCount":3553},{"description":"<h2>Convert design to code with a click.</h2><p>A simple way to export your design to HTML or React with TailwindCSS.</p><p><br></p><h2>How to use it?</h2><ul><li>Select a layer you want to export</li><li>Open this plugin</li><li>Click copy!</li></ul>","id":"1049994768493726219","installCount":4256,"lastUpdateDate":"2022-06-14T14:07:05.676Z","likeCount":73,"name":"Inspect - Export to HTML, React, TailwindCSS","publisherHandle":"martynas","publisherId":"844621426245328311","publisherName":"Martynas Kadiša","runCount":4780,"viewCount":9519},{"description":"<p>Build color palette from hex colors in tailwind format</p>","id":"1050123545621281529","installCount":492,"lastUpdateDate":"2021-12-11T04:43:18.000Z","likeCount":0,"name":"Palette builder","publisherHandle":"sebakc","publisherId":"3194853","publisherName":"Sebastián Vega","runCount":579,"viewCount":917},{"description":"<p>Loom is the video communication tool for async work. You can express your thoughts in less time, sharing quick feedback, or deep communication with just a click. The Loom Embed plugin allows you to embed public Loom videos in your Figma designs, adding rich video context.</p><p><br></p><p>Use embedded Looms in Figma to walk through and explain your designs, drop in additional historical context, and add personality to asynchronous collaboration.</p><p><br></p><p>You can add Loom videos to your canvas in seconds. Launch the plugin and paste in your Loom share URL. Hit <code>Add</code> and place the video wherever you need to add more context to your board.</p><p><br></p><p>Currently, the plugin only works for public Loom videos! Adding a Loom share URL that is private will prompt the user to open the Loom video in a browser.</p><p><br></p><p>Demo: https://www.loom.com/share/f4ab9463f7fe4f6e99e942751ea1cf23</p>","id":"1050134017138821899","installCount":2578,"lastUpdateDate":"2022-04-29T17:04:04.855Z","likeCount":105,"name":"Loom Embed","publisherHandle":"mewtru","publisherId":"845473799781387754","publisherName":"Tru Narla","runCount":3003,"viewCount":5319},{"description":"<h2><strong>Magically turn frames into components.</strong></h2><p><br></p><p>Clean up those messy design files with a single click. Componentizer automatically matches similar layers and converts them to components for you. Here's how it works:</p><p><br></p><p><strong>Finds Matching Frames</strong></p><p>Automatically runs through your entire document to find frames matching your selection. Or have it process every frame in the document.</p><p><br></p><p><strong>Creates and Swaps for Component Instances</strong></p><p>Creates a component and swaps out all matching frames for instances of it.</p><p><br></p><p><strong>Applies Overrides</strong></p><p>Reduces the number of components needed by finding those that could be recreated by applying overrides to similar components.</p><p><br></p><p>Learn more at <a href=\"http://componentizer.design\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">http://componentizer.design</a>.</p>","id":"1050200692173775681","installCount":677,"lastUpdateDate":"2022-01-04T15:29:01.304Z","likeCount":32,"name":"Componentizer","publisherHandle":"attasi","publisherId":"7477","publisherName":"Tom Giannattasio","runCount":686,"viewCount":1879},{"description":"<p><br></p>","id":"1050379862371814431","installCount":378,"lastUpdateDate":"2022-01-13T05:45:25.700Z","likeCount":3,"name":"Eva emojis","publisherHandle":"streamline_cool","publisherId":"1004772472899402773","publisherName":"Fyodor","runCount":924,"viewCount":2131},{"description":"<p>Generate multiple shades from the same base color.</p><p><br></p><p>You can use it to create color scales.</p><p><br></p><p>Inspired by Materiel Design and based on HSL color system.</p>","id":"1050457414903366814","installCount":3547,"lastUpdateDate":"2021-12-13T11:28:57.861Z","likeCount":48,"name":"Color Shades Kit","publisherHandle":"alexbrndl","publisherId":"916625769889819086","publisherName":"Alexandre Brondel","runCount":3973,"viewCount":4229},{"description":"<p><a href=\"https://user.io/en/digital/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">User Studio digital factory</a>'s thumbnail generator for Figma files.</p><p>Includes:</p><ul><li>current year</li><li>client name</li><li>project name</li><li>amount of phases</li><li>phase names</li><li>selection rectangle</li><li>illustrative image</li><li>choice of background color</li></ul>","id":"1050556136637101324","installCount":197,"lastUpdateDate":"2022-06-07T18:43:47.928Z","likeCount":2,"name":"Sur le pouce — thumbnail generator","publisherHandle":"userdigital","publisherId":"2301468","publisherName":"User Studio","runCount":182,"viewCount":567},{"description":"<p>Add controls (interactive, of course) to the frames so you can use them as slides.</p>","id":"1050766825375940133","installCount":814,"lastUpdateDate":"2022-01-09T22:01:19.257Z","likeCount":7,"name":"Slides","publisherHandle":"rickyzhangca","publisherId":"554424","publisherName":"Ricky Zhang","runCount":1209,"viewCount":2029},{"description":"<p>Create instant autolayout on multiple frames</p>","id":"1050770379926525483","installCount":749,"lastUpdateDate":"2022-06-08T14:03:51.645Z","likeCount":24,"name":"Batch AutoLayout","publisherHandle":"maxbrunel","publisherId":"875355177326988379","publisherName":"Max","runCount":802,"viewCount":1456},{"description":"<p>Copy colors as CSS or Sass variables directly to your clipboard.</p><p><br></p><h2>Support</h2><p><br></p><p><a href=\"https://github.com/thoughtbot/var-colors/issues\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://github.com/thoughtbot/var-colors/issues</a></p>","id":"1050803621173854823","installCount":518,"lastUpdateDate":"2022-02-11T17:08:50.003Z","likeCount":14,"name":"Var Colors","publisherHandle":"thoughtbot","publisherId":"1039740942889734218","publisherName":"thoughtbot","runCount":555,"viewCount":1778},{"description":"<p>字高修复神器是一款让技术侧精准还原设计稿而诞生，让不同字号的字高与开发环境所对应字高相匹配。</p><p>·使用介绍:</p><p>在设计稿中选择要修复的Text或Frame，然后点击&nbsp;“Auto Fix”&nbsp;即可完成修复；多行的行高需单独调整倍数后点击&nbsp;“Set”即可快速计算&nbsp;。</p><p>·注意：</p><p>修复字号仅限在7-75号之间，仅限苹方（PingFang SC, SF UI Display）字体。</p><p><br></p><p>教程已经发布啦！大家可以关注❤️公众号获取：网易云音乐MDC 或者 网易云音乐技术团队</p><p><br></p><p><br></p><p>特别感谢：</p><p>「Text Line Height Fix」&nbsp;作者@York01</p>","id":"1050995391486694183","installCount":524,"lastUpdateDate":"2022-06-28T08:40:20.289Z","likeCount":27,"name":"字高修复神器","publisherHandle":"DolphinGroup","publisherId":"1008994528344572594","publisherName":"DolphinGroup","runCount":652,"viewCount":1136},{"description":"<h2><strong>The fastest way to&nbsp;remove backgrounds&nbsp;from images.</strong></h2><p><br></p><p>ZapBG is the easiest way to clear backgrounds from your images without having to go through hassle of using software or hiring anyone.</p><p><br></p><ul><li>Upload image to ZapBG</li><li>Remove background in seconds and a color or new background</li><li>Simply save and share after image is Zapped</li></ul>","id":"1051049275414977405","installCount":825,"lastUpdateDate":"2021-12-10T08:27:15.507Z","likeCount":4,"name":"ZapBG","publisherHandle":"zapbg","publisherId":"1051045102413934118","publisherName":"Werds","runCount":988,"viewCount":1179},{"description":"<h2>✨ The official <a href=\"https://www.Brandbird.app/?ref=figma-plugin\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\"><strong>Brandbird.app</strong></a> Figma plugin!</h2><p>With BrandBird you can turn any image into a stunning social media post in seconds!</p><p><br></p><h2>⚙️ How it works</h2><p>It's pretty simple to use it:</p><ol><li>Pick an image or a frame</li><li>Run the <strong><em>\"✨ Open BrandBird\"</em></strong> command</li><li>Add cool backgrounds, 3D effects, device mockups, annotate the image, and many more</li><li>Once you're satisfied with the result, hit the <strong><em>\"Export to Figma\" </em></strong>button, and the image will be imported on your canvas as a separate layer</li></ol><p><br></p><h2>⭐ BrandBird PRO</h2><p>You <strong>don't</strong> need a BrandBird account to use the app. All our features are available for you and you can use them for free.</p><p><br></p><p>The only limitation for the free tier is the BrandBird watermark on the bottom right corner of the exported image.</p><p><br></p><p>To remove the watermark, and access all our advance features (save templates, custom watermark etc), you need a BrandBird PRO account.</p><p><br></p><p><a href=\"https://www.brandbird.app/upgrade/?ref=figma-plugin\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Visit this link to learn more</a></p><p><br></p><h2>🔗 How to connect your PRO BrandBird account</h2><ol><li>Visit your <a href=\"https://www.brandbird.app/dashboard/account\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">BrandBird account page</a> on the web</li><li>Find and copy your unique personal API key</li><li>Run the Figma plugin command <strong><em>\"🔑 Set my API key\"</em></strong> , paste your API key and hit save</li></ol><p><br></p><p><em>☠️ Keep your API key safe and don't share it with anyone. If you believe that your API key is exposed in the public, please re-generate a new one.</em></p><p><br></p><p><br></p><h2><br></h2>","id":"1051084568987146169","installCount":4492,"lastUpdateDate":"2022-01-07T10:59:02.628Z","likeCount":93,"name":"BrandBird – Turn frames into beautiful social media posts","publisherHandle":"dmraptis","publisherId":"632","publisherName":"Jim Raptis","runCount":4627,"viewCount":11380},{"description":"<p>Create stunning 3D device mockups in 2 clicks.</p><p><br></p><p>Featuring clay devices, shadows, custom colors, reflections, and transparent backgrounds. Choose from the latest 3D device models – iPhone, MacBook, iMac and more. Simply drag to rotate the device in true 3D. Export to Figma seconds later.</p><p><br></p><p><strong>Getting started:</strong></p><ol><li>Install and run the plugin from the plugin menu</li><li>Choose a device</li><li>Select an appropriately sized frame in Figma. You can also click \"Draw guide frame\" to get a perfectly sized frame to use–resize your designs to fit the frame and then select it</li><li>Click \"Load selection\" to load your selected frame into the plugin.</li><li>Drag the mockup to rotate it in 3D, or choose a preset position.</li><li>Change settings–toggle shadows and reflections, device colors, and clay mode.</li><li>Click \"Export to Figma\" (at 1x to 4x resolution) or \"Download\" to save to your device</li></ol><p><br></p><p>Powered by <a href=\"https://mockrocket.io/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">MockRocket.io</a> – the easiest platform for creating stunning 3D device mockups and animated product videos. Start for free today: <a href=\"https://MockRocket.io\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">MockRocket.io</a></p><p><br></p><p><strong>License</strong></p><p>You can export up to 10 mockups totally free, then you will be prompted to purchase a license key. License keys are included with all paid plans on MockRocket.io</p><p><br></p><p>Pricing: <a href=\"https://mockrocket.io/pricing\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://mockrocket.io/pricing</a></p><p><br></p><p>Support: derek@mockrocket.io</p>","id":"1051242643585430631","installCount":20912,"lastUpdateDate":"2021-12-22T18:31:50.271Z","likeCount":195,"name":"MockRocket – 3D Mockups","publisherHandle":"mockrocket","publisherId":"1051240410990556166","publisherName":"MockRocket","runCount":25556,"viewCount":37061},{"description":"<p>What if regular layers on Figma could turn into an animation with real physics? Physics animation plugin does exactly that. Yes, I kid you not, sir! No special skills needed. Exporting in webm, GIF and SVG formats is available.</p><p><br></p><p>Here you could find the library of templates to be used via plugin. It helps to understand how plugin works.</p><p><br></p><p>👇Website</p><p><a href=\"https://davv.store/physics_animation\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://davv.store/physics_animation</a></p><p><br></p><p>👇Сollaboration</p><p>If you are a blogger and want to collaborate, please message us on instagram.</p><p><br></p><p>👇instagram</p><p><a href=\"https://www.instagram.com/davv_svgmotion/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://www.instagram.com/davv_svgmotion/</a></p><p><br></p><p>We'd be very happy to know how you use our plugin. Please feel free to tag us in instagram. It'd be great to get your feedback.</p><p>If your design stands out we will add it to the library and give you a free subscription!</p>","id":"1051790240828992953","installCount":484,"lastUpdateDate":"2022-07-21T07:19:20.274Z","likeCount":97,"name":"Physics animation","publisherHandle":"davv","publisherId":"615600","publisherName":"Vladislav","runCount":5154,"viewCount":4909},{"description":"<p>A plugin that allows you to see and search comments while staying in design mode with comments organized by pages and frames.</p><p><br></p><h2>Key features</h2><p><br></p><ul><li>Search in Comments</li><li>Comments organized by Pages and Frames</li><li>Comments remain usable in design mode; click one, and we highlight it on a page</li></ul><p><br></p><h2>How to use</h2><p><br></p><p>When you run the plugin, it offers a simple 2 step onboarding screen explaining how things work.</p><p><br></p><ul><li>During the first run, we'll ask you to create a Personal Token so that we can fetch comments via API. Your token is only stored on your machine inside the Figma app, and we won't ask for it again.</li><li>Since public plugins don't have access to File Keys, we also ask for the File Key during the first plugin run on a new file.</li><li>All subsequent plugin runs get you directly to your comments!</li></ul><p><br></p><h2>Roadmap</h2><p><br></p><ul><li>Hashtags &amp; Filters</li><li>Prioritising comments</li><li>Fuzzy search</li><li>Comments search via suggestion results</li></ul><p><br></p><h2>Sidenote</h2><p><br></p><p>This is our first-ever plugin on Figma, and while things might not be ideal all at once, we are happy to hear your feedback, questions, and suggestions at <a href=\"mailto:hello@happypanini.dev\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">hello@happypanini.dev</a></p><h2><br></h2><h2>About</h2><ul><li><strong>Design &amp; Idea</strong> by Yuliya Savyuk</li><li><strong>Implementation</strong> <strong>in code</strong> by Alexander Shchapov</li><li><strong>Illustrations</strong> Pebble People by Deivid Saenz</li></ul>","id":"1051811144456966602","installCount":250,"lastUpdateDate":"2021-12-28T15:50:36.206Z","likeCount":12,"name":"42 comments","publisherHandle":"juliasavyuk","publisherId":"672928","publisherName":"Yuliya Savyuk","runCount":395,"viewCount":1228},{"description":"<p>You can export your ads designed in&nbsp;<strong>Figma</strong>&nbsp;directly to your <strong>BannerNow</strong> account.</p><p>Exported ads can be then animated in <strong>BannerNow</strong> and exported as animated <strong>HTML5</strong>, <strong>MP4</strong>(video) and <strong>GIF</strong> files. </p><p><br></p><ul><li>Retina export</li><li>Export text and image elements</li><li><strong>SVG</strong>, <strong>PNG</strong>, <strong>JPG</strong>, <strong>TXT</strong></li></ul><p><br></p><p>A <a href=\"https://bannernow.com\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">BannerNow account</a> is required to use this plugin.</p>","id":"1051845813764296171","installCount":420,"lastUpdateDate":"2021-12-12T13:08:41.653Z","likeCount":5,"name":"BannerNow Export Ads","publisherHandle":"bannernow","publisherId":"2700848","publisherName":"BannerNow","runCount":548,"viewCount":1205},{"description":"<p>• Generate 10,000 NFTs with a click of a button.</p><p>• Mix traits and generate thousands of unique NFT artworks!</p><p>• Export Metadata in JSON</p><p><br></p><h2><strong>Guide</strong>:</h2><h2><a href=\"https://www.youtube.com/watch?v=nkDJCQ5-rfY\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">See video 1:30 min.</a></h2><h2><br></h2><ol><li>Build your traits into Variants of Components. For example: BACKGROUNDS components with Variants like: <em>Blue, Red, Green, etc. </em>and eg. BODIES components with Variants like: <em>body 1; body 2, body 3 etc. </em>+ more sets of components / traits.</li><li>Create one, new Master Component with Instances of each trait. Eg. One background instance + one body instance + one hat instance, etc.</li><li>Select this new Master Components, run the plugin and see the magic happen.</li></ol><p><br></p><h2>Contribution</h2><p>• Feel free to reach out to let me know about your collection – I will try to promote it.</p><p>• If the plugin helps you, smash that like button ;)</p><p>• I would be flattered to be an owner of your NFT</p>","id":"1052280914006102970","installCount":5534,"lastUpdateDate":"2022-06-30T14:53:30.070Z","likeCount":355,"name":"NFT Generator","publisherHandle":"kontek","publisherId":"1374920","publisherName":"Pawel Kontek","runCount":4791,"viewCount":12428},{"description":"<p>Export Non-transparent PNG that required by App Store assets submission.</p><p><br></p><p>This plugin helps you remove the alpha channel of your exported image generate by Figma.</p><p><br></p><p>After install the plugin,</p><p><br></p><ol><li>Right click on any group / layer you want to export, choose <code>Export Opaque PNG</code> - <code>Mark Opaque</code></li><li>Under the normal Export Section, you could see <code>Plugin</code> - <code>Export Opaque PNG</code>, click it you could export it.</li></ol><p><br></p><p>Based on <a href=\"https://www.figma.com/community/plugin/735452896889481850/Android-Resources-Export\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Android Resources Export</a> by <a href=\"https://www.figma.com/@ashung\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Ashung Hung</a></p><p><br></p><p>Cover Art by <a href=\"https://unsplash.com/photos/PreLE0ZJVQ0\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Max Harlynking</a></p>","id":"1052463252412045420","installCount":1566,"lastUpdateDate":"2021-12-15T12:25:35.504Z","likeCount":12,"name":"Export Opaque PNG","publisherHandle":"saic","publisherId":"3385149","publisherName":"Sai Fujiwara","runCount":1999,"viewCount":2354},{"description":"<p>A basic design file template to organise your design files and make it easier for everyone to understand and follow your workflow. </p><p><br></p><p>Just run the plugin to get started!</p>","id":"1052545092839185617","installCount":277,"lastUpdateDate":"2021-12-15T07:29:55.591Z","likeCount":0,"name":"Design file template","publisherHandle":"joannavonbahr","publisherId":"972384582843536318","publisherName":"Joanna von Bahr","runCount":379,"viewCount":827},{"description":"<p>Find, locate, and replace</p><p><br></p><h2>Find in all pages 搜索所有页面</h2><p><strong>locate accurately to characters</strong></p><p><strong>定位精确到字符</strong></p><p><br></p><p><strong>Usage</strong></p><p>1. Select the layer (search the entire page if unchecked)</p><p>2. Search for keywords in a range</p><p>3. Click Support Positioning to support batch text replacement</p><p><br></p><p><strong>Roadmap</strong></p><ul><li>Support case sensitivity</li><li>Support for searching hidden layers</li><li>……</li></ul><p><a href=\"https://jiangzilong.notion.site/Find-and-Replace-afa1c571a061464f9bc11554de1a09e7\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">more</a></p><p><br></p><p><strong>使用方法</strong></p><p>1. 选中图层（未选中则搜索整个页面）</p><p>2. 在范围内搜索关键字</p><p>3. 点击支持定位，支持批量替换文字</p><p><br></p><p><strong>线路图</strong></p><ul><li>支持区分大小写</li><li>支持搜索隐藏图层</li><li>……</li></ul><p><a href=\"https://jiangzilong.notion.site/Find-and-Replace-afa1c571a061464f9bc11554de1a09e7\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">更多</a></p>","id":"1052801241204192805","installCount":5188,"lastUpdateDate":"2022-06-15T11:26:23.091Z","likeCount":54,"name":"Find and Replace","publisherHandle":"jiangzilong","publisherId":"923515618965061354","publisherName":"ZiLong Jiang","runCount":5919,"viewCount":5261},{"description":"<p>A super minimal plugin for keyboard persons. rename current page with keyboard from quick actions.</p><ol><li>Open quick actions</li><li>Type rename page</li><li>Enter new name</li><li>Press enter</li></ol><p><br></p><p>you can put $&amp; in the new name if you want to use current name as part of new name</p>","id":"1052852560247535202","installCount":94,"lastUpdateDate":"2021-12-15T08:33:22.035Z","likeCount":6,"name":"Rename Page","publisherHandle":"saeed","publisherId":"689","publisherName":"Saeed Alipoor","runCount":109,"viewCount":384},{"description":"<p><strong>Import your Figma designs into Proto.io and create fully-interactive prototypes that feel real.&nbsp;</strong></p><p><br></p><p>Use Proto.io's extensive prototyping, animation, and interactivity capabilities to enhance your Figma designs into fully-interactive prototypes that feel real.&nbsp;</p><p><br></p><p>Share the prototype with your stakeholders to get valuable feedback, and validate your idea by user testing with popular platforms.&nbsp;</p><p><br></p><p>Export your finished Proto.io prototype to HTML, PNG, and PDF or easily embed it in your website, blog or productivity tool of your choice.</p><p><br></p><p><a href=\"https://proto.io\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Try Proto.io for free for 15 days</a> - no credit card required. When your trial ends you can upgrade to a paid subscription plan or downgrade to a free plan with limited options.</p><p><br></p><p>------------------------</p><p><br></p><p>Here are just a few examples of what you can achieve in Proto.io:&nbsp;</p><p>✅&nbsp;Use interactive form fields like text inputs, toggles, and sliders.&nbsp;</p><p>✅&nbsp;Add video, audio, and lottie animations, and control them with powerful interactions.</p><p>✅&nbsp;Create fine-tuned micro-animations using Proto.io’s animation timeline.&nbsp;</p><p>✅&nbsp;Use variables to capture and display user input.</p>","id":"1052874172772462210","installCount":2440,"lastUpdateDate":"2021-12-29T10:40:36.645Z","likeCount":33,"name":"Proto.io","publisherHandle":"protoio","publisherId":"3269581","publisherName":"Proto.io","runCount":2665,"viewCount":4447},{"description":"<p>Free &amp; premium customizable production-ready 3D models for every design project. Customize, angle, and snapshot 3D illustrations in seconds.</p><p><br></p><p>Got feedback? Tell me at <a href=\"mailto:support@postpoly.com\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">support@postpoly.com</a>!&nbsp;</p><p>Do you have 3D model packs that you want to sell through Post Poly? Contact me at <a href=\"mailto:jordy@postpoly.com\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">jordy@postpoly.com</a> to make a passive income!</p><p><br></p><p>Post Poly - 3D customizable models plugin is created by Post Poly. One place for all your 3D web design models and one tool to customize them all. Check it out at <a href=\"http://www.postpoly.com\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">www.postpoly.com</a> and <a href=\"http://app.postpoly.com\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">app.postpoly.com</a></p>","id":"1052891416702216865","installCount":7912,"lastUpdateDate":"2021-12-21T15:01:59.670Z","likeCount":66,"name":"Post Poly - Customizable 3D Models","publisherHandle":"FrankHartman","publisherId":"1052890753247483201","publisherName":"Frank","runCount":8283,"viewCount":15590},{"description":"<p>Remove any unused fonts, colors, effects and grids, from your style set.</p><p><br></p><p>You can mark, which of elements should be removed and they run the plugin, without re-setting, or select a category, via the context menu.</p><p>After scanning you will get a list of all selected unused styles that ready to be deleted</p><p><br></p><p><strong>WARNING</strong></p><p>Preparing to scan of large documents can be slow, and Figma can freeze for a while.</p><p><br></p><p><strong>About issues write here:</strong></p><p>💻 - <a href=\"https://github.com/NeutralWinter/Unused-Styles-Remover/issues/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Github</a></p><p>💬 - <a href=\"https://t.me/NeutralWinter\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Telegram</a></p><p>📧 - NeutralVVinter@gmail.com</p><p><br></p><p>Like this plugin?&nbsp;<a href=\"https://www.buymeacoffee.com/Denis.Solovey\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Buy me a coffee ☕</a></p><p>And<strong> </strong>also follow<strong> </strong>me on <a href=\"https://teletype.link/neutralwinter\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">social media</a> 💗</p>","id":"1052937551486129898","installCount":1456,"lastUpdateDate":"2022-07-25T12:22:32.474Z","likeCount":23,"name":"Unused Styles Remover","publisherHandle":"neutralwinter","publisherId":"887636254055482237","publisherName":"Denis","runCount":1619,"viewCount":2446},{"description":"<p>a plugin that checks for strings on <a href=\"https://weblate.org/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">weblate</a> (translation tool) so design copy is updated with all website relevant locale data.</p><p><br></p><p>it integrates weblate self-hosted <strong>API</strong> to quality check design texts on figma and suggest possible already <strong>translated strings</strong>.</p>","id":"1053050985172660071","installCount":66,"lastUpdateDate":"2022-07-04T15:18:12.032Z","likeCount":0,"name":"weblate integration","publisherHandle":"metalshub","publisherId":"3514377","publisherName":"Fabian Rios","runCount":85,"viewCount":269},{"description":"<p>a simple tool to export svg to text form and back</p>","id":"1053060499715879789","installCount":607,"lastUpdateDate":"2021-12-15T21:35:27.931Z","likeCount":1,"name":"svg text import/export","publisherHandle":"avielv","publisherId":"279073","publisherName":"Aviel L","runCount":710,"viewCount":1021},{"description":"<p>Attach sounds to Figma objects and play them in the canvas.</p>","id":"1053078276568463223","installCount":1270,"lastUpdateDate":"2022-04-08T16:13:45.543Z","likeCount":24,"name":"Punchcut Audio Player","publisherHandle":"punchcut","publisherId":"962367694741262151","publisherName":"Punchcut","runCount":1692,"viewCount":2268},{"description":"<p>Search layers by name directly from the quick actions bar in the selection or on the whole page.</p><p><br></p><p>1. Select layers where you are wanted to search</p><p>2. Run quick actions bar</p><p>3. Type layers name</p><p>4. Click Enter</p><p>5. Done!&nbsp;</p><p><br></p><p>You could also look for the layers' names on the whole page. In this case, you don't need to select every element on the page. Just keep the selection empty.&nbsp;</p>","id":"1053275213258354745","installCount":408,"lastUpdateDate":"2022-01-22T10:00:21.395Z","likeCount":8,"name":"fSearch","publisherHandle":"dflta","publisherId":"145148","publisherName":"Serhii Liakh","runCount":566,"viewCount":1039},{"description":"<p>Reverse Z-Index in auto-layout frames</p><p><br></p><h2>BUGS!</h2><p>Just threw this together in an afternoon so expect bugs, which may not be fixed for some time.</p><p><br></p><h2>HOW TO:</h2><p>Just select a frame which has auto-layout applied, and run the plugin. It should keep everything in the correct order and position, just reversing the z-indexes.</p><p><br></p><p>TIP:</p><p>If you want to use this on components, you should create a frame inside your component that wraps all the content and apply Easy Z to that rather than the component itself.</p>","id":"1053299766867620948","installCount":387,"lastUpdateDate":"2021-12-16T18:26:47.368Z","likeCount":18,"name":"Easy Z","publisherHandle":"jamiem","publisherId":"1494387","publisherName":"James Mitchell","runCount":522,"viewCount":1902},{"description":"<p>Use Rapidream with <em>any </em>design! <strong>No auto-layout required</strong>!</p><p><br></p><p>Design for one device size and Rapidream will apply full responsiveness across <em>all</em> devices.</p><p><br></p><p>\"Is this a bad joke? How is it possible?\" you may ask.</p><p><br></p><p>No joke. It's possible because Rapidream:</p><p><br></p><ol><li>🧹 First cleans up the design, removing and merging tons of nodes (without changing your copy of course)</li><li>🪺 Figures out the CORRECT nesting and ordering of every element to allow true responsiveness and a clean DOM tree</li><li>🌴 Lets you easily edit the generated DOM tree... <strong><em>while recalculating all the responsive styles in real time!!</em></strong> (we get the code 90% there and make it super easy to finish the last 10%)</li></ol><p><br></p><p>Rapidream is best suited for developers working on serious web applications. Landing pages and other design-heavy stuff will also work but is not currently our main focus.</p><p><br></p><p>Sign up at <a href=\"https://app.rapidream.com/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">app.rapidream.com</a>, and join our (growing) <a href=\"https://discord.com/invite/uj5n8sn5Hd\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Discord</a> - we'd really love to hear from you!</p><p><br></p><p>P.S. The beautiful Figma design above was made by <a href=\"http://holomusic.co/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">holomusic.co</a> and converted to React by Rapidream.</p>","id":"1053344483482247336","installCount":722,"lastUpdateDate":"2022-07-08T12:38:54.757Z","likeCount":44,"name":"Rapidream - CROSS-DEVICE Responsiveness!","publisherHandle":"Rapidream","publisherId":"885263831657577662","publisherName":"Yedid Herskovitz","runCount":767,"viewCount":2931},{"description":"<p>Ever found yourself trying to come up with an interesting font pairing? Test your luck and see if it can happen by accident!</p><p><br></p><p>The plugin uses hand picked Google Fonts and pairs them randomly. Have fun!</p>","id":"1053376215965114596","installCount":2986,"lastUpdateDate":"2021-12-28T19:19:20.599Z","likeCount":35,"name":"Accidently Great Font Pairings","publisherHandle":"accidentlygreat","publisherId":"930134308919255038","publisherName":"Johan","runCount":2897,"viewCount":3083},{"description":"<p>The plugin allows setting up multiple timers as a single flow.</p><p><br></p><p>- Use and create your own templates</p><p>- save and load timers configurations as a JSON file</p><p>- minimized version supported</p><p>- timers mute and reordering</p><p>- autosaving to storage after you close the plugin.</p>","id":"1053689497185030696","installCount":3488,"lastUpdateDate":"2021-12-21T21:52:20.734Z","likeCount":24,"name":"Timers","publisherHandle":"PavelLaptev","publisherId":"134689","publisherName":"Pavel Laptev","runCount":4028,"viewCount":2374},{"description":"<p>Rename layers without increment numbers.</p><p><br></p><p>Code from <a href=\"https://github.com/yuanqing/figma-plugins\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">yuanqing</a></p>","id":"1053708872290967112","installCount":124,"lastUpdateDate":"2021-12-17T17:17:15.640Z","likeCount":3,"name":"Layers names cleaner","publisherHandle":"yfrommelt","publisherId":"873132772577038684","publisherName":"Yoann","runCount":154,"viewCount":468},{"description":"<p>Go from Figma designs to email code with the Cannoli App.</p><p><br></p><p>How it works:</p><ol><li>Create your design in Figma. There are some best practices in setting up your artboards.&nbsp;<a href=\"https://docs.cannoli.app/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">See documentation here</a>.</li><li>Go to Cannoli App, sign up, submit your url, and select your artboard.</li><li>Cannoli will do its best to code your artboard, and you can use Cannoli to make last mile changes (preheader text, links, code adjustments) and export your code to your ESP.</li></ol><p><br></p><p>This Figma plugin helps you create frames with layouts that will work best on <a href=\"https://cannoli.app/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Cannoli</a>.</p>","id":"1053770884164943496","installCount":933,"lastUpdateDate":"2022-07-22T17:44:20.789Z","likeCount":25,"name":"Cannoli - Figma to email code, including HTML and MJML","publisherHandle":"scalero","publisherId":"997188533041944797","publisherName":"Scalero","runCount":1103,"viewCount":1753},{"description":"<p><strong>All in One Figma to React Native plugin. Design Tokens + Code Generation + Sync with GitHub in one single plugin!</strong></p><h2><br></h2><h2><strong>✅ Features</strong></h2><ul><li><strong>Import Figma Styles into Design Tokens</strong> like Color Styles, Text Styles, Effect Styles and Grid Styles.</li><li><strong>Batch edit Figma Properties using Design Tokens.</strong> Choose a token and update all Figma linked properties at once.</li><li><strong>Generate React Native code for any selected Figma Node.</strong> If you are using Auto Layout, generate responsive / usable React Native code for any Figma Node you select (i.e. an entire screen/frame or just a container). Choose between StyleSheet, Restyle (including Restyle Theme) and styled-components libraries for the generated code.</li></ul><h2><br></h2><h2><strong>✅ How does it work?</strong></h2><ul><li><strong>First, create as many Figma Styles as you want and use them on your Figma Document. </strong>Once you open the plugin, it will automatically convert them into Design Tokens and you will be able to export them to JSON or directly send to a GitHub repository.</li><li><strong>On the plugin UI, create as many custom Design Tokens as you want.</strong> Create tokens for sizes, spacing, borders etc, link them to Token Groups (you can also create groups like Sizes, Spacing, etc) and they will be also exported to code whenever you want.</li><li><strong>On the plugin UI, link your tokens to Figma properties.</strong> When the plugin is opened and you select a Figma Node (like a Frame representing a screen), you can see all node properties on the Properties Tab. Link any of those properties to any of your Design Tokens (i.e. paddingBottom to a XL Spacing token, for example). Later you will be able to change your token value and update all linked properties at once.</li><li><strong>Where is the plugin data stored?</strong> All the plugin data is stored as part of the Figma document / file. The data you see when you open the plugin depends on which document is opened at the moment (current page doesn't matter).</li><li><strong>Who can see my Design Tokens?</strong> If you have a team of designers and developers, anyone that access the same document and open the plugin inside it will be able to see and update the tokens (including properties linked tokens).</li></ul><p><br></p><h2><strong>🚧 Roadmap</strong></h2><ul><li>Support StyleSheet code generation</li><li>Support Restyle code generation (currently only theme code is generated properly)</li><li>Smart Tokens (ability to use percentage and math expressions to token values)</li><li>Auto update Figma when tokens are changed</li></ul>","id":"1053790655021729426","installCount":2233,"lastUpdateDate":"2022-03-07T20:32:35.342Z","likeCount":20,"name":"Figma to React Native","publisherHandle":"erisvaldojunior","publisherId":"3004476","publisherName":"Erisvaldo Junior","runCount":2742,"viewCount":6828},{"description":"<p><strong>More than 2800</strong> custom icons available for you, organized and for free.</p><p><br></p><p>Customize width and round. Perfect replace outline to filled.</p><p><br></p><p>width • replace • round</p><p>outlined • filled • ghosted • circled • squared</p><p><br></p><p>Also we have cool and simple <strong>WebApp</strong> for search, download, copy and check needed icon.</p><p><br></p><p>WebApp: <a href=\"http://scarlab-icons.la-moore.ru/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">scarlab-icons</a></p><p>GitHub:<strong> </strong><a href=\"https://github.com/la-moore/scarlab-icons\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">scarlab-icons</a></p>","id":"1053846082213772972","installCount":3524,"lastUpdateDate":"2022-02-16T12:09:48.031Z","likeCount":32,"name":"Scarlab Icons","publisherHandle":"la_moore","publisherId":"1032255523961767478","publisherName":"LaMoore","runCount":3466,"viewCount":4067},{"description":"<h2>Pages Generator</h2><p><br></p><p>When you're kicking off a new project in Figma you probably like to create a specific page order in your file and keep that order consistent from project to project. However, you don't have to create every single one of those pages one by one, every single time, This plugin helps you to generate pages in Figma, that you make every time before starting any project.</p><p><br></p><p>Once you run this Plugin you will see these pages generated:</p><p><br></p><p>👋Intro</p><p>💎Style Guide</p><p>⚙️ Figma Assets</p><p><br></p><p>Thank you</p><p><a href=\"https://www.linkedin.com/in/himanshuraikwar/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Himanshu Raikwar</a></p>","id":"1053992203484859149","installCount":157,"lastUpdateDate":"2021-12-18T13:50:09.201Z","likeCount":9,"name":"Figma Page Generator","publisherHandle":"Himanshuraikwar","publisherId":"965952266740826548","publisherName":"Himanshu Raikwar","runCount":216,"viewCount":789},{"description":"<p>Increase the spacing at the four edges of the frame, then center the original content.</p>","id":"1054060403452308301","installCount":220,"lastUpdateDate":"2021-12-18T16:15:07.085Z","likeCount":2,"name":"Frame Resizer","publisherHandle":"fradser","publisherId":"553480","publisherName":"Frad LEE","runCount":299,"viewCount":522},{"description":"<p>Export your delightful shapes to <a href=\"https://developer.android.com/jetpack/compose\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Jetpack Compose</a> as custom Shape classes!</p><p><br></p><p>This plugin takes a vector and converts it into a custom Shape class that can be directly used in your project (copied to clipboard).</p><p><br></p><p>Demo: <a href=\"https://www.youtube.com/watch?v=-6j2FhlNS1E\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">YouTube</a></p><p><br></p><p>Note: It works best in the desktop app - there are some inconsistent issues with copying the exported class code to the Clipboard when used in the browser.</p>","id":"1054248779295272882","installCount":841,"lastUpdateDate":"2022-02-16T03:38:44.606Z","likeCount":12,"name":"Shape Composer","publisherHandle":"c5inco","publisherId":"1957330","publisherName":"Chris Sinco","runCount":988,"viewCount":2151},{"description":"<p>Make auto layout adaptive! This plugin moves elements to the next row if they overflow a frame, saving you a ton of time of moving them manually.</p><p><br></p><p>A 2D Auto Layout frame consists of:</p><ol><li><strong>Container:</strong> A parent frame with a vertical auto layout.</li><li><strong>Rows:</strong> Child frames with a horizontal auto layout. Rows can contain elements of any type.</li></ol><p><br></p><p>Run 2D Auto Layout:</p><ol><li>Select a 2D Auto Layout frame.</li><li>Change the width of this frame to your liking.</li><li>Use the command “<strong>Run</strong>” to automatically rearrange the items.</li><li>After you have used \"<strong>Run</strong>\" on a frame once, you can also use the button \"<strong>Run 2D Auto Layout\"</strong> in the design panel.</li></ol><p><br></p><p>Create a 2D Auto Layout from selected elements:</p><ol><li>Select elements (which have the same parent frame).</li><li>Use “<strong>Create from selection</strong>” to create a 2D Auto Layout from the selection.</li><li><em>Et Voilà.</em></li><li>Change the <strong>width</strong> of the frame to your liking and use “<strong>Run</strong>” to rearrange the items (or click the button \"<strong>Run 2D Auto Layout\"</strong> in the design panel).</li></ol><p><br></p><p>Change the layout to columns (instead of rows):</p><ol><li>Select a 2D Auto Layout frame.</li><li>User “<strong>Switch layout mode</strong>” and select “<strong>columns</strong>”.</li><li>Now the container has a horizontal layout mode and the rows (which are now columns) have a vertical layout mode.</li><li>Change the <strong>height</strong> of the frame to your liking and use “<strong>Run</strong>” to rearrange the items.</li></ol>","id":"1054444777976207416","installCount":3062,"lastUpdateDate":"2022-02-15T14:10:07.341Z","likeCount":135,"name":"2D Auto Layout","publisherHandle":"lukasbittner","publisherId":"2450676","publisherName":"Lukas Bittner","runCount":3526,"viewCount":3652},{"description":"<p>Just a plain ol' calculator.</p>","id":"1054540799180823678","installCount":413,"lastUpdateDate":"2022-01-17T10:23:28.350Z","likeCount":5,"name":"Retro Calculator","publisherHandle":"felixhaeberle","publisherId":"1758592","publisherName":"Felix Häberle","runCount":499,"viewCount":561},{"description":"<p>Figma can swap fills and strokes. But what if you need both of them?</p><p><br></p><ol><li>Select some layers</li><li>Choose destination (copy to stroke or to fill)</li><li>Hit&nbsp;<code>Enter</code></li></ol><p><br></p><p>The plugin copies the content of fill and pastes it into stroke (and vice versa). Colors and styles are easy to copy manually. But the plugin will be useful if you have complex fill like gradients and images.</p><h2><br></h2><p>Made w/&lt;3 by <a href=\"http://qurle.net\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">qurle</a></p>","id":"1054919429022082530","installCount":425,"lastUpdateDate":"2021-12-21T03:05:13.179Z","likeCount":2,"name":"Copy Colors","publisherHandle":"qurle","publisherId":"209417","publisherName":"Nick Qurle","runCount":802,"viewCount":1754},{"description":"<p><a href=\"https://user.io/en/digital/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">User Studio digital factory</a>'s straightforward generator of social images to showcase articles, case studies… Instantly generate and export ready-to-use and perfectly-sized pics for:</p><ul><li>Linkedin posts</li><li>Twitter tweets</li><li>Instagram publications</li><li>Instagram stories</li></ul><p><br></p><p>Requires an image URL. Recommends a verbatim. Welcomes an article URL.</p><p><br></p><p><strong>Export instantly. Publish wherever you like.</strong></p>","id":"1055044870553256565","installCount":446,"lastUpdateDate":"2022-06-07T18:45:14.290Z","likeCount":7,"name":"Sur les réseaux — social networks art generator","publisherHandle":"userdigital","publisherId":"2301468","publisherName":"User Studio","runCount":597,"viewCount":1699},{"description":"<p>Instantly translate your Figma pages and individual frames into any language with Smartcat!<strong> </strong>Our plugin will make your designs truly multilingual, allowing you to tweak and test layouts in one place, without the messiness of endless copies for every language.</p><p><br></p><p>Your translations will be embedded into Figma text objects and kept intact when manipulating visuals. We’ve done our best to preserve text formatting within text objects as well. That underlined word inside a paragraph? It will stay underlined across all languages.</p><p><br></p><p>The Smartcat plugin is the easiest way to translate your designs, automatically or professionally. Here's how it works:</p><p><br></p><h2><strong>Automated translation mode</strong></h2><p><br></p><p>Open the Smartcat plugin in any Figma file. First, select the source language for the page and then choose the language you want to translate the page or the selected frames into. Need another language? Just select it from the list. Languages will be displayed as a row of buttons, so you can switch between them with just one click.</p><p><br></p><h2><strong>Professional translation mode</strong></h2><p><br></p><p>If you want your designs to be professionally reviewed, select 'Connect to Smartcat' in any given file, and this will create a project in Smartcat. Edit the text in Smartcat and the plugin will automatically push changes back into your Figma designs. You can continue working on your designs as usual—new content will be pushed to Smartcat for translation automatically!</p><p><br></p><h2><strong>More about Smartcat</strong></h2><p><br></p><p>Smartcat is a professional translation management system that allows you to create robust translation, editing, and proofreading workflows. Smartcat has a built-in marketplace of 400,000+ language professionals and companies ready to take your projects to the next level.</p><p><br></p><p><a href=\"https://help.smartcat.com/hc/en-us/articles/4412920821010\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Learn more about Smartcat for Figma &gt;</a></p>","id":"1055486946344563829","installCount":1370,"lastUpdateDate":"2022-07-20T13:57:24.176Z","likeCount":28,"name":"Smartcat Translator","publisherHandle":"anastasiaardash","publisherId":"976087711422710746","publisherName":"Anastasia Ardashova","runCount":1957,"viewCount":3313},{"description":"<h2>Sigma</h2><p>Sigma is a Figma plugin of automatically generate SwiftUI code from Figma</p><p><br></p><p><a href=\"https://www.youtube.com/watch?v=zbCIWoMfsa0\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Video</a></p><p><a href=\"https://figma-to-swiftui.notion.site/figma-to-swiftui/Sigma-Document-en-da2b1b6d8e924373bb2e0630a3ea2ef6\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Document</a></p><p><a href=\"https://github.com/bannzai/sigma\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">GitHub</a></p><p><br></p><h2>Supported</h2><ul><li>VStack</li><li>HStack</li><li>LazyVGrid</li><li>LazyHGrid</li><li>Image(systemName:)</li><li>AsyncImage</li><li>Text</li><li>TextField</li><li>Button</li><li>Divider</li><li>Spacer</li><li>ScrollView</li><li>List</li></ul><p><br></p><p>and some modifiers too.</p><p><br></p><h2>How to use?</h2><ol><li>🐣Select layer</li><li>🧸 Exec <strong>Sigma </strong>from plugin list </li><li>📖After, It is shown dialog with SwiftUI code </li><li>📋Tap [Copy to Clipboard] Button </li><li>🔜Paste SwiftUI Code to Xcode from clipboard</li><li>🛠Run it </li></ol><h2><br></h2>","id":"1055606842094169320","installCount":329,"lastUpdateDate":"2022-01-11T22:02:04.008Z","likeCount":12,"name":"Sigma","publisherHandle":"bannzai","publisherId":"1054748290078243927","publisherName":"bannzai","runCount":357,"viewCount":905},{"description":"<p><strong>Globalize Your Designs</strong></p><p>Globalize your work through seamless organization. Transfer written content of your designs from Figma into Junction and easily access all translated versions of the text from one location.&nbsp;</p><p><br></p><p><strong>Visual Context</strong></p><p>Preview your design for visual context of translations</p><p><br></p><p><strong>Get Started:</strong></p><p><strong>1.&nbsp;Launch the Plug-in</strong></p><p>Click on the plug-in and log in with the demo account. Follow the plug-in instructions to choose a project and transfer your design to Junction.</p><p><br></p><p><strong>2.&nbsp;Preview Your Work in Junction</strong></p><p>Log in to Junction using the demo account below. You can view your design work in the “Screens” section under the Figma Demo project.&nbsp;</p>","id":"1055656193087378683","installCount":125,"lastUpdateDate":"2022-05-12T07:19:03.124Z","likeCount":4,"name":"Figma to Junction","publisherHandle":"xujialing","publisherId":"1043102612035675620","publisherName":"xujialing","runCount":109,"viewCount":305},{"description":"<p>Export component libraries of any size into cloud accessible assets in json format, svg quick copy html code, and downloadable archives.</p><p><br></p><p>Currently in Beta and free to use.</p><p><br></p><ul><li>Bulk export large component libraries (coming soon).</li><li>Export team published components (coming soon).</li><li>Dedicated collection web pages for sharing with teams or anyone.</li><li>Export to json, downloadable archives, and pngs.</li><li>Export svgs and pngs directly from Figma.</li><li>CI/CD ready REST API.</li></ul><p><br></p><p>Learn more here, <a href=\"https://stylesup.io/component-exporter/documentation\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">docs</a>.</p><p><br></p><p>Feedback, support, and questions are welcome. Email me at <a href=\"mailto:artem@outermeasure.com\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">artem@outermeasure.com</a> or DM me on Twitter <a href=\"https://twitter.com/outermeasure\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://twitter.com/outermeasure</a>.</p>","id":"1055671590531785988","installCount":685,"lastUpdateDate":"2022-03-14T20:37:46.422Z","likeCount":12,"name":"Component Exporter","publisherHandle":"outermeasure","publisherId":"916022160243868557","publisherName":"outermeasure","runCount":789,"viewCount":2545},{"description":"<p>Embed stories into your Figma workspace to cross-reference the live implementation in one place. Open the Storybook Connect window to start interacting with the real components.</p><p><br></p><p><strong>With the Storybook Connect Plugin you can:</strong></p><ul><li>&nbsp;Link design components to stories</li><li>&nbsp;Play with interactive stories in Figma</li><li>&nbsp;Compare implementation to the design</li></ul><p><br></p><p><strong>Link components</strong></p><p>When you link a component or a variant to a story that link propagates to every instance in Figma. Your collaborators can also see the story link.</p><p><br></p><p><strong>Compare implementation to the design</strong></p><p>The plugin comes with a compact yet powerful story embed that includes familiar tools like the Outline, Measure, Backgrounds, and more.</p><p><br></p><p><strong>Open Storybook from the sidebar</strong></p><p>See which components are linked by glancing at the Storybook Connect section in Figma’s sidebar.</p><p><br></p><p>Requires a Chromatic account for access control &amp; security, <a href=\"https://www.chromatic.com/?utm_source=figma&amp;utm_medium=figma_community&amp;utm_campaign=storybook_connect\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">sign up for free here</a>.</p><p><br></p><p>Join the Storybook discord <a href=\"https://www.figma.com/exit?url=https%3A%2F%2Fdiscord.com%2Finvite%2Fstorybook\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">here</a> and visit the #figma-plugin channel for support!</p>","id":"1056265616080331589","installCount":4764,"lastUpdateDate":"2022-07-09T14:43:39.650Z","likeCount":219,"name":"Storybook Connect","publisherHandle":"chromatic","publisherId":"1086414944399405843","publisherName":"Chromatic","runCount":5742,"viewCount":14486},{"description":"<h2>Figma to React, React Native, HTML/CSS, Next.js, Gatsby (FREE BETA)</h2><p>Convert your Figma designs into production ready front-end React, React Native, HTML/CSS, Next.js, Gatsby code! Start building your product at lightning speed.</p><p><br></p><p><a href=\"https://www.locofy.ai/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\"><strong>► Learn more about us at www.locofy.ai</strong></a></p><p><a href=\"https://youtu.be/zG3QrRcrNGI\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\"><strong>► Watch Demo</strong></a></p><p><br></p><p>🎨 <strong>Design (in Locofy Plugin)</strong></p><p>- With Locofy plugin, you can tag your design layers manually or auto-tag with LocoAI, define UX/behaviour and responsiveness rules, and add actions!</p><p>- If you're using UI libraries, simply tag your components as Material UI, Bootstrap, Ant Design, React Native Paper... and voila!</p><p>- You can also drag and drop pre-built Material UI, Ant Design and Bootstrap components into your Figma canvas.</p><p><br></p><p>🏗 <strong>Prototype</strong></p><p>- With Locofy, you'll automatically get a live, responsive prototype that runs on code, without writing code!</p><p><br></p><p>💻 <strong>Code (in Locofy Builder)</strong></p><p>- With Locofy Builder, you can make reusable components and define props for dynamic content for React, React Native, Next.js and Gatsby.</p><p>- Add custom scripts and meta tags for HTML/CSS pages.</p><p>- Locofy.ai writes production ready front-end React, React Native, HTML/CSS, Next.js and Gatsby code for you! We'll save you 50-60% of your time so you can focus on more complex problems.</p><p>- More frameworks like Preact, Vue, Angular, SwiftUI, Jetpack Compose/Kotlin, Flutter will be coming your way soon!</p><p>- You may export the code or deploy with Netlify or Vercel!</p><p><br></p><p><a href=\"https://guide.locofy.ai/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\"><strong>► Check out Locofy Guide</strong></a></p><p><a href=\"https://www.figma.com/@locofy?fuid=978903960811420524\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\"><strong>► Try Guided Sample Projects</strong></a></p><p><a href=\"https://www.locofy.ai/live-prototypes/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\"><strong>► Discover interactive web and mobile apps built using Locofy!</strong></a></p><p><br></p><p><strong>Locofy Plugin (FREE beta)</strong></p><p>- Tag Layers automatically using LocoAI or manually</p><p>- Tag UI library components (Material UI, Ant Design, Bootstrap and React Native Paper)</p><p>- Drag and Drop Pre-Built Components</p><p>- Define UX/Behaviour &amp; Responsiveness rules</p><p>- Add Triggers &amp; Actions</p><p>- Live Prototype</p><p>- Sync to Locofy Builder</p><p>- Team Collaboration</p><p><br></p><p><strong>Locofy Builder (FREE beta)</strong></p><p>- Make &amp; Reuse Components</p><p>- Define Props for dynamic content</p><p>- Add Custom Scripts and Meta Tags</p><p>- Preview Live Prototype</p><p>- Share Live Prototype</p><p>- View React, React Native, HTML/CSS, Next.js, Gatsby code</p><p>- Export code or Deploy using Netlify or Vercel</p><p><br></p><p><strong>Coming soon to Locofy</strong></p><p>- More Props for Styling &amp; Actions</p><p>- Support for customised Design Systems</p><p>- Integration with Github</p><p>- Vue, Angular, Svelte, Flutter and more</p><p><br></p><p><a href=\"mailto:hello@locofy.ai\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\"><strong>► Our plugin is in FREE Beta - please feel free to share, the good and bad, we want it all. Reach us at hello@locofy.ai</strong></a></p><p><a href=\"https://www.locofy.ai/join-slack\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\"><strong>► Join the conversation with our founding team and Locofy community on our Slack channel</strong></a></p><p><br></p><p>Current version: Locofy 5 FREE BETA (v5.1.2)</p>","id":"1056467900248561542","installCount":3401,"lastUpdateDate":"2022-07-22T11:21:52.335Z","likeCount":154,"name":"Locofy FREE BETA - Figma to React, React Native, HTML/CSS, Next.js, Gatsby","publisherHandle":"locofy","publisherId":"1050636058218287957","publisherName":"Locofy.ai","runCount":5309,"viewCount":10500},{"description":"<p>Pixel Princess allows you to turn vector lines into pixel art. 💕 Install and don't forget to like and leave a comment! Share the link with friends: <a href=\"https://pixxxel.art\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">pixxxel.art</a></p><p><br></p><p>Select a vector object, open the plugin, enter pixel size, press “Pixelate Selection”. While the plugin is open, any updates to the vector would be reflected in its pixel representation in real time.</p><p><br></p><p>Currently only lines are supported, fills aren't. Working on it! Primitives (rectangles, text, etc.) need to be flattened into regular vectors in order to be pixelated.</p>","id":"1056507226523795356","installCount":1786,"lastUpdateDate":"2021-12-31T08:26:41.744Z","likeCount":77,"name":"Pixel Princess","publisherHandle":"g","publisherId":"328","publisherName":"Gleb","runCount":1922,"viewCount":3715},{"description":"<p>Rename, transform and organize layer names of the entire page, a selection, or a certain layer type.</p><p><br></p><p><a href=\"https://www.patreon.com/MaximPecherin\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Support us on Patreon</a> 🙏</p><p>&nbsp;</p><h2>❖ <strong>Find &amp; rename</strong></h2><p>Find and rename a specific layer(s).</p><p><br></p><ul><li>Search for <strong>one word</strong>, <strong>combination of words</strong> or <strong>individual character</strong>.</li><li>For a strict match, tick the checkbox <strong>Case sensitive</strong>.</li><li>Leave <strong>Rename</strong> input blank to remove that you’ve been searching for.</li><li>Edit <strong>Apply to </strong>section to skip the renaming of particular layers. The inner layers of omitted items will also be skipped.</li></ul><p>&nbsp;</p><h2>❖ Transform case</h2><p>Modify the layer(s) name case.</p><p>&nbsp;</p><ul><li>Pick one of the <strong>13 types</strong> of font cases. To name a few, <strong>Title Case</strong>, <strong>Sentence case</strong>, <strong>Header-Case</strong>, <strong>PascalCase</strong>, <strong>camelCase</strong> etc.</li><li>Use <strong>No case</strong> to reset the font case.</li><li>Edit <strong>Apply to</strong> section to skip the transformation of particular layers. The inner layers of omitted items will also be skipped.</li></ul><p><br></p><h2>❖ Clean</h2><p>Tidy up the layer(s) name case.</p><p><br></p><ul><li>Select to remove all <strong>special characters</strong>, <strong>digits</strong> or <strong>extra spaces</strong>.</li><li>Edit <strong>Apply to</strong> section to skip the transformation of particular layers. The inner layers of omitted items will also be skipped.</li></ul><p><br></p>","id":"1057630145566901048","installCount":1678,"lastUpdateDate":"2022-01-20T20:48:01.084Z","likeCount":32,"name":"Renamed","publisherHandle":"lordoys","publisherId":"461707","publisherName":"Pecherin Maxim","runCount":2504,"viewCount":3678},{"description":"<p>The plugin transforms Figma frames/elements to jsx code.</p><p><br></p><p>You have 3 options:</p><ol><li>copy json which created from Figma</li><li>download result code with jsx for your React project</li><li>look preview your result</li></ol><p><br></p><p>This plugin created for ATI.SU, but you can use it</p>","id":"1057655997125039960","installCount":70,"lastUpdateDate":"2022-03-30T12:03:44.205Z","likeCount":4,"name":"adam","publisherHandle":"atisu","publisherId":"1027194632420132731","publisherName":"AtiSu","runCount":68,"viewCount":227},{"description":"<p>Take any component or variant set and quickly scaffold hover states for them with interactive components.</p><p><br></p><p>By the mad scientists at Shift Lab. Want to work with us? <a href=\"http://By the mad scientists at Shift Lab. Want to work with us? Visit https://shiftlab.co/careers\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">We're hiring!</a></p><p><br></p><h2>Get Started</h2><ol><li>Select one or more components and/or variant sets</li><li>Run the plugin</li><li>Style your new hover state variants!</li></ol><p><br></p><p>This will generate a clone of the existing component (or each variant in a component set), create a variant property group called Hovered with True and False values, and connect the new variant up to the original with a hover interaction trigger.</p><p><br></p><h2>Limitations</h2><p>There is currently a limitation with variant sets, where the plugin doesn't work if there is already a property group with the word \"hover\" in it. This is built in so that in future the plugin can support intelligently completing half-built variant sets, but it seems like it would be very prone to edge cases so I'm not sure if I'll ever support it. For now, use the plugin on either sole components or variant sets without hover states defined.</p>","id":"1057776086489705418","installCount":814,"lastUpdateDate":"2022-01-12T15:46:52.116Z","likeCount":7,"name":"Make Hover State","publisherHandle":"frankjohnson","publisherId":"1062064","publisherName":"Frank Johnson","runCount":1116,"viewCount":3073},{"description":"<p>Creates a top-down representation of a camera’s horizontal field of view, based on the lens’s focal length and camera’s sensor size.</p><p><br></p><p>By default, the plugin assumes a full-frame/35mm film equivalent sensor size. This can be adjusted by changing the sensor width under the “More options” dropdown.</p><p><br></p><p>The distance of the rendered viewcone, and the camera icon dimensions, are adjustable in pixels to fit whatever scale your drawing uses.</p>","id":"1058143138326997273","installCount":309,"lastUpdateDate":"2021-12-30T17:34:52.176Z","likeCount":5,"name":"Camera Creator","publisherHandle":"gregv","publisherId":"2304274","publisherName":"Greg Villeneuve","runCount":438,"viewCount":831},{"description":"<h2>Project Setup</h2><p><br></p><p>A Figma plugin that creates the pages and the needed frames for your new projects.</p><p><br></p><p>Inside some of the Pages frames get generated with their respected dimensions. So you can get straight into designing your next project.</p><p><br></p><p>Pages that get generated:</p><ul><li>Cover Page</li><li>StyleBoard</li><li>MoodBoard</li><li>Logo Design</li><li>Brand Elements</li><li>Brand Guidelines</li><li>Web Design</li><li>Behance Project</li><li>Behance Thumbnail</li><li>Dribbble Shot</li><li>Instagram Post</li></ul>","id":"1058307385403448718","installCount":115,"lastUpdateDate":"2021-12-30T13:23:48.827Z","likeCount":8,"name":"Project Setup","publisherHandle":"vancoillie","publisherId":"1651424","publisherName":"Matt Vancoillie","runCount":116,"viewCount":368},{"description":"<p>A collection of 50,000+ handpicked icons for your design.</p>","id":"1058473802990916145","installCount":8754,"lastUpdateDate":"2022-01-31T19:21:22.681Z","likeCount":57,"name":"Open icon","publisherHandle":"5c1c0ed6_5953_4","publisherId":"1021076749138705009","publisherName":"Ui Convert","runCount":8891,"viewCount":11609},{"description":"<p>中文使用说明请移步</p><p>https://zhuanlan.zhihu.com/p/474580472</p><p><br></p><p>Light DSM plugin is an engineering design system application, it works simple: “Treat the design as a code engineering to build”</p><p><br></p><p>We use scientific way to abstract design specifications, provide efficient design resource management capabilities, and finally output design deliverables to developers. There will be many innovative ideas about design engineering, please look forward to it :)</p><p><br></p><p>We provide the ability to import icon library resources into the plugin and apply to the figma canvas in the current version.</p><p><br></p><p>Usage:</p><p>1.&nbsp;&nbsp;Login account, please note that only Baidu account login is supported now</p><p>2.&nbsp;&nbsp;Click the button in the upper right corner(“import resource library”)</p><p>3.&nbsp;&nbsp;Search icon library resources from the Material Platform(material.baidu.com) (eg: Search for characters “light” in the search input)</p><p>4.&nbsp;&nbsp;Click the \"OK\" button(bottom right corner) to import the icon resource</p><p><br></p><p>Icon resources are actually managed on the Material platform, DSM just call RESTful API, and the plugin supports synchronization of the icon library.</p><p><br></p><p>For more features, please look forward to subsequent versions.</p><p><br></p><p>Regards,</p><p><br></p><p>Thanks for your time :)</p><p><br></p><p>—— Development team of Light DSM</p>","id":"1058664150937001615","installCount":179,"lastUpdateDate":"2022-01-17T06:51:41.585Z","likeCount":2,"name":"LIGHT DSM","publisherHandle":"c0bea4f5_6742_4","publisherId":"1012550377380989475","publisherName":"Baidu","runCount":154,"viewCount":599},{"description":"<p>Avoid embarrassing translation errors for your website or app. UIslator localizes and contextualizes your UI copy so you can provide the best user experience for your users.</p><p><br></p><p>UIslator is currently in beta!</p><p>Go to www.uislator.com for more information.</p><p><br></p>","id":"1059090748799279915","installCount":198,"lastUpdateDate":"2022-01-01T12:48:57.325Z","likeCount":3,"name":"UIslator - Localization in UX","publisherHandle":"uislator","publisherId":"1054385161831452506","publisherName":"UIslator Pte Ltd","runCount":219,"viewCount":699},{"description":"<p>Check easily your design contrast accessibility with the 3.0 Web Content Accessibility Guidelines.</p><p><br></p><h2>About</h2><p>Caravage allows you to check easily your design contrast accessibility with the 3.0 Web Content Accessibility Guidelines.</p><p><br></p><p>You can either select individually any text layer or scan a selection and the plugin will automatically give you for each text:</p><ul><li>The colour(s) of the text.</li><li>The colour(s) of the background directly behind the text.</li><li>The font size and weight of the text.</li><li>The contrast value based on WCAG 3.0 (Web Content Accessibility Guidelines) and the new colour contrast method called <a href=\"http://www.myndex.com/APCA/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">APCA</a> (Accessible Perceptual Contrast Algorithm).</li><li>The minimum contrast value provided by the <a href=\"https://pbs.twimg.com/media/FJslU_ZVkAAlDjE?format=jpg&amp;name=900x900\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">APCA contrast look up table</a>.</li></ul><p><br></p><h2><strong>Credits</strong></h2><ul><li>This plugin was inspired by another plugin called <a href=\"https://www.figma.com/community/plugin/748533339900865323/Contrast\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Contrast</a>.</li><li>This plugin use the <a href=\"https://github.com/Myndex/apca-w3\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Accessible Perceptual Contrast Algorithm</a> by Andrew Somers.</li><li>This plugin use <a href=\"https://github.com/leeoniya/RgbQuant.js/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">RGBQuant</a> to analyze the colour(s) of the selected text and the background behind it.</li><li>This plugin use <a href=\"https://github.com/thomas-lowry/figma-plugin-ds#select-menu\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Figma Plugin DS</a>, a lightweight UI library.</li><li>This plugin was made under the initiative of <a href=\"https://www.biogen.com/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Biogen</a> design team.</li></ul>","id":"1059851135811973410","installCount":1769,"lastUpdateDate":"2022-05-11T10:54:20.059Z","likeCount":56,"name":"Caravage","publisherHandle":"ideallyux","publisherId":"977542108919695772","publisherName":"Biogen","runCount":1814,"viewCount":2799},{"description":"<p><strong>1000+</strong> drop in ready UI patterns (auto layout option included)  to save you hundred's of hours. <a href=\"https://www.getfigit.com/changeLog\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">New components added on weekly basis</a><strong>.</strong></p><p><br></p><p>Figit is a Figma plugin (now <em>that </em>was a tongue twister) that revolves around the world of auto-layout and makes it easier to create production-ready designs in record time. Don’t believe us? Yeah, a lot of people didn’t either. Until they actually tried it. Probably why you might see us walking around all smug and puffed-up.&nbsp;</p><p><br></p><p>The plugin has a library of over<strong> 1000 UI elements</strong> from three categories of Web Application, Ecommerce, and Marketing UI Kits. Yeah, sorry we couldn’t incorporate a ‘Thank You, Grandma’ category for all the things she does for us. Although we should because grandmas deserve it. Let us put that in our ‘To-Do’.&nbsp;</p><p><br></p><p>The two things that this plugin offers are Blueprints and Hi-Fidelity UI Elements. It all depends on where you are with your project.&nbsp;</p><p><br></p><p><strong>Blueprints:</strong></p><p>The Low Fidelity blueprints can be used as a base to achieve the end results faster. Forget about sitting for hours wondering about where to start from and what the layout should look like (we spend a lot of those hour playing foosball here). With blueprints, you don’t need to invent the wheel from scratch—just select a layout that gets your brain juices flowing and start from there; you can modify everything later according to your requirements.&nbsp;</p><p><br></p><p><strong>High Fidelity UI Elements:</strong></p><p>Hi-Fi UI Elements follow a standard design system that you can use to build landing pages, dashboards, and other quick concepts. If you don’t want to start from scratch and want something ready-made that you can modify, Hi-Fi elements will be your BFF.<strong> </strong>All these production-ready elements can be dropped into your design with a single click (kind of like we say “it’s not you, it’s me”, hit send, and relax back into the arms of our mistresses.)</p><p><br></p><p><strong>How to Use:</strong></p><ol><li>Open the Plugin</li><li>You can start with a Blueprint or just go directly for the High Fidelity UI Kit Designs</li><li>Search for your desired section such as ‘Hero’</li><li>Search for the Design that matches your vision</li><li>Drag and Drop the element to add it to your File</li><li>Tweak it according to your preferences</li><li>Take a sip of your protein shake</li><li>Unalive the population in GTA using BangBangBang</li><li>Done</li></ol><p><br></p><p>PS: There's always a <a href=\"https://getfigit.com/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Website</a></p>","id":"1060213973572396708","installCount":11778,"lastUpdateDate":"2022-04-19T10:10:16.807Z","likeCount":242,"name":"Figit - A massive library of UI Elements","publisherHandle":"b5d58fa5_3dc5_4","publisherId":"1060222515156818333","publisherName":"AlphaSquad","runCount":13025,"viewCount":17350},{"description":"<p>Export settings inheritance and more: an easy-to-use plugin that makes setting up export options for nodes super easy.</p><p><br></p><h2>Commands</h2><ol><li><strong>iOS</strong> -&gt; Applies all iOS specific export settings (1x, @2x, @3x) for the selected nodes.</li><li><strong>Android </strong>-&gt; Applies all Android specific export settings (hdpi, xhdpi, xxhdpi, xxxhdpi) for the selected nodes.</li><li><strong>SVG, PDF</strong> -&gt; Applies vector export settings for the selected nodes.</li><li><strong>Web</strong> -&gt; Applies web specific vector export settings (1x, @2x and SVG) for the selected nodes.</li><li><strong>iOS + Android + Vector</strong> -&gt; Applies all iOS, Android and vector export settings for the selected nodes.</li><li><strong>Remove</strong> -&gt; Removes export settings for the selected nodes.</li><li><strong>✨ Apply export options for instances:</strong> -&gt; Figma doesn't do this automatically, but with this command you can globally set export settings to all instances based on their main component. <em>No selection is needed.</em></li></ol><p><br></p><p>Crafted with love at <a href=\"http://halcyonmobile.com\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Halcyon Mobile</a></p>","id":"1060227124366350010","installCount":2299,"lastUpdateDate":"2022-03-28T10:51:00.442Z","likeCount":18,"name":"Export Options","publisherHandle":"istvanjkb","publisherId":"1040539921702826961","publisherName":"István Jakab","runCount":2698,"viewCount":5072},{"description":"<h2><strong>Make your design feature.</strong></h2><p><br></p><p>Feature Flags allows you to toggle the visibility of nodes regardless of their position.</p><p><br></p><p><br></p><p><strong>👉 </strong>Add a feature.</p><p><strong>👉</strong> Add nodes to the feature.</p><p><strong>👉 </strong>Toggle the visibility of nodes in the feature at once.</p>","id":"1060555268166221818","installCount":157,"lastUpdateDate":"2022-01-11T10:53:45.533Z","likeCount":10,"name":"Feature Flags","publisherHandle":"minseon","publisherId":"845822595700167793","publisherName":"Minseon","runCount":285,"viewCount":851},{"description":"<p>Guideliner is a plugin that creates guidelines to help you design a great layout by applying essential composition rules.</p><p><br></p><p>Composition rules:</p><p>— Third</p><p>— Center</p><p>— Diagonal</p><p>— Golden Third</p><p>— Golden Triangle</p><p>— Harmonious Triangle</p><p><br></p><p><a href=\"https://buymeacoffee.com/volorf\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Buy me a coffee</a> ☕️</p>","id":"1060920071257624917","installCount":2075,"lastUpdateDate":"2022-06-04T10:13:28.789Z","likeCount":65,"name":"Guideliner","publisherHandle":"volorf","publisherId":"135257","publisherName":"Volorf","runCount":2151,"viewCount":3217},{"description":"<p>Generate and regenerate mock public keys easily for different networks.</p><p><br></p><p>Chain formats: Ethereum, Polkadot, Kusama for now - let me know if you would need others</p>","id":"1060991804426210721","installCount":166,"lastUpdateDate":"2022-03-02T12:22:24.232Z","likeCount":4,"name":"Web3 Address Generator","publisherHandle":"danielkalman","publisherId":"1035560189847633644","publisherName":"Daniel Kalman","runCount":218,"viewCount":523},{"description":"<p>CodeFun 是一款优秀的 UI 设计稿智能生成源代码工具，通过 AI 算法，可以一键将 Figma 的设计稿转换成如工程师手写一般的源代码。</p><p>与以往传统的从设计软件中导出 HTML 不同，它不仅可以智能分析页面布局，生成非绝对高宽的 Flexbox 代码，而且还可以识别循环列表、九宫格、等比例分配等多种业务场景。生成的代码简短可读，语义化程度高，基本上可以达到中级工程师的水准，实测研发效率至少提升 500%。</p><p>CodeFun 的口号是“做前端、不搬砖”，希望大家 Code 有方！</p><p><br></p><p>我们的官网: <a href=\"https://code.fun\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://code.fun</a></p>","id":"1061186349406580230","installCount":1901,"lastUpdateDate":"2022-07-25T03:20:54.455Z","likeCount":58,"name":"CodeFun","publisherHandle":"CodeFun","publisherId":"1060731967993997247","publisherName":"CodeFun","runCount":2229,"viewCount":4762},{"description":"<p><strong>O DAI é um plugin para o&nbsp;</strong><a href=\"https://figma.com/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\"><strong>Figma</strong></a><strong>&nbsp;projetado para documentar os requisitos de acessibilidade de interface para a WEB dentro do protótipo.</strong></p><p><br></p><p>O <strong>DAI </strong>é um produto de um Trabalho de Conclusão de Curso (TCC) do curso de&nbsp;<a href=\"http://www.dd.quixada.ufc.br/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Design Digital</a>&nbsp;na Universidade Federal do Ceará Campus em Quixadá. O trabalho foi construído pelo aluno George Moreno de Oliveira orientado pela professora doutora&nbsp;<a href=\"https://www.quixada.ufc.br/docente/ingrid-teixeira-monteiro/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Ingrid Teixeira Monteiro</a>, professora da UFC e pesquisadora na área da Interação Humano-computador.</p><p><br></p><p>O trabalho intitulado&nbsp;<strong>\"Desenvolvimento de um plugin para documentação de acessibilidade para interfaces no Figma\"</strong>&nbsp;está atualmente na fase de desenvolvimento do produto, o plugin, que pode ser utilizado clonando o seguinte repositório.</p>","id":"1061251250721121861","installCount":98,"lastUpdateDate":"2022-01-07T11:54:15.113Z","likeCount":10,"name":"DAI - Documentação de Acessibilidade para Interfaces","publisherHandle":"georgemoreno","publisherId":"2173379","publisherName":"George Moreno","runCount":138,"viewCount":418},{"description":"<p>This plugin makes it easier to build storyboards and format them for export  within Figma.</p><p><br></p><p><strong>INSTRUCTIONS:
</strong></p><ol><li>Create a new Filmstrip from the plugin menu.</li><li>Build your sequence in the Filmstrip. Compose your image within the Image object of each Frame. Frames can be rearranged, added, and deleted as you’d like.</li><li>When you’re done composing, select your Filmstrip and use the “Create Storyboard from Filmstrip” menu item to generate a formatted Storyboard.</li><li>Iterate on the Filmstrip and regenerate Storyboards as you’d like!</li></ol><p><br></p><p><strong>ADDITIONAL FEATURES / NOTES:</strong></p><ol><li>From the menu, you can create an additional Frame of common film aspect ratios. You can drag these into your filmstrip and duplicate to change your Storyboard’s aspect ratio, or mix &amp; match.</li><li>By default, the plugin will automatically number your frames in the order they appear in the Filmstrip. You can override these numbers by unlocking the “#.” text object and editing the text to whatever label you’d like.</li></ol><p><br></p><p>See an example at this <a href=\"https://www.figma.com/community/file/1060667335687534014\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">demo file</a>.</p><p><br></p><p>I made this to enable a personal workflow for making and laying out storyboards in Figma. Maybe someone else will find it useful too! :) </p>","id":"1061447066515075814","installCount":268,"lastUpdateDate":"2022-01-08T00:53:24.111Z","likeCount":3,"name":"Storyboard Creator","publisherHandle":"gregv","publisherId":"2304274","publisherName":"Greg Villeneuve","runCount":337,"viewCount":878},{"description":"<p>Create \"Which UI is better\" picture for LinkedIn without a hassle.</p><p><br></p><p>Select 2 layers and run the plugin. Yes, it's that simple</p><p><br></p><p>Contact support (me): telegram@kopyl</p>","id":"1061467857994057453","installCount":141,"lastUpdateDate":"2022-01-08T02:25:34.073Z","likeCount":0,"name":"Which UI is better for LinkedIn","publisherHandle":"kopyl","publisherId":"330066","publisherName":"Oleh Kopyl","runCount":111,"viewCount":536},{"description":"<p>A plugin that can run the Figma Plugin API.  </p><p>You can manipulate Figma with code without having to look for a new plugin.</p><p><br></p><p><strong>🔥 What you can:</strong></p><ul><li><em>EVERYTHING</em> you can do with the FIgma plugin (<a href=\"https://www.figma.com/plugin-docs/api/api-reference/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">API documentation</a>)</li><li>IntelliSense for programming (code completion, parameter info, quick info, and member lists)</li><li>Customize editor settings</li><li>Change theme of editor</li><li>Use keyboard shortcuts (Cmd + Enter to run code, Cmd + S to apply settings, and Esc to close plugin)</li></ul><p><br></p><p><strong>📮 Support:</strong></p><p>If you have any plobrem or feedback, please use the <a href=\"https://github.com/ryonakae/figma-plugin-run-plugin-api/issues\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">GitHub Issues</a>.</p><p><br></p><p><strong>---</strong></p><p><br></p><p>This plugin is made by Ryo Nakae 🙎‍♂️.</p><p><br></p><ul><li>https://brdr.jp</li><li>https://twitter.com/ryo_dg</li><li>https://github.com/ryonakae</li></ul>","id":"1061937426144722953","installCount":406,"lastUpdateDate":"2022-01-09T09:27:19.081Z","likeCount":18,"name":"Run Plugin API","publisherHandle":"ryo_dg","publisherId":"828596","publisherName":"Ryo Nakae","runCount":549,"viewCount":1035},{"description":"<p><strong>This is a plugin that allows components created in Figma to be exported as component links, prototypes and as images to items in Azure Devops.</strong></p><p><br></p><h2>Reasoning</h2><p>Figma and Azure Devops are two great tools for different purposes and both are used across team roles. A designer will make something in Figma but the rest of the team needs to know what that component is doing, and developers will need additional information to be able to build the component. Azure Devops allows for cross team collaboration, but getting this information linked up with Figma can be a slog of a manual process. Information can quickly go out of sync, as requirements develop the design may not be updated to reflect these changes. As great a design tool Figma is, it can be difficult to navigate for the wider team.</p><p><br></p><h2>Solution</h2><p>This plugin attempts to solve some of these cross team issues by</p><ul><li>Reducing the time it takes to update content in Azure Devops when the design changes.</li><li>Creates direct links between Azure Devops items and the component in Figma they are describing.</li><li>Exports prototypes to work items in Azure Devops</li><li>Easily visible snapshots of components in Azure Devops that stay up to date.</li><li>Automatic version numbering of the Figma file so the version number in Figma stays up to date with the version number in Azure Devops.</li></ul><p><br></p><h2>Running the plugin</h2><p><br></p><p><strong>Setting up Azure Devops</strong></p><p><br></p><p>Work items in Azure Devops need to have at least one multi line field so that the plugin can populate the images and links in the item. Fields in work items that are blank won't be visible to the plugin, so on the first run you'll need to have some value in the field that you want to populate with your Figma components. Unfortunately this is a limitation of the Azure Devops api.</p><p><br></p><p>To learn more about configuring Azure Devops fields and pre populating them with a default value you can read more <a href=\"https://docs.microsoft.com/en-us/azure/devops/boards/configure-customize?view=azure-devops&amp;tabs=agile-process\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">here</a>. I'd recommend adding a specific field to work items, as the plugin will clear out previous content on update. Here is how you <a href=\"https://docs.microsoft.com/en-us/azure/devops/boards/configure-customize?view=azure-devops&amp;tabs=agile-process#custom-fields\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">add a field in Azure Devops.</a></p><p><br></p><p><strong>In Figma, you'll need Editor access to the file</strong></p><p><br></p><p>Get a link for your Azure Devops work item. The following url schema is expected</p><p><code>https://dev.azure.com/{Account}/{Project}/_workitems/edit/{ID}</code></p><p><br></p><ol><li>Protocol : https only</li><li>Domain : Will only work with dev.azure.com urls for use with the public api</li><li>Account : Azure Devops account name</li><li>Project : Azure Devops Project name</li><li>ID : Work item id</li></ol><p><br></p><p>Add this to as many components in Figma that relate to the work item in the \"Documentation Links\" field in the design view. These must be set up before the plugin is run.</p><p><br></p><p>After installing the plugin you will need access tokens associated with your Azure Devops and Figma accounts.</p><ul><li><a href=\"https://www.figma.com/developers/api\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">How to get a Figma access token</a></li><li><a href=\"https://docs.microsoft.com/en-us/azure/devops/organizations/accounts/use-personal-access-tokens-to-authenticate?view=azure-devops&amp;tabs=preview-page\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">How to get an Azure Devops access token</a> (you'll need at least the \"Work Items (read &amp; write)\" scope selected)</li></ul><p><br></p><p>There are two fields when the plugin opens for entering these access tokens.</p><p><br></p><p>If the plugin isn't installed in a private organisation, you'll also need to enter the file's unique key. To find the file's key, you can click the share button on the top panel and click the copy link. You could also copy the file ID from a browser's address bar. The File URL looks something like this</p><p><code>https://www.figma.com/file/lZv3g38KPFJKByY0rdIlG8/Sample-File</code></p><p>The file id is the value between the \"file/\" and \"/Sample-File\".</p><p><br></p><p>After establishing a successful connection you can tick the work items you'd like to update in Azure Devops. This will update the Figma file to a new version, create a URL to that version in Azure Devops along with a screenshot of the components.</p><p><br></p><p>Any instances of components that are used in prototypes will be linked to the Azure Devops work item too.</p><p><br></p><p>View the tutorial <a href=\"https://youtu.be/O9Ym1lKLLHg\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">here</a>, including how to configure Azure Devops, get access tokens and run the plugin.</p>","id":"1062047334766899303","installCount":356,"lastUpdateDate":"2022-06-21T15:53:18.915Z","likeCount":14,"name":"Figma to Azure Devops","publisherHandle":"iamallyniam","publisherId":"2374834","publisherName":"Allyn Thomas","runCount":405,"viewCount":2270},{"description":"<p><em>Quickly add a scrim over a selected layer with Scrim That.</em></p><p><br></p><p>Want to create a scrim over your design to overlay a dialog box? But hate having to resize the scrim to match the width, height and correct layer position?</p><p><br></p><p>Scrim That has you covered with one-click magic scrimming.</p><p><br></p><h2>Usage</h2><p>Select a frame, group or shape layer and run the plugin to create the scrim over it. Tweak the opacity of the layer to your desired value.</p><p><br></p><h2>Open Source</h2><p>Scrim That is <a href=\"https://github.com/aashreys/scrim-that\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">open source</a>, and contributions are most welcome.</p>","id":"1062137197474406566","installCount":120,"lastUpdateDate":"2022-01-09T22:35:16.002Z","likeCount":2,"name":"Scrim That","publisherHandle":"aashreys","publisherId":"697643","publisherName":"Aashrey Sharma","runCount":143,"viewCount":445},{"description":"<p>This plugin will export all children into png files, and download it as .zip file</p>","id":"1062628930604857952","installCount":138,"lastUpdateDate":"2022-01-17T02:24:52.264Z","likeCount":1,"name":"Export All children to Img","publisherHandle":"mathpangUpjoon","publisherId":"1057963692932799757","publisherName":"매쓰팡랩","runCount":155,"viewCount":279},{"description":"<p>This plugin allows you to create a random pattern from selected frames.</p><p><br></p><p><strong>Usage:</strong></p><ol><li>Select at least 2 Frames&nbsp;</li><li>Choose matrix width and height&nbsp;</li><li>Choose if you want to rotate your pieces randomly</li><li>Tap create button</li></ol><p><br></p><p><em>Note: Do not create a matrix higher than 100x100 size, it may take a lot of time to render</em></p>","id":"1062828640232861563","installCount":4227,"lastUpdateDate":"2022-01-18T20:32:25.296Z","likeCount":36,"name":"Pattern Creator","publisherHandle":"kubic","publisherId":"409274","publisherName":"Viachas Kul","runCount":5074,"viewCount":6026},{"description":"<p>Bring your designs to life with real music data!</p><p>Powered by Spotify.</p><p><br></p><p>Use the following layer names for compatibility with this plugin:</p><p><br></p><p>Art</p><p>Title</p><p>Album</p><p>Duration</p><p>Artist</p><p>Year</p><p>Tracks</p>","id":"1062965950132848595","installCount":816,"lastUpdateDate":"2022-01-12T05:36:51.653Z","likeCount":18,"name":"Music Data","publisherHandle":"aaronlalau","publisherId":"1062961073282118839","publisherName":"Aaron La Lau","runCount":1050,"viewCount":1271},{"description":"<p>Find the long lost layers within your Figma file.</p>","id":"1062970161360380889","installCount":628,"lastUpdateDate":"2022-01-12T05:45:00.715Z","likeCount":6,"name":"Find on Page","publisherHandle":"aaronlalau","publisherId":"1062961073282118839","publisherName":"Aaron La Lau","runCount":1031,"viewCount":1062},{"description":"<p>A simple plugin to help you quickly resize to a specific aspect ratio.</p>","id":"1062971732939729883","installCount":756,"lastUpdateDate":"2022-01-12T05:50:35.198Z","likeCount":18,"name":"Aspect Ratio","publisherHandle":"aaronlalau","publisherId":"1062961073282118839","publisherName":"Aaron La Lau","runCount":853,"viewCount":882},{"description":"<p>マルコフ連鎖で自然な日本語ダミーテキストを生成して、テキストノードに入力するプラグインです。</p><p><br></p><p><a href=\"https://lorem-jpsum.vercel.app/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Web GUI版</a>とAPIもあります。</p>","id":"1062983469418959844","installCount":1097,"lastUpdateDate":"2022-01-19T02:58:12.707Z","likeCount":4,"name":"Lorem JPsum","publisherHandle":"sabigara","publisherId":"2919165","publisherName":"松浦悠磨","runCount":1688,"viewCount":1336},{"description":"<p>The IntelligenceBank Assets plugin for Figma makes it easy for designers to browse, search and insert their approved IntelligenceBank image and brand assets.</p>","id":"1063472760199373357","installCount":96,"lastUpdateDate":"2022-02-07T17:37:31.994Z","likeCount":2,"name":"IntelligenceBank Assets","publisherHandle":"ib","publisherId":"902707831642330816","publisherName":"IntelligenceBank","runCount":91,"viewCount":333},{"description":"<p><strong>Figma to mobile code in one click.</strong></p><p><br></p><p>Spending too much time building UI ? Having a hard time reducing the inconsistency between design and development ? Don't have time to get up to speed with Jetpack Compose ? Upspeed's Figma plugin can help you quickly translate your Figma UI elements to secure, production ready code.</p><p><br></p><p>What sets us apart is that the code we generate is as if you have another developer working with you. Upspeed uses the right UI constructs based on characteristics of the UI element, relationship with elements around it and generates secure, optimized code that can be imported into your application. Since you control the code, make any additional modifications as needed.</p><p><br></p><p>Our mission is to help individuals and teams build faster and use their valuable time creating unique value instead.</p><p><br></p><p>With Upspeed, you can today translate your Figma components into corresponding Jetpack Composables. Support for composables and full screen support is in the works!</p><p><br></p><p><strong>How does it work?</strong></p><ol><li>Install the Plugin</li><li>Open your Figma file. Right click on the workspace, and choose Upspeed from your list of plugins</li><li>Select the component you want to translate</li><li>Update the type of element from our dropdown list</li><li>Click 'Generate'</li><li>'Copy to Clipboard' to copy the code into your IDE</li></ol><p><br></p><p><strong>Best practices</strong></p><p>Figma components enable you to create elements you can reuse across your designs. They help to create and manage consistent design across your project. Use Upspeed's Figma plugin to select and translate those reusable elements that can be used to build your UI quickly and in a consistent manner.</p><p><br></p><p><strong>Questions?</strong></p><p>We value your feedback! Let us know what else you would like to see in this application. Email us at support@upspeeed.io or submit your feedback <a href=\"https://upspeed.io/feedback\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">here</a>.</p><p><br></p><p>Check out our <a href=\"https://upspeed.io/resources\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Help Center</a> to get started. Report an issue <a href=\"https://upspeed.io/reportissue\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">here</a>.</p>","id":"1063494652261429841","installCount":534,"lastUpdateDate":"2022-07-25T18:46:30.252Z","likeCount":14,"name":"Upspeed - Convert designs to Jetpack Compose (Android)","publisherHandle":"upspeed","publisherId":"1063491293567223841","publisherName":"Upspeed.io","runCount":606,"viewCount":1584},{"description":"<p>UI Color Palette generates accessible color palettes from your brand’s colors with consistant lightness and contrast. The plugin uses the LCH color model to generate colors variants according to the chosen lightness scale. This model is relevant to make colors compliant with the&nbsp;<a href=\"https://www.w3.org/WAI/standards-guidelines/wcag/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">WCAG standards</a>.</p><p><br></p><h2><strong>Create a color palette from your brand’s color</strong></h2><p>Select directly some starting colors on your Figma document canvas, then set the lightness scale up on the range, according to the defined preset (Material Design, Custom, etc…). Finally, create a complete and fully accessible color palette for your UI.</p><p><br></p><h2><strong>Edit a color palette and deploy it</strong></h2><p>Edit the lightness scale and tweak every color of the palette. Then, you can add them as document local styles or update the existing ones. Finally, publish the document to deploy those colors through the team or the organization.</p><p><br></p><h2>Bugs reports &amp; feature requests</h2><p>If you find a bug or want to take part in the plugin’s evolution, go to this GitHub Issues page and open a ticket: <a href=\"https://github.com/inVoltag/figma-ui-color-palette/issues\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://github.com/inVoltag/figma-ui-color-palette/issues</a>.</p><p><br></p><p>The plugin is open-source. Find the complete documentation on the repository README: <a href=\"https://github.com/inVoltag/figma-ui-color-palette\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://github.com/inVoltag/figma-ui-color-palette</a></p>","id":"1063959496693642315","installCount":8483,"lastUpdateDate":"2022-04-01T17:46:19.346Z","likeCount":81,"name":"UI Color Palette","publisherHandle":"inVoltag","publisherId":"1716027","publisherName":"Aurélien Grimaud","runCount":9846,"viewCount":9519},{"description":"<p><strong>Export and&nbsp;convert SVG to&nbsp;URI directly to&nbsp;Figma! </strong></p><p>When&nbsp;multiple elements are&nbsp;selected, a&nbsp;sprite is&nbsp;created - perfect for&nbsp;icons!</p><p><br></p><p><strong>Premium mode</strong></p><p>– Unlimited number of&nbsp;elements in&nbsp;a&nbsp;sprite (by&nbsp;default no&nbsp;more than&nbsp;10).</p><p>– The&nbsp;«Layout» parameter is&nbsp;available (allows you to&nbsp;select the&nbsp;distribution of&nbsp;elements in&nbsp;the&nbsp;sprite).</p><p>– The&nbsp;«Use&nbsp;symbols» option is&nbsp;available (when&nbsp;exporting the&nbsp;same icons, it&nbsp;can significantly reduce the&nbsp;size of&nbsp;the&nbsp;svg).</p><p><br></p><p><a href=\"https://codepen.io/Andreslav/pen/mdqzyXg\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Example</a> of using a plugin to create a css sprite.</p><p><em>SVG is compressed using </em><a href=\"https://github.com/svg/svgo\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\"><em>SVGO</em></a><em>.</em></p>","id":"1064256486206738678","installCount":533,"lastUpdateDate":"2022-03-11T14:02:58.655Z","likeCount":11,"name":"Export SVG to URI","publisherHandle":"Andreslav","publisherId":"629","publisherName":"Andreslav Kozlov","runCount":573,"viewCount":1266},{"description":"<p>See Crypto Prices in Figma.</p>","id":"1064499180995614057","installCount":699,"lastUpdateDate":"2022-05-22T16:21:38.031Z","likeCount":22,"name":"Crypto Prices","publisherHandle":"kontek","publisherId":"1374920","publisherName":"Pawel Kontek","runCount":824,"viewCount":1589},{"description":"<h2>Auto Icon is the largest Icon Library for UI Designers.</h2><p>Get access to most popular icon collection of over 69,000 SVG Icons, Including 17,000 Free and 52,000 Premium Icons</p><p><br></p><p>Search by Icon name, and Just Drag &amp; Drop to your design :).</p><p><br></p><p>Some of the most popular icon collections are:</p><ul><li>Material UI</li><li>Material Design</li><li>Font Awesome</li><li>Bootstrap Icon</li><li>Feather Icons</li><li>Ionicons</li><li>Plus 66 more Icons Packs</li></ul><p><br></p><p>These vector Icons are Simple, high-quality designs &amp; Customizable. You can easily change the size, color, etc.</p><p><br></p><p>In Order to Access Premium Icons you need to purchase a license. You can find more details on the website: https://uxplugins.com/auto-icon</p>","id":"1064568031614699959","installCount":10251,"lastUpdateDate":"2022-06-14T12:56:54.881Z","likeCount":46,"name":"Auto Icon  (+69k Icons)","publisherHandle":"uxplugins","publisherId":"1017481645849358531","publisherName":"uxplugins","runCount":12805,"viewCount":10026},{"description":"<p>Iconoir is one of the biggest open source libraries with currently 1007 SVG Icons.</p>","id":"1064682537072050696","installCount":2131,"lastUpdateDate":"2022-01-16T23:11:57.891Z","likeCount":22,"name":"Iconoir - Open Source Icons Library","publisherHandle":"tkmadeit","publisherId":"156890","publisherName":"Tekeste Kidanu","runCount":2475,"viewCount":2372},{"description":"<p>A quick and easy panel that brings all of layout properties to one place, allowing unprecedented speed and unveils all hidden attributes.</p><h2>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;👇&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<strong>👇&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;👇 </strong></h2><h2><a href=\"https://www.mrbiscuit.design/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\"><strong>Website</strong></a><strong> ∣ </strong><a href=\"http://www.figma.com/community/file/1089450392855659100/Pro-Layout-Panel-Playground?fuid=405240457298389341\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\"><strong>Tutorial File</strong></a> <strong>∣</strong> <a href=\"https://www.figma.com/file/LnrShrX9rmvQttPSz6meoj/PLP-Feature-Requests?node-id=2%3A5428\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Feature Requests</a></h2>","id":"1065130523685842895","installCount":4844,"lastUpdateDate":"2022-06-01T17:01:09.900Z","likeCount":313,"name":"Pro Layout Panel","publisherHandle":"MrBiscuit","publisherId":"1241","publisherName":"Mr.Biscuit","runCount":5423,"viewCount":10361},{"description":"<h2><strong>Pixel perfect HTML/Tailwind for Figma Auto layout designs.</strong></h2><p><br></p><p><strong>Features:</strong></p><ul><li>Utility first approach to generate pixel perfect markup for Figma designs.</li><li>Built for future, uses flex and respects item spacing</li><li>No clumsy/frugal code with absolutely positioned elements</li><li>Uses tailwind 3.0</li><li>Export assets to zip with a click</li><li>Handles auto layout and its constraints (better design scalability for both designers and developers)</li><li>Option to mark exportable assets in your preferred format from Figma itself</li><li>Handles most common usecases like borders, shadows, background colors, text styles, etc.</li></ul><p><br></p><p><strong>Usage:</strong></p><p>Figma to code conversion is no rocket science, but for pixel perfect UI, we have to do some pre-processing to unfold the magic. Let’s look at some ways to achieve accurate results:</p><ul><li>Ensure that the frames have auto layout. It helps us to parse your Design better and also good for scaling designs in long term.</li><li>Mark the image/icon layers for export in the desirable format. We will import the asset in the selected format for you.</li><li>Avoid the use of Fixed Height/Width constraints as much as possible. Nearly same results can be achieved using ‘Fill container’/’Hug contents’ constraint.</li></ul>","id":"1065278044402066626","installCount":1231,"lastUpdateDate":"2022-02-18T12:17:26.247Z","likeCount":21,"name":"FigGen - HTML + Tailwind Converter","publisherHandle":"alphaayush","publisherId":"3719031","publisherName":"Ayush Singh","runCount":1722,"viewCount":1863},{"description":"<p>A simple, lightweight utility for generating bitmap fonts for Kontakt.&nbsp;</p><p>This plugin converts any text object into a Kontakt-compatible font strip which retains most* of the font settings from the original text object (*see caveats below).</p><p><br></p><p>This plugin improves upon existing Kontakt font generation tools in a number of ways:</p><ul><li>No need to manually upload font files or copy settings into an external tool. You can convert text elements directly from your interface design, without leaving Figma.</li><li>Because the font is generated by Figma’s rendering engine, the glyphs will look identical to any static text you are using in your design.</li><li>The plugin detects the true bounds of each rendered character, and prevents pixels from neighbouring characters from overlapping (common problem with some of the existing tools).</li></ul><p><br></p><p>This is an essential tool for anyone using Figma for Kontakt GUI designs. Enjoy!</p><p><br></p><p><br></p><h2>How To Use</h2><p><br></p><p>Right click on any text object in your Figma document, and select<strong> Plugins &gt; KSP Font Generator &gt; Generate Font.</strong></p><p>A new frame will be created, containing the generated font spritesheet in vector format. The generated font will retain any text styles applied to the original text object.</p><p>Finally, export the frame as a PNG, and it will be ready to use in Kontakt.&nbsp;</p><p><br></p><p><br></p><h2>Supported text properties</h2><p><br></p><ul><li>Typeface</li><li>Font size&nbsp;</li><li>Font weight (bold, italic, etc.)</li><li>Character spacing</li><li>Underline and strikethrough&nbsp;</li><li>Lettercase</li><li>Fill colour</li><li>Opacity</li><li>Inner shadow</li></ul><p><br></p><p><br></p><h2>Unsupported features and caveats</h2><p><br></p><p>Due to the nature of bitmap fonts and how Kontakt handles them, there are a few caveats you should be aware of.&nbsp;</p><ul><li>Kontakt doesn’t support kerning pairs. This means that certain character sequences might look unusually spaced (especially characters with parallel diagonal lines that usually overlap, like ‘AV’). Unless Kontakt supports kerning pairs in the future, there’s nothing that can be done about this.&nbsp;</li><li>The plugin will clamp the position of each character to prevent overlapping. This will come into effect when choosing a font size or spacing value which would usually cause overlapping characters. A warning will be displayed when this occurs.</li><li>Any text effects which would cause character bounds to overlap are unsupported. This includes blur, drop shadows and strokes. We may add support for these in the future, although using these features would force the minimum character spacing to increase.</li><li>Gradient fills are unsupported.</li><li>Other text properties such as line and paragraph spacing would have no effect because custom fonts can only be used on single-line labels.</li></ul>","id":"1065342724528543013","installCount":360,"lastUpdateDate":"2022-02-23T19:14:14.689Z","likeCount":11,"name":"KSP Font Generator","publisherHandle":"fracturesounds","publisherId":"1040248428619625463","publisherName":"Fracture Sounds","runCount":354,"viewCount":826},{"description":"<p><strong>Resize from</strong> is inspired by a feature of other design tools that lets you resize things in different directions (besides from the top-left) simply by typing a dimension followed by the letter: c(enter), l(eft), r(ight), t(op) or b(ottom).</p><p><br></p><p>Plans for next steps…</p><ul><li>Keyboard nudge amounts, proportional resizing, more…</li></ul>","id":"1065699752004372169","installCount":72,"lastUpdateDate":"2022-02-26T15:15:13.094Z","likeCount":2,"name":"Resize from","publisherHandle":"gsysko","publisherId":"96640","publisherName":"Graham Sysko","runCount":86,"viewCount":239},{"description":"<p>WhichUI let you vote and post your own creation to know which one is the most appropriate for your project.</p><p><br></p><p>You can also find informations about the project and us here: <a href=\"https://which-ui.com?utm_source=figma_store&amp;utm_medium=link\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://which-ui.com</a></p>","id":"1065739081891709697","installCount":110,"lastUpdateDate":"2022-05-11T21:47:30.799Z","likeCount":5,"name":"WhichUI","publisherHandle":"WhichUi","publisherId":"4031219","publisherName":"Kubessandra","runCount":126,"viewCount":359},{"description":"<p>Themeizer is an ecosystem for adding theme support to your designs and code. Use this plugin to change themes in your designs and publish them to the cloud.</p><h2>To change theme in Figma</h2><p><strong>Preparation</strong></p><ol><li>Create folders with colors for all your themes, where folder name is the name of theme</li></ol><p><strong>Usage</strong></p><ol><li>Select an element</li><li>Choose another theme</li></ol><p><strong>Example</strong></p><ul><li>Create color folders with valid themes. For example</li></ul><pre class=\"ql-syntax\" spellcheck=\"false\">light/primary: #1A237E\nlight/body: #212121\nlight/antibody: #FAFAFA\ndark/primary: #C5CAE9\ndark/body: #FAFAFA\ndark/antibody: #212121\n</pre><ul><li>Create a simple frame with light (<em>or dark</em>) colors;</li><li>Go to the themes tab, select the frame you created, select another theme in the plugin (\"themes\" tab -&gt; click on needed theme -&gt; click the \"select\" button).</li></ul><p><br></p><h2>To change colors in your project</h2><p><em>Advanced for developers</em></p><p><strong>Preparation</strong></p><ol><li>Set up themes as described above</li><li>Specify in the settings the address to the API and the necessary headers. Save the settings.</li><li>Add and configure needed packages to your project [<a href=\"https://www.npmjs.com/package/themeizer\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\"><em>read more</em></a>]</li></ol><p><strong>Usage</strong></p><ol><li>Go to the publish tab and publish ypur changes.</li><li>Be happy, new colors in your site.</li></ol><p><strong>Example</strong></p><ul><li>Registry in <a href=\"https://jsonbin.io/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">jsonbin.io</a></li><li>Create a new bin with mock json ({\"data\": {}})</li><li>Open plugin settings tab</li><li>Add your bin url to the \"Save at\" option (<code>https://api.jsonbin.io/v3/b/6g4gjd56u</code>, where <code>6g4gjd56u</code> is your bin id)</li><li>Add the url of the latest version of your bin as \"Read from\" option (<code>https://api.jsonbin.io/v3/b/6g4gjd56u/latest</code>)</li><li>Add the required headers (<code>{\"X-Master-Key\": \"some-private-key\", \"Content-Type\": \"application/json\", \"X-Bin-Meta\": \"false\"}</code>, where <code>X-Master-Key</code> is your private key [<em>https://jsonbin.io/api-keys</em>])</li><li>Install <a href=\"https://www.npmjs.com/package/themeizer\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">themeizer</a></li><li>Configure the environment as written in the package description. The url would be equal to the \"Save at\" option, the headers would be equal.</li></ul>","id":"1065764293242137356","installCount":314,"lastUpdateDate":"2022-03-14T20:13:33.079Z","likeCount":7,"name":"Themeizer","publisherHandle":"vordgi","publisherId":"1412936","publisherName":"Savelyev Alexander","runCount":424,"viewCount":2437},{"description":"<p>Select a frame and add a todo to it!</p><p><br></p><p>Contact me in telegram for support: kopyl</p>","id":"1065958602850490342","installCount":157,"lastUpdateDate":"2022-01-31T00:57:42.503Z","likeCount":1,"name":"Framely – todos for frames","publisherHandle":"kopyl","publisherId":"330066","publisherName":"Oleh Kopyl","runCount":441,"viewCount":1005},{"description":"<p>MeisterIcons is an Open-Source Icon Pack(MIT) for designers and developers. Each icon has been crafted with love and support from the community. With this Figma Plugin, you get instant access to our growing icon collection. We’re planning to add 100+ icons each month for the next 12 months.</p>","id":"1065974489689844727","installCount":1359,"lastUpdateDate":"2022-03-20T15:39:59.155Z","likeCount":26,"name":"MeisterIcons","publisherHandle":"rahulrajdahal","publisherId":"876817846229428234","publisherName":"Rahul Raj Dahal","runCount":1476,"viewCount":2184},{"description":"<h2>Automatically write out the values of selected colors.</h2><ul><li>Create text labels from the selected shape or a frame.</li><li>Update existing text labels by selecting both shape/frame and the text object you want to update.</li></ul><p><br></p><p>Idea credits to <a href=\"https://twitter.com/atlemo?s=20\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Atle Mo</a></p>","id":"1066525089228052058","installCount":561,"lastUpdateDate":"2022-05-18T20:56:37.573Z","likeCount":21,"name":"ColorValue","publisherHandle":"haley","publisherId":"574789","publisherName":"Haley 🌊","runCount":742,"viewCount":1539},{"description":"<p>Ever needed to quickly swap all appearances of a specific style to another one?</p><p><br></p><p>Style Swap scans your document for styles used in any layer, then you'd choose what style you want swapped and choose a style you want to swap to.</p><p><br></p><p>This is a parameters-only plugin, you can run it by tabbing into it.</p><p><br></p><p><strong>Note: This currently only works on typography styles.</strong></p>","id":"1067092321907268578","installCount":618,"lastUpdateDate":"2022-02-18T14:02:42.257Z","likeCount":34,"name":"Style Swap","publisherHandle":"jsx","publisherId":"389","publisherName":"Jan Six","runCount":1424,"viewCount":2331},{"description":"<h2>Pattern Fill</h2><p><br></p><p>The fastest way to create and use pattern. This plugin helps you to make a pattern with a frame, and fill in another layer as an image paint with tile scale mode.</p><p><br></p><p><strong>Working with Figma and Figjam. </strong>It's really interesting</p><p>to use this plugin in Figjam, as Figjam itself does not support filling pattern, but you can do it with this plugin.</p><p><br></p><p>---------------------------------------------------------</p><p><br></p><h2>How to use</h2><ol><li>Design your pattern in a frame</li><li>Create a layer you want to fill with pattern</li><li>Select the pattern layer and the target layer</li><li>Run this plugin</li><li>Pattern layer will be exported as a 2x image and filled into the target layer with 50% scaling factor</li></ol>","id":"1067417425616378100","installCount":2981,"lastUpdateDate":"2022-07-15T08:00:51.861Z","likeCount":17,"name":"Pattern Fill","publisherHandle":"tankxu","publisherId":"61240","publisherName":"Tank","runCount":4342,"viewCount":6465},{"description":"<p><strong>Improve your client communication and speed up your website design process! SimpleStage gives you a single platform to collect content, design feedback, and website feedback.</strong></p><p><br></p><p>Sync your files directly from Figma to SimpleStage and send them to your client or copywriters to provide content or leave design feedback.</p><p><br></p><p><strong>Gather content from clients and stakeholders during the design process</strong></p><p><br></p><p>Collecting content is one of the most difficult aspects of a creative project, but SimpleStage makes the process easier with content collection fields and automated client reminders.</p><p><br></p><ul><li>Visual content entry</li><li>Customizable fields</li><li>Easily collaborate</li><li>Version history</li></ul><p><br></p><p><strong>Collect design feedback and collaborate quickly with clients</strong></p><p><br></p><p>Sharing designs and collecting feedback from your clients is easy and fast with SimpleStage. Clients can comment and annotate on your uploaded design to give feedback directly on elements.</p><p><br></p><ul><li>Speed up design review</li><li>Annotate designs</li><li>Communicate faster</li><li>Version history</li></ul>","id":"1067489506204214663","installCount":151,"lastUpdateDate":"2022-01-26T19:39:29.897Z","likeCount":4,"name":"SimpleStage","publisherHandle":"simplestage","publisherId":"1067487533816496452","publisherName":"SimpleStage","runCount":135,"viewCount":755},{"description":"<p>Generates SCSS code from the layers on a frame to create a CSS sprite with 2x pixel density screen support</p>","id":"1067531173874663872","installCount":117,"lastUpdateDate":"2022-03-09T12:15:47.465Z","likeCount":2,"name":"SCSS Sprites","publisherHandle":"pedrocorreia","publisherId":"1067520131063294624","publisherName":"Pedro Correia","runCount":136,"viewCount":310},{"description":"<p>Palette Importer creates Figma Color Styles from various color file formats.</p><p><br></p><ul><li>Compatible with .ase, .sketchpalette, .css, and .json files</li><li>Figma Color Styles are automatically created from files loaded into Palette Importer</li><li>An additional ‘Paste Swatches’ feature pastes color swatch shapes onto the Figma page</li><li>Any existing color names and groups contained in the file are retained</li><li>Individual colors and/or color groups can be toggled on or off to give control over which are included in the import</li></ul><p><br></p><h2>Instructions</h2><ol><li>Load a compatible color file format</li><li>Preview the colors and groups</li><li>Click ‘Paste Swatches’ to paste color swatch shapes to the Figma page</li><li>Click ‘Create Color Styles’ to import the colors into the Color Styles panel</li></ol><p><br></p><h2><strong>Non-Standard Format Instructions</strong></h2><p><br></p><p><strong>JSON</strong></p><p>JSON files can follow the non-standard schema that is commonly used by CSS frameworks like Tailwind and Material Design.</p><p><br></p><p>For example:</p><pre class=\"ql-syntax\" spellcheck=\"false\">{\n  \"red\": {\n    \"50\": \"#ffebee\",\n    \"100\": \"#ffcdd2\",\n    \"200\": \"#ef9a9a\",\n  },\n   \"indigo\": {\n    \"50\": \"#e8eaf6\",\n    \"100\": \"#c5cae9\",\n    \"200\": \"#9fa8da\"\n  }\n}\n</pre><p><br></p><p>This will create <em>red</em> and <em>indigo</em> groups with their own <em>50</em>, <em>100</em>, and <em>200</em> swatches.</p><p><br></p><p><strong>CSS</strong></p><p>Palette Importer uses a custom CSS parser that only looks for color values in variables to keep things fast and simple.</p><p><br></p><p>For example:</p><pre class=\"ql-syntax\" spellcheck=\"false\">:root {\n  --primary: #ff0000;\n  --warning: rgb(255,200,0);\n  --info: rgb(0,0,255);\n}\n</pre><p><br></p><p>When imported this will create a group called <em>:root</em> with <em>primary, warning, </em>and<em> info </em>colors<em>.</em></p><p><br></p><p>More at <a href=\"https://fusepilot.com/products/palette-importer?utm_source=figma&amp;utm_medium=figma-plugin-description&amp;utm_campaign=palette-importer\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">fusepilot.com</a></p>","id":"1067561134666722782","installCount":370,"lastUpdateDate":"2022-06-13T01:16:16.044Z","likeCount":6,"name":"Palette Importer","publisherHandle":"fusepilot","publisherId":"2807680","publisherName":"Michael Delaney","runCount":1573,"viewCount":685},{"description":"<p>Button Generator</p>","id":"1067641790948634130","installCount":2172,"lastUpdateDate":"2022-01-26T07:02:54.052Z","likeCount":6,"name":"Button Generator","publisherHandle":"thynguyenYDS","publisherId":"1039482883079054702","publisherName":"Thy Nguyen","runCount":2917,"viewCount":3159},{"description":"<p>Rename each selected layer based on its text content.</p>","id":"1067734598531829370","installCount":386,"lastUpdateDate":"2022-01-25T14:47:37.013Z","likeCount":2,"name":"Rename Layers","publisherHandle":"broen","publisherId":"4341076","publisherName":"Michael Braun","runCount":618,"viewCount":789},{"description":"<p>Generate pixel-perfect asset templates for 20+ platforms. If you’re building an online presence for your product, game, or app, Brand Buddy is for you.</p>","id":"1068010542677347310","installCount":519,"lastUpdateDate":"2022-02-10T04:34:55.278Z","likeCount":16,"name":"Brand Buddy","publisherHandle":"sagarramesh","publisherId":"6630","publisherName":"Sagar Ramesh","runCount":587,"viewCount":1711},{"description":"<p>A lil Photo Editor powered by <a href=\"https://pqina.nl/pintura/?ref=figma\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\"><strong>Pintura</strong></a>.</p><p><br></p><p>Makes it easy to quickly crop, rotate, flip, filter, finetune, and redact images.</p><p><br></p><p><strong>Transforms:</strong></p><p>Crop, turn, flip, rotate, zoom</p><p><br></p><p><strong>Color adjustments:</strong></p><p>Brightness, contrast, gamma, clarity, saturation, exposure, temperature, vignette</p><p><br></p><p><strong>Filters:</strong></p><p>A selection of high quality filters</p><p><br></p><p><strong>Redaction:</strong></p><p>An image redaction tool for secure censoring of information in images. Image data is first scrambled then blurred making retrieval of original data impossible.</p>","id":"1068093559622021183","installCount":2597,"lastUpdateDate":"2022-01-26T16:07:24.907Z","likeCount":30,"name":"Mini Photo Editor","publisherHandle":"rikschennink","publisherId":"1047153635477214093","publisherName":"Rik","runCount":2869,"viewCount":3506},{"description":"<p>Preview artboards at the right zoom level so they appear at their true <strong>Physical</strong> size.</p>","id":"1068276416739369342","installCount":390,"lastUpdateDate":"2022-01-26T21:09:44.759Z","likeCount":19,"name":"Physical","publisherHandle":"janos","publisherId":"194740","publisherName":"Janos Pauer","runCount":333,"viewCount":982},{"description":"<p><strong>Create smooth and beautiful shadows.</strong></p><p><br></p><p>The plugin allows you to create beautiful shadows by simply dragging a 'light source' which casts a shadow on selected elements.</p><p><br></p><p>The plugin outputs <strong>valid</strong> <code>box-shadow</code> <strong>CSS styles</strong>. Grab the CSS values from the Figma <a href=\"https://help.figma.com/hc/en-us/articles/360055203533-Use-the-Inspect-panel\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Inspect panel</a> (next to the <em>Prototype</em> tab✌️)</p><p><br></p><p><br></p><p><strong>About the plugin</strong></p><p>The shadow effect is achieved by layering and easing multiple drop-shadows to create a skeuomorphic shadow umbra and penumbra.</p><p><br></p><p>The plugin was cultivated by Josh W. Comeau's amazing read about <a href=\"https://www.joshwcomeau.com/css/designing-shadows/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Designing beautiful shadows in CSS</a>.</p><p><br></p><p>MIT licensed and open sourced on GitHub: <a href=\"https://github.com/alexwidua/figma-beautiful-shadows\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Source</a></p>","id":"1068595505353552645","installCount":20643,"lastUpdateDate":"2022-03-01T21:54:22.956Z","likeCount":511,"name":"Beautiful Shadows","publisherHandle":"aw","publisherId":"3641231","publisherName":"Alex Widua","runCount":23151,"viewCount":20843},{"description":"<p>Blows out the frames of a GIF into a bunch of rectangles.</p><p><br></p><p>Add a GIF onto your canvas in either Figma or Figjam and run Blowout; it'll export all the frames into rectangle nodes.</p><p><br></p><p>Please provide feedback or let me know your experience with the plugin!</p>","id":"1068896636218297401","installCount":369,"lastUpdateDate":"2022-02-04T14:14:04.829Z","likeCount":1,"name":"Blowout","publisherHandle":"paubins","publisherId":"1890400","publisherName":"paubins","runCount":501,"viewCount":942},{"description":"<h2>Coolors is the super fast color palettes generator loved by 2,5 M users</h2><p><br></p><p><strong>Usage</strong></p><p><br></p><ol><li>Click on <em>Generate</em> to get random colors schemes</li><li>Lock your favorite colors by clicking on the <em>lock icon</em></li><li>Click again on <em>Generate</em> to get the remaining colors that match perfectly with them</li></ol><p><br></p><p><strong>Other features</strong></p><p><br></p><ul><li>Add or remove the number of colors from 2 to 10</li><li>Type your own HEX codes to get matching colors</li><li>Copy and paste color values or add a palette right into your document</li></ul><p><br></p><p><strong>Feel lazy?</strong></p><p><br></p><p>Search for millions of ready-made palettes by hue, style and topic.</p><p><br></p><p><strong>Want more?</strong></p><p><br></p><p>Visit our website on <a href=\"https://coolors.co\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">coolors.co </a>for additional features like image palette picker, collage maker, color conversion, gradients and more...</p><p><br></p><p>Enjoy!</p><p>Fabrizio 🖖</p>","id":"1068919813159975006","installCount":28089,"lastUpdateDate":"2022-02-01T11:59:17.835Z","likeCount":542,"name":"Coolors","publisherHandle":"coolors","publisherId":"1037439185714826292","publisherName":"Coolors","runCount":31174,"viewCount":34003},{"description":"<p><strong>ChartGen</strong> quickly generates real looking chart lines for designs without having to have the real data. ChartGen simulates high quality trending data, so the end result closely matches performance, analytics, and financial price charts. Every chart generated is celebrated and is given a unique name.</p><p><br></p><p>This is in beta at the moment. Here are the updates that I have planned:</p><ul><li>Additional chart types: mountain, bar, candlestick, OHLC, pie (you can make and grab other chart types now at <a href=\"https://chartgen.frederickallen.co\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://chartgen.frederickallen.co</a>)</li><li>Ability to add custom data</li></ul><p><br></p><p>Reach out if you have any other ideas.</p>","id":"1068950557390064769","installCount":2806,"lastUpdateDate":"2022-02-08T18:36:13.774Z","likeCount":29,"name":"ChartGen (Beta)","publisherHandle":"frederickallen1","publisherId":"1041227247174257039","publisherName":"Frederick Allen","runCount":3920,"viewCount":6648},{"description":"<p>Prompts for a name.</p><p>Finds any layers that match that name.</p><p>Toggles those layers' visibility.</p><p><br></p><p><a href=\"https://i.imgur.com/BYFpnfj.gif\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Usage example gif</a>.</p><p><br></p><p>Use the quick actions bar and bring up ToggleVisibleByName. You can then start typing a layer name pattern. When you hit enter (or click on a suggestion) it will search through all of the current page's layers, find any that match your name pattern, and toggle the visibility of that layer (ie, if it was visible, it will become invisible; if it was invisible, it will become visible).</p><p><br></p><p>If you don't like what you see (or ... don't see!), you can run the command again with the same name to bring it back to the way it was before.</p><p><br></p><p>It ships with one default entry \"Annotate it! – Badge\" because we are using <a href=\"https://www.figma.com/community/plugin/859894273811051899/Annotate-it!\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Annotate it!</a> (and loving it!), but wanted to be able to quickly toggle the annotation markers.</p>","id":"1069002393943573677","installCount":170,"lastUpdateDate":"2022-01-28T22:34:15.311Z","likeCount":6,"name":"ToggleVisibleByName","publisherHandle":"percipient24","publisherId":"992440381272228161","publisherName":"Joe Pietruch","runCount":222,"viewCount":387},{"description":"<p>✅ Drag and Drop Remixicon icons to your Figma design.</p><p>✅ Search by name or category.</p><p>✅ Change colors.</p>","id":"1069360095689203108","installCount":1479,"lastUpdateDate":"2022-02-12T16:44:07.322Z","likeCount":4,"name":"Figma Remixicon","publisherHandle":"bekicot","publisherId":"3198325","publisherName":"Yana Agun Siswanto","runCount":1599,"viewCount":1626},{"description":"<p>Select a web's/mp4's/movs/avi and we'll export video frames as rectangle nodes into the canvas.</p><p><br></p><p>Bomb icons created by Freepik - Flaticon</p><p><a href=\"https://www.flaticon.com/free-icons/bomb\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://www.flaticon.com/free-icons/bomb</a></p><p><br></p>","id":"1069746440997028492","installCount":1440,"lastUpdateDate":"2022-02-22T20:07:36.656Z","likeCount":4,"name":"Export Video Frames","publisherHandle":"paubins","publisherId":"1890400","publisherName":"paubins","runCount":2283,"viewCount":2264},{"description":"<p>Easily create, convert or wrap layers in zero frames.</p><h2><br></h2><p><strong>Add zero frame:<em> </em></strong>Add a zero frame to selected frames and auto layouts, or if nothing is selected, the canvas.</p><p><br></p><p><strong>Convert to zero frame:<em> </em></strong>Convert selected frames and auto layouts to zero frames while retaining their positioning properties.</p><p><br></p><p><strong>Wrap in zero frame:<em> </em></strong>Wrap selected layers in a zero frame.</p><p><br></p><h2>What and Why?</h2><p>A zero frame is a frame with either zero height or zero width. It occupies no space on the canvas but can position layers within in.</p><p><br></p><p>Zero frames are often used to add layers to auto layouts with absolute positioning i.e. they are not affected by the stacking order of other layers in the auto layout. Some novel uses of zero frames are detailed in this great talk from Figma Config 2021 - <a href=\"https://youtu.be/hnPIpkvDxjc?t=75\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Pushing Figma to its limits with Chudo, Andrei, Gleb, Vitalii, Shuaiqi</a>.</p><p><br></p><h2>Open Source</h2><p>Zero Frame is <a href=\"https://github.com/aashreys/zero-frame\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">open source</a> and contributions are welcome.</p>","id":"1069750945133910671","installCount":309,"lastUpdateDate":"2022-05-28T02:23:25.094Z","likeCount":21,"name":"Zero Frame","publisherHandle":"aashreys","publisherId":"697643","publisherName":"Aashrey Sharma","runCount":338,"viewCount":1188},{"description":"<p>Open source your designs on <a href=\"https://cercle.design\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">cercle.design</a>, and let others contribute to them.</p><p><br></p><p><strong>Note</strong>: this project is still in beta, please report any bugs to richardmguerre@gmail.com.</p>","id":"1069840561917252269","installCount":75,"lastUpdateDate":"2022-05-06T16:51:51.398Z","likeCount":6,"name":"Cercle","publisherHandle":"cercle","publisherId":"1022025159606854283","publisherName":"Cercle","runCount":150,"viewCount":584},{"description":"<p>Identify what grabs attention in your design.&nbsp;</p><p><br></p><p><a href=\"https://bit.ly/3HkxOl4\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">expoze.io</a> predicts visual attention using an algorithm we trained with traditional eye-tracking data.&nbsp;</p><p><br></p><p>Our platform delivers actionable results by visualizing heatmaps and quantified attention scores. expoze.io allows creators to <a href=\"https://bit.ly/3gt2Uex\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">validate any design</a> with <a href=\"https://bit.ly/3AMwnt4\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">scientifically reliable</a> insights in real-time.&nbsp;</p><p><br></p><p>This allows our users to make data-driven decisions that optimize their designs. At <a href=\"https://bit.ly/3uf40SU\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">low costs</a>, expoze.io turns optimization into an iterative and effortless process for any design.&nbsp;</p><p><br></p><p>This increases the chances your work will get noticed.&nbsp;</p><p><br></p><p>Don't have an account yet? <a href=\"https://bit.ly/3HkxKlk\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Try it out for free for 14 days</a>!</p>","id":"1070021548321707913","installCount":155,"lastUpdateDate":"2022-01-31T16:54:59.223Z","likeCount":4,"name":"expoze.io","publisherHandle":"expozedotio","publisherId":"1070024420460168160","publisherName":"expoze.io","runCount":204,"viewCount":485},{"description":"<p><strong>Description</strong></p><p>I am just too lazy to click on the small button of Auto Layout to change the value, so I made this plugin.</p><p><br></p><p>if you find this helpful, feel free to try it out.</p><p><br></p><p><strong>How it work?</strong></p><ol><li>Choose a frame first</li><li>\"Search Auto Layout via Keyboard\" with quick action bar</li><li>Hit \"Tab\" to enter plugin</li><li>Enter the number by the following guide</li></ol><p><br></p><p>The parameter have 3 parts:</p><p>First part is to choose either you want the layout to be Vertical or Horizontal.</p><p><br></p><p>Second is set the spacing between each item, you enter enter any positive number.</p><p><br></p><p>Third is set the padding for this auto layout, it's work just like how you set padding in CSS. like 24,48, this mean the top and bottom padding is 24, and left and right padding is 48.</p><p><br></p><p><strong>You need to separate the number by comma.</strong></p><p><br></p><p>More example </p><ul><li>Enter 48, this apply to four side of padding.</li><li>Enter 24,48, 24 apply to top &amp; bottom, 48 apply to left &amp; right.</li><li>Enter 24,32,48, 24 apply to top, 32 apply to left &amp; right, 48 apply to bottom</li><li>Enter 24,32,48,12, 24 apply to top, 32 apply to right, 48 apply to bottom, and 12 apply to left (it's clockwise)</li></ul>","id":"1070447386042082631","installCount":445,"lastUpdateDate":"2022-02-01T20:57:41.520Z","likeCount":2,"name":"Auto Layout via keyboard","publisherHandle":"JasonCK","publisherId":"409911","publisherName":"JasonCK","runCount":688,"viewCount":1898},{"description":"<p>Converts current selections to json files. Also exports all images at original sizes.</p><p><br></p><p>The idea being that you can recreate the layout in your app automatically, if you add the ability to interpret json when you build your app.</p><p><br></p><p>Note that the json does not include everything, but it currently is enough to recreate the layout with some basic constraints, some more advanced constraints are not supported.</p>","id":"1070707193730369068","installCount":189,"lastUpdateDate":"2022-07-26T14:22:59.647Z","likeCount":5,"name":"toJSON","publisherHandle":"DozyHole","publisherId":"1054809967607780317","publisherName":"Matty","runCount":252,"viewCount":316},{"description":"<p>Create NFT images with Figma. Basic features but free forever.</p><h2><br></h2><h2>IMPORTANT! INSTRUCTIONS</h2><ol><li>Create ‘components with variations’ for each layer.</li><li>Place an instance of it inside a frame.</li><li>Select the frame to generate. You would see a max number show</li><li>Click ‘Generate’ button!</li><li>Have patience. Large sets take a while to generate.</li></ol><h2><br></h2><h2><strong>Link to explainer video</strong></h2><p><a href=\"https://youtu.be/z7yKp1b3qcA\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://youtu.be/z7yKp1b3qcA</a></p><p><br></p><h2>Link to example File</h2><p><a href=\"https://www.figma.com/community/file/1070992991166975010/NFT-Creator-plugin-%3A-How-to-use\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://www.figma.com/community/file/1070992991166975010/NFT-Creator-plugin-%3A-How-to-use</a></p>","id":"1070988110233903918","installCount":1837,"lastUpdateDate":"2022-02-03T09:08:13.129Z","likeCount":52,"name":"NFT Creator Unlimited","publisherHandle":"7c961091_9f98_4","publisherId":"1746456","publisherName":"O","runCount":1797,"viewCount":3309},{"description":"<p>Tired of hacking together multiple tools to share your work and get feedback on it? Now you can export Figma frames to Threads to share them with your team, gather feedback in one place, and present your work.</p><p><br></p><p><strong>How it works</strong></p><ol><li>Download the <a href=\"https://downloads.threads.com/mac/Threads-2.0.4.dmg\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Mac desktop app</a> and sign into Threads</li><li>Install the \"Export to Threads\" plugin on Figma</li><li>Select frames you want to get feedback on, or present, and press <code>cmd+;</code> to run the plugin and send the frames to Threads desktop</li><li>Add context to the frames, tag your teammates, or add video narration to walk through them</li><li>Share the link with your team</li></ol><p>You can also interact with Figma prototypes directly in Threads as well.</p><p><br></p><p><strong>What is Threads</strong></p><p>Threads is the missing half of Figma. It makes it easy for you to share your designs, get feedback on them, and present them from one place. If you're getting feedback async, you can even add video narration to your threads to give your teammates additional context.</p>","id":"1070997335971861310","installCount":183,"lastUpdateDate":"2022-02-17T19:09:19.099Z","likeCount":15,"name":"Export to Threads","publisherHandle":"mehdikazi","publisherId":"1892399","publisherName":"Mehdi Kazi","runCount":191,"viewCount":883},{"description":"<p>Ink Wireframe plugin lets you create lo-fi wireframes.</p><p><br></p><p>With Ink Wireframe you can quickly drag and drop components and brainstorm your design ideas. Ink Wireframe plugin has <strong>700+ unique variants</strong> for rapid prototyping.&nbsp;</p><p><br></p><p>Ink Wireframe is an intuitive plugin with a zero learning curve for both designers and project managers. Ink Wireframe helps to prototype user flow and iterate quickly.</p><p><br></p><p>Ink Wireframe speeds up the design and iteration process. Ink Wireframe is ideal for shipping large-scale projects faster. Plugin lets designers to test ideas early on reducing scope of error.</p><p><br></p><p>Focus on your ideation and what really matters, rest Ink Wireframe will handle.</p>","id":"1071077298865016770","installCount":9670,"lastUpdateDate":"2022-03-05T18:36:44.215Z","likeCount":152,"name":"Ink Wireframe","publisherHandle":"nitishkmrk","publisherId":"708767","publisherName":"Nitish Khagwal","runCount":11800,"viewCount":9935},{"description":"<p>Looking for a fun way to share customised memes with your team mates? We, the folks at Zeta, built the FigMeme plugin to satisfy our need to always be meme-ready. We pride ourselves on our culture of conversing extensively using funny GIFs and sarcastic memes.</p><p><br></p><p>Here’s why FigMeme is awesome:</p><ul><li><strong>Search using a keyword:</strong> Can’t find the perfect meme yet? Explore the meme-verse using a keyword.</li><li><strong>Get customised memes in seconds:</strong> Edit your meme with captions and customise them with different typefaces, colours and strokes.</li><li><strong>Save your favourites:</strong> Easily access your go-to memes by ‘adding to favourite’.</li><li><strong>Keep up with trends:</strong> Be up to date with your meme-game by seeing what’s trending.</li><li><strong>‘I’m feeling unlucky’:</strong> Not sure what you’re looking for ? Don’t sweat it, we’ll pick one for you.</li></ul><p><br></p><p>Show FigMeme some love by tagging <a href=\"https://twitter.com/zetaux1\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">@zetaux1</a> on Twitter! Happy meme-ing folks!</p>","id":"1071117041729926148","installCount":1682,"lastUpdateDate":"2022-02-10T09:10:23.029Z","likeCount":67,"name":"FigMeme","publisherHandle":"zetadesign","publisherId":"904995377312408848","publisherName":"Zeta","runCount":1536,"viewCount":2369},{"description":"<h2>Remove awkward moments from your workshops.</h2><p>Use plugin to:</p><ul><li>Pick a volunteer</li><li>Define group's order</li><li>Split participants into any number of groups</li></ul>","id":"1071321829395078302","installCount":68,"lastUpdateDate":"2022-04-10T07:13:14.072Z","likeCount":1,"name":"Facilitator","publisherHandle":"elenaborisova","publisherId":"2191115","publisherName":"Elena Borisova","runCount":100,"viewCount":205},{"description":"<h2>figeleton</h2><p><br></p><p>Generate Skeleton Component from Figma. Use Figma as a source.</p><p><br></p><p>Skeleton components generated by this plugin follow the specifications of <a href=\"https://www.npmjs.com/package/@figeleton/skeleton\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">@figeleton/skeleton</a>.</p><p><br></p><h2>Options</h2><ul><li>animation: Value of Skeleton animation prop. Preview of the option can be found <a href=\"https://soyoung210.github.io/figleton/?path=/story/example-skeleton--basic\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">here</a></li><li>Square as: whether to generate a square node on Figma as a circular skeleton or as it(square) is.</li></ul><p><br></p><h2>Plan</h2><ul><li>Currently, only React is supported, but plan to support HTML soon.</li><li>Preview Generated Skeleton</li></ul>","id":"1072079296344464088","installCount":119,"lastUpdateDate":"2022-02-27T10:56:59.698Z","likeCount":10,"name":"figeleton","publisherHandle":"soso02","publisherId":"1876111","publisherName":"soyoung","runCount":223,"viewCount":906},{"description":"<p>Generate different shapes out of mathematical equations – fold circles, break lines, combine hundreds of objects into progressive shapes. Unlimited possibilities.</p><p><br></p><p><strong>We're launching new Figma plugin every 30 days</strong>. Stay tunned and have fun.</p>","id":"1072861155595145704","installCount":1562,"lastUpdateDate":"2022-02-16T20:10:04.356Z","likeCount":33,"name":"Ruri – Curves","publisherHandle":"klavs","publisherId":"1194976","publisherName":"KB","runCount":2067,"viewCount":3697},{"description":"<h2><strong>Localize Your Figma Designs in Minutes</strong></h2><h2><br></h2><h2><strong>Let your designs speak for themselves. Effortlessly translate your Figma creations into other languages.</strong></h2><h2><br></h2><p>Showcase your designs in front of the largest audience possible. Localize seamlessly integrates with Figma allowing you to amplify your work’s impact by making it accessible to more people and languages.</p><p><br></p><p>Unlike run-of-the-mill translators, Localize offers designers an easy and elegant solution that:</p><p><br></p><ul><li>Takes the hassle out of internationalization (i18n) and localization (l10n) processes</li><li>Automates and streamlines localization workflows right in the design phase</li><li>Reduces content translation complexities by eliminating the need for development resources</li><li>Maximizes ROI by speeding up time to market</li></ul><p><br></p><p>Localize empowers you to create globally-inclusive UI and UX designs, expanding the appeal and reach of your work by presenting them in the languages of your target markets.</p><p><br></p><h2><strong>Localization as easy as 1, 2, 3</strong></h2><h2><br></h2><ol><li><strong>Install Plugin.</strong> Go to the Community section on Figma’s website. Select Plugins and use the search functionality to locate Localize. Select Install on the top-right corner of the Localize plugin page.</li><li><strong>Connecting to Localize.</strong> Once installed, access Localize via the Plugins dropdown.</li><li><strong>Enter your API Key.</strong> Start a Localize free trial or integrate with your Localize Business plan (or higher) by entering the API key.</li></ol><p><br></p><p><strong>I already have a Localize Business plan or higher account:</strong></p><p><br></p><ol><li>Install the Localize plugin in Figma.</li><li>Open your Figma file.</li><li>Hover over Plugins in the toolbar. Select Localize.</li><li>Type in your Localize API key. Select Connect.</li></ol><p><br></p><p><strong>I don’t have a Localize account yet:</strong></p><p><br></p><ol><li>Install the Localize plugin in Figma.</li><li>Open your Figma file.</li><li>Hover over Plugins in the toolbar. Select Localize.</li><li>Click the Start Your Free Trial link on the bottom of the login view.</li><li>Create a Localize account and follow the Localize install steps.</li><li>Return to Figma and type in your Localize API key. Then, select Connect.</li></ol><p><br></p><p>If your organization doesn't have a Business plan or higher, <a href=\"https://app.localizejs.com/settings/organization/billing\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">please click to upgrade your plan!</a></p><p><br></p><p><strong>Need help?</strong></p><p><br></p><p>For more information and to learn how to install the plugin, visit our<a href=\"https://help.localizejs.com\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\"> Help Docs</a></p><p><br></p><p>Don’t have a Localize account?<a href=\"https://app.localizejs.com/signup\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\"> Try it for free!</a></p>","id":"1072922888701184583","installCount":177,"lastUpdateDate":"2022-06-01T19:16:15.082Z","likeCount":3,"name":"Localize","publisherHandle":"localizejs","publisherId":"4152723","publisherName":"James Binns","runCount":293,"viewCount":1091},{"description":"<h2>✨ <strong>Welcome to Quicksubs!</strong> ✨</h2><p><br></p><p>Quicksubs is a simple plugin that does one thing well: generate batches of PNG images from a template, replacing text content from a CSV.</p><p><br></p><p>Using Quicksubs is easy:</p><ol><li>Create your template, renaming your text nodes correctly</li><li>Select the template frame and open Quicksubs</li><li>Drag in your CSV</li><li>Profit</li></ol><p><br></p><p><a href=\"https://joe-27.gitbook.io/quicksubs-figma-plugin/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">See this link</a> for full documentation and a <em>How To</em> guide.</p><p><br></p><p>--</p><p><br></p><p><strong>Why Quicksubs:</strong> It was originally built for a YouTube channel that regularly needed 200+ subtitle overlays for their multi-lingual videos. Each subtitle frame instance contained 2 languages, each with separate fonts, and different text treatment. Figma seemed the perfect software to create the template, they just needed an efficient way to replace the text and export it hundreds of times.</p>","id":"1073033522532907723","installCount":176,"lastUpdateDate":"2022-02-10T09:49:58.089Z","likeCount":1,"name":"Quicksubs","publisherHandle":"joetuson","publisherId":"1065352122509133307","publisherName":"Joe Tuson","runCount":158,"viewCount":209},{"description":"<h2><strong>Create, edit, link, and publish your docs</strong></h2><p>Attach documentation to your components. Write and publish beautiful docs using a Markdown editor. Link components to external documentation. View attached documentation without leaving your working file.</p><p><br></p><h2>Writing</h2><p>Select a Frame or Component and open the editor to write your documentation. Use <a href=\"https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Markdown</a> to style your documentation by adding: headers, lists, images, etc.&nbsp;</p><p><br></p><h2><strong>Linking</strong></h2><p>Link your component to an external iframe, JSONBin, Github file, or Notion page.</p><p><br></p><h2><strong>Publishing</strong></h2><p>Edit documentation linked to Github and JSONBin and publish it.</p><p><br></p><h2><strong>Viewing</strong></h2><p>View your documentation by selecting anything with saved documentation.</p><p><br></p><p><strong>Docs</strong>: <a href=\"https://docs.gist-plugin.com/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://docs.gist-plugin.com/</a></p>","id":"1073059820691713754","installCount":2648,"lastUpdateDate":"2022-07-26T05:11:42.635Z","likeCount":228,"name":"Gist","publisherHandle":"mikew","publisherId":"966040693785091201","publisherName":"Mike Wilson","runCount":2912,"viewCount":8385},{"description":"<p>Jira Ticket Sync allows agile design teams to bridge the gap between Jira and Figma. Display your Jira tickets directly in Figma and create links to your designs. Make changes in Jira and sync the changes in Figma. This helps you to keep track of your design progress in Figma and connects Jira tickets directly with your designs.</p><p><br></p><p>Jira Ticket Sync is not affiliated with Jira or Figma.</p><p>It's simply developed with 💙 by <em>Lukas Bittner</em>.</p><p><br></p><p><a href=\"https://www.youtube.com/watch?v=IpuQa7zmxIY\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\"><strong>Demo Video</strong></a></p><p><br></p><p><strong>Features</strong></p><ol><li>Add Jira tickets as “Jira Ticket Headers” to Figma.</li><li>Create links in the Jira tickets that reference the “Jira Ticket Headers”.</li><li>Automatically update all “Jira Ticket Headers” if you have made changes to the Jira tickets (e.g the status changed).</li><li>Customise the design of your \"Jira Ticket Headers\".</li><li>Adjust &amp; customise status variants to your Jira board.</li></ol><p><br></p><p><strong>Reuse Ticket Components from a Library</strong></p><ol><li>Run JTS in a library file. A JTS component will be created.</li><li>Customize the style of your JTS component.</li><li>Select the JTS component and click the quick actions button in the right panel \"Use as Global Component\".</li><li>JTS will now use this library component as default. If you have a local JTS component in this file (e.g. if you copy and paste it from a different file), it will use the local component.</li></ol><p><br></p><p><strong>Found a bug or missing a feature?</strong></p><p>Contact me at <a href=\"mailto:bittner.lukas@gmail.com\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">bittner.lukas@gmail.com</a></p><p><br></p><p><strong>Want to contribute to this project?</strong></p><p>Check out the code on <a href=\"https://github.com/lukasbittner/Jira-Ticket-Sync\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">GitHub</a>!</p>","id":"1073234730618485706","installCount":1440,"lastUpdateDate":"2022-06-27T10:37:06.952Z","likeCount":48,"name":"Jira Ticket Sync","publisherHandle":"lukasbittner","publisherId":"2450676","publisherName":"Lukas Bittner","runCount":2098,"viewCount":4492},{"description":"<p>Replace selected text not only with some random people names but with names from familiar 80's shows 😎</p><p><br></p><p><strong>Usage</strong></p><ol><li>Select one or multiple text</li><li>Hit the replace button</li><li>That's it!</li></ol><p><br></p><p><strong>Next</strong></p><p>In the next iteration the options will be extended.</p><p><br></p><p>Have fun!</p><p>Danny</p>","id":"1073283669733243920","installCount":698,"lastUpdateDate":"2022-02-17T14:20:36.905Z","likeCount":3,"name":"Familiar Names","publisherHandle":"dannyelli","publisherId":"1069929461063301463","publisherName":"Danny","runCount":1042,"viewCount":701},{"description":"<p>Generate your Blob! Gradients will be added in the update.</p>","id":"1073581725472838985","installCount":5013,"lastUpdateDate":"2022-06-23T18:22:08.963Z","likeCount":53,"name":"Gradient Blob","publisherHandle":"kontek","publisherId":"1374920","publisherName":"Pawel Kontek","runCount":6004,"viewCount":5116},{"description":"<p>Generate flow patterns which seem to organically flow from a focal point and have lovely geometric turbulence.</p><p><br></p><p>Instructions</p><ul><li>Select a layer that you want to turn into the pattern</li><li>You can select two layers—the one named \"center\" will be used for the focal point of the flow</li><li>Have fun!</li></ul>","id":"1073787479498983976","installCount":367,"lastUpdateDate":"2022-02-19T19:55:13.840Z","likeCount":22,"name":"Flowfield","publisherHandle":"raphdamico","publisherId":"4013","publisherName":"Raphael D'Amico","runCount":513,"viewCount":2059},{"description":"<p>Quickly sort pages</p>","id":"1073789628501089834","installCount":142,"lastUpdateDate":"2022-04-30T06:41:00.140Z","likeCount":3,"name":"Sort arrange","publisherHandle":"weilu","publisherId":"1017002927755165698","publisherName":"Wei Lu","runCount":266,"viewCount":539},{"description":"<p>Copy Names for json</p>","id":"1073789738476553772","installCount":65,"lastUpdateDate":"2022-04-30T06:40:49.228Z","likeCount":0,"name":"Copy Names for json","publisherHandle":"weilu","publisherId":"1017002927755165698","publisherName":"Wei Lu","runCount":125,"viewCount":338},{"description":"<p>Export images</p>","id":"1073791321657719341","installCount":1730,"lastUpdateDate":"2022-06-17T07:27:24.695Z","likeCount":1,"name":"Export images","publisherHandle":"weilu","publisherId":"1017002927755165698","publisherName":"Wei Lu","runCount":2643,"viewCount":2678},{"description":"<p>Move content to new page</p>","id":"1073791377495666222","installCount":51,"lastUpdateDate":"2022-04-30T06:41:19.915Z","likeCount":1,"name":"Move selection to another page","publisherHandle":"weilu","publisherId":"1017002927755165698","publisherName":"Wei Lu","runCount":75,"viewCount":166},{"description":"<p>Mark the page and switch to the page</p>","id":"1073791431682533935","installCount":42,"lastUpdateDate":"2022-05-17T01:22:47.159Z","likeCount":2,"name":"Page markup","publisherHandle":"weilu","publisherId":"1017002927755165698","publisherName":"Wei Lu","runCount":66,"viewCount":370},{"description":"<p>Select Create or replace components</p>","id":"1073791480018174512","installCount":546,"lastUpdateDate":"2022-04-30T06:40:03.937Z","likeCount":3,"name":"Replace component","publisherHandle":"weilu","publisherId":"1017002927755165698","publisherName":"Wei Lu","runCount":857,"viewCount":1642},{"description":"<p>Quickly separate text</p>","id":"1073792242622951986","installCount":740,"lastUpdateDate":"2022-04-30T07:04:16.363Z","likeCount":3,"name":"Split text","publisherHandle":"weilu","publisherId":"1017002927755165698","publisherName":"Wei Lu","runCount":971,"viewCount":1070},{"description":"<p>Replace a frame with an instance and copy over the text.</p><p><br></p><p>Just select one instance or one component and multiple frames that all share the same layout. Then run the plugin and all frames will be converted to instances. The cool thing is: all texts from the original frame will be copied over to the instance.</p><p><br></p><p>Requirement: The instance and the frame should contain the same amount of text-fields.</p>","id":"1073911056791673494","installCount":241,"lastUpdateDate":"2022-02-24T13:57:26.033Z","likeCount":5,"name":"Replace with Instance","publisherHandle":"fabian0","publisherId":"713423","publisherName":"Fabian","runCount":349,"viewCount":743},{"description":"<h2>120,000+ icons, emojis, illustrations and flags all from Figma!</h2><p><br></p><p>With this this Figma Plugin for <a href=\"https://iconduck.com/?figma\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Iconduck</a>, you can search through 120,000+ free icons, emojis, graphics, flags, illustrations and clipart to find the perfect vector or SVG for your project.</p><p><br></p><h2>How to use this plugin:</h2><ol><li>Click the blue \"Install\" button on this page</li><li>When you're in a Figma design, right-click anywhere on the page (which opens the context menu)</li><li>Go to Plugins</li><li>Choose Iconduck</li></ol><p><br></p><p>The Iconduck plugin will show up. From there, just search for the type of icon you're looking for!</p><p><br></p><h2>What is Iconduck?</h2><p>Iconduck is a platform of 120,000+ free open source icons (of all sorts) that you can use for personal and commercial projects.</p><p><br></p><h2>Popular Icon &amp; Illustration Sets</h2><p>With 150+ icon, illustration and emoji sets as part of Iconduck, you can search through them all using this plugin. Here are some of the popular sets that are available by using this plugin:</p><p><br></p><ul><li>Font Awesome</li><li>Twitter Bootstrap Icons</li><li>Twemoji (Twitter emojis)</li><li>Noto Emojis (by Google)</li><li>EmojiTwo (emojis)</li><li>Feather Icons</li><li>Google Material Design Icons</li><li>OpenMoji (emojis)</li><li>Mozilla FxEmojis (emojis)</li><li>Tabler Icons</li></ul><p><br></p><h2>Licensing:</h2><p>All icons are listed as open source, under licenses such as: CCO, MIT License, Creative Commons, Unlicense, Apache and more.</p><p><br></p><h2>More:</h2><p>Our Figma Plugin allows you to search through, and integrate, icons directly from our platform while using Figma.</p><p><br></p><p>Here are some more things you can do from <a href=\"https://iconduck.com/?figma\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">iconduck.com</a>:</p><ul><li>Download multiple PNG sizes</li><li>Favorite / like icons to quickly access them</li><li>Search through specific icon and illustration sets</li><li>Sign up for notifications on when new icons and illustrations are added</li></ul><p><br></p><p>Enjoy the plugin!</p>","id":"1074084347757622122","installCount":17895,"lastUpdateDate":"2022-07-07T19:41:53.156Z","likeCount":90,"name":"Iconduck","publisherHandle":"iconduck","publisherId":"1073685036695260867","publisherName":"Iconduck","runCount":34343,"viewCount":18483},{"description":"<p>Export icons with variants.</p><p><br></p><ul><li>Customize file names with rules like lowercase, camel, snake, and pascal.</li><li>Export as PNG, JPG, SVG, or PDF.</li><li>Modify the scale, height, or width.</li><li>Optionally exclude specific layers (e.g. exporting without a background layer).</li><li>Handles variants with multiple properties.</li><li>Selection can include frames with and without variants.</li></ul><p><br></p><p>Questions or suggestions, email <a href=\"mailto:naftali@naftalibeder.com\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">naftali@naftalibeder.com</a> or leave an issue at <a href=\"https://github.com/naftalibeder/figma-frame-exporter\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">github.com/naftalibeder/figma-frame-exporter</a>.</p>","id":"1074101625913782131","installCount":2922,"lastUpdateDate":"2022-06-15T18:50:33.874Z","likeCount":22,"name":"Frame Exporter","publisherHandle":"naftalibeder","publisherId":"1154528","publisherName":"Naftali Beder","runCount":4023,"viewCount":4366},{"description":"<p>A simple Figma plugin that generates a boilerplate file structure.</p><p><br></p><p>Another whistle to save your time 🐶</p>","id":"1074249219984098222","installCount":86,"lastUpdateDate":"2022-02-12T12:06:34.186Z","likeCount":5,"name":"Boiler","publisherHandle":"Jamshid","publisherId":"806721","publisherName":"Jamshidbek","runCount":119,"viewCount":367},{"description":"<p>Creates a calendar grid of 12/24/36 months (with week numbering) depending on the selected years.</p><p><br></p><p>• Components: It is enough to customize the appearance of an instance of one month-block, after which it can be replaced by another. Your formatting will be preserved (adjust the view before deleting elements).</p><p>• Text: Text only, no unnecessary elements.</p><p>• View: The vertical or horizontal layout of the elements in the block.</p><p>• First day of the week: Monday or Sunday.</p><p><br></p><p>Example of working with a plugin: <a href=\"https://youtu.be/RUobJQn89wM\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://youtu.be/RUobJQn89wM</a></p>","id":"1074589183210985644","installCount":6021,"lastUpdateDate":"2022-03-22T19:33:50.025Z","likeCount":24,"name":"Calendar Generator","publisherHandle":"twelfth","publisherId":"1012019066749875420","publisherName":"[ XII ] • [ twelfth ]","runCount":9585,"viewCount":6895},{"description":"<p>Quick Setup will create a few pages to get your indie project started.</p>","id":"1074647052897925336","installCount":35,"lastUpdateDate":"2022-02-13T19:47:58.354Z","likeCount":2,"name":"Quick Setup","publisherHandle":"MikeAndreuzza","publisherId":"719135","publisherName":"Michael Andreuzza","runCount":47,"viewCount":160},{"description":"<p>Swift Colors is a simple plugin for exporting color tokens to a Swift color theme.</p><p><br></p><h2><strong>Features</strong></h2><p><br></p><ul><li>Map color tokens in Figma to a type-safe Swift color theme file automatically.</li></ul><p><br></p><ul><li>Define light and dark mode color behaviour directly from Figma, by organising your color tokens in light and dark mode palettes.</li></ul><p><br></p><h2><strong>How to use</strong></h2><p><br></p><p><strong>1. Prepare your file's color tokens</strong></p><p>Organise color styles into a light and dark mode color palette in the Color Styles panel. Figma color styles can be organised in groups by prefixing the color style name with the group name.</p><p><br></p><p><em>For example:&nbsp;</em></p><p><code>\"Light Mode/Buttons/Primary\"</code></p><p><code>\"Dark Mode/Buttons/Primary\"</code></p><p><br></p><p>If you don't have a dark mode color palette yet, the plugin will use the light mode palette for dark mode too.</p><p><br></p><p><strong>2. Export</strong></p><p>Export the <code>.swift</code> file to your Xcode project.</p><p><br></p><p><strong>3. Use in Xcode</strong></p><p>Use your color theme by calling the desired color token name in your code.&nbsp;</p><p><br></p><p><em>For example:</em></p><pre class=\"ql-syntax\" spellcheck=\"false\">button.backgroundColor = Buttons.primary\n</pre><p><br></p><p><strong>4. See it in action!</strong></p><p> If you have defined both a light and dark mode color palette that contains a color style for <code>Buttons.primary</code>, iOS will automatically change between the two variants based on the user's preference.</p><p><br></p><h2><strong>Why it works</strong></h2><p><br></p><p>The exported theme file includes an extension on <code>UIColor</code> that automatically adapts to light and dark mode variants based on the current <code>UITraitCollection</code>.</p>","id":"1074697239213062404","installCount":344,"lastUpdateDate":"2022-02-13T14:25:49.780Z","likeCount":11,"name":"Swift Colors","publisherHandle":"ebaehr","publisherId":"1761523","publisherName":"Emil Baehr","runCount":405,"viewCount":1038},{"description":"<p><strong>6Spiral is a plugin to draw spirals and 3D-like helix shapes at a specified angle in parallel&nbsp;projection.</strong></p><p><br></p><p>6Spirals supports creation of the two most common types of spirals: Archimedean Spirals and Logarithmic Spirals.</p><p><br></p><p>The spiral is created at the center of the currently first selected object. The spiral is then continuously updated as you change the parameters in the plugin.</p><p><br></p><p>This plugin was originally made for Sketch but has now been ported to use with Figma. The Sketch version is no longer supported since Sketch version 70.1.</p><p><br></p><p>More info and examples from the original publishing of the Sketch plugin:</p><p><a href=\"https://medium.com/sketch-app-sources/you-can-now-easily-draw-beautiful-spiral-and-helix-shapes-in-sketch-4a921c13f5ef\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://medium.com/sketch-app-sources/you-can-now-easily-draw-beautiful-spiral-and-helix-shapes-in-sketch-4a921c13f5ef</a></p><p><br></p><p>Please report bugs, issues or suggested improvements for the app on its Github issue page: <a href=\"https://github.com/matej-marjanovic/6Spiral-Figma-Plugin/issues\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://github.com/matej-marjanovic/6Spiral-Figma-Plugin/issues</a></p>","id":"1074706773545183504","installCount":1254,"lastUpdateDate":"2022-02-13T15:31:40.503Z","likeCount":8,"name":"🌀6Spiral","publisherHandle":"matejm","publisherId":"567392","publisherName":"Matej Marjanovič","runCount":1634,"viewCount":2504},{"description":"<h2>Moves the component outside. Leaves an instance in place. </h2><p><br></p><h2>How to use</h2><ul><li>Select a single component</li><li>Run Plugin</li></ul><p><br></p><h2>Tutorial video</h2><p>coming soon.</p>","id":"1074774500773908834","installCount":302,"lastUpdateDate":"2022-02-13T20:56:22.836Z","likeCount":4,"name":"Component Plus","publisherHandle":"7c961091_9f98_4","publisherId":"1746456","publisherName":"O","runCount":634,"viewCount":1482},{"description":"<p>A new puzzle is available each day.</p><p>Made purely for fun and doesn't aim to 100% replicate the original Wordle.&nbsp;</p><p><br></p><p>It was created for learning purposes – the original creator(s) of Wordle own all applicable rights to the game itself.</p><p><br></p><p><br></p><p><br></p>","id":"1074881127727596946","installCount":240,"lastUpdateDate":"2022-02-14T16:33:03.722Z","likeCount":5,"name":"FigWordle","publisherHandle":"janisrozenfelds","publisherId":"1922423","publisherName":"Janis Rozenfelds","runCount":310,"viewCount":311},{"description":"<p>Generate lines with different parameters. The result will appear in auto-layout automatically. This allow you to make cool visual effects and patterns.</p>","id":"1075369275427526575","installCount":1085,"lastUpdateDate":"2022-02-24T04:19:02.093Z","likeCount":11,"name":"Pattern Line Generator","publisherHandle":"Tcvetkov","publisherId":"183477","publisherName":"Max Tcvetkov","runCount":1665,"viewCount":3523},{"description":"<h2>Typography using the San Francisco font family and the PingFang font family</h2><p><br></p><p>专为模拟 Apple 设备下中英文混排效果而生，一键修改混排文本中的中英字体与 Tracking。默认设置下，中文字符会被设置为 PingFang SC，英文字体会根据字号设置为 SF Pro Display / Text。可以修改设置选择其它 SF Pro 和 PingFang 家族的字体。</p><p><br></p><p>可为不同的文档保存独立的设置。</p><p><br></p><p><span style=\"color: var(--color-text, #333333); background-color: var(--color-bg, transparent);\">可直接选中一个群组或 Frame 运行本插件，会自动修改其中的所有文本图层。</span></p><p><br></p><p>可以设置是否自动调整 SF Pro 字体的 tracking。</p><p><br></p><p><br></p><p>Set SF Pro Families and PingFang Families to text layer in selected layers.</p><p><br></p><p>With default settings, the plugin will automatically select the SF Pro Display or Text font for latin characters base on the font size, and adjust the correct tracking at the same time. You can choose other font families in plugin settings. Each file has its own settings. Just select a group or frame to run this plugin, and all text layers in it will be modified automatically. You can choose whether to enable auto-adjust the SF Pro font tracking.</p><p><br></p><p>------------------------------------------</p><p>Todo:</p><ul><li>Support custom fonts</li></ul>","id":"1075381102487873475","installCount":650,"lastUpdateDate":"2022-02-15T12:03:08.584Z","likeCount":6,"name":"SF with PingFang","publisherHandle":"tankxu","publisherId":"61240","publisherName":"Tank","runCount":861,"viewCount":1003},{"description":"<p>Select any layer and let it float on the canvas.</p><p><br></p><p>You don't have to look around for information that needs to be pinned to the top when you're designing with Figma and Figjam.</p><p><br></p><p><strong>Tips:</strong></p><ul><li><strong>Drag the lower right corner</strong> of the window to resize the window.</li><li><strong>Double-click the lower right corner</strong> of the window to automatically resize the window to match the content.</li><li>The floating window is forced to close while other plugins are running, just <strong>use the \"Previous\" command</strong> to quickly restore it.</li><li>The selected layer will be exported as an @2x image and placed in the floating window, you can drag it back into the canvas. Even more useful, <strong>you can also drag it into any chat tool or browser.</strong></li></ul>","id":"1075424703504231427","installCount":100,"lastUpdateDate":"2022-02-16T14:15:53.764Z","likeCount":2,"name":"Floating","publisherHandle":"tankxu","publisherId":"61240","publisherName":"Tank","runCount":139,"viewCount":517},{"description":"<h2><strong>↪️ Text Reverse ↩️</strong></h2><p><br></p><p><strong>💡 The Simplest Figma plugin to flip text to fix RTL\\LTR problems.</strong></p><p><br></p><p><strong> ℹ️ Usage:</strong></p><ul><li>Select a text element to flip its entire content.</li><li>Selecting a specific part of the text will cause the flip operation only to the selected characters.</li></ul><p><br></p><p><a href=\"https://github.com/zivkaplan/text-reverse-figma-plugin\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Source on Github</a></p>","id":"1075481323314449492","installCount":374,"lastUpdateDate":"2022-03-18T11:18:25.567Z","likeCount":3,"name":"text-reverse","publisherHandle":"zivkap","publisherId":"1074364314633677443","publisherName":"Ziv Kaplan","runCount":396,"viewCount":437},{"description":"<p>Quickly import palettes from <a href=\"https://colorhunt.co/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Color Hunt</a>. Make color squares and make your color styles in one click.</p><p><br></p><p><em>This plugin is open source. Find the repository here: </em><a href=\"https://github.com/arthur-fontaine/colorhunt-for-figma\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\"><em>https://github.com/arthur-fontaine/colorhunt-for-figma</em></a>.</p>","id":"1075555223065407638","installCount":1701,"lastUpdateDate":"2022-02-15T23:20:59.912Z","likeCount":9,"name":"Color Hunt","publisherHandle":"arthurfontaine","publisherId":"850006305115090378","publisherName":"Arthur Fontaine","runCount":2189,"viewCount":1702},{"description":"<p>Icons for Ant Design UI, one of the most popular component libraries for React.</p><p><br></p><p>Roadmap:</p><p>• drag / drop to the canvas from plugin UI</p><p><br></p><p>Done:</p><p>• icon names in the frames</p><p>• search for icons</p><p><br></p><p>https://ant.design/components/icon/</p>","id":"1075720637183099189","installCount":11749,"lastUpdateDate":"2022-06-09T09:25:53.324Z","likeCount":66,"name":"Ant Icons","publisherHandle":"kontek","publisherId":"1374920","publisherName":"Pawel Kontek","runCount":18943,"viewCount":12641},{"description":"<p>Turn your <a href=\"https://storybook.js.org/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">storybook</a> or <a href=\"https://backlight.dev/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">backlight</a> stories into a Figma UI Kit.</p><p><a href=\"https://story.to.design\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Learn more</a></p>","id":"1075741140914731351","installCount":674,"lastUpdateDate":"2022-07-20T19:56:51.174Z","likeCount":41,"name":"story.to.design","publisherHandle":"backlight_dev","publisherId":"1020250912352883594","publisherName":"Backlight","runCount":818,"viewCount":2127},{"description":"<p>Add Microsoft fluent 3d emojis seamlessly onto your designs.</p><p><br></p><p>Simply select or search the emoji you want and Fluent 3D Emoji will add the png of the selected emoji.</p><p><br></p><p>3D emoji data are taken from (<a href=\"https://github.com/JustJordanT/Windows_11_Emjois\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://github.com/JustJordanT/Windows_11_Emjois</a>).</p><p><br></p><p>If you have any issues or suggetions, hit me up on <a href=\"https://twitter.com/sonnylazuardi\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">twitter</a></p><p><br></p>","id":"1076160789212134225","installCount":5440,"lastUpdateDate":"2022-02-18T14:16:41.744Z","likeCount":57,"name":"Unofficial Microsoft Fluent 3D Emoji","publisherHandle":"sonny","publisherId":"123","publisherName":"Sonny Lazuardi","runCount":6940,"viewCount":6215},{"description":"<p>Ever want a few more options for the size of text in FigJam?  Well then you are in luck, Font Scaler lets you scale your text nodes up or down in FigJam with ease. Scale away!</p>","id":"1076503497810827428","installCount":954,"lastUpdateDate":"2022-02-18T14:02:04.522Z","likeCount":11,"name":"Font Scaler","publisherHandle":"jhardy","publisherId":"194293","publisherName":"Jared","runCount":1156,"viewCount":1437},{"description":"<p>Create &amp; manage your team's webhooks.</p><p><br></p><p>E.g. have file updates notify you in Slack by triggering your workflows or send updates to custom endpoints.</p><p><br></p><p>(Note: to create a webhook for your team, the team needs be on a professional plan in Figma.)</p><p><br></p><p>You can...</p><ul><li>create webhooks for teams</li><li>view a list of webhooks for your teams</li><li>remove webhooks</li><li>view past (restricted to one week) calls made to the webhook from Figma.</li></ul><p><br></p><p>Requirements</p><ul><li>To manage a team's webhooks you need to be at least an administrator for that team &amp; that team needs to be on a professional plan.</li><li>You need to have a \"Personal Access Token\" (within Figma go to your <strong>avatar </strong>-&gt; <strong>settings</strong>)</li><li>The team ID of the team for which to manage webhooks (currently only accessible from the browser version)</li></ul><p><br></p><p>Notes</p><ul><li>This plugin will receive more features/updates.</li><li>Webhooks are currently in Beta.</li><li>I'm not a designer myself. So pardon me for the horrible cover art/icon 😅</li></ul><p><br></p><p>Having feedback or questions? Just let me know 🙂</p><p><br></p><p>==FAQ==</p><p><br></p><p>Where do i find my Team ID's?</p><ol><li>Open your browser and navigate to Figma.</li><li>On the left side select the team (click on it's name; don't select a project)</li><li>In the browser's URL bar you can find the Team ID. It is right behind \"...team/\". E.g. https://www.figma.com/files/team/1234567890/xxx?fuid=8934... =&gt; Team ID is 1234567890</li></ol><p><br></p><p>I can't create webhooks. What to do?</p><ul><li>Please check if your team is on a professional plan.</li></ul><p><br></p><p>How can i check if my team has a Pro plan?</p><ol><li>In Figma select click on your team name (not on one of it's projects).</li><li>If the \"Billing\" tab appears near \"Settings\" you can check that or check \"Settings\" -&gt; \"Plan and billing\"</li></ol>","id":"1076646487870018865","installCount":75,"lastUpdateDate":"2022-06-02T18:13:45.873Z","likeCount":6,"name":"Webhook Configurator","publisherHandle":"cubbio","publisherId":"944671441924621055","publisherName":"Julian Pfeil","runCount":146,"viewCount":861},{"description":"<p>Let Destroyer recursively detach instances, remove auto layouts and detach styles within your current selection so you can iterate faster!</p><p><br></p><p>When working collaboratively and you quickly want to try an idea out it's always a hassle to detach the component and remove auto layouts.</p><p><br></p><h2>Choose what you want to destroy:</h2><p><br></p><ul><li>Everything - Instances, Auto Layouts and Styles</li><li>Instances only</li><li>Auto Layouts only</li><li>Styles only</li></ul><p><br></p><h2>How To Use</h2><p><br></p><ol><li>Select the elements you want to destroy</li><li>Choose what you want to destroy</li><li>Profit</li></ol>","id":"1076733710017310027","installCount":712,"lastUpdateDate":"2022-04-15T00:56:30.138Z","likeCount":22,"name":"Destroyer","publisherHandle":"kirkbentley","publisherId":"1069910633753426023","publisherName":"Kirk Bentley","runCount":809,"viewCount":989},{"description":"<h2>The ultimate resize plugin.</h2><p><strong>Copy</strong> / <strong>Paste</strong> sizes.</p><p><strong>Resize</strong> to parent with padding.</p><p><strong>Swap</strong> the width and height.</p><p><br></p><p>---</p><p><br></p><p>As flexible as Plastic</p>","id":"1076847809572299173","installCount":99,"lastUpdateDate":"2022-04-22T14:21:16.779Z","likeCount":2,"name":"Plastic","publisherHandle":"plasticbarista","publisherId":"4016431","publisherName":"Saad","runCount":129,"viewCount":393},{"description":"<p>This Plugin converts Figma frames to <strong>HTML &amp; CSS</strong>, <strong>React</strong> or <strong>Tailwind</strong>. Works best with Auto layout and/or constraints. Color styles, text styles and effect styles are transferred as css variables. The css classes are named like they are in figma.</p><p><br></p><p>Select a frame and run the plugin!</p><p><br></p><p><strong>Tipp:</strong> Avoid using groups and keep the layers as simple as possible to get the most out of this plugin.</p><p><br></p><p><strong>Note: </strong>Images are currently not exported. It's meant to be used by developers as a starting point for components.</p>","id":"1077172952654000760","installCount":266,"lastUpdateDate":"2022-06-25T09:06:06.314Z","likeCount":12,"name":"AutoHTML","publisherHandle":"thomasdeser","publisherId":"1020668649984950115","publisherName":"Thomas Deser","runCount":413,"viewCount":745},{"description":"<p>Import HEX colors fast.</p><p>Colors are automatically added to a frame for easy organising.</p>","id":"1077511889953232802","installCount":77,"lastUpdateDate":"2022-02-24T14:57:54.935Z","likeCount":0,"name":"Hexpal","publisherHandle":"aeriform","publisherId":"980820691261583748","publisherName":"Aeriform","runCount":123,"viewCount":307},{"description":"<p>Supercharge your frontend development by creating React components from your design.</p><p><br></p><h2>What is uipkg?</h2><p><a href=\"https://uipkg.com\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">uipkg</a>&nbsp;helps reduce friction between designers and devs while delivering top-notch user experiences to your end-users. With uipkg, you can export your Figma design to React components and use them in your project in seconds.</p><p><br></p><p><strong>✨ Pixel perfect components</strong></p><p>Your components will look and feel exactly like they do in Figma</p><p><br></p><p><strong>👌 Dynamic content and interactions</strong></p><p>Add content variables and event handlers to your components</p><p><br></p><p><strong>📦 Packaged up and ready to go</strong></p><p>Install published components straight from your terminal via NPM or Yarn</p><p><br></p><p><strong>🏷 Automatic version control</strong></p><p>Keep your components in sync with the design without breaking your code</p><p><br></p><p><strong>💪 First class TypeScript support</strong></p><p>Always know which props are available and which are required</p><p><br></p><p><strong>⚛️ Works with your framework</strong></p><p>Whether you are using Next.js, Remix, Gatsby, or any other, it’s ready to use</p><p><br></p><p><a href=\"https://uipkg.com\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">🔗 Learn more about uipkg</a></p>","id":"1077518101542528942","installCount":217,"lastUpdateDate":"2022-06-10T09:50:00.692Z","likeCount":11,"name":"uipkg - Export design to React components","publisherHandle":"martynas","publisherId":"844621426245328311","publisherName":"Martynas Kadiša","runCount":354,"viewCount":650},{"description":"<p>Plugin for Figma which helps to create attractive animations for your product.</p><p><br></p><p>You will get access to plugin's library with preconfigured settings which we continuously update.</p><p><br></p><p><a href=\"https://davv.store/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://davv.store/</a></p><p><br></p><p><a href=\"https://www.instagram.com/davv_svgmotion/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://www.instagram.com/davv_svgmotion/</a></p>","id":"1077659774432109711","installCount":11306,"lastUpdateDate":"2022-06-23T14:20:53.780Z","likeCount":290,"name":"SVG motion","publisherHandle":"davv","publisherId":"615600","publisherName":"Vladislav","runCount":14104,"viewCount":14576},{"description":"<p>Scale layers with Quick Actions Search Bar (⌘+/)</p><p><br></p><p><strong>With Scale Command you can do these:</strong></p><ol><li><strong>The fastest way to scale images to 50%</strong>, trigger this plugin with custom shortcut and press \"<strong>Enter</strong>\", done!</li><li>Just<strong> input 24w or 75</strong>, you can quickly and accurately scale images to 24 pixels width or 75% overall.</li><li><strong>Scale images from any origin point </strong>you want.</li></ol><p><br></p><p><strong>How to use</strong></p><ol><li>Install this plugin and select one or more layers in Figma/Figjam.</li><li>Open quick actions search bar (follow <a href=\"https://help.figma.com/hc/en-us/articles/360040328653-Use-shortcuts-and-quick-actions\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">this article</a>).</li><li>Input <code><strong>scc</strong></code> in the search bar, you will see the <code>Scale Command&gt; ⊡ Center</code> command and other commands in the suggestions list.</li><li>Select the origin point you want to use from the suggested list, or continue typing the keyword you need, eg <code><strong>scctl</strong></code> will display the <code>Scale Command&gt; ╒ Top Left</code> command, press \"<strong>Enter</strong>\" or \"<strong>Tab</strong>\" to use the command.</li><li>In the scale parameter input box, you can enter a width, a height, a percentage or a multiple, then press \"<strong>Enter</strong>\" to scale.</li></ol><p><br></p><p><strong>Scaling Syntax</strong></p><ul><li>Scale to specified width: <strong>w</strong> + <em>width number (or + w suffix)</em>. eg w24, w512, 24w, 512w</li><li>Scale to specified height: <strong>h</strong> + <em>height number (or + h suffix)</em>. eg h24, h512, 24h, 512h</li><li>Scale by percentage: <em>percentage figures</em>. eg 200 (equals 200%) , 75(equals 75%)</li><li>Scale by multiple: <em>multiple number</em> + <strong>x</strong>. eg 2x, 0.75x</li></ul><p><br></p><p><strong>Tips</strong></p><ol><li>Set a shortcut for <code>Plugins-&gt;Scale Command-&gt;⊡ Center</code> command, recommended use <strong>Command + Shift + S</strong></li><li>After input any number, you can use the arrow keys to select suggested values.</li></ol><p><br></p><p><br></p><p><strong>Origin points in plugin command</strong></p><p>If you want to set a shortcut to a command, you can copy the command name below.</p><pre class=\"ql-syntax\" spellcheck=\"false\">⊡ Center\n╒ Top Left\n╤ Top Middle\n╕ Top Right\n╞ Middle Left\n╡ Middle Right\n╘ Bottom Left\n╧ Bottom Middle\n╝ Bottom Right\n</pre>","id":"1077908283855454626","installCount":195,"lastUpdateDate":"2022-03-15T09:59:17.877Z","likeCount":3,"name":"Scale Command","publisherHandle":"tankxu","publisherId":"61240","publisherName":"Tank","runCount":234,"viewCount":508},{"description":"<p>Compare snapshots of Figma objects to visually compare later as those objects change.</p><p><br></p><p>This Figma plug enables you to add and manage snapshots per Figma page using the Visual Difference dialog. Per comparison, you can:</p><p><br></p><ul><li>Compare baseline and latest versions side by side</li><li>Quickly switch between the comparison and the original artwork to adjust</li><li>Quickly visualize which snapshots have differences and which do not</li><li>Identify when the snapshot was taken and the last time comparisons were run</li><li>Highlight differences by a scalably transparent overlay or fun party mode</li><li>Approve of detected differences to replace a baseline snapshot</li></ul><p><br></p><p>Building upon how Figma enables you to compare visual differences in a branch of the main file, you can use this plugin to:</p><p><br></p><ul><li>Conduct visual regression prior to or independent of Figma branching</li><li>Run comparisons for single objects independently</li><li>Detect differences caused by updating library assets</li><li>Inspect and adjust objects rapidly while comparing</li><li>Discover subtle differences in page mockups</li></ul><p><br></p><p>Made by <a href=\"https://twitter.com/kevinmpowell\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">@kevinmpowell</a> and <a href=\"https://twitter.com/nathanacurtis\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">@nathanacurtis</a> of <a href=\"https://www.eightshapes.com/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">EightShapes LLC</a>.</p>","id":"1077953882260191737","installCount":495,"lastUpdateDate":"2022-02-22T14:07:01.532Z","likeCount":57,"name":"Visual Difference","publisherHandle":"eightshapes","publisherId":"1077949610829936081","publisherName":"EightShapes Figma Plugins","runCount":564,"viewCount":2519},{"description":"<p>Sometimes you just want to quickly change radius on multiple selection, wouldn’t be that rad? 😎</p><p><br></p><p>Now you can! Select any layer(s) that contain radius, and change it to your liking (including children layers).</p><p><br></p><h2>How to use</h2><ol><li>Select layer(s) that contain radius value</li><li>Open quick actions panel</li><li>Look for “Rad Dude” and hit Tab</li><li>Type in your desired radius value or select from the list, hit enter</li><li>That’s rad, dude! 🏄‍♂️</li></ol><p><br></p><h2>Credits</h2><p>Massive thanks to Gustavo and <a href=\"https://github.com/lukebrobbs\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">lukebrobbs</a> for making it happen!</p><p><br></p><h2>Contributions</h2><p>This project is open sourced on <a href=\"https://github.com/peterstnsz/rad-dude\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">GitHub ↗︎</a>, contributions are welcome!</p>","id":"1077975285276991020","installCount":38,"lastUpdateDate":"2022-05-12T10:55:31.180Z","likeCount":2,"name":"Rad Dude","publisherHandle":"petertruepill","publisherId":"981621145895694172","publisherName":"Peter Staniszewski","runCount":50,"viewCount":203},{"description":"<p><strong>Apply a smooth, beautiful glow to your elements.</strong></p><p><br></p><p>Adds a smooth glow which mimics the falloff&nbsp;of a physical light source. The glow effect is achieved by layering and easing multiple drop shadow layer effects. </p><p><br></p><p><strong>Settings</strong></p><p>By default, the plugin just adds a glow effect and ignores the current fill layer. if the <code>Match Fill color</code> option is set, the plugin will try to match the fill color to the current glow by ramping up the brightness – this will result in a more skeuomorphic glow because it 'illuminates' the object. The option can be toggled via the menu [···] or by doubl-clicking the light bulb.&nbsp;</p><p><br></p><p>The project is MIT licensed and open sourced on GitHub: <a href=\"https://github.com/alexwidua/figma-glow\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Source</a></p>","id":"1078011857203492445","installCount":5314,"lastUpdateDate":"2022-03-02T09:37:54.652Z","likeCount":75,"name":"Glow","publisherHandle":"aw","publisherId":"3641231","publisherName":"Alex Widua","runCount":6888,"viewCount":5886},{"description":"<p>⭐️️ Help you generate sys tokens for all themes, based on the token links from a full theme.</p><ul><li>ref color example: [themeName]/ref/blue-50</li><li>sys color example: [themeName]/sys/primary</li></ul><p><br></p><p>👋🏻️ Steps to use this plugin:</p><ol><li>Create a full theme (ref &amp; sys) in color style, make sure the folder dir matching the structure above.</li><li>Create other theme's ref color palette.</li><li>Choose the full theme as the basic theme, the plugin will automatically get token links.</li><li>Click 'generate' to generate sys tokens based on the token links for all themes.</li></ol><p><br></p><p>✨️ Tips:</p><ol><li>'generate' will skip theme which already have sys folder, so you don't have to create empty sys folder.</li></ol><p><br></p><p>📣️ New Feature:</p><ul><li>Importing color styles from external palette(eg. <a href=\"https://colors.eva.design/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">eva color palette</a>) via JSON file.</li></ul>","id":"1078279010891577195","installCount":320,"lastUpdateDate":"2022-03-25T06:35:34.945Z","likeCount":7,"name":"theme color token","publisherHandle":"biasia","publisherId":"104714","publisherName":"BIAsia","runCount":463,"viewCount":1866},{"description":"<p>Make a checked state for any component or variant set.</p><p><br></p><p>🎶 from the creators of <a href=\"https://www.figma.com/community/plugin/1057776086489705418/Make-Hover-State\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Make Hover State</a> 🎶, the mad scientists at Shift Lab. Want to work with us? <a href=\"http://By the mad scientists at Shift Lab. Want to work with us? Visit https://shiftlab.co/careers\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">We're hiring!</a></p><p><br></p><p><br></p><h2>Get Started</h2><ol><li>Select one or more components and/or variant sets</li><li>Run the plugin</li><li>Style your new checked state variants!</li></ol><p><br></p><p>This will generate a clone of the existing component (or each variant in a component set), create a variant property group called Checked with True and False values, and connect the new variant and the original with a set of click interaction triggers, creating a toggle interaction.</p><p><br></p><h2>Limitations</h2><p>There is currently a limitation with variant sets, where the plugin doesn't work if there is already a property group with the word \"check\" in it. This is built in so that in future the plugin can support intelligently completing half-built variant sets, but it seems like it would be very prone to edge cases so I'm not sure if I'll ever support it. For now, use the plugin on either sole components or variant sets without checked states defined.</p>","id":"1078795246085198192","installCount":369,"lastUpdateDate":"2022-02-24T22:33:24.835Z","likeCount":1,"name":"Make Checked State","publisherHandle":"frankjohnson","publisherId":"1062064","publisherName":"Frank Johnson","runCount":575,"viewCount":785},{"description":"<p>Quickly rasterize a high-res (4x) copy of a Figma group, frame, component, or node without getting rid of the source.</p><p><br></p><p><strong>Additional Features:</strong></p><ul><li>Image scale mode parameter support (optional)</li><li>Ability to quickly relaunch the plugin to re-rasterize a copy of a Figma node</li></ul>","id":"1078810141981500791","installCount":220,"lastUpdateDate":"2022-03-11T03:05:26.503Z","likeCount":4,"name":"Copy & Rasterize (High-Res)","publisherHandle":"samuelcuster","publisherId":"958318","publisherName":"Samuel Custer","runCount":293,"viewCount":345},{"description":"<p><strong><em>Edit all the text layers in your selection in one place.</em></strong></p><p><em>选中一次，编辑所有文字。</em></p><p><br></p><p><strong><em>Now even in dark mode of Figma.</em></strong></p><p>现已支持 Figma 暗色模式。</p><p><br></p><h2>Intro</h2><p>Text Dash will show all the text layers inside as you select any layers, and you can edit them quickly, saving you from keeping clicking layers to edit tons of text layers.</p><p><br></p><h2>介绍</h2><p>在选中图层的时候，Text Dash 会显示出内部所有的文本图层的文字内容。在 Text Dash 内部编辑文本时，改动会实时同步到文本图层当中。</p><p><br></p><h2>How to Use</h2><ol><li>open the Text Dash</li><li>select any layers, including groups, frames, components, text layers, etc</li><li>edit them as you see</li></ol><p><br></p><h2>如何使用</h2><ol><li>打开 Text Dash 插件</li><li>选中图层（包括 group 和 frame 等，也支持图层多选）</li><li>修改 Text Dash 中展示的文本，改动会实时同步到文本图层中</li></ol><p><br></p><h2>Roadmap</h2><ol><li><s>Sort inputs according to geometry position. </s>✅</li><li>Find and Replace (tell me if you want it).</li><li>Add prefix or suffix in once.</li></ol><p><br></p><h2>路线图</h2><ol><li><s> 根据图层位置排布输入框顺序</s>✅</li><li>查找替换功能</li><li>批量增加前缀后缀功能</li></ol><p><br></p><h2>Contact</h2><p>📬 Mail: <a href=\"mailto:tanshow@zju.edu.cn\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">tanshow@zju.edu.cn</a></p><p><br></p><p><br></p><p><br></p><p><br></p><p><strong></strong></p>","id":"1079106521296038553","installCount":326,"lastUpdateDate":"2022-05-27T17:01:49.049Z","likeCount":6,"name":"Text Dash","publisherHandle":"changtanshow","publisherId":"310496","publisherName":"Chang Tanshow","runCount":388,"viewCount":1060},{"description":"<p><strong>Create highly responsive layouts of your frames</strong></p><p>Its free and works with no plugin open!</p><p><br></p><ol><li>Name frames as you want them to appear on i.e 0, 600, 1000 for mobile, tablet and desktop respectively.</li><li>Select all the frames and run the plugin (No UI, no further settings)</li></ol><p><br></p><p>Duplicate the test file and try it yourself:</p><p><a href=\"https://www.figma.com/file/dc2jYMyqATFiX6vy0uUpig/Responsively---Test-file\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://www.figma.com/file/dc2jYMyqATFiX6vy0uUpig/Responsively---Test-file</a></p>","id":"1079288264185622297","installCount":2125,"lastUpdateDate":"2022-02-26T06:29:11.564Z","likeCount":61,"name":"Responsively","publisherHandle":"tabishrafiq","publisherId":"1232170","publisherName":"Tabish Rafiq","runCount":2866,"viewCount":3769},{"description":"<p>Custom, simple and quick generator for randomised line-charts.</p>","id":"1079458776763299768","installCount":1225,"lastUpdateDate":"2022-03-17T14:30:32.931Z","likeCount":13,"name":"Random Linechart","publisherHandle":"gvnmagni","publisherId":"92094","publisherName":"Giovanni Magni","runCount":1549,"viewCount":2871},{"description":"<p>Convert Figma designs to ReactJS source code with high quality, responsive <strong>React</strong>, <strong>ReactJS</strong>, <strong>JSX</strong> with <strong>React Router</strong>,<strong> React Hooks</strong> and <strong>Airtable integration</strong> with dynamic visualization of data.</p><p><br></p><p>You can take this sample template as a reference in order to enhance the accuracy of the ReactJS code which was generated from your Figma Files</p><p><a href=\"https://www.figma.com/community/file/1104105411031025831\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://www.figma.com/community/file/1104105411031025831</a></p><p>Here is the source code generated by <strong>FigAct</strong> using the above sample template:</p><p><a href=\"https://github.com/nguyentathung943/figact-generated-sample-template-react-code\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://github.com/nguyentathung943/figact-generated-sample-template-react-code</a></p><p><br></p><h2>How does FigAct work?</h2><ol><li>Install the plugin</li><li>Fill in the credentials as required</li><li><strong>FigAct</strong> will generate the full project of all the frames under the ReactJS folder structure and put them in a zip file</li><li>Download the generated zip file and extract it into a folder</li><li>Open your system command line and hit <code><strong>npm install</strong></code> and <code><strong>npm run start</strong></code> to view your project with all frames generated with ReactJS (please make sure that you already have <a href=\"https://nodejs.org/en/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Node.js</a> installed in your local machine)</li></ol><p><br></p><h2>Why FigAct?</h2><ul><li>Turn your design into high quality and responsive ReactJS with navigation and button event within one click with the accuracy rate from <strong>80% </strong>to <strong>90%</strong></li><li>Quickly turn design components into real site components with every pixel is accurately positioned according to the original designs</li><li><a href=\"https://figact.ml/about#demo-special-features\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\"><strong>React Router</strong></a><strong> </strong>for frame navigations, you can use <strong>interactions</strong> (navigate to) from Figma to switch amongst pages in your source code as you perform on Figma</li><li><strong>React Hooks </strong>for state management is supported. We use state for <a href=\"https://figact.ml/about#rules\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">special components</a></li><li>Automated asset management with images are downloaded and imported automatically in the project zip file</li><li>Support <strong>SOLID</strong> and <strong>LINEAR_GRADIENT</strong> fill on Figma for every component</li><li>Fonts are imported automatically from <a href=\"https://fonts.google.com/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\"><strong>Google Fonts</strong></a></li></ul><p><br></p><h2>Airtable integration with dynamic visualization of data</h2><ul><li>You can visualize your data under list and carousel format easily and dynamically with data fetched from <a href=\"https://airtable.com/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Airtable</a></li><li>FigAct generates the function in your source code to get the data from <a href=\"https://airtable.com/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Airtable</a> bases on credentials you provided and displays it dynamically if the data is changed from your table on <a href=\"https://airtable.com/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Airtable</a></li><li>Click <a href=\"https://figact.ml/about#airtable-integration\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">here</a> to read more and follow some rules to make it work</li></ul><p><br></p><h2>Limitations</h2><p>FigAct can turn your Figma designs into ReactJS source code within few seconds per frame which helps you to save tons of effort to do so. However, to make the source code to be generated accurately, there are only few things that you have to comply with. Click <a href=\"https://figact.ml/about\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">here</a> to read some rules.</p><p><br></p><p><strong>A few known limitations:</strong></p><ul><li>Not all element types are supported (e.g. pseudoelements, ..)</li><li>Not all CSS properties are supported or fully supported</li><li>Only support <code>onClick</code> action for page navigation</li><li>Types of media (audio, video,...) are not supported</li><li>Only support <strong>SOLID</strong> and <strong>LINEAR_GRADIENT</strong> color type</li><li>Images sometimes cannot be downloaded from your figma files</li><li>The size of your frame will be automatically set to <strong>1440px</strong> according to the designs standard</li></ul><p><br></p><h2>Our website</h2><p>Visit our website for demos and documentation: <a href=\"https://figact.ml/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://figact.ml/</a></p><p><br></p><h2>Contact and more</h2><p>Thanks for downloading and using <a href=\"https://figact.ml/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">FigAct</a></p><p>This is our university thesis. If there is any issues or suggestions, please write down so we can listen.</p><p><br></p><p>Find us on LinkedIn</p><p><a href=\"http://www.linkedin.com/in/nguyentathung943\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">www.linkedin.com/in/nguyentathung943</a></p><p><a href=\"https://www.linkedin.com/in/nguyen-t-b55476124/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">www.linkedin.com/in/nguyen-t-b55476124/</a></p><p><br></p><p>Email: figact.hcmus@gmail.com</p><p><br></p><p>Ho Chi Minh City University of Science</p><p>Faculty of Information Technology&nbsp;</p><p>Department of Software Engineering</p>","id":"1079641487885770780","installCount":647,"lastUpdateDate":"2022-07-05T17:57:28.201Z","likeCount":21,"name":"FigAct  - Figma to React, React Hooks, React Router and dynamic data display from Airtable","publisherHandle":"figact","publisherId":"1079638002849455063","publisherName":"FigAct HCMUS","runCount":1208,"viewCount":2476},{"description":"<p>Meme generator for Figma and FigJam. Search for memes. Click to add them to your file.</p><p><br></p><p>Create memes and ponder the eternal question... Is This A Meme? 💁🏻🦋</p><p><br></p><h2>Open Source</h2><p>This plugin is <a href=\"https://github.com/aashreys/is-this-a-meme\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">open source</a> and contributions are welcome.</p>","id":"1079668442847380531","installCount":498,"lastUpdateDate":"2022-03-19T05:25:41.152Z","likeCount":17,"name":"Is This A Meme? 💁🏻🦋","publisherHandle":"aashreys","publisherId":"697643","publisherName":"Aashrey Sharma","runCount":547,"viewCount":562},{"description":"<p>Status Changer allows you to easily change the name of the person in charge and the modified date on your own Component set.</p><p><br></p><p><strong>HOW TO USE</strong></p><ol><li>Install `Status Changer` and run it inside of a project.</li><li>Edit the Component Set created for the Status bar.(Note whether the item has been added to Variants.)</li><li>Select the Frames, etc. to which you want to add a status bar and run Status Changer.</li><li>You can select your own customized component set values, and the status bar(s) will be added when you select and press the SET button.</li><li>After changing the status, click \"Change user name and modification time.\" from the plugin in the properties screen on the right.</li></ol><p><br></p><p><strong>About Dates and Dates</strong></p><p>Multiple country formats are supported, including American and British, Asian, etc.</p><p><br></p><p>Sample For January 2, 2022 at 11:03 p.m.</p><p><br></p><p>For the British \"DD/MM/YY H.mm a\" 02/01/22 11.03 pm</p><p>For the U.S. \"MM-DD-YY H:mm a\" 01-02-22 11:03 pm</p><p>For the Japan \"YYYY/MM/DD HH:mm\" 2022/01/02 23:03</p><p><a href=\"https://bu-kurokky.github.io/presentension/status_changer\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Click Here For More Info!&nbsp;</a></p><p><br></p><p><strong>Caution</strong></p><p>Be sure to place it directly below the page.</p><p>Do not rename the properties.</p><p><br></p><p>Status Changerは、自作のコンポーネントセットの担当者名や更新日時を簡単に変更することができます。</p><p><br></p><p><strong>使い方</strong></p><ol><li>StatusChangerをインストールして起動します。</li><li>ステータスバー用のコンポーネントセットのテンプレートができるので自由にカスタマイズします。</li><li>ステータスバーを適応したいFrameなどを選択して、StatusChangerを起動します。</li><li>自分でカスタマイズしたコンポーネントセットの値が選択できるので、選択してSETボタンを押すとステータスバーが追加されます。</li><li>ステータスを変更した後は、右側のプロパティ画面のプラグインから「Change user name and modification time.」をクリックします。</li></ol><p><br></p><p><strong>日時表記について</strong></p><p>Status Changerは各国や地域の表記に対応できるようになっています。</p><p><br></p><p>例として、「2022年1月2日の午後11時3分」の場合</p><p><br></p><p>日本方式であればコンポーネントのテンプレートに「YYYY/MM/DD HH:mm」と書くと「2022/01/02 23:03」と表示されるようになります。</p><p>アメリカ方式であればコンポーネントのテンプレートに「MM-DD-YY H:mm a」と書くと「01-02-22 11:03 pm」と表示されるようになります。</p><p>イギリス方式であればコンポーネントのテンプレートに「DD/MM/YY H:mm a」と書くと「02/01/22 11.03 pm」と表示されるようになります。</p><p><br></p><p>日付フォーマットについては<a href=\"https://bu-kurokky.github.io/presentension/status_changer\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">こちら</a>をご確認ください。</p><p><br></p><p><strong>注意事項</strong></p><ul><li>テンプレートとなるコンポーネントセットは必ずページの直下(ページの直下であればどのページでも可)に置いてください。</li><li>プロパティの名前を元に文字列を置換しているのでプロパティ名を変更しないでください。</li></ul>","id":"1080046874598231357","installCount":64,"lastUpdateDate":"2022-05-25T07:32:20.119Z","likeCount":2,"name":"Status Changer","publisherHandle":"kurokky","publisherId":"1040435397021460078","publisherName":"黒木シンタロー","runCount":101,"viewCount":430},{"description":"<p>アートボード内の選択中のテキストに対して、文章校正を行います。</p><p>一般的な文章のルールに沿って、主に以下のようなチェックを行います。</p><ul><li>ウェブの用語や名称の表記統一（Javascript → JavaScript、Gitghub → GitHub等）</li><li>「ですます」調と「である」調の混在</li><li>ら抜き言葉</li><li>二重否定</li><li>同じ助詞の連続使用</li><li>同じ接続詞の連続使用</li><li>逆接の接続助詞「が」の連続使用</li><li>全角と半角アルファベットの混在</li><li>弱い日本語表現の利用（〜かもしれない）</li><li>読点の数（1文に3つまで）</li><li>漢字の閉じ方、開き方（下さい → ください、出来る → できる等）</li></ul><p><br></p><p>Performs text editing on the currently selected Japanese text in the artboard.</p><p>Following the general rules of text, the following are the main checks to be performed.</p><ul><li>Unification of web terms and names (Javascript → JavaScript, Gitghub → GitHub, etc.)</li><li>Mixing of \"ですます\" and \"である\" styles</li><li>Words without \"ら\"</li><li>Double negation</li><li>Continuous use of the same particle</li><li>Continuous use of the same conjunction</li><li>Continuous use of the inverse conjunctive particle \"が\"</li><li>Mixing full-size and half-size alphabets</li><li>Use of weak Japanese expressions (\"〜かもしれない\")</li><li>Number of punctuation marks (no more than three per sentence)</li><li>Properly converting Kanji or Hiragana (\"下さい\" → \"ください\", \"出来る\" → \"できる\", etc.)</li></ul>","id":"1080056775478517066","installCount":406,"lastUpdateDate":"2022-03-04T07:58:22.775Z","likeCount":21,"name":"テキスト校正くん","publisherHandle":"ics_ikeda","publisherId":"138805","publisherName":"IKEDA Yasunobu","runCount":424,"viewCount":611},{"description":"<h2><strong>Deliver Icons at a greater speed!</strong></h2><p><br></p><p>Foundation: Icon Scaler is a plugin that helps you and your team to optimize the icon creation workflow.</p><p><br></p><p>Create your base icon and scale to the other desired sizes in one single click with rules defined by you.</p><p><br></p><p>Settings can be shared and imported so you don't have to create them manually every time you run the plugin for the first time.</p><p><br></p><h2>Features</h2><p>Main features:</p><ul><li>Component set generator</li><li>Flatten Icon Shapes</li><li>Crop Component Sets</li><li>Outline Stroke</li><li>Import and Export Settings</li><li>Bulk Icon creation</li><li>Lock layers and add background for better deep selection</li></ul><p><br></p><h2>Suggestions</h2><p>If you have any suggestions/features/profiles you want to be added please send me an email to:</p><p><a href=\"mailto:work@jorge-fernandes.com\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">work@jorge-fernandes.com</a></p>","id":"1080268938349341224","installCount":546,"lastUpdateDate":"2022-04-03T09:42:54.257Z","likeCount":23,"name":"Foundation: Icon Scaler","publisherHandle":"jorgefernandes","publisherId":"3124395","publisherName":"Jorge Fernandes","runCount":695,"viewCount":867},{"description":"<p>This project is for generate fake data figma plugin for component recognization, it can modify the nodes with random text/color/coordinate... easily. Feel free to add new fake function.</p><p><strong>💫Feature</strong></p><ol><li>Fake text: Randomly change the text of nodes.</li><li>Fake color: Randomly change the color of nodes.</li><li>Fake coordinate: Randomly change the coordinate(X/Y) of nodes. It include the collision detection.</li></ol><p><strong>🍒How to Use</strong></p><p>With only a few clicks, you can replace any place you want with random text/color!</p><p>1. open plugin</p><p>2. select nodes that you want to replace with random data</p><p>3. click Fake___</p><p>4. done!</p><p><strong>🌻Github Repository</strong></p><p><a href=\"https://github.com/clean99/figma-faker\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://github.com/clean99/figma-faker</a></p>","id":"1080340389690562137","installCount":133,"lastUpdateDate":"2022-03-03T08:14:26.775Z","likeCount":0,"name":"Figma Faker","publisherHandle":"clean99","publisherId":"1009396252796189309","publisherName":"Koh Hom","runCount":277,"viewCount":807},{"description":"<p>Brand Guardian is an AI driven platform that gives marketing, creative and production teams total content quality assurance at scale. This plugin connects Figma with Brand Guardian platform to enable a review process that will ensure the designs are on brand, inclusive and compliant.</p><p><br></p><p><strong>To use this plugin you need a Brand Guardian account. If you’re interested but don’t have one yet, please contact us at obg@wundermanthompson.com.</strong></p><p><br></p><p><strong>How does it work?</strong>&nbsp;</p><ol><li>Log into your Brand Guardian account.&nbsp;</li><li>Select part of the design you want to review.&nbsp;</li><li>Choose the Brand and Rule Collection for the design.&nbsp;</li><li>Submit the asset and wait for feedback.&nbsp;</li></ol><p><br></p><p><strong>Contact information</strong>&nbsp;</p><p>Email: <a href=\"mailto:obg@wundermanthompson.com\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">obg@wundermanthompson.com</a>&nbsp;</p><p>Website: <a href=\"https://www.wundermanthompson.com/brand-guardian\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://www.wundermanthompson.com/brand-guardian</a>&nbsp;</p>","id":"1080407304666464914","installCount":99,"lastUpdateDate":"2022-04-14T08:17:38.873Z","likeCount":4,"name":"Brand Guardian","publisherHandle":"wtt","publisherId":"1075402079964758955","publisherName":"Wunderman Thompson Technology","runCount":137,"viewCount":414},{"description":"<h2>Generator</h2><p><br></p><p>Generator is a lightweight plugin that generates designs for print based on a CSV file.&nbsp;</p><p><br></p><h2>How it Works</h2><p><br></p><p>Generator takes in the Layer names of both the Design Layer and the Text Layer.&nbsp;</p><p><br></p><p>It generates duplicates of the Design Layer, replacing the contents of the text layers having the same names as the variables given in the CSV data.</p><p><br></p><h2>Basic Usage</h2><p><br></p><p>&nbsp;1. Enter the name of the Layer to be replicated, along with that of the text layer containing the CSV Data.</p><p>&nbsp;2. Choose the variables to be replaced</p><p>&nbsp;3. Generate!</p><p><br></p><h2>Naming Conventions</h2><p><br></p><p><strong>For Layer Variables</strong></p><p>The layers to be modified should named in the format</p><p>'#VARIABLENAME'</p><p><br></p><p>ie. If the name of the CSV Header is 'NAME', the layers should be named in the format '#NAME'</p><p><br></p><p><strong>For Inline Variables</strong></p><p>The text content should contain the variable(s) in the format</p><p>'#{VARIABLENAME}'</p><p><br></p><p>ie. If the name of the CSV Header is 'NAME', the content of the text layer should contain a substring of the format '#{NAME}'</p><p>&nbsp;</p><h2>Got more ideas?</h2><p><br></p><p>Got any features you'd like to have us implement? Send them our way <a href=\"mailto:nauaneeth+plugin@gmail.com\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">here</a></p>","id":"1080463959503253221","installCount":136,"lastUpdateDate":"2022-03-13T16:12:34.646Z","likeCount":6,"name":"Generator","publisherHandle":"werb","publisherId":"1074340915527519212","publisherName":"werb.co","runCount":267,"viewCount":692},{"description":"<p>The plugin allows you to generate abstract sharp shapes on the edges of a 3D cube. Basically, you will generate an architecture template for sketching or graphic design. You can customize the length and number of vector shapes. The more vector shapes you create, the more interesting the result, but this can affect performance.</p>","id":"1080743078285712357","installCount":207,"lastUpdateDate":"2022-03-21T06:51:13.672Z","likeCount":2,"name":"Spatial Cube Artwork Generator","publisherHandle":"Tcvetkov","publisherId":"183477","publisherName":"Max Tcvetkov","runCount":292,"viewCount":1045},{"description":"<h2>Search sticky notes in FigJam.</h2><p>Just start typing in the search box! The sticky notes with the search keyword will be highlighted.</p>","id":"1080873483546704062","installCount":862,"lastUpdateDate":"2022-07-15T21:42:51.879Z","likeCount":20,"name":"Search Stickies","publisherHandle":"haley","publisherId":"574789","publisherName":"Haley 🌊","runCount":1036,"viewCount":1222},{"description":"<p>This plugin is to help designers quickly replace all selected text layers with the same rich text. Currently supported format: regular, bold, italic, underline, list and link. For not available font family, it will use \"Inter\" instead.</p><p><br></p><p><strong>How to use it</strong></p><ol><li>Select text layers you'd like to replace</li><li>Open the plugin \"Rich Text Replacer &gt; Start UI\"</li><li>Enter rich text in the textbox</li><li>(Optional) You can check \"Add Numbering Suffix\" if you'd like to add a number to each text</li><li>Click \"Replace\"</li><li>Done</li></ol><p><br></p><p><strong>If there is a text layer you'd like to copy rich text from:</strong></p><ol><li>Select a source text layer where you'd like to copy text</li><li>Run the plugin \"Rich Text Replacer &gt; Copy Rich Text\"</li><li>Select target text layers or frames with target text layers in it</li><li>Run the plugin \"Rich Text Replacer &gt; Paste to Text Layers\"</li><li>Done</li></ol><p><br></p><p><strong>Todo</strong></p><ul><li>Allow users to customize link style</li><li>Support more rich text format</li></ul>","id":"1080947393958718736","installCount":366,"lastUpdateDate":"2022-04-18T17:56:42.328Z","likeCount":6,"name":"Rich Text Replacer","publisherHandle":"zhenwang","publisherId":"93586","publisherName":"Zhen","runCount":685,"viewCount":1140},{"description":"<p>Deco 智能代码项目是京东凹凸实验室在「前端智能化」方向上的探索，其聚焦设计稿一键生成多端代码这一切入点，实现将 Sketch / Photoshop / Figma 等设计稿进行解析并直接生成多端代码（Taro / React / Vue）的能力。</p><p><br></p><p>更多信息，欢迎大家访问下面的链接进行了解：&nbsp;</p><p><a href=\"https://deco-preview.jd.com\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\"><strong>https://deco-preview.jd.com</strong></a></p>","id":"1081047724067575129","installCount":133,"lastUpdateDate":"2022-03-28T09:09:50.779Z","likeCount":4,"name":"Deco","publisherHandle":"Deco_JD","publisherId":"1083763369129822688","publisherName":"Deco","runCount":200,"viewCount":385},{"description":"<p>内部工具</p>","id":"1081144846589350373","installCount":88,"lastUpdateDate":"2022-04-07T05:56:33.908Z","likeCount":4,"name":"Nolibox Tool","publisherHandle":"li22","publisherId":"1006481340719375192","publisherName":"li","runCount":95,"viewCount":198},{"description":"<p>When you need a translation, do you still replace everything manually?</p><p>This plugin allow you to easily replace characters if you have a parallel translation list.</p><p><br></p><ol><li>Create a parallel translation list.(The text in the list has to be an exact match to the text in the design file.)</li><li>Upload the CSV file to the plug-in.</li><li>Press \"Start\" :)</li></ol><p><br></p><ul><li>We have confirmed that it works with comma-separated UTF-8 csv files. (Using Microsoft Excel is highly recommended.)</li><li>This plug-in is currently under development and improvements will be considered as needed.</li></ul>","id":"1081166920166066696","installCount":98,"lastUpdateDate":"2022-05-16T23:37:44.842Z","likeCount":2,"name":"word2word translate","publisherHandle":"Zooshima","publisherId":"311559","publisherName":"Zooshima","runCount":145,"viewCount":282},{"description":"<h2>Apply status indicators to your layers in a flash:</h2><p><br></p><ul><li>Work In Progress</li><li>Ready For Review</li><li>Requires Changes</li><li>Approved</li></ul><p><br></p><p>All statuses can be set using plugin parameters or the handy Status Panel.</p><p><br></p><p>Assign a shortcut like <code><strong>Ctrl + Option + S</strong></code> to quickly access the status panel.</p><p><br></p><h2>How To Use</h2><p><br></p><ol><li>Select the items you want to apply a status to.</li><li>Apply a status via the status panel or via plugin parameters</li><li>Profit</li></ol>","id":"1081181836422264345","installCount":189,"lastUpdateDate":"2022-03-13T00:45:51.795Z","likeCount":1,"name":"Quick Status","publisherHandle":"kirkbentley","publisherId":"1069910633753426023","publisherName":"Kirk Bentley","runCount":333,"viewCount":1093},{"description":"<p>Adds menu items for common auto layout commands so they can be assigned to keyboard shortcuts in your OS.</p>","id":"1081298003197000387","installCount":233,"lastUpdateDate":"2022-04-22T20:29:13.388Z","likeCount":10,"name":"Auto Layout Shortcuts","publisherHandle":"setphen","publisherId":"2756690","publisherName":"Stephen Lindberg","runCount":294,"viewCount":885},{"description":"<p>Translate to Arabic, and reverse the layout of the user interface from LTR to RTL.</p><p>Components and layers rotated are not supported yet. Please review the result before handing off.</p><p>Feel free to report bugs to zhilinzhang@bytedance.com</p>","id":"1081525609675954053","installCount":88,"lastUpdateDate":"2022-06-06T06:58:38.069Z","likeCount":6,"name":"Just RTL","publisherHandle":"tufook","publisherId":"105804","publisherName":"Tufook","runCount":146,"viewCount":166},{"description":"<p>Simple generator for customised random barcharts.</p>","id":"1081612471919725568","installCount":959,"lastUpdateDate":"2022-03-17T14:30:45.325Z","likeCount":8,"name":"Random Barchart","publisherHandle":"gvnmagni","publisherId":"92094","publisherName":"Giovanni Magni","runCount":1314,"viewCount":1631},{"description":"<p>Search, group, and copy your sticky notes in FigJam</p>","id":"1081740662255659109","installCount":403,"lastUpdateDate":"2022-03-05T00:57:22.749Z","likeCount":3,"name":"Sticky Lab","publisherHandle":"jhardy","publisherId":"194293","publisherName":"Jared","runCount":515,"viewCount":904},{"description":"<p>Generate shades and tints of any color in 2 easy steps.</p><p><br></p><p>Create up to 255 shades of your selected base color/s. That's right. Create shades of multiple selected colors all in 1 go!</p><p><br></p><p>No need to mess with hard to use UI's. Generate shades using just 2 commands.</p><p><br></p><p><strong>Required:</strong></p><ul><li>An element (Shape), with 1 Solid fill.</li></ul><p><br></p><p><strong>How to Use:</strong></p><ol><li>Select any number of elements with '<strong>Solid</strong>' Fill.</li><li>Go to Plugins &gt; Shader <strong>OR </strong>Click <code>Ctrl + /</code> (For Windows) or <code>⌃ + / </code>(For Mac)</li><li>Select '<strong>Lighten</strong>' or '<strong>Darken'</strong> from the dropdown.</li><li>Finally, enter the number of shades you want to generate and press <code>Enter</code></li></ol><p><br></p><p><strong>Notes:</strong></p><p>It will only generate shades and tints for elements that have a solid fill as their first fill. It will not work for gradients, images or elements with no fill. <strong>NO Shades will be created for such elements.</strong></p><p><br></p><p>Suggestions to improve the plugin are much appreciated. Enjoy! <a href=\"https://emojikeyboard.org/copy/Smiling_Face_with_Smiling_Eyes_Emoji_%F0%9F%98%8A?utm_source=extlink\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">😊</a></p>","id":"1081769622242809971","installCount":577,"lastUpdateDate":"2022-03-08T23:52:54.594Z","likeCount":3,"name":"Shader","publisherHandle":"karmitpatel","publisherId":"893157124498103904","publisherName":"Karmit Patel","runCount":811,"viewCount":1040},{"description":"<h2>What the plugin can do:</h2><ul><li>Create a directory of your scripts (sections).</li><li>Move quickly to the desired section.</li><li>Search by sections.</li><li>Number sections and frames automatically.</li><li>It is convenient to track dates, statuses of tasks and designers.</li></ul><p><br></p><h2>How the plugin works:</h2><ol><li>On first run, the plugin creates a component ❖ catalog.</li><li>You place instances (copies) of this component next to logical partitions, building a hierarchy, you have 3 types of headers H1, H2, H3 at your disposal.</li><li>Then you can name the sections, for this there is a special text field \"title\" inside the component.</li><li>Scan the page.</li><li>A directory will be generated.</li><li>Then you can number the entire directory.</li></ol>","id":"1081861986957999271","installCount":318,"lastUpdateDate":"2022-03-31T16:02:59.264Z","likeCount":23,"name":"Catalog","publisherHandle":"vladeliseev","publisherId":"1795235","publisherName":"Vlad Ganf","runCount":415,"viewCount":1561},{"description":"<p>Export your colors from Figma and import them directly into your Webflow projects with ease.</p><p><br></p><p>The Webflow Color Importer Plugin makes it easy to add your colors and resync them at any time. Simply install the Flowbase Chrome Extension and open our importer tool inside of webflow</p><p><br></p><p>Import them with our extension www.flowbase.co/extension</p><p><br></p><h2><strong>Features</strong></h2><p><br></p><ul><li>Export all your color swatches (including their name and unique IDs) in one click</li><li>Import them directly to your Webflow project using the Flowbase Chrome Extension</li><li>Re-sync changes and updates at any time</li></ul>","id":"1082106708644219253","installCount":560,"lastUpdateDate":"2022-03-06T01:22:41.625Z","likeCount":21,"name":"Webflow Color Importer","publisherHandle":"flowbase","publisherId":"569326","publisherName":"Flowbase","runCount":714,"viewCount":1296},{"description":"<h2>Auto Layout Presets:</h2><p><br></p><ul><li>Horizontal</li><li>Vertical</li><li>Stretch Horizontal</li><li>Stretch Vertical</li><li>Space Between Horizontal</li><li>Space Between Vertical</li><li>Toggle Direction</li></ul><p><br></p><p>All presets are available as plugin parameters and individual menu items so you can create shortcuts that suit you.</p><p><br></p><h2>Frame Alignment</h2><p><br></p><p>Change your frame alignment quick as a flash by assigning custom short cuts rather than using the standard Figma UI.</p><p><br></p><p>If you have a full size keyboard try assigning <code><strong>Cmd + Option</strong></code><em> </em>and the numbers on the numpad.</p><p><br></p><h2>Padding and Spacing Panel</h2><p><br></p><p>Try assigning a shortcut like <code>`<strong>Ctrl + Shift + A</strong>`</code> to quickly access frame padding and spacing options.</p><p><br></p><h2>How To Use Presets</h2><p><br></p><ol><li>Select the items you want to apply a preset to. If the items are not already in a frame, XAuto will create a parent frame for you.</li><li>Apply preset via the plugin parameters or menu</li><li>Profit</li></ol><p><br></p><h2>Playground</h2><p><br></p><p>After installing the XAuto plugin I highly recommend downloading the <a href=\"https://www.figma.com/community/file/1098461050799642172\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\"><strong>XAuto Playground community file</strong></a> and try it out.</p>","id":"1082201909715309983","installCount":187,"lastUpdateDate":"2022-05-15T10:29:10.458Z","likeCount":8,"name":"XAuto","publisherHandle":"kirkbentley","publisherId":"1069910633753426023","publisherName":"Kirk Bentley","runCount":242,"viewCount":701},{"description":"<p>Generate shades and tints of any color using an intuitive UI.</p><p><br></p><p>Gone are the days for guessing what shades of your base color might look like.<strong> Preview all generated shades in real-time.</strong></p><p><br></p><p>Create up to 255 shades of your selected base color.</p><p><br></p><p><strong>How to Use:</strong></p><ol><li>Go to Plugins &gt; Shader (UI) <strong>OR </strong>Click <code>Ctrl + /</code><strong> </strong>(For Windows) or <code>⌃ + / </code>(For Mac)</li><li>Select the color you want as your base color.</li><li>Select '<strong>Lighten' or 'Darken'</strong> from the dropdown.</li><li>Enter the number of shades you want to generate and click <strong>'Create'</strong>.</li></ol><p><br></p><p>Suggestions to improve the plugin are much appreciated. Enjoy! 😊</p>","id":"1082493982706923122","installCount":368,"lastUpdateDate":"2022-03-09T02:15:09.685Z","likeCount":3,"name":"Shader (UI)","publisherHandle":"karmitpatel","publisherId":"893157124498103904","publisherName":"Karmit Patel","runCount":515,"viewCount":1030},{"description":"<p>Quick cut 可以让你在 figma 中直接把切图或素材上传到您的图床，支持高性能的压缩。并且会自动将切图地址标注到你的设计稿旁。开发人员只需要点击复制链接即可快速使用切图。这将节省你们80%以上的时间。</p><p><br></p><p>使用前：</p><p>如果你是设计师，那么请让你的开发人员抽出 10 分钟协助你完成以下部署配置操作，图床接口需要由开发人员提供，配置后你可以在 Quick cut 中直接上传到你们自己的图床或空间。</p><p><a href=\"https://github.com/Tommy0121/quick-backend-example\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://github.com/Tommy0121/quick-backend-example</a></p><p><br></p><p><br></p><p>使用提示：</p><p>1，选择一个切图图层或图层组，点击 [一键切传] 即可，切图地址将标注到图层右侧。</p><p>2，开发人员选中标注后，可在右侧 [inspect（检查）] 栏中复制到切图地址。</p><p>3，请尽量把切图集中在一个画板中，这样方便多选上传，和展示标注。不支持 [Auto layout （自动布局）]</p><p>4，本插件不会记录你上传的切图信息。</p><p><br></p><p>Powered by DUX</p><p>----------------------------</p><p>Quick cut allows you to upload slice or clips directly to your image hosting in figma, and supports high-performance compression. And it will automatically mark the slice address next to your design draft. Developers only need to click the copy link to quickly use the slice. This will save you more than 80% of your time.</p><p>Before use:</p><p>If you are a designer, please ask your developer to take 10 minutes to assist you in completing the following deployment and configuration operations. The image hosting api needs to be provided by the developer. After configuration, you can directly upload it to your own image hosting or server.</p><p><a href=\"https://github.com/Tommy0121/quick-backend-example\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://github.com/Tommy0121/quick-backend-example</a></p><p><br></p><p><br></p><p>Use suggestions:&nbsp;</p><p>1. Select a layer or layer group, click [一键切传], and the slice address will be marked on the right side of the layer.</p><p>2. After the developer selects the annotation, it can be copied to the slice address in the [inspect（检查）] column on the right.</p><p>3. This plug-in will not record the slicing information you upload.</p><p><br></p><p>Powered by DUX</p>","id":"1082599768180571893","installCount":249,"lastUpdateDate":"2022-03-07T10:57:18.212Z","likeCount":11,"name":"quick-cut","publisherHandle":"DXY_xiashikai","publisherId":"953245028521257129","publisherName":"DXY_xiashikai","runCount":536,"viewCount":764},{"description":"<p>Rasterize <strong>all or any </strong>selected elements with a high resolution (2x, 3x, 4x, 8x). This is working&nbsp;around a limitation in Figma where layers can only be rasterized at 1x resolution.</p><p><br></p><p>The plugin will help you to rasterize:</p><ol><li>Any selected element</li><li>Any selected page, no matter how many elements it contains</li><li>Any selected file, no matter how many pages it contains</li></ol><p><br></p><p><strong>How it works?</strong></p><p><a href=\"https://youtu.be/Fs5rBUwSjc0\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://youtu.be/Fs5rBUwSjc0</a></p><p><br></p><p>The team Stas Lavrik Design are happy to hear any feedback from the community in comments. Thank you for attention!</p>","id":"1082685165266043759","installCount":1679,"lastUpdateDate":"2022-05-16T19:55:22.138Z","likeCount":39,"name":"Rasterize me!","publisherHandle":"artlavrik","publisherId":"941303031296110820","publisherName":"Stas L.","runCount":2077,"viewCount":2391},{"description":"<p>Automate your tasks with the Figma JavaScript library.</p><p><br></p><p><strong>How to use it?</strong></p><p>Just write your code as if you were coding a plugin, and click on \"Run code\".</p><p>You can find the documentation here: <a href=\"https://www.figma.com/plugin-docs/api/figma/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://www.figma.com/plugin-docs/api/figma/</a>.</p><p><br></p><p><strong>Why?</strong></p><p>Instead of creating a plugin for each small automation, you can now write it directly in Figma. This means that you no longer have to:</p><ul><li>create a plugin from scratch, which can be redundant</li><li>download the Figma Desktop app (because to use the plugin online, the moderators have to give their permission)</li></ul><p><br></p><p><em>The project is open-source. Find the code here: </em><a href=\"https://github.com/arthur-fontaine/automatin-for-figma/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\"><em>https://github.com/arthur-fontaine/automatin-for-figma/</em></a>.</p>","id":"1082735797620999093","installCount":145,"lastUpdateDate":"2022-03-07T19:08:21.129Z","likeCount":12,"name":"Automatin","publisherHandle":"arthurfontaine","publisherId":"850006305115090378","publisherName":"Arthur Fontaine","runCount":222,"viewCount":891},{"description":"<p>Generate clean React, HTML and CSS code from your Figma files in a few seconds.</p><p><br></p><h2>How it works:</h2><ol><li>Select the element you want to code</li><li>Click <code>&lt;Generate code&gt;</code></li><li>Done: you can preview the result on your browser and/or get the code.</li></ol><p><br></p><h2><a href=\"https://docs.clapy.co/clapy/getting-started/your-first-figma-component\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Getting started</a></h2><p><br></p><h2>The generated code</h2><ul><li>Pixel-perfect code of your design</li><li>Customizable components with properties (styles, text, swapped components and show/hide state)</li><li>Instant preview in codesandbox; optimized code export with ViteJS</li><li>Figma Tokens integration: your design tokens are exported and consumed by components</li><li>(S)CSS modules for clean (S)CSS grouped by components</li><li>Performance best practices (like <code>memo()</code>)</li><li>Assets (images and SVG) exported, fonts on Google Fonts</li></ul><p><br></p><h2><strong>Any question or feedback?</strong></h2><p>Let us know in the comment 👇 or <a href=\"https://discord.gg/qunGReFFqW\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">join our community</a> on Discord!</p><p><br></p><p>___________________________________________________</p><p><br></p><p>UI made by the plugin&nbsp;–&nbsp;Website: <a href=\"https://clapy.co\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">clapy.co</a></p>","id":"1083031796594968801","installCount":1541,"lastUpdateDate":"2022-07-23T16:24:01.383Z","likeCount":41,"name":"Clapy - Export Figma design to code (React, HTML, CSS)","publisherHandle":"clapy_app","publisherId":"1055066185031568563","publisherName":"Clapy","runCount":2494,"viewCount":2788},{"description":"<p>Translate from English to Chinese（text or name）.</p>","id":"1083390904845336131","installCount":526,"lastUpdateDate":"2022-07-26T09:50:52.860Z","likeCount":6,"name":"Translate","publisherHandle":"weilu","publisherId":"1017002927755165698","publisherName":"Wei Lu","runCount":843,"viewCount":839},{"description":"<p>Import Miro boards into FigJam.</p><p><br></p><p>This plugin allows you to connect your Miro account in order to import boards from Miro into FigJam. There is coverage of the most commonly used elements in Miro - text, notes, shapes, frames - but not all cases are covered.</p><p><br></p><p>If you have any issues with the conversion (elements not appearing or significantly different from how they appear in Miro, please leave a comment below or reach out on emile@pygma.app and I will try to fix it ASAP).</p><p><br></p><p><strong>This is a paid plugin</strong> - the first two imports are free, after that you will have to buy credits. Pricing is as follows, one credit = one import from Miro:</p><ul><li>10 credits - $20</li><li>50 credits - $75</li><li>100 credits - $125</li></ul><p><br></p><p><strong>How to use:</strong></p><ol><li>Create a blank file in FigJam ready to import boards into.</li><li>Open the plugin and login with Miro. Your Miro boards will be loaded once you have finished authentication.</li><li>Choose a board and click the \"Import\" button. Make sure that the canvas you are pasting into is empty.</li></ol><p><br></p><p><strong>List of Miro items not currently supported:</strong></p><ul><li>Cards (this will be done soon)</li><li>Tables (this will be done soon)</li><li>Images, embeds and previews (this is due to issues with Miro's API not exposing this information, if you are willing to share your board we may be able to figure another way of fetching this info).</li><li>Kanban, mindmaps (these are not exposed by Miro's API and unlikely to be possible any time soon)</li></ul><p><br></p><p>Reach out or leave a comment if one of the unsupported is a higher priority for you and you are a paying customer (or willing to become a paying customer once it is supported).</p>","id":"1083402318007626350","installCount":2037,"lastUpdateDate":"2022-06-29T19:47:04.216Z","likeCount":27,"name":"Import Miro Board","publisherHandle":"emilepw","publisherId":"1377485","publisherName":"Emile Paffard-Wray","runCount":2898,"viewCount":4189},{"description":"<p>现在你可以在 Figma 里使用字体选择器（Easy Font Picker）选择和预览系统中已安装的字体。</p><p><br></p><p>提示：使用前提是确认已安装<a href=\"https://www.figma.com/downloads/?fuid=840472473581963753\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\"> Figma Font Installer</a></p><p><br></p><p>特别感谢：Better Font Picker，Easy Font Picker 基于 Better Font Picker 的开源。</p>","id":"1083693370082797449","installCount":1859,"lastUpdateDate":"2022-03-11T02:58:25.174Z","likeCount":14,"name":"Easy Font Picker","publisherHandle":"x_joan","publisherId":"1083599098136618029","publisherName":"summer","runCount":2354,"viewCount":2239},{"description":"<p>Prep your designs for developer hand-off with Outline, a plugin that marks spacing specs in a variety of colors.</p><p><br></p><p>Select a frame that has <strong>Auto Layout</strong>. Outline will determine the padding of the frame and any spacing between the frames immediate children.</p><p><br></p><p>Choose what color to make your outline, along with the font size, outline radius, and dash spacing. You can adjust this per run. Outline will remember your settings next time you use the plugin!</p>","id":"1083724227791835060","installCount":1177,"lastUpdateDate":"2022-05-11T11:32:19.224Z","likeCount":47,"name":"Outline","publisherHandle":"seanehalpin","publisherId":"1890255","publisherName":"Seán Halpin","runCount":1564,"viewCount":4005},{"description":"<p>Set position and constraints with margin to center or corners.</p>","id":"1083785925916546094","installCount":51,"lastUpdateDate":"2022-05-12T23:04:19.969Z","likeCount":1,"name":"Position","publisherHandle":"linci","publisherId":"153547","publisherName":"Linci","runCount":66,"viewCount":247},{"description":"<p>Measure readability of your copy with this Flesch-Kincaid grade level calculator. Select a text layer, and then open the plug-in.</p><p><br></p><p>The Flesch Reading Ease Readability Formula is a general formula suitable for all kind of texts. It's especially great for:</p><p><br></p><ul><li>Writing copy for your website</li><li>Writing copy for user interfaces</li><li>Advertising your product</li><li>Writing headlines and taglines</li><li>Producing terms and conditions that don’t confuse</li><li>Boosting your SEO performance</li><li>Communicating your research to a non-specialist audience</li></ul><p><br></p><p>Simply select copy with punctuation to receive your score.</p><p><br></p><p><strong>Changelog</strong></p><p>V0.1 - Initial Release</p><p>V0.2 - Added warning pop-up if all or some of copy selected does not have punctuation</p>","id":"1084582804862767940","installCount":83,"lastUpdateDate":"2022-03-16T02:52:11.671Z","likeCount":16,"name":"Flesch-Kincaid Grade Level Calculator","publisherHandle":"LouKishfy","publisherId":"4300384","publisherName":"Louis K","runCount":121,"viewCount":264},{"description":"<p><strong>Property Toggle</strong> lets you quickly set boolean (true/false) properties on component instances in bulk. Great for managing design systems and quickly making variations of layouts when your components have shared properties.</p><p><br></p><h2>Usage</h2><ul><li><strong>Add properties</strong> that you want to toggle (ex. “dark mode”)</li><li><strong>Toggle properties</strong> to the state you want to set</li><li><strong>Apply changes</strong> to the entire page, or your current selection</li></ul><p><br></p><h2>Examples</h2><ul><li>Add a <code><strong>notch</strong></code> property and variants to your components and use Property Toggle to quickly swap between iPhone 13 and iPhone SE layouts</li><li>Add a <code><strong>dark mode</strong></code> property and variants to your components and use Property Toggle to quickly see what your layout will look like for users who use different preferences</li><li>Add an <code><strong>android</strong></code> property and variants to your components and use Property Toggle to quickly switch out platform-specific UI patterns to make your devs happy</li><li>Add an <code><strong>accessibility mode</strong></code> property and variants to your components and use Property Toggle to quickly test what larger font sizes and higher contrast colours would look like in your layout</li><li>When building design ‘molecules’ in your design system from design ‘atoms’ with shared properties, quickly create variants by switching all nested instances at the same time.</li></ul>","id":"1084592589223090000","installCount":439,"lastUpdateDate":"2022-03-17T15:29:06.238Z","likeCount":7,"name":"Property Toggle","publisherHandle":"evandinsmore","publisherId":"29903","publisherName":"Evan Dinsmore","runCount":679,"viewCount":1482},{"description":"<p>Move, generate and switch your color system with this little helper plugin.</p><p><br></p><p>Features</p><p><br></p><p><strong>Switch mode</strong></p><p>Switch mode allows you to toggle between light and dark mode based on your color library</p><p><br></p><p><strong>Generate</strong></p><p>Generates and updates semantic color structure based on Figma layers to give designers a visual reference to a complex task</p><p><br></p><p><strong>Transfer</strong></p><p>Copy and paste color styles from one file to another</p><p><br></p><p>Read the <a href=\"https://www.figma.com/file/6babINkE0Fdv2hrG9v5flb/Color-DS---Figma-Plugin-Documentation?node-id=0%3A1\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">documentation</a> for more info</p><p><br></p><p>Feel free to <a href=\"https://www.buymeacoffee.com/eddysalzmann\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">buy me a coffee</a> ☕️</p>","id":"1084932316480219172","installCount":277,"lastUpdateDate":"2022-03-18T12:08:11.935Z","likeCount":8,"name":"Color DS","publisherHandle":"a273ba58_72d1_4","publisherId":"3720441","publisherName":"Eddy Salzmann","runCount":379,"viewCount":716},{"description":"<p>Quickly create post components for a social media app, Petma. Choose between variants with different image placeholders and toggle between light or dark mode.</p>","id":"1085320745625953744","installCount":88,"lastUpdateDate":"2022-04-21T20:50:55.629Z","likeCount":2,"name":"Build Your First Plugin Tutorial","publisherHandle":"Dwoodling","publisherId":"3213464","publisherName":"Daniel Woodling","runCount":121,"viewCount":197},{"description":"<p><strong>腾讯CoDesign</strong>是产品设计研发一站式协作平台，帮助团队提升设计协作效率，有效管理使用设计资产，让产品设计更轻松高效。</p><p>由腾讯自研的 Figma 插件，支持在线导入预览设计稿、自动生成设计标注，批量下载切图素材、灵活调用图标库、素材库。</p><p>官方网站：<a href=\"https://codesign.qq.com/?utm_source=figma&amp;utm_medium=community&amp;utm_campaign=plugin\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://codesign.qq.com/</a></p><p>使用教程：<a href=\"https://codesign.qq.com/hc/plugins/figma?utm_source=figma&amp;utm_medium=community&amp;utm_campaign=plugin\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://codesign.qq.com/hc/plugins/figma/</a></p><p>问题反馈：<a href=\"https://support.qq.com/products/134728\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://support.qq.com/products/134728</a></p>","id":"1085397179751576065","installCount":74,"lastUpdateDate":"2022-03-15T03:30:54.344Z","likeCount":6,"name":"腾讯 CoDesign 私有化部署版","publisherHandle":"Tencent","publisherId":"984548782948477548","publisherName":"Tencent","runCount":114,"viewCount":373},{"description":"<p>Generate links for your prototype based on your frame contents.</p><p><br></p><p>This <strong>experimental</strong> plugin is the result of an ongoing research project. It uses a predictive model to suggest links for your prototype based on the frames' text content. As a result of its research status, errors can occur and unexpected results are common.</p><p><br></p><p>Due to the costs involved in deploying the necessary predictive models, the plugin only functions properly when a custom backend URL pointing to an appropriate backend is provided. A template for such a backend is linked below.</p><p><br></p><p>-----</p><p><br></p><p>&gt; Note: This Figma plugin is part of a master thesis project titled \"Predicting Links for Mobile GUI Prototyping\" by Christoph A. Johns at German Research Center for Artificial Intelligence (DFKI) and Aalto University. The project is supervised by Michael Barz and Prof. Antti Oulasvirta. You can find the source code for all parts of this application on GitHub ([backend](https://github.com/christophajohns/figma-plugin-backend), [plugin](https://github.com/christophajohns/suggested-links)).</p>","id":"1085560724786600653","installCount":72,"lastUpdateDate":"2022-07-12T15:02:41.292Z","likeCount":3,"name":"Suggested Links","publisherHandle":"cajohns","publisherId":"947076891584253359","publisherName":"Christoph Johns","runCount":128,"viewCount":353},{"description":"<p>Scribble Pal is especially made for iPad with Apple Pencil.</p><p><br></p><p>Create new stickies with text, as well as modify text on a selected sticky, shape or text box. The large text writing area works with either a keyboard or Apple Pencil with Scribble enabled.</p><p><br></p><p>Use \"Set Anchor\" on an existing sticky, shape or text box to set it as the origin point for additional stickies you want to add.</p><p><br></p><p><strong>Important Notes:</strong> Updating text in stickies and shapes with mixed styles (e.g. multiple fonts, underline) will remove all prior formatting. Also, this plugin will not work with Figurative; that app does not support Scribble. Instead, use Safari on iPad or the Figma iPadOS app (for FigJam files).</p>","id":"1085611830235007770","installCount":220,"lastUpdateDate":"2022-04-08T03:15:29.210Z","likeCount":5,"name":"Scribble Pal","publisherHandle":"ntfromchicago","publisherId":"1232151","publisherName":"Nelson Taruc","runCount":312,"viewCount":904},{"description":"<h2>Axe for Designers, A Shift Left Experiment</h2><p><br></p><p>This is a&nbsp;<strong>FREE</strong>&nbsp;plugin.</p><p><br></p><p>We are trying to build an automation tool that helps designers to craft accessible designs and thus accessible products reducing the cost of accessibility implementations by moving our shift left approach to the design phase.&nbsp;This is an in-progress experiment but we welcome you to join us to explore and contribute to this success. Let us together make the world more accessible.</p><p><br></p><p><strong>Plugin features</strong></p><p><br></p><ul><li>Auto Scan: Scan components and/or web page UIs for accessibility issues automatically.&nbsp;In the first version, we automated :&nbsp;<strong>Color Contrast, Touch Target&nbsp;</strong>and<strong>&nbsp;Headings</strong></li></ul><p><strong>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</strong>By Figma node structure, it can scan Frames, Groups, &amp; AutoLayouts.</p><ul><li>Color Contrast manual checker: This gives flexibility to the designer to select a text node and check for contrast.</li><li>Dashboard view: If you would like to save these reports and share further with your teams, login to our cloud and fetch the reports along with dashboard views, product documentation &amp; other technical design accessibility related resources. Share report is a coming soon feature. Login to<a href=\"https://axed-demo.dequelabs.com/login\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">&nbsp;axed-demo.dequelabs.com</a>&nbsp;with the same credentials you registered with.</li></ul><p><br></p><p><strong>Usage</strong></p><p><br></p><p>Follow these steps to install and use the plugin:</p><ol><li>Install the plugin.</li><li>Open the plugin from Figma editor &gt; Plugins menu &gt; Axe for Designers.</li><li>Register with any of your emails.</li><li>Verify the registered email.</li></ol><p><br></p><p>After successful registration, Log in and use the plugin.</p><p><br></p><p><strong>Roadmap</strong></p><p><br></p><ul><li>The existing&nbsp;<strong>Auto Scan</strong>&nbsp;feature is just the beginning of our vision. We are continuously working to make it more powerful and stable.&nbsp;<span class=\"ql-cursor\"></span></li><li>Additionally, we are working on building <strong>Annotations </strong>feature. This feature helps the designers and the developers to collaborate better and fix the accessibility issues in the initial stages itself. </li></ul><p><br></p><p>We will be glad to have your feedback on this.</p>","id":"1085612091163821851","installCount":868,"lastUpdateDate":"2022-03-16T10:13:41.203Z","likeCount":53,"name":"Axe for Designers (FREE)","publisherHandle":"dequesystems","publisherId":"938797555143427428","publisherName":"Deque Systems","runCount":1157,"viewCount":3083},{"description":"<p>Convert bitmap images to vector.</p><p><br></p><p><strong>How to use</strong></p><ol><li>Select node/frame with image fill (just one image fill)</li><li>CMD + /</li><li>Vectorize</li><li>Vectored path added to canvas</li></ol><p><br></p><p>IF IT DOESN'T WORK, COMMENT WITH A LINK TO THE FIGMA. THANKS! </p>","id":"1085676099704803176","installCount":5456,"lastUpdateDate":"2022-03-15T21:30:53.177Z","likeCount":46,"name":"Vectorize","publisherHandle":"liampmccabe","publisherId":"297616","publisherName":"Liam McCabe","runCount":7564,"viewCount":5244},{"description":"<p>This plugin is what you really need if you want to make sure that your great design will not be spoiled by typos. Focus on your design, and we will help you with spell checking.</p><p><br></p><p><strong>Features:</strong></p><ul><li>Fast scanning of the whole page or specific artboards or modules</li><li>Use one of the best existing dictionaries by Microsoft</li><li>Fix mistake with one click based on relevant dictionary suggestions</li><li>Focus to find the place of your typo on the canvas</li><li>Exclude words that are not mistakes for you, and they will not be checked as mistakes in a future</li><li>Auto-fix all same mistakes, by fixing one of them</li><li>16 certificated language dictionaries</li><li>Low memory use, so fewer chances to see “red line alert” :)</li></ul><p><br></p><p>This plugin was made because we all make typos sometimes, but it doesn’t have to affect our design quality.</p>","id":"1085813390515798975","installCount":2272,"lastUpdateDate":"2022-05-24T09:33:25.785Z","likeCount":20,"name":"Speller - Spell checker for design","publisherHandle":"figm8","publisherId":"1085106811798199338","publisherName":"Figm8","runCount":3208,"viewCount":2178},{"description":"<p>Find the style guide with brand assets such as logos, colors, fonts and brands social media accounts, websites, industry etc.</p><p><br></p><p>For more details:</p><p><a href=\"https://inhunt.io/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">inhunt.io</a></p>","id":"1085879302903020606","installCount":929,"lastUpdateDate":"2022-05-16T08:10:17.736Z","likeCount":19,"name":"Insight Hunter","publisherHandle":"insight_hunter","publisherId":"1050317952791592289","publisherName":"Insight Hunter","runCount":1076,"viewCount":1494},{"description":"<p>The FeedLabs plugin helps you to quickly render a template for many items in an item list.&nbsp;Check out <a href=\"https://feedlabs.io\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://feedlabs.io</a> for more!</p><p><br></p><p><strong>How to</strong></p><p>1) Create a template (frame), using Figma</p><p>2) Upload a CSV file with your items, using the plugin</p><p>3) Render the frame for all items in a few seconds</p><p><br></p><p><strong>Features</strong></p><ul><li>Dynamic images; use image URLs to show a different image per item</li><li>Dynamic text; use fields inside text elements to show different text per item. (e.g. ${{price}},-)</li><li>Conditional rendering; show an element depending on a certain condition (e.g. 'sale' EQUAL true)</li><li>Render up to 50 items in a few seconds</li><li>Make infinite templates and designs, using Figma</li></ul><p><br></p><p><strong>FAQ</strong></p><p><em>What is the pricing model?</em></p><p>The plugin in the current state will always be available for free.</p><p><br></p><p><em>What if I want to add more than 50 items?</em></p><p>This plugin is a free service and only allows limited features. However, we offer a service allowing processing of 100.000s of items in seconds, check out <a href=\"https://feedlabs.io\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://feedlabs.io</a> for more!</p><p><br></p><p><em>Something is not working as expected, what do I do?</em></p><p>We love feedback! Please send an email to <a href=\"mailto:vanamerongen@squaremoon.nl\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">vanamerongen@squaremoon.nl</a> and I will personally help you.</p><p><br></p><p><em>I need a feature which is not implemented, what do I do?</em></p><p>We are currently working very hard implementing many new features. However, if you have some useful suggestions, please send the to me at <a href=\"mailto:vanamerongen@squaremoon.nl\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">vanamerongen@squaremoon.nl</a>.</p><p><br></p><p><br></p><p><br></p><p><em>Powered by </em><a href=\"https://www.squaremoon.nl/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\"><em>SquareMoon B.V.</em></a></p>","id":"1085928256238166159","installCount":66,"lastUpdateDate":"2022-07-26T14:37:54.866Z","likeCount":3,"name":"FeedLabs","publisherHandle":"vanam_sqm","publisherId":"971350686017831886","publisherName":"Philippe","runCount":101,"viewCount":291},{"description":"<p>Set up your data tracking, send it to Jira, and monitor implementation, all without ever leaving Figma! <strong>🧰</strong></p><p><br></p><p><strong>Event Labels </strong>🏷️&nbsp;</p><p>Make sure you never miss an important interaction, by labelling events directly on your canvas! Your event properties, tags, platform, status and much more, all at a glance!</p><p><br></p><p><strong>Tracking Plan ✅</strong></p><p>All the information your developer needs, in just a few clicks! Includes event properties, interaction screenshots and identifiers, comments, tags and implementation status.</p><p><br></p><p><strong>Jira and CSV Export </strong>📄</p><p>Export your tracking plan directly to Jira, in just a few seconds! Updates sync with your Figma tracking plan, so it doubles as a dashboard!</p><p><br></p><p><strong>Collaboration (BETA) </strong>🤝</p><p>If your colleagues have our plugin and edit rights to your canvas, they can now instantly see the tracking plan and event labels you created!</p><p><br></p><p>🎬 Check out our video to see how it works: <a href=\"https://youtu.be/_FlHCxq9Cq0\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://youtu.be/_FlHCxq9Cq0</a></p><p>🌐 Find out more on our website: <a href=\"https://www.qualas.io/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://www.qualas.io</a></p>","id":"1085962437808652484","installCount":125,"lastUpdateDate":"2022-04-20T14:50:28.062Z","likeCount":14,"name":"Qualas Tracking Plan","publisherHandle":"e6635212_e987_4","publisherId":"1085998887563573520","publisherName":"Qualas.io","runCount":165,"viewCount":735},{"description":"<p>Use this plugin to create designs and copy them over directly to Abstra!</p><p><br></p><p>This is an open alpha. If you want to know more please contact us.</p>","id":"1086096813775530268","installCount":32,"lastUpdateDate":"2022-03-30T22:09:11.242Z","likeCount":0,"name":"[Alpha] Figma to Abstra converter","publisherHandle":"abstra_dev","publisherId":"1086014867772307666","publisherName":"Abstra","runCount":50,"viewCount":111},{"description":"<p>Export your figma design file to Devign and check inconsistencies with Code in seconds.</p><p><br></p><p>Auto-create design related bug tickets. Collaborate faster and easier within your team. Maximize User Experience.</p><p><br></p><p>🌐 www.devign.ai</p><p>✉️ hello@deepbluedot.io</p><p>📌 To download the product(Devign), please contact us. (Free Beta)</p>","id":"1086539315721164517","installCount":86,"lastUpdateDate":"2022-03-25T04:57:40.652Z","likeCount":8,"name":"Devign","publisherHandle":"devign","publisherId":"1086528643179055535","publisherName":"Deep BlueDot Team","runCount":127,"viewCount":256},{"description":"<p>A simple and quick plugin to help in creating style guide documentation.</p><p><br></p><p>Menu:</p><p><strong>ON-SELECTED: </strong>runs on the <em>selected </em>texts/rectangles.</p><ol><li><strong><em>Text :</em></strong> Provides font details like font name, size, weight, etc.,</li><li><strong><em>Rectangle : </em></strong>Provides RGB &amp; Hex Color codes.</li></ol><p><br></p><p><strong>FROM-STYLES: </strong>runs from the saved Figma styles.</p><ol><li><strong><em>Text Styles: </em></strong>Provides font details like font name, size, weight, etc.,</li><li><strong><em>Paint Styles: </em></strong>Provides RGB &amp; Hex color codes.</li></ol><p><em></em></p><p>Pre-requisites:</p><p><strong>Un-group</strong> the rectangles/texts before running.</p><p><br></p><p><strong><em>----New Release - changes:</em></strong><em>----</em></p><ol><li><em>Opacity for colors.</em></li><li><em>bug fixes</em></li></ol>","id":"1086726114862988342","installCount":513,"lastUpdateDate":"2022-07-19T04:13:10.391Z","likeCount":20,"name":"Style Docs","publisherHandle":"mezhilp","publisherId":"978559022202972801","publisherName":"Ezhil Prasanth M","runCount":751,"viewCount":1581},{"description":"<h2>Tool for the best!</h2><p><br></p><p>A Plugin for the designers to create a list of pages required in a new design system project in just a click. You don't need to create this deck individually.</p><p><br></p><p>Feel free to reach out to the <strong>support contact</strong>, If you find any bug or needs a change</p><p><br></p><p><strong>Run Once and Boom!!</strong></p><ul><li>Cover</li><li>Style Components</li><li>Typography Components</li><li>Wireframes</li><li>Design-v1 In Progress</li><li>Design-v2 In Progress</li><li>Design-v3 In Progress</li><li>Icon/FavIcons</li><li>Assets</li><li>Discovery</li><li>Reference</li><li>Junkyard</li></ul><p><br></p><p><strong>Thank you</strong></p><p><a href=\"https://hashtagkaran.com\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Hashtagkaran</a></p>","id":"1086869650406820989","installCount":440,"lastUpdateDate":"2022-06-28T19:20:09.655Z","likeCount":10,"name":"Design System Pages","publisherHandle":"hashtagkaran","publisherId":"3681700","publisherName":"hashtagkaran","runCount":664,"viewCount":1765},{"description":"<p><strong>Select Sticky Notes&nbsp;</strong>is a FigJam plugin created to help you to select all sticky notes&nbsp;<strong>from the same author</strong>.&nbsp;</p><p><em>(for now, this is the only criteria, but in the future, it will be better 😉)</em></p><p><br></p><p>Some scenarios that this plugin can be used:</p><p>✅ When you want to&nbsp;<strong>change the color&nbsp;</strong>of the stickies from someone;</p><p>✅ When you want to&nbsp;<strong>hide signatures</strong>&nbsp;of the stickies from someone;</p><p>✅ When you want to&nbsp;<strong>edit the text style</strong>&nbsp;of the stickies from someone;</p><p><br></p><p>Let me know if you have any ideas about the evolution of this plugin. 🚀</p><p><br></p><p><a href=\"mailto:http://sbngs97@gmail.com\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Mail</a>&nbsp;•&nbsp;<a href=\"https://github.com/sabrigs/figjam-select-sticky-notes\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Github</a></p>","id":"1087014601533780227","installCount":534,"lastUpdateDate":"2022-03-23T23:54:24.338Z","likeCount":6,"name":"Select Sticky Notes","publisherHandle":"sabris","publisherId":"2269575","publisherName":"Sabrina Silva","runCount":760,"viewCount":987},{"description":"<p>Select any element and effortlessly check its width, height, font size, and line-height converted into <strong>REM</strong> units.</p>","id":"1087023622686056715","installCount":118,"lastUpdateDate":"2022-03-21T10:57:07.005Z","likeCount":7,"name":"Holistic values","publisherHandle":"rycz","publisherId":"963423114109179836","publisherName":"Ryszard Cz","runCount":174,"viewCount":257},{"description":"<p>FireJet allows you to export to Typescript | React | Tailwind | CSS</p><p><br></p><p><strong>Auto Design Fixer</strong></p><p>Do you find your team sometimes forgets to use auto layout/uses groups instead of frames and other bad practices? Detect and fix bad practices automatically - automatically enforce auto layout/frames instead of groups</p><p><br></p><p><strong>Custom Tailwind Config</strong></p><p>Add in your own tailwind config to get your own custom tailwind colors/fonts when exporting code!</p><p><br></p><p><a href=\"https://discord.gg/y3C3WtJga4\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Discord</a></p><p><a href=\"https://www.firejet.io/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Website</a></p><p><a href=\"https://www.firejet.io/docs\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Documentation</a></p><p><br></p><p><strong>Why FireJet</strong></p><p><br></p><p>FireJet has a straightforward user interface. No need to go to external websites to get the code.</p><p><br></p><p>Just login, click 'Generate Code' and get your code from within Figma itself.</p><p><br></p><p>We aim to provide the best conversion in terms of:</p><ol><li>Human Readable Code</li><li>Responsive Outputs</li><li>Pixel Perfect Outputs</li></ol><p><br></p><p><strong>What people are saying:</strong></p><p><br></p><p>Tried other figma-to-code tools before but I like FireJet's UX the best. The founders were very receptive to my suggestions too.</p><p><strong><em>Daryl Wong, Software Engineer, Grab</em></strong></p><p><br></p><p>I have been using FireJet since it launched. It has good code optimization with tailwind CSS and works faster than other plugins. I would recommend using FireJet.</p><p><strong><em>Pavan Kshirsagar, Developer, Senwell Solutions</em></strong></p><p><br></p><p><strong>Usage:</strong></p><ol><li>Launch the plugin</li><li>Select your design</li><li>Click generate Code</li><li>It will be converted into React TSX which you can directly copy and paste into your React project</li></ol>","id":"1087200717679287673","installCount":806,"lastUpdateDate":"2022-07-21T09:50:34.732Z","likeCount":34,"name":"FireJet - Figma to Code | Auto Design Fixer | React | Tailwind | CSS","publisherHandle":"firejet","publisherId":"855749994406810749","publisherName":"FireJet","runCount":1155,"viewCount":2032},{"description":"<p>Make quick selections in quick actions. ✨</p><p><br></p><p>Extending the built in \"<em>Select all with ...\"</em> commands and without the need to open ui, all happens in the quick actions. Just&nbsp;<code>⌘ + /</code> and&nbsp;sselect!</p><p><br></p><h2>🎯 Selection:</h2><p><br></p><p>Select nodes with same types, names, or main components becomes few keys away.</p><p><br></p><p><strong>Instance</strong></p><ul><li>Select all instances within parent frame</li><li>Select all instances within root frame</li><li>Select all instances</li></ul><p><strong>Type</strong></p><ul><li>Select all with same type within parent frame</li><li>Select all with same type within root frame</li><li>Select all with same type</li></ul><p><strong>Name</strong></p><ul><li>Select all with same name within parent frame</li><li>Select all with same name within root frame</li><li>Select all with same name</li></ul><p><br></p><h2>🔍 Search and Select:</h2><p><br></p><p>Search within selection or in page for deeply nested nodes, using filter to make the search more easily to select!</p><p><br></p><p><strong>Filter type</strong></p><ul><li>All</li><li>Frame</li><li>Component</li><li>Component set</li><li>Group</li><li>Slice</li><li>Media</li><li>Text</li><li>Vector</li><li>Rectangle</li><li>Ellipse</li><li>Polygon</li><li>Star</li><li>Line</li><li>Sticky</li><li>Section</li><li>Stamp</li><li>Connector</li><li>Widget</li><li>Shape with text</li></ul><p><br></p><p><strong>Search by name</strong></p><ul><li>Appearance amount</li></ul><p><br></p><h2>❓ Suggestion</h2><p><br></p><p><a href=\"https://github.com/yuchengkuo/select-for-figma\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Open an issue</a> or <a href=\"mailto:contact@yuchengkuo.com\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">email</a> for suggestions, thanks in advance!</p>","id":"1087207671419748735","installCount":29,"lastUpdateDate":"2022-05-14T13:41:13.274Z","likeCount":3,"name":"SSelect","publisherHandle":"yuchengkuo","publisherId":"907627406903725617","publisherName":"YuCheng Kuo","runCount":39,"viewCount":137},{"description":"<p>Easily generate random avatars from https://avatars.dicebear.com/ with a simple plugin, customizing the size and quantity.</p>","id":"1087220559503205766","installCount":1240,"lastUpdateDate":"2022-03-20T12:35:09.380Z","likeCount":13,"name":"Avatar Generator","publisherHandle":"joao208","publisherId":"3330857","publisherName":"João Barros","runCount":1971,"viewCount":1973},{"description":"<p>Easily find and insert icons from the <a href=\"https://bitcoinicons.com/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Bitcoin Icon Set</a> into your designs. Included icons cover bitcoin-specific needs like wallet, node, exchange, and transactions, as well as more general icons applications typically need like arrows, home, and menu.</p><p><br></p><p>This is the first release of the plugin and includes basic search and insertion functionality (just a click). It will be updated as updates to the icon set are released.</p><p><br></p><p>For feedback and feature requests, post an issue in the <a href=\"https://github.com/GBKS/figma-bitcoin-icons\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Github repo</a>.</p>","id":"1087677534293009133","installCount":1159,"lastUpdateDate":"2022-03-21T10:06:33.839Z","likeCount":7,"name":"Bitcoin Icons","publisherHandle":"gbks","publisherId":"15892","publisherName":"Christoph Ono","runCount":1417,"viewCount":1132},{"description":"<p>With this plugin you can quickly generate thumbnail covers for your project, it includes project status, file name, description and the ability to add avatars as collaborators.</p><p><br></p><p><strong>Features</strong></p><ul><li>Add project status</li><li>Add project name</li><li>Add description</li><li>Upload and remove collaborators avatars</li></ul>","id":"1087800204796905364","installCount":1462,"lastUpdateDate":"2022-03-23T15:31:00.548Z","likeCount":79,"name":"Thumbnail Kit","publisherHandle":"kyler","publisherId":"47569","publisherName":"Kyler Phillips","runCount":1689,"viewCount":2548},{"description":"<p>Vue project generator plugin for Figma</p><p><br></p><h2>Instructions:</h2><p>Use the utility classes to insure Vigma captures the design accurately, those classes can be applied by including them in Figma layers names.</p><p><br></p><ul><li><strong>Flex properties</strong></li><li><strong>     row:</strong>&nbsp;To apply&nbsp;<code> display: flex; </code>on a group.</li><li><strong>     h-center:</strong>&nbsp;To center the children horizontally.</li><li><strong>    v-center:</strong>&nbsp;To center the children vertically.</li><li><strong>Columns</strong></li><li><strong>    col:</strong>&nbsp;To mark a group as a column.</li><li><strong>   value:</strong>&nbsp;The col property takes a value to apply width for the column, values are 1-12</li><li><strong>Buttons</strong></li><li><strong>   button:</strong>&nbsp;To mark a group as a button.</li><li><strong>   ButtonText:</strong>&nbsp;A button group should contain a Figma text inside it, it will be converted into a paragraph element.</li><li><strong>   ButtonBackground:</strong>&nbsp;A button group should contain a Figma rectangle inside it, the generated button element will take its style from this rectangle.</li></ul><p><br></p><p><strong>Example:&nbsp;</strong>The following is an example of how we can use those classes with Figma layers.</p><ul><li>GroupName: row, v-center, h-center</li><li>    SubGroupName: cols-6</li><li>        ButtonName: button</li><li>        ButtonText</li><li>        ButtonBackground</li><li>    SubGroupName: cols-6</li><li>        Text</li></ul><p>The above tree will then be converted into this code:</p><p><br></p><pre class=\"ql-syntax\" spellcheck=\"false\">             \n\n&lt;div class=\"GroupName\"&gt;\n    &lt;div class=\"cols-6\"&gt;\n        &lt;p class=\"TextName\"&gt;Text content here&lt;/p&gt;\n    &lt;/div&gt;\n    &lt;div class=\"cols-6\"&gt;\n        &lt;button class=\"ButtonName\"&gt;\n           &lt;p class=\"TextName\"&gt;Button text content here&lt;/p&gt;\n        &lt;/button&gt;\n    &lt;/div&gt;\n&lt;/div&gt;\n</pre>","id":"1087960115221181459","installCount":186,"lastUpdateDate":"2022-04-07T06:45:35.095Z","likeCount":2,"name":"Vigma","publisherHandle":"vigma","publisherId":"1016278559177286180","publisherName":"Anas Shwehdy","runCount":264,"viewCount":402},{"description":"<p>Export images to EPS</p>","id":"1088052957367337083","installCount":417,"lastUpdateDate":"2022-03-25T15:25:19.779Z","likeCount":5,"name":"Export2Eps","publisherHandle":"swing1","publisherId":"2437885","publisherName":"swing","runCount":677,"viewCount":708},{"description":"<p>A plugin that allows managing roles by show-hide function</p><p><br></p><p>Prerequisites:</p><ul><li>Add <em>_roles </em>page to your Figma file</li><li>Add a list of nodes with the names of your roles on <em>_roles</em> page</li><li>Plugin will automatically find this list and you can apply them to elements you want</li><li>Select the parent frame or group and then select the role and click show</li></ul>","id":"1088478781440769664","installCount":31,"lastUpdateDate":"2022-04-10T19:07:55.456Z","likeCount":3,"name":"Display for role","publisherHandle":"urdmg","publisherId":"1939200","publisherName":"Sergey Tkhojevskiy","runCount":42,"viewCount":95},{"description":"<p><strong>Introducing the Material Symbols plugin!&nbsp;</strong></p><p><br></p><p><a href=\"https://m3.material.io/styles/icons/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Material Symbols</a> are Google’s newest icons consolidating over 2,500 glyphs</p><p>in a single font file with a wide range of design variants. Symbols are available in</p><p>three styles and four adjustable variable font styles (Fill, Weight, Grade, and Optical size).&nbsp;</p><p>&nbsp;</p><p>Using the Material Symbols plugin, designers can easily search and add symbols in Figma, creating a more efficient design workflow. Visit<a href=\"http://fonts.google.com/icons\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\"> fonts.google.com/icons</a> for more information.</p>","id":"1088610476491668236","installCount":31807,"lastUpdateDate":"2022-05-11T21:43:12.374Z","likeCount":989,"name":"Material Symbols","publisherHandle":"googlefonts","publisherId":"976570569365632935","publisherName":"Google Fonts","runCount":41669,"viewCount":52903},{"description":"<p>有赞设计语言的代码生成工具</p>","id":"1088662976981813049","installCount":37,"lastUpdateDate":"2022-03-24T03:21:32.816Z","likeCount":0,"name":"Zan Design Code","publisherHandle":"zhuge_yz","publisherId":"1075992553716589366","publisherName":"zhuge_yz","runCount":60,"viewCount":137},{"description":"<p>Demo <a href=\"https://www.loom.com/share/77bbb78f05754cd6b20009cfa6eee2df\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">here</a>.</p><p>This plugin renames elements (that contains inner elements, like groups, frames, instances..) by a specific inner text layer content.</p><p><br></p><p><strong>Use case example:</strong></p><p>You have cards that represents movies. Each card contains an image, movie name, description and a button. You want to name all the cards by the movie name.</p><p>Demo <a href=\"https://www.loom.com/share/77bbb78f05754cd6b20009cfa6eee2df\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">here</a>.</p><p><br></p><p><strong>How it works?</strong></p><ol><li>Run the plugin</li><li>You can choose to rename by</li></ol><ul><li>A specific layer name</li><li>Another character / phrase that you can add to the beginning of the layer name</li></ul><p>Make sure all the frames you want to rename are selected.</p><p><strong>Important</strong>: This plugin saves the last layer name you replaced by.</p>","id":"1089134960763588935","installCount":335,"lastUpdateDate":"2022-04-15T11:35:17.050Z","likeCount":13,"name":"Rename layer","publisherHandle":"1836422","publisherId":"1836422","publisherName":"Tsurit Ben-Tsur","runCount":646,"viewCount":1064},{"description":"<p>Copy photos from your mobile to Figma seamlessly. Be it screenshots of apps, photos of your notes or snaps from your field study, the Photo Copier plugin can help you transfer photos to your Figma quickly.</p><p><br></p><p>Check documentation <a href=\"https://drive.google.com/file/d/1qXLmGH1yIpByQLyyVTsj445YKtV2nS0l/view?usp=sharing\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">here</a></p><p><br></p><p>If you find any issue with the plugin, contact me at <a href=\"mailto:001sanketkulkarni@gmail.com\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">001sanketkulkarni@gmail.com</a></p><p><br></p><p>Coming soon in upcoming releases:</p><ol><li>Ability to upload multiple images</li><li>Get rid of verification code</li></ol><p><br></p><p>If you have any improvement ideas, share them in the comments below.</p>","id":"1089177670403251632","installCount":265,"lastUpdateDate":"2022-03-28T07:02:56.904Z","likeCount":12,"name":"Photo Copier","publisherHandle":"kulsanket","publisherId":"889244658531406959","publisherName":"Sanket Kulkarni","runCount":365,"viewCount":643},{"description":"<p>This plug-in allows you to easily replace multiple components and instances with the one you want to use.</p><p><br></p><p>🌟-&gt; Select the components you want to replace and click the first input box.&nbsp;</p><p>🌟-&gt; Select one component you want to replace with and click the second input box.</p><p>🎉-&gt; Click the 'Replace' button and done!&nbsp;</p><p><br></p><p>☕ You can support me here:</p><p><a href=\"https://www.buymeacoffee.com/leahwangdesign\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://www.buymeacoffee.com/leahwangdesign</a></p>","id":"1089249450237754894","installCount":273,"lastUpdateDate":"2022-04-12T02:51:22.641Z","likeCount":9,"name":"Magic Replacer","publisherHandle":"leahwangdesign","publisherId":"885191929860669977","publisherName":"Leah Wang","runCount":471,"viewCount":603},{"description":"<p>Flow Show is a simple plugin for those that need to present different connector flows in a FigJam file (or Figma file that contains connectors). With Flow Show, you can…</p><p><br></p><ul><li>Show or hide connector arrows</li><li>Assign selected connectors to one of three flows</li><li>Filter the visibility of connector arrows by flow</li><li>Switch visibility of locked connectors</li><li>Optionally rename flows</li></ul><p><br></p><p>I made this super-simple plugin to easily toggle between connector flows during design reviews and presentations in Figma and FigJam. Happy to get feedback on how to make Flow Show even better.</p>","id":"1089358621588511354","installCount":555,"lastUpdateDate":"2022-05-12T03:22:16.330Z","likeCount":1,"name":"Flow Show","publisherHandle":"ntfromchicago","publisherId":"1232151","publisherName":"Nelson Taruc","runCount":867,"viewCount":2513},{"description":"<p>RemixIcon Official Plugin.&nbsp;</p><p><br></p><p><br></p><p><br></p><p>Remix Icon is a set of open-source neutral-style system symbols for designers and developers.&nbsp;</p><p><br></p><p>Unlike a patchwork icon library, 2200+ icons are all elaborately crafted so that they are born with the gene of readability, consistency and perfect pixels.&nbsp;</p><p><br></p><p>Each icon was designed in \"Outlined\" and \"Filled\" styles based on a 24x24 grid.&nbsp;</p><p><br></p><p>Of course, all the icons are free for both personal and commercial use.</p><p><br></p><p><br></p><p><br></p><p>Our Web App:&nbsp;<a href=\"https://remixicon.com/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">remixicon.com</a></p><p><br></p><p>Our GitHub Repo: https://github.com/Remix-Design/RemixIcon</p>","id":"1089569154784319246","installCount":936,"lastUpdateDate":"2022-05-11T15:11:47.297Z","likeCount":14,"name":"RemixIcon","publisherHandle":"RemixDesgin","publisherId":"1102082942845412099","publisherName":"Remix Design","runCount":1389,"viewCount":599},{"description":"<p>Visible Property 2 will help you creating documentation for handoff. It will update label following reference's component whenever you call the plugin.</p><p><br></p><p>Youtube: <a href=\"https://youtu.be/NoihOB1Z6qM\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://youtu.be/NoihOB1Z6qM</a></p><p><br></p><p><strong>🐷 How it works:</strong></p><p><br></p><ol><li>Define reference element by adding \"#\" in front of a layer name. For example,<strong> \"#color\"</strong></li><li>Defile text element you want to update (#reference + . + method). For example, \"<strong>#color.fill\", \"#color.fillRGB\", \"#color.height\" </strong>etc.</li><li>Call the plugin by typing \"cmd + /\" -&gt; \"visible property 2\"</li></ol><p><br></p><p><strong>🐯 Tips </strong></p><p><br></p><p>You can refer to the parent layer by using <strong>\"##Parent\"</strong> or <strong>\"##TopParent\"</strong> without inserting a layer name.</p><p>For example,</p><ul><li>##Parent.name or ##Parent.fill</li><li>##TopParent.name or ##TopParent.fill</li></ul><p><br></p><p>🦁 <strong>Properties:</strong></p><p><br></p><p>Fill</p><ul><li><strong>fill</strong> -&gt; #123456 78%</li><li><strong>fillRGB</strong> -&gt; rgba(123, 456, 789, 1)</li><li><strong>fillHSL</strong> -&gt; hsla(123, 456, 789, 0.1)</li><li><strong>fillHSB</strong> -&gt; hsba(123, 456, 789, 0.1)</li><li><strong>fillStyle</strong> -&gt; DarkBlue</li><li><strong>fillStyleDescription</strong> -&gt; The Description</li></ul><p><br></p><p>Stroke</p><ul><li><strong>stroke</strong> -&gt; #123456</li><li><strong>strokeRGB</strong> -&gt; rgba(123, 456, 789, 1)</li><li><strong>strokeHSL</strong> -&gt; hsla(123, 456, 789, 0.1)</li><li><strong>strokeHSB</strong> -&gt; hsba(123, 456, 789, 0.1)</li><li><strong>strokeStyle</strong> -&gt; DarkBlue</li><li><strong>strokeStyleDescription</strong> -&gt; The Description</li></ul><p><br></p><p>Text</p><ul><li><strong>font</strong> -&gt; Roboto</li><li><strong>fontWeight</strong> -&gt; Bold</li><li><strong>fontSize</strong> -&gt; 12</li><li><strong>paragraphIndent</strong> -&gt; 12</li><li><strong>paragraphSpace</strong> -&gt; 12</li><li><strong>letterSpace</strong> -&gt; 12 or 12%</li><li><strong>lineHeight</strong> -&gt; 12 or 12%</li><li><strong>textStyle</strong> -&gt; Body</li><li><strong>textStyleDescription</strong> -&gt; The Description</li></ul><p><br></p><p>Size</p><ul><li><strong>height</strong> -&gt; 32</li><li><strong>width</strong> -&gt; 64</li></ul><p><br></p><p>Layer</p><ul><li><strong>name </strong>-&gt; layer name</li></ul><p><br></p><p>Component</p><ul><li><strong>description</strong> -&gt; component description</li></ul><p><br></p><p>Note: This plugin only supports gradients with default Start/Stop positions</p><p><br></p><p><strong>☕️ Love this plugin: </strong><a href=\"https://ko-fi.com/apirak\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">buy me a coffee</a></p><p><br></p><p>This plugin is an open-source on <a href=\"https://github.com/apirak/visible-property-2\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">github</a></p>","id":"1090193516013501637","installCount":225,"lastUpdateDate":"2022-07-10T14:39:13.774Z","likeCount":25,"name":"Visible Property 2","publisherHandle":"apirak","publisherId":"347","publisherName":"Apirak","runCount":263,"viewCount":734},{"description":"<p><strong>With the APCA color contrast algorithm in WCAG 3.0, make sure your colors are clearly visible with one click.</strong></p><p><br></p><p><strong>Features:</strong></p><ul><li>Contrast and text preview</li><li>Contrast list per level for different content</li><li>Suggested colors to fix all unclear colors</li></ul><p><br></p><p>Any questions or suggestions, contact me: <a href=\"mailto:nowork.app@gmail.com\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">nowork.app@gmail.com</a></p>","id":"1090308131937420683","installCount":556,"lastUpdateDate":"2022-03-28T16:19:29.563Z","likeCount":16,"name":"Visual Contrast: Everything clearly with APCA","publisherHandle":"nowork","publisherId":"1021661660923531625","publisherName":"NOWORK","runCount":701,"viewCount":964},{"description":"<p>Add Memojis to your designs.</p><p><br></p><p>Select your shapes, and then run the plugin to automatically fill from over 100+ Memojis.</p>","id":"1090391796325905912","installCount":7038,"lastUpdateDate":"2022-03-29T01:13:34.096Z","likeCount":139,"name":"Memojis","publisherHandle":"maxsteitle","publisherId":"474854","publisherName":"Max Steitle","runCount":9185,"viewCount":6455},{"description":"<h2><strong>Iconbay is totally free! 🤑⚡</strong></h2><p><br></p><p>Iconbay offers the Best 100 free icons in five styles to enhance your next project (Light, Bold, Bulk, Two-tone, Broken).</p><p><br></p><p><br></p><p><strong>What's inside:</strong></p><ul><li>Free for personal &amp; commercial used</li><li>Smooth shape</li><li>5 Styles (Light, Bold, Bulk, Two-tone, Broken)</li><li>Organized library for Figma</li><li>Fully vector &amp; customizable</li><li>Grid size 24x24 px</li><li>Trendy and modern</li><li>Easy to use in Figma</li></ul><p><br></p><p>We're excited to share Iconbay with you and we look forward to hearing any feedback you may have. ❤️</p><p><br></p><p>Follow us on Instagram:</p><p><a href=\"https://www.instagram.com/sub1.studio/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\"><strong>sub1studio/instagram</strong></a></p><p><a href=\"https://www.instagram.com/iconbay.studio/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\"><strong>iconbay/instagram</strong></a></p><p><br></p><p>🤙 If you have any questions about what’s included reach out to us before purchasing at&nbsp;<a href=\"mailto:sub1studio.design@gmail.com\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\"><strong>sub1studio.design@gmail.com</strong></a></p><p><br></p><p>A product created by&nbsp;<a href=\"https://dribbble.com/Sub1\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\"><strong>SUB1 Studio</strong></a></p><p><br></p>","id":"1090400956056355324","installCount":2162,"lastUpdateDate":"2022-03-30T04:38:33.322Z","likeCount":41,"name":"Iconbay 1.0 ⚡","publisherHandle":"sub1studio","publisherId":"999586765655850025","publisherName":"Sub1 Studio","runCount":3088,"viewCount":2476},{"description":"<p>Insert and swap space instances in autolayouts.</p><p><br></p><p><strong>Naming convention</strong></p><p>In order for the plugin to find your spacing components and order them from the smallest to the largest, each spacing component should follow this convention: <em>space_ + [value]</em></p><p>example: space_8 / space_16 / etc.</p><p><br></p><p><strong>Inserting/Swapping</strong></p><p>When clicking a space in the list, the output will differ based on the current selection (that can be multiple objects or layers).</p><ol><li>If an object or layer part of an autolayout is selected, the space instance will be insterted after/before it (according to the state of the position toggle). </li><li>If a space instance is selected, the new space instance will replace it.</li><li>If nothing or any another type of object or layer is selected, the space instance will be inserted in the center of the viewport.</li></ol><p><br></p><p><strong>Visibility</strong></p><p>The visibility toggle shows or hides the spacing instances that are part of the active selection.</p><p><br></p><p><em>This plugin was created for the AREA 17 design team and is a variation of the original </em><a href=\"https://www.figma.com/community/plugin/802230205741773645/Spacers\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\"><em>Spacers</em></a><em> plugin by the UX 82 team.</em></p>","id":"1090575528951853742","installCount":191,"lastUpdateDate":"2022-03-29T09:59:36.242Z","likeCount":14,"name":"Spaces","publisherHandle":"AREA17","publisherId":"999339984261594238","publisherName":"AREA 17","runCount":297,"viewCount":905},{"description":"<p>Export your components and design system to Frontdrop, integrate the generated code into your web application codebase and publish your website or app.</p><p><br></p><h2><strong>How to use the plugin?</strong></h2><ul><li>First create a new account&nbsp;<a href=\"https://app.frontdrop.io/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">here</a>&nbsp;in Frontdrop app</li><li>Select the frame you want to tranform into code and run our plugin</li><li>Hit “Send to Frontdrop”</li><li>Go to your dashboard and your code is ready</li></ul><p><br></p><h2><strong>Code Export</strong></h2><ul><li>Html and CSS</li></ul><p><br></p><h2><strong>Limitations</strong></h2><p>The current version of the Frontdrop design to code plugin does not yet support</p><ul><li>Responsive code (WIP)</li><li>Component overrides and variants (WIP)</li><li>Rich-text elements (WIP)</li></ul><h2><br></h2><h2><strong>About Us</strong></h2><p><a href=\"http://frontdrop.io/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Frontdrop.io</a>&nbsp;is a tool that help you skip the 80% of the work building interfaces</p><p><br></p><h2><strong>Follow Us</strong></h2><p><a href=\"https://twitter.com/frontdrop\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Twitter</a>&nbsp;-&nbsp;<a href=\"https://www.linkedin.com/company/frontdrop/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">LinkedIn</a>&nbsp;-&nbsp;<a href=\"https://www.instagram.com/frontdrop.io/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Instagram</a></p><p><br></p><h2><strong>Support/Community</strong></h2><p>Need help? Join us on our&nbsp;<a href=\"https://join.slack.com/t/frontdropcommunity/shared_invite/zt-181bjy37n-9CJntSqNwxuSms~MENrGSg\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Slack community</a>&nbsp;and discuss with one of our team members.</p>","id":"1090663318495950641","installCount":347,"lastUpdateDate":"2022-06-24T14:05:00.437Z","likeCount":22,"name":"Frontdrop","publisherHandle":"gabytabora","publisherId":"1077630619989765166","publisherName":"Gabriela Tabora","runCount":417,"viewCount":650},{"description":"<p><strong>Export all images</strong></p><p><br></p><p>With only one command you can make all images exportable:</p><ul><li>PNG</li><li>JPG</li><li>SVG</li><li>PDF</li></ul><p><br></p><p><strong>Identify which images are not exportable</strong></p><p><br></p><p>You can easily highlight the images that are not with the export option.</p><p><br></p><p>---</p><p><br></p><p>You can see more details at <a href=\"https://figmager.evellynlima.com.br/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Figmager's page</a>.</p>","id":"1090733792379662221","installCount":887,"lastUpdateDate":"2022-04-01T19:09:21.249Z","likeCount":4,"name":"Figmager","publisherHandle":"evelew","publisherId":"933697854651185257","publisherName":"Evellyn Lima","runCount":1423,"viewCount":1768},{"description":"<p>Plugin that turns frame contents to raster image and puts it as frame fill to optimize resource usage and scaling workflow.</p>","id":"1091012536113701053","installCount":299,"lastUpdateDate":"2022-05-17T21:02:24.409Z","likeCount":1,"name":"Illustrations Optimizer","publisherHandle":"alexzavrazhniy","publisherId":"135339","publisherName":"Alex Zavrazhniy","runCount":696,"viewCount":1110},{"description":"<p>Create an org chart in Figma from a JSON or a YAML file.</p><p><br></p><p>Check <a href=\"https://github.com/mamuso/figma-orgchart\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">the repository</a> for examples and structure details.</p>","id":"1091247524080548244","installCount":90,"lastUpdateDate":"2022-03-31T06:30:27.638Z","likeCount":8,"name":"Orgchart","publisherHandle":"mamuso","publisherId":"488352","publisherName":"manuel muñoz solera","runCount":132,"viewCount":315},{"description":"<p>In many cases, we must share the Figma Preview links of frames separately. I have to share all my frames preview/prototype links in an excel sheet with my clients. This plugin helps me get each frame link separately and helps to generate a CSV file of each frame link.</p><p><br></p><p><strong>Features</strong></p><p>This is a beta release of this project. Feel free to <a href=\"https://github.com/saadh393/FigmaFramesToCSV\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">contribute</a> and add new features. Currently the shortlist of features are -</p><p>- Export the whole list as CSV</p><p>- Copy link by clicking on the input field</p><p><br></p><p><strong>How to Use</strong></p><p>Go to plugins and click on <strong>\"Figma Frames to CSV\" </strong>It will show the list of links of your frames. Simply click on the links It will automatically copied into your clipboard.</p><p><br></p><p><strong>Contact</strong></p><p>Email - <a href=\"mailto:saadh393@gmail.com\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">saadh393@gmail.com</a></p><p>Github - <a href=\"http:// https://github.com/saadh393\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Saad Hasan</a></p><p>Website -<a href=\"https://saadh393.github.io/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\"> Saad Hasan</a></p>","id":"1091265106774177196","installCount":89,"lastUpdateDate":"2022-03-31T12:50:10.425Z","likeCount":3,"name":"Figma Frames to CSV","publisherHandle":"saadh393","publisherId":"856144205782475806","publisherName":"Saad Hasan","runCount":159,"viewCount":456},{"description":"<h2>A simple plugin to generate random currency amounts into Figma.</h2><p><br></p><p>Perfect for designers that are working on financial products, e.g. transaction lists.</p><p><br></p><ul><li>Pound, Dollar and Euro supported</li><li>Ability to hide currency symbols</li><li>Ability to hide decimals</li><li>All ranges of sizes</li></ul><p><br></p><p>Made by <a href=\"https://kishpatel.com/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Kish Patel</a></p>","id":"1091267896551604658","installCount":91,"lastUpdateDate":"2022-04-30T13:16:49.581Z","likeCount":3,"name":"Amountify","publisherHandle":"golightyear","publisherId":"1062305036892524342","publisherName":"Lightyear","runCount":167,"viewCount":223},{"description":"<p>500+ real messages database. Forget about lorem ipsum. Make your layouts look real.</p><p><br></p><p>Just choose a keyword and pick up a real headline for your website layout or a message for your ad campaign.</p>","id":"1091699858690508711","installCount":1010,"lastUpdateDate":"2022-05-16T08:08:00.352Z","likeCount":14,"name":"Text Hunter","publisherHandle":"insight_hunter","publisherId":"1050317952791592289","publisherName":"Insight Hunter","runCount":1245,"viewCount":1316},{"description":"<p>All your texts in one place - Localize your Figma projects with Lingohub!</p><p>&nbsp;</p><p>With Lingohub you localize your projects in no time! Whether they are web or mobile apps, games, or websites. We provide you with continuous translation management and a workflow that is smoothly integrated into your product development process.</p><p>&nbsp;</p><p>With our Figma plugin you can easily <strong>push </strong>your text segments <strong>straight from Figma to Lingohub</strong>. After your translation has been completed, simply <strong>pull </strong>the texts <strong>directly </strong>from Lingohub. Just like that you can view your localized design in Figma.</p><p>&nbsp;</p><p>Your translators<strong> </strong>have an added benefit<strong> </strong>too, as they are able to check the context<strong> </strong>of each text segment while translating. <strong>Screenshots </strong>of your design are <strong>automatically uploaded </strong>to Lingohub. The days of manually uploading screenshots are over.</p><p>&nbsp;</p><p>What can you do with Lingohub?</p><ul><li>Push and pull your text segments directly from Figma to Lingohub and vice-versa.</li><li>Different teams working together on localization.</li><li>Automate your software localization.</li><li>Translate with our powerful editor.</li><li>A translation tool you can depend on: term base, translation memory, quality checks, ...</li></ul><p>&nbsp;</p><p>For more information on how to use our Figma plugin, visit our Help Center article https://help.lingohub.com/en/.</p><p>&nbsp;</p><p>To use the Figma plugin a paid account is required. We provide you with a 14-day free trial<strong> </strong>where all features are available for you to try. If you need help, feel free to contact our https://lingohub.com/support at any time. Or schedule a free https://lingohub.com/demo and learn all about Lingohub.</p>","id":"1091712683693829044","installCount":29,"lastUpdateDate":"2022-04-06T12:39:32.015Z","likeCount":2,"name":"Lingohub","publisherHandle":"lingohub","publisherId":"1091706002698476085","publisherName":"Lingohub","runCount":42,"viewCount":128},{"description":"<p><strong>Compare ideas with your stakeholders and design with confidence.</strong></p><p><br></p><p><a href=\"https://design.vs.design\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Design VS Design</a> enables designers to effortlessly test their ideas with visual A/B surveys. The simple format of A/B surveys compels the testers into expressing their opinion leaving you with clean reports &amp; insights to explore. Just select two layers you want to survey and activate the plugin.&nbsp;</p><p><br></p><p><strong>Ideal for:&nbsp;</strong></p><ul><li>Testing visual iterations</li><li>Testing redesigns</li><li>Quick UI reviews&nbsp;</li></ul><p><br></p><p><strong>How to use it:&nbsp;</strong></p><ol><li>Select 2 layers, groups, or frames and invoke the plugin.</li><li>Customize the question, option names, and background color.</li><li>Click Upload &amp; share the link with your testers.&nbsp;</li></ol><p><br></p><p>(You do not need an account on Design VS Design to use this plugin)</p>","id":"1091754336051921901","installCount":267,"lastUpdateDate":"2022-04-01T17:44:54.463Z","likeCount":21,"name":"Design VS Design","publisherHandle":"mihnea","publisherId":"97668","publisherName":"Mihnea Zamfir","runCount":350,"viewCount":1031},{"description":"<p>This is the official <a href=\"https://www.figma.com/community/file/943862931766586094/Cherry-Design-System?fuid=363765093135362249\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\"><strong>Cherry Design System</strong></a> plugin. Please download the design system file from Figma Community in order to generate your Cherry theme design tokens.</p><p><br></p><p><strong>Sass</strong></p><ul><li>Generate the the theme variables for Sass</li><li>Saves variables as <strong>theme.scss</strong></li><li>Output format:</li></ul><p><br></p><pre class=\"ql-syntax\" spellcheck=\"false\">$screen-sm: 576px;\n$color-primary: #f43f5e;\n$size-h1-desktop: 40px;\n</pre><p><br></p><p><strong>PostCSS</strong></p><ul><li>Generate the the theme variables for PostCSS</li><li>Saves variables as <strong>theme.css</strong></li><li>Output format:</li></ul><p><br></p><pre class=\"ql-syntax\" spellcheck=\"false\">@custom-media --screen-sm (min-width: 576px);\n:root {\n  --color-primary: #f43f5e;\n  --size-h1-desktop: 40px;\n}\n</pre><p><br></p><p><strong>React Components</strong></p><ul><li>Generate the the JSON theme for React Components using Emotion.js (css-in-js)</li><li>Saves variables as <strong>theme.js</strong></li><li>Output format:</li></ul><p><br></p><pre class=\"ql-syntax\" spellcheck=\"false\">{\n  breakpoints: [0, 576, 768, 992, 1200, 1440, 1920],\n  colors: {\n    primary: \"#f43f5e\"\n  },\n  sizes: {\n    h1: {\n      size: {\n        desktop: \"62px\"\n      }\n    }\n  }\n}\n</pre><p><br></p><p>Check out the documentation at: <a href=\"https://cherry.design/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://cherry.design/</a></p>","id":"1091785956842659849","installCount":95,"lastUpdateDate":"2022-04-09T13:38:00.937Z","likeCount":4,"name":"Cherry Theme Generator","publisherHandle":"luangjokaj","publisherId":"41384","publisherName":"Luan Gjokaj","runCount":133,"viewCount":435},{"description":"<p>Make any frame grayscale.</p><ol><li>Select a frame</li><li>Run this plugin</li><li>💥Now that frame is black and white💥</li></ol><p><br></p><p>This is useful to show WIP designs or to differentiate deprecated/old screens.</p><p><br></p><p>It works only at screen-level frames. Don't use it for components or nested frames. </p>","id":"1091815827328120861","installCount":1588,"lastUpdateDate":"2022-04-01T20:34:26.764Z","likeCount":9,"name":"Black and White","publisherHandle":"clodito","publisherId":"1038880459397665073","publisherName":"Claudio Angrigiani","runCount":2716,"viewCount":3287},{"description":"<h2>Quick prototyping of design projects</h2><p><br></p><p>So far this is the first version of the plugin and the functionality is not great, but you can fix it! Write your suggestions to us in support contact.&nbsp;Thank you very much!</p>","id":"1092077160453525690","installCount":272,"lastUpdateDate":"2022-04-03T16:07:54.098Z","likeCount":3,"name":"Prototype","publisherHandle":"d845b261_5bb0_4","publisherId":"913793057389863218","publisherName":"Никита Грега","runCount":480,"viewCount":988},{"description":"<p>(MVP) A blazing fast boilerplate generator for UI/UX Designers!</p>","id":"1092250509910822172","installCount":33,"lastUpdateDate":"2022-04-03T04:34:26.495Z","likeCount":5,"name":"Setup Zap","publisherHandle":"artsandiego","publisherId":"1998851","publisherName":"Art San Diego","runCount":44,"viewCount":88},{"description":"<p><a href=\"https://www.fable.app/?utm_source=figma&amp;utm_medium=figma-community-page&amp;utm_campaign=fable-export\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Fable</a> is a web-based motion design platform for the next generation of creators. It combines the power of Adobe with the accessibility of Figma and makes motion collaborative for teams.</p><p><br></p><p>This plugin allows you to seamlessly transfer editable layers from Figma to Fable.</p><p><br></p><p><strong>How to use the plugin</strong></p><ol><li>Open the plugin.</li><li>Select desired layers or frames on the canvas, and click the “Copy” button on the plugin.</li><li>To paste, open a project in Fable and press ⌘V.</li></ol><p><br></p><p><strong>Resources</strong></p><ul><li><a href=\"https://www.fable.app/academy/?utm_source=figma&amp;utm_medium=figma-community-page&amp;utm_campaign=fable-export\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Learn motion design with Fable Academy</a></li><li><a href=\"https://www.youtube.com/c/Fablemotion\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Subscribe to our Youtube channel</a></li><li><a href=\"https://join.slack.com/t/fablecreators/shared_invite/zt-fu09f9ao-7NErjufsCY7gI44i2D6XGA\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Join the Slack community</a></li></ul><p><br></p><p>If you have any questions or feedback, don’t hesitate to reach out to us at <a href=\"mailto:support@fable.app\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">support@fable.app</a>!</p>","id":"1093136289410156578","installCount":993,"lastUpdateDate":"2022-07-26T16:39:25.604Z","likeCount":72,"name":"Fable","publisherHandle":"fable_inc","publisherId":"1092869047508383100","publisherName":"Fable App","runCount":1371,"viewCount":3048},{"description":"<p><strong>Browse files in a tree structure contents (table of contents、list contents)</strong></p><ul><li>📇 Drag to create the directory structure and order you need.</li><li>📃 Add '!' at the top of the page or frame name to ignore.</li><li>📝 Change selection to update the changes in figma.</li><li>👈 Hit 'reset' to initialize the list.</li><li>📠 Let others use the Visit plugin to share a view of the directory structure.</li><li>If sometimes can't drag please reload plugin.</li></ul><p><br></p><p><strong>以树形目录结构浏览文件</strong></p><ul><li>📇 通过拖放来创建层级结构</li><li>📃 不需要显示的图层和页面，可以在名称前加上英文感叹号</li><li>📝 手动更改一下选中的图层可以刷新列表</li><li>👈 点击 'reset' 按钮重置列表</li><li>📠 让其他人在同一文件里打开Visit插件可以共享组织好的目录</li><li>如果拖动时出现Bug，可以更改一下选中的图层或者重启插件。</li></ul>","id":"1093156645748378684","installCount":187,"lastUpdateDate":"2022-05-14T04:45:30.650Z","likeCount":8,"name":"Visit","publisherHandle":"Xingzhuo","publisherId":"444804","publisherName":"Xing Zhuo","runCount":280,"viewCount":1188},{"description":"<h2><strong>Welcome to Toast Generator!</strong></h2><p><br></p><p>Generate beautifully themed Toast Notifications with 1-Click. Create pre-themed and pre-prepared toast in seconds.</p><p><br></p><p>Each toast has auto layout meaning you can update the layout once it has been created with ease.</p><p><br></p><p>Work with simple intuitive UI to generate a reusable component.</p><p><br></p><p>Any comments and suggestions to improve the plugin are much appreciated. Enjoy!<em>👍</em></p>","id":"1093303717667570973","installCount":261,"lastUpdateDate":"2022-04-16T16:09:59.556Z","likeCount":8,"name":"Toast Generator","publisherHandle":"karmitpatel","publisherId":"893157124498103904","publisherName":"Karmit Patel","runCount":379,"viewCount":1021},{"description":"<p>It supports multiple barcode formats EAN-13 ITF-14&nbsp;</p>","id":"1093339665834841390","installCount":503,"lastUpdateDate":"2022-04-10T23:32:26.002Z","likeCount":6,"name":"EAN-13 ITF-14 Barcode generator","publisherHandle":"48abe739_3903_4","publisherId":"55481","publisherName":"Евгений","runCount":857,"viewCount":561},{"description":"<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>","id":"1093676352744767137","installCount":62,"lastUpdateDate":"2022-04-10T00:31:51.626Z","likeCount":6,"name":"VRT","publisherHandle":"markacianfrani","publisherId":"939325069210137194","publisherName":"Mark Anthony Cianfrani","runCount":188,"viewCount":320},{"description":"<p>A small tool that creates uniform RICE prioritization cards for your feature planning.</p>","id":"1094030547749179419","installCount":74,"lastUpdateDate":"2022-04-11T07:44:07.428Z","likeCount":0,"name":"RICE Prioritization Calculator","publisherHandle":"bcgreenwood_rs","publisherId":"3370818","publisherName":"Ben Greenwood","runCount":105,"viewCount":84},{"description":"<p>Create high quality splines, shapes, spots by adding gradient along path effect to any curve. With collection of more than 250+ handcrafted and fully editable curves &amp; colors you will have unlimited options to combine.</p><p>By <a href=\"http://ruri.design\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">ruri.design</a> – your design superpowers!</p>","id":"1094343067414782306","installCount":5557,"lastUpdateDate":"2022-07-21T09:01:40.610Z","likeCount":145,"name":"Ruri – Splines","publisherHandle":"klavs","publisherId":"1194976","publisherName":"KB","runCount":7601,"viewCount":8353},{"description":"<p><strong>Powerful prototyping with code</strong></p><p>Bring your design to life with code in Figma.</p><p><br></p><p><strong>Design and Code</strong></p><p>Create powerful prototypes with JavaScript that make your design animated and interactive.</p><p><br></p><p><strong>Simple to Complex</strong></p><p>Prototyper is easy to get started and becomes more powerful as you go.</p><p><br></p><p><a href=\"https://prototyper.design\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">prototyper.design</a></p><p><a href=\"https://docs.prototyper.design\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">docs.prototyper.design</a></p>","id":"1094357790584717676","installCount":4299,"lastUpdateDate":"2022-07-17T15:19:07.982Z","likeCount":312,"name":"Prototyper","publisherHandle":"withdiagram","publisherId":"1004440237929203297","publisherName":"Diagram","runCount":5160,"viewCount":10759},{"description":"<p>Style Finder lists all the color styles (currently not support text styles, but will be in the future!), and focus into the node which uses the style.</p><p><br></p><p>If you have any issues or suggestions, please post them at <a href=\"https://github.com/3-shake/figma-style-finder/issues\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://github.com/3-shake/figma-style-finder/issues</a> .</p>","id":"1094509452374115777","installCount":279,"lastUpdateDate":"2022-04-10T17:37:48.991Z","likeCount":6,"name":"Style Finder","publisherHandle":"qsf","publisherId":"88252","publisherName":"たふみ","runCount":568,"viewCount":808},{"description":"<p>This Figma Plugin provides cloud services as SVG icons</p>","id":"1094628499782224426","installCount":1585,"lastUpdateDate":"2022-05-21T13:52:06.722Z","likeCount":5,"name":"Cloud Icons","publisherHandle":"boring_space","publisherId":"868510140521184175","publisherName":"Sebastian","runCount":2177,"viewCount":1472},{"description":"<h2>Why Icon Master?</h2><p>While working with icons, the most <strong>annoying thing is different sizes of icons</strong>. It becomes more painful, when we have to use <strong>icons from third party library</strong>. Then <strong>resizing </strong>icons and <strong>creating icon components</strong> become a hard task. Here Icon Master comes to assist us.</p><h2><br></h2><h2>Features</h2><ul><li>We can <strong>resize icons</strong></li><li>We can <strong>add containers around icons</strong></li><li>Icon will be automatically<strong> converted into components</strong></li><li>We can <strong>change colors</strong> of the new icons</li><li>Many more useful features are coming...</li></ul><h2><br></h2><h2>How to use?</h2><p>It's as simple as a snap. What you have to do is:</p><ul><li>Just <strong>select one or more frames or vector nodes</strong></li><li><strong>Run </strong>the<strong> Icon Master</strong> plugin</li><li>Provide expected<strong> container and icon sizes</strong> as well as<strong> color of icon</strong></li><li>And Boom... (Click the <strong>boom button</strong>)</li><li>A <strong>new frame with new icons</strong> will be generated</li></ul><h2><br></h2><h2>Your help needed</h2><p>This plugin may have several errors or lack of features. In that case we need your help.</p><p><strong>If you face any issue, please, kindly report that in the comment section.</strong></p><p><strong>Also if you have any feature request, please, tell us more about it.</strong> We'll definitely try to implement (if the feature is useful).</p><p><br></p><p>You can meet me here: <a href=\"https://www.showrin.com/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://www.showrin.com/</a></p>","id":"1094734317200686715","installCount":1542,"lastUpdateDate":"2022-04-10T17:05:29.505Z","likeCount":17,"name":"Icon Master","publisherHandle":"showrin","publisherId":"846393417697774400","publisherName":"Showrin Barua","runCount":2085,"viewCount":2360},{"description":"<h2><strong>Welcome to Card Generator!</strong></h2><p><br></p><p>Create Beautiful, Highly Customizable Cards with a few clicks. Best part about it... each card comes with <strong>Auto-layout</strong> sections meaning it is highly customizable the once created.</p><p><br></p><p>Enjoy a <strong>hassle free, intuitive UI</strong> to generate your favorite card component and use it in your designs.</p><p><br></p><p><strong>Custom properties</strong> include but not limited to text content, images, color, background, and border.</p><p><br></p><p>Any suggestions to improve the application are welcomed. Enjoy 👍</p>","id":"1094766738311192197","installCount":1358,"lastUpdateDate":"2022-04-15T00:24:53.972Z","likeCount":18,"name":"Card Generator","publisherHandle":"karmitpatel","publisherId":"893157124498103904","publisherName":"Karmit Patel","runCount":1843,"viewCount":2374},{"description":"<p><a href=\"https://wordsvil.com\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Wordsvil.com</a> is made to help you and your team to organize, translate and update all text in your app and across different departments. Keep everyone on the same page.</p><p><br></p><ul><li>Upload your text file (.csv, .json), or create it directly from your Figma file</li><li>Invite team members to join you in Figma or on the webapp to work with you</li><li>Update and sync your files through the plugin or webapp, add new languages, ensure everyone is on the same page.&nbsp;</li><li>Export for end-products in .csv and .json. (directly API coming soon)&nbsp;</li></ul><p><br></p><p>How it works:&nbsp;</p><p>Wordsvil.com connects your Figma text objects with your apps text files. The Figma object name will be synced with the text keys, to keep both text values the same.</p><p><br></p><ul><li>Install the plugin, or log into the <a href=\"https://wordsvil.com\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">website</a> and set up an account</li><li>Add a new project and use “from Figma page” if you want to start from your Figma files, or utilize the other option to start from scratch, from csv or json files.&nbsp;</li><li>After the project is created, the plugin/webapp serves as the source of truth.&nbsp;</li><li>Within the project, click on the menu and select Team to add collaborators to a project.</li></ul><p><br></p><p>For csv follow this format. Example:&nbsp;</p><pre class=\"ql-syntax\" spellcheck=\"false\">key,notes,en,de&nbsp;\nwelcome,,Welcome!,Willkommen!\n</pre><p><br></p><p>For json follow this format. Example:&nbsp;</p><pre class=\"ql-syntax\" spellcheck=\"false\">{ \"EN\": { \"welcome\": \"Welcome!\",&nbsp; “buy”: ”Buy now” },\n&nbsp;&nbsp;\"DE\": { \"welcome\": \"Willkommen!\", “buy”: ”Kauen”&nbsp; }}\n</pre><p><br></p><p>keywords/tags</p><p>copy, content, text, strings, writing, localization, language, translation, words, sync, translate</p>","id":"1094840411334121111","installCount":52,"lastUpdateDate":"2022-05-02T16:08:25.152Z","likeCount":6,"name":"Wordsvil - The Text Management System","publisherHandle":"wordsvil","publisherId":"1094832439426041742","publisherName":"Wordsvil","runCount":71,"viewCount":389},{"description":"<p>This Figma plugin offers you the possibility to load textures directly from Figma into your Blender file.</p><p>You can apply them directly to selected objects and faces or simply paste them as a plane.</p><p><br></p><p>This plugin is only the <strong>\"bridge\"</strong> between Blender and Figma. You also need to install the Blender addon. <strong>It's completely free</strong>, but I would of course appreciate a small donation if you like it.</p><p><br></p><p><strong>Blender-Addon</strong></p><p><a href=\"https://ph1p.gumroad.com/l/figma-blender-addon\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://ph1p.gumroad.com/l/figma-blender-addon</a></p><p><br></p><p>---</p><p><br></p><p><strong>Preview</strong></p><p><a href=\"https://twitter.com/phlp_/status/1513950877513617410\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://twitter.com/phlp_/status/1513950877513617410</a></p><p><br></p><p><strong>Source Code</strong></p><p><a href=\"https://github.com/ph1p/figma-blender\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://github.com/ph1p/figma-blender</a></p>","id":"1095047912165244715","installCount":932,"lastUpdateDate":"2022-05-11T17:04:02.898Z","likeCount":26,"name":"Blender connect","publisherHandle":"p","publisherId":"791757","publisherName":"Phil","runCount":1427,"viewCount":2805},{"description":"<p>Lorem Ipsum just for Persian/Farsi</p>","id":"1095050785899049772","installCount":329,"lastUpdateDate":"2022-04-10T19:38:30.890Z","likeCount":3,"name":"Persian Lorem","publisherHandle":"iamnonroot","publisherId":"1004124862462883494","publisherName":"Root","runCount":511,"viewCount":306},{"description":"<p>Integrate Crylic with Figma!</p><p><br></p><p>This plugin supports importing elements exported through Crylic.</p><p>Learn more at https://docs.crylic.io/workflows/exporting-to-figma</p>","id":"1095578080264600867","installCount":21,"lastUpdateDate":"2022-04-12T21:38:29.174Z","likeCount":0,"name":"Crylic","publisherHandle":"saswat","publisherId":"882945","publisherName":"Saswat Bhattacharya","runCount":22,"viewCount":48},{"description":"<p>A project using&nbsp;<a href=\"https://www.tensorflow.org/js\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">TensorFlow JS</a>&nbsp;to lint icons, that helps designers by find out proper icons from their own design system.</p>","id":"1095981620486574803","installCount":596,"lastUpdateDate":"2022-04-20T13:46:40.248Z","likeCount":6,"name":"Iconography ML","publisherHandle":"dusskapark","publisherId":"908643724521269527","publisherName":"Joo Hyung Park","runCount":756,"viewCount":703},{"description":"<p>Select multiple instances and convert them into variants of their main component, then seamlessly swap the variants into your design.</p><p><br></p><p>Video Demonstration: <a href=\"https://youtu.be/YEsHiadBWhs\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://youtu.be/YEsHiadBWhs</a></p><p><br></p><p><strong>How to Use</strong></p><ol><li>Select 1 or more instances which you have modified from the original component. (it works best if you have named them descriptively as the variant will use this name)</li><li>Right click and run the <strong>Convert to Variant</strong> plugin from your Plugin menu.</li><li>Enjoy your new variants, ready for you to reuse elsewhere in your design.</li><li>Tidy up your property name, the variations will be created in the first property which defaults to 'Property 1'</li></ol><p><br></p><p><strong>Requirements</strong></p><ul><li>Main Component must be local</li></ul><p><br></p><p><strong>Notes</strong></p><ul><li>Native 'Combine as Variants' feature is similar but the main difference is that this plugin creates the variants as children of the existing main component rather than under a new component. Cheers <strong>Alexandre Soares</strong> for sharing this feature.</li></ul>","id":"1096046003407512381","installCount":114,"lastUpdateDate":"2022-04-13T12:16:19.861Z","likeCount":7,"name":"Convert to Variant","publisherHandle":"jmckennay","publisherId":"4151321","publisherName":"James McKennay","runCount":168,"viewCount":272},{"description":"<p>Создавайте изображения по вашему шаблоны</p>","id":"1096070512356252516","installCount":23,"lastUpdateDate":"2022-05-19T12:35:26.279Z","likeCount":2,"name":"CreativeGenerator","publisherHandle":"ORRA","publisherId":"1653767","publisherName":"Дмитрий Гетцман","runCount":30,"viewCount":92},{"description":"<p>Generate a range of icon sizes using just a source component. </p><p><br></p><p>Useful for creating iOS applications, or browser extensions in both Chrome and Safari.</p><p><br></p><p>Work in progress at the moment, but, personally, I find this useful even in its current minimal (viable) state.</p><p><br></p><p>Open to feedback and / or collaboration. Thanks!</p>","id":"1096179806197368807","installCount":1856,"lastUpdateDate":"2022-04-26T18:05:40.878Z","likeCount":4,"name":"iconic","publisherHandle":"kmckiern","publisherId":"1395031","publisherName":"kmckiern","runCount":3042,"viewCount":3349},{"description":"<p>Mockreate generates random data, math and import your custom JSON data in your designs.</p><p>Now with dark mode!🌓</p><p><br></p><p><strong>Features and datasets:</strong></p><p><br></p><p>- First names (sort between Male, Female or both)</p><p>- Last names</p><p>&nbsp;- Full names (first and last names)</p><p>- Usernames</p><p>- Emails</p><p>- Phone numbers (choose phone prefix and lenght)</p><p>- Date (choose year and formatting options)</p><p>- Time (choose formatting options)</p><p>- Number range (pick 2 numbers and it will generate random numbers in between)</p><p>- Money (generate random amounts given a range and a currency) and select the position of the currency symbol.</p><p>- Credit card numbers</p><p>- Custom dataset (import your custom json data via url)</p><p><br></p><p><strong>Layout options:</strong></p><p>- Select the number of generated results</p><p>- Font size</p><p>- Spacing between rows</p><p>- Preview data before adding them to your design</p>","id":"1096384653667384513","installCount":108,"lastUpdateDate":"2022-06-03T04:39:46.180Z","likeCount":7,"name":"Mockreate","publisherHandle":"fabiomonzani","publisherId":"1085511539679497425","publisherName":"Fabio Monzani","runCount":187,"viewCount":402},{"description":"<p>convert figma document to iliad-editor document</p>","id":"1096387372518990023","installCount":18,"lastUpdateDate":"2022-07-21T10:07:59.361Z","likeCount":1,"name":"Figma To Iliad","publisherHandle":"gdyudan","publisherId":"858998873633417440","publisherName":"鱼蛋","runCount":27,"viewCount":93},{"description":"<p>The Widget Code Generator plugin for Figma design allows you to design widgets and easily translate your designs into code. This Figma plugin generates code that you can copy and use to create a widget interface.</p><p><br></p><p>In order to add interactivity to your widget, you’ll need to edit the generated code to handle user events. Learn more in the <a href=\"https://www.figma.com/widget-docs/handling-user-events/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">widget API documentation</a>.</p><p><br></p><p>Learn more about how to use the Widget Code Generator in the <a href=\"https://help.figma.com/hc/en-us/articles/5601345554967\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Help Center</a>.</p><p><br></p><p>---</p><p>The Widget Code Generator plugin is licensed under <a href=\"https://www.figma.com/tos/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Figma’s Terms of Service</a>, unless you have a different agreement with us for Figma Services.</p>","id":"1096460041736534298","installCount":1669,"lastUpdateDate":"2022-05-06T11:23:44.138Z","likeCount":68,"name":"Widget Code Generator","publisherHandle":"ymichael","publisherId":"4353268","publisherName":"Michael Yong","runCount":2061,"viewCount":2946},{"description":"<p>Tired of creating the same interaction properties for your component sets?</p><p>Use this plugin to turn any element to a component set with 4 predefined basic properties and wired interactions. All you have to do is just add your styles to variants.</p>","id":"1096509286169794919","installCount":553,"lastUpdateDate":"2022-04-19T19:53:25.075Z","likeCount":7,"name":"Interactive components template","publisherHandle":"gilyukhin","publisherId":"134337","publisherName":"George","runCount":825,"viewCount":1242},{"description":"<p>Run GitHub Actions workflows from Figma sending the selected page and all selected nodes as inputs.</p><p><br></p><h2>Setup for Figma</h2><p>Setup on Figma is straightforward. You just need to setup a new workflow clicking on the&nbsp;<code>+</code>&nbsp;button. You'll need a GitHub&nbsp;<a href=\"https://github.com/settings/tokens\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Access Token</a>&nbsp;to run workflows.</p><p><br></p><p>After that, you can select a&nbsp;<code>page</code>&nbsp;and one or more&nbsp;<code>nodes</code>&nbsp;from that page and click on&nbsp;<code>▶</code>. This will run the selected workflow, passing your selection as workflow' inputs.</p><p><br></p><h2>Setup for GitHub</h2><p>Before running a workflow for the first time, you'll need to properly setup a&nbsp;<a href=\"https://docs.github.com/en/actions/using-workflows\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">GitHub Actions workflow</a>&nbsp;😃</p><p>Checkout a working example&nbsp;<code><a href=\"https://github.com/marcomontalbano/figma-plugin-run-github-actions-workflows/blob/main/.github/workflows/from-figma.yaml\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">from-figma.yaml</a></code>.</p><p><br></p><h2>Figma Export PDFs</h2><p>What do you think about <em>exporting Figma content as PDF to an FTP Server, just clicking a button from Figma</em>? Would it be cool, isn't it?</p><p><br></p><p>Take a look at this&nbsp;<a href=\"https://github.com/marcomontalbano/figma-export-pdfs-action/blob/main/.github/workflows/from-figma.yaml\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">workflow</a>&nbsp;and find out how this is totally feasible. Just clone the workflow and setup this Figma plugin&nbsp;😉</p>","id":"1096890502176164513","installCount":81,"lastUpdateDate":"2022-04-15T22:18:31.484Z","likeCount":1,"name":"Run GitHub Actions workflows","publisherHandle":"marcomontalbano","publisherId":"922698","publisherName":"Marco Montalbano","runCount":116,"viewCount":406},{"description":"<p>You can export(copy) your frame names which are in page roots.</p>","id":"1096962616573634259","installCount":77,"lastUpdateDate":"2022-05-12T10:51:24.954Z","likeCount":2,"name":"Name Exporter","publisherHandle":"isoppp","publisherId":"2401172","publisherName":"isoppp","runCount":174,"viewCount":302},{"description":"<p>Tag any <strong>FILES</strong>, <strong>PAGES</strong> and <strong>FRAMES</strong>.</p><p>Highly <strong>customized</strong> Tags.</p><p><br></p><p>Manage your design <strong>Cross Files</strong>.</p><p><br></p><p>Support “<strong>Local / Document Storage</strong>”, “<strong>Cloud Storage</strong>” and “<strong>Connecting Notion Databases</strong>”.</p><p><br></p><p><a href=\"https://github.com/boybook/figma-tags/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">GitHub</a></p><p><br></p><p>给你的 <strong>文件、页面、Frame</strong> 打上标签。</p><p>超级自由的标签自定义设置与管理。</p><p><br></p><p><strong>跨文件</strong>地管理你的标签与设计，从此妈妈再也不用担心我找不到设计稿啦！</p><p><br></p><p>丰富的数据源选择：本地文档、本机储存、云同步服务、连接到 Notion 数据库</p>","id":"1097223080479352701","installCount":995,"lastUpdateDate":"2022-05-29T04:25:30.399Z","likeCount":69,"name":"Tags","publisherHandle":"boybook","publisherId":"862662455337533979","publisherName":"boybook","runCount":1329,"viewCount":1915},{"description":"<p>dummy text generator figma plugin.</p><p><br></p><h2>Options</h2><ul><li><strong>Create</strong>: create dummy text and <code>TextNode</code> together. Font installation is required because <a href=\"https://fonts.google.com/specimen/Inter\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Inter</a> font is used when creating.</li><li><strong>Replace</strong>: Change the contents of a <code>TextNode</code> that has already been created. It is applied to the font style that the existing TextNode had. (TextNode must have one font style. (Mixed style is not supported.)</li></ul><p><br></p><h2>Requirements</h2><p>Font installation is required because TextNodes are created when using the 'Create' option.</p><p><br></p><p>Lorem ipsum universal uses <a href=\"https://fonts.google.com/specimen/Inter\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Inter</a>.</p><p><br></p><h2>Supported Language</h2><ul><li>Korean</li><li>English</li></ul><p>If you want other language support, please leave it as <a href=\"https://github.com/SoYoung210/lorem-ipsum-universal/issues/new\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">GitHub Issue</a>(or Comment) or send me PR 😄. 🙌</p>","id":"1097438299470908389","installCount":2210,"lastUpdateDate":"2022-05-13T06:16:03.390Z","likeCount":3,"name":"Lorem ipsum universal","publisherHandle":"soso02","publisherId":"1876111","publisherName":"soyoung","runCount":2861,"viewCount":1402},{"description":"<h2>Get supa-powers to create, edit and manage beautiful gradients like never before!</h2><p><br></p><h2><strong>⚡️ Features :</strong></h2><p><br></p><ul><li>[NEW] Explore our new collection of 54 handpicked gradients 🔥</li><li>Create, edit and manage linear/radial/angular gradients fills and styles 🧑‍🎨</li><li>Quickly adjust <strong>gradient angle</strong> or <strong>scale</strong> 🔥</li><li>Gradients styles picker: switch between gradients styles with ease 🎨</li><li>Add, edit and manage gradient color stops</li><li>Precisely update color stop position and opacity 📏</li><li>Fill single stop colors with existing solid color styles</li><li>Built-in powerful color picker 🌈</li><li>Copy gradient CSS code and use in your web projects</li></ul><p><br></p><h2>Like this plugin?</h2><p><br></p><p><strong>Support me</strong> for more plugins and free resources:</p><ul><li>❤️ Like</li><li>🔥 Follow: <a href=\"https://linktr.ee/angelolibero_designs\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">@angelolibero</a></li><li>💬 Comment</li><li>📤 Share</li></ul>","id":"1097681662687985794","installCount":2057,"lastUpdateDate":"2022-05-05T19:22:33.499Z","likeCount":76,"name":"Supa Gradient","publisherHandle":"angelolibero","publisherId":"397901","publisherName":"Angelo Libero","runCount":2558,"viewCount":2778},{"description":"<p><strong>🌈Arco Toolbox 设计工具——你的工具多啦A梦口袋</strong></p><p>Arco Toolbox是由「字节跳动GIP UED团队」和 「架构前端团队」联合推出的Figma插件，帮助设计师和研发同学工提效的设计工具，包含Components、Tokens、Iconbox、和Palette四个主打功能：</p><p><br></p><p><strong>Components</strong>：快速定义组件样式，组件用法全知道</p><p><strong>Tokens：</strong>查看主题全局样式，设计token一目了然</p><p><strong>Iconbox：</strong>一键拖拽使用图标，支持在线调整，灵活配置，游刃有余</p><p><strong>Palette：</strong>强大色彩算法，快速生成属于你的调色板</p><p>欢迎广大设计师同学使用并提出宝贵建议～</p><p><br></p><p><strong>🌈 公众号</strong></p><p>Arco Design</p><p><br></p><p><br></p><p>---------------------------------------------------------------------------------</p><p><br></p><p><strong>🌈 Intro</strong></p><p>Arco Toolbox is a Figma plug-in jointly launched by Bytedance GIP UED team and the Infrastructure FrontEnd team. It is a design tool to help designers and developers improve efficiency in daily workflow. It includes the key functionalities: Components, Tokens, Iconbox, and Palette.</p><p><br></p><p><strong>Components: </strong>Quickly define component styles and know how to use them</p><p><strong>Tokens: </strong>View the global style of the theme and design Tokens at a glance</p><p><strong>Iconbox: </strong> Compressive collection of icons for use with a single drag and drop, supporting online adjustment and flexible configuration.</p><p><strong>Palette:</strong> Powerful color algorithm to create and customize your Palette with ease</p><p>Welcome to use the Arco Toolbox ,we look forward to your valuable suggestions～</p><p><br></p><p><strong>🌈 WeChat Official Account</strong></p><p>Arco Design</p>","id":"1097814681219767573","installCount":1926,"lastUpdateDate":"2022-07-18T15:10:24.392Z","likeCount":108,"name":"Arco Toolbox","publisherHandle":"ArcoDsystem","publisherId":"1065153627623827293","publisherName":"ArcoDesign","runCount":2538,"viewCount":3673},{"description":"<p>Create a page in Figma linked to a story card. Useful if you're managing your designs via a kanban board.</p>","id":"1098283564936735538","installCount":60,"lastUpdateDate":"2022-04-19T16:28:23.409Z","likeCount":0,"name":"Create Story Page","publisherHandle":"karlynelson","publisherId":"1090922","publisherName":"Karly Nelson","runCount":112,"viewCount":340},{"description":"<p>Quickly generate placeholder dates for your mockups, and format those dates however you want. This plugin relies heavily on the basic formatting features from <a href=\"https://day.js.org/docs/en/display/format\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">day.js</a>.</p><p><br></p><p>There are plenty of plugins out there that help populate your design with placeholder data. None of them provide flexibility with dates. This plugin was created to fill this gap.</p><p><br></p><p>At this time, Placeholdate does not support locales or advanced formatting. If this is a feature you need, please submit a <a href=\"https://github.com/ngblaylock/figma-placeholdate/issues\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">GitHub Issue</a> explaining your use case and the expected output.</p><p><br></p><h2>Examples</h2><p>If you are unfamiliar with day.js, you can try out these examples by pasting the format in the Date Format field in the plugin UI. These examples assume that the randomly selected date is set to \"2022-04-25T22:16:35-06:00\".</p><p><br></p><ul><li><code>YYYY-MM-DD</code> = 2022-04-25</li><li><code>MM/DD/YYYY</code> = 04/25/2022</li><li><code>M/D/YY</code> = 4/25/22</li><li><code>MMM D, YYYY</code> = Apr 25, 2022</li><li><code>MMMM D, YYYY</code> = April 25, 2022</li><li><code>dddd MMMM D, YYYY</code> = Monday April 25, 2022</li><li><code>hh:mm a</code> = 10:16 pm</li><li><code>hh:mm:ss A</code> = 10:16:35 PM</li><li><code>[Meeting:] MMM D @ hh:mm A</code> = Meeting: Apr 25 @ 10:16 PM</li></ul><p><br></p><p>Many more combinations can be found on the <a href=\"https://day.js.org/docs/en/display/format\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">day.js documentation</a>.</p><p><br></p><h2>Features</h2><ul><li>Select multiple text layers to generate multiple random dates.</li><li>Format dates according to your needs. The default is <code>YYYY-MM-DD</code> when the plugin is first opened.</li><li>Select a date range to start and end the random generation. The default is two years before and after the day the plugin is first opened.</li><li>Sort the generated dates in random order, ascending order, or descending order. <strong>NOTE:</strong> due to some Figma limitations, the order is set by when the text node was created. It will not sort on layer position or x/y position on the page.</li><li>Placeholdate will remember your last used format and options when you re-open the plugin.</li></ul><p><br></p><h2>Be Aware of the Following</h2><ul><li>Make sure to select text layers for this to work. Selecting a frame or group will not insert dates into child text layers.</li><li>Make sure that the starting date option is before the ending date. It will tell you if it is not the case.</li><li>Typing out the year in the start or end date field <em>can</em> accept more than 4 digits, but it will produce unexpected results. Just don't do it.</li></ul>","id":"1098444899707858859","installCount":214,"lastUpdateDate":"2022-04-26T05:27:15.535Z","likeCount":1,"name":"Placeholdate","publisherHandle":"ngblaylock","publisherId":"917257510935346040","publisherName":"Nathan Blaylock","runCount":370,"viewCount":525},{"description":"<p>Create and add lively memojis to your design with Memotion—set of <strong>1000++</strong> of possible generated custom made memoji with not-so-generic facial expression 😉</p><p><br></p><p>Set your emotion, choose the right character, spruce up the background colors, and <strong>voila!</strong> Just few clicks and Memotion is there for you.</p><p><br></p><p>Future roadmap 🚀</p><ul><li>Add more character</li><li>Add more emotion</li></ul><p><br></p><p>→ <a href=\"https://edoputra.com/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Edo</a> / Designer</p><p>→ <a href=\"https://www.instagram.com/achan.id/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Achan</a> / Developer</p><p>→ <a href=\"https://www.instagram.com/rainattack\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Oka</a> / Cover Art</p><p>→ <a href=\"http://teratotech.com\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">teratotech.com</a></p>","id":"1098484173441741771","installCount":2344,"lastUpdateDate":"2022-05-26T02:48:27.044Z","likeCount":53,"name":"Memotion","publisherHandle":"terato","publisherId":"935722504480332413","publisherName":"Terato","runCount":3293,"viewCount":3048},{"description":"<p>Using the Bynder alongside Figma has never been easier. Connecting Bynder to Figma removes interruptions from your design workflow by enabling downloads from Bynder and providing access to your creative assets, stored in your asset bank, directly in Figma.</p><p><br></p><p>You can also upload and update assets in Bynder with your latest designs Figma.</p><p><br></p><p>To enable access for your account, send us an <a href=\"mailto:toni.aquino@bynder.com\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">email</a></p>","id":"1098735756232705324","installCount":66,"lastUpdateDate":"2022-07-07T08:22:56.694Z","likeCount":2,"name":"Bynder","publisherHandle":"877909e0_286f_4","publisherId":"2310992","publisherName":"Raviteja Lingineni","runCount":106,"viewCount":310},{"description":"<h2><strong>Copalette is for generating color palettes based on primary colors</strong></h2><p><br></p><p><strong>Usage</strong></p><ol><li>choose the color you want</li><li>Name your color</li><li>Set the number of colors you want to generate from the main color</li><li>Set your circle if you want<em> (optional)</em> <strong>suggested default settings</strong></li><li>Set circle spacing if you want <em>(optional)</em> <strong>suggested default setting</strong></li><li>The last step choose horizontal or vertical orientation</li><li>Then press the generate button</li></ol><p><br></p><p>Enjoy!</p><p>designwitharifin🖖</p><p><br></p>","id":"1098915836811744757","installCount":64,"lastUpdateDate":"2022-04-22T12:28:18.180Z","likeCount":2,"name":"Copalette","publisherHandle":"zainalarifin","publisherId":"1769633","publisherName":"Zainal Arifin","runCount":102,"viewCount":224},{"description":"<h2>Quickly Export and Import CSV Copy Decks</h2><p><br></p><p>Looking for an easy way to manage copy decks in your product design process? Text Porter might be what you are after.</p><p><br></p><p>Text Porter will generate a CSV file containing text element labels, text and the root frame name. The plugin will also export PNG's of all the root frames for reference when providing to copywriters outside of Figma.</p><p><br></p><p>Exclusion options allow you to choose which text elements you would like to have exported by Text Porter.</p><p><br></p><p>Supports updating both <strong>text</strong> and <strong>name</strong> of text elements.</p><p><br></p><h2>How To Use</h2><p><br></p><ol><li>Select your <strong>frames</strong> containing the UX copy you would like to export</li><li>Run the Text Porter plugin and click the \"<strong>Export</strong>\" button to generate a zip file containing a CSV file and reference images</li><li>Send the zip to your copywriter and have them make the copy updates in the \"<strong>Text</strong>\" column and return the updated CSV file <strong><em>(Do not edit the ID column, this is used for the import process)</em></strong></li><li>Run the Text Porter plugin and click the \"<strong>Import</strong>\" button and selected the updated CSV file</li><li>Watch all the text element update with your new copy changes</li><li>Profit</li></ol><p><br></p><p><strong>Note:</strong> Does not currently play well with mixed styles. Will replace with initial style used in mixed style element.</p>","id":"1099277867718022006","installCount":142,"lastUpdateDate":"2022-07-12T13:11:25.395Z","likeCount":4,"name":"Text Porter","publisherHandle":"kirkbentley","publisherId":"1069910633753426023","publisherName":"Kirk Bentley","runCount":208,"viewCount":503},{"description":"<p>Figma plugin that flattens a vector into as few paths as possible. Overlapping paths will be simplified so only the outer shape is defined. The flattening happens in-place.</p><h2><br></h2><h2>Usage</h2><ol><li>Select some layers</li><li>Run the plugin by going to&nbsp;<code>Plugins &gt; Really Flatten Vectors</code>&nbsp;or pressing&nbsp;<code>⌘/</code>&nbsp;and searching for&nbsp;<code>Really Flatten Vectors</code>.</li></ol><p><br></p><h2><strong>Links</strong></h2><ul><li><a href=\"https://github.com/stevenla/figma-plugin-really-flatten-vector\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">GitHub</a></li><li><a href=\"https://steven.la/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Personal Site</a></li></ul><p><br></p><h2>Known Issues</h2><ul><li>Flattening inside of a group/frame with auto-layout will not flatten in-place</li><li>Some invisible layers will be made visible</li></ul><p><br></p><h2>How does it work?</h2><p>Generally, Figma simplifies paths when using the built-in flatten&nbsp;<code>⌘E</code>&nbsp;on a union layer. This plugin simplifies the setup needed to get a pretty flattened output.</p><ol><li>Deeply ungroup/unframe the selection. This keeps positioning simple for some of the later operations.</li><li>Outline all strokes. Since this plugin merges everything into one path, strokes cannot be preserved. All strokes and text are outlined.</li><li>Use the first valid fill paint data to use as the output fill.</li><li>Use Figma's built-in flatten to merge the layers. Figma is pretty intelligent and will place the resulting layer in the correct spot in the layer hierarchy.</li><li>Create a union layer that contains the resulting layer from the previous step, and a clone of that same layer. This is because running the built-in flatten on a union with just one layer won't simplify the paths. If there is an exact replica inside the union, then the resulting layer will have simplified paths.</li><li>Run the built-in flatten against the union.</li></ol><h2><br></h2>","id":"1099596352042014853","installCount":536,"lastUpdateDate":"2022-04-24T01:33:37.977Z","likeCount":18,"name":"Really Flatten Vectors","publisherHandle":"stevenla","publisherId":"1717231","publisherName":"steven la","runCount":935,"viewCount":910},{"description":"<p><strong>Unofficial Stitches Plugin </strong>that converts Figma styles to Stitches config</p><p><br></p><p>Forked from Figma to Tailwind plugin <a href=\"https://github.com/jan-dh/figma-tailwindcss\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://github.com/jan-dh/figma-tailwindcss</a></p>","id":"1100032149303157177","installCount":21,"lastUpdateDate":"2022-04-24T12:15:39.837Z","likeCount":0,"name":"Figma To Stitches","publisherHandle":"michalhonc","publisherId":"1004318538748490248","publisherName":"Michal Honc","runCount":29,"viewCount":65},{"description":"<h2>Save and organize all of your views, for <strong>presentations</strong> and to organize your art boards.</h2><p><br></p><p>Features:</p><ul><li><strong>Save views from different pages</strong> it remembers position and zoom level</li><li><strong>Rename views</strong> whether it's a <em>wireframe</em>, a <em>logo</em> or a <em>hi-res mockup</em></li><li><strong>Presentation mode</strong> with next and prev controls</li><li><strong>Hide saved views</strong> from the presentation will let you save but skip when presenting</li><li><strong>Animated transitions</strong> impress clients and yourself with smooth transitions</li></ul>","id":"1100307441928314491","installCount":79,"lastUpdateDate":"2022-07-22T22:48:32.587Z","likeCount":14,"name":"Views","publisherHandle":"vanpaio","publisherId":"1100313056813954147","publisherName":"Vanpaio","runCount":181,"viewCount":704},{"description":"<p>Make a Frame or Group like \"Frame 3254\" into \"Frame\" by removing the number in layer name.</p>","id":"1100333225323617949","installCount":80,"lastUpdateDate":"2022-04-25T08:12:47.304Z","likeCount":0,"name":"Erase Frame&Group Number","publisherHandle":"7fee35e1_7e81_4","publisherId":"872003359676151204","publisherName":"徐炜楠(Wally)","runCount":171,"viewCount":257},{"description":"<p>Make it easier for developers to implement a component with each variant being labeled. Often times a full matrix covering all the combinations is too much noise for a handoff. You can configure the plugin to generate a component specs with only the most essential variants.</p>","id":"1100378294811680474","installCount":143,"lastUpdateDate":"2022-07-23T12:38:00.197Z","likeCount":11,"name":"specspec","publisherHandle":"yurynn","publisherId":"284986","publisherName":"Yury Nedomolkin","runCount":238,"viewCount":908},{"description":"<p>This plugin automatically generates a zipped <code>AppIcon.appiconset</code> container from a selected frame in Figma, and it contains all the PNGs for all Apple platforms.</p><p>The folder is pre-formatted, so you just need to drop the unzipped folder in your <code>Assets.xcassets</code>.</p><p><br></p><p><strong>How to</strong></p><ol><li>Select a frame containing your app icon.</li><li>Press <code>command + /</code> and search for <code>Xcode App Icon Exporter</code>.</li><li>Run the plugin.</li><li>Save and unzip the <code>AppIcon.appiconset.zip</code> file.</li><li>Drag and drop the new <code>AppIcon.appiconset</code> in Xcode's <code>Assets.xcassets</code>.</li><li>And Voilà 🪄</li></ol><p><br></p><p>The code is <a href=\"https://github.com/alikaragoz/figma-xcode-app-icon-exporter\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">open source</a>.</p><p>Enjoy and don't be shy, <a href=\"https://twitter.com/alikaragoz\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">say hi 👋</a></p>","id":"1100675815076145179","installCount":467,"lastUpdateDate":"2022-04-26T20:40:28.056Z","likeCount":8,"name":"Xcode App Icon Exporter","publisherHandle":"alikaragoz","publisherId":"1309259","publisherName":"Ali Karagoz","runCount":744,"viewCount":1211},{"description":"<p>Заменяет Segoe UI → Inter в макетах</p><p><br></p><p>http://consta.design</p>","id":"1100808562040625391","installCount":77,"lastUpdateDate":"2022-05-17T15:11:27.807Z","likeCount":2,"name":"Consta font replacer","publisherHandle":"kolebayev","publisherId":"136942","publisherName":"Ilya Kolebayev","runCount":154,"viewCount":216},{"description":"<p>An UI prototype generation tool for small IoT device LCD.</p><p><br></p><p>The current version is for internal test, only support certain resolutions and styles. Subsequent updates will optimize functionality and operational efficiency based on requirements.</p><p><br></p><h2>Usage</h2><p><br></p><p>A \"frame\" start by <code># Frame name</code> , and each items in frame start by <code>- </code> (note there is a space after the minus symbol)</p><p><br></p><p>Here is a basic sample:</p><pre class=\"ql-syntax\" spellcheck=\"false\"># Settings\n- General\n- Display\n- Sound &amp; vibration\n- Connect\n- Storage\n- About\n</pre><p><br></p><p>Also, we support some other syntaxes:</p><p><br></p><p>create a cell with value item on right:</p><pre class=\"ql-syntax\" spellcheck=\"false\">- Title / Value\n</pre><p><br></p><p>create a cell with switch component on right: (type <code> bool </code>on the end)</p><pre class=\"ql-syntax\" spellcheck=\"false\">- Title bool\n</pre><p><br></p><p>create a section header</p><pre class=\"ql-syntax\" spellcheck=\"false\">## Here is section title\n</pre><p><br></p><p>create a description block</p><pre class=\"ql-syntax\" spellcheck=\"false\">// here is descrption content\n</pre><p><br></p><p>Please contact me if you have any suggestions or ideas :)</p>","id":"1100980641659177336","installCount":247,"lastUpdateDate":"2022-04-28T02:35:03.450Z","likeCount":2,"name":"Menu Designer","publisherHandle":"93b02bc2_2666_4","publisherId":"1101177014969561399","publisherName":"ACFlow","runCount":783,"viewCount":803},{"description":"<p>Navigate directly to the layer by a link or get a link from a seleciton. Plugin also accepts link as parameter.</p><p><br></p><p>Based on the plugin <a href=\"https://www.figma.com/community/plugin/856246737669471011/Direct-Link\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Direct Link by Артем Клюквин </a></p><p>This version does not check if entered link points to the currently opened file. (Handy for usage in duplicated files, with link from the original file).</p>","id":"1101185540188408441","installCount":64,"lastUpdateDate":"2022-05-23T19:25:38.787Z","likeCount":5,"name":"Deep link","publisherHandle":"hrochodyl","publisherId":"558810","publisherName":"Peter Bartos","runCount":130,"viewCount":301},{"description":"<p>Prototype in FigJam? Now you can!</p><p><br></p><p>The maker of Tour Guide brings you Roller Coaster: A unique plugin that allows you to create simple clickable prototypes in FigJam and Figma by using connector arrows. It's simple!</p><p><br></p><ol><li>Create some objects.</li><li>Connect them with FigJam connector arrows (copy and paste them from FigJam for use in Figma).</li><li>Start the plugin!</li></ol><p><br></p><p>When you turn on Roller Coaster, selecting a connected object will act as a 'click' that will 'transport you' to its next destination. This is great for walking through a flow. More instructions on how to use are included in the plugin.</p><p><br></p><p>Note: Nested objects require additional clicks to trigger the navigation.</p><p><br></p><p>If you've ever wanted to present a connector flow in FigJam or Figma, give this plugin a try!</p>","id":"1102057195238507924","installCount":73,"lastUpdateDate":"2022-05-12T03:29:38.596Z","likeCount":0,"name":"Roller Coaster","publisherHandle":"ntfromchicago","publisherId":"1232151","publisherName":"Nelson Taruc","runCount":119,"viewCount":248},{"description":"<p><strong>Pathway is a tool for rapid usability tests: it helps to get actionable insights on your product before the development stage.</strong></p><p><br></p><p>Create a test, import your Figma prototype (or use any other methodologies, like First Click testing or Preference), send a link to your testers (or hire testers on Pathway) and get test results with comprehensive analytics in a matter of minutes.</p><p><br></p><p>This plugin helps to import your prototype to the Pathway.</p><p><br></p><p><strong>How it works:</strong></p><p><br></p><ol><li>Create a test on Pathway (<a href=\"http://pthwy.design\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">pthwy.design</a>)</li><li>Add a Figma block</li><li>Import prototype using the plugin and paste your unique prototype code inside the Figma block</li></ol><p><br></p><p>Learn more on <a href=\"http://pthwy.design\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">pthwy.design</a></p>","id":"1102613500351696592","installCount":278,"lastUpdateDate":"2022-07-11T12:36:52.627Z","likeCount":6,"name":"Pathway","publisherHandle":"pthwydesign","publisherId":"74938","publisherName":"ST","runCount":516,"viewCount":1176},{"description":"<p>Plugin para analizes de dados da takeblip</p>","id":"1102686685731363583","installCount":25,"lastUpdateDate":"2022-07-13T14:25:55.159Z","likeCount":3,"name":"BlipAnalytics","publisherHandle":"omnigestor","publisherId":"1022273916590113257","publisherName":"Omnigestor Soluções em Tecnologia","runCount":33,"viewCount":136},{"description":"<p>Design in 2D like you always do. Test instantly in WebVR and share with developers and stakeholders</p><p><br></p><ul><li><a href=\"https://www.figma.com/community/file/1104527471122464471\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Download Example Template</a></li><li><a href=\"https://app.draftxr.com/vr/AMPa5p\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">View Example in WebVR</a></li></ul>","id":"1103058929019282492","installCount":305,"lastUpdateDate":"2022-05-11T03:38:50.535Z","likeCount":10,"name":"DraftXR","publisherHandle":"draftxr","publisherId":"289592","publisherName":"DraftXR","runCount":458,"viewCount":967},{"description":"<p>Copy and paste Figma layouts and convert them to production ready jsx code</p>","id":"1103312279536594181","installCount":31,"lastUpdateDate":"2022-06-13T11:33:26.111Z","likeCount":2,"name":"Fiona Copy Pasta","publisherHandle":"marianrick","publisherId":"1875977","publisherName":"Marian Rick","runCount":44,"viewCount":61},{"description":"<p>A simple plugin to attach notes to layers and search for created notes.</p>","id":"1103354597235211595","installCount":380,"lastUpdateDate":"2022-06-18T15:42:44.449Z","likeCount":7,"name":"Project notes","publisherHandle":"nullpointone","publisherId":"2008047","publisherName":"Arun Raj","runCount":1036,"viewCount":1245},{"description":"<p>Write design document easily in Figma</p><p>在Figma中轻松撰写设计文档</p><p>---</p><p>If you have any new idea about this plugin, plz email me at monicacaszy@outlook.com, or just leave a comment here🥳🥳🥳</p><p>有什么想法&amp;建议，发邮件至monicacaszy@outlook.com，或者直接在评论区评论也行～</p>","id":"1103493732826231240","installCount":185,"lastUpdateDate":"2022-07-26T08:36:27.002Z","likeCount":19,"name":"Anno-tation","publisherHandle":"chaine","publisherId":"869422959895867004","publisherName":"Chaine","runCount":349,"viewCount":1033},{"description":"<h2><strong>Supa Palette is an all-in-one palette editor/generator for modern designers. Easily create beautiful, harmonious and accessible-first palettes in no time.</strong></h2><p><br></p><h2><strong>⚡️ Features:</strong></h2><p><br></p><ul><li><strong>Color systems 🔥:</strong> import the most popular color systems in your projects<strong>: Adobe Spectrum, Frames X, Atlassian, Polaris (Shopify), Garden (Zendesk), IBM Design Language,</strong> Radix UI, Cabana, Horizon UI, Chakra UI, Tailwind, Material UI, Bootstrap, Untitled UI, Ant Design.</li><li><strong>Save your custom color system </strong>from selected palettes</li><li>Quickly <strong>generate</strong> a palette from one color, local style or from a selection</li><li><strong>8 color modes</strong>: RGB, LRGB, HSL, HSV, HSI, LAB, OKLAB, LCH</li><li><strong>Correct lightness</strong></li><li><strong>Desaturate</strong></li><li><strong>Undo/Redo</strong></li><li><strong>Accessibility</strong>: automatic contrast calculator (<a href=\"https://www.w3.org/WAI/standards-guidelines/wcag/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\"> WCAG</a> or <a href=\"https://typefully.com/u/DanHollick/t/sle13GMW2Brp\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">APCA</a>)</li><li><strong>Palette guide generator: </strong>instantly add multiple color guides to your documents</li><li><strong>Export multiple palettes</strong> for: Figma Tokens, Chakra UI, Material UI, Tailwind, CSS, CSS Vars or JSON</li><li><strong>Import palettes</strong> (JSON, Figma Tokens)</li><li><strong>Save palettes</strong> and reuse them across all your projects</li><li>Save palette colors as local styles</li><li>Automatic unique name generation based on the selected color</li></ul><p><br></p><h2>Visit Supa Palette website:</h2><h2><a href=\"http://supa-palette.com\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">supa-palette.com</a></h2><p><br></p><h2><strong>What's next?</strong></h2><p><br></p><p><strong>In next future I would like to focus on these 3 areas:</strong></p><ul><li><strong>Web-version</strong> accessible outside Figma and fully integrated with Figma plugin</li><li><strong>Community</strong>: publish your palettes to the community or get inspired by thousands of palettes made by awesome designers all around the world.</li><li><strong>Cloud</strong>: save your palettes in the cloud, sync your local palettes, share it with your colleagues or store them privately and reuse them across all your devices or Figma accounts.</li></ul><p><br></p><h2><strong>Like this plugin?</strong></h2><p><br></p><p><strong>Support me</strong> for more plugins and design resources:</p><ul><li>❤️ <strong>Like</strong></li><li><strong>👨‍🎨 Follow: </strong><a href=\"https://www.figma.com/@angelolibero\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">@angelolibero</a></li><li><strong>💬 Comment</strong></li><li><strong>📤 Share</strong></li></ul>","id":"1103648664059257410","installCount":3077,"lastUpdateDate":"2022-07-20T18:33:22.629Z","likeCount":214,"name":"Supa Palette","publisherHandle":"angelolibero","publisherId":"397901","publisherName":"Angelo Libero","runCount":4579,"viewCount":6069},{"description":"<p>Smart and simple plugin that will create a scale of colors for your design system. It makes colors for dark mode too!</p><p><br></p><p>After making a scale you can rename rectangles and create styles.</p>","id":"1103971792306373442","installCount":459,"lastUpdateDate":"2022-05-05T09:20:45.639Z","likeCount":6,"name":"Color scale","publisherHandle":"antonijapek","publisherId":"411930","publisherName":"Antonija Pek","runCount":788,"viewCount":767},{"description":"<h2><strong>Awesome Icon Label Writer for Figma</strong></h2><p><br></p><p>This Figma plugin renames text nodes consisting of one Font Awesome icon to the icon name.</p><p><br></p><p><a href=\"https://github.com/temoki/awesome_icon_label_writer_figma/raw/main/assets/screen-recording.gif\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Please see the screen video.</a></p><p><br></p><p>Text nodes will be renamed as</p><p><code>[FA{Font Awesome version}] {Icon name} / {Unicode}</code>.</p><p><br></p><p>The followings are examples.</p><p><br></p><ul><li><code>[FA5] lemon / f094</code></li><li><code>[FA6] credit-card / f09d</code></li></ul><p><br></p><p>You run the plugin, all the icons on the current page will be renamed.</p><p>If you select some nodes and then run the plug-in, the icons in the selected node and its descendants will be renamed.</p><p><br></p><p>Supported Font Awesome versions are 5 and 6.</p><p><br></p><p><a href=\"https://github.com/temoki/awesome_icon_label_writer_figma\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">github.com/temoki/awesome_icon_label_writer_figma</a></p>","id":"1103997525630191469","installCount":259,"lastUpdateDate":"2022-05-21T08:08:11.103Z","likeCount":7,"name":"Awesome Icon Label Writer","publisherHandle":"temoki","publisherId":"1022125363180087118","publisherName":"Tomoki Kobayashi","runCount":610,"viewCount":435},{"description":"<p><em>Table Builder</em>&nbsp;lets you paste tabular data and generates tables from a single component.</p><p>For each entry in the spread sheet,&nbsp;<em>Table Builder</em>&nbsp;creates an instance of your original cell component, positions it in a grid and updates the cell's first child of type&nbsp;<code>text</code>&nbsp;with the data entry from the spreadsheet (Excel, Numbers, etc).</p><p><br></p><h2>Demo</h2><p><br></p><p><a href=\"https://www.youtube.com/watch?v=Y4QhE9EZ4pY\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://www.youtube.com/watch?v=Y4QhE9EZ4pY</a></p><p><br></p><h2>Usage</h2><ol><li>Create a component that contains a text label (as a direct child)</li><li>Select an&nbsp;<strong>instance</strong>&nbsp;of that component</li><li>In the plugins menu, open&nbsp;<strong>Table Builder</strong></li><li>Copy tabular data from the spreadsheet and&nbsp;<strong>paste</strong>&nbsp;it into the text area of the plugin's UI</li><li>Click on the&nbsp;<strong>Build Table</strong>&nbsp;button</li></ol><h2><br></h2>","id":"1104128112873973808","installCount":693,"lastUpdateDate":"2022-07-05T13:21:31.087Z","likeCount":11,"name":"Table Builder","publisherHandle":"landschaft","publisherId":"1044611340922975840","publisherName":"Fabian Nart","runCount":2641,"viewCount":1648},{"description":"<p>海豚设计插件，拥有最灵活的组件配置能力，快速拖拽生成设计稿。集成字高修复神器，颜色token注入，素材库多工具为一体的便捷工作台。</p>","id":"1104262172365628549","installCount":229,"lastUpdateDate":"2022-07-22T06:28:13.097Z","likeCount":12,"name":"Fin Design Tool","publisherHandle":"DolphinGroup","publisherId":"1008994528344572594","publisherName":"DolphinGroup","runCount":434,"viewCount":775},{"description":"<p>Generates and inserts AI-generated faces, sourced from thispersondoesnotexist.com.</p><p><br></p><p>The 1024x1024 images are copyright-free since they are generated by an AI, so you're free to use them in your works as you wish.</p>","id":"1104262872207297670","installCount":1330,"lastUpdateDate":"2022-05-13T03:38:45.674Z","likeCount":21,"name":"Person Generator","publisherHandle":"gautham","publisherId":"1268466","publisherName":"Gautham 🌶","runCount":2270,"viewCount":1647},{"description":"<p>Text Line Height Fix 是一款调整文字行高的插件</p>","id":"1104342984055781608","installCount":20,"lastUpdateDate":"2022-05-20T09:40:21.359Z","likeCount":3,"name":"jianke_fix_text_line_height","publisherHandle":"herman6","publisherId":"984039267356314483","publisherName":"herman","runCount":23,"viewCount":28},{"description":"<p>— Create beautiful tiny graphs with a couple of clicks;</p><p>— Paste your data from Excel, CSV, JSON, or type it;</p><p>— Shuffle the data to explore more patterns.</p>","id":"1104468340333278614","installCount":1527,"lastUpdateDate":"2022-06-12T14:47:37.835Z","likeCount":102,"name":"Sparkliner","publisherHandle":"volorf","publisherId":"135257","publisherName":"Volorf","runCount":2414,"viewCount":2701},{"description":"<p>Browse and search all the CSS custom properties for plugin and widget UIs in real time.</p>","id":"1104533141442501061","installCount":188,"lastUpdateDate":"2022-05-10T17:07:02.636Z","likeCount":7,"name":"Theme Colors Inspector","publisherHandle":"figmajake","publisherId":"1060622139825576127","publisherName":"Jake Albaugh","runCount":244,"viewCount":362},{"description":"<p><strong>Use sections in Figma to easily organize your designs!</strong></p><p><br></p><p><a href=\"https://www.mrbiscuit.design/figmasection/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Official website</a></p><p><br></p><p>Feature:</p><ul><li>Drag sections to move and resize them.</li><li>Sections can be infinitely nested.</li><li>Nested section titles are always visible</li><li>Section titles are perfectly visible under all zoom levels</li><li>Copy Section with its contents.</li><li>Collaborators without the plugin can also copy and edit sections</li><li>Sections will automatically envelop overlapping objects</li><li>Quickly switch between 6 ready made themes</li><li>Plugin works in two modes: Native mode and Simulation Mode</li><li>Sections created in simulation mode will display nested frame titles, but will require the plugin to be running to adjust and duplicate.</li><li>Sections created with Native mode do not require the plugin to modify and duplicate, but won’t display nested frame titles, only nested Section titles are displayed</li></ul><p><br></p><p>========================================</p><p><br></p><p><strong>在 Figma 中使用 Section，将设计文件整理的更加得心应手！</strong></p><p><br></p><p>亮点：</p><ul><li>Section 可以无限嵌套。</li><li>嵌套的Section标题总是可见的</li><li>Section标题在所有缩放级别下都是完全可见的</li><li>复制 Section 会连带内容。</li><li>没有插件的协作者也可以复制和编辑部分</li><li>节将自动包住重叠的对象</li><li>快速切换6个现成的主题</li><li>插件支持原生和模拟双模式</li><li>模拟模式下Section 会显示内部 Frame 的名称，但模拟Section的位移与尺寸调整需要插件处在开启状态下进行</li><li>原生模式创建的Section不需要通过插件来修改或复制，但不会显示嵌套在内部的Frame标题，只会显示嵌套的Section标题</li></ul><p><br></p>","id":"1105082111167032053","installCount":1434,"lastUpdateDate":"2022-07-22T01:34:08.927Z","likeCount":98,"name":"Figma Section","publisherHandle":"boybook","publisherId":"862662455337533979","publisherName":"boybook","runCount":1913,"viewCount":3337},{"description":"<p><strong>Design more efficiently with data by searching for text content in your selection and generating real data into your text layers easily. Content master lets you find all instances of a text and replace them with data.</strong></p><p><br></p><h2>Features:</h2><p><br></p><p><strong>Find text content in the selection</strong></p><p>Content Master will search through your selection and find all unique pieces of text content. It will then display these in a searchable list, allowing you to select and replace multiple items at once.</p><p><br></p><p><strong>Replace content with data</strong></p><p>Replace the selected text layers with real data like name, email address, physical address, company name, date, and lorem ipsum.</p><p><br></p><p><strong>Create custom content with variables</strong></p><p>Use static strings and dynamic data variables to create the content you need.</p><p><br></p><h2>How to use</h2><ol><li>Select layers in Figma</li><li>Launch Content master</li><li>Select text content in the searchable list</li><li>Use quick replace cards or type text with variables in the Custom text field</li><li>Optionally change variables settings below the variables buttons</li><li>Hit Replace</li></ol><p><br></p><p><em>To refresh the searchable list just select layers in Figma and hit Reload.</em></p>","id":"1105107567350255361","installCount":398,"lastUpdateDate":"2022-07-18T12:42:50.234Z","likeCount":13,"name":"Content Master","publisherHandle":"OPesicka","publisherId":"822952","publisherName":"Ondřej Pešička","runCount":631,"viewCount":1153},{"description":"<p>Free Google Font pairing and color palette suggestions at the click of a button, directly inside of Figma. All for free.</p>","id":"1105220730154050357","installCount":2275,"lastUpdateDate":"2022-06-22T05:45:04.686Z","likeCount":92,"name":"Fontpair","publisherHandle":"BlakeAnd","publisherId":"1744550","publisherName":"Blake Mitchell","runCount":10322,"viewCount":4790},{"description":"<p><strong>Drag-and-drop import of PDF files into Figma!</strong></p><p><br></p><p>This plugin will insert PDF files as images, up to 4080x4080 px, one image per page.</p><p><br></p><p><em>Future work &amp; support:</em></p><ul><li>I'm working on functionality to insert PDF while preserving layers, SVGs, etc. It's a big task, but coming soon!</li><li>If the insertion is failing for your PDF, please send me a DM on <strong>Twitter @GuamHat </strong>or leave a comment with details</li></ul>","id":"1105316927173658462","installCount":3014,"lastUpdateDate":"2022-05-09T02:16:00.395Z","likeCount":30,"name":"PDF to Figma","publisherHandle":"gautham","publisherId":"1268466","publisherName":"Gautham 🌶","runCount":5973,"viewCount":5485},{"description":"<p>First Figma plugin with HCT and more about HCL / HSL / HSB .</p><p>( About HCT : <a href=\"https://material.io/blog/science-of-color-design\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://material.io/blog/science-of-color-design</a> )</p><p><br></p><p>Any questions or suggestions, contact me: <a href=\"mailto:nowork.app@gmail.com\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">nowork.app@gmail.com</a></p>","id":"1105513882835626049","installCount":182,"lastUpdateDate":"2022-05-09T15:28:19.958Z","likeCount":9,"name":"Color Space: First plugin with HCT","publisherHandle":"nowork","publisherId":"1021661660923531625","publisherName":"NOWORK","runCount":268,"viewCount":592},{"description":"<p>Convert your designs to grayscale to get more targeted feedback during user testing, evaluate visual hierarchy, signify deprecated designs, and more.</p><p><br></p><p><strong>This plugin is non-destructive</strong>. A filter layer is added to the canvas above each selected element and can easily be undone. </p><p><br></p><p>Supports multi-select on all types of elements, including frames, nested frames, and images. </p><p><br></p><p><strong>Steps to use</strong></p><ol><li>Select any number of elements on the screen.</li><li>Choose \"Grayscale Selection\" from the plugin submenu.</li><li>To undo, select \"Remove All Grayscale\" from the plugin submenu, ⌘Z / Ctrl + Z, or manually delete the \"Grayscale filter\" layers.</li></ol><p><br></p><p>Nested component and auto-layout support coming soon.</p>","id":"1105916617805028875","installCount":1014,"lastUpdateDate":"2022-05-12T16:20:58.265Z","likeCount":10,"name":"Grayscale","publisherHandle":"steves","publisherId":"940668090002481689","publisherName":"Stephan Somers","runCount":1868,"viewCount":1815},{"description":"<p>Create the required&nbsp;<strong>pages </strong>before starting&nbsp;the design.</p>","id":"1106104074775818911","installCount":31,"lastUpdateDate":"2022-05-11T08:02:42.697Z","likeCount":3,"name":"Pages","publisherHandle":"rohzzn","publisherId":"871801663311362159","publisherName":"Rohan","runCount":71,"viewCount":229},{"description":"<p>Entitle is a plugin for designers who are passionate about structured and well-organised layouts. This is me, btw 🤘</p><p>Select frames and run the plugin. It will number and title them by their frame names.</p>","id":"1106603900593028322","installCount":29,"lastUpdateDate":"2022-05-27T18:36:27.873Z","likeCount":4,"name":"Entitle","publisherHandle":"alinarusakova","publisherId":"1212090","publisherName":"Alina Rusakova","runCount":63,"viewCount":213},{"description":"<p>Complete your Figma dark mode experience in one click with Darken Pages. Darken or lighten pages with customizable colors. This plugin is the perfect companion to Figma's newly released Dark and Light color themes.</p><p><br></p><h2>Open Source</h2><p>Darken Pages is <a href=\"https://github.com/aashreys/darken-pages\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">open source</a> and contributions are welcome!</p>","id":"1106710311855118659","installCount":579,"lastUpdateDate":"2022-05-28T02:18:52.221Z","likeCount":13,"name":"Darken Pages","publisherHandle":"aashreys","publisherId":"697643","publisherName":"Aashrey Sharma","runCount":857,"viewCount":1147},{"description":"<p>Allows you to <strong>generate fake text</strong> (lorem ipsum) using the API of <a href=\"https://www.faux-texte.com\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">www.faux-texte.com</a></p><p>Choice between a number of <strong>paragraphs</strong> (small, medium, large or random), a number of <strong>words</strong> or a number of <strong>characters</strong>.</p><p>You need a license to use this plugin. This license can be obtained from <a href=\"https://www.faux-texte.com/plugin-figma.php\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Faux-texte.com support</a></p><p>---</p><p>Permet de <strong>générer du faux texte</strong> (lorem ipsum) en utilisant l'API du site <a href=\"https://www.faux-texte.com\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">www.faux-texte.com</a></p><p>Choix entre un nombre de <strong>paragraphes</strong> (petits, moyens, grands ou aléatoires), un nombre de <strong>mots</strong> ou un nombre de <strong>caractères</strong>.</p><p>Il faut disposer d'une licence pour l'utilisation de ce plugin. Cette licence peux être obtenue auprès du <a href=\"https://www.faux-texte.com/plugin-figma.php\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">support de Faux-texte.com</a></p>","id":"1106861063263960496","installCount":213,"lastUpdateDate":"2022-05-18T13:52:37.097Z","likeCount":3,"name":"Faux Texte","publisherHandle":"jfrenauld","publisherId":"1091626321760920798","publisherName":"Jean-François Renauld","runCount":490,"viewCount":457},{"description":"<p>If it’s not interactive, it’s not working. Most marketing and sales assets are dead on arrival. Bring yours to life with Tiled’s interactive content platform.&nbsp;</p><p><br></p><h2><strong>1 - Design</strong>&nbsp;</h2><p>To get started download one of the microapp templates available on the Tiled community page. From the template, you can easily swap your logo, add your brand colors and typography to make your microapp feels like your own.&nbsp;&nbsp;</p><p><br></p><h2><strong>2 - Sync</strong></h2><p>Once your microapp design is ready, sync all your frames to Tiled using the Tiled plugin and finish assembling your microapp by adding interactivity in the Tiled Builder (<a href=\"https://www.tiled.co/creative-account\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">a Tiled account is required</a>).&nbsp;</p><p><br></p><h2><strong>3 - Add interactivity</strong></h2><p>Easily add video, gifs, scrolling sections, image galleries, quizzes, collaboration tools, and more. And feel free to embed anything you’d like; if you can name it, you can embed it. Never let your creative vision suffer again. Design it in Figma and make it interactive with Tiled -&nbsp;no code required</p><p><br></p><h2>4 - Analyze</h2><p>You built it to work. Tiled gives you user engagement data that provides visibility into how well your asset is performing allowing you to continually optimize and iterate.</p><p>&nbsp;</p><h2><strong>Resources</strong></h2><p>Learn More About Tiled: <a href=\"http://www.tiled.co\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">www.tiled.co</a></p><p>Get your Tiled account today: <a href=\"https://www.tiled.co/creative-account\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://www.tiled.co/creative-account</a></p><p>Get Inspired: <a href=\"https://www.tiled.co/inspiration/showcase\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://www.tiled.co/inspiration/showcase</a></p><p>Check out our templates: <a href=\"https://www.figma.com/@tiled\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://www.figma.com/@tiled</a></p>","id":"1107017945463993972","installCount":224,"lastUpdateDate":"2022-06-14T21:27:27.206Z","likeCount":21,"name":"Tiled","publisherHandle":"tiled","publisherId":"1005207815638329277","publisherName":"Tiled","runCount":319,"viewCount":880},{"description":"<p>Create structures and download the result in CSV which you could open in Excel, Google Docs or Airtable.</p><p><br></p><p>How to use</p><ol><li>Create a list of cards (frame + name in text element) of the same color and use also the other same color for the highest category cards (also frame + name in text element).</li><li>Sort cards by creating new categories and sub categories (could be every color). Put children cards in side the parent frame.</li><li>Store every participant on the own page.</li></ol><p><br></p><p>Example of the file: <a href=\"https://www.figma.com/file/oqawfzHcI4UCz1VSBD34Jb/Plugin-Card-Sorting?node-id=0%3A1\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://www.figma.com/file/oqawfzHcI4UCz1VSBD34Jb/Plugin-Card-Sorting?node-id=0%3A1</a></p>","id":"1107246312911312617","installCount":57,"lastUpdateDate":"2022-05-14T19:27:23.936Z","likeCount":7,"name":"Cardsorting","publisherHandle":"wid0ki","publisherId":"417840","publisherName":"Lara Sorokina","runCount":181,"viewCount":353},{"description":"<p>Never have a messy design file again 🗃️</p><p><br></p><p>Organize pages with groups and emoji in your design file, make the document neat and tidy as it should! 🎉</p><p><br></p><p><strong>⛳ Features</strong></p><p><br></p><ul><li>Group pages</li><li>Add divider for group</li><li>Reorder, rename, delete page/group</li><li>Add emoji for page/group</li></ul><p><br></p><p>🎁<strong> Add-on</strong></p><p><br></p><ul><li>Dark mode</li><li>Navigate to page in Quick Actions</li><li>Customize divider</li><li>Spread group into pages/Turn page into group</li><li>Search emoji, skin tone support</li></ul><p><br></p><p>🚨<strong> Limitation</strong></p><p><br></p><ul><li>Currently, reordering pages without opening plugin works only when the the group (divider) position doesn't change.</li></ul><p><br></p><p>🪄<strong> Feedback</strong></p><p><br></p><p>Leave a comment or <a href=\"mailto:contact@yuchengkuo.com\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">email</a> for feedback and support, thanks!</p>","id":"1107319011917873959","installCount":175,"lastUpdateDate":"2022-06-04T14:33:08.703Z","likeCount":4,"name":"Pages","publisherHandle":"yuchengkuo","publisherId":"907627406903725617","publisherName":"YuCheng Kuo","runCount":316,"viewCount":394},{"description":"<p>Get the <a href=\"https://www.radix-ui.com/colors\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\"><strong>Radix UI Colors</strong></a> color palette with just one click.</p>","id":"1107519474149272460","installCount":141,"lastUpdateDate":"2022-05-15T21:30:45.760Z","likeCount":10,"name":"Radix Palette Generator","publisherHandle":"diegosilvatech","publisherId":"1068099484660950687","publisherName":"Diego Silva","runCount":235,"viewCount":416},{"description":"<p>Use 1400+ 3dicons within Figma or Figjam files quickly. The icons can be <strong>searched</strong> and filtered by <strong>color</strong> and <strong>angle</strong>.</p><p><br></p><p>I'd love to know what you made using 3dicons. Feel free to tag me or say hi on Twitter (<a href=\"https://twitter.com/realvjy\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\"><strong>@realvjy</strong></a>). You are also welcome to share your feedback or bug reports 🙏</p><p><br></p><p>----</p><p><strong>Support</strong></p><p>The goal of this project is to contribute to the open design community. Even though I do not intend to charge for these community resources, if 3dicons has ever been useful to you or your team, I would appreciate your support! It helps to maintain server costs and keep it grow. More details about the project <a href=\"https://3dicons.co/about\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\"><strong>3dicons.co/about</strong></a></p><p><br></p><p>----</p><p>Plugin is opensource: <a href=\"https://github.com/realvjy/3dicons-figma\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\"><strong>github.com/realvjy/3dicons-figma</strong></a></p><p>You are welcome to contribute</p><p><br></p><p>Website: <a href=\"https://3dicons.co\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\"><strong>3dicons.co</strong></a></p>","id":"1107546399747513238","installCount":5953,"lastUpdateDate":"2022-05-30T09:32:36.960Z","likeCount":193,"name":"3dicons","publisherHandle":"realvjy","publisherId":"1749","publisherName":"vijay verma","runCount":11906,"viewCount":8991},{"description":"<p><strong>Screenshot Resizer</strong> allows you to <strong>downscale</strong> your screenshots <strong>from physical size to logical size</strong>. Screenshot Resizer is able to handle <strong>multiple selections</strong> and downscale to their logical size at the same time.</p><p><br></p><p>Why would we need to have a logical size? We design by using the logical sizes of the devices and on Figma under the Prototype tab all the devices are located with their logical sizes. When you need to import a screenshot, you do not need to downscale manually your screenshot according to the device's scale factor anymore. </p><p><strong>Select the screenshot frame and run the plugin, enjoy! </strong></p>","id":"1107993996626134259","installCount":93,"lastUpdateDate":"2022-05-24T20:25:23.492Z","likeCount":18,"name":"Screenshot Resizer","publisherHandle":"iremkaraoglu","publisherId":"987993","publisherName":"Irem Karaoglu","runCount":157,"viewCount":343},{"description":"<p>Quickly switch between light and dark canvas.&nbsp;</p><p><br></p><p>Usage:</p><ol><li>Install ‘Dark Matter’ Plugin.</li><li>Run the plugin once.</li><li>When no frame is selected, the plugin will appear in the Properties Panel (Design).</li><li>Switch between light (#E5E5E5) and dark (#1E1E1E) canvas by clicking the button.&nbsp;</li></ol><p><br></p><p><strong>The best part</strong> - there’s no need to rerun the plugin. Once run, it’s available on all your pages for that particular file.</p><p><br></p><p>I also made a website for the plugin, <a href=\"https://darkmatter.framer.website/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">check it out</a>? You'll like it.</p><p><br></p><p>If you use this and find it helpful, I’d love to hear from you. I’m <a href=\"https://twitter.com/KhatriDakshi\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">@KhatriDakshi</a> on Twitter. Or support me <a href=\"https://www.buymeacoffee.com/dakshi\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">here</a>.</p><p><br></p><p>Lastly, if you come across a bug or if you have any ideas, share that too.</p><p><br></p><p>Enjoy!❤️</p>","id":"1108641136742394687","installCount":85,"lastUpdateDate":"2022-05-20T14:14:52.254Z","likeCount":3,"name":"Dark Matter","publisherHandle":"dakshikhatri","publisherId":"268844","publisherName":"Dakshi Khatri","runCount":167,"viewCount":819},{"description":"<h2><strong>This plugin will help you generate 3 supporting colours based off of a whitelabels primary value, as well as a UI primary value that meets AAA accessibility contrast.</strong></h2><p><br></p><p>The colours that will be generated are:</p><ul><li>Dark Primary</li><li>Light Primary</li><li>Off-White Primary</li><li>UI Primary</li></ul><p><br></p><p>Recommended Pairings</p><ul><li>Dark + Light</li><li>UI + Off-White</li></ul>","id":"1108824498616621141","installCount":30,"lastUpdateDate":"2022-06-17T18:40:58.644Z","likeCount":3,"name":"Whitelabel Colour Generator","publisherHandle":"lukeOncall","publisherId":"979003641488358182","publisherName":"Luke Gram","runCount":52,"viewCount":94},{"description":"<p>Very simple plugin to change an element clipping mode. Add a shortcut to this command and quickly run it from the keyboard any time you need.</p>","id":"1108861824194364527","installCount":56,"lastUpdateDate":"2022-05-18T22:19:47.476Z","likeCount":0,"name":"Toggle Clip Content","publisherHandle":"gnchrv","publisherId":"408559","publisherName":"Misha Goncharov","runCount":101,"viewCount":118},{"description":"<p>The home for your team's work in progress.</p><p><br></p><p>Reserve your site at <a href=\"https://campsite.design\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">campsite.design</a></p>","id":"1108886817260186751","installCount":105,"lastUpdateDate":"2022-07-22T22:03:46.180Z","likeCount":10,"name":"Campsite","publisherHandle":"campsite","publisherId":"1108886535866255691","publisherName":"Campsite","runCount":203,"viewCount":433},{"description":"<p>Simple plugin for Karat design team, to quickly set up Figma files.</p><p><br></p><p><strong>*</strong> Unless you're from Karat, you'd probably find this plugin useless since it pulls in a component from our shared library! <a href=\"https://github.com/masha312/Refine\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Here's source code</a> though, in case you want to poke around :)</p>","id":"1109189187994466813","installCount":14,"lastUpdateDate":"2022-05-19T18:44:58.250Z","likeCount":1,"name":"Refine","publisherHandle":"uncutgems","publisherId":"1108118972292660568","publisherName":"Karat","runCount":13,"viewCount":67},{"description":"<p>Generates random email addresses from text. Simply select your text, and run the plugin.</p><p><br></p><p>Made by @starscope and @decrae</p><p><br></p><p>If you are interested in the code, the plugin is listed on GitHub here: https://github.com/star-scope/randomemailfigma</p>","id":"1109344197084586587","installCount":93,"lastUpdateDate":"2022-05-20T05:00:02.249Z","likeCount":3,"name":"Random Email Address Generator","publisherHandle":"starscope","publisherId":"1103170","publisherName":"STARSCOPΞ","runCount":201,"viewCount":152},{"description":"<p>Copy &amp; paste Figma layers into <a href=\"https://macaron-elements.com/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Macaron</a>, a visual editor for creating Web Components.</p><p><br></p><ul><li>Select layers you want to copy.</li><li>Open the plugin.</li><li>Click \"Copy Selected Layers\" button.</li><li>Paste (Command/Control + V) in Macaron.</li></ul>","id":"1109350946242254432","installCount":131,"lastUpdateDate":"2022-07-02T08:43:32.350Z","likeCount":2,"name":"Macaron","publisherHandle":"seanchas116","publisherId":"71419","publisherName":"Ryohei Ikegami","runCount":778,"viewCount":408},{"description":"<p><a href=\"https://nocode.yrobot.top?ref=plugin-page\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\"><strong>Figma Nocode</strong></a> 致力于成为最简单的将设计转换为网站的工具。<strong>无需登录，完全免费</strong>。</p><p><br></p><p><a href=\"https://nocode.yrobot.top/?ref=plugin-page\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\"><strong>Figma Nocode</strong></a> aims to be the simplest tool which convert design into website. <strong>No login required, absolutely free</strong>.</p><p><br></p><p><strong>## 使用方法</strong></p><p><br></p><p>1. 安装插件</p><p>2. 转换设计稿</p><p>3. 预览/管理/下载 网站</p><p><br></p><p><strong>## To get started</strong></p><p><br></p><p>1. install the plugin</p><p>2. convert the design</p><p>3. preview/manage/download the website</p><p><br></p><p><strong>## 联系我们</strong></p><p><br></p><ul><li><a href=\"https://discord.gg/regtbczZGe\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Discord</a></li><li><a href=\"https://github.com/Yrobot/nocode/issues\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Github</a></li><li><a href=\"mailto:y_robot@yeah.net\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Email</a></li></ul><p><br></p><p><strong>## Contact Us</strong></p><p><strong></strong></p><ul><li><a href=\"https://discord.gg/regtbczZGe\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Discord</a></li><li><a href=\"https://github.com/Yrobot/nocode/issues\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Github</a></li><li><a href=\"mailto:y_robot@yeah.net\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Email</a></li></ul><p><br></p><p><strong>## 初衷</strong></p><p><br></p><p>作为一个前端开发者，最主要的工作内容就是将设计师的设计稿还原成网站页面，面对这部分重复单调的工作，我希望利用一个工具可以完成它们，或至少可以减少我的工作量。</p><p><br></p><p>我的初衷就是做一个能够直接将设计稿转换为网站的工具。</p><p><br></p><p>我崇尚简约的生活方式，对于产品也是。我不希望因为盈利等问题将产品复杂化。所以插件也只保留最简单的 2 步：转换，下载。</p><p><br></p><p><strong>## How do i come up with this idea?</strong></p><p><br></p><p>As a Front-end developer, my main work is to convert designs into websites. Against the repetitive work, I hope to use a tool to solve them, or at least reduce my work.</p><p><br></p><p>So at first, I just want to make a tool which can convert designs into websites directly.</p><p><br></p><p>I love minimalist living style, same on my products. I don't want to make the product complex because of the profits. So in my plugin, there are only 2 steps in the main process: convert, download.</p><p><br></p><p><strong>## 后期设想</strong></p><p><br></p><p>其实目前的根本需求只实现了一半。</p><p><br></p><p>要做到设计稿变成网站，仅仅是将设计转换为网页代码是不够的，至少还需要将网页部署到服务器，这样全球的人都能浏览你的网站了。</p><p><br></p><p>所以后面，我会在兼顾页面转换质量的同时，着手实现网站部署的功能，希望此功能能早日和大家见面。届时大家就可以将设计稿变成真正意义上的网站了。</p><p><br></p><p><strong>## The future plan</strong></p><p><br></p><p>Actually, the original feature is only half done.</p><p><br></p><p>Cus `convert design into website` means not only transform designs into webpages, but also deploy the webpages to the server, so that everyone can browse your website.</p><p><br></p><p>So in the future, i will focus on the feature of deploying webpages. Hoping deploying feature would see you soon.</p>","id":"1109500134035020563","installCount":135,"lastUpdateDate":"2022-07-26T14:44:22.091Z","likeCount":3,"name":"Figma Nocode - Export Design to Website absolutely free","publisherHandle":"yrobot","publisherId":"844450952279298486","publisherName":"Yrobot","runCount":234,"viewCount":330},{"description":"<p>Insert beautiful NFTs to your designs easily.</p><p><br></p><p>-----</p><p>To be able to use the plugin you need to register. </p><p>This plugin is still in the beta phase, please report the bugs and feature-requests to admin.</p><p><br></p><p>Full access will be granted to people who fillout the form in https://niftypaste.zekiblue.com</p>","id":"1109558289539963731","installCount":106,"lastUpdateDate":"2022-06-02T20:05:05.956Z","likeCount":3,"name":"Nifty Paste","publisherHandle":"zekiblue","publisherId":"1050815504144204917","publisherName":"zekiblue","runCount":188,"viewCount":626},{"description":"<p>Figma to Tailwind config</p>","id":"1109707301583496087","installCount":59,"lastUpdateDate":"2022-05-26T06:31:02.399Z","likeCount":1,"name":"Figma to Tailwind config","publisherHandle":"nadjemTkt","publisherId":"889791384931786100","publisherName":"nadjem","runCount":144,"viewCount":253},{"description":"<p>Detach all component instances and disable all auto layouts in a given selection.</p><p><br></p><p>Revert file to a setup closer to traditional design softwares for quick iterations, isolated studies and collaboration with non-designers.</p><p><br></p><p>Use with caution.</p>","id":"1109751798478171057","installCount":49,"lastUpdateDate":"2022-05-21T08:17:09.398Z","likeCount":3,"name":"Explode Frames","publisherHandle":"lorraineli","publisherId":"842802","publisherName":"Lorraine Li","runCount":78,"viewCount":110},{"description":"<p>Provides ability for searching pages in a document</p>","id":"1110553741323547165","installCount":53,"lastUpdateDate":"2022-07-22T14:07:59.574Z","likeCount":9,"name":"Find Page","publisherHandle":"canab","publisherId":"100722","publisherName":"canab","runCount":121,"viewCount":150},{"description":"<p>Figma2Flutter is a free tool that converts your designs into real Flutter apps.</p><p>&nbsp;</p><p>Do you want a better looking prototype? Would you like to run your prototype on a real target device? Are you tired of waiting for developers to implement your design? Would you prefer to hand off the design together with auto generated UI components for the target platform in Flutter? If your answer is yes to any of these, then you will want to check out Figma2Flutter.</p><p>&nbsp;</p><p>With Figma2Flutter, you can turn your design into a working application in minutes. Use the Figma2Flutter plugin to annotate your UI components with their states, screens, pop ups, menus... and just click Export to get a working Flutter project you can compile and run.</p><p>&nbsp;</p><p>Figma2Flutter uses Figma's prototype features, such as interactions, to generate your application. Think of it like a preview that you can turn into a real application.</p><p>&nbsp;</p><p>Flutter is designed to work on multiple platforms by using the same code base, so whatever you're designing, Flutter has you covered, whether it is a website, an iOS/Android app or even Desktop Windows, Linux and MacOS app.</p><p><br></p><p>For more information head over to the <a href=\"https://f2f.bostonux.com\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">official Figma2Flutter website</a>.</p><p><br></p>","id":"1110606481076006495","installCount":405,"lastUpdateDate":"2022-05-24T12:58:38.348Z","likeCount":12,"name":"Figma2Flutter","publisherHandle":"figma2flutter","publisherId":"1024680729578931374","publisherName":"BostonUX","runCount":778,"viewCount":918},{"description":"<p>Select a text layer &amp; convert it to Bionic Reading - Whats that? Bionic Reading is a new method facilitating the reading process by guiding the eyes through text with artificial fixation points. As a result, the reader is only focusing on the highlighted initial letters and lets the brain center complete the word. Check out bionic-reading.com</p>","id":"1110645253366626964","installCount":186,"lastUpdateDate":"2022-05-30T18:18:42.651Z","likeCount":32,"name":"Bionic Reading","publisherHandle":"a","publisherId":"1951744","publisherName":"Aaron Iker","runCount":234,"viewCount":698},{"description":"<p>Import your illustrator and SVG files into Figma.</p><p><br></p><p>This plugin fixes most import issues, including:</p><p><br></p><ul><li>Copy paste from Illustrator to Figma</li><li>SVGs using &lt;clipMask&gt;</li><li>SVGs using HSL/HSLa</li><li>SVGs with malformed width/height</li><li>SVGs with groups and blend modes</li><li>SVGs with symbol/use</li></ul><p><br></p><p>Experimental support for:</p><ul><li>.ai file import</li><li>.eps file import</li><li>.pdf file import</li></ul>","id":"1110823324890582795","installCount":4296,"lastUpdateDate":"2022-06-17T15:03:02.881Z","likeCount":210,"name":"Illustrator + SVG Import","publisherHandle":"rogie","publisherId":"1105","publisherName":"Rogie King","runCount":6482,"viewCount":7314},{"description":"<p>The Figma to Flashtalking plugin is a quick and easy way to convert your Figma project into Dynamic Flashtalking files without needing to write a single line of code.</p><p><br></p><p>Full documentation for the plugin can be found on our <a href=\"https://flashtalkingsupport.zendesk.com/hc/en-us/articles/6955469109907\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Help Center</a>.</p><h2><br></h2><h2><strong>Key Features</strong></h2><ul><li>Export Figma projects as Flashtalking-ready ads.</li><li>Add robust animations to each layer of your Figma project to create eye-catching movement.</li><li>Create dynamic layers with the click of a button and easily tweak elements to be pixel perfect through the dynamic CSS variable.</li><li>Use <strong>Quick/Full Preview </strong>buttons to review ad changes at any point. Previews display and function as they would in the Flashtalking system.</li><li>Supports Richload or Standard ads.</li><li>Upload your own custom font files.</li><li>Files are developer friendly and easy to update post-export.</li><li>Save and load your configurations at any point using the <strong>Save/Load Plugin Data</strong> buttons.</li></ul><p><br></p><h2><strong>Setting up your Figma Project</strong></h2><p>The Figma to Flashtalking plugin works by allowing you to specify which elements within your project you want to make dynamic.</p><p><br></p><p>Before using the plugin, ensure your Figma project files are set up correctly.</p><ul><li>Ads will be determined by the Frame they are contained within.</li><li>Frame dimensions need to reflect the desired ad size.</li><li>Only layers with live text will be available for dynamic text variable assignment.</li><li>Text boxes should not contain multiple font sizes.</li><li>All line breaks/new lines must be inserted using a carriage return (Enter key).</li><li>Arrow shapes are not supported and must be removed from the entire project prior to opening the Figma to Flashtalking plugin.</li></ul><p><br></p><h2>Feedback &amp; Bug Reporting</h2><p>Have you found an issue or a bug that is keeping you from exporting your ads the way you intended? Have a feature you'd like to see in this plugin? Let us know by reaching out to <a href=\"mailto:customsolutions@mediaocean.com\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">customsolutions@mediaocean.com</a>.</p><p><br></p><p><br></p>","id":"1110926273502067643","installCount":52,"lastUpdateDate":"2022-07-11T22:14:25.479Z","likeCount":2,"name":"Figma to Flashtalking","publisherHandle":"flashtalking","publisherId":"896081389293955085","publisherName":"Flashtalking","runCount":85,"viewCount":173},{"description":"<p>After multiple layers are selected in batch, fill each layer with random colors quickly.</p><p><br></p><p>批量选中多个图层后，一键为每个图层填充随机颜色。</p>","id":"1110990698532657166","installCount":45,"lastUpdateDate":"2022-07-02T03:34:38.915Z","likeCount":0,"name":"Random Color","publisherHandle":"yunser","publisherId":"848150194698453288","publisherName":"Yunser","runCount":75,"viewCount":118},{"description":"<p>QR Code Designer is the missing QR code customization tool. Create custom QR codes that match your brand and design guidelines. This tool integrates with Figma seamlessly by leaving complex QR code generation to the plugin, while allowing you to customize the colors, logo, and effects using regular old Figma.</p><p><br></p><h2>Features</h2><ul><li><strong>Multiple shapes:</strong> Choose from multiple different QR code line shapes, including classic, dotted, and curved. More shapes and custom templates coming soon!</li><li><strong>Logo friendly:</strong> Optionally cut out the center of the QR code to place your own logo or icon.</li><li><strong>Live preview:</strong> View a live preview of the QR code before placing it on the page</li><li><strong>Scan testing:</strong> Automatically test the scannability your QR code to ensure that it is still readable after your customizations</li><li><strong>Editable:</strong> Edit an existing QR code, even after you have applied custom colours and effects in Figma</li></ul><p><br></p><h2>Coming up</h2><p>The most exciting feature is still to come! Soon you will be able to design your own QR code line shapes using custom templates.</p>","id":"1111047009229518902","installCount":651,"lastUpdateDate":"2022-05-24T23:35:38.543Z","likeCount":15,"name":"QR Code Designer","publisherHandle":"gregrichardson","publisherId":"1086374188592467936","publisherName":"Greg Richardson","runCount":1114,"viewCount":793},{"description":"<p>Publish Clickup Tickets directly from Figma, and pull existing Clickup tickets to be linked with your Figma designs. More support and features coming soon!</p>","id":"1111126131737990237","installCount":43,"lastUpdateDate":"2022-05-25T03:09:43.849Z","likeCount":2,"name":"Design + Develop Sync","publisherHandle":"kasyapchakra","publisherId":"1083839573465116753","publisherName":"Kasyap Chakravadhanula","runCount":100,"viewCount":185},{"description":"<p>iOSでシステムフォントを指定して日本語のテキストラベルを表示した場合、実際に指定したフォントサイズよりも小さく表示されます。</p><p>この課題に関する詳しい話は記事にも書いています。</p><p><a href=\"https://spinners.work/posts/kudakurage-figma-ios-ja-system-font-size-plugin/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">iOSアプリのシステムフォントにおける日本語のフォントサイズとのギャップを減らす工夫</a></p><p><br></p><p>Figmaではこのようなシステムフォントを再現することができないため、Figmaで作成したテキストラベルと同じ大きさの日本語テキストラベルを表示するためのサイズを計算し、レイヤー名に追加します。</p><p><br></p><p>エンジニアはテキストのレイヤー名に表示されるフォントサイズを実装時に指定することで、同じ文字サイズを表示することができます。</p><p><br></p><h2>使い方</h2><ul><li>適用したいテキストオブジェクトを選択状態にします（グループを選択したり、複数選択した場合は、選択したすべてのテキストオブジェクトに適用されます）</li><li>iOS ja system font sizeプラグインのInteger/Floatをメニューから実行します</li><li>Integerは小数点以下を四捨五入し、整数で表示します</li><li>Floatは小数点第二位以下を四捨五入し、小数も含めて表示します（より正確にしたい場合にお使いください）</li><li>レイヤー名の先頭に<code>*</code>が入っている場合は、Figmaで指定した通りのフォントサイズを追加します（アルファベットや数字のみで表示される箇所など、実際の指定通りのサイズのままにしておきたい箇所にお使いください）</li></ul><p><br></p><p>GitHub: <a href=\"https://github.com/kudakurage/figma-ios-ja-font-size\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://github.com/kudakurage/figma-ios-ja-font-size</a></p>","id":"1111160415054172271","installCount":75,"lastUpdateDate":"2022-05-26T00:01:39.087Z","likeCount":0,"name":"iOS 日本語システムフォント サイズ計算","publisherHandle":"kudakurage","publisherId":"1050175","publisherName":"Kaz Motoyama @kudakurage","runCount":117,"viewCount":343},{"description":"<p>Loream Ipsum Generator (Mongolia)</p>","id":"1111165310426860661","installCount":148,"lastUpdateDate":"2022-05-27T09:12:39.371Z","likeCount":1,"name":"Loream Ipsum Generator (Mongolia)","publisherHandle":"zneelmn","publisherId":"950776385614981885","publisherName":"nyambat byamba","runCount":570,"viewCount":195},{"description":"<h2><strong>Base Styles is your brand library.</strong></h2><p>Manage and access all your brand assets in one central place. It will keep your branding consistent, clear and unified!</p><p><br></p><p><strong>Plugin for Figma</strong></p><p>With the Figma plugin for Base Styles, you can easily import your brand assets into your Figma designs.</p><p><br></p><p><strong>Getting started</strong></p><ol><li>Sign up for Base Styles</li><li>Create your brand library by adding your brand assets in Base Styles</li><li>Install this Figma Plugin and enter your API key to connect to your brand library.</li></ol><p><br></p><p><strong>Support</strong></p><p>For support or questions, email us at support@basestyles.com</p>","id":"1111542949136931335","installCount":42,"lastUpdateDate":"2022-07-18T02:42:41.102Z","likeCount":3,"name":"Base Styles","publisherHandle":"erwinai","publisherId":"3496655","publisherName":"Base Styles","runCount":898,"viewCount":447},{"description":"<p>Introduction:</p><p>Figicon is a plug-in for using built-in or custom icon library in Figma. At present, there is a built-in icon library, including a total of 1800+ icons in monochrome and two-color style, mainly used in the cloud computing industry.</p><p>The current built-in icon library is copyrighted by QingCloud Design Team and follows the Apache 2.0 protocol.</p><p>---------</p><p>How to use:</p><p>- Search for icon name or category name</p><p>- Drag or click the icon into your design</p><p>---------</p><p>Coming soon:</p><p>- More icon libraries built in</p><p>- Custom upload your icon library</p><p>- Customize icon color</p>","id":"1111565622161029659","installCount":219,"lastUpdateDate":"2022-06-12T05:42:55.265Z","likeCount":15,"name":"Figicon","publisherHandle":"asorn","publisherId":"920187096146110894","publisherName":"Asorn","runCount":320,"viewCount":346},{"description":"<p>Quickly check a layer's perceived brightness (HSP).</p><p>Select a layer with a solid fill and run the plugin to get the perceived brightness value.</p><p><br></p><p><strong>brightness&nbsp;=&nbsp;√( .299 r2 + .587 g2 + .114 b2 )</strong></p>","id":"1111668266716573350","installCount":33,"lastUpdateDate":"2022-06-21T09:13:18.439Z","likeCount":8,"name":"Perceived Brightness","publisherHandle":"significadotco","publisherId":"954026377371178186","publisherName":"Significa","runCount":53,"viewCount":80},{"description":"<p>This plugin provides calculations inside the input field and set guides on the selected frame. </p><p>Help to make guides based at golden ratio and the 8px grid. </p><p>if you find any problem related to the purpose of this plugin or want ask for a new feature, you can open an issue on https://github.com/wildiney/Figma-Plugin-Guide-Manager/issues</p>","id":"1111678420175165110","installCount":89,"lastUpdateDate":"2022-05-30T19:03:23.161Z","likeCount":0,"name":"Guide Manager","publisherHandle":"wildiney","publisherId":"868553506036915170","publisherName":"Wildiney Di Masi","runCount":261,"viewCount":205},{"description":"<p>Integrate your Mediamodifier design templates into design concepts/work and also access your team &amp; brand assets straight from one place in Figma.</p>","id":"1112034324597279719","installCount":75,"lastUpdateDate":"2022-06-10T14:27:43.497Z","likeCount":5,"name":"Mediamodifier","publisherHandle":"mediamodifier","publisherId":"1093878752001866166","publisherName":"Mediamodifier","runCount":144,"viewCount":187},{"description":"<p>Uniter Allows you to work inside Figma with mm, cm, inches and feet, <em>Completely for Free</em>!</p><p><br></p><h2><strong>RESIZING:</strong></h2><p>Simply select an object, type your measurements and press enter!</p><p><br></p><h2><strong>MEASURING:</strong></h2><p>You can also use Uniter to read the size of an object in your desired unit, simply select the unit then select an object!</p><p><br></p><p><strong>NOTE: </strong></p><p>Please keep in mind that this does not by any means make Figma ready to fulfill the role of a CAD software. There is an error of about 0.1 - 0.01~ decimal points to some conversions because of rounding of decimal places.</p><p><br></p><p><strong>ROADMAP:</strong></p><ul><li>Resizing Multiple Objects</li><li>Locked Proportions for Width and Height</li><li>Enhanced Precision</li><li>Text Scaling</li><li>Additional Units (Based on Feedback)</li></ul>","id":"1112088583237651476","installCount":301,"lastUpdateDate":"2022-06-08T21:44:50.671Z","likeCount":7,"name":"Uniter","publisherHandle":"OmRane","publisherId":"3432740","publisherName":"Om Rane","runCount":560,"viewCount":420},{"description":"<p>Select a layer, quickly duplicate it and arrange it in a grid layout.</p><p><br></p><p>选中一个图层，快速复制并按照网格布局排列。</p>","id":"1112341549325276309","installCount":59,"lastUpdateDate":"2022-06-09T16:44:25.876Z","likeCount":0,"name":"Grid Copy","publisherHandle":"yunser","publisherId":"848150194698453288","publisherName":"Yunser","runCount":204,"viewCount":158},{"description":"<p>✨ <strong>The easiest way to make design tokens in Figma. </strong>✨</p><ul><li>Once created, you can apply the token <strong>without opening the plugin.</strong></li><li>Check out these <strong>purple styles</strong> in the style list! Create, edit, manage in one place.</li></ul><p><br></p><p><strong>Supported Tokens: All Figma Styles</strong></p><ul><li>Text Style</li><li>Paint Style</li><li>Effect Style</li><li>Grid Style</li></ul><p><br></p><p>Any questions or suggestions, contact me: <a href=\"mailto:nowork.app@gmail.com\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">nowork.app@gmail.com</a></p>","id":"1112421354893432025","installCount":225,"lastUpdateDate":"2022-06-12T07:36:44.704Z","likeCount":12,"name":"Style Tokens: Easiest way to use design tokens","publisherHandle":"nowork","publisherId":"1021661660923531625","publisherName":"NOWORK","runCount":407,"viewCount":1002},{"description":"<p>1.自动识别演示文稿</p><p>2.自动生成目录</p><p>3.自动缩放</p><p>4.左上到右下顺序排列</p><p>5.支持暗模式切换</p>","id":"1113391637522554729","installCount":30,"lastUpdateDate":"2022-06-04T13:31:33.795Z","likeCount":0,"name":"PPT目录导航","publisherHandle":"onestrip3","publisherId":"3568325","publisherName":"onestrip","runCount":130,"viewCount":147},{"description":"<p>A tiny plugin to change all pages' backgrounds based on the current theme.</p>","id":"1113405479314386806","installCount":44,"lastUpdateDate":"2022-06-01T06:52:32.869Z","likeCount":3,"name":"Reset Background","publisherHandle":"saeed","publisherId":"689","publisherName":"Saeed Alipoor","runCount":109,"viewCount":98},{"description":"<p>The plugin allows you to generate abstract vector backgrounds.</p>","id":"1113450281250896805","installCount":635,"lastUpdateDate":"2022-06-03T06:33:02.921Z","likeCount":3,"name":"Vector Background Generator","publisherHandle":"Tcvetkov","publisherId":"183477","publisherName":"Max Tcvetkov","runCount":1741,"viewCount":1525},{"description":"<p>Frame management plugin, quickly group frames and manage them efficiently.</p><p><br></p><p>Frame 管理插件，可以快速地对 Frame 进行分组，高效管理。</p><p><br></p><p><strong>## How to use</strong></p><p><br></p><p>After selecting multiple Frames, run the plugin, and then create a Section. You can also quickly mark Sections with different colors.</p><p><br></p><p>⌘⇧G to ungroup sections.</p><p><br></p><p><strong>================</strong></p><p><br></p><p><strong>## 使用方式</strong></p><p><br></p><p>选中多个 Frame 后，运行插件，然后创建 Section。还可以为 Section 快速标记不同的颜色。</p><p><br></p><p>⌘⇧G 取消分组。</p>","id":"1113886515472528766","installCount":101,"lastUpdateDate":"2022-06-25T04:07:43.084Z","likeCount":10,"name":"Figma Section - Frame Manager","publisherHandle":"yunser","publisherId":"848150194698453288","publisherName":"Yunser","runCount":209,"viewCount":428},{"description":"<p>A lorem ipsum generator that works in the quick actions bar</p>","id":"1113942745980272052","installCount":1149,"lastUpdateDate":"2022-06-20T08:50:04.545Z","likeCount":17,"name":"Loremzer","publisherHandle":"matthieuleung","publisherId":"768169","publisherName":"Matthieu Leung","runCount":5861,"viewCount":1653},{"description":"<p>AppsPoint is a tool that allows you to create beautiful code for your applications without special skills.</p><p><br></p><p>This plugin is used to upload data from Figma to the AppsPoint system.</p><p><br></p><p>Read more: https://apps-point.herokuapp.com/</p>","id":"1114618717482321030","installCount":86,"lastUpdateDate":"2022-07-16T21:28:36.311Z","likeCount":1,"name":"AppsPoint","publisherHandle":"ArTemmey","publisherId":"295551","publisherName":"Артемий Дмитриевич","runCount":131,"viewCount":147},{"description":"<p>Adjust H,S, and L color values across selected elements with different colors.</p><p><br></p><p>Here are some things you could do:</p><ul><li>Select elements with all different colors and set the Saturation value to 50</li><li>Increment the Hue on selected elements (with different colors) by 10</li><li>Set the Lightness value on selected elements to 42</li></ul><p><br></p><p>Note: This is a WIP plugin and only works for elements with fills (like text and shapes). Groups, gradients and other selections won't work.</p>","id":"1114667178600475824","installCount":42,"lastUpdateDate":"2022-07-08T18:28:54.750Z","likeCount":0,"name":"Color Time","publisherHandle":"awp","publisherId":"2022317","publisherName":"Austin Price","runCount":113,"viewCount":189},{"description":"<p>1.选中要成组的内容</p><p>2.运行插件</p><p>3.未选择会在视图中心产生一个空的Section</p><p>4.暂时没有加父级嵌套</p><p>5.可能存在很多BUG 0.0</p>","id":"1114716216517807290","installCount":35,"lastUpdateDate":"2022-06-04T13:58:09.433Z","likeCount":1,"name":"Section分区","publisherHandle":"onestrip3","publisherId":"3568325","publisherName":"onestrip","runCount":99,"viewCount":142},{"description":"<p>将figma规范中的样式导出为tailwindcss、windicss配置</p>","id":"1114905578502508823","installCount":13,"lastUpdateDate":"2022-06-04T13:18:39.326Z","likeCount":1,"name":"Token Export / Token导出工具","publisherHandle":"tyaqing","publisherId":"919979008907592947","publisherName":"Yaqing Teng","runCount":26,"viewCount":81},{"description":"<p>Quickly generate components.</p><p><br></p><p>快速生成组件。</p><p><br></p><p>selecting a layer, click the button to generate it.</p><p><br></p><p>选择图层，快速生成组件并替换图层。</p><p><br></p><p><br></p><p><strong>## Commands</strong></p><p><br></p><p>* `Auto Layout Fixed Size`: Set auto layout to fixed width and height.</p><p>* `1/2 width of parent`: Set the layer width to 1/2 of the parent layer.</p><p>* `1/3 width of parent`: Set the layer width to 1/3 of the parent layer.</p><p>* `1/4 width of parent`: Set the layer width to 1/4 of the parent layer.</p><p>* `Frame All`: Wrap frame to all selected layers.</p><p>* `Swap Position`: Select two layers to swap them.</p><p><br></p><p><br></p><p>========·========</p><p><br></p><p><br></p><p><strong>## 功能说明</strong></p><p><br></p><p>该插件致力于让设计更加快速化、工程化。目前功能还很简陋，很多功能还在试探。</p><p><br></p><p>插件提供了一些常用的快速命令，让设计更加高效，让我们尽可能摆脱鼠标工作。</p><p><br></p><p><br></p><p><strong>## 支持的命令：</strong></p><p><br></p><p>* `Auto Layout Fixed Size`: 设置自动布局为固定宽高。</p><p>* `1/2 width of parent`: 设置图层宽度为父图层的 1/2。</p><p>* `1/3 width of parent`: 设置图层宽度为父图层的 1/3。</p><p>* `1/4 width of parent`: 设置图层宽度为父图层的 1/4。</p><p>* `Frame All`: 把所有选中的图层用 Frame 包裹起来。</p><p>* `Swap Position`: 选中两个图层，交换位置。</p><p>* `Radius xx`: 选中多个图层，快速设置圆角。</p><p>* 开发常用</p><p>    * `Copy as DataUrl`: 复制为 Data URL，可用于网页图片 `src`。</p><p>    * `Copy as Path Data`: 复制为 svg path 的 `d` 属性。</p><p><br></p>","id":"1115253540858802652","installCount":438,"lastUpdateDate":"2022-07-02T18:40:25.589Z","likeCount":3,"name":"Yunser Design","publisherHandle":"yunser","publisherId":"848150194698453288","publisherName":"Yunser","runCount":748,"viewCount":542},{"description":"<p>Using ColorBlind Plugin get accurate and realtime simulation of your designs based on the type of disorder you have selected.</p><p><br></p><p>Steps to Preview:</p><ol><li>Select any single frame/group/element.</li><li>Open Color Blind Plugin.</li><li>Select the type of disorder from the dropdown.</li><li>Preview your designs.</li></ol><p><br></p><p>Steps to Attach Preview:</p><ol><li>Select any single frame/group/element.</li><li>Open Color Blind Plugin.</li><li>Select the type of disorder from the dropdown.</li><li>Preview your designs.</li><li>Click on \"Insert Image\"</li></ol><p><br></p><p>Algorithm Credits:</p><ul><li>https://github.com/MaPePeR/jsColorblindSimulator <em>developed by&nbsp;</em><a href=\"https://github.com/MaPePeR\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\"><em>MaPePeR</em></a></li><li><a href=\"https://www.color-blindness.com/coblis-color-blindness-simulator/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Coblis</a></li></ul>","id":"1115550442410459794","installCount":350,"lastUpdateDate":"2022-06-24T07:05:35.186Z","likeCount":7,"name":"Color Blind","publisherHandle":"kishank","publisherId":"1054644947022011191","publisherName":"Kishan Kankhara","runCount":853,"viewCount":452},{"description":"<p>This plugin helps you to do hands-on UI&nbsp;practices in Figma without distraction of any other&nbsp;video or application. Get out of tutorial nightmare and learn by doing.</p>","id":"1115578309474408118","installCount":22,"lastUpdateDate":"2022-07-25T11:34:26.409Z","likeCount":4,"name":"100FigmaPrac","publisherHandle":"zoons","publisherId":"1072798065263559356","publisherName":"Zoon S","runCount":96,"viewCount":692},{"description":"<p>SVG to JSX with MUI</p><p>This plugin converts selected SVGs to JSX for MUI. And you can download it as zip file.</p><p><br></p><p>HOW TO USE</p><ol><li>Click the icons you want to convert.</li><li>Open plugin and check preview.</li><li>Click export</li></ol><p><br></p><p>Additional functions will be added. (e.g. disable optimization, without MUI, preview)</p><p><br></p><p>if you facing any issue, plz let me know!</p><p>https://github.com/alpacadevv/figma-svg-to-jsx-with-mui/issues</p>","id":"1115700158761255786","installCount":17,"lastUpdateDate":"2022-06-11T13:12:39.708Z","likeCount":0,"name":"SVG to JSX with MUI","publisherHandle":"zitodev","publisherId":"1606576","publisherName":"zitodev","runCount":38,"viewCount":78},{"description":"<p>ui to code</p>","id":"1115832119382223824","installCount":49,"lastUpdateDate":"2022-06-07T02:38:58.431Z","likeCount":1,"name":"AgilorToCode","publisherHandle":"AgilorTao","publisherId":"898035206791917614","publisherName":"Agilor.tao","runCount":60,"viewCount":90},{"description":"<p>Sure, the default <strong>font picker</strong> is ok... but have you dreamed about a faster, better way to <strong>preview</strong>, <strong>sort</strong>, <strong>choose</strong>, <strong>try out, compare,</strong> and <strong>bookmark</strong> fonts? I know I did... well, dream no further! <strong>Try the Picky Font plugin today</strong> and become a Picky Fonter!</p><p><br></p><h2>Features</h2><ul><li>Ultra-fast <strong>dynamic text preview</strong> to preview all your fonts at a glance</li><li><strong>Search and bookmark filter</strong> for quick access and side-by-side comparisons</li><li><strong>Instantly change any font with a single click</strong> in Picky Font</li></ul><p><br></p><h2>Pricing</h2><ul><li><strong>Free for 2 uses per document</strong> (No commitment, no sign-up necessary and use right away!)</li><li>If you like it, <strong>$10 (USD) for a</strong> <strong>lifetime license</strong> (limited to the first 100 customers, thanks for your support!) (payment through Gumroad for activation key)</li></ul><p><br></p><h2>Feedback</h2><p>Contact us directly anytime at&nbsp;<a href=\"mailto:contact@leeen.app\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">contact@leeen.app</a>, or give us feedback on our&nbsp;<a href=\"https://bit.ly/pickyfont\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">feedback form</a>&nbsp;about what you like, dislike, want to see, and any questions or issues you might have!</p><p><br></p><h2>Privacy Policy and Terms of Use</h2><p><a href=\"https://docs.google.com/document/d/1A0LqMRf_g4z6gq_STS647aCwgU5BduIb3Q8aUYv5pKQ/edit?usp=sharing\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Terms of Use</a> and <a href=\"https://docs.google.com/document/d/15p2RduYxKJknBs5qV4OaMCFOWsAPxxPtlAMmYM4vuzI/edit?usp=sharing\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Privacy Policy</a></p>","id":"1116008393962347712","installCount":437,"lastUpdateDate":"2022-07-25T13:31:13.032Z","likeCount":7,"name":"Picky Font","publisherHandle":"leeen","publisherId":"1116006141098465786","publisherName":"Leeen","runCount":1047,"viewCount":595},{"description":"<p>Generate all possible instances for your components, including every combination of variants and component properties, all in a tidy labelled table.</p><p><br></p><h2><strong>Creating tables</strong></h2><ol><li>Select one or multiple components or component sets.</li><li>Run Propstar.</li><li>That's it! A table of instances will be generated behind your component, displaying your main component alongside all possible instances.</li></ol><p><br></p><h2><strong>Ordering</strong></h2><p>To change the order of instances on the table, reorder the properties and values directly on Figma, using the controls on the right sidebar.</p><p><br></p><p>The property values of your default variants are prioritised so that the main components stay on the left, while the generated instances are spread around the rest of the table.</p><p><br></p><p>Figma does not currently support mixing the order between variant and component properties.</p><p><br></p><h2><strong>How to use component properties</strong></h2><p>For more information on using the new component properties and reducing the amount of variants you need to maintain, check the <a href=\"https://help.figma.com/hc/en-us/articles/5579474826519-Create-and-use-component-properties\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Create and use component properties</a><strong> </strong>help article.</p>","id":"1116018586739867857","installCount":2125,"lastUpdateDate":"2022-07-19T13:29:44.742Z","likeCount":335,"name":"Propstar","publisherHandle":"wise","publisherId":"1784","publisherName":"Wise","runCount":6887,"viewCount":7290},{"description":"<p>Sync text from Notion database to Figma document.</p><p>Useful when managing app text in Notion or for multilingual support.</p><p><br></p><h2>🔥&nbsp;How to use</h2><ul><li>[Notion]&nbsp;Create a reverse proxy to avoid&nbsp;<a href=\"https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS/Errors\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">CORS errors</a> (<a href=\"https://github.com/ryonakae/figma-plugin-sync-notion#%EF%B8%8F-create-a-reverse-proxy-to-avoid-cors-errors\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">More information</a>).</li><li>[Notion]&nbsp;<a href=\"https://developers.notion.com/docs/getting-started#step-1-create-an-integration\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Create a Notion integration.</a></li><li>[Notion]&nbsp;Create a database.</li><li>[Notion]&nbsp;<a href=\"https://developers.notion.com/docs/getting-started#step-2-share-a-database-with-your-integration\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Share the database with your integration.</a></li><li>[Notion]&nbsp;Add pages with unique key (e.g., page title) and values to the database.</li><li>Currently, title, formula, and text properties are supported.</li><li>Variables can be embedded. e.g.,&nbsp;<code>{name} follows you. (Age: {age})</code></li></ul><p><br></p><ul><li>[Figma]&nbsp;Rename text layers you want to sync to&nbsp;<code>#&lt;Key Property Name of Notion&gt;</code>.</li><li>e.g.,&nbsp;<code>#pageTitle</code>,&nbsp;<code>#description</code>&nbsp;and&nbsp;<code>#signInWithApple</code></li><li>You can pass parameters. e.g.,&nbsp;<code>#notification?name=Alistair Warren&amp;age=24</code>. If there are variables in Notion database value, it will replace the text with that value in it.</li><li>In this example, the text will replaced by&nbsp;<code>Alistair Warren follows you. (Age: 24)</code></li><li>[Figma]&nbsp;Open this plugin and fill in each field.</li><li>[Figma]&nbsp;Select a frames or text layers. Or, select nothing. If nothing is selected, all text in the current page will be synced.</li><li>[Figma]&nbsp;Press the \"Sync Notion\" button.</li></ul><p><br></p><ul><li>Enjoy😎🏝</li></ul><h2><br></h2><h2>⚙️&nbsp;Create a reverse proxy to avoid CORS errors</h2><p><a href=\"https://github.com/ryonakae/figma-plugin-sync-notion#%EF%B8%8F-create-a-reverse-proxy-to-avoid-cors-errors\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Please see this guide.</a></p><p><br></p><h2>📮&nbsp;Support</h2><p>If you have any plobrem or feedback, please use the&nbsp;<a href=\"https://github.com/ryonakae/figma-plugin-sync-notion/issues\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">GitHub Issues</a>.</p><p><br></p><p>===</p><p><br></p><p>This plugin is made by Ryo Nakae&nbsp;🙎‍♂️.</p><ul><li><a href=\"https://brdr.jp/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://brdr.jp</a></li><li><a href=\"https://twitter.com/ryo_dg\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://twitter.com/ryo_dg</a></li><li><a href=\"https://github.com/ryonakae\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://github.com/ryonakae</a></li></ul>","id":"1116202373222780315","installCount":198,"lastUpdateDate":"2022-07-15T08:43:41.716Z","likeCount":22,"name":"Sync Notion","publisherHandle":"ryo_dg","publisherId":"828596","publisherName":"Ryo Nakae","runCount":323,"viewCount":732},{"description":"<p>\"Un outil simple et performant pour construire et détailler le cahier des charges de votre MVP à partir de Figma !\"</p><p><br></p><p><strong>Regardez cette vidéo de 1 minute pour en comprendre le fonctionnement !</strong></p><p><br></p><p><code><a href=\"https://www.youtube.com/watch?v=lX04m5hknKc\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\"><strong>“Regarder la vidéo” </strong></a></code></p><p><br></p><p>Le Backlog Generator est un des composants de la plateforme DevFactory (<a href=\"https://devfactory.ai\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://devfactory.ai</a>).</p><p>Grâce à son plugin Figma, en partant d’un design existant ou bien d’une création, vous pourrez générer en quelques clics un fichier excel contenant le cahier des charges fonctionnel de votre future application .</p><p><br></p><p>Une fois que vous êtes connecté, vous pouvez créer différentes users stories pour chaque page de votre projet. Pour créer une user story, cliquez sur le bouton suivant. Pour créer une nouvelle page, sélectionnez-là puis cliquez sur \"+\". Chaque page contient autant de users stories que nécessaire.</p><p><br></p><p><strong>Les user stories sont détaillées depuis figma et intégrées automatiquement dans le Backlog.</strong></p><p><strong>Pour chacune d’entre elle, vous pourrez renseigner :</strong></p><p><br></p><ul><li>Une colonne “impact business” (notée de 1 à 4) pour évaluer l'importance de la fonctionnalité au sein de l’application</li></ul><p><br></p><ul><li>Une colonne “effort technique” (notée de 1 à 4) pour identifier&nbsp;la&nbsp;zone de risque technique potentielle sur la fonctionnalité</li></ul><p><br></p><ul><li>Une colonne “ Est-ce que cette fonctionnalité existe déjà ailleurs” (généré depuis le plugin) car les concurrents ont souvent de bonnes idées !</li></ul><p><br></p><ul><li>Une colonne “version” pour déterminer si une fonctionnalité fait partie du MVP, de la V1, de la VF (généré depuis le plugin)</li></ul><p><br></p><ul><li>Une colonne “Priorité” pour ajouter des commentaires sur une fonctionnalité essentielle</li></ul><p><br></p><ul><li>Une colonne “nombre de jours de développement via DevFactory” pour mesurer le gain de temps&nbsp;de développement sur la fonctionnalité (cette colonne est utile uniquement si vous confiez votre développement à Sastec).</li></ul>","id":"1116302949496026651","installCount":11,"lastUpdateDate":"2022-07-01T08:09:42.245Z","likeCount":3,"name":"DevFactory Backlog Generator","publisherHandle":"tekabdev","publisherId":"1115978587960834123","publisherName":"Dev","runCount":27,"viewCount":101},{"description":"<p>Fill text content quickly.</p><p><br></p><p>快速填充自定义文本。</p>","id":"1116426626869645051","installCount":36,"lastUpdateDate":"2022-06-10T17:47:31.456Z","likeCount":0,"name":"Random Text","publisherHandle":"yunser","publisherId":"848150194698453288","publisherName":"Yunser","runCount":150,"viewCount":99},{"description":"<p>Allows generating gradients for one color, two colors and several colors palettes. On start extracts background colors from selection</p>","id":"1116457148600609561","installCount":35,"lastUpdateDate":"2022-06-12T19:59:18.229Z","likeCount":0,"name":"Yet Another Gradients Generator","publisherHandle":"Liksu","publisherId":"1068833548562154152","publisherName":"Petro","runCount":68,"viewCount":67},{"description":"<p><strong>No more abstract designs with Wordtract</strong></p><p>Go from lorem ipsum to context in one click! use Wortract to find the perfect words for your designs. With over 200+ microcopies handcrafted by real humans and organised in 10 main categories, you’re bound to find one that suits your needs.</p><p><strong>Be part of our journey. Upgrade to Pro!</strong></p><p>Support our product development process, and see exactly how the plugin works step by step, in the roadmap right here</p><p>Sign up for Pro now, and you will unlock these benefits:</p><ol><li>🛠️ Variants - With smart variables, you’ll spend less time tweaking the microcopy.</li><li>💗&nbsp;Lifetime pricing - first 400 members have a lifetime subscription and product support with Wordtract.</li></ol><ul><li>👯‍♂️&nbsp;Become our product ambassador - participate in our user research, and vote on what we should build next.</li><li>💪&nbsp;Named as our early supporter - You will be named as our early supporter and we will forever thank you for eating this anti-lorem ipsum, delicious digital cake with us.</li></ul><p>Join the gang - <a href=\"https://pro.wordtract.com/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Go Pro!</a> or use the free version by installing the plugin ;)</p>","id":"1116705322072035353","installCount":136,"lastUpdateDate":"2022-06-09T12:33:44.663Z","likeCount":3,"name":"Microcopies by Wordtract","publisherHandle":"wordtract","publisherId":"1112701181949292744","publisherName":"Wordtract","runCount":218,"viewCount":246},{"description":"<p><strong>Run your team's design process on designOS</strong></p><p>Share work and capture feedback with your design team.</p><p><br></p><p><strong>Stay in sync with your design team</strong></p><p>One place to share what you're working on and see what your design team is up to.</p><p><br></p><p><strong>Security</strong></p><p>designOS uses industry standards for data privacy and security including SOC 2 compliant services.</p><p><br></p><p><a href=\"https://designos.com\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">designos.com</a></p>","id":"1116854429034723530","installCount":206,"lastUpdateDate":"2022-06-29T19:29:55.546Z","likeCount":15,"name":"designOS","publisherHandle":"withdiagram","publisherId":"1004440237929203297","publisherName":"Diagram","runCount":375,"viewCount":1006},{"description":"<p>A simple little plugin to jump to the top of an artboard you're working in.</p><p>To use: Have any layer selected within the artboard, and run the plugin. It'll jump you to the top. Recommend adding a keyboard shortcut</p>","id":"1116879942370291928","installCount":10,"lastUpdateDate":"2022-06-10T00:02:54.691Z","likeCount":3,"name":"Jump to Top","publisherHandle":"ryanjohnson","publisherId":"1053992","publisherName":"Ryan Johnson","runCount":130,"viewCount":26},{"description":"<p>Annotate variant properties for multiple components. Just select component instances and run the plugin. A text box is generated with variant properties for every selection. This makes annotating components a breeze, especially while creating component specifications.</p>","id":"1117086370260402620","installCount":133,"lastUpdateDate":"2022-06-10T13:56:50.230Z","likeCount":10,"name":"Variant Annotator","publisherHandle":"jaynish","publisherId":"1844633","publisherName":"Jaynish Shah","runCount":240,"viewCount":566},{"description":"<p>This tool extracts colors from the huge library of high-quality photos made possible by&nbsp;<a href=\"https://unsplash.com/?utm_source=ai_color_palette_generator&amp;utm_medium=referral\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Unsplash</a>. When enough palettes have been extracted from photos for a keyword, the AI will learn those palettes to generate even more similar palettes. You can even specify a color bias for the AI. The possibilities are endless. <a href=\"https://www.ai-colors.design\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">A web version</a> of this plugin is also available.</p>","id":"1117264174233166391","installCount":409,"lastUpdateDate":"2022-07-01T01:46:33.930Z","likeCount":3,"name":"AI Color Palette Generator","publisherHandle":"simonlidesigns","publisherId":"908609084951704417","publisherName":"Simon Li","runCount":1256,"viewCount":620},{"description":"<p>figma gitlab auto</p>","id":"1118088256819363897","installCount":67,"lastUpdateDate":"2022-06-17T08:16:50.816Z","likeCount":0,"name":"xdocoi","publisherHandle":"zcwhandle","publisherId":"1113020484844286817","publisherName":"zcw","runCount":103,"viewCount":189},{"description":"<p>一款文字填充工具，一键智能填充文字内容，可支持自定义添加编辑和删除</p>","id":"1118116942894144611","installCount":92,"lastUpdateDate":"2022-07-11T15:17:19.989Z","likeCount":9,"name":"填充工具","publisherHandle":"kingk1ng","publisherId":"1066239095511384811","publisherName":"阿京","runCount":546,"viewCount":331},{"description":"<p>Quickly navigate to frame or component</p>","id":"1118169137242807454","installCount":300,"lastUpdateDate":"2022-06-16T09:43:12.181Z","likeCount":6,"name":"Nav To","publisherHandle":"guojiangnian","publisherId":"2696041","publisherName":"Jiang Nian","runCount":1019,"viewCount":511},{"description":"<p>Design radial menus in Figma with Radial Generator.</p><p><br></p><p>Live preview radials as you tweak the following properties:</p><ul><li>size</li><li>number of segments</li><li>sweep and rotation</li><li>thickness</li><li>gap between segments</li></ul><p><br></p><p>Radial Generator is currently in an open BETA. Feedback is welcome and appreciated.</p><p><br></p><h2>Open Source</h2><p>Radial Generator is <a href=\"https://github.com/aashreys/radial-generator\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">open source</a> and contributions are welcome.</p>","id":"1118321937703348544","installCount":774,"lastUpdateDate":"2022-06-16T04:50:58.472Z","likeCount":32,"name":"Radial Generator BETA","publisherHandle":"aashreys","publisherId":"697643","publisherName":"Aashrey Sharma","runCount":1376,"viewCount":1390},{"description":"<p>Convert designs into React components.</p>","id":"1118342101812507980","installCount":243,"lastUpdateDate":"2022-07-18T10:43:49.329Z","likeCount":14,"name":"Aspect","publisherHandle":"aspectapp","publisherId":"1105552921385932147","publisherName":"Aspect","runCount":732,"viewCount":919},{"description":"<p>This plugin generates a dark/light theme from your text.</p>","id":"1118525197806642720","installCount":251,"lastUpdateDate":"2022-06-16T12:04:21.607Z","likeCount":7,"name":"Auto Tint Text Creator","publisherHandle":"fuadhaslan","publisherId":"1498719","publisherName":"Fuad H.Aslan","runCount":695,"viewCount":224},{"description":"<p>Wrap a new frame around layers quickly.</p><p><br></p><p>批量选中图层后，快速添加画板。支持适应内容、固定大小、添加间距、自动布局等功能。</p>","id":"1118563470807277130","installCount":61,"lastUpdateDate":"2022-06-17T04:48:53.767Z","likeCount":0,"name":"Frame Tool","publisherHandle":"yunser","publisherId":"848150194698453288","publisherName":"Yunser","runCount":83,"viewCount":82},{"description":"<p>Create your very own generative art with the design tool you already love. Check out this sample file to explore Unikat:</p><p><br></p><p><a href=\"https://www.figma.com/community/file/1129439918697677290\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://www.figma.com/community/file/1129439918697677290</a></p>","id":"1118809350817208085","installCount":192,"lastUpdateDate":"2022-07-13T17:32:03.700Z","likeCount":11,"name":"Unikat","publisherHandle":"gorilla","publisherId":"1108062159799441179","publisherName":"Gorilla Technologies","runCount":932,"viewCount":507},{"description":"<p>Reset names of selected layers to default.</p><p>EVERY element! Text, frames, groups, rectangles, etc.</p><h2><br></h2><h2>🔥&nbsp;How to use</h2><ol><li>Select one or more layers.</li><li>Run this plugin.</li><li>Enjoy🤟</li></ol><h2><br></h2><h2>✏️&nbsp;Note</h2><p>If you select component or variants, this plugin will not rename. Because we don't want the component renamed!</p><h2><br></h2><h2>📮&nbsp;Support</h2><p>If you have any plobrem or feedback, please use the&nbsp;<a href=\"https://github.com/ryonakae/figma-plugin-reset-layer-name/issues\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">GitHub Issues</a>.</p><p><br></p><p>===</p><p><br></p><p>This plugin is made by Ryo Nakae&nbsp;🙎‍♂️.</p><ul><li><a href=\"https://brdr.jp/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://brdr.jp</a></li><li><a href=\"https://twitter.com/ryo_dg\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://twitter.com/ryo_dg</a></li><li><a href=\"https://github.com/ryonakae\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://github.com/ryonakae</a></li></ul>","id":"1118882302918088586","installCount":188,"lastUpdateDate":"2022-06-23T07:55:24.120Z","likeCount":4,"name":"Reset Layer Name","publisherHandle":"ryo_dg","publisherId":"828596","publisherName":"Ryo Nakae","runCount":455,"viewCount":242},{"description":"<p>After batch selection of layers, quickly randomize the size and position.</p><p><br></p><p>批量选中图层后，快速随机设置大小和位置。</p>","id":"1118961669120674782","installCount":78,"lastUpdateDate":"2022-06-18T14:35:50.192Z","likeCount":1,"name":"Random Size & Position","publisherHandle":"yunser","publisherId":"848150194698453288","publisherName":"Yunser","runCount":246,"viewCount":124},{"description":"<p>Easily add accurate horizontal and vertical scrollbars to frames. Works regardless of Auto-Layout settings and calculates all sizing automatically :^)</p><p><br></p><p>Simply select a frame with children and run the plugin. If a scrollbar is needed on either axis, it will be added to your frame. (Note that if nothing is out of the bounds of the frame, no scrollbars are needed, so nothing will be generated!) If your content changes, re-run the plugin on your frame (optionally via a shortcut in the properties panel) and the scrollbars will adjust accordingly.</p><p><br></p><p>In the future, if requested, I would consider adding a control panel for editing the size/styling of the generated scrollbar and changing initial offsets.</p><p><br></p><p>Enjoy!</p>","id":"1119045831274955819","installCount":1143,"lastUpdateDate":"2022-06-29T13:43:57.125Z","likeCount":27,"name":"scrollbars","publisherHandle":"bz","publisherId":"1285835","publisherName":"Benjamin Zweig","runCount":4003,"viewCount":1342},{"description":"<h2>Quickly toggle the visibility of spacer component instances using opacity instead of show/hide.</h2><p><br></p><p>This is specifically built for designers using spacer components to replace padding in autolayout frames. Where show/hide removes the spacers entirely, opacity retains the layout, letting designers and developers show and hide spacer colors/labels as needed.</p><p><br></p><p>This plugin will only affect instances of component sets with \"~spacer\" included in the name. You must also create a variant property named \"Visible\" with \"On\" and \"Off\" values. Set \"On\" to 100% opacity and \"Off\" to 0% opacity.</p><p><br></p><p>Note: Names are case sensitive!</p><p><br></p><p>Hot tip: Mac users can bind the plugin to an App Shortcut in System Preferences for quick access. I like to use control + F (as it's right next to the grid shortcut).</p>","id":"1119123732088744027","installCount":955,"lastUpdateDate":"2022-06-16T04:40:10.965Z","likeCount":18,"name":"Spacer Toggle","publisherHandle":"kyl","publisherId":"951612565605098443","publisherName":"Kylie LaCour","runCount":2488,"viewCount":1524},{"description":"<p>日本語とそれ以外のテキストに別々のフォントを出し分けるプラグインです。</p><p><br></p><p>このプラグインはフォントを変更したいテキストを選択して、日本語とそれ以外の文字に対してフォントを設定。最後に、ボタンをクリックすると文字ごとにフォントが設定されます。</p><p><br></p><p><strong>なぜ必要なの？</strong></p><p><br></p><p>MacOSのCSSで次のような指定をした場合、日本語には「Hiragino Sans」、英語には「Helvetica Neue」が適用されることが想定されます。</p><p><br></p><p>```</p><p>body { font-family: \"Helvetica Neue\", Arial, \"Hiragino Sans\", Meiryo , sans-serif; }</p><p>```</p><p><br></p><p>Figma上でこれらの指定を行うには手作業が必要ですが、このプラグインはその作業を自動化するためのものです。</p>","id":"1119612117220702803","installCount":186,"lastUpdateDate":"2022-06-23T05:44:20.520Z","likeCount":3,"name":"Japanese Font Mixer","publisherHandle":"KODANSHAtech","publisherId":"1119949988922704808","publisherName":"KODANSHAtech","runCount":533,"viewCount":322},{"description":"<p>An easy-to-use Figma link shortener &amp; beautifier.</p>","id":"1119623265256000093","installCount":409,"lastUpdateDate":"2022-06-17T15:01:36.000Z","likeCount":16,"name":"Figma Short Link","publisherHandle":"momolu","publisherId":"110029","publisherName":"Tongtong Lu","runCount":1297,"viewCount":626},{"description":"<p>Choose a date and get Color of The Day based on <em>someone's</em> choice of the year's color.</p><p><br></p><p>You can only see this and past years, not future. And only one color per every year chosen by me if there was two of them chosen by <em>someone</em>.</p><p><br></p><p>I've used some silly math for interpolation, but let's call it <em>color magic</em>.</p>","id":"1119738409890586322","installCount":261,"lastUpdateDate":"2022-06-27T12:28:18.662Z","likeCount":4,"name":"Color of The Day","publisherHandle":"vilkastakan","publisherId":"43215","publisherName":"Vilka Stakan","runCount":1537,"viewCount":376},{"description":"<p>Create a <strong>beautiful color token</strong> with <strong>contrast</strong> according to <strong>WCAG</strong>.</p><p><br></p>","id":"1119749356529142486","installCount":907,"lastUpdateDate":"2022-06-17T22:07:06.291Z","likeCount":26,"name":"Color Contrast Generator","publisherHandle":"diegosilvatech","publisherId":"1068099484660950687","publisherName":"Diego Silva","runCount":2614,"viewCount":1365},{"description":"<p>Gray the selected image.</p><p><br></p><p>选中图片并灰度化。</p>","id":"1119902195699638035","installCount":124,"lastUpdateDate":"2022-06-18T08:12:33.753Z","likeCount":0,"name":"Gray Image","publisherHandle":"yunser","publisherId":"848150194698453288","publisherName":"Yunser","runCount":553,"viewCount":182},{"description":"<p>Avatarg generates a beautiful type of avatars for your app design prototype with one simple click.</p><p><br></p><h2><strong>How to use plugin:</strong></h2><p>1. 👤 Select one shape or multiple shapes.</p><p>2. 🎨 Style your avatar.</p><p>3. ✨ Generate.</p><p><br></p><p>---</p><p><br></p><p>Feel free to tag me on Twitter (<a href=\"https://twitter.com/Yusof_Bz\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\"><strong>@Yusof_Bz</strong></a>) I'd love to see what you made using <strong>Avatarg</strong>.</p><p><br></p><p>😃 You are also welcome to submit your ideas and suggestions:</p><p>✍️ <a href=\"https://avatarg.canny.io/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://avatarg.canny.io</a></p><p><br></p><p>Happy designing 👨🏻‍🎨.</p>","id":"1120329159944131602","installCount":2502,"lastUpdateDate":"2022-07-17T14:12:37.043Z","likeCount":50,"name":"Avatarg","publisherHandle":"yusufbz","publisherId":"564839","publisherName":"Yusuf Bz","runCount":6394,"viewCount":3320},{"description":"<p>Toggle all your spacers with ease.</p><p><br></p><p>How to use this plugin:</p><p><br></p><ul><li>Create a dedicated page for your spacer components and name it <code>Spacers</code>. Make sure this page only contains your spacer components and nothing else</li><li>Use your spacers freely, even in auto layouts (they will still occupy their space when hidden)</li><li>Toggle the visibility by using the <code>Toggle Spacers → All</code> command (say via the context menu)</li></ul><p><br></p><p>If you want your spacers page to be named differently you may use the the <code>Toggle Spacers → Select Page</code> command to select a different page containing your spacers.</p><p><br></p><p>While similar plugins hide the actual instances of your spacer components, this plugin actually changes the components itself. This means that either all or no spacers will be visible at any given time.</p><p><br></p><p>The code for this plugin can be found at <a href=\"https://github.com/renke/figma-plugin-toggle-spacers\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">GitHub</a>. Feel free to open an issue if you encounter any problems or have suggestions on how to improve the plugin.</p>","id":"1120348459929779245","installCount":204,"lastUpdateDate":"2022-06-19T20:22:13.928Z","likeCount":2,"name":"Toggle Spacers","publisherHandle":"renke10","publisherId":"465943","publisherName":"Renke Grunwald","runCount":609,"viewCount":323},{"description":"<p>Easily target and export Figma layers as a structured SVG sprite.</p>","id":"1120658096843630850","installCount":144,"lastUpdateDate":"2022-07-12T00:39:28.372Z","likeCount":1,"name":"sprite.","publisherHandle":"ethanroxburgh","publisherId":"2491114","publisherName":"Ethan Roxburgh","runCount":678,"viewCount":463},{"description":"<p><strong>Loreum ipusm</strong> for logos. Insert dummy logos of companies into your <strong>figma</strong> or <strong>figjam</strong> file quickly. The plugin also includes <strong>194 flags</strong> of countries as well as popular brand logos.</p><p><br></p><p>I'd love to know what you made using uilogos. Feel free to tag me or say hi on Twitter (<a href=\"https://twitter.com/realvjy\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\"><strong>@realvjy</strong></a>). You are also welcome to share your feedback or bug reports 🙏</p><p>----</p><p>The goal of this project is to contribute to the open design community. Even though I do not intend to charge for these community resources, if uiLogos has ever been useful to you or your team, I would appreciate your support! It helps to maintain server costs and keep it grow. More details about the project <a href=\"https://uilogos.co\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\"><strong>uilogos.co</strong></a></p><p>----</p><p>Plugin is opensource: <a href=\"https://github.com/realvjy/uilogos-figma\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\"><strong>github.com/realvjy/uilogos-figma</strong></a></p><p>You are welcome to contribute</p><p><br></p><p>Website:<a href=\"https://uilogos.co\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\"><strong> uilogos.co</strong></a></p><p><br></p>","id":"1120667703468196103","installCount":3337,"lastUpdateDate":"2022-06-20T10:58:25.633Z","likeCount":132,"name":"uiLogos","publisherHandle":"realvjy","publisherId":"1749","publisherName":"vijay verma","runCount":8096,"viewCount":5841},{"description":"<p>Generate artworks, patterns, graphics, backgrounds, NFTs and collections!</p><p><br></p><p>In Beta.</p>","id":"1120790898970014140","installCount":570,"lastUpdateDate":"2022-07-19T12:01:02.558Z","likeCount":106,"name":"Generater Beta","publisherHandle":"kontek","publisherId":"1374920","publisherName":"Pawel Kontek","runCount":3631,"viewCount":2704},{"description":"<p>The plugin changes the case of a sentence or phrase (UPPERCASE / lowercase)</p>","id":"1121869503799701981","installCount":5,"lastUpdateDate":"2022-07-24T17:45:04.279Z","likeCount":0,"name":"Case Convert","publisherHandle":"xiolog","publisherId":"1738551","publisherName":"Aleksandr Lykov","runCount":27,"viewCount":24},{"description":"<p>Sometimes it's nice to be able to have transparency on layers within FigJam. FigSparency solves this for you.</p>","id":"1122102299376345761","installCount":3,"lastUpdateDate":"2022-07-16T17:41:07.832Z","likeCount":4,"name":"FigSparency","publisherHandle":"_kejk","publisherId":"3878431","publisherName":"Karl Koch","runCount":137,"viewCount":184},{"description":"<p>Simple plugin that replace numbers and symbols from one drawing to the another.</p><p><br></p><p>With this plugin you can convert numbers and the % symbol as follows:</p><p><br></p><p><strong>From </strong></p><ul><li>Eastern Arabic \"Arabic–Indic Numerals\".</li><li>Persian.</li><li>Urdo.</li></ul><p><strong>To </strong></p><ul><li>Western Arabic \"English\".</li></ul><p><br></p><p><strong>And from</strong></p><ul><li>Western Arabic \"English\".</li></ul><p><strong>To</strong></p><ul><li>Eastern Arabic \"Arabic–Indic Numerals\".</li></ul><p><br></p><p>Stay tuned, more updates are coming down the line.</p>","id":"1122223700375884586","installCount":8,"lastUpdateDate":"2022-06-29T13:56:05.832Z","likeCount":3,"name":"Numbers converter","publisherHandle":"Loboly","publisherId":"1906782","publisherName":"Omar Alharbi","runCount":43,"viewCount":113},{"description":"<p><em>Enhance Figma's corner smoothing on large rounded corners</em></p><p><br></p><h2>The problem</h2><p>Have you ever noticed that Figma's corner smoothing doesn't have much effect on large rounded corners?</p><p>This plugin solves the problem by \"preserving\" the smoothing param that you choose and generating slightly different bezier curves.</p><p><br></p><h2>Usage</h2><p>Pick a rectangle with a large corner radius. <strong>Make sure \"corner smoothing\" is not 0%.</strong></p><p>Right-click on the rectangle and select \"Preserve Smoothing\" from the menu.</p>","id":"1122437229616103296","installCount":120,"lastUpdateDate":"2022-06-30T04:46:42.691Z","likeCount":8,"name":"Preserve Smoothing","publisherHandle":"tienphaw","publisherId":"860726403268594819","publisherName":"Tien Pham","runCount":1049,"viewCount":493},{"description":"<p>Generate sine waves easily</p>","id":"1122523615671222202","installCount":343,"lastUpdateDate":"2022-07-10T09:43:27.042Z","likeCount":32,"name":"Sine wave","publisherHandle":"varundevpro","publisherId":"4352909","publisherName":"Varun","runCount":4888,"viewCount":2692},{"description":"<p>Select odd or even elements from multiple elements selection, base on position.</p><p><br></p><p>Elements must have same X OR Y position.</p>","id":"1122808990495515720","installCount":6,"lastUpdateDate":"2022-06-27T02:24:55.698Z","likeCount":2,"name":"Odd and Even Select","publisherHandle":"tasonquynh","publisherId":"3251413","publisherName":"Tạ Sơn Quỳnh","runCount":17,"viewCount":36},{"description":"<h2>Quickly fill a selection with random colors from your Color Styles.</h2><p><br></p><p>This plugin finds all selected, filled elements (shapes, frames, groups, text layers, etc) and their nested layers and applies a color randomly from your defined color styles. </p><p><br></p><p>To fill with a limited palette from your styles, make sure those styles have the text \"~random\" included somewhere in the name. One way to easily create a limited palette, is to select all color styles you want to include, and right click \"Add new folder.\" Name your folder \"~random\" and voila, the plugin will only pull colors from that folder.</p><p><br></p><p>Note: Name is case sensitive! Make sure to write \"~random\" exactly as it is here, with the lowercase \"r\".</p><p><br></p><p>Hot tip: Mac users can bind the plugin to an App Shortcut in System Preferences for quick access to iterate until you find a random combination you like.</p>","id":"1123007826097121484","installCount":253,"lastUpdateDate":"2022-07-09T20:41:01.127Z","likeCount":15,"name":"Random Fill","publisherHandle":"kyl","publisherId":"951612565605098443","publisherName":"Kylie LaCour","runCount":2607,"viewCount":1365},{"description":"<p>Custom your awesome alphabet profile, available&nbsp;A-Z alphabet with various background color choices.</p><p><br></p><p>---</p><p><br></p><p><strong>How to use:</strong></p><ol><li>Choose the alphabet</li><li>Choose alphabet color</li><li>Choose background style</li><li>Choose the color</li><li>Generate :D</li></ol><p><br></p><p>---</p><p><br></p><p><strong>You can use to:</strong></p><ol><li>Your project</li><li>Your profile (Figma, Email, etc.)</li><li>Anythings!</li></ol><p><br></p><p>---</p><p><br></p><p><strong>How to use to Figma profile:</strong></p><ol><li>Generate the profile</li><li>Set the frame to 2000 x 2000 px</li><li>Set the border radius to 0 px</li><li>Export it</li><li>Set to your Figma profile :D</li></ol>","id":"1123069972564858080","installCount":260,"lastUpdateDate":"2022-06-29T05:31:49.626Z","likeCount":24,"name":"Alphabet Profile","publisherHandle":"timotius","publisherId":"602722","publisherName":"Timotius Muliawan","runCount":1755,"viewCount":740},{"description":"<p>Use the most advanced image processing tools from&nbsp;<a href=\"https://clipdrop.co/?utm_campaign=figma\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">ClipDrop</a>&nbsp;directly in Figma:</p><ul><li>Remove the background with incredible accuracy</li><li>Remove objects, people, text or defects</li><li>Enhance images and magically increase the resolution</li><li>Remove noise &amp; compression artefacts in 1 click</li></ul><p><br></p><p><strong>Use for Free:</strong></p><ul><li>No limits on the number of images.</li><li>No subscription is required.</li></ul><p><br></p><p><strong>How it works:</strong></p><ul><li>Run ClipDrop from the plugins menu.</li><li>Sign in with a free or ClipDrop Pro account</li><li>Select 1 or multiple images from your document.</li><li>Click on the action you want to perform \"Remove background\", \"Decompose\", \"Cleanup\" or \"Upscale\"</li><li>Et voilà! :)</li></ul><p><br></p><p><strong>You can also use your ClipDrop account on:</strong></p><ul><li><a href=\"https://apps.apple.com/us/app/clipdrop-ar-copy-paste/id1512594879\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">ClipDrop iOS app</a></li><li><a href=\"https://play.google.com/store/apps/details?id=app.arcopypaste&amp;hl=en&amp;gl=US\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">ClipDrop Android app</a></li><li><a href=\"https://clipdrop.co/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">ClipDrop Web app</a></li></ul><p><br></p><p>For advanced workflows, there's also an&nbsp;<a href=\"https://clipdrop.co/apis\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">API</a>, that lets you integrate ClipDrop anywhere.</p>","id":"1123355421740529204","installCount":310,"lastUpdateDate":"2022-07-08T11:46:11.901Z","likeCount":49,"name":"ClipDrop","publisherHandle":"cyrildiagne","publisherId":"747925","publisherName":"Cyril Diagne","runCount":2519,"viewCount":1802},{"description":"<p>Automatically add page numbers to the selected frames in Figma based on Frame position.</p><p><br></p><ol><li>Select desired frames to add page numbers</li><li>Run the Auto Number plug-in</li><li>Voila! ✨ Page number text is added automatically to selected frames</li></ol><p><br></p><p><strong>Plug-in works only for Frames</strong></p><p><br></p><p>Queries/suggestions</p><p><a href=\"https://twitter.com/5paceb0i\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Twitter</a> : https://twitter.com/5paceb0i</p>","id":"1123611887412283189","installCount":27,"lastUpdateDate":"2022-07-16T15:18:46.073Z","likeCount":5,"name":"Auto Page Number","publisherHandle":"5paceb0i","publisherId":"849159400048191073","publisherName":"Vishwesh Navtake","runCount":286,"viewCount":152},{"description":"<p>With SEO for Figma it is possible to quickly <strong>check</strong> if a page within your website design in Figma meets general <strong>SEO guidelines</strong> where most mistakes are made. You select your frame, title, first paragraph and keyword and get results back with helpful feedback to improve your design in terms of SEO.</p><p><br></p><p>And that's not all. To help web designers with their biggest problem, coming up with quality content, a function has been devised for that as well. With the help of <strong>artificial intelligence</strong>, original <strong>content</strong> can be <strong>generated</strong> with a focus on SEO. Think of titles, paragraphs and meta texts. No more lorem ipsum! 🎉</p><p><br></p><p><strong>Key features:</strong></p><ul><li>Check your designs on common SEO misstakes</li><li>Generate titles, content, paragraphs and meta descriptions with Artificial Intelligence</li><li>Free SEO check function</li><li>Get 100 tokens to generate content</li></ul><p><br></p><p><strong>Customer support:</strong></p><p><a href=\"mailto:support@oneblinq.com\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">support@oneblinq.com</a></p><p><br></p><p><strong>Buy your license:</strong></p><p><a href=\"https://oneblinq.gumroad.com/l/sff\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://oneblinq.gumroad.com/l/sff</a></p>","id":"1123911130270972452","installCount":328,"lastUpdateDate":"2022-06-29T09:42:51.274Z","likeCount":36,"name":"SEO for Figma","publisherHandle":"OneBlinq","publisherId":"979759042382572107","publisherName":"OneBlinq","runCount":2000,"viewCount":1141},{"description":"<p>With the Locale for Figma plugin you can translate complete pages or just a few text frames. Just select what you need to translated, click “Push content” and your translations will be in progress.</p><p><br></p><p>Locale integrates with the top LSPs in the world and many other tools to get your continuous translations going. You do not work with any LSP? No problem! Locale Services can help you with your translations.</p>","id":"1123939246904844936","installCount":34,"lastUpdateDate":"2022-06-29T11:34:30.679Z","likeCount":3,"name":"Locale","publisherHandle":"locale_to","publisherId":"1121429792120704146","publisherName":"Locale","runCount":547,"viewCount":270},{"description":"<p>Crafty is a Figma plugin which helps you create better UX copies for your designs in just 2 steps:</p><p><br></p><p>Enter your input sentence -&gt; Choose a style (friendly, formal, playful)</p><p><br></p><p>Then just let Crafty do its magic and generate different style variants! </p><p><br></p><p>Note: We are currently in limited beta. <a href=\"https://crafty.fourfifteen.studio/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Sign up here</a> for early access, or <a href=\"https://discord.gg/yRV6ZhhM\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">join our Discord</a>.</p>","id":"1124164296853200905","installCount":34,"lastUpdateDate":"2022-06-30T02:40:56.455Z","likeCount":4,"name":"Crafty ◦ Your Writing Assistant","publisherHandle":"fourfifteen","publisherId":"1124161939123684937","publisherName":"FourFifteen Studio","runCount":392,"viewCount":244},{"description":"<p>Quickly access hundreds of hand picked emote icons a.k.a <strong>kaomoji</strong>.</p><p><br></p><p>use Japanese fonts like the those mentioned in the plugin UI footer. </p><p><br></p><p><strong>Future features : </strong></p><ol><li>History.</li><li>SVG export.</li></ol><p><br></p><p><strong>Special note:</strong></p><p>Figma text rendering in canvas may not be able to display every kaomojis correctly, so you need a little bit of tinkering with fonts to fix some of them. You may need to look at the bottom of the plugin UI to check good fonts as I discover them.</p>","id":"1124309411104468220","installCount":175,"lastUpdateDate":"2022-07-17T21:40:36.560Z","likeCount":6,"name":"Emoticons","publisherHandle":"Loboly","publisherId":"1906782","publisherName":"Omar Alharbi","runCount":3725,"viewCount":1821},{"description":"<p>Flip your selection colours with ease</p><p><br></p><ul><li>Flip the two colours in your selection</li><li>Works with regular fills and strokes as well as library colour styles</li></ul><p><br></p><h2>Notes</h2><p><br></p><p>The plugin ignores invisible colours, layers, and layers inside boolean operation groups.</p><p><br></p><h2>Roadmap</h2><p><br></p><ul><li>Ability to choose the colours to flip when there are more than two in the selection</li><li>Do you have a feature request? Let me know on <a href=\"https://github.com/JohJakob/figma-flip-colors/issues\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">GitHub</a> or <a href=\"https://twitter.com/johjakob\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Twitter</a> :)</li></ul><p><br></p><p>This plugin is open source on <a href=\"https://github.com/johjakob/figma-flip-colors\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">GitHub</a></p><p><br></p><p>Made by <a href=\"https://twitter.com/johjakob\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">@johjakob</a></p>","id":"1124356039161054553","installCount":174,"lastUpdateDate":"2022-07-25T19:52:53.794Z","likeCount":18,"name":"Flip Colors","publisherHandle":"johjakob","publisherId":"476964","publisherName":"Johannes Jakob","runCount":1047,"viewCount":639},{"description":"<p>Insert all 120+ illustrations from the&nbsp;illustrations.co&nbsp;open-source library, directly in your <strong>Figma</strong> and <strong>FigJam</strong> files as&nbsp;<strong>SVG/Vector</strong>. </p><p><br></p><h2><strong>Features:</strong></h2><ul><li>Insert illustration as SVG / Vector</li><li>You can search by any related keyboard</li><li>Because it's SVG you can change shape and color anytime</li><li>Work with both Figma and FigJam</li></ul><p><br></p><h2>Feedback:</h2><p>I'd love to know what you made using illlustrations. Feel free to tag me or say hi on Twitter (<a href=\"https://twitter.com/realvjy\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\"><strong>@realvjy</strong></a>). You are also welcome to share your feedback or bug reports 🙏</p><p><br></p><h2>Support:</h2><p>The goal of this project is to contribute to the open design community. Even though I do not intend to charge for these community resources, if illlustrations has ever been useful to you or your team, I would appreciate your support! It helps to maintain server costs and keep it grow. More details about the project <a href=\"https://illlustrations.co/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\"><strong>illlustrations.co</strong></a></p><p>----</p><p><strong>Plugin is opensource: </strong><a href=\"https://github.com/realvjy/illlustrations-figma\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\"><strong>https://github.com/realvjy/illlustrations-figma</strong></a></p><p>You are welcome to contribute</p><p><br></p><p>Website:<a href=\"https://uilogos.co/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\"><strong> </strong></a><a href=\"https://illlustrations.co/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\"><strong>illlustrations.co</strong></a></p><p>Twitter:<a href=\"https://twitter.com/_illlustrations\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\"> <strong>_illlustrations</strong></a></p>","id":"1124370159336948073","installCount":873,"lastUpdateDate":"2022-07-07T18:32:43.493Z","likeCount":111,"name":"illlustrations","publisherHandle":"realvjy","publisherId":"1749","publisherName":"vijay verma","runCount":10912,"viewCount":6429},{"description":"<p>Swap colors in a click</p>","id":"1124704493694112597","installCount":86,"lastUpdateDate":"2022-07-10T10:03:22.842Z","likeCount":0,"name":"Swap colors (Switch Selection Colors)","publisherHandle":"varundevpro","publisherId":"4352909","publisherName":"Varun","runCount":902,"viewCount":502},{"description":"<p>Generate QR Code quickly.</p><p><br></p><p>快速生成二维码。</p>","id":"1124757070391801748","installCount":160,"lastUpdateDate":"2022-07-07T17:51:53.926Z","likeCount":8,"name":"QR Code Generator","publisherHandle":"yunser","publisherId":"848150194698453288","publisherName":"Yunser","runCount":1845,"viewCount":550},{"description":"<p>This plugin adds an identifier (prefix) to each layer that still has their default name.</p><p><br></p><p><strong>Features</strong></p><p>• Easy to install</p><p>• Activate in one click</p><p>• Add a \"❗️\" prefix</p><p><br></p><p><strong>Open Source</strong></p><p>• Contribute on <a href=\"https://github.com/maximedaraize/unnamed-layer\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Github</a></p><p>• MIT License</p>","id":"1124877766066983898","installCount":4,"lastUpdateDate":"2022-07-22T20:26:15.916Z","likeCount":3,"name":"Unnamed Layer","publisherHandle":"maximedaraize","publisherId":"374130","publisherName":"Maxime Daraize","runCount":13,"viewCount":55},{"description":"<p>Easily adjust the stroke width, colour or opacity on any element that has strokes. Simply highlight one or many elements and enter an amount to set the stroke width or opacity, or pick a colour from the native colour picker.</p><p><br></p><p>Hit <code>Return</code> or <code>Enter</code> in the input to set the value instantly or click the any of the buttons.</p>","id":"1125114185132823685","installCount":0,"lastUpdateDate":"2022-07-19T13:04:16.115Z","likeCount":3,"name":"FigStrokes","publisherHandle":"_kejk","publisherId":"3878431","publisherName":"Karl Koch","runCount":71,"viewCount":131},{"description":"<p>Easily adjust the radius on any Shape with Text element. Simply highlight one or many elements and enter an amount to set the radius amount.</p><p><br></p><p>Hit <code>Return</code> or <code>Enter</code> in the input to set the value instantly or click the button.</p>","id":"1125115259670703238","installCount":0,"lastUpdateDate":"2022-07-16T17:32:34.420Z","likeCount":2,"name":"FigRadius","publisherHandle":"_kejk","publisherId":"3878431","publisherName":"Karl Koch","runCount":95,"viewCount":171},{"description":"<p>Save your spot anywhere within your file then with a click of a button you can <strong>Jumpback.</strong></p><p><br></p><p><strong>STEP-BY-STEP</strong></p><p>1. SAVE Current Spot</p><p>2. JUMP to Saved Spot</p><p>3. CLEAR Saved Spot (to make way for a new one)</p><p><br></p><p><strong>USE CASE EXAMPLE</strong></p><p>Joe is working on the latest update to the home screen for an app. He sees Jenny’s cursor come over, “Hey Joe, come take a look at something.”Joe wants to help her out, so he follows her over where she’s been doing updates on the Settings screen. He spends 10 minutes giving his feedback, but now he's ready to get back over to where he was working.The problem is, there’s multiple pages in this file, and 100+ screens... where was he?! <strong>Jumpback</strong></p><p>&nbsp;plugin to the rescue!</p><p><br></p><p>This plugin was built with love by the @unfold team - check out our other plugins and <a href=\"https://unfold.co/?utm_source=figma&amp;utm_medium=plugin&amp;utm_content=jumpback\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">what we do</a>!</p>","id":"1125156339032115371","installCount":69,"lastUpdateDate":"2022-07-06T03:10:45.193Z","likeCount":27,"name":"Jumpback","publisherHandle":"unfold","publisherId":"862311559760360561","publisherName":"unfold","runCount":405,"viewCount":590},{"description":"<p>See a list of all section sin your FigJam file and go there immediately. No more panning around in confusion!</p>","id":"1125375420364004642","installCount":0,"lastUpdateDate":"2022-07-15T12:41:46.543Z","likeCount":1,"name":"Section list","publisherHandle":"megalekos","publisherId":"1095825","publisherName":"Alexander Goudoulas","runCount":78,"viewCount":86},{"description":"<p>With plugins and widgets it's possible to build powerful Figma tools, but it's still easier to build the components you need in Figma itself. This tool serializes Figma nodes to JavaScript, TypeScript, and JSX that can be copied and pasted into your plugin or widget code. It's basically what should show up in the code dropdown under the inspect tab.</p>","id":"1125620374742233546","installCount":32,"lastUpdateDate":"2022-07-06T18:21:43.876Z","likeCount":7,"name":"JavaScript and JSX Serializer","publisherHandle":"srouse","publisherId":"3036320","publisherName":"Scott Rouse","runCount":548,"viewCount":318},{"description":"<h2>Learn and teach&nbsp;Figma&nbsp;in Figma</h2><p>Learn&nbsp;design and Figma from other community members or share your Figma knowledge by submitting your guides.</p><p><br></p><p>Learn more about GuidesLab: <a href=\"http://www.guideslab.io\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">www.guideslab.io</a></p>","id":"1126063857533670350","installCount":11,"lastUpdateDate":"2022-07-20T08:31:56.200Z","likeCount":12,"name":"GuidesLab","publisherHandle":"mateusz","publisherId":"267018","publisherName":"Matt Wierzbicki","runCount":108,"viewCount":236},{"description":"<p><strong>添加 Brand Color</strong></p><p><br></p><p>Going to add more brand.....</p>","id":"1126075798426101730","installCount":143,"lastUpdateDate":"2022-07-12T05:33:12.964Z","likeCount":9,"name":"Brand colors","publisherHandle":"cchelseaxie","publisherId":"1081517412025946961","publisherName":"qingqing xie","runCount":2488,"viewCount":1624},{"description":"<p>It makes it possible to clear all digits in all values after the decimal point in one click, Including auto layout, typography, effects, etc.</p><p><br></p><p>Any suggestions: <a href=\"http://yurafilin.com\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">yurafilin.com</a></p>","id":"1126145146212131907","installCount":167,"lastUpdateDate":"2022-07-05T14:19:22.581Z","likeCount":18,"name":"Pixel Cleaner","publisherHandle":"yurafilin","publisherId":"1054047","publisherName":"Yura Filin","runCount":1106,"viewCount":712},{"description":"<p>The SHO.ai BrandOS Controller helps marketing and design teams create on-brand assets in seconds. Save hours on asset creation and accelerate your marketing workflow. A/B testing your vision is now easier than ever.</p><p><br></p><p>Connect your SHO BrandOS URL and Magic - all of your assets can now look and feel like your brand.&nbsp;</p><p>Select a template to edit or download.</p><p><br></p><p>Everything your brand needs from social media assets to newsletters, business cards, email signatures, branded collaterals and even social media profile banners.</p><p><br></p><p>Activate your Brand.</p><p><a href=\"http://www.SHO.ai\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">www.SHO.ai</a></p>","id":"1126204980574663826","installCount":23,"lastUpdateDate":"2022-07-05T18:15:53.652Z","likeCount":7,"name":"SHO.ai BrandOS Controller","publisherHandle":"socialshoai","publisherId":"1126214900642973410","publisherName":"SHO.ai","runCount":266,"viewCount":158},{"description":"<p>This is Cassini’s creator plugin.</p><p><br></p><p><strong>Pushing work to Cassini</strong></p><p>Designers using Figma can push their designs into their Cassini account with this plugin, without having to leave their creator spaces.</p><p><br></p><p><strong>Pulling visual references from Cassini</strong></p><p>While working on Figma designers can pull in views they (or their team) have collected in Cassini inside their respective sets.</p>","id":"1126645732324409997","installCount":0,"lastUpdateDate":"2022-07-25T20:45:41.417Z","likeCount":0,"name":"Cassini Copilot","publisherHandle":"canvs","publisherId":"1126635742423845573","publisherName":"Canvs.in","runCount":8,"viewCount":45},{"description":"<p>Select some sticky notes and shuffle.</p>","id":"1126656797471489684","installCount":0,"lastUpdateDate":"2022-07-07T04:38:55.661Z","likeCount":2,"name":"Shuffle Stickies","publisherHandle":"aharvard","publisherId":"1092780191713860614","publisherName":"Andrew Harvard","runCount":19,"viewCount":54},{"description":"<p>A simple plugin to turn your Figma designs into fully customizable Desygner Templates in seconds.&nbsp;</p><p>Export your designs in a few minutes and wherever you want. You can choose in which Desygner workspace and in which collection you want to add your new templates.</p><p><br></p><p><strong>How it works</strong>:</p><ol><li>Select your designs or frames</li><li>Choose Export to Desygner&nbsp;</li><li>Select your workspace&nbsp;</li><li>Select your collection</li><li>Click on Export</li><li>Done! You will see your templates in Desygner.&nbsp;</li></ol><p><br></p><p>Once your designs are in Desygner you will be able to:</p><ul><li>Define what people can or cannot change.&nbsp;</li><li>Then anyone can create new assets following your brand guidelines.</li><li>Your users will be able to customize content using our lightweight Design editor.</li></ul>","id":"1126747477629534920","installCount":84,"lastUpdateDate":"2022-07-18T11:13:55.476Z","likeCount":9,"name":"Desygner Exporter","publisherHandle":"desygnerapp","publisherId":"885314339194674316","publisherName":"Desygner","runCount":1277,"viewCount":764},{"description":"<p>PhotoRoom automatically removes the background from your images.</p>","id":"1126882239732656005","installCount":419,"lastUpdateDate":"2022-07-21T10:00:24.591Z","likeCount":31,"name":"PhotoRoom Background Remover","publisherHandle":"PhotoRoom","publisherId":"1126879354075876902","publisherName":"PhotoRoom","runCount":3077,"viewCount":1621},{"description":"<h2>Schnell-layout</h2><p>With this plugin, you can select one of the hero wireframes proposed, and it will appear ready to edit on your work space. It gives you a ready elements distribution so you can simple focus on colors, content, etc.</p>","id":"1127303485921047861","installCount":35,"lastUpdateDate":"2022-07-11T09:53:43.603Z","likeCount":2,"name":"Schnell-wireframe","publisherHandle":"jorge11","publisherId":"1049320475696795621","publisherName":"Jorge","runCount":682,"viewCount":440},{"description":"<p>Tinify your images.</p><p><br></p><p>You can choose the iterations level, quality, maximum file size and the format <code>WEBP</code>, <code>JPEG</code> or <code>PNG</code>.</p><p><br></p><p>Enjoy!</p><p><br></p><p><a href=\"https://github.com/PavelLaptev/tinify-Image-compressor-figma\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\"><strong>Github page</strong></a></p>","id":"1127372261563355491","installCount":19,"lastUpdateDate":"2022-07-26T00:48:27.268Z","likeCount":2,"name":"Tinify 🗜️ Image compressor | WEBP, JPG, PNG","publisherHandle":"PavelLaptev","publisherId":"134689","publisherName":"Pavel Laptev","runCount":100,"viewCount":95},{"description":"<p>The plugin allows us to create styles based on the <em>tailwind.json</em> file</p><p><br></p><p><strong>How to use:</strong></p><ul><li>Add tailwind to your project</li><li>Run npx tailwind.json which gives the json file</li><li>Open this plugin in figma and upload the file</li></ul>","id":"1127447323949112691","installCount":5,"lastUpdateDate":"2022-07-20T01:22:49.821Z","likeCount":0,"name":"tailwindcss-styles-generator","publisherHandle":"naveeng2402","publisherId":"974106375777117433","publisherName":"Naveen G","runCount":81,"viewCount":68},{"description":"<h2>color generators, color gradient</h2>","id":"1127468704286275966","installCount":60,"lastUpdateDate":"2022-07-23T11:12:01.291Z","likeCount":6,"name":"color generators","publisherHandle":"liuzixu","publisherId":"863801219321613939","publisherName":"Liu Zixu","runCount":1423,"viewCount":507},{"description":"<p>Add color cards to your Figma designs. This allows you to build a palette or showcase colors for inspiration. You can generate custom names using \"The Color API\" for easily adding your new colors to your library.</p><p><br></p><h2>How to Use</h2><p>Add a name for your card in the <strong>\"Color Name\"</strong> text box. Next, click on the color input box to select a color or enter in a hex color code in the box next to it.</p><p><br></p><p><strong>Note :</strong> The hex code must include the hash <code><em>#</em></code> at the beginning and must have six characters following the hash.&nbsp;The input is case insensitive. So, both uppercase and lowercase letters are valid to be used. An invalid input will cause the card to not be generated.</p><p><br></p><p><strong>Input Example :</strong></p><p><br></p><pre class=\"ql-syntax\" spellcheck=\"false\">// Valid Inputs\n#adc3ec\n#ADC3EC\n\n// Invalid Inputs\n#fff\ne9dfea\n#00000\n</pre><p><br></p><p>The card size select will determine the dimensions of your card. The default card size is medium. There are five sizes in total :</p><p><br></p><ul><li>Small - 200 (height) x 130 (width)</li><li>Medium - 400 (height) x 260 (width)</li><li>Large - 600 (height) x 390 (width)</li><li>X-Large - 800 (height) x 520 (width)</li><li>XX-Large - 1000 (height) x 650 (width)</li></ul><p><br></p><p>If you check the \"<strong>Use Color API?</strong>\" box, a custom name will be pulled from the color API. <strong>This will overwrite the name in the \"Color Name\" input</strong>.</p>","id":"1127675179361433108","installCount":137,"lastUpdateDate":"2022-07-24T02:56:14.084Z","likeCount":28,"name":"Color Cards","publisherHandle":"DominkIlja","publisherId":"1127610321962360839","publisherName":"Dominik Ilja","runCount":2042,"viewCount":1123},{"description":"<p>Translate Figma layouts to Google Slides.</p>","id":"1127845776836666987","installCount":24,"lastUpdateDate":"2022-07-17T01:27:19.066Z","likeCount":2,"name":"Google Slides Inspector","publisherHandle":"epassi","publisherId":"323","publisherName":"Emilio Passi","runCount":316,"viewCount":213},{"description":"<p>Color circle generators</p>","id":"1128158991579114265","installCount":68,"lastUpdateDate":"2022-07-15T08:27:23.344Z","likeCount":5,"name":"Color circle generators","publisherHandle":"liuzixu","publisherId":"863801219321613939","publisherName":"Liu Zixu","runCount":1361,"viewCount":433},{"description":"<p>Automatically create and update Figma Styles from a design tokens url.</p><p><br></p><p>Import Style Dictionary (json) design tokens into your Figma so you don't have to manually create or update styles.</p><p><br></p><p><strong>How it works</strong></p><ul><li>Enter the URL for your json design tokens file</li><li>Choose the variable formatting style</li><li>Click 'Import Tokens' button</li></ul><p><br></p><p><strong>What's supported?</strong></p><p>Creates &amp; updates color design tokens from a URL. In the future, I hope to expand support to other token types like font, grids, spacing, etc.</p>","id":"1128196356923537195","installCount":7,"lastUpdateDate":"2022-07-11T05:32:17.671Z","likeCount":1,"name":"Sync Design Tokens","publisherHandle":"suleiman19","publisherId":"67424","publisherName":"suleiman","runCount":52,"viewCount":165},{"description":"<p>Do math and run code right on the canvas inside Figma files! ✨ Calculators are dead — select the text layer and run the plugin, the result of the last line expression will be printed on canvas below the selected text layer.</p><p><br></p><p>Send the plugin to your friends: <a href=\"https://figma.fun/eval\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">https://figma.fun/eval</a></p><p><br></p><p>Copy examples below, paste them as separate text objects in your file and run the plugin.</p><p><br></p><p>Evaluate an expression (RIP calculators 💀)</p><p><code>75 + 69 * 5</code></p><p><br></p><p>Generate a random number [0-100]</p><p><code>Math.round(Math.random() * 100)</code></p><p><br></p><p>Count all layers in the file (don't run in large files!)</p><p><code>figma.root.findAll(n =&gt; true).length</code></p><p><br></p><p><strong>Tips:</strong></p><ul><li>You can select multiple text layers to run at once but each layer will run in a separate function and the variables won't be shared across.</li><li>The code is written in JavaScript.</li><li>You can access all Figma API methods within the code.</li><li>Write code in text blocks, code blocks, stickies and shapes with text (last three only in FigJam).</li><li>If you want to see output, the last line in the text box should be an expression that returns a value (examples: <code>5 + 5</code>, <code>myfunc()</code>, <code>x</code>) and not a statement (such as <code>const p = 4</code>).</li><li>If your code throws an error, it will be printed in red.</li><li>The plugin works similar to notebooks in Python or other interpreted languages.</li></ul><p><br></p><p>Tips, questions and feedback are welcome in the comments!</p>","id":"1128549466402076836","installCount":15,"lastUpdateDate":"2022-07-15T04:44:20.090Z","likeCount":6,"name":"eval()","publisherHandle":"g","publisherId":"328","publisherName":"Gleb","runCount":131,"viewCount":166},{"description":"<p>This plugin allows Figma users to insert a `.dot` file and</p><p>render it as a graph in the Figma editor.</p><p><br></p><p>The project is <a href=\"https://github.com/anvaka/figma-graph-layout\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">open source</a>, I hope you enjoy it.</p>","id":"1128567246085977264","installCount":26,"lastUpdateDate":"2022-07-13T05:15:30.478Z","likeCount":1,"name":"figma-graph-layout","publisherHandle":"anvaka","publisherId":"4410193","publisherName":"Andrei Kashcha","runCount":594,"viewCount":275},{"description":"<p>Generate html and css from design</p><p>See the scenes tree with all important scene settings</p><p>Preview the html generated</p>","id":"1128731099343788397","installCount":67,"lastUpdateDate":"2022-07-24T15:54:17.803Z","likeCount":2,"name":"Figma Code Generator","publisherHandle":"lubakarpenko","publisherId":"966676580793884130","publisherName":"Luba Karpenko","runCount":805,"viewCount":374},{"description":"<p>Tidy your selection into a big ol' blob. Select all nodes to tidy, and run the plugin. <a href=\"https://github.com/figmajake/blob-tidy\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Code on GitHub</a></p>","id":"1128795550806441376","installCount":33,"lastUpdateDate":"2022-07-22T22:02:15.682Z","likeCount":6,"name":"Blob Tidy","publisherHandle":"figmajake","publisherId":"1060622139825576127","publisherName":"Jake Albaugh","runCount":432,"viewCount":287},{"description":"<p>Плагин позволяет автоматизировать названия шаблонов в формате <strong>[ВЕРСИЯ.НОМЕР_ОФФЕР_РАЗМЕР]</strong>.</p><p><br></p><p>v0.1</p>","id":"1129133363202767624","installCount":1,"lastUpdateDate":"2022-07-13T20:22:55.788Z","likeCount":1,"name":"R10 Naming","publisherHandle":"ilyacnt","publisherId":"1026214216192597660","publisherName":"Ilya B.","runCount":7,"viewCount":20},{"description":"<p>Export icon as TrueType font (.ttf), WOFF and SVG symbols.</p><p><br></p><p>导出图标为字体文件(.ttf)。</p><p><br></p><p>======== English ========</p><p><br></p><p>You can test the plugin in https://www.figma.com/community/file/1129450697155533298</p><p><br></p><p>======== 中文 ========</p><p><br></p><p>字体图标导出插件，支持导出 TTF 格式的字体文件、WOFF 文件、CSS、SVG symbols 和使用示例文件。</p><p><br></p><p>我们可以打开这个链接，快速测试这个插件并查看相关的帮助信息。</p><p><br></p><p>https://www.figma.com/community/file/1129450697155533298</p>","id":"1129455674275940478","installCount":58,"lastUpdateDate":"2022-07-26T15:01:04.400Z","likeCount":1,"name":"Icon Font Exporter","publisherHandle":"yunser","publisherId":"848150194698453288","publisherName":"Yunser","runCount":1462,"viewCount":495},{"description":"<h2><strong>Overview</strong></h2><p>With griddle, you can organize any number of selected elements into a grid:</p><ol><li>Select the element you want to include in the grid.</li><li>Specify the number of columns in the grid.</li><li>Enter the gap size between columns and rows (in pixels).</li><li>You've made a grid!</li></ol><h2><strong>Notes</strong></h2><ul><li>Don't feel constrained by the suggestions; feel free to specify any number of columns and any gap size you want. Just make sure both values are a number.</li><li>Nodes are sorted numerically and alphabetically prior to making the grid. Since the plugin uses JavaScript's native&nbsp;<code>sort()</code>&nbsp;and&nbsp;<code>localeCompare()</code>&nbsp;methods, behavior may not always be predictible.</li></ul><h2><strong>Roadmap</strong></h2><p>Based on feedback, I'm planning to add options to sort elements before placing them in a grid.</p>","id":"1129518088088100039","installCount":68,"lastUpdateDate":"2022-07-26T21:18:54.426Z","likeCount":3,"name":"Griddle","publisherHandle":"ckark","publisherId":"159483","publisherName":"Christopher Kark","runCount":992,"viewCount":797},{"description":"<p>It can quickly count the length of texts，number of words</p>","id":"1129575470930120934","installCount":8,"lastUpdateDate":"2022-07-19T00:39:11.222Z","likeCount":2,"name":"Text lengths","publisherHandle":"liuzixu","publisherId":"863801219321613939","publisherName":"Liu Zixu","runCount":37,"viewCount":96},{"description":"<p>Easily set fixed spacing between two elements with just one click.</p><p><br></p><h2>Support custom spacing value</h2><p><br></p><h2>Support horizontal and vertical mode</h2><p>When two elements is selected, this plugin will adjust the position of lower/right element.</p><p><br></p><p>If you need any support, bug report or feature request, please contact me at <a href=\"mailto:johnny.hsieh.12@gmail.com\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">johnny.hsieh.12@gmail.com</a></p>","id":"1129646367083296027","installCount":137,"lastUpdateDate":"2022-07-21T08:01:01.538Z","likeCount":26,"name":"Spaciiing","publisherHandle":"hsiehcy","publisherId":"3606479","publisherName":"ChengYi","runCount":877,"viewCount":739},{"description":"<p>Oops! That styled rectangle should really be a frame. Well, here's the plugin that will save you from doing it manually.</p>","id":"1129858024978614830","installCount":6,"lastUpdateDate":"2022-07-15T21:41:47.071Z","likeCount":2,"name":"Rect to Frame","publisherHandle":"johnmarstall","publisherId":"931206213383710668","publisherName":"John Marstall","runCount":24,"viewCount":40},{"description":"<p>Fill shapes and include the original outline</p><p><br></p><ul><li>Fill outlined vector shapes and include the original outline</li><li>Useful for icons that have both an outlined and a filled style</li><li>Works with rectangles, ellipses, polygons, stars, closed vector shapes, and boolean operation groups</li><li>Select groups, frames, and boolean operation groups to fill every compatible shape inside</li><li>Either create a boolean operation group that includes the stroke and the fill or create a flattened version of the final shape</li><li>Original stroke colour will be applied as the fill colour of the final shape</li></ul><p><br></p><h2>Notes</h2><p><br></p><p>This plugin ignores invisible layers.</p><p><br></p><p>Do you have a feature request? Let me know on <a href=\"https://github.com/JohJakob/figma-make-filled\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">GitHub</a> or <a href=\"https://twitter.com/johjakob\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">Twitter</a> :)</p><p><br></p><p>This plugin is open source on <a href=\"https://github.com/JohJakob/figma-make-filled\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">GitHub</a></p><p><br></p><p>Made by <a href=\"https://twitter.com/johjakob\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">@johjakob</a></p>","id":"1130056585691217551","installCount":28,"lastUpdateDate":"2022-07-26T16:14:21.653Z","likeCount":3,"name":"Make Filled","publisherHandle":"johjakob","publisherId":"476964","publisherName":"Johannes Jakob","runCount":269,"viewCount":155},{"description":"<p>Gradiator is new creative superpower that opens up new ways you can use gradient in your design.</p><p>By <a href=\"http://ruri.design/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">ruri.design</a> – your design superpower!</p>","id":"1130394960851487602","installCount":288,"lastUpdateDate":"2022-07-21T08:50:40.433Z","likeCount":76,"name":"Ruri – Gradiator","publisherHandle":"klavs","publisherId":"1194976","publisherName":"KB","runCount":2074,"viewCount":1941},{"description":"<p><strong>*It's in beta so you'll need a private key, feel free to ask me by email.</strong></p><p><br></p><p>Heron transfer can help you transfer images from your mobile to Figma canvas.</p><p><br></p><h2>Usages</h2><p>You can transfer images from mobile to Figma to:</p><ul><li>Fill your design with camera photos</li><li>Collect UI screenshots</li><li>Compare screenshots with dev implementation</li></ul><p><br></p><h2>Features</h2><ul><li>No cable, just transfer wirelessly.</li><li>Auto-compress your images to keep your files small (Only support png/jpg/webp).</li><li>Auto-scale screenshot to fit your design size.</li><li>Customize opacity to overlay and compare.</li><li>Paste images into canvas and auto-snap to grid</li></ul>","id":"1130518156403071943","installCount":9,"lastUpdateDate":"2022-07-26T01:29:14.556Z","likeCount":0,"name":"Heron transfer","publisherHandle":"leadream","publisherId":"39","publisherName":"Hal Lee","runCount":111,"viewCount":118},{"description":"<p>Select multiple nodes and flatten each one in one click.</p><p><br></p><p>Made as Same Day Skunkworks by AE Studio.</p>","id":"1130958287409771889","installCount":18,"lastUpdateDate":"2022-07-18T20:41:19.863Z","likeCount":6,"name":"Flatten in Bulk","publisherHandle":"aestudio","publisherId":"1004497106017199898","publisherName":"AE Studio","runCount":140,"viewCount":86},{"description":"<p>FluentC is a translation acceleration tool. The FluentC Figma plug-in allows you to see your design in 75 languages with only three steps. Select your text, source language, and the language into which you want your text translated, and hit translate. A new layer with the new text is inserted into your design. That’s it.</p><p><br></p><p>All of the translations are stored in your FluentC account and can be used by your development team to be inserted into your applications in the future.</p><p><br></p><p>A FluentC subscription is required to use the plugin. Read more at<a href=\"https://www.fluentc.io/\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\"> https://www.fluentc.io</a></p><p><br></p><p>FluentC es una herramienta de aceleración de traducción. El complemento FluentC Figma le permite ver su diseño en 75 idiomas con solo tres pasos. Seleccione su texto, el idioma de origen y el idioma al que desea traducir su texto y presione traducir. Se inserta una nueva capa con el nuevo texto en su diseño. Eso es todo.</p><p><br></p><p>Todas las traducciones se almacenan en su cuenta de FluentC y su equipo de desarrollo puede usarlas para insertarlas en sus aplicaciones en el futuro.</p><p><br></p><p>Se requiere una suscripción a FluentC para usar el complemento. Lea más en https://www.fluentc.io</p><p><br></p><p><br></p><p>FluentC एक अनुवाद त्वरण उपकरण है। FluentC Figma प्लग-इन आपको केवल तीन चरणों के साथ 75 भाषाओं में अपना डिज़ाइन देखने की अनुमति देता है। अपना टेक्स्ट, स्रोत भाषा और वह भाषा चुनें जिसमें आप अपने टेक्स्ट का अनुवाद करना चाहते हैं, और अनुवाद को हिट करें। आपके डिज़ाइन में नए टेक्स्ट के साथ एक नई परत डाली गई है। इतना ही।</p><p><br></p><p>सभी अनुवाद आपके FluentC खाते में संग्रहीत हैं और भविष्य में आपके अनुप्रयोगों में सम्मिलित करने के लिए आपकी विकास टीम द्वारा इसका उपयोग किया जा सकता है।</p><p><br></p><p>प्लगइन का उपयोग करने के लिए FluentC सदस्यता की आवश्यकता होती है। https://www.fluentc.io पर और पढ़ें</p>","id":"1131290121606601469","installCount":10,"lastUpdateDate":"2022-07-20T14:35:44.529Z","likeCount":3,"name":"FluentC Translate","publisherHandle":"Fluentc","publisherId":"1119638247387467884","publisherName":"FluentC","runCount":130,"viewCount":83},{"description":"<p>Lorem ipsum generators for numbers, english and chinese</p>","id":"1131382652528426822","installCount":36,"lastUpdateDate":"2022-07-20T06:22:53.275Z","likeCount":1,"name":"fake text","publisherHandle":"liuzixu","publisherId":"863801219321613939","publisherName":"Liu Zixu","runCount":500,"viewCount":173},{"description":"<p>Faster Create Component from groups or frames</p>","id":"1131394537305065302","installCount":2,"lastUpdateDate":"2022-07-21T00:23:35.851Z","likeCount":1,"name":"Faster Component","publisherHandle":"liuzixu","publisherId":"863801219321613939","publisherName":"Liu Zixu","runCount":32,"viewCount":45},{"description":"<p>A plugin to Import TrueType font file (.ttf).</p><p><br></p><p>导入 TTF 字体文件的插件。</p><p><br></p><p>======== English ========</p><p><br></p><p>You can download the test file from the following URL.</p><p><br></p><p>https://webcdn.yunser.com/figma/IconFont.ttf</p><p><br></p><p><br></p><p>======== 中文 ========</p><p><br></p><p>你可以从下面的地址下载测试字体文件。</p><p><br></p><p>https://webcdn.yunser.com/figma/IconFont.ttf</p><p><br></p>","id":"1131588345452416028","installCount":3,"lastUpdateDate":"2022-07-20T14:08:24.906Z","likeCount":0,"name":"Font Importer","publisherHandle":"yunser","publisherId":"848150194698453288","publisherName":"Yunser","runCount":23,"viewCount":36},{"description":"<p><strong>The fastest and easiest way to export your Design System!</strong></p><p><br></p><p>No more hassle, with this small but powerful plugin you can add your customized Composer Theme to Composer Console with a single click.</p><p>You will be able to download a JSON file containing all the brand information - colors, fonts, spacing, elevation, breakpoints, etc. - so that you can can start creating the most amazing websites with our Composer smart builder.</p><p><br></p><p><strong>Instructions:</strong></p><p><br></p><p>1.Click the “Download file” button.</p><p>2.Go to Composer &gt; Themes.</p><p>3.Click on “Import Theme” and upload the file.</p><p><br></p><p>And that’s it! Easy as 1,2,3!</p>","id":"1131606090957780017","installCount":5,"lastUpdateDate":"2022-07-20T15:25:31.253Z","likeCount":1,"name":"Composer Themes","publisherHandle":"impulsum","publisherId":"1037500238511305324","publisherName":"Impulsum Venture Colab","runCount":133,"viewCount":132},{"description":"<p>Select All elements as the selected one</p>","id":"1131744809874670747","installCount":2,"lastUpdateDate":"2022-07-21T01:25:15.452Z","likeCount":1,"name":"SelectByName","publisherHandle":"VinnyAtaides","publisherId":"899158920708209058","publisherName":"Vinicius Ataides","runCount":9,"viewCount":17},{"description":"<p>Easily sort, add, and remove pages individually or as groups while preserving archived main components.</p><p><br></p><p><strong>How it works</strong></p><ul><li>Run Page Organizer</li><li>Sort, add, and remove pages and groups</li><li>Update Pages</li></ul><p><br></p><p><strong>Description</strong></p><p>Page Organizer automatically stores main components in an archive page to preserve any instances throughout your file. It also automatically regroups pages when the plugin is run so they don't have to be remade.&nbsp;</p><p><br></p><p>To change groupings, simply change the position of the group divider created by Page Organizer. It will group any pages that appear under it until the next group divider is found. This can also be done in the plugin itself using the sorting behavior.</p><p><br></p><p><strong>Potential future features</strong></p><p>Depending on downloads and usage, these features may come in the future:</p><p><br></p><ul><li>Custom group style</li><li>Merge pages</li></ul><p><br></p><p>Made by Dimitri Otero (@DimitriOtero)</p><p><br></p>","id":"1131755843787886765","installCount":2,"lastUpdateDate":"2022-07-21T01:16:01.747Z","likeCount":0,"name":"Page Organizer","publisherHandle":"doterodesign","publisherId":"584646","publisherName":"Dimitri Otero","runCount":21,"viewCount":39},{"description":"<p>Quickly generate valid React/Typescript component from your Figma documents to that uses your sprites.</p><p><br></p><p>Usage: Select a frame, run the plugin and copy the code.</p><p><br></p><p>Note: this plugin was written for our company's specific need, so it might not be the right choice for you.</p>","id":"1131957589682078170","installCount":1,"lastUpdateDate":"2022-07-21T16:39:43.936Z","likeCount":0,"name":"Figma to React Sprite","publisherHandle":"pedrocorreia","publisherId":"1067520131063294624","publisherName":"Pedro Correia","runCount":8,"viewCount":11},{"description":"<p>Linked plugin saves bookmarks in a Figma or FigJam file.</p><p>Bookmarks are shared between all users in a file.</p>","id":"1132405875487318896","installCount":2,"lastUpdateDate":"2022-07-22T20:27:13.340Z","likeCount":1,"name":"Linked","publisherHandle":"grisha","publisherId":"590","publisherName":"Gregory M","runCount":19,"viewCount":39},{"description":"<p><strong>Make your layer name to snake_case </strong></p><p><br></p><p>If snake_case is the best format for your layer naming and you have problem with that, then your suffering will be ended today.</p><p><br></p><p>Just select the layer you want to make it as snake_case<em>, </em>then run the plugin from the plugin menu or hit <code>command + \"/\"</code> then search the plugin name.</p><p><br></p><p>Enjoy,</p><p>Banyu Rachman</p>","id":"1132580269883237338","installCount":2,"lastUpdateDate":"2022-07-23T10:33:21.394Z","likeCount":3,"name":"snake_case layer_name","publisherHandle":"banyurachman","publisherId":"1078520","publisherName":"Banyu Rachman","runCount":8,"viewCount":13},{"description":"<p>Oh, hi 👋 I’m a plugin that can add themes &amp; switch to dark mode. I work locally and do it blazingly fast. I support theming for color, text and effects. Here’s how we can be friends.</p><p><br></p><p><strong>Add a new theme: </strong></p><p>1. Open me in light mode library. Make sure your styles are published.</p><p>2. Sync styles and save. Ah, and add your theme name.</p><p>3. Repeat for dark mode. Open another file to sync Dark mode.</p><p><br></p><p><strong>Edit a theme:</strong></p><p>Just click on an edit button: the flow is the same as for adding a new theme.</p><p><br></p><p>That’s pretty much everything you need to know for us to be friends. Just in case, I’ve got more <a href=\"https://reshaped.so/figma-plugin\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">docs and a demo</a> 🙌</p><p><br></p><p>Follow us on twitter to see future updates: <a href=\"https://twitter.com/blvdmitry\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">@blvdmitry</a>, <a href=\"https://twitter.com/hi_drozdenko\" rel=\"noreferrer noopener nofollow ugc\" target=\"_blank\">@hi_drozdenko</a></p>","id":"1132648122057236517","installCount":1,"lastUpdateDate":"2022-07-23T12:35:18.891Z","likeCount":0,"name":"Reshaped","publisherHandle":"reshaped","publisherId":"2778304","publisherName":"Reshaped","runCount":1,"viewCount":15},{"description":"<p>This plugin creates pages in your Figma file and names them to better organize your file structure 😊</p>","id":"1132650584532938793","installCount":2,"lastUpdateDate":"2022-07-23T14:49:14.908Z","likeCount":0,"name":"Pages 📚","publisherHandle":"azhassan","publisherId":"1041768413368674863","publisherName":"Abdelrahman Hassan","runCount":3,"viewCount":10}]}