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

221–230 of 238 posts

Re: Making Figma better for developers with Dev Mode

#221

Post by pcurve »

riedel wrote: post #73
pcurve wrote: post #42

I ran a design team, and many really struggled with Sketch -> Figma transition, and took a long time. I welcome many of the new features. It's great for designers who are more technically oriented, though enterable input fields would be nice. I do wonder how non-technical designers are going to feel. The learning curve is definitely going higher. I'm worried about the rather pricey per / seat cost. There are far more…

> though enterable input fields would be nice. So funny you say this. I could actually not believe that you really need to use another tool like protopie on top of figma if you need that simple functionality eg. for a mock-up.

And protopie is taking full advantage of it by charging hefty premium. I do believe Figma will implement it at some point.

Re: Making Figma better for developers with Dev Mode

#222

Post by the_mar »

mejutoco wrote: post #199
the_mar wrote: post #162

Earlier quoted context omitted.

I had a brief and horrific period of my life when I had to export assets for android at the weird android resolutions. I really don't understand why there isn't a better designer>developer hand off experience. It seems like Figma is trying with the CSS stuff and the layouts, but I don't think it quite works

In figma you set the export options for different layers (say png of x resolution, and svg), and you can export them all at once. Unless I am missing something, this should solve your problem.

Thankfully in year 2023 it’s not a problem anymore since everything can be vector.

I’m talking about 2015-16 when you had to use raster images for components and figma was not even a thing.

But thank you nonetheless.

My current complaint about figma is that even if I take time to set up all the dynamic scaling and layouts I don’t think it as useful for devs as I hoped it would be in my mind. (As in I thought u can just copypaste the code snippet). But i’m not quite sure as I have not done much IC design work in years aside some odd jobs for friends and perhaps they are just shit programmers or I am not using it right.

Re: Making Figma better for developers with Dev Mode

#223

Post by coxley »

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 iteration loop is MUCH faster using tools like Figma for design.

Most places use consistent patterns for padding, space, etc. But a lot of things need adjusted visually for polish. Tweaking things in devtools is fine for quick things, but can be lost on browser refresh.

Tools like "CSS Pro" make it easier. Saving devtools state makes it easier. But neither quite compare with hitting the arrow keys a few times to see what small adjustments look like. Or dragging a card to a different spot. Or duplicating a component three times with slight variations to see them side-by-side.

I'm a developer that uses Figma occasionally. It's just less frustrating to get the "look" down before jumping into code.

Re: Making Figma better for developers with Dev Mode

#224

Post by alwaysbeconsing »

balaji1 wrote: post #186
Akronymus wrote: post #125

Earlier quoted context omitted.

We use figma quite extensively as a reference for our current project. The disgners constantly move stuff around, so the links to them, in tasks, break and point to nothing. Which is a major pain in the ass indeed. So yeah, 100% agree that the "big bulletin approach" is a negative.

Good product engineers just go with the flow - workflows with Figma is way up there, compared to without. Those folks were probably the early adopters, and they were much happier to work with designers now. Minor design details tend to change and even if they are missed out, they get caught at some point - cost of dev rework is generally manageable. Another big tool for bigger product teams has been component librari…

This is good, yes, but it requires that the team culture does not treat minor deviation from the Figma document as a bug or a failure of the developer. That mindset isn't always present, and it's not usually up to the product engineers themselves. It requires buy-in from the designers, product people, and managers.

Re: Making Figma better for developers with Dev Mode

#225

Post by alwaysbeconsing »

azangru wrote: post #210
maigret wrote: post #202

Earlier quoted context omitted.

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?

Designers should be very familiar with the standard widgets, idioms, and interactions of the platforms they're designing for, but I don't think performance is rightfully something they should have to worry about.

Re: Making Figma better for developers with Dev Mode

#226

Post by azangru »

alwaysbeconsing wrote: post #225
azangru wrote: post #210

Earlier quoted context omitted.

> 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?

Designers should be very familiar with the standard widgets, idioms, and interactions of the platforms they're designing for, but I don't think performance is rightfully something they should have to worry about.

