How to use the sketch-constructor.Artboard function in sketch-constructor

To help you get started, we’ve selected a few sketch-constructor examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github phodal / design / adapter / visual / sketch / index.js View on Github external
function buildLibrary(designInfo, newSketch) {
    const libraryPage = new Page({
        name: "Library"
    });

    var offset = 20;
    var lastX = 20;
    for (const library of designInfo.libraries) {
        const artboard = new Artboard({
            name: library.libraryName
        });

        switch (library.libraryName) {
            case "Color":
                buildColorLibrary(library.libraryPresets, newSketch, artboard);
                break;
            case "FontSize":
                buildFontSizeLibrary(library.libraryPresets, newSketch, artboard);
                break;
            default:
                break;
        }

        artboard.frame.x = lastX;
        lastX = lastX + artboard.frame.width + offset;
github phodal / design / adapter / visual / sketch / index.js View on Github external
function buildFlows(designInfo, newSketch) {
    for (const flow of designInfo.flows) {
        const page = new Page({
            name: flow.flowName
        });

        if (flow.interactions == null) {
            continue;
        }

        var index = 1;
        for (const interaction of flow.interactions) {
            let seeComponentName = interaction.see.componentName.replace(/\"/g, "");
            let seeComponentData = interaction.see.data.replace(/\"/g, "");
            const artboard = new Artboard({
                name: seeComponentData + seeComponentName,
                frame: {
                    width: '320px',
                    height: '480px',
                    x: 360 * index + 'px'
                },
            });

            page.addArtboard(artboard);
            index++;

            reactIndex = 0;
            let lastFrame = {
                x: 0,
                y: 0
            };
github telekom / telements / packages / generator-sketch / src / index.tsx View on Github external
],
  },
  width: 320,
  height: 400,
  x: 120,
  y: addYPos(40),
})

const artboardFrame = {
  width: 1280,
  height: addYPos(520),
  x: 0,
  y: 0
}

const artboard = new Artboard({
  name: 'Telements',
  layers: [
    textVersion,
    textTelements,
    textGeneratedFile,
    rectangleDivider,
    textComponents,
    textAlert,
    rectangleAlertBackground,
    textButton,
    rectangleButton,
    textCard,
    rectangleCard,
  ],
  frame: artboardFrame,
});
github phodal / design / adapter / visual / sketch / index.js View on Github external
x: 360 * index + 'px'
                },
            });

            page.addArtboard(artboard);
            index++;

            reactIndex = 0;
            let lastFrame = {
                x: 0,
                y: 0
            };
            for (const react of interaction.react) {
                let componentName = react.reactComponentName.replace(/\"/g, "");
                let componentData = react.reactComponentData.replace(/\"/g, "");
                const artboard1 = new Artboard({
                    name: componentData + componentName,
                    frame: {
                        width: '320px',
                        height: '480px',
                        x: 360 * index + 'px',
                        y: lastFrame.y + reactIndex * 20 + 'px'
                    },
                });
                lastFrame = {
                    y: artboard1.frame.height
                };

                if (components[componentName]) {
                    if (components[componentName].width) {
                        artboard1.frame.width = components[componentName].width
                    }

sketch-constructor

Read/write/manipulate Sketch files in Node without Sketch plugins!

Apache-2.0
Latest version published 3 years ago

Package Health Score

54 / 100
Full package analysis