{"componentChunkName":"component---src-templates-blog-post-js","path":"/first-thoughts-after-using-figma-ai/","result":{"data":{"site":{"siteMetadata":{"title":"Catwomaniya"}},"mdx":{"id":"9ded9ff6-35d2-5a3f-b2ee-6f2634f3c333","excerpt":"Design is not my full-time job. But I have worked on design projects in the past and have used Figma on and off for over 5 years. So I can say I'm comfortable…","body":"var _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }\n/* @jsx mdx */\n\nvar _frontmatter = {\n  \"title\": \"First thoughts after using Figma AI\",\n  \"date\": \"2026-06-18\",\n  \"description\": \"A first look at Figma AI, MCP, Make, Weave and where the tool is useful versus still early.\"\n};\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n    props = _objectWithoutProperties(_ref, _excluded);\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"p\", null, \"Design is not my full-time job.\"), mdx(\"p\", null, \"But I have worked on design projects in the past and have used Figma on and off for over 5 years. So I can say I\\u2019m comfortable with components, variables, design systems and all the tiny things that make Figma usable.\"), mdx(\"p\", null, \"And that matters because AI is surprisingly bad at handling chaos.\"), mdx(\"p\", null, \"Messy design files already confuse humans.\"), mdx(\"p\", null, \"Imagine what they do to AI.\"), mdx(\"p\", null, \"I keep a running list of things I want AI to do inside Figma. Not typically the vague \\u201Cmake this beautiful\\u201D stuff. I mean the boring useful stuff. Basically all the work that takes too much time, too many clicks, and a level of attention I do not always have.\"), mdx(\"p\", null, \"So during the Config Makeathon, I thought this was my chance to play around with all of Figma\\u2019s AI features without worrying too much about credits. I spent a couple of hours testing the Figma agent using MCP inside my files, used Figma Make to build a prototype, and used Figma Weave to generate assets.\"), mdx(\"p\", null, \"A few things stood out. (also \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://bake-retina-31208571.figma.site/\"\n  }, \"final file\"), \" if you wanna check it out)\"), mdx(\"h2\", null, \"It follows systems better than it invents\"), mdx(\"p\", null, \"I asked the Figma agent through MCP to make two mobile concept screens based on a rough idea.\"), mdx(\"p\", null, \"I wanted to see how creative it would get.\"), mdx(\"p\", null, \"It took around 15 minutes.\"), mdx(\"p\", null, \"The output was decent honestly, but it did not blow my mind. It did use components from our UI kit, which was good to see. But in one screen, it inserted a component where it was not required. So I still had to go back, swap in the right components, fix spacing, clean up the layout and polish everything before it became semi-shippable.\"), mdx(\"p\", null, \"The most interesting part was this: when I gave it a wireframe with proper design architecture, it followed the structure almost 90% accurately.\"), mdx(\"p\", null, \"It is not great at inventing from nothing. But if your file has structure and your design system is clean enough, it can follow patterns decently well.\"), mdx(\"p\", null, \"Which is very Figma, actually.\"), mdx(\"p\", null, \"The better your system, the better the output.\"), mdx(\"h2\", null, \"The audits are useful, but still too manual\"), mdx(\"p\", null, \"It can evaluate screens and look for inconsistencies across flows.\"), mdx(\"p\", null, \"This sounds very useful. And sometimes it is.\"), mdx(\"p\", null, \"But the problem is that the answer comes back as text inside the chat. So even if it tells you there is a spacing issue or a mismatch between screens, you still have to go find it yourself in the actual Figma file, if your file is huge, good luck.\"), mdx(\"p\", null, \"This is one of those things that feels almost useful. Like it is solving 60% of the problem, but the remaining 40% is still the annoying part. And if you\\u2019re visual like me, you can just ask it something like\"), mdx(\"div\", {\n    \"className\": \"gatsby-highlight\",\n    \"data-language\": \"none\"\n  }, mdx(\"pre\", {\n    parentName: \"div\",\n    \"className\": \"language-none\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-none\"\n  }, \"\\\"can you explain to me visually which fixes are needed with arrow diagrams with text and visual guidance?\\\" \"))), mdx(\"p\", null, \"and it will generate something like this.\"), mdx(\"p\", null, mdx(\"span\", {\n    parentName: \"p\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"457px\"\n    }\n  }, \"\\n      \", mdx(\"a\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/b8b8e040c23bbb8526101f30d0de9038/34f1d/figma3.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"114.1891891891892%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAXCAYAAAALHW+jAAAACXBIWXMAAAsTAAALEwEAmpwYAAAEvUlEQVR42p1VTYwURRQeFdSjFwxeTExIvHAx3knUDIsJECERTYwGY4JGE40/F36STQwb4WC8aHAvoASNrgYEFowxBNQDEgaUsCww687s/HTP9PRP9U9V18/r7ufrmUFcIhcr86Wnqt776nuv3uuuTE5O3rtjenrl6Xr9gZmZmfsq4zFdq62k+f3T06NnuYaI99RofQetnT17dkU5r9w5dNJba3zrsHI7B7VnHYDAPqgG9rMq6r+vw96MCqxDktlHcuFO2e3Gut7i/GHpdX8IndbpU98f+7o5N7f61mFDQtloT6gfL6A+cb7IT10E/PUGqgvX9iDms4gF8sABkDHZGztNw20i8rOg3/7G6y7uP3Pi1Cd2vb5qGaF38XL10tRBvL73C1j46IgKPj2JwfFfdiKGx2N/gFfn5tVSo4GQDFpue/Elx2qlwrO/Qs2eGBPduyxk/sfV9dbhn3D+wNHi+udHIfr2N/ROn9+NOZtN4wDnr98Aq9NCiJ0uZ91Xg85Chkg/zN4ZE65cRijr9So/9yf6Z2oFO3cZ8t9vYnz+ym4tnFnMOfq9JdDxAE3c7/Kg8wqzG4lwOyhD+/Ux4YplhNbifPXnY9/hZ/v3Fbs+eBf2fziJM18e2q3j/klUAeqoB7kYlASM9ZYeay/Mrem1/1rLWPOhZbm7NRLPqrqdOrZuXilai1ehV7uEnVptl7BbJzENMO4vgYn6mHEnwjhe9Z8ky0IO+1Ud2CiddgaJo8kTkXs7fbtxIhMussW6TpylkpBh0nt4SHi3GhydJquICukaC/oPWKY7U3swN7M4nAgoy4cMYuT8kaEPFfeQ9E6Uh6SB9WgmvLdJzVtZ7L5pkv57RrhPYuJVUfhv8F53O13Ka6TwZcTmgyMRlbuH7DjN1YPuwgvdxrVt3eb8i4Nu43nmtLYLt/0cpoN1CO5TwDpPS9Z9Bpi1RTF7awmIy2dnq/Ka9Gxvoa7axrmzuiJluIFCRZBhkckQi0zgMAVFCY3jmiPkZbcQ9GiPfLAoOyghpMNUkd+mSkihsYGFSeApTcMYrfMs07mRig96KqR1maYlg8ryXOU6VdzpqYgxpaQkH1WCl3TABxsrgDDRvHIJrfqNojwmkSlCnpNSjcqxUHt9BKVR8hSNBsy1QuO7tJ9hnhcolcBUipFCFW2qSO5PxEEXI88ujKRNHqFOOTkmqAMHNQ9RCSrBwCXSCHOZoIk8NESUaYEFKCoIOSYMiNBpbjCcYRiGhQgYQprSyZQzkJg4NoakRsYROVIshEwlKDwLQ8dDEYWkPkUVxkNCEO7mCoTtCRABCsGLlIXII1LD6XQjUQ8cBBaQIlKmDKbGkF2EilFvpxpBGzQG0Ah1WyGE1gRlEzOZFLnmWBhBKhMKLabuYMOQClJbKtYUruYB1bo/XCttC0MRwfiWBRES2URpOHD7hU/vPyESlJKjplAoN4RRrjJdOhJJZgh0OWXuQI+QmX8RynA9JwJfxMYJfXBjBoM4gDgVYNIEdBqRYAaSh6BFCEYrMJABFQykUlEBGIAsl6OyCTaWvbxhVJTDhv2/41Zhb6a3jbOGrm1fLvy9ufSnyo/REIkzhjuF4jbK+RDCn0L5j+1e4M7HGLmP/w2vL6ZY3ooG9gAAAABJRU5ErkJggg==')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"Ask for inconsistencies or fixes\",\n    \"title\": \"Ask for inconsistencies or fixes\",\n    \"src\": \"/static/b8b8e040c23bbb8526101f30d0de9038/34f1d/figma3.png\",\n    \"srcSet\": [\"/static/b8b8e040c23bbb8526101f30d0de9038/12f09/figma3.png 148w\", \"/static/b8b8e040c23bbb8526101f30d0de9038/e4a3f/figma3.png 295w\", \"/static/b8b8e040c23bbb8526101f30d0de9038/34f1d/figma3.png 457w\"],\n    \"sizes\": \"(max-width: 457px) 100vw, 457px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  }), \"\\n  \"), \"\\n    \")), mdx(\"p\", null, \"And if you wanna give a handoff to someone new then asking for file summaries is super useful.\"), mdx(\"h2\", null, \"It cannot tell you what changed yet\"), mdx(\"p\", null, \"I also asked it to summarize what had changed in the file over the last three days. The use case was simple. Imagine I missed a few days and someone else was working on the file. Could it catch me up?\"), mdx(\"p\", null, \"Nope.\"), mdx(\"p\", null, \"It told me it could not compare historical versions of files.\"), mdx(\"p\", null, \"This would actually be one of the more useful features for teams. We have multiple people working inside the same files, moving fast, changing flows, duplicating screens, updating components.\"), mdx(\"p\", null, \"Being able to ask \\u201Cwhat changed since Monday?\\u201D would save so much time.\"), mdx(\"p\", null, \"Right now, it cannot do that (but hopefully soon).\"), mdx(\"h2\", null, \"Figma Make is not magic, it needs context\"), mdx(\"p\", null, \"I used Figma Make last year and was genuinely pissed at the experience, cos I went in expecting pretty UI.\"), mdx(\"p\", null, \"Now I am wiser.\"), mdx(\"p\", null, \"Figma Make is not magic. It needs a really strong first prompt if you are starting from scratch.\"), mdx(\"video\", {\n    src: \"/caa552f45965d0272d5b14bb1a01bd1b/figma-make-create.m4v\",\n    controls: true,\n    muted: true,\n    playsInline: true,\n    style: {\n      width: \"100%\",\n      maxWidth: \"600px\",\n      borderRadius: \"8px\",\n      margin: \"20px auto\",\n      display: \"block\"\n    }\n  }), mdx(\"p\", null, \"For an app, I would give it the kind of context I would normally put in a design doc: what the product is, who it is for, the main flows, the visual direction, the component rules, what screens already exist, and what not to do. \"), mdx(\"p\", null, \"Here\\u2019s a good design.md \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://github.com/bergside/design-md-figma\"\n  }, \"generator\"), \"to use.\"), mdx(\"p\", null, \"Also, giving it a few screens you have already created in Figma as rough guidance helps a lot.\"), mdx(\"p\", null, \"The first version it generated for me was decent. Not amazing, but decent.\"), mdx(\"p\", null, mdx(\"span\", {\n    parentName: \"p\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"590px\"\n    }\n  }, \"\\n      \", mdx(\"a\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/1f0995aa3192960f80d217e380f263c7/96191/figma1.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": \"noopener\"\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"56.75675675675676%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAIAAADwazoUAAAACXBIWXMAAA7EAAAOxAGVKw4bAAACCUlEQVR42j2Qy08TURSH+28aoyj4igs3EoPGx5KFSGzTxhqjK4M0NKgogWgsj42hLZ122pnO43buvJ8d5s6jEWxNPdMBki93c/Od3++cnCG2rQEdGQLROCB0kbd7YKxW9FJVzVe0woacX8ev1+3S5ujDbvTmO9naD20UGkJkirkAUb7YIhpPDJ7oXOgh/+u+slJVi1/U4mejtCUXNgG3vB2+/xGUd8KNWmSLYKZyyDc96jBAbWIKROeJLZ426dOfzejX0dle699hZwY9OWiPgT3q7Hc7MlFGLtD6JypLZJqoTKDzf3219q26Vi5+Wl65v3Dz9vy1O/PXgbsLc/du3Zi7eqXwavmPK4eGmMqQFmi8hxmTb+lca6iw9drOduXju9WXz5cWny4tPrvgxZNHjx8+WHubHzn4XIbVAaILxDgn0Dhf6Y+JPk3saWTNsKexPdGlsYImDk70fmJLAMhiaKZE6TAxtlDaQuh4qOd2qBMFluIyhpj1Meth1uJblthxJCaX3S06l1FsDUBW+y2l25DbdY2jMgyh4yvcUIZZfGigjEyeXc9AFzKLmYbWO9aphinQFupaIm2KtCsxUBMWjtPOeGTj3OXdQY5NlNiDQOVBcFDPE7ogOIOek74MZMaWlFjSbGGcpLIFaWlgbA7ghQ9Ilrp13K4rx0cQCFWhcNbZxSy0zczExv8Bk84ku/A8zxYAAAAASUVORK5CYII=')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"Figma make first version\",\n    \"title\": \"Figma make first version\",\n    \"src\": \"/static/1f0995aa3192960f80d217e380f263c7/fcda8/figma1.png\",\n    \"srcSet\": [\"/static/1f0995aa3192960f80d217e380f263c7/12f09/figma1.png 148w\", \"/static/1f0995aa3192960f80d217e380f263c7/e4a3f/figma1.png 295w\", \"/static/1f0995aa3192960f80d217e380f263c7/fcda8/figma1.png 590w\", \"/static/1f0995aa3192960f80d217e380f263c7/efc66/figma1.png 885w\", \"/static/1f0995aa3192960f80d217e380f263c7/c83ae/figma1.png 1180w\", \"/static/1f0995aa3192960f80d217e380f263c7/96191/figma1.png 2176w\"],\n    \"sizes\": \"(max-width: 590px) 100vw, 590px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  }), \"\\n  \"), \"\\n    \")), mdx(\"p\", null, \"It then took me 200+ updates to get from that first version to something closer to what I wanted. To be fair, my initial prompts were also very silly. I was asking it things like \\u201Cchange this text from X to Y,\\u201D which I could have just edited myself in the code.\"), mdx(\"p\", null, \"Those tiny edits eat credits fast.\"), mdx(\"video\", {\n    src: \"/a565fa16d220de18853329ecb8b087fa/figma-make-edit.m4v\",\n    controls: true,\n    muted: true,\n    playsInline: true,\n    style: {\n      width: \"100%\",\n      maxWidth: \"600px\",\n      borderRadius: \"8px\",\n      margin: \"20px auto\",\n      display: \"block\"\n    }\n  }), mdx(\"p\", null, \"Later, I started doing the small code edits myself and used the AI for broader changes. That worked much better.\"), mdx(\"p\", null, \"The edit functionality was genuinely useful for quick visual changes like font size, color, padding and layout tweaks.\"), mdx(\"p\", null, \"Now, Figma conenctor doesn\\u2019t work on Figma Make files, so although you will be able to read your Make file and you can ask GPT 5.5 in Codex what\\u2019s wrong if you think Figma\\u2019s agent (which is essentially Claude Sonnet or Claude Opus) is not doing a good job, you won\\u2019t be able to write/edit it. Which I felt was weird.\"), mdx(\"h2\", null, \"Weave reduces the back-and-forth in image generation\"), mdx(\"p\", null, \"If you have generated images or assets with AI, you already know the process.\"), mdx(\"p\", null, \"You write a prompt in ChatGPT.\"), mdx(\"p\", null, \"Paste it into whatever image model you are using.\"), mdx(\"p\", null, \"Generate a few versions.\"), mdx(\"p\", null, \"Figma Weave makes this less annoying because everything happens in one screen. You are not constantly going back and forth between an LLM to refine the prompt and an image generation model to create the asset. That alone reduces a lot of friction.\"), mdx(\"p\", null, \"It also helped me understand that the model you choose matters a lot as most image generation models do not have real memory between outputs. They are not automatically remembering the exact character, object, texture, proportions, line weight, color palette or style system from the last image unless you keep giving them that context.\"), mdx(\"p\", null, \"Some models, like Flux Kontext, are built to stay closer to the initial image, which makes them much better for things like character generation. GPT\\u2019s image model is also pretty strong at consistency. So if you are trying to create sprites, characters, icons or a family of assets, you cannot treat all image models as the same.\"), mdx(\"p\", null, \"Most importantly workflows become the important part, especially when you need to generate a lot of assets.\"), mdx(\"p\", null, \"You need references. You need constraints. You need to reuse the same visual anchors. And you need to pick models that are actually good at consistency.\"), mdx(\"p\", null, \"Weave does make the workflow easier to manage.\"), mdx(\"h2\", null, \"Vectorize is genuinely useful\"), mdx(\"p\", null, \"Vectorize was one of the features that actually stood out to me. It converts raster logos and images into editable vector shapes. This is the kind of thing that used to need Illustrator or careful manual tracing, the kind of AI feature I like.\"), mdx(\"p\", null, \"Specific. Practical. Removes a tedious step.\"), mdx(\"h2\", null, \"Interactions are good as a first pass\"), mdx(\"p\", null, \"You can propose an interaction model and then refine the timing, easing and logic by hand. This feels like the right relationship with AI in design tools. Let it create a first pass. Then let the human make the judgment calls.\"), mdx(\"p\", null, \"Because interaction design is not just \\u201Cadd animation.\\u201D Timing and intent matters. Whether something feels smooth or annoying matters.\"), mdx(\"h2\", null, \"So do I see potential?\"), mdx(\"p\", null, \"For sure. But it needs to be much faster and much more contextual for me to see everyday value, especially if I have to consider credit burn.\"), mdx(\"p\", null, \"Would I use it every day?\"), mdx(\"p\", null, \"I am not a full-time designer, so I can\\u2019t answer that from a designer\\u2019s perspective.\"), mdx(\"p\", null, \"But Figma is not just used by designers. Marketers use it. Product people use it. Devs use it. And lately, more people are comfortable chatting with a bot and getting a UI that is slightly better than what they could have made on their own.\"), mdx(\"p\", null, \"And honestly, for a lot of those use cases, that is enough.\"), mdx(\"p\", null, \"And unpopular opinion here, that does not automatically mean AI slop.\"), mdx(\"p\", null, \"Most digital products are built from repeatable systems. People do not want to reinvent UI patterns every single day. That is exactly why platforms like Figma became useful in the first place.\"), mdx(\"p\", null, \"The real opportunity for Figma AI is probably not \\u201Creplace designers.\\u201D\"), mdx(\"p\", null, \"It is the boring operational layer around design - Cleaning files, Checking consistency, Comparing flows, Summarizing pages, Helping people work inside large systems without getting lost.\"), mdx(\"p\", null, \"Right now, it feels promising but early. And very dependent on how clean your file already is.\"), mdx(\"p\", null, \"Which might be the funniest part.\"), mdx(\"p\", null, \"To get good output from Figma AI, you still need to do the thing designers keep telling their teams -\"), mdx(\"p\", null, \"Keep your files organized.\"));\n}\n;\nMDXContent.isMDXComponent = true;","frontmatter":{"title":"First thoughts after using Figma AI","date":"Jun 18, 2026","description":"A first look at Figma AI, MCP, Make, Weave and where the tool is useful versus still early."}}},"pageContext":{"slug":"/first-thoughts-after-using-figma-ai/","previous":{"fields":{"collection":"blog","slug":"/AI-made-me-productive-but-creativity-sucks/"},"frontmatter":{"title":"AI Made Me More Productive. So Why Does Creativity Feel Different?"}},"next":null}},"staticQueryHashes":["2841359383"]}