Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Making Figma better for developers with Dev Mode

figma.com

Post reply on HN
Print view View original

201–210 of 238 posts

Re: Making Figma better for developers with Dev Mode

#201

Post by mejutoco »

jsncbt wrote: post #194

Hypothetically speaking, if all designers could code at the level of a Snr Front End Engineer, would Figma exist? Just pretend that magically everybody knew how to code. Wouldn't designs just be done in the browser? No longer do you have to maintain these design artifacts post handover. There would be no unrealistic designs that do not consider the constraints of a browser window. I know this is unrealistic but I oft…

I am a software engineer and I still use Figma to be in design mode. Messing around with how a gradient/shadow looks or moving elements around is way quicker graphically than with code. It helps me not default to things that are easy to implement, but might be worse despite of it.

Still, I think your approach would work. I would probably find myself sketching on paper now and then in that situation though :)

Re: Making Figma better for developers with Dev Mode

#202

Post by maigret »

jsncbt wrote: post #194

Hypothetically speaking, if all designers could code at the level of a Snr Front End Engineer, would Figma exist? Just pretend that magically everybody knew how to code. Wouldn't designs just be done in the browser? No longer do you have to maintain these design artifacts post handover. There would be no unrealistic designs that do not consider the constraints of a browser window. I know this is unrealistic but I oft…

I don't think so. While there are some scenarios that are better coded (where lots of different paths open up quickly, typically Excel-like), in many cases good designers are incredibly fast with Figma and I know no coder who can be that fast.

Also, they spend their time analyzing the problems and have many other things to hold in their head beside coding. It would be very challenging nowadays to both be a great UX designer and be current with the latest CSS evolutions.

That said, I wish more designers would try coding at some point and learn how a browser and website work to get a deeper understanding of the material they design for.

Also developers should understand the designers methods like journey maps, basic typography and layouting principles.

Re: Making Figma better for developers with Dev Mode

#203

Post by zarzavat »

bunga-bunga wrote: post #193
zarzavat wrote: post #188

Earlier quoted context omitted.

When writing CSS for a Figma design, I first try to match the Figma as exactly as is reasonable, then I do a visual diff to make sure I haven’t missed any important details, then I clean up the CSS and relax some of the constraints until the (S)CSS is maintainable e.g. if I have padding of 19 and 21, lifting that out into a $padding: 20px constant.

Mockups are mockups, they’re suggestions. More often than not, sizes and spacing don’t match across views and it’s a waste of time to be “pixel perfect.”

As I said, I don’t try to make the end result pixel perfect. I try to cut a balance between being faithful to the design and having maintainable code.

Spacing and sizes do matter though. There’s a reason why we have thousands of different fonts, even though 5 would be sufficient. When lengths are proportionate it creates positive feelings in the user. People are unconsciously very perceptive to small changes in proportions - it’s sexual attraction.

Re: Making Figma better for developers with Dev Mode

#204

Post by brandall10 »

facorreia wrote: post #109
dangom wrote: post #106

Earlier quoted context omitted.

Name your frames and the problem is solved. I for instance love the model because I no longer have to be tracking down millions of filenames - just one for each project.

As a developer, I don't "name" anything on Figma. The UX designer might. I have to work with what I get. I agree with OP that in general it promotes placing a lot of components side by side on a huge surface and you have to keep zooming out and in, scrolling, etc. It's a terrible experience.

In my last job designers would put “in progress” in the title. But occasionally would make minor updates on final designs that would need to be communicated.

Re: Making Figma better for developers with Dev Mode

#205

Post by kaba0 »

jsncbt wrote: post #194

Hypothetically speaking, if all designers could code at the level of a Snr Front End Engineer, would Figma exist? Just pretend that magically everybody knew how to code. Wouldn't designs just be done in the browser? No longer do you have to maintain these design artifacts post handover. There would be no unrealistic designs that do not consider the constraints of a browser window. I know this is unrealistic but I oft…

The frontend space is hilariously non-productive, while design really benefits from WYSIWG, or at least faster design-view iterations.