> but I don't think performance is rightfully something they should have to worry about

But then I, as a developer, have to argue with the designer why a table containing a thousand rows or more, with no pagination, may not be a good idea :-(

Re: Making Figma better for developers with Dev Mode

#227

Post by zackmorris »

sublinear wrote: post #127
nonethewiser wrote: post #124

Earlier quoted context omitted.

> This allows me to work as a 10x or 100x developer What do you mean here? That this note taking method makes you 10 to 100 times better at your job? I do something very similar except different files. But unstructured and rely on search to find things. Optimizes for writing. But this one trick makes you a 100x developer?

I think they mean 100x better than they'd be without it, not 100x better than a "1x developer" (whatever that means anyway).

Ya sorry, poor wording on my part. What I meant was, if I use every trick in my arsenal, I can effectively go around a problem entirely and maybe reach 100x faster than when I was a fresh grad writing my own data structures by hand. Lately I've been dragging so badly though that I'm probably at 10% or even 1% productivity, negating my experience and putting me on par with my original inexperienced self, albeit with reduced effort.

Edit: my actual point was that if a person works along their natural tendencies, they'll probably be faster than if they have to fight their instincts (and take time to organize in this case), mainly because they might fall out of the zone

Re: Making Figma better for developers with Dev Mode

#228

Post by powersjcb »

tharkun__ wrote: post #143
Akronymus wrote: post #125

Earlier quoted context omitted.

We use figma quite extensively as a reference for our current project. The disgners constantly move stuff around, so the links to them, in tasks, break and point to nothing. Which is a major pain in the ass indeed. So yeah, 100% agree that the "big bulletin approach" is a negative.

I've completely reneged on linking to figma in individual tasks. I take screenshots of the state of figma at the time we all agreed that "this is it" (or close enough to what we'll implement). Sure I'll leave a link in the epic to the figma "bulletin board" for that feature so that people can find it and look around. But that's it. We're also never gonna implement exactly what's shown in figma (or said screenshots) e…

Yep, this is a problem that people have been working on in the Mechanical Drafting world for well over a hundred years.

I'm also surprised we don't see the utilization of some GD&T style language to specify design intent. (https://www.gdandtbasics.com/gdt-symbols/)

For the problem of:

"I have a design I would like produced. Please make it like this please."

I couldn't imagine giving a machinist or welder a drawing containing no annotations. (This would be something an intern does once and the shop calls them up to tell ask them questions about what they actually need for 45min. Probably sending them back to rework it)

Pulling from the mechanical world:

  * make 3d models (equivalent to HTML/CSS components)
  * put 3d models into an assembly (HTML components together on the page)
  * make variations of the assembly to show range of motion (variations on user activity)
  * make "drawings" that contain components that are broken down to the smallest practical level (this would map to: modal, tables)
    ** in software these are usually managed similarly to Spreadsheet tabs
    ** this would contain a reference to the 3d parts + dimensional annotations. This means updating the assembly/part geometry automatically updates the drawing
  * anytime significant changes are made, issue new "Revisions" of those "drawings" are committed, issued, and then sent to the shop
  * 3d modeling software has change management systems so you'll automatically know if your proposed changes to a 3d part will break a drawing or assembly that depends on it

Re: Making Figma better for developers with Dev Mode

#229

Post by uxamanda »

Destiner wrote: post #74
uxamanda wrote: post #21

Earlier quoted context omitted.

Right Click the icon > Copy/Paste as > Copy as SVG We use that and just paste it into the codebase. I've also used a bulk export plugin that autonames things. Would have to lookup the plugin name if you're interested.

Or even better, cmd + /, type “svg”, press enter, done

I've used this menu about 5 times since yesterday, thanks again :)

Re: Making Figma better for developers with Dev Mode

#230

Post by luyuanxin1995 »

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.

Hello,

We developed an open source plugin that let you go from Figma to tailwindcss + react. Feel free to check it out

https://www.figma.com/community/plugin/1178847414663679049/B...

Post reply on HN