question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Do nested symbols work?

See original GitHub issue

I 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:closed
  • Created 6 years ago
  • Reactions:3
  • Comments:7 (5 by maintainers)

github_iconTop GitHub Comments

9reactions
mxmulcommented, Feb 27, 2018

I could definitely look into implementing it.

2reactions
mxmulcommented, Feb 27, 2018

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:

<div data-sketch-symbol="Item/1">...</div>
<div data-sketch-symbol="Item/2">...</div>
<div data-sketch-symbol="Container">...</div>

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 the Item symbol declared above, so it can be easily swapped out for a different variant (e.g. Item/2) in Sketch.

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found