---
title: Figma Dev Mode
description: Today I learned to use Figma Dev Mode in VS Code
slug: figma-dev-mode
<!--- authors:
  - name: David Windham
    title: Something Else
    url: https://davidawindham.com
    image_url: https://davidawindham.com/wp-content/themes/daw/img/opengraph_image.jpg -->
tags: [design, code, software]
image: https://davidawindham.com/wp-content/themes/daw/img/opengraph_image.jpg
hide_table_of_contents: false
---

Today I learned to use Figma Dev Mode in VS Code. I got a notification in my feed reader yesterday about the Figma Dev Mode<sub>1</sub> 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.

<!--truncate-->

Adobe acquired Figma last year for $20 Billion dollars. The European Union and the Department of Justice have both launched antitrust investigations<sub>2</sub>. 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 Suite<sub>3</sub> since version 1 when I got started with my first WYSIWYG editor on GoLive for Windows. I switched to the Macromedia<sub>4</sub> ( 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 Figma<sub>5</sub>. It’s written in C++ and complied with WebAssembly for the browser. This allows the Canvas to be embedded into Electron<sub>6</sub>, 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 console<sub>7</sub>. 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 <sub>8,9</sub>. I've connected to GitHub repos so that issues and commits can be synced and viewed in Figma<sub>10</sub>. 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>