So unless some tools that were available decades ago with Visual Basic surfaces with drag’n’drop widgets, I doubt we can leave Figma and the like behind.

(Note: JavaFX does have a visual editor, not perfect but it was quite a great break from editing HTML files)

Re: Making Figma better for developers with Dev Mode

#206

Post by tomgp »

jsncbt wrote: post #194

Hypothetically speaking, if all designers could code at the level of a Snr Front End Engineer, would Figma exist? Just pretend that magically everybody knew how to code. Wouldn't designs just be done in the browser? No longer do you have to maintain these design artifacts post handover. There would be no unrealistic designs that do not consider the constraints of a browser window. I know this is unrealistic but I oft…

As someone who has over the last 20 or so years been both a senior front end dev and a designer I don't think this is the case. For me designing in the the browser is fine for details but high level stuff; overall aesthetic, content design, user flow etc. etc. (the primary value of design per se) is better done, at least initially, with dedicated tools. Not necessarily because they're quicker (though they often are) but because different parts of my brain are needed for the different tasks and different tools fit better.

This change to Figma makes me less likely to choose it as my primary tool either as a designer or a developer. Though I guess this is a minority position as I'm compelled to use it all the time as Figma's become a kind of defacto standard in many sectors these days.

Re: Making Figma better for developers with Dev Mode

#207

Post by _betty_ »

I see you can start linking things to urls/files, curious as to if this will unlock developers adding more metadata to designs which might eventually be nicely displayed in Figma.

I have a desire to try Figma out as a project management tool, as in being able to easily visualize which screens/flows have been implemented by a developer, which ones have been updated since. I believe Figma is a good tool for that as it is visual and often already used to show things to clients.

Re: Making Figma better for developers with Dev Mode

#208

Post by andruby »

jt_b wrote: post #180
emilsjolander wrote: post #17

Earlier quoted context omitted.

Emil from Figma here! We have made a ton of improvements to the generated CSS code, and while we still sometimes provide absolute positioning we now separate it from the styling & flexbox code that you might actually want to pull into your codebase. We've also introduced an API extension point so third parties can now provide their own implementation of code snippers (code generation) in Figma's Dev Mode which Anima…

An option for TailwindCSS classes would be really clean too.

Yes! Absolutely. I've been looking for best practices around Figma + Tailwind.

Re: Making Figma better for developers with Dev Mode

#209

Post by clownpepe »

eddieroger wrote: post #148
revskill wrote: post #115

Earlier quoted context omitted.

As a MacOS user, zooming on a touchpad is painful.

As a MacOS user with a Logitech Ergo mouse, I haven't figured out how to navigate at all, and have to get my external trackpad out just to move around. If anyone knows how to move around Figma with a scroll wheel, please tell me, seriously. I would be glad to be wrong. That said, the touchpad experience is at least intuitive.

Holding the space bar and just moving your mouse works best for me

Re: Making Figma better for developers with Dev Mode

#210

Post by azangru »

maigret wrote: post #202
jsncbt wrote: post #194

Hypothetically speaking, if all designers could code at the level of a Snr Front End Engineer, would Figma exist? Just pretend that magically everybody knew how to code. Wouldn't designs just be done in the browser? No longer do you have to maintain these design artifacts post handover. There would be no unrealistic designs that do not consider the constraints of a browser window. I know this is unrealistic but I oft…

I don't think so. While there are some scenarios that are better coded (where lots of different paths open up quickly, typically Excel-like), in many cases good designers are incredibly fast with Figma and I know no coder who can be that fast. Also, they spend their time analyzing the problems and have many other things to hold in their head beside coding. It would be very challenging nowadays to both be a great UX d…

> It would be very challenging nowadays to both be a great UX designer and be current with the latest CSS evolutions.

Designers are supposed to be fluent in the medium they are designing for. Without understanding what's possible, what's easy, what's hard, what squeezes and what scales, or what's going to have a negative impact on site performance, how can one be a great designer?

Post reply on HN