Reusable design for your workflow with Components in Figma.com
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.
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.
+1 on price
Take my money! This is amazing, great job! I feel like it's what the design community has been waiting for. Are there any plans for prototyping, or maybe allowing developers to build plugins around Figma?
You can already export from Figma to Framer directly.
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!
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.
Does that make sense?
I didn't realize there was an option for
Top & Bottomand
Left & Rightin the Constraints dropdown! For some reason, I always assumed I was limited to a single side. That's awesome, thanks for the help :)
yeah, would be nice to access those from the little UI, not sure why it doesn't let you, unless I'm missing it.
Hold shift and you can select multiple :)
Very cool. Been waiting for this :)
First thing I ran into, does it somehow support sharing components across pages/documents?
I hope this is coming too!
Not yet, but we are working on making it possible to share components across teams, to be used across documents.
Very cool. Will be waiting for that next step then. Current implementation is a brilliant first step, but without sharing it across docs, it's not useable for us yet.
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!
- 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.
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 :)
- 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.
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