How to use the sketch-constructor.Text 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 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: {
github phodal / design / adapter / visual / sketch / index.js View on Github external
libraryPresets.forEach((preset, i) => {
        var text = new Text({
            string: preset.key + "  FontSize  " + preset.value,
            name: preset.key,
            fontSize: parseInt(preset.value.replace("px", "")),
            color: '#000',
            frame: {
                x: 0,
                y: 40 * i,
            },
        });

        artboard.addLayer(text);
        text = null;
    });
}
github telekom / telements / packages / generator-sketch / src / index.tsx View on Github external
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: {
    x: 120,
    y: addYPos(40),
  }
});

const rectangleDivider = new Rectangle({
  name: "divider",
  style: {
    fills: [
      { color: '#dfdfdf' }
    ],
github telekom / telements / packages / generator-sketch / src / index.tsx View on Github external
});

const rectangleButton = new Rectangle({
  name: "Button Background",
  style: {
    fills: [
      { color: '#ddd' }
    ],
  },
  width: 120,
  height: 36,
  x: 120,
  y: addYPos(40),
})

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

const rectangleCard = new Rectangle({
  name: "Card Background",
  style: {
    fills: [
      { color: '#ddd' }

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