Tweets
iPhone 15 device frames and frame presets
New frame presets and device frames for iPhone 15, 15 Plus, 15 Pro, and 15 Pro Max. Moreover, Keeyen created vector iPhones for prototyping and shared them with the community.
iPhone 15 🤝 Figma
— Figma (@figma) October 3, 2023
We've added iPhone 15 frame presets and device frames in Figma.
- iPhone 15
- iPhone 15 Plus
- iPhone 15 Pro
- iPhone 15 Pro Max pic.twitter.com/OEEPRerRBs
Copy as PNG
“Copy as PNG” is a lifesaver. I even use it when moving mockups to FigJam for presentation to keep things simple.
I’ve been using Figma way too long not to know this…😳
— Elizabeth Alli - DesignerUp (@LizTheWhizard) August 1, 2023
When I need a static version of a frame to use in a mock-up, graphic or wireframe, I normally export the frame as a png or jpg and drag it back into my Figma project.
But this little feature is such a time saver!!
It’s… pic.twitter.com/3ZTEkGxE1C
Replacing icons
“To replace one icon with another, press and hold Command-Option while dragging a component onto an existing component in your document.”
✨ Figma Tip ✨
— Dima Groshev (@dimagroshev) September 26, 2023
Replacing icons
To replace one icon with another, press and hold Command+Option while dragging a component onto an existing component in your document.#figma @figma pic.twitter.com/efwNnx3DBJ
Creating tab interactions with Variables
Molly shows how to add real interactions to your prototypes. Variables make this slide show really easy to make.
💡Figma tip: Make your prototype update content like it’s the real thing!
— Molly Hellmuth (@molly_hellmuth) September 29, 2023
All you need is one variable and a few components in place. Like a carousel container, a couple of tab-group variants, and some nifty interactions.
Let's dive in 👇 pic.twitter.com/JhBxVsX9tC
GPT-4 Vision to convert Figma designs into React
This result is based on an exported PNG, so plugins for code generation in Dev Mode using GPT‑4 might provide an even better result.
ChatGPT Vision can take in screenshots from Figma and generate code.
— Mckay Wrigley (@mckaywrigley) September 29, 2023
Building with AI is getting wild. pic.twitter.com/D8yeJW1kGR
Variables and Styles
Luis is rethinking the relationship between variables and styles. The future typography tokens are a great example, but even today this applies to styles with more complicated color fills. TL;DR: “Create variables in a private space, feed them into styles, and publish only styles to consumers.”
I'm starting to (re)think variables a little bit
— luis. (@disco_lu) September 27, 2023
And looking at them more like "data sources" for our styles within systems
This means 1) locking variables away in the system 2) Maintaining styles for longer than I originally thought pic.twitter.com/VFX7JwemkK
Documenting color “intentions”
Luis with an interesting approach to documenting use cases or “intentions” of specific color levels in a palette. The color scales documentation from Radix recommended in the comments is also a fantastic resource. See also Luis’ Documentation template for colors in the Community.
I find navigating large colour palettes / ramps pretty hard, and knowing what colour to use even harder
— luis. (@disco_lu) September 19, 2023
So I've been wondering if we can document colour in a way which nudges designers towards what colour could be used where? pic.twitter.com/NT9PI7lzxg
10 things I learned while adding variables to my Figma design system
Molly Hellmuth with tips on the best ways to name, organize, use, and theme color variables.
💡 10 things I learned while adding variables to my Figma design system
— Molly Hellmuth (@molly_hellmuth) September 20, 2023
Like the best ways to name, organize, use, and theme colors.. without getting overly complicated!
Some were easy, some took days of testing and re-testing... 👇 pic.twitter.com/KPJnG5gIs7
Helpful gradient tips
A few good tips on adjusting the color hue, opacity, and evenly distributing color handles.
Here are some helpful gradient tips for @Figma:
— Joshua Guo (@jgspace_design) September 6, 2023
- Scroll: Adjust the color hue.
- Option / Alt + Scroll: Adjust the opacity.
- Double-click handle: Evenly distribute the color handles. pic.twitter.com/N8gI79r8ho
Switch between pixels and rem units in Dev Mode
Molly with step-by-step instructions for using rem units in your text properties. The developers on your team will be grateful for using the same units as they do when it comes to the handoff time!
💡 Figma tip: Switch between PIXEL and REM units in dev mode!
— Molly Hellmuth (@molly_hellmuth) September 8, 2023
Why does it matter?
✅ Helps you understand scale and sizes
✅ Smoothens collab with your dev team
✅ Brings flexibility & precision to your design workflow
Keep reading for step-by-step instructions.. pic.twitter.com/d4QDHUDctb
Swap libraries and variable modes
Luis shows that if your styles have multi-mode variables as their values, Swap Libraries still works for managing theme swapping in a multi-brand setup.
Did you know that you can still use swap libraries to manage theme swapping in Figma AND use variables with multiple modes?
— luis. (@disco_lu) September 8, 2023
If your styles have multi-mode variables as their value, swap libraries still works 🪄 pic.twitter.com/tQhnxQL981
Bento plugin
That’s what I love about this community so much. Fons Mans shared an idea for the plugin, Rogie stepped in and offered to build it, and three days later they already had some WIP. Don’t know if I need this plugin yet, but seeing this collaboration makes me so happy.
Figma plugin idea: Generate Bento
— Fons Mans (@FonsMans) August 24, 2023
Select artboards, hit generate and get a beautiful slide using the selected frames as blocks and the document colors as backgrounds ✨
Community Libraries beta rolling out
I shared this beta’s release notes in the previous issue, but it didn’t show up in my account yet. Cool to see some folks are already trying it out. As Adham Dannaway pointed out, this release is bringing us “one step closer to a shared global design system”. Can’t wait!
Really cool seeing @figma Community Libraries beta rolling out!
— Jordan Hughes (@jordanphughes) August 31, 2023
1. Hit option⌥ + 3 to open libraries
2. Add a bunch of incredible community libraries
3. They'll appear in your assets panel like magic 🪄 pic.twitter.com/RnFaES7gAE
Getting Figma files dev ready
This is a short but comprehensive checklist. Worth reviewing before sharing your next file!
It’s handoff day! 🎉
— Noelle (@hellohinoelle) August 31, 2023
How I get my Figma files dev ready:
- Make a separate handoff page
- Label and organize flows
- Include states and edge cases
- Make sure all styles are linked
- Document components
- Leave relevant annotations
- Embed a handoff Loom to file
Designing a production-ready Figma UI kit
Hamish O’Neill is working on a new Figma UI kit and shares some of the advanced features included in his library. Love seeing a strong focus on accessibility, customizability, and theming!
Over the last few months, I’ve been toiling away on a passion project 🤓
— Hamish O'Neill (@hamishoneill) August 28, 2023
Something I feel will set a new standard for what a production-ready Figma UI kit is. The below thread details some of the advanced features you won’t find together in any other library 🚀 pic.twitter.com/KKiUpLufLe
Maintain the hierarchy of the elements
A good-to-remember shortcut! Hold the Spacebar while dragging elements to maintain the hierarchy of the elements.
Here's a small but truly useful tip for @figma that you may not know:
— Joshua Guo (@jgspace_design) August 24, 2023
Holding the spacebar while dragging elements will maintain the hierarchy of the elements.
The demo below shows that elements are not dragged out of the parent frame. pic.twitter.com/GNZBNyOxp1
Optical balance with optional icons
Somewhat related to the previous article, Ridd looked for a way to account for optical balance when icons are hidden from a button. Jordan suggested a smart solution of wrapping the label in an Auto Layout with an additional smaller padding that adds up with and without the icon.
More Figma nerdery...
— Ridd 🤿 (@ridd_design) August 22, 2023
I want to account for optical balance when icons are hidden from my button (so ideally you'd have less padding when an icon is present)
Anyone have a better solution than wrapping icons in a smaller frame and attaching the boolean there? pic.twitter.com/wxTMQQ64n5
Nintendo Switch
Vijay Verma made a photo-realistic illustration of the Nintendo Switch console with 150+ primitive shapes, inner shadows, and gradients.
Spent some time over the weekend creating one of my fav console nintendo switch in @figma 🎮. Creating these products with primitive shapes, inner shadows and gradients is a lot of fun ✨ pic.twitter.com/PyX1nynj3O
— vijay verma (@realvjy) August 15, 2023
5 color best practices
Molly shares the best practices for working with color that she learned from the Adobe Spectrum design system.
💡 Figma tip: 5 color best practices I'm stealing from Adobe Spectrum while I update my design system to include variables ✨🎨
— Molly Hellmuth (@molly_hellmuth) August 11, 2023
Keep reading for tips & examples.. pic.twitter.com/rVMX1Zp6oJ
What makes a shadow look realistic?
Dan Hollick explains the science behind making realistic shadows and recommends the Beautiful Shadows plugin that takes care of this for you.
What makes a shadow look realistic?
— Dan Hollick 🇿🇦 (@DanHollick) August 9, 2023
Well, there are essentially two parts to a shadow: the fully occluded part (Umbra), and the partially occluded part (Penumbra).
Ideally, you need at least two layers of drop shadow to mimic these. pic.twitter.com/fJ7NgiMJKg