“Here is a quick workflow with multiple batch operations that can show you how to import, rename, organize, componentize and publish assets.”
I rarely write about plugin updates, but this one is exciting — TinyImage Compressor added support for AVIF image format. If you haven’t heard about it before, check out the blog post “AVIF has landed” from a developer advocate for Google Chrome.
With shiki 0.2.0, you can use `shiki-svg-renderer` to render code to SVG and edit them in @figmadesign / Affinity Photo / Adobe Illustrator. Enjoy 🏳️🌈https://t.co/Ws85bNyXds https://t.co/cap2cytjWy pic.twitter.com/6EwhDHWVcx
— Pine (@octref) August 24, 2020
Create high-quality GIFs from static images and mockups. Make sure to check out a fun demo.
Convert Figma layouts into responsive webpages (in Tailwind) or mobile apps (in Flutter and SwiftUI). The plugin takes Auto Layout into account, and even when it’s not applied, but objects are aligned, it will make them responsive.
Relay allows you to push graphics in Figma straight to the GitHub repository. This is quite amazing, as now, with a proper setup, changes in a design file can be reflected on a live website without fiddling with exports.
I recently learned that in the Size field of the Export panel, a number followed by w
or h
could be used to specify the width or height of the exported image.
TIL: you can set the width or height of an exported file in @figmadesign by entering a number followed by 'w' or 'h' in the Size field. pic.twitter.com/MfNcbhssIl
— Eugene Fedorenko 🇺🇦 (@efedorenko) July 20, 2020
Cool app for creating high-fidelity prototypes and exporting HTML from Figma designs. See also their review on DesignCourse YouTube channel.
I wrote about plugin HTML to Figma before, but now we came the full circle.
Easily copy frames from Figma to Axure RP 9 or publish frames directly to Axure Cloud.
One of my favorite time-savers!
Today's 🔥 #FigmaTip:
— ˗ˏˋrogieˎˊ (@rogie) May 11, 2020
Copy-pasting SVGs in @figmadesign is a breeze. Here's how: pic.twitter.com/Ck9VYLkKVR
Small utility to optimize and download Figma assets to your computer.
The first video in Egghead series on building an OpenGraph image for social services using Social Branding Templates linked below.
Nice tip! That’s something I use quite often.
Need a vector logo but can't find it online?
— Cory in SF (@coryetzkorn) February 12, 2020
1. Right click on the logo
2. Inspect
3. Find the SVG node
4. Right click >> copy >> copy outerHTML
5. Paste (⌘V) directly into @figmadesign pic.twitter.com/gGObil7yJr
Snap photos with any phone and send them directly to Figma. Great for notebook sketches or whiteboard brainstorming sessions.
Export SVG files optimized with SVGO.
Mixkit Art found a creative way to use Figma as a CMS for illustrations. Their team manually prepares uploaded illustrations for multiple formats, and when they are ready to be published runs a Lambda script that connects to the Figma API, exports high-resolution assets, uploads them to S3, and makes them live on a website.
This is some serious sorcery. I tried this plugin on a few websites and while results weren’t perfect it did 80% of the grunt work. If you want to iterate on an existing website in Figma it will take just a little time to fix a few problems instead of implementing everything from scratch.