I wrote this post on the work I did at Figma developing "vector networks," Figma's replacement for paths. I would be interested to hear what you think, and I'm also happy to answer any questions.
I think it's really great to see people pushing design tools in new directions. So many recent advances in design tools have been minor - just reduced UIs or slightly more powerful iterations of the same old features. It's refreshing to see a completely new take, especially with a solid implementation.
Good work guys, keep it coming.
Thanks! A big part of what drove me to start Figma was the opportunity to rethink how things work and to experiment with new ideas. There's lots more coming too, don't worry :)
Wow, this is very cool. Looking at the example GIFs, I suddenly feel that this is the way we should have been interacting with paths all along. Can you say "killer feature"?! ... but Figma has so many killer features that it's nearly becoming the holy grail of design tools.
I'll be really interested to test it out when I finally make it into the beta, but until then I have a tangential question about hotkeys. Well-thought out hotkeys are obviously a really important part of designing an efficient design tool, but since Figma is web-based, there will naturally be conflicts between browser shortcuts and Figma ones. What are you doing at Figma to mitigate this problem?
This is awesome work.
I love seeing the user experiences/needs driving the tool. Thats the way that feels natural and thus it makes the tool so much easier to use.
Looks very promising! I have been working with 3D tools like Rhino and Solid Works back in the day and I've felt 2D vector tools have a long way to go with these corner stone features. One thing I'm still missing from SW is the ability to make paths dependent on each other. Keeping an angle, orientation or distance (in % or fixed) is immensely useful. Consider looking into that, and you have a fan.
Hi Evan, any chance to get an invite? I would love to test Figma. I have registered yesterday.
Cool idea. I assume it’s similar to the SVG path move command. I see some benefits, but there’s some downsides, too.
Wouldn't this mean there’s no shape inside and outside, limiting strokes to only be centred? And if strokes are centred, and if the points are pixel boundary snapped then even width strokes will be blurry due to half pixels.
What happens with fills on vector networks? The same as SVG paths with the move command?
Looks good, but how this is presented rubs me up the wrong way. Both Illustrator, Affinity Designer and presumably other tools have this feature. It’s great Figma has it, but it is not new.
Here’s Affinity Designer’s path bending.
Again, I'm not sure why you’d present this as new. Other tools do both. Other tools have the option of non-zero and even-odd rule. Here’s Illustrator option for it.
In practice, I haven’t seen non-zero vs even-odd catch too many people out (especially if good boolean tools are on offer).
Reinventing something as fundamental as paths was hard.
“Reinventing” seems like a stronger word than should be used in this case. I don’t want to seem overly negative — there’s good work being done. But, I’m just not sure why all these things were presented as brand new ideas?
I hear you Marc. Having used tools like Illustrator for years and Sketch for about a year and a half, I think what Figma has done is made the experience of working with vectors much more intuitive and approachable for users.
I didn't know about these features in Illustrator and the way Figma works is seamless and easy. For lack of a better phrase "it just works". That's why they are saying that have reinvented it. Maybe that's overkill but the experience of using it is truly original and groundbreaker from a user's point of view.
I was hoping you show up in the thread! You have a point, not all is new, but the ability to attach more than 2 lines to a single point is the killer here. But I sense a bit of defensiveness in your post which reinforces my feeling that what these guys are up to is big. Anyways, I can't wait to see what Skala has to offer. Truly exciting times ahead!
But I sense a bit of defensiveness in your post which reinforces my feeling that what these guys are up to is big.
None at all. Just annoyed to see old things presented as new inventions.
But be fair, even if it IS there, no one outside Adobe's (and other vectors tools) product team has the slightest idea what "use non-zero winding fill rule" means or how it works.
I should have been more clear: Illustrator uses the the non-zero fill rule as default, just like Figma (meaning self-intersecting paths are filled). Photoshop doesn't use path direction for boolean operations — each path has an explicit boolean state.
There's a little more to Figma in terms of the Filling capacity. The node nature of vertices in a vector network allow for arbitrary region inclusion or exclusion. Any region defined by more than 3 points can be included in the fill and stroke behavior.
In the above example I've toggled the stroke setting as labeled. It's a little odd especially how when Outside stroke is selected what happens to the fill. However I think with enough intentionality while designing (and some tweaks to behavior), the tools allows for some amazing capacities.
It’ll definitely be interesting to see if that translates to real world benefits when designing.
Being a former W3C Member having worked on the first SVG-Spec and taken that Macromedia Freehand was the first one that had this features (that's why we copied it in Gravit as we liked it so much), calling a concept called "Compound Pathes" something like "Reinventing" is quite incorrect and more buzzing than anything else. Oh and of course, the bending tool which Freehand (and thus Gravit ;)) also have...
I agree. Re-inventing is a very strong term. Even when you consider that doing this on the web vs doing it on a native software. This is not new on the web either. In fact, even we have options like this in Gravit and we had it for a long time. There are other vector based tools on the web that can also do similar things. As for even/odd and non-zero fill mode, another feature we've had for some time. Here's a screencast of it in action: http://quick.as/zpBaCXm3x
Nothing has been reinvented here, agreed. Still, 2D software manufacturers (Adobe being #1 offender) need a solid kick in the nuts for not improving decades-old tools. Here are Figma's 'inventions' done in SketchUp: https://youtu.be/ejIIvrQk2tw
This looks awesome, congrats Evan, really cool.
I learned vector design by using Flash way back, around 2002. Since then, I've found that all other programs are pretty janky when it comes to managing vector artwork - Illustrator especially, which I've always found totally frustrating - and I always wished it was more intuitive the way Flash/Animate did/does it. This seems like an interesting step in that direction.
This thing responds to my most primitive depictions about how the pen tool would work before I trained myself for Illustrator
The only sad thing about Figma is that it's an online tool instead of a dedicated app.
It's performance in the browser is far better than Sketch. Honestly, why is a browser-based tool bad when it works better and faster.
They definitely should have an "offline" mode, but other than that there is no reason for a "native" app.
I like to own and not subscribe to software. Figma definitely is great software.
True that. I hear you.
Is it patented?