Skip to main content

Figma Dev Mode

Today I learned to use Figma Dev Mode in VS Code. I got a notification in my feed reader yesterday about the Figma Dev Mode1 announcement so I dove in to give it a test run last night. I’m in because of how it’ll allow me to speed up the design iteration process without having to leave my text editor. Figma for VS Code gives me the same features of browser developer tools that I can share with anyone in real time instead of sharing my screen on video calls. It’ll give my less technical collaborators an easy way to make adjustments and comments without all of the screenshots in emails.

Adobe acquired Figma last year for $20 Billion dollars. The European Union and the Department of Justice have both launched antitrust investigations2. I understand the investigations because I’ve been through periods of anti-Adobe sentiment because of their pricing and market dominance. I switched to using Sketch and tried Affinity not too long ago, but I’ve kept my Adobe licensing active because I always come back to it. The native iPad apps brought me back this last go-round. I’ve been using the Creative Suite3 since version 1 when I got started with my first WYSIWYG editor on GoLive for Windows. I switched to the Macromedia4 ( Fireworks / Dreamweaver / Flash ) suite until it was acquired by Adobe. I started moving all of my workflow excluding InDesign, Photoshop, & Illustrator to the text editor as soon as I realized the eminent demise of Flash revolved around the fact that ActionScript was just JavaScript and that browsers would not need plugins.

WebAssembly was added as the fourth language that browsers would support behind JavaScript, HTML, & CSS. WebAssembly is the secret sauce for Figma5. It’s written in C++ and complied with WebAssembly for the browser. This allows the Canvas to be embedded into Electron6, which is also what powers the Visual Studio Code text editor I use. I’m generally a late adopter, but I could immediately see the benefit of collaborating on live designs in real time with a cohort or client. I never took on Adobe XD mainly because of Dreamweaver after realizing I had more granular code control. After the announcement of Figma Dev Mode yesterday, XD has disappeared from the Creative Cloud launcher, so I’m guessing its days are numbered.

The collaborative design process has always been somewhat of a pain for me. I think this may be because I have a visual design background which many of the folks I work with do not even know thinking I’m only a programmer and developer. I’ve learned to let the client or agency take the lead on design, often telling myself not to comment on it even though I often see some basic mistakes. Although I’ve built some serious layouts with InDesign and drawn a bunch of logos/graphics with Illustrator, it’s primarily the coding that pays the bills. Lots of clients and agencies already have their own iterative design processes in place before I’m even on board so I have to follow their lead. I think the primary reason I’m in that position is that a lot of folks can use various tools to ‘design’ and far fewer can write and debug code.

Workflow improvements, in theory, can be quite different than in practice. Right now, I’m just seeing an easy way not to leave my text editor instead of also jumping between a graphics program and the developer console7. I can easily use third-party plugins to pull in existing libraries for React, Vue, Tailwind, Bootstrap, and other frameworks. I can import existing site designs into Figma using conversion tools and I can export Figma designs back to code 8,9. I've connected to GitHub repos so that issues and commits can be synced and viewed in Figma10. I mean… what could go wrong ¯_(ツ)_/¯ ? The quality and formatting of the exported code might be off. And although I bemoaned emails with screenshots above, when Jira and Slack first came into play at agencies I was playing a game of communication ‘whack-a-mole’ every morning instead of having them all in my email client. I’ll give it a whirl for a while for various projects and get back to you. But if there’s one thing I’m 100% sure of… I’ll be working with whatever process parameters I’m given, there will be a whole new batch of agency quasi-coders, and I’ll still be getting screenshots in emails.

  1. Figma Dev Mode - https://www.figma.com/dev-mode/
  2. Adobes $20 billion deal to acquire Figma - https://www.reuters.com/markets/deals/adobes-deal-acquire-figma-under-threat-eu-regulators-ft-2023-06-20/
  3. Adobe Creative Suite - https://en.wikipedia.org/wiki/Adobe_Creative_Suite
  4. Macromedia - https://en.wikipedia.org/wiki/Macromedia
  5. WebAssembly cut Figma’s load time by 3x - https://www.figma.com/blog/webassembly-cut-figmas-load-time-by-3x/
  6. Electron ( software framework ) - https://en.wikipedia.org/wiki/Electron_(software_framework)
  7. Figma for VS Code - https://marketplace.visualstudio.com/items?itemName=figma.figma-vscode-extension
  8. html.to.design - https://www.figma.com/community/plugin/1159123024924461424/html.to.design
  9. Anima for Figma - https://www.animaapp.com/figma
  10. GitHub for DevMode - https://www.figma.com/community/plugin/1220512233196109878/GitHub