↵

Components in Figma

almost 7 years ago from Rasmus Andersson, Design at Figma

  • 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