Figma Just Made Its Final Transition Into Adobe

Figma just dropped the 2026 config keynote and they came with a lot of like really new and exciting features and updates. Command AI. Well, let's start with the UI. You see the UI is a bit different, but that they released it even prior to the config. What we have here is a design we did for a client. And now I went back in. This is from two years ago. And I wanted to see like what could I do today if I were using um these new Figma tools. Now you can do things like this with Figma shaders. So I just duplicated this, brought it here, and I asked the Figma agent to create me a shader. The way you can do this is going to tools, for example, and here you can create a shader effect or a shader fill. And the way you access it is from the fill panel. Uh I have this twist wave and as you can see I can just interact with it. And all of these all of these were just vibe coded. I just asked the agent to add these uh properties and it did. For example, here is another shader. this wave. Uh, originally it was just like static SVGs, but now it's kind of like interactive in a way that I can design my own. I can play with it. I can change it. That's really, really awesome. I made another few, but they didn't turn really well. So, the one above is our original design, and we did actually have this as a it we found it on GitHub two years ago. we use this for this project. And now I I thought like can Figma actually recreate this? And not really. Uh I used shader effect and shader fill and both of them they tried but it's you see it's just not it exactly. What do your prompts look like? You keep saying we prompted this. I'd love to know and and you prompted it to give it those uh inputs there. What what is your prompt? How are you getting all this? It sees my frame. It gets my frame and I'm like create a shader based on this and I want to have these properties to change and it just gives me a list and then I can apply it. So you always provide it an image for it to reference something. You could start from scratch. You can you can literally create you can go to tools and create a shader fill and just start from scratch and then it becomes a tool. What tool that actually good that you ask that because now if I go to my fill I don't know if you how much you know Figma we have this fill option you know I can add white fill I can add layers and here if I go to the different types of fill image etc. Now I have shader. It's just a different type. And now in these shaders I have some of the ones that Figma has built by default. So these are the Figma defaults and these are the ones that I made. Like I can add this wavy one uh to this design. It's a it's just a fill type that I create as a as a shader. Figma released so so many new features and I'm not sure how they are like how useful they are in the final production. Uh because this shader okay cool we have it in the design. How am I going to transform it into you know what I need in a website? So I have to recreate this the maybe I can push the shader code to GitHub or something like this. I because it it is code. Create this as an HTML file with this exact shader. Don't make a new shader. Use the one from this Figma file. Let's see if it can make it. Speaking of static, not everything is going to be static in Figma because now we have Figma motion probably like the biggest update. Uh you see how we have like these tool set here. We had Figma design and now we have Figma motion. We click it and we have now these beautiful, beautiful layers. And just by pressing space and animation, you see it's happening. And all of this was pretty much oneshotted by just an agent. So if you want you can go in, you can go nuts, you can create uh these like animations and you can play play around with the animation. But if you don't want to play around with the animation, you can actually just ask an agent to do it for you. So here I have different designs. I can click on this frame and you see how intuitive it is. The timeline is empty. I can start making stuff or ask an agent can be like the frame is already in animate this. So this is the same as framer and that this agent is omniresent throughout the whole yes like I really love this approach and this idea by the way fun fact they didn't talk about AI much in this like the whole presentation was in a way kind of like AI related because there are agents are everywhere agents are doing everything everything is vibe coding vibe design next to you like everything but they were not saying like AI AI AI they were just saying your agent does this alongside with you. You can do this, you can do that. And they were all like saying you can do that, but it's actually the agent that is writing the code. It's the agent that is doing like the the screen capture. We'll we'll get into it. Like the agent is doing a good chunk of the work, but I mean I'm not complaining. So this is done and I didn't I didn't specify anything but that's the animation we got. It's it's okay. It some might be necessary. Things are moving. Yeah. Optimism things are moving it. But that's that's the idea that this is this is the agent doing stuff and you can continue talking to the agent or you can get your hands in the motion and do stuff. So I genuinely think this is like the way to go with AI where you have the agent to interact with the tool but you also have this like you know all of these manual controls as well. So I I love that approach and I want to see that with web flow to have a canvas and agents to do everything because now code is design is code. We'll get into this and as this is happening uh I will tell you a little bit about this. So here in the presentation they started to talk about code in a very interesting way. So Figma sees code as a subset of design. They see it as what they call a material. So, you know, with when you design something, you might design with a pen and draw something, but you might also want to code something that that's how they interpret it and that's how they want to see it. Now, you see this on the screen, these are these are not out yet, but these are code layers. So a code layer is just like a frame. You know how in Figma you can press F, you can press F and make a frame. Uh soon you will be able to create a code layer. And what's really good about that cool about that code layer, it's live. Uh it's running in the canvas. Uh you can pull it literally from your GitHub and you can do very interesting stuff with it. For example, you see your code and you can ask an agent to show you all the different screen and different states from that code component and it just puts it on the screen so you see all the different states. Things like this are very very interesting and I kind of like vibe code alongside with teammates. What's a very strong point of Figma, the multiplayer aspect of it. Like we can go in, you can start vibe coding something. I can see your prompt and I can continue or I just literally take whatever you are working on it and then I duplicate it. And that that's a whole new I guess it's a work tree um or a copy of like the the whole work. Either way, as you see now, you can also extract the design layers and you can work alongside with your teammates. So, I'm very excited to work on this uh like to to work with this, but I'm not sure how how I will put it in my work uh process. Like what I like about Figma is the canvas. So maybe if I'm creating a a website, maybe I can use this feature to to make like multiple versions and make it work and all of that and then export it later, but also have the ability to manually tweak stuff. So maybe that's that's where this isn't really useful. Um, it all sounds very exciting, very interesting also technically and from a geeky perspective, but I'm not sure how it will fit this very new work uh process that we have. I mean this project that we are doing together, we did a lot of it in Figma, but there are some parts of it that are done just in code, right? Um, so I don't know how useful Figma will be there. Anyway, the next thing they announced, I want to go through it uh very fast, was weave, a nodebased image and video generation tool. So, you basically have these nodes. You have some of these are inputs uh as an image. The other one is another image input as a style reference and another one might be a prompt. You connect these and then you get an output. They show how like even an animation with a reference um they're like you know transforming the style of it. One thing that I'm not sure about is like how much is this going to cost? How am I going am I going to use this just because it's inside of Figma or am I going to use another provider? Um I guess under the hood the API is you know the Google API and the open AAI API and all others but yeah it would be interesting to see how how they are managing this that's I think that the is the strong cell that it's all in one place it's all in a canvas and you can control it from there. I'm very shocked they didn't go like super hard on websites like Figma Figma sites and they they mentioned it here and there but I was kind of like thinking that they will have like a full-on system that will replace framer and even potentially web flow but they have like many technically very interesting stuff but not websites. Well, it's the websites is is the thing that brings a lot of this together. I mean, Kramer is also just is for graphic design and for video now, right? But websites bring especially with the code components, bring all of this together. So, it seemed like that would be the cherry on the top, whereas they're basically saying build it all in us and then pull it all out and then put it into your website that's hosted and built elsewhere. So it's like I mean don't get me wrong I I don't mind that you know I at the end of the day like web frame of sites was a like a a show when it launched. It was awful and they haven't really done anything with it and it just goes to show that they tried they tried something of a failed. Web flow has this production side of things. framer has this like uh early ideiation and generation side of things. So in my ideal world I would have design in web flow. The reason for that is web flow code is like the the the web flow styling panel is the closest to pure code out of all of these um no code tool. Let's see what Warp did. Uh what Claude did in Warp. So So is this now? So we This one was checking to see whether it was the shader, whether it's brought in the shader. And so we should be looking for like a canvas. So it's Yeah, there it is. Yeah, there's a Yes, I didn't write the shader. I pulled the actual source from Figma file through the Figma MCP server. I'm curious to know how it's going to make these animations. Look at this. Yes, I can see it. The Figma MCP exposes full key frame motion data and note has a timeline animation attached. Here's what I see. So, it sees the nav animation and the the phase and the like the like the Y + 30 + 32. So, you can do the translation. You could I mean you could translate this to Gap to be honest. You could just say, can you recreate it in Gap, right? these technologies, these new tools in Figma, they look really interesting. The part that is missing for me personally is like, okay, where am I going to actually use this while I see the process has already changed while I'm already doing stuff in clawed code and my clients are giving me claw code websites for me to implement somewhere else. Where is Figma with all these tools going to play a role? I don't know. I will be playing with it and you will you can bet on uh Poly Market that you will hear from us about this again. This is part of a larger conversation on my show Command AI which we stream live every single week. We discuss the news and all things related to AI in the world of design and web. Catch us next week and join in the banter. Command AI.