How to use sketch-constructor - 10 common examples

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
                    }
github telekom / telements / packages / generator-sketch / src / index.tsx View on Github external
});

const rectangleDivider = new Rectangle({
  name: "divider",
  style: {
    fills: [
      { color: '#dfdfdf' }
    ],
  },
  width: 100,
  height: 2,
  x: 120,
  y: addYPos(40),
});

const textComponents = new Text({
  string: "Components:",
  name: "Components",
  fontSize: 16,
  color: "#777",
  frame: {
    height: 20,
    x: 120,
    y: addYPos(40),
  }
})

const textAlert = new Text({
  string: "Alert",
  name: "Alert",
  fontSize: 16,
  color: "#777",
github telekom / telements / packages / generator-sketch / src / index.tsx View on Github external
});

const rectangleAlertBackground = new Rectangle({
  name: "Alert Background",
  style: {
    fills: [
      { color: '#ddd' }
    ],
  },
  width: 800,
  height: 60,
  x: 120,
  y: addYPos(40),
});

const textButton = new Text({
  string: "Button",
  name: "Button",
  fontSize: 16,
  color: "#777",
  frame: {
    height: 20,
    x: 120,
    y: addYPos(100),
  }
});

const rectangleButton = new Rectangle({
  name: "Button Background",
  style: {
    fills: [
      { color: '#ddd' }
github telekom / telements / packages / generator-sketch / src / index.tsx View on Github external
y: addYPos(40),
});

const textComponents = new Text({
  string: "Components:",
  name: "Components",
  fontSize: 16,
  color: "#777",
  frame: {
    height: 20,
    x: 120,
    y: addYPos(40),
  }
})

const textAlert = new Text({
  string: "Alert",
  name: "Alert",
  fontSize: 16,
  color: "#777",
  frame: {
    height: 20,
    x: 120,
    y: addYPos(40),
  }
});

const rectangleAlertBackground = new Rectangle({
  name: "Alert Background",
  style: {
    fills: [
      { color: '#ddd' }
github telekom / telements / packages / generator-sketch / src / index.tsx View on Github external
const addYPos = (value: number = 0) => {
  return yPos = yPos + value;
}

const textVersion = new Text({
  string: `Version: ${pkg.version}`,
  name: `Version: ${pkg.version}`,
  fontSize: 16,
  color: "#777",
  frame: {
    x: 1058,
    y: 120,
  }
});

const textTelements = new Text({
  string: "Telements",
  name: "Telements",
  fontSize: 24,
  color: "#333",
  frame: {
    x: 120,
    y: addYPos(120),
  }
});

const textGeneratedFile = new Text({
  string: "Generated file",
  name: "Generated file",
  fontSize: 16,
  color: "#777",
  frame: {
github amzn / sketch-constructor / __examples__ / building-from-scratch / Swatch.js View on Github external
const swatchColor = new Rectangle({
      width: 200,
      height: 100,
      x: 0,
      y: 0,
      name: args.value,
      style: {
        fills: [
          {
            color: args.value,
          },
        ],
      },
    });

    const swatchLabel = new Text({
      string: args.label,
      name: args.label,
      fontSize: 24,
      color: '#ccc',
      frame: {
        width: 200,
        height: 50,
        x: 0,
        y: 120,
      },
    });

    Object.assign(this, {
      layers: [swatchColor, swatchLabel],
      name: args.label,
    });
github telekom / telements / packages / generator-sketch / src / index.tsx View on Github external
const pkg = JSON.parse(fs.readFileSync('./package.json', 'utf8'));
const buildFolder = './build';

const newSketch = new Sketch({});
const pageWelcome = new Page({
  name: 'Welcome'
});

let yPos = 0;

const addYPos = (value: number = 0) => {
  return yPos = yPos + value;
}

const textVersion = new Text({
  string: `Version: ${pkg.version}`,
  name: `Version: ${pkg.version}`,
  fontSize: 16,
  color: "#777",
  frame: {
    x: 1058,
    y: 120,
  }
});

const textTelements = new Text({
  string: "Telements",
  name: "Telements",
  fontSize: 24,
  color: "#333",
  frame: {

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