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

211–220 of 238 posts

Re: Making Figma better for developers with Dev Mode

#211

Post by spacebacon »

jjcm wrote: post #191
spacebacon wrote: post #182

A designer using Figma is equivalent to a developer using no code solutions. The design is compromised and potential to do something great is capped. I prefer an illustrator art board over Fisher Price my first UI apps. Wire-framing UX is best done with the freedom of a large art board to play in. Extra points if you design UI completely with vector. God mode if you build your own components.

Do you have an example of something you can’t do in Figma that you’d like to do for web design? This is a strong statement, and I get the sense that you haven’t used the tool much, but I’m curious on your take here. For context, I’m the PM who owns component creation in Figma.

Figma is “web design” exclusive. Putting yourself in the web design bucket trades creativity for utility. Design snobs that have pushed the envelope for decades (26 years for me) depend on not being in a preconceived bucket to redefine what web design actually is. Figma is great for rapid prototyping but rapid is not a priority when reinventing the web. Most big leaps in design are born from the tension of designer and medium. For example, a designer and the printing press or in our case here the healthy tension between a designer and a developer.

Re: Making Figma better for developers with Dev Mode

#212

Post by emehex »

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?

I think a good designer polls his dev team to help him figure out what’s a “big lift” and whats easy. And a good developer works with her designer to point out “big lifts” and helps find compromises!

Re: Making Figma better for developers with Dev Mode

#213

Post by firstbabylonian »

andsoitis wrote: post #184
tharkun__ wrote: post #172

Earlier quoted context omitted.

They could. They don't. It may not even be their fault. They don't know. They just change things. They live in their world. You tell them, they are sympathetic, apologize, vow to do better next time. They're in their world. They do it again. The flogging still happens. Is that broken? Yes! Does it still happen in too many companies? Yes! Is there an easy fix where you "trust but verify"? Yes! (as in, sure I trust the…

> They could. They don't. It may not even be their fault. They don't know. They just change things. They live in their world. You tell them, they are sympathetic, apologize, vow to do better next time. They're in their world. They do it again. We can use your language and persuasive skills to effect change. That change might be better collaboration. That change might be the person gets fired because it, together with…

It sounds like flogging may be a feature, not a bug, of this system.

Re: Making Figma better for developers with Dev Mode

#214

Post by roflyear »

CSMastermind wrote: post #121
roflyear wrote: post #19

Has anyone else worked with teams where their entire idea of "product" was to create 100s of designs in Figma, and then just hand them to developers? What started this mentality?

I'm curious what you'd prefer, a requirements document? Powerpoint slides? Photoshop files with a grid layer? The best designer I ever worked with did full HTML/CSS mockups but even those had to be rewritten into the development framework of choice. To me Figma is a step up from the other ways I used to get designs.

If you want a figma, I'd prefer if you worked with a dev before making it, then also worked with them after making it, to get on the same page.

Creating a design out of whole cloth and handing it over to a dev, with minimal interaction, seems lazy.

The problem isn't figma - it is how it is being used. I do think that figma is super super overkill, as if you pick a good design kit what's the point? Lots of wasted time.

I don't see the point of doing all the extra work, when in reality a wireframe works better in most cases (doesn't set you up for the "why doesn't it look like the figma" responses)

Re: Making Figma better for developers with Dev Mode

#215

Post by Vinnl »

I understand that this is attractive for Figma because it broadens their market and allows them to sell developer-specific plans, but honestly, what I need is not so much tools for myself, but for Figma to nudge my designers to make things more easily consumable by engineers. So that means nudging them to specifying a colour and font palette once and defaulting to using and re-using those, with straying from them being an exception. It means getting them to specify how different elements should flow, rather than them all being absolutely positioned at some particular X and Y coordinates. And just in general have them draw the design with tools that work more closely to the way CSS works.

I believe penpot.app is supposed to work like this, but unfortunately I haven't been able to try that yet.

Re: Making Figma better for developers with Dev Mode

#216

Post by jastuk »

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…

It's very difficult to generalize but I'll chime in with my experience as both.

