You should use Font Awesome for the icons, variants for differing content to turn on and off and auto-layout to have more control on placement, visibility and sizing of your elements. Font Awesome will give you complete control of any icon and its size, color etc. through the font panel in Figma. You can also add your own icons to Font Awesome with the paid version so you aren’t bound by using only their icons, though there is likely a nice icon ready and waiting for you for most of your needs. Font Awesome icons are extractably as SVG, PNG, PDF etc. for your developers’ specific needs as well.

I’d find this very useful as well. I love how easy it is to add and move stuff around in frames with auto layout, but I was surprised to find out that this no longer works once I’m using an instance of a component. I can detach the instance, but then I’ll have to do more manual work if I’m ever adjusting the design of the component.

It should be possible to have an instance that inherits stuff like color, corner style, padding, gutter, etc, while allowing you to move and duplicate the content that’s in it.

Anyone familiar with a way to convert this to a formal feature request?

I love figma as a developer that also does design work, but (as Anni said perfectly) it’s strange and confusing why this feature isn’t available.

The type of reusability that we’re discussing is the core concept of a “component” in UI frameworks. Is there a reason this wouldn’t be core to the design concept as well? I want to build my mocks the way I build apps–not just because I’m a dev, but because it makes more sense to me from a design perspective, as well. Constantly having to detach container components to support children breaks all inheritance, wastes a lot of time when I need to iterate the design of one of these container components, and leads to inconsistencies in my mocks if I’ve run out of design hours… 😢

This is far and away the most important feature missing from Figma, and would be a game changer if they could add it.

Definitely interested in this as well. Seems quite related to this thread, that has more support, and a rep from Figma: Fully Editable Component Instances - #52 by dfeldman

What would really help in my case would be if the inner components could be detached without detaching the whole component.

Let’s consider this example structure:

• Template (component)
  • Header (frame)
  • Content (component)
  • Footer (frame)

You’d just detach that “Content” component and modify the frame as you wish, while keeping the “Template” component in sync.

There is another way around, wondering why not to take it? You make a slot component and swap it with your custom contents. Not that convenient but still a legit way to embed a custom content without breaking down instances as you describe

Ayo!

I don’t know if there’s a way of bumping these idea threads on here but this is literally top of the list when it comes to Figmas Config goal of bringing designers and developers closer together.

Figma is promoting component-based design, yet, the designs we hand off to development are full of detached modal and list components because they lack variability.

It would be nice to be able to create a “shell” component and add a Dynamic Content section that represents child properties.

It’s hard to believe that years later, with all the developments and improvements to Figma, this CORE FEATURE still doesn’t exist. Is there some fundamental reason this wouldn’t work in Figma or are all these threads being ignored? (other threads for example: Fully Editable Component Instances - Share an idea - Figma Community Forum | Editing Variants - Share an idea - Figma Community Forum)

Commenting to keep this alive.

Related:

Repeater fire (Auto-Layout evolution)

Is anything happening with this? With the new Forum layout, I don’t see options to vote for an improvement or idea, and I see a few reference to ‘re-orderable’ components that can no longer be commented on. 

At it’s most basic, if I make a layout component, I want to be able to re-arrange the nested items. For example, a row of cards exists as a layout component, with the cards themselves as nested components. During a presentation, someone asks me to make the 2nd card a 1st card. I can’t. I have to detatch the component and move it to the right in its auto-layout. Or, worse, edit the two cards to make changes. 

You have any idea how awesome it would be, when someone asks me to reorder objects that All I have to do is select the object and hit an arrow - without detaching the component?