code-connect icon indicating copy to clipboard operation
code-connect copied to clipboard

Can you target "Text" layers as "children"?

Open l-campbell opened this issue 1 year ago • 7 comments
trafficstars

Question

I have a Figma component that uses a "Text" layer instead of a property. With code connect, is there a way to target this layer to map to a coded component prop? In my scenario, I'm trying to map this to the label prop in the coded component. I've tried using figma. children() with the name of the layer with no success, I know this isn't the intended here.

Context

Layers

All the nested layers in this tree are either row or column layouts.

Screenshot 2024-04-23 at 04 31 19

Render

Screenshot 2024-04-23 at 04 32 11

Info

Screenshot 2024-04-23 at 04 32 21

Code connect

Screenshot 2024-04-23 at 04 38 05

l-campbell avatar Apr 23 '24 09:04 l-campbell

Hi @l-campbell, right now we don't support this I'm afraid, but it's on our roadmap as we know some design system do use overrides like this instead of props. I'll keep this issue open so we can update you on progress.

tomduncalf-figma avatar Apr 23 '24 10:04 tomduncalf-figma

Thanks @tomduncalf-figma!

l-campbell avatar Apr 23 '24 11:04 l-campbell

Just chiming in here to say that our design team also uses a similar approach in some components, so it's great to hear it will be supported 🎉

mryechkin avatar Apr 23 '24 18:04 mryechkin

+1 for needing this functionality Screenshot 2024-05-24 at 8 42 49 AM

alisonjoseph avatar May 10 '24 13:05 alisonjoseph

Confirmed this works for my above example with Tabs. 🙌

However I'm struggling to get the value for an example that has the text layer nested more deeply. Any solution for this without updating the actual Figma component itself? Screenshot 2024-06-18 at 1 36 22 PM

alisonjoseph avatar Jun 18 '24 18:06 alisonjoseph

Hey @alisonjoseph, happy to hear it's working for you. You should be able to reference this nested layer using figma.nestedProps, something like:

nested: figma.nestedProps("_Number input base", {
  text: figma.textContent("Text")
})

which would then be available as props.nested.text

tomduncalf-figma avatar Jun 19 '24 11:06 tomduncalf-figma

@tomduncalf-figma Nested property support is 🔥 worked perfectly, thanks!

alisonjoseph avatar Jun 19 '24 12:06 alisonjoseph