Do nested symbols work?
See original GitHub issueI am trying to create nested symbols but html-sketchapp-cli is instead creating a separate symbol for the containing element. For example, assume this is the generated output:
<div data-sketch-symbol="Container">
<div data-sketch-symbol="Item/Red">A</div>
<div data-sketch-symbol="Item/blue">B</div>
<div data-sketch-symbol="Item/Green">C</div>
<div data-sketch-symbol="Item/Brown">D</div>
<div data-sketch-symbol="item/Cornflowerblue">E</div>
</div>
The current behaviour creates a separate Container
symbol without the Item
symbols nested within it. Is there a separate prop for the same that is undocumented?
Issue Analytics
- State:
- Created 6 years ago
- Reactions:3
- Comments:7 (5 by maintainers)
Top Results From Across the Web
Nested Symbols - Learn Sketch - Design+Code
Nested Symbols can be overridden, along with images and text in a Symbol's instance. You can swap any symbols as long as they...
Read more >Nested symbols: Evolving reusability and maintainability in ...
Now you can nest symbols within other symbols to build and maintain complex layouts more easily and efficiently.
Read more >How to Create Nested Symbols in Sketch - Toptal
To create a nested symbol we will use the color and the icon symbols we created in steps one and two. Start by...
Read more >Nested Button Symbols: The Complete Guide - Prototypr
Using Nested Symbols in Sketch is powerful because it gives you the ability to manage your symbols across an indefinite number of artboards...
Read more >Creating nested Symbols - Sketch
You can create nested Symbols by inserting a Symbol instance inside a different Symbol Source. To do this, go to your Symbols page...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
I could definitely look into implementing it.
This is a limitation that I’ve run up against as well. We have items in our styleguide that are composed of other styleguide components, and would like the generated Sketch symbols to retain that nested relationship.
The page that we run html-sketchapp-cli on looks something like this:
where the “Container” symbol in Sketch contains a copy of the markup of
Item/1
, and there is no reference to the shared component/symbol. Somehow, I’d like to be able to tell html-sketchapp that this is actually an instance of theItem
symbol declared above, so it can be easily swapped out for a different variant (e.g.Item/2
) in Sketch.