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
“In this livestream Hanju Kim and Marvin Messenzehl from RTL+ dive into the file to understand the intricacies of designing for a wide array of platforms while maintaining impeccable structure and facilitating seamless collaboration.”
“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
“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
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
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
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
Jake Albaugh and Emil Sjölander discuss using AI-based code generation (codegen) tools for augmenting your design to development process, not automating it. “Codegen isn’t just an automated, hands-off replacement for translating design to code; it’s best as an augmentation for you to more quickly understand design changes, and to keep your team in sync.”
A few small tweaks to the visual experience of designing in Figma. #14: Whoa, now you can see both horizontal and vertical offset when hovering over objects while holding Option! (Used to be only one or another.) #15: Click targets are no longer jumping around when removing effects. (This one was pretty hilarious, but not in a good way.) #16: New red indicator lines show when you’ve reached min and max widths — even when typing or resizing paddings. #17: Arrow ligatures now work in section and frame titles. (FWIW I have a better solution!)
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
This one is a more practical and hands-on guide to Figma variables, with detailed instructions on implementing, organizing, applying modes, publishing to the library, and transferring them to code.
New research from the Figma’s Insights team: “In a recent study we commissioned from Forrester Consulting, researchers found almost 9 out of 10 respondents experienced some type of barrier in the product development process, with 60% reporting either a lack of alignment across teams, difficulty making decisions, or lengthy development cycles. These barriers aren’t necessarily new, but have been amplified by three major forces at work: 1) More people involved, 2) More distributed work, and 3) More work in progress.”
On collaboration: “One striking finding from Forrester’s study was that the most successful teams collaborate more and also see improving this collaboration as critical. According to the study, successful teams want to improve feedback on work in progress, get more people involved earlier, and increase cross-team collaboration.” On that note, see upcoming events by Friends of Figma for anyone who regularly facilitates meetings and cross-functional collaborations.
You can now collaborate on Figma and FigJam files directly in Google Meet.
A cool bunch of improvements to Figma this week! #10: Select and copy items on the canvas while viewing version history. #11: Copy the URL of a file via Quick Actions. #12: When pasting links over existing selected text, you can now paste and match style so the text you’ve selected will be replaced by the URL or email address you want to paste in, rather than auto-link-ifying the selected text. #13: Exporting objects with a multiplier applied no longer occasionally adds an extra pixel to width and/or height.
Export icons from Figma straight to React, Vue, or Svelte components.
Something new is coming up in October 👀 The landing page is a smart way to give a peek! “Builder.io is the only headless CMS that gives developers, marketers, and product managers the freedom they need to ship fast, flexible, multi-channel experiences without overwhelming your backlog.”
Rad product and home page! “ShaderGradient is a design tool to create beautiful moving gradients. Make stunning visuals by adding natural movements and effects to the gradient. It’s available on your favorite tools, like Framer, Figma, and React.”
In this video, Sam walks through the features in the Tokens Studio plugin for Figma that allow the creation of variables that are synced to design tokens.
Mini-series showing how to use variables for advanced prototyping on a few example projects by the Design Pilot YouTube channel.
A new video from Lauren with a deep dive on when to use variants vs. variables with modes.