__examples__/symbols example not working?

[cssandstuff]

Have been trying to see how to generate an artboard which has symbols on it so referred to this example to try and get something working. Not sure if this is a Sketch version issue, but generating a sketch file from this example fails to open in Sketch. The Sketch version I'm trying to open in is Version 68 (102490).

Opening the file in sketch results in an error: 'the document could not be opened'

commenting the following line in symbols/index.js:

// page.addArtboard(symbol);

and regenerating the sketch file results in the Sketch file opening fine, but obviously the link to the symbol is broken.

just wondering which part is breaking, have been trying to reverse engineer this using Kactus to see what a correct SymbolMaster.json looks like but am still scratching my head at this stage. Wondering if others have come across this issue.

[halffullheart]

I get a different error when opening the file in Sketch 68:

That’s due to #164, which makes all generated files look like they were saved in Sketch 69 in order to support color variables.

When I try the file in a newer version of Sketch (I tried 74.1), it opened without error.

However, I did notice a strange thing which is that the symbol instance is contained by the 500x500 artboard, but it has been placed directly on top of the symbol master. If you try to move it at all, Sketch will change its parent to the symbol master, which results in a recursive symbol:

The example is doing this:

const symbolInstance = symbol.createInstance({
  name: 'test',
  frame: {
    width: 100,
    height: 100,
    x: 0,
    y: 0,
  },
});

But looking at SymbolMaster.createInstance(), it looks like passing in a frame doesn’t do anything. Instead the frame of the symbol master is used. Setting the x and y after creating the instance works better:

const symbolInstance = symbol.createInstance({
  name: 'test',
});

symbolInstance.frame.x = 0;
symbolInstance.frame.y = 0;