Felix AI

AI-powered design and development assistant in Figma

Design Tools

Software Engineering

Artificial Intelligence

Hey everyone, thank you for checking Felix out! Felix AI is a context aware reasoning assistant for design and development in Figma currently running GPT-3.5 and GPT-4-turbo. I built this originally to help out with software design and development because I build a lot of little web apps and mockups and I use Felix to get the programming of these interfaces started. Programming takes time and it's slow to see results and iterate on them the way you can with a graphic interface like Figma. Felix is the bridge between Figma and a code editor like VS or Cursor. Felix enables you to mock up a few pages and components, convert them to react, and then save the code and assemble your application from there. It helps me build digital products, which is nice because I got to use the earlier versions of Felix to build the updates in this latest version haha Because Felix lives in Figma, it's context aware - it can understand everything about your designs - it can see into hex codes, font sizes, fill and hug settings etc; the architecture, rather than just the visual facade. Felix doesn’t use image or vision models, rather it collects and structures design details into neatly organized data structures that LLMs understand, allowing the LLM to assist in a lot of ways. I think the interesting thing about AI is using it to expand our abilities rather than trying to automate. It means extending designers’, engineers’, and builders’ capabilities rather than just auto-generating designs. It’s key to remember is that AI isn't really magic, and it definitely isn’t infallible. It requires the right context to function well, and sometimes gets it wrong. It helps to think of Felix's code export tool as an engineer that takes their direction based on exactly how you've built your design in figma. The use of autolayout, correct hug and fill settings and as few nested frames as possible are all recommended for the best results. Felix will translate your designs to code, so the output code will look different than what you've designed if you are just using absolute positioning without nested frames or appropriately structured attributes. It helps to build mockups specifically for Felix to program, rather than trying it out with designs not optimized for production. I’d recommend a ‘bite-at-a-time' approach, developing smaller components at a time. That said, I encourage you to push the capabilities and see what else it can do! It’s one of the first programs I’ve built myself so there are *definitely* some bugs to work out still so pls be forgiving and just let me know! It currently works only with OpenAI GPT models, so you’ll need to sign up for an API key with them for now to use Felix, but I’m working on adding local model support (like Ollama) so that it’ll be entirely free to use. I'm a designer and builder of sorts, focused on strategy and digital experiences. I rolled in a lot of my experiences and best practices into Felix. All feedback and thoughts are appreciated, and let me know how I can support your usecase and improve Felix!