Hacker News Reader

Comment by mrpigeonpants | Hacker News Reader

> Designers are frustrated because the systems they built are ignored.

Designer here. My experience has been that Figma has done the opposite. It's created a lot of consistency with shared component libraries and standardized type / color styles. Also, the fact that engineers can jump into Figma and inspect CSS has been immensely helpful.

In the design world, Figma is like the equivalent of getting a robust IDE with syntax highlighting, code completion, compilation, and debugging. It's replaced multiple tools and connected people in a way that's never been possible.

View on HN

From the developer perspective I never felt the inspect CSS gets me much over the design documents that I got in the past, that included the systems definitions and rules to follow. To be honest, I prefer the latter and find a lot of the "modern", interactive tools fiddly and ineffective to use (e.g the generated css giving me a html code instead of a variable name even if its a defined design color).

That said, I never felt implementing a design once is the hard part, but keeping them maintained and in sync. What are things that worked for you in that regard? E.g. as an engineer, how do I quicky figure out what I need to adapt when a design has changed? I quickly looked at Figma, and while there is a version history, it just seems to switch completly between versions without anymore detail. So I'm bound to miss changes and completly am reliant on the designer annotating manually.

I love getting figma files as mocks for things i need to implement. I love grabbing CSS from the figma, and I love that the design system allows the designer to not only export CSS, but export it in a way that has annotations (all the colors I get from my designers are annotated with "brand red 300 weight" as a comment, so I can use the right mixin.

Furthermore, I can also, when I'm building out the first-form HTML implementation of the mock, right-click and copy-as-svg the whole component, which makes for a nice stand in while I work on the rest of the code. It is great.

In your experience, do you know if engineers implement the shared component libraries as such in the actual applications? This would be as opposed to engineers directly implementing the end result of work in Figma (Sketch, etc.) that utilizes said components. There is a big difference there, and I'm always curious to have more data points about how this actually happens at other organizations.

Anecdote: at my current org the ideal we talk about is having a component library designed in Figma by the Designers and implemented by the engineers.

In reality Design doesn't use components and most pages end up being composed of a bunch of one-off components and we waste a ton of time.

As a side effect of this, the app design isn't consistent across pages because we aren't sharing components.

Ditto, we have a quite a few designers and they mostly seem to struggle with thinking in components. They use design system like a color guide, and we keep reimplementing patterns on many pages.

Yeah that is the exact result I have observed before as well. I'm really curious to hear more examples about how this actually works out well in the end from others.

I recognize that my view of this is from the bottom up in terms of only really having worked for SV startups, but I want to learn more and see if I can't make it work a bit differently this time.

Some do, sometimes relying on things like Storybook.js to do QA in the middle. There's more and more things to maintain consistency between Figma design and e.g. React components being built.

Reply on news.ycombinator.com