A collection of essays by Raphael Salaja on interaction design and animations.

Tom Johnson: ​“It’s literally faster for me to build a concept inside of the actual codebase than it is to work in Figma. But the amount of versions and breadth of the final result is not up to the quality bar that I usually hold. I’m loving the speed, but the output is sloppy at times. So I’ve got this weird flow of Code → Code → Figma → Code → Figma. Repeat, reorder, etc. The issue is that the transition from Figma → code with their MCP is solid. […] But code → Figma… is a terrible flow.”

I often spend more time recreating a particular screen in Figma than actually designing the change. I’ve been beating on the Code Connect drum for a while as it has huge potential for connecting design and code components. Even though it was built to translate components from Figma to code, I don’t see why it wouldn’t work in reverse. Code Connect was announced almost two years ago (way before LLMs and MCPs got powerful), but because it’s locked behind Organization and Enterprise plans, it’s rarely discussed in the community or considered by plugin and tool makers.

“Enterprise Key Management (EKM) allows your organization to encrypt Figma file data with your own AWS Key Management Service (KMS) keys. This provides your organization additional control over data at rest. You can grant, monitor, and revoke Figma’s access to the encryption key at any time.”

MDS recorded a Figma tutorial video dissecting why Anthropic’s Claude app icons feel so satisfying and explaining how to recreate these animated icon components in Figma using Smart Animate.

Admins on Organization and Enterprise plans can now view historical AI credit usage data to better plan for future costs.

Another cool Figma Draw technique from Miggi that I wasn’t aware of. Until now, I was achieving this effect in an old-school way by flattening a copy of the object and then adding an outside stroke.

Miggi shows how to use the Cut tool like a pro.

“Starting today, the Figma for Jira app supports webhooks, so teams can get instant design status updates like ​“Ready for Dev” directly in Jira tickets, with no admin setup required. Webhook support is enabled for newly linked design files, and we’re rolling it out to existing links soon.”

Big update to Figma navigation! The rollout seems to still be in progress, as I’m seeing it only in one of my accounts. If you aren’t seeing it yet, here is another quick demo from Zander.

“We’re introducing a new left navigation bar in Figma Design, Draw, and Dev Mode to make it easier to move between library assets, variables, and search. To help you get familiar, we added labels, which you can toggle anytime in the View menu. Edge-to-edge variables authoring experience. See everything at a glance with the new full screen view that spans the entire width of the browser.”

“Templates built with Variable modes now work seamlessly when published to Buzz. This gives your marketing teams more flexibility to toggle between your brand modes like colors, campaigns, markets, and more — all while staying on brand. When they open a template published with variables, they’ll see a new Variable switcher in the menu to easily change modes.”

“Admins on Organization and Enterprise plans can now disable ​‘From Figma’ Community templates in Buzz, ensuring teams use only the templates your brand team has published and approved.”

Ridd highlights a few examples from his workflow of delivering production-ready code to his product. Love this part: ​“I explored this concept in Make and really liked where it landed. A couple years ago, I would’ve dropped a Cleanshot .gif on the canvas and asked my developer to recreate it as closely as possible. But I’m no longer making concept cars. This component is the design. Every detail is rooted in code and behaves exactly how I want it to in production.”

Starting today, websites published from Figma Make and Figma Sites include more metadata for better search and sharing experiences. The improvements include auto-generated site descriptions for Figma Make and support for OpenGraph and X tags for published Figma Make and Sites so they look better on social.

Cameron Moll​’s team made a new plugin to prep your designs for code readiness and developer handoff through a combination of smart autofixes enabled by AI and guided manual corrections. I bet it will pair well with Luis’ widget above to cover different phases of the ​“make it work, make it right, make it beautiful” process.

Luis made an incredibly useful widget to help check off requirements before the component gets to production — states, accessibility, documentation, tokens, etc. Checklists are an underrated tool for optimizing routine tasks, and I’m looking forward to trying this one. (Design Systems Checklist is another great resource worth checking out.)

Ana Boyer designs a web homepage, showcasing recently launched Figma Design and Draw features. ​“Learn how to create a text-inlay parallax hero using Remove background and Isolate object, apply Glass effects, expand an image within a grid, generate illustrations via AI prompts, and add Draw texture effects.”

Three new AI image editing tools for precise editing and manipulation work — Erase object, Isolate object, and Expand image — and a new toolbar that pairs existing image editing capabilities with these new features. ​“Now, you can lasso any object in an image and use Erase object to remove it completely, or Isolate object to edit or reposition it—without affecting the image background. You can also take a single object or person and apply lighting, color, or focus adjustments. […] Expand image extends the image background to fit new aspect ratios without distortion, preserving the integrity of an image while adapting it to any layout.”

“Join us to hear how Figma and OpenAI’s Codex are making design-to-code workflows more efficient and accurate. With the Figma MCP server, developers can easily bring design context into Codex to generate production-ready code. We’ll chat with Romain Huet, Head of Developer Experience at OpenAI, for a live demo, practical tips, and a Q&A session.”

Huge update to Grids adds an option to hug content and introduces fractional units (fr in CSS). Tables are so much easier to design now. 

Connect external tools to Make to pull in PRDs, tickets, and product documents, so you can create prototypes with full context. Update your connected docs or create tasks directly from Make to keep everything in sync. Supported connectors: Asana, Atlassian (Confluence, Jira), GitHub, Linear, mon​day​.com, and Notion.