If I'm working on a backend system and have a (frontend) framework in place, I might easily skip Figma IF I have enough confidence that the approach/pattern/solution is the right one. If not, or if the particular UI is quite challenging, I would usually sketch things out in Figma until I can resolve the most important questions/design challenges. I would not bother making a high-fidelity design in this case.

If I'm working on a highly visual/presentational project, then Figma is my go-to, since code would be super slow and limiting if I want to explore various approaches and ideas. Especially I wanted to be a bit more creative with the presentation. However, I would probably design less than usually needed. Also, when coding this design, I would *not* consider my own Figma project to be a pixel-perfect representation of every single value in terms of font-sizes, spacings, etc. I would use a code-oriented system/approach and make sure everything comes close to the design. Certain details would be tweaked by eye in code as well if I feel they need visual adjustments. I suppose I also intuitively know which areas need more (pixel-perfect) attention and which are flexible.

And then there's exceptions and hybrids to all of these. I may want to polish a particular backend UI piece for whatever reason (Figma-first), or I might want to prototype/create a proof of concept for a complex state management, transitions, etc. (frontend-first) before making portions or all of it pixel perfect in Figma.

Re: Making Figma better for developers with Dev Mode

#217

Post by roflyear »

butlerm wrote: post #150
roflyear wrote: post #49

Earlier quoted context omitted.

Wait, your product people talk to devs? /s (at my previous company they did not ... lol!)

In my experience, it is a serious problem when product people do not understand how their product actually works, even when treated as a black box with observable external behaviors and interfaces.

They knew how the product worked (they used the product) they just did not interact with devs - so they didn't really get the implementation. Their only opinions there were formed from leadership who was very biased with what they wanted to express.

Re: Making Figma better for developers with Dev Mode

#218

Post by chuckn0risk »

ryanSrich wrote: post #3

Seems interesting, and admittedly I might have missed this, but grabbing icons as individual SVGs is probably what takes me the longest when going from design to code. I have to click on each asset, name it properly, and then export it. Over, and over again. All from different layers, and pages. If there was some sort of asset export that obeyed some spec on how to size and file name that’d save hours and hours of wo…

This is one of the reason we built Specify (specifyapp.com) which is a Design API that helps you sync design tokens and assets from Figma to any platforms.

For instance, let's say you're a React developer. Designers set their layers as exportable in SVG, and Specify can automatically export the SVG string, optimize it with SVGO, set the end filename, and generate a JSX component for React - automatically. Here's a short video that should help you understand the whole process (https://youtu.be/Z7fX0v3KFmY?t=353).

You basically just have to configure Specify once, and every time designers update icons in Figma you'll get automated pull requests with icons transformed exactly how you want.

Re: Making Figma better for developers with Dev Mode

#219

Post by chuckn0risk »

megaman821 wrote: post #76
emilsjolander wrote: post #13

Hey all! Emil here from the Figma team that brought you Dev Mode and Figma for VS Code today! Really interested to hear what you think and also here to answer your questions. We are super excited to invest more into developers in the future, today is just the start of that!

Is there some way to export Figma's local variables to a CSS custom properties?

Hi Megan, Louis co-founder of Specify here.

This is one of the reason we built Specify (specifyapp.com) which is a Design API that helps you sync design tokens and assets from Figma to any platforms and formats.

Specify helps you get automated pull requests containing your design tokens and assets defined in Figma.

You basically just have to configure Specify once, and every time designers update colors in Figma you'll get automated pull requests with colors transformed exactly how you want.

Re: Making Figma better for developers with Dev Mode

#220

Post by reinierladan »

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.

I use this hack to turn mouse movements into scroll movements with Hammerspoon. It's one of the first things I need on a fresh install of MacOS.

https://github.com/reinier/dotfiles/blob/main/hammerspoon/er...

It let's you hold down the right click key and use your mouse to scroll any x/y direction.

Original source for this hack is offline, but Internet Archive to the rescue: https://web.archive.org/web/20200808000102/https://savouryti...

BTW I use Figma all the time, I have never any issues scrolling with this hack.

Post reply on HN