11 Comments

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.

Expand full comment

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.

Expand full comment

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.

Expand full comment

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.

Expand full comment

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.

Expand full comment

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.

Expand full comment

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!

Expand full comment

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.

Expand full comment

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.

Expand full comment

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.

Expand full comment

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 :)

Expand full comment