Designing the Future. Special Effects. Figma to Code.
Release Notes
Horizontal scrolling
The layers panel finally supports lots of nested frames or long layer names with horizontal scrolling.
Turn designs into a deck
A new update to Slides lets you bring slides from Figma into a deck with one click.
Figma 2024: We shipped it, you shaped it
An overview of everything shipped this year. It’s a long list!
What’s New
Designing the Future: A Conversation with Dylan Field
Steven Levy from WIRED discusses with Dylan Field how Figma is reinventing design tools to meet the needs of tomorrow’s creators and the evolving role of designers in an AI-driven world. I was so happy that Steven asked Dylan about his hoodie and let the fascinating nerdery unfold.
Methods for random gradients
Justin Jay Wang experimented with different methods for generating random gradient images, including those used by OpenAI visual identity. He explains the difference between heightmaps, layered radials, and AI-generated gradients. Loved this part: “In early 2019, OpenAI’s home page displayed a vibrant, full-screen gradient. The implementation was simple: a tiny, 2×3 pixel image of six color stops, which produced a smooth gradient when scaled up by web browsers. It weighed just 85 bytes (about the size of a brief text snippet) and loaded virtually instantly.”
Using Figma
lil bro
David Hill walks layer-by-layer through his process of designing a sick illustration for the lil bro coffee from Terminal.
Background Pattern Tutorial
A tutorial from James on creating beautiful background patterns and effects. I haven’t tried the vga blurrific.exe plugin he recommends, but it looks really cool.
Ignore Auto Layout
Molly Hellmuth with a tip on using the “Ignore auto layout” feature to add a scrollbar to the menu, among other things. It’s one of my favorite features, making it easy to preserve Auto Layout while making designs more realistic and interesting.
Introduction to Figma Design
A new introductory Figma tutorial from Miggi, updated for UI3. It covers basic concepts like shapes, vector graphics, typography, resizing, Auto Layout, and applying them all to build a simple user interface card.
Made in Figma
Walkie-Talkie
Marina Budarina with another dope gadget illustration made entirely in Figma.
Plugins & Tools
Import to v0
v0 from Vercel is a “generative chat interface with in-depth knowledge on modern web technologies. It can provide technical guidance while building on the web, generate UI with client-side functionality, write and execute code in JavaScript and Python, build diagrams explaining complex programming topics, and more”. v0 supported sketches and screenshots as a starting point for generation for quite some time, but now paid users can also import designs from Figma.
Figma to AI Code by DesignCode
A new plugin from Meng To turns Figma designs into production-level code with the power of Claude AI and GPT-4o. I mentioned it in the last newsletter, and it looks very promising so far. The plugin is free, but you’ll need to bring your own API keys.
Watch the video where Meng explains his Figma to SwiftUI code workflow.