Ricky

engineer @figma, multi-disciplinary artist
IG:

[Ricky @rickrajj]

Surreal moment getting to talk about the prototyping features I’ve built at Figma! #config23

[Ricky @rickrajj]

@figma @domdolla Two of the shaders riff on these awesome ShaderToy projects:

https://t.co/3wFhTZYaLZ

https://t.co/bxRfAEtIJ8

The other four shaders were generated from scratch with agent. Huge thanks to the ShaderToy community for sharing their work and inspiration. 🙌

[Ricky @rickrajj]

Coming back with another fun little video sequence made in @figma with shaders, motion and lots of help from agent✨

Beats by @domdolla

Thread 👇

[Ricky @rickrajj]

@figma @domdolla I built the individual elements first (nodes, shaders, motion, etc.), then assembled each frame in its own chat to get the best results.

Finally, I composited all 7 frames together in a separate chat and dialed in the timing.

[Ricky @rickrajj]

@figma @domdolla This animation is 7 frames composited together with 6 shaders (2 riffing on ShaderToy references and 4 built from scratch), plus a ton of interleaved motion.

Everything was created on the Figma canvas with Design Agent. The only thing added outside of Figma was the audio.

[Ricky @rickrajj]

@figma @domdolla One of my favorite parts of the new motion timeline is how easy it is to dial in the exact duration of each scene to sync everything with the audio.

Feels like we're just scratching the surface of what's possible with these tools! Endless possibilities!

[Ricky @rickrajj]

Figma is making my dreams come alive! The shaders in my head can now exist on canvas without having to wrestle with shader math

Made entirely in @figma using Design Agent + the new expressive/motion tools from Config. Beats by @domdolla 🎶

Curious how I built it? Thread 👇

[Ricky @rickrajj]

@figma @domdolla The final disco ball scene was inspired by these ShaderToy references:
https://t.co/ApDnNLF74o
https://t.co/0A81jmNihn (by @knarkowicz)

Rather than reusing those shaders, Agent generated new code inspired by the references to create the final neon disco look.

[Ricky @rickrajj]

@figma @domdolla The "DISCO" text uses another shader created from scratch with Agent. I described the effect as blobs forming the letter shapes before converging into a rainbow circle.

[Ricky @rickrajj]

@figma @domdolla All of the text animation was done with the motion timeline and keyframes, with a custom shader generated from scratch for the text fill.

[Ricky @rickrajj]

@figma @domdolla The opening hologram scene is a lightly modified version of this ShaderToy shader (https://t.co/mtb0oVc5il), licensed under CC BY-NC-SA 4.0. Huge thanks for making it open source!

[Ricky @rickrajj]

@figma @domdolla Built this entirely on a single frame with one long motion timeline. Each scene fades in and out by animating opacity, which made it easy to line everything up with the music.

The audio was added separately outside of Figma.

[Ricky @rickrajj]

It's been a minute but excited to share what I've been working on at figma! possibilities are endless with what you can do with figma's agent!!

[Figma @figma]

wdym of course there’s an agent right on the design canvas that’s fluent in Figma and native to the way your team works

[Ricky @rickrajj]

a little something I've been working on at Figma! sign up for the alpha to try it out :)

[Figma @figma]

Something new is coming to the design canvas

[Ricky @rickrajj]

Working at Figma has been the ride of a lifetime. Still pinching myself that we’re now listed on the NYSE! #fig

[Alex Kern @kernio]

I'm thrilled to introduce @figma Make, Sites, and Code Layers today at Config. After years of hard work, we've bridged the gap between idea and production. 🌉

[Ricky @rickrajj]

Figma Make unlocked all the shader ideas I had floating around in my head #MadeWithFigmaMake #VibeCodingInFigma