Figma 1.0 – Collaborative interface design tool | Hacker News Reader

Figma 1.0 – Collaborative interface design tool

figma.com

340 pointsbpierre58 comments

As a designer, I find it genuinely perplexing and distressing that UI design apps continue to get created that don't support automatic layouts. Dragging and nudging things around is horrendously inefficient. The one app that does this – Antetype – has been almost entirely ignored by the design community.

Here's an example: http://bendansby.com/antetype.gif

Absolutely. I can't stand precision mousing (or "pointing"). Just watching that demo makes me tense.

There will always be a place for people who want pixel perfection. I think that place is called print. Eventually, we're going to let go of the idea that we control layouts at the concrete level (as opposed to a more semantic level, i.e. describing relationships and constraints), but that future is harder to see.

I've thought about this - the existing method of designers coming up with a couple of static designs ("small" and "large" - "medium" if you're lucky) means the developer is burdened with interpreting these static designs and deriving a set of relationships and constraints between them. It seems obvious that the designer should be considering how the design responsively "breaths" at all sizes, rather than putting this on the developer. It's still design, just an added dimension that isn't present in print.

But how do you give the designer the opportunity to "sketch" but also describe relationships and constraints? You could use code, but then the designer is then also a de-facto developer. And having to consider relationships and constraints too much can lead to those considerations dictating the design, rather than the other way around.

New CSS technologies like formulas (calc) and variables (or Sass, PostCSS) will allow designers to do this without programming.

Calc is programming.

No, it's just basic maths.

And writing HTML isn't programming either, it's just markup.

To the average designer (and almost anyone else) these distinctions don't exist - if you write "code" or something that looks like math, its programming.

The line between developer and designer has been blurring for some time and will only continue to do so (hopefully! if our tools and abstractions keep becoming better). Often I find myself on the other side of what you stated, where the designer leaves me (the developer) as the de-facto designer.

And the main reason why is that the designer is only capable of thinking in their toolset, which happens to usually be photoshop. PS simply doesn't cut it dealing with the complexity of web applications in all the different form factors it needs to work on. This has lead me to believe that if you're a web designer, your medium is HTML/CSS and potentially JS. So you should understand and be fluent in it. The designer is responsible for actually building out the html templates/styling used, and the developer is responsible for bringing those to life, but each has a lot of input at every step. A lot of crossover builds better projects :)

Figma has constraint based layout though?

Automatic layout systems can constrain your thinking. Especially early on, you want to be able to tweak things and try lots of different options. Once something is in the automatic layout system, it's easier to explore the space of options the system can handle. But making even a small change outside that space is much harder.

Totally disagree. Being able to adjust flow direction, padding, etc. and then perpetuate those changes across multiple elements makes me more likely to experiment.

Also, I'm not necessarily referring to setting up complex constraints and rules, but more just not having to move a bunch of stuff around with the mouse every time I make a change.

Being able to adjust flow direction, padding, etc. and then perpetuate those changes across multiple elements makes me more likely to experiment.

That's exactly my point. It makes you more likely to experiment in that way and less likely to experiment in other ways. That's not necessarily a bad thing, but I think it's one reason why designers and design tools don't focus on automatic layout as much.

Thank you for sharing AnteType. Seems brilliantly done, and I'm downloading a trial right now.

Sketch has some plugins for constraints. In fact one of the nice things about Sketch is the plugin ecosystem to extend the features - I wonder if Figma will become extensible.

Affinity Designer [1] will offer a similar feature [2] in the next build, currently in beta [3].

[1] https://affinity.serif.com/en-gb/designer/

[2] https://vimeo.com/169816724

[3] https://affinity.serif.com/forum/index.php?/topic/22644-affi...

Antetype reminds me two tools which are based on SVG/HTML elements:

1. Macaw - http://macaw.co/

2. Google Web Designer - https://www.google.com/webdesigner/

But Antetype provides way better solution for managing padding/margins and moving elements. Thank you for sharing.

Yes and ignores the multi-device climate where the designs ultimately will live. Makes me think the pixel-perfect prototype is creating a bit of a fiction. Of course most good designers keep that in mind, but I agree that it's really disappointing that more tools aren't built to have a responsive canvas where you can play with sizing and set how the design responds. The answer I hear is to get to HTML prototypes as soon as possible, but it's not as fast to "sketch" in that medium (thus frameworks like bootstrap), so I think potential ideas are left unexplored.

That resize to mobile form factor at the end of the gif!

Made me watch it twice. I'll be checking Antetype out for that alone.

This. I always bang my head against a wall after getting new mockups from our design team. what happens for small screens ? what happens in landscape ? what happens for tablets ?

are questions they entirely ignore.

They just conceive one screen size (large smartphone) in sketch and can't be bothered to consider any edge case.

I want to like Figma but they've chosen a rather limiting way for a professional design tool, cloud-first and based on web technologies.

Surely, Figma beats Sketch for modern interface design by using retained mode rendering (although sacrificed some quality [1]) and being superior at science and engineering.

But it's such an inefficient use of resources that it will die quickly on complex projects or illustrations. Raster graphics and any processing on CPU is also a huge pain [2].

Yet it's in their power to make a proper offline app [3]. I hope they'll eventually choose this route. I also hope they won't be as greedy as Adobe.

