FIGMA for DEVS? New VS Code Plugin?!?

Figma's new releases here are unexpected, but show an industry trend of design tools taking developers more seriously. Really excited to see what comes out of this!

S/O Ph4seOne for the awesome edit 🙏

[j.r.r.tolkien]

Is it surprising that developers use Figma as much as designers? I mean I'm a developer and at work I use Figma to see the website prototypes that the designer designed for me to work on. Let's not forget that many developers also find it easy to quickly create their own designs using Figma. Other tools haven't really caught up to the consistency and the intuitive UI that Figma offers.

[ivymuncher]

thank god! i was so worried that vscode was only using 100% of my RAM! thank god it can take 120% now!

[EnriqueDominguezProfile]

Those weird cuts in the font you hate are probably inspired in ink traps, they have been making an aesthetic comeback of lately.

Ink traps provided space to "trap" excess ink when printing in offset, in very small fonts, in shitty quality paper, most notably journals.

[ABeeken]

I like the idea of having a Figma file in the editor so i don't have to focus shift to a separate app, but personally I think throwing stuff like this at problems is ignoring the problem itself - developers and designers on a given project NEED to define a consistent language otherwise they will not be able to work cohesively together. You can only do that through discussion and agreement - no amount of magic tools will solve that

On my current project I worked heavily with our UX designer to define colourways, names for components, rules for fonts, spacing, headings etc, and the names we used are prominent in both our Tailwind config and the figma document itself, meaning that a developer can work on a component knowing exactly which Tailwind classes to use and our designer knows exactly how to describe the makeup of components to the developers

[SzaboB]

everyone: wow, a plugin
me: so if 1/3 of the users are developers and 1/3 are designers then who are the remaining 1/3?

[tehArgento]

They took out one really useful mechanic, which was checking the distance between elements while being able to move them. Now, you'll have to go to dev mode to see the distance, and you can't even move the element. Hopefully they change that

[trappedcat]

Those purrs were top quality. Sounds like a well loved cat.

[edoardoguido]

4:12 Funny, because there actually is Tailwind support in the Figma inspector, for both HTML and JSX…

[LetondAtreides]

I tried Figma some years ago and didn't really like the experience. Codux may be worth checking out.

In some ways, it feels like things are trying to regress towards the kind of tooling we had with ASPNET a long time ago - wonder how their tooling has improved in recent years.

[sergi]

The best part is the inclusion of Figma inside of VS Code with the extension, coding on VS Code with no distraction mode while being able to see the design is awesome.

[ekchills]

I love the fact that you can choose units.. thats really useful

[miervaldis]

I'm a developer and I use Figma to create mock-ups for personal projects or to discuss about mock-up projects when I am in a team with designers.
I am actually really surprised that more than 1/3 are designers ! However, I still think Figma was for designers (at least prior to the new announcement) because to make proper mock-ups, I immerged myself in design tutorials like a junior designer would do.

When I read the news about Figma for devs, my first thought was : "Did they improve the CSS code they provide in Figma ? because half of the time, it was half garbage..."
However, I'm really delight Figma is working towards a better collaboration between designers and developers because developers also had to go through either Sketch or Figma files to create the product and the main issues were naming in design were incoherent for code bases, designers could not prototype certain parts of the design to make sure the developer understand what what require in the final version, etc...

[nivaldolemos]

Cant wait for the Figma - neovim integration.😂

[SimGunther]

If the design is reliant on generated code, it's gonna be a nightmare linking together design with something that disappears and reappears after each build.

A better version of flash would be a better bridge for these two seemingly unrelated fields, but I don't think anyone's ready for such a beast.

[covle]

I think having a figma view in vscode will make vscode slower while adding nothing compared to just having figma in a separate window.

At the end of the day, when creating a good design, you don't want to be bogged down with details about code. And when implementing a design you need to understand the tools and frameworks you're using.

Trying to blend those 2 together requires some kind of galaxy brain level desivloper.

Just let designers create the visual stuff, and let the devs make it code.

[Gosurfdammit]

Thing is the export tools never get the code right. They try, but it is almost always weird absolute values for positioning and it does not understand semantics that well.

[ewwitsantonio]

I use Figma everyday. It's the bridge between me (dev) and the designers. I really like being able to quickly gather css property values. I don't use the suggested properties, but certain values like dimensions, colors, font. I don't really want figma or AI directly in my code editor currently, but I may change my views soon

[soundrightmusic]

Im a designer who does enough coding to enjoy Ryan Carniato videos. I love these Figma updates. One of the hardest things is getting designer to understand the medium of the browser. More tools to simulate the browser without constraning you to the browser is great. Also anything that makes it more like sitting side by side is good.

[_timestamp]

1:06 instead of a 10 seconds ad we got a nice cat. This is the internet we all wanted

[patrickwasp]

flutterflow does an okay job at mixing design and code for those who can stand flutter.