UX/UI designers and frontend engineers have been converging for some time. I’m undecided if “design engineer” is apt, but if we look at my friend Nev’s work (& LinkedIn bio!) at Evervault it’s clear that designers can write some pretty gnarly JS.
Clearly, this latest wave in generative AI is abrupt-enough of a change to expedite this trend. The question then becomes, does this new class of engineer have the right integrated development environment?
Currently, as far as I know, to design a site like Evervault’s the core tooling you need is: an IDE, Figma and Blender/Spline. Perhaps something on the animation side also to build advanced SVG path animations, etc. Should this all be bundled together?
Cue: “Framer does a really good job…”. Yes, 100%. I love Framer. However, I also love specific animation libraries (yes, beyond Framer motion), three.js, and dare I say it.. writing code.
Taking the above into account, what would a, from the ground-up, “frontend IDE” look like?
This is my first Substack “thread” so.. um.. discuss!
I like the idea. Animation side, that's is a bit tricky. There's a lot of UI and it can easily get pretty complex if you want to cover all/most of the use cases of animation.
Some time ago, Lottie made a plugin for After Effects, which enabled you to export animations for web (it's still a great plugin, used by many). There was no sw for animation for web, and building one would be way too hard. So you did all the animation in the complex UI of AE, and used Lottie for export. Even AirBnb did their iOS animation with it...
Our big bet over at Subframe (https://subframe.com/) is that a design-to-code frontend tool like this should exist, but the main user is actually a non-frontend / non-designer who doesn't know all the UI "tricks". Stuart's TailwindCSS animate-spin example is great – it's such a simple ask but hard to code up if you don't know about CSS animations. Same with UX concepts – to design a great UI card, you need to choose the right borders / box-shadows / border-radius.
The right environment should give you all of these styles as options without needing to write a line of CSS code. So a big yes to your initial insights, but maybe observing that the frontend beginner is IMO more underserved than the expert.
Subframe looks awesome! (dm'd). Hmm - don't you think that non-frontend / non-designers are pretty well served by Framer/Webflow devlink? They make a lot of decisions for you on how UI cards or animations should look for example.
My "insight" here, is that full-time frontend engineers are underserved, and hence, forced to context-switch between multiple tools, some of which aren't really designed for ultimately generating TS/JS.
"Value capture" tends to accrue where engagement is greatest, so, if someone builds a unified frontend ide that frontend engineers rarely have to switch from (& can deploy from!), I think there's a meaningful business to be built here.
Ah maybe we were talking about two different domains! I was thinking more about product UI whereas I think you're talking more about marketing UI, landing pages, etc.
Definitely something there about context-switching – that tedious loop of tweaking in Chrome devtools, then hopping back to VSCode to paste the changes.
We’re definitely going in the right direction with tools like Tailwind, Spline and Rive. I haven’t used Webflow Devlink yet but it seems like that’s another good step. If I’m coming at it from a designer’s viewpoint, I’d love more abstraction of common use cases similar to animate-spin, etc in Tailwind.
Webflow devlink is cool & Webflow does a lot right (building on top of web primitives). However, it seems to still be a _separate_ design environment for your React components! As a frontend eng, I want to live in one env personally.
An animate-spin abstraction is a great example of a "native" Frontend IDE feature.
Building off the Figma idea below, a more general version of this could be: design/animation tool like Figma/Spline does codegen to generate initial component files, and the IDE is built to assist designers (or non-frontend SWEs) on which files or configs to change to enable specific behavior. Not sure that Figma-code should be 1:1, since I'd view code as a superset of the functionality you get out of a design tool, so seems more intuitive as a starting point for code!
Code is generally a superset for sure. Although, in something like animation, perhaps code would be a subset of a broader set of tools that are better served via a complex UI? Blender comes to mind here also.
I'd say that I'd like to see a figma (webassembly & webgpu - for responsivness) 1:1 to code ide. Right now the detachment makes the process less seamless than it could be.
Agreed. I think a 1:1 experience is required, but I also wonder what entirely new features would be added? You could likely look at both VS Code & Figma integrations/plug-ins to find features that should be "native" to this IDE.
I like the idea. Animation side, that's is a bit tricky. There's a lot of UI and it can easily get pretty complex if you want to cover all/most of the use cases of animation.
Some time ago, Lottie made a plugin for After Effects, which enabled you to export animations for web (it's still a great plugin, used by many). There was no sw for animation for web, and building one would be way too hard. So you did all the animation in the complex UI of AE, and used Lottie for export. Even AirBnb did their iOS animation with it...
Now Lottie have their own platform (https://lottiefiles.com/platform). Took some time.
Our big bet over at Subframe (https://subframe.com/) is that a design-to-code frontend tool like this should exist, but the main user is actually a non-frontend / non-designer who doesn't know all the UI "tricks". Stuart's TailwindCSS animate-spin example is great – it's such a simple ask but hard to code up if you don't know about CSS animations. Same with UX concepts – to design a great UI card, you need to choose the right borders / box-shadows / border-radius.
The right environment should give you all of these styles as options without needing to write a line of CSS code. So a big yes to your initial insights, but maybe observing that the frontend beginner is IMO more underserved than the expert.
Subframe looks awesome! (dm'd). Hmm - don't you think that non-frontend / non-designers are pretty well served by Framer/Webflow devlink? They make a lot of decisions for you on how UI cards or animations should look for example.
My "insight" here, is that full-time frontend engineers are underserved, and hence, forced to context-switch between multiple tools, some of which aren't really designed for ultimately generating TS/JS.
"Value capture" tends to accrue where engagement is greatest, so, if someone builds a unified frontend ide that frontend engineers rarely have to switch from (& can deploy from!), I think there's a meaningful business to be built here.
Ah maybe we were talking about two different domains! I was thinking more about product UI whereas I think you're talking more about marketing UI, landing pages, etc.
Definitely something there about context-switching – that tedious loop of tweaking in Chrome devtools, then hopping back to VSCode to paste the changes.
We’re definitely going in the right direction with tools like Tailwind, Spline and Rive. I haven’t used Webflow Devlink yet but it seems like that’s another good step. If I’m coming at it from a designer’s viewpoint, I’d love more abstraction of common use cases similar to animate-spin, etc in Tailwind.
Webflow devlink is cool & Webflow does a lot right (building on top of web primitives). However, it seems to still be a _separate_ design environment for your React components! As a frontend eng, I want to live in one env personally.
An animate-spin abstraction is a great example of a "native" Frontend IDE feature.
Building off the Figma idea below, a more general version of this could be: design/animation tool like Figma/Spline does codegen to generate initial component files, and the IDE is built to assist designers (or non-frontend SWEs) on which files or configs to change to enable specific behavior. Not sure that Figma-code should be 1:1, since I'd view code as a superset of the functionality you get out of a design tool, so seems more intuitive as a starting point for code!
Code is generally a superset for sure. Although, in something like animation, perhaps code would be a subset of a broader set of tools that are better served via a complex UI? Blender comes to mind here also.
Hey! Interesting topic!
I'd say that I'd like to see a figma (webassembly & webgpu - for responsivness) 1:1 to code ide. Right now the detachment makes the process less seamless than it could be.
Agreed. I think a 1:1 experience is required, but I also wonder what entirely new features would be added? You could likely look at both VS Code & Figma integrations/plug-ins to find features that should be "native" to this IDE.
Yeah, but in practice they aren't 1:1, and aren't directly integrated with the "IDE".
Let's not talk about prototyping fine-grained details too :)