Just a few days ago, I tweeted that Auto Layout needs Styles, and now Pavel Laptev releases a plugin just for that! “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.”
Create and automatically apply custom Export Settings. Share them across your files and projects. Includes default presets for the most popular platforms.
Figma plugin analytics page.
A creative way of using components to create custom graphics.
Here is like 10% of the design system for my client. In this example, I have 2 components with the shape of lunchboxes + a few for details (like stickers) and inside those lunchboxes, I have variables with different foods :) so I can prepare graphics soooo fast :) pic.twitter.com/zfHNL3fIpx
— Arkadiusz Palki (@arkadiuszpalki) February 2, 2021
“Make scroll to map interactions in Figma Design. This demo uses placeholder frames in lieu of using the offset values for navigating a map with scroll to interactions.”
“Here is a quick workflow with multiple batch operations that can show you how to import, rename, organize, componentize and publish assets.”
“Quickly master your documents pages and frames using simple shortcut keyboard actions.”
In this part of Figma in 5, Rogie talks about Design Systems with a focus on components.
Design Advocate Luis shows how to set up a contents page to navigate through multiple flows.
A good tip from Miguel – Command-Click on an object to show a list of all layers below.
Here is a micro #FigmaTip for your hump-day! Easily select something in @figmadesign by holding ⌘ (Mac) or Ctrl (Win) when you right-click. This will pull up a list of objects directly beneath your cursor.
— miggi from figgi (@miggi) February 10, 2021
This is where naming your layers pays back dividends! 😊 pic.twitter.com/t4RNeGW9w7
Command-\ hides all UI, while Command-Shift-\ hides only the left sidebar.
Need more real estate *and* the design panel in @figmadesign?
— Anthony DiSpezio (@adispezio) February 11, 2021
cmd+shift+\ to hide left sidebar!#figmatip pic.twitter.com/aWeBq1Bq0o
A nice trick to work around some of Auto Layout’s limitations.
Auto Layout @figmadesign tip - use a 1x1 frame to add overlapping elements within a parent Auto Layout frame. pic.twitter.com/0dbJpeN8ri
— Gavin Nelson (@Gavmn) February 9, 2021
Really smart solution! “This trick uses the dash/gap length to calculate exact degree marks. This lightweight approach makes it easy to store all of the information for interval marks in a single stroke.”
“Design systems sit at the intersection of design and development. Lyft teammates Jeremy Dizon, Design Systems Product Designer, and Alex Lockwood, Design Systems Staff Engineer, will show off their design system and share how they collaborated to build it.”
“Auto Layout can be added to Frames to create dynamic Frames and Components that respond to the size of their child objects, such as a button that grows with the length of its label. In this video we’ll teach you more advanced Auto Layout techniques to create a flexible card component for a trip planning website.”
A new tutorial from Blush, based on Pablo Stanley’s Figma Crash Course on YouTube. “Learn the basics of Figma’s new Auto Layout and speed up your creative workflow with this awesome feature.”
Students of Justus Wunschik’s online class came together to build a beautiful SimCity-inspired city with Figma.
Creating responsive prototypes with Figma and Anima.
Komal Javed from Shopify shows how to set up your Figma projects to meet the needs of your whole team. Project Index Template is available in Figma Community.
Luke Cardoni, UX Lead at REI, recently spent time improving the accessibility of form elements in their design system, Cedar. “It turned out that these UI components posed the perfect opportunity to start exploring Figma’s Variants feature, as each Text Input, Radio Button, and Checkbox has so many, well, variants.”