19 comments

  • Rasmus AnderssonRasmus Andersson, almost 7 years ago

    Hello. I’m a designer at Figma and worked on Components. I’ve been working on it for a while and I am excited to share it with you. Components allow you to reuse modular components across your document, which can save you time and help you iterate faster. It's pretty awesome.

    Oh, and check out this Medium article I wrote about it: https://medium.com/figma-design/components-in-figma-e7e80fcf6fd2

    Anyone can try it for free at figma.com — I’d love to hear what you think.

    13 points
  • Weston Thayer, almost 7 years ago

    Hey Rasmus, I just gave this a shot. Great work! Compared to Sketch Symbols, I really like:

    • Editing them in-context rather than on a separate artboard by default
    • Being able to override way more than just text
    • Being able to directly select the specific piece of the instance I want to override, rather than using the inspector pane

    Since Constraints go hand-in-hand with Components, I have some brief feedback:

    • For some reason, I was very confused that in order to keep a button's label horizontally centered within it, I had to set the text to be center aligned. I expected the layout bounds of the text to auto-resize, rather than be fixed. It was more confusing because the inspector pane still said that the width was auto, but I wasn't seeing the effect of it
    • I wish the button's background could auto-expand when add a longer label. It seems like if I could add more constraints (like left/right padding) this could work. Manually resizing the button is easy, but then every designer I'm working with has to know what padding to put left/right

    And I echo everyone else, pricing!

    5 points
    • Rasmus AnderssonRasmus Andersson, almost 7 years ago

      Thank you for an insightful comment.

      Addressing some of your feedback, it sounds like we need to work on making constraints a little clearer and easier to use. By default, contents of a component has "scale" constraints which can be thought of as the constraint system maintaining a percentually-equal distance from all four edges. Say you have a component that's 100x100 in size, with a rectangle inside it that sits at position 20,20 and being 60x60 wide. Now, the effective "scale" constraints will be 20% top, 20% right, 20% bottom and 20% left. An instance of that component that is sized to 200x200 px will draw the rectangle with the same distances from its edges (20%, ...), which in this example equals 40 virtual pixels (aka screen points.)

      For the button case, there's a fairly easy way for the author of the button to communicate margins — use constraints on the text label! For instance, if you want the text to always have a 20pt left margin and 10pt right margin, move the text box 20pt to the right of the edge of the component, and make it wide enough so it's 10pt away from the right edge of the component. Now, give the text box right & left, top & bottom constraints. When an instance is resized, the text will wrap to avoid drawing beyond the extremes of the text box, which means that all instances will have 20pt margin on the left and 10pt margin on the right.

      Button constraints

      Does that make sense?

      5 points
      • Weston Thayer, almost 7 years ago

        I didn't realize there was an option for Top & Bottom and Left & Right in the Constraints dropdown! For some reason, I always assumed I was limited to a single side. That's awesome, thanks for the help :)

        0 points
  • Ben S, almost 7 years ago

    Very cool. Been waiting for this :)

    First thing I ran into, does it somehow support sharing components across pages/documents?

    2 points
  • Miguel Solorio, almost 7 years ago

    Loving that components are now part of Figma! A few requests that would make this work seamless for our design team:

    • Shared components across files
    • Overriding nested components
    • Constraints that include padding (buttons)
    • Ability to insert existing components without copying/duplicating the original

    Great job so far, the product is getting closer and closer to parity with the competition!

    1 point
    • Rasmus AnderssonRasmus Andersson, almost 7 years ago (edited almost 7 years ago )
      • Shared components: We are working on this.
      • Overriding nested instances: This works today — simply select whatever part of a nested instance you want to override. You can either use the layers sidebar, hold cmd to "deep select" (or ctrl on Windows), or double-click until you get to what you want.
      • Padding: This is also possible today. See reply above
      • Would you mind elaborating a bit about what you mean with "Ability to insert existing components without copying/duplicating the original"? Thank you.
      0 points
      • Ben S, almost 7 years ago

        I think he means with "without copying etc.", that you currently can't say (like Sketch) "insert > symbols > symbol x". If you want to use a symbol now, you'll have to search through your design and find where it is used (which can be hard with overrides) and copy that one to re-use it.

        Workaround would be to keep all your masters organised on a single page, but (here we go) you can't share between documents yet :)

        0 points
      • Miguel Solorio, almost 7 years ago
        • Overriding nested instances: what I would like to do is swap a nested instance for another. For example, I have a button instance and then an icon instance that is nested. I want to be able to swap the icon, which is nested. Sketch does this well, I've yet to see if this is possible in Figma.
        • Constraints that include padding: what I would like to do is to create elements closer to native web elements. For example, a button with 20px all around, I never want a button to break that padding. If I resize an instance using your directions above, I can make it really small/narrow and it breaks the padding.
        • Inserting instances: right now, from what I can see, the only way to add an instance is to make a copy of the original instance. In Sketch, you can use the menu and say Insert > Symbol > Symbol Name. Right now in Figma I have to search the whole page to find my instances, copy the instance, and then go back to where I was at and paste the instance, which is very inefficient.
        0 points
  • Ann Sanchez, 5 years ago

    Any idea on the pricing structure for Figma? The free version ends in a couple of weeks and it is hard for me to learn a new tool if I have no idea of the cost. https://unblockedgamestop.weebly.com

    0 points