Every week, without fail, we bring you the latest and greatest of what Figma Community has to offer. And this issue is no exception…
Whether you’re looking to pixelate parts of your design, create cool animations with cursor movements or apply complex skew transformations to Figma objects, we’ve found the Figma plugins for the job. There’s also the perfect plugin for anyone migrating from AutoCAD to Figma, or those developing React apps.
Check out this week’s new Figma plugins! 👇📖👀
1. cad.to.design
Import your AutoCAD files as editable Figma designs.
cad.to.design is this week’s new import plugin from ‹div›RIOTS (on a roll here)! If you’ve been working on mockups, plans and layouts in programs like AutoCAD, you can now directly import those .dxf and .dwg files into Figma. Run cad.to.design, drop your file in the plugin and import! You now have fully editable CAD designs right in Figma.
ℹ️ If you’re looking to import other design formats into Figma, check out a complete list of import plugins at anything.to.design!
🎁 5 FREE imports/month 💰 $49/year for unlimited
👷♀️ Import CAD files into Figma as editable designs
🚀 Direct, one-click import
2. Pixelated Censor
Pixelate sensitive information in your designs.
Pixelated Censor is an easy way to cover up that sensitive information in your designs, or at least replicate this effect. Simply draw a shape over the area you want to pixelate and run the plugin. A pixelated effect is automatically added over the desired area. It’s great for hiding sensitive information, redacting text or images and writing NDAs.
🎁 5 FREE uses 💰 Unlimited for $5 (one-time payment)
👾 Pixelate any given area of your designs
🙈 Good for hiding sensitive info, redacting text, NDAs…
3. Shapelax
Create smooth transitions with cursor movements.
Shapelax is a cool alternative to animation plugins that detects anchor points and creates smooth transitions as your cursor moves, creating fluid object motion. You can adjust the anchor points while customizing color fill and layer transparency and export your files as HTML, SVG, GIF and WebM formats. The free plan includes name mapping, adaptive points, scroll and smooth and spring editing features. Check out the full video to see how it works!
🎁 FREE for limited features 💰 PRO for $39 (one-time payment)
🖱️ Animate images with cursor movements
⚙️ Adjust smoothness and spring
4. Skew
Transform objects with horizontal and vertical skewing.
Skew is a fun (and free) new plugin that allows you to skew objects in Figma with greater control and precision. You can also transform objects using the flatten feature. Select one or more objects you want to skew, adjust the horizontal and vertical skew sliders and the transformation happens in real-time! You can then move objects around to check alignment, select additional objects to apply the same skew, fine-tune values using keyboard controls or direct input and see all changes before applying them. Read the full description on the plugin page for tips and a detailed how-to.
🎁 FREE
🪄 Skew objects horizontally and vertically, and flatten them
⚙️ Precise editing settings for the right effect
5. Tempo Figma to Code
Convert Figma designs into seamless React code.
Tempo is an AI design and prototyping plugin that contributes high-quality React code directly to your codebase. It helps bridge the gap between design and development by migrating your Figma designs into clean, production-ready code. There’s no set up required and the plugin comes with AI-assisted design optimization to optimize and aligns layouts automatically during the conversion process. The plugin does require the use of a third-party tool called Tempo Labs and you’ll need an account to get started.
🎁 FREE for limited features 💰 PRO plans from $30/mo
🧑💻 Convert Figma designs into clean React code
ℹ️ Third-party tool and account required
✏️ Newsletter brought to you by ‹div›RIOTS.
Shapelax looks amazing!