Use Figma for presentations? This is how to make any clicker work with it.
5 practical lessons for content designers on working content-first, collaborating with product designers, and using Figma to its wordiest potential.
A detailed guide on turning Figma design prototype into a native iOS or Android app without writing code. I’ve never used Bravo Studio before but it’s an interesting development in line with the current #NoCode trend.
Figma’s Director of Product wrote a detailed explanation of why layers are ordered backward inside an Auto Layout frame. This thread is a good illustration of how many factors have to be considered even for a seemingly simple design choice.
A lot of people have been asking why the items in an Auto Layout frame go backwards in @figmadesign.
— Sho Kuwamoto (@skuwamoto) December 10, 2019
I usually hesitate to answer seemingly simple questions that end up requiring super long answers, but... here we go!
1/n
An interesting observation that what we need next is states, styles groups, and variables. Yes, please!
Auto Layout can be used for so much more than just buttons and lists. This post shows how useful it is for working with copy and images.
Not sure if this post should be called “quick tips” as it mostly surfaces unresolved problems, but it’s an interesting look at the limitations of the current implementation.
An in-depth tutorial covering 3 common use cases for Auto Layout — button with an icon, content card, and a chat log screen.
A boilerplate for developing Figma plugins that take care of setting up and configuring TypeScript, Webpack, ESLint, Stylelint, Prettier, Jest, EditorConfig, etc.
Redlines is a toolkit designed to make developer hand-off easier. 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.
After Smooth Shadow generator made rounds in the design community, its author built a matching Figma plugin. It’s the easiest way to build a nice smooth shadow, and as it’s based on a box-shadow
CSS property it’s easy to export and reuse in code later.
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.
My second plugin got approved just a week ago. Typographer formats text with typographic features traditionally used in fine printing — en- and em-dashes, curly quotes, apostrophes, ellipses, and more.
One of the most epic posts in Figma’s archive, diving deep into the history of leading and line height in traditional printing, desktop publishing, and on the web. It explains why Figma works with type the way it does.
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. Handy if your master components are on another page.
My first plugin for Figma just got released! Proper Title Case formats headlines and titles based on style guides from APA, The Chicago Manual of Style, and modern conventions. I realized that I need this while working on a landing page with a bunch of misformatted titles and seeing that the built-in Title Case was too primitive.
Nerdfox — whose motion design work was featured in the last issue — builds concept design for The Mandalorian promo website and animates it using Smart Animate.
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.
The article dives deeply into different methods of adding animations to designs in Figma — GIFs, Figmotion plugin, simple prototypes, and Smart Animate.