How to use the sketch-constructor.Rectangle 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 amzn / sketch-constructor / __examples__ / building-from-scratch / Swatch.js View on Github external
constructor(args) {
    super({ frame: args.frame });
    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,
github telekom / telements / packages / generator-sketch / src / index.tsx View on Github external
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' }
    ],
  },
  width: 120,
  height: 36,
  x: 120,
  y: addYPos(40),
})

const textCard = new Text({
  string: "Card",
  name: "Card",
  fontSize: 16,
github telekom / telements / packages / generator-sketch / src / index.tsx View on Github external
}
})

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' }
    ],
  },
  width: 800,
  height: 60,
  x: 120,
  y: addYPos(40),
});

const textButton = new Text({
  string: "Button",
  name: "Button",
  fontSize: 16,
github telekom / telements / packages / generator-sketch / src / index.tsx View on Github external
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' }
    ],
  },
  width: 320,
  height: 400,
  x: 120,
  y: addYPos(40),
})

const artboardFrame = {
  width: 1280,
  height: addYPos(520),
  x: 0,
github telekom / telements / packages / generator-sketch / src / index.tsx View on Github external
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' }
    ],
  },
  width: 100,
  height: 2,
  x: 120,
  y: addYPos(40),
});

const textComponents = new Text({
  string: "Components:",
  name: "Components",
  fontSize: 16,

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