Jim Nielsen’s Blog
Preferences
Theme: This feature requires JavaScript as well as the default site fidelity (see below).
Fidelity:

Controls the level of style and functionality of the site, a lower fidelity meaning less bandwidth, battery, and CPU usage. Learn more.

The Figma to Browser Chasm

I’ve seen some amazing Figma files.

Incredibly complex, sophisticated plugins that enhance Figma’s native capabilities. Tricks that mimic browser functionality. Beautiful aesthetics packed with minute details you could explore for hours.

It’s pretty amazing what people can do in Figma — a lot of which I’m sure Figma’s own creators never imagined.

But sometimes a Figma mock is too easily conflated with the end product. As noted by Derek Briggs, “Users don’t see your Figma files, so they’re only as good as their implementations.”

If you can’t translate all the hours and talent being sunk into a Figma file to working code in the browser, you’re throwing away time and money.[1]

It feels analogous to those “Pinterest fail” memes which comically (and painfully) illustrate the attempt to translate a beautiful abstraction of an idea into the manifestation of the idea itself.

Photograph of a beautiful decorative, detailed mask of Darth Vader on the left. On the right, a half-hazard recreation of that mask with sloppy frosting making it nigh unrecognizeable as Darth Vader.

Photograph of a detailed narwhal cupake on the left contrasted with a sloppy recreation on the right that has a pretzel skewering its head.

Photograph of a bunny cake on the left contrasted with a terrible recreation the right.

You only capture the full value of a talented designer if you have an equally talented engineer capable of discerning and implementing their Figma skills into code.

Or, if you’re lucky, you’ve got a design engineer who can do both.


  1. Having been in this position myself, if you can’t write code to realize your designs, you often instead spend your time becoming a wizard at shoehorning design tools to mimic the browser and what you could do if could write code, e.g. Figma prototypes that push the boundaries of what’s possible in the tool in an attempt to have control over every minute detail of “the final thing”. Given our current tools and the lack of flexibility and expressiveness in GUI design tools as compared to code (like HTML and CSS) this path often ends in madness. You’re still only building a replica of what end users will actually interact with and therefore, IMO, it’s not worth the time and effort. Spend it on the real thing. ↩