[1] http://i.imgur.com/xWLoTWg.png

[2] https://twitter.com/evanwallace/status/673978171180474370

[3] https://twitter.com/evanwallace/status/673959396104273921

This is what "correct" rendering looks like on my screen: http://m.imgur.com/q2BtHnc

Needs to be zoomed out to 50% on retina screens. Better?

So you have to store your data in their cloud? How secure is their cloud? I'm not sure that model works for some companies. Visual prototypes can be really sensitive data, and each new proprietary cloud inevitably has bugs and security holes that need to be discovered and patched.

If you could plug in something vetted and thoroughly pen-tested like Dropbox that might work better. But a brand new cloud is almost guaranteed to have security holes, and I wonder how laser focused a design tool company can be on staying ahead of threats.

I have to hand it to Figma. They've managed to make this about as usable as possible. The issue though is that it's still in the browser, and aliasing is very difficult[1]. I eagerly await a macOS release.

1. http://i.imgur.com/C37gGox.png

https://www.figma.com/downloads

So good.

Explain? This sounds like a native wrapper on a browser. Does that solve the aliasing problem?

How about performance and battery life? I recall a blog post from the Figma team bragging about how they closed the gap to only 2X slower than a native app. [1]

[1] https://medium.com/figma-design/building-a-professional-desi...

Figma is by far the best vector tool I've used in my life. What takes me an hour in Illustrator I can do in 20 minutes with Figma. (I'm sure if you'be been using Illustrator for 20 years and have all the keyboard shortcuts memorized you'd disagree, but I'm coming from the perspective of someone who uses this type of tool once every couple of weeks.)

That is a fantastic landing page. Immediately shows what it is and how it's used without being an over-the-top display of CSS like half of all the app/service landing pages out there.

Realtime collaborative app for designers? Neat! Also glad to see that it does more than just mobile designs. I just feel bad for the designers who are going to try to use this with their non-designer customers.

Off topic, I wish I could have scrolled through the page without it causing my anxiety to flare up with the constant scroll-stuttering. This isn't a slow computer either, 24GB RAM and 3.2 GHz quad core Mac Pro.

Chrome? I'm getting the same stuttering. Works flawlessly in Safari though.

Was fluid on my iPad with safari

Is this on the "landing page" (figma.com/) or somewhere in the tool itself? We're really dedicated to performance and take this seriously.

The landing page, in Chrome.

Thanks. We'll look into it.

I really hope this gains traction. Linux users are horribly crippled because Photoshop and Sketch dont work on it.

I wish there was an open standard for layered vector/bitmap files, so it wouldn't matter what tool you use, and you could pass design source files around to people using whatever software they like.

Not an end delivery format, but a source file format.

Does SVG not provide that open standard? I'm not a graphics guru, so please put me right gently...

I believe the parent was sarcastically referring to SVG.

the problem is not the format but the tool. Sketch or Photoshop are the dominant tools today. If I'm trying to get started in design.. the first thing I have to do is get rid of Linux. SVG notwithstanding.

Linux users design faster in HTML.

Historically, collaborative design is the best kind of design. Designers love when others go into their files and "fix" their work. /s

Yes, the demo on their site just made me tense. Do other designers enjoy working together in real time like that? I haven't seen that one before.

This doesn't seem as bad as a lot of tools touting that as a benefit. Always have to cringe when I see collaborative design tools pitched where you upload your work for the whole team to start sticking their oars in as if that is ever a good workflow.

Naming is pretty poor, a super popular Japanese figure company has that name, so SEO is spotty. The main site is at 4th ranked in search from what I see, but every single other result in Google is related to the toy company.

Yeah the internet is a crowded place. "figma design" works as a search query for it. Also "figma" is pretty easy to figure out how to spell and say according to the phonological rules of English, so that's all helpful.

What search engine are you using? I see figma at #1 at https://www.google.com/search?q=figma .

Google shows me http://www.figma.jp/en/figma/

Try using an "incognito" browser window (without any state about your previous browsing history.) Google ranks results based on your search history etc.

It adjusts based on your location too, so browsing in incognito might not be sufficient.

#1 result for me in the Netherlands in Incognito is also http://www.figma.jp/en/figma/, fwiw. Though figma.com is second.

The design app "Sketch" has an even poorer name, and they have done very well for themselves. I don't know how long it took, but they are my #1 result for the Google search keyword sketch.

Also, I believe at this point in time, doesn't everyone have slightly different Google results? Google tracks users for this reason, among others: to give them more relevant search results. For instance, when I google the word figma I get this design application as my #1 result [0]. I assume your tastes and browsing habits have informed Google that you are more likely looking for action figures rather than design software.

0. https://i.imgur.com/l3SpTpl.png

"Figma is free through the end of 2016."

Wonder if they will follow the same model as Sketch.

Would be nice to know what their pricing plans are before I commit data to their product.

Built using React, Redux!

Of course there's a lot more tech used in building it - https://medium.com/figma-design/building-a-professional-desi...

I wonder how long it took to develop this tool, how many devs working on it and man hours. Any info from the developers?

Great work! This looks very sophisticated and polished. I hesitate to detract at all from their good work so I don't know why I'm even saying this, maybe just looking for commiseration, but in my career I've found that collaborating on any kind of design work is a guaranteed way to ruin it.

Reply on news.ycombinator.com