8

Design tool that can handle complex components?

almost 5 years ago from , Associate Product Design Director @ Huge

Trying to find a way to set-up a component library for a distributed team to use. I'm thinking of more complex components than the atom level basic buttons, and form fields that you can easily handle with symbols in Sketch. Group re-sizing in Sketch fails on more complete large components, and Invision Studio and DSM don't work well yet either.

Anyone have experience setting up a proper component library for a design team?

8 comments

  • Gavin McFarlandGavin McFarland, almost 5 years ago

    Figma has been by far the easiest to use for me and it's also available now. I would say the biggest feature it's missing are constraints between siblings but other than that it's a pleasure to use. I wouldn't be surprised if sibling constraints come out in the next version.

    Subform looks promising and has great support for constraints but it's still in development.

    7 points
    • Andrew Richardson, almost 5 years ago

      It takes a bit of learning but it blows my mind how much I can do with Figma's component system.

      It really is a game changer when start using grids+constraints+child components to create really complicated elements that you can manipulate every single one on a whim.

      2 points
      • Gavin McFarlandGavin McFarland, almost 5 years ago

        I know. The amazing thing about Figma is that while the components are probably the biggest most loved feature there are so many small details that without them Figma wouldn't be the app it is. The smart guides for example are a lot easier to use and once you get use to the speed of panning the canvas you find Sketch is sooo slow.

        0 points
  • Joe CJoe C, almost 5 years ago

    I'm also on the lookout for this. Right now I'm hoping Phase will fill the gap.

    I thought Atomic was the answer, but it seems you have to duplicate every component to change button labels etc.

    We ended up just building it as an actual UI library in code and going more often from wireframes > code. It's not ideal and requires a lot of back and forth, but I was wasting a lot of time messing around in design tools, rather than actually considering the interfaces I was working with.

    I think the lighbulb moment was when someone questioned a design choice I made, and my answer internally was "because I couldn't set up the symbol any other way in Sketch". The tool(s) became a hinderance to my design process. :(

    3 points
  • Artur Eldib, almost 5 years ago

    Figma bro

    2 points
  • Nicholas Richardson, almost 5 years ago

    Maybe check out Figma! They have a bit of a different take on Sketch's symbols and have a team component library.

    2 points
  • Michael WandelmaierMichael Wandelmaier, almost 5 years ago

    Awesome - thanks Gavin, Joe, Nicholas. I'll check those out. I'd love to do wires -> code design process but not quite there yet. I'll check out Figma, and am on the list for Phase (curious about that one). Thanks again!

    1 point
  • Ray SensebachRay Sensebach, almost 5 years ago

    I think Sketch has the most comprehensive symbol/component system by far at this point. Figma + Studio are nowhere near Sketch at this point IMHO.

    I'd echo the other comment mentioning code libraries as well. It's tough to beat the real thing. Pair up with a developer at your gig (if possible) and work out a re-usable code component library. Picking up Sass/css and bootstrap should be enough to get you pretty far into devving it yourself too.

    0 points