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.
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.
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!
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.
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.
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.
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!
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.