├── .appcast.xml
├── .gitignore
├── README.md
├── assets
├── gh-social.png
└── icon.png
├── development.md
├── package-lock.json
├── package.json
├── sketch-assets
├── hero-image.jpg
├── icons.ai
└── icons.sketch
├── src
├── build-table.js
└── manifest.json
├── table-builder_demo.csv
└── table-builder_demo.sketch
/.appcast.xml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | -
5 |
6 |
7 | -
8 |
9 |
10 | -
11 |
12 |
13 | -
14 |
15 |
16 | -
17 |
18 |
19 | -
20 |
21 |
22 |
23 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules
3 | *.sketchplugin
4 | *.code-workspace
5 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Sketch Table Builder
2 |
3 | 
4 |
5 | Sketch Table Builder (STB) is a very simple plugin that helps you generate tables from a single symbol and a CSV of data.
6 |
7 | For each entry in the CSV, STB duplicates your original "cell" symbol, positions it in a grid and assigns the entry data from the CSV to the first text override it finds.
8 |
9 | From there you can quite easily batch replace the first row with a different symbol for table headers, or group colums/rows to help modify sizing/layout.
10 |
11 | ## Installation
12 |
13 | 1. Download the latest version from the [releases](https://github.com/EricKramp/sketch-table-builder/releases) page.
14 | 1. Double-click to install in sketch
15 |
16 | ## Plugin Usage
17 |
18 | 1. Select the symbol you want to use as your table "cell"
19 | 1. Run "Build Table" from the plugins menu
20 | 1. Select the CSV that has the data you would like to fill your table with
21 | 1. Viola!
22 |
23 | ## Development Guide
24 |
25 | _This plugin was created using `skpm`. For a detailed explanation on how things work, checkout the [Development Readme](development.md)._
26 |
--------------------------------------------------------------------------------
/assets/gh-social.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/EricKramp/sketch-table-builder/f13aadae79d7ce9b9041c587db3d9eb26933b978/assets/gh-social.png
--------------------------------------------------------------------------------
/assets/icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/EricKramp/sketch-table-builder/f13aadae79d7ce9b9041c587db3d9eb26933b978/assets/icon.png
--------------------------------------------------------------------------------
/development.md:
--------------------------------------------------------------------------------
1 | # Sketch Table Builder
2 |
3 | ## Installation
4 |
5 | 1. Download the latest version from the [releases](https://github.com/EricKramp/sketch-table-builder/releases) page.
6 | 1. Double-click to install in sketch
7 |
8 | ## Plugin Usage
9 |
10 | 1. Select the symbol you want to use as your table "cell"
11 | 1. Run "Build Table" from the plugins menu
12 | 1. Select the CSV that has the data you would like to fill your table
13 | 1. Viola!
14 |
15 | ## Development Guide
16 |
17 | _This plugin was created using `skpm`. For a detailed explanation on how things work, checkout the [skpm Readme](https://github.com/skpm/skpm/blob/master/README.md)._
18 |
19 | ### Usage
20 |
21 | Install the dependencies
22 |
23 | ```bash
24 | npm install
25 | ```
26 |
27 | Once the installation is done, you can run some commands inside the project folder:
28 |
29 | ```bash
30 | npm run build
31 | ```
32 |
33 | To watch for changes:
34 |
35 | ```bash
36 | npm run watch
37 | ```
38 |
39 | Additionally, if you wish to run the plugin every time it is built:
40 |
41 | ```bash
42 | npm run start
43 | ```
44 |
45 | ### Custom Configuration
46 |
47 | #### Babel
48 |
49 | To customize Babel, you have two options:
50 |
51 | - You may create a [`.babelrc`](https://babeljs.io/docs/usage/babelrc) file in your project's root directory. Any settings you define here will overwrite matching config-keys within skpm preset. For example, if you pass a "presets" object, it will replace & reset all Babel presets that skpm defaults to.
52 |
53 | - If you'd like to modify or add to the existing Babel config, you must use a `webpack.skpm.config.js` file. Visit the [Webpack](#webpack) section for more info.
54 |
55 | #### Webpack
56 |
57 | To customize webpack create `webpack.skpm.config.js` file which exports function that will change webpack's config.
58 |
59 | ```js
60 | /**
61 | * Function that mutates original webpack config.
62 | * Supports asynchronous changes when promise is returned.
63 | *
64 | * @param {object} config - original webpack config.
65 | * @param {boolean} isPluginCommand - whether the config is for a plugin command or a resource
66 | **/
67 | module.exports = function(config, isPluginCommand) {
68 | /** you can change config here **/
69 | }
70 | ```
71 |
72 | ### Debugging
73 |
74 | To view the output of your `console.log`, you have a few different options:
75 |
76 | - Use the [`sketch-dev-tools`](https://github.com/skpm/sketch-dev-tools)
77 | - Run `skpm log` in your Terminal, with the optional `-f` argument (`skpm log -f`) which causes `skpm log` to not stop when the end of logs is reached, but rather to wait for additional data to be appended to the input
78 |
79 | ### Publishing your plugin
80 |
81 | ```bash
82 | skpm publish
83 | ```
84 |
85 | (where `bump` can be `patch`, `minor` or `major`)
86 |
87 | `skpm publish` will create a new release on your GitHub repository and create an appcast file in order for Sketch users to be notified of the update.
88 |
89 | You will need to specify a `repository` in the `package.json`:
90 |
91 | ```diff
92 | ...
93 | + "repository" : {
94 | + "type": "git",
95 | + "url": "git+https://github.com/ORG/NAME.git"
96 | + }
97 | ...
98 | ```
99 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "sketch-table-builder",
3 | "description": "Quickly and easily use a single symbol and a CSV to create a data table.",
4 | "version": "0.1.7",
5 | "engines": {
6 | "sketch": ">=49.0"
7 | },
8 | "skpm": {
9 | "name": "sketch-table-builder",
10 | "manifest": "src/manifest.json",
11 | "main": "sketch-table-builder.sketchplugin",
12 | "assets": [
13 | "assets/**/*"
14 | ],
15 | "sketch-assets-file": "sketch-assets/icons.sketch"
16 | },
17 | "scripts": {
18 | "build": "skpm-build",
19 | "watch": "skpm-build --watch",
20 | "start": "skpm-build --watch --run",
21 | "postinstall": "npm run build && skpm-link"
22 | },
23 | "devDependencies": {
24 | "@skpm/builder": "^0.7.0"
25 | },
26 | "author": "Eric Kramp ",
27 | "repository": {
28 | "type": "git",
29 | "url": "git@github.com:EricKramp/sketch-table-builder.git"
30 | },
31 | "dependencies": {
32 | "@skpm/dialog": "^0.2.6",
33 | "@skpm/fs": "^0.2.5",
34 | "papaparse": "^5.0.0"
35 | }
36 | }
37 |
--------------------------------------------------------------------------------
/sketch-assets/hero-image.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/EricKramp/sketch-table-builder/f13aadae79d7ce9b9041c587db3d9eb26933b978/sketch-assets/hero-image.jpg
--------------------------------------------------------------------------------
/sketch-assets/icons.ai:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/EricKramp/sketch-table-builder/f13aadae79d7ce9b9041c587db3d9eb26933b978/sketch-assets/icons.ai
--------------------------------------------------------------------------------
/sketch-assets/icons.sketch:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/EricKramp/sketch-table-builder/f13aadae79d7ce9b9041c587db3d9eb26933b978/sketch-assets/icons.sketch
--------------------------------------------------------------------------------
/src/build-table.js:
--------------------------------------------------------------------------------
1 | import sketch from "sketch";
2 | // documentation: https://developer.sketchapp.com/reference/api/
3 | import Papa from "papaparse";
4 | // documentation: https://www.npmjs.com/package/papaparse
5 | import dialog from "@skpm/dialog";
6 | // documentation: https://github.com/skpm/dialog
7 | const fs = require("@skpm/fs");
8 | // documentation: https://www.npmjs.com/package/@skpm/fs
9 |
10 | var document = sketch.getSelectedDocument();
11 |
12 | var selectedLayers = document.selectedLayers;
13 | var selectedCount = selectedLayers.length;
14 |
15 | var csvData;
16 |
17 | // var symbols = document.getSymbols();
18 | // var typeSymbols = {};
19 |
20 | // // load all the symbols up into an object for easy reference
21 | // // TODO need handling for duplicate symbol names generally, but not today
22 | // symbols.forEach(symbol => {
23 | // typeSymbols[symbol.name] = {
24 | // symbolId: symbol.symbolId
25 | // };
26 | // console.log("found symbol: " + symbol.name);
27 | // });
28 |
29 | console.log("pre file read");
30 |
31 | /*
32 |
33 | TODO
34 | - match column name to override name
35 | - fix plugin losing document context on sketch blur event
36 |
37 | */
38 |
39 | function loadCSV() {
40 | var fileCnts = fs.readFileSync(
41 | dialog.showOpenDialog({
42 | message: "Select Source CSV",
43 | properties: ["openFile"]
44 | })[0],
45 | "utf8"
46 | );
47 | // console.log("fileCnts: " + fileCnts);
48 |
49 | Papa.parse(fileCnts, {
50 | header: false,
51 | complete: function(results) {
52 | csvData = results.data;
53 | console.log("finished parse! : " + csvData);
54 | createTable();
55 | }
56 | });
57 | }
58 |
59 | function createTable() {
60 | // loop through CSV
61 | for (var row = 0; row < csvData.length; row++) {
62 | // console.log("row: " + row);
63 | for (var col = 0; col < csvData[row].length; col++) {
64 | // console.log(csvData[row][col]);
65 | var label = csvData[row][col]; // change text label
66 |
67 | selectedLayers.forEach(function(layer) {
68 | // if we're not on the very first cell, then duplicate the first cell to create a new one
69 | var newLayer = row === 0 && col === 0 ? layer : layer.duplicate();
70 |
71 | newLayer.frame.x += newLayer.frame.width * col;
72 | newLayer.frame.y += newLayer.frame.height * row;
73 |
74 | // sketch 94 introduces totally different overrides interaction
75 | if (sketch.version.sketch > 94) {
76 | newLayer.overrides.forEach(overrideable => {
77 | if (overrideable.property === "stringValue") {
78 | // console.log("OVERRIDE");
79 | overrideable.value = label;
80 | }
81 | });
82 | } else {
83 | // set the title value
84 | if (sketch.version.sketch > 90) {
85 | newLayer.sketchObject.ensureDetachHasUpdated(); // This is a workaround for a bug in Sketch 91
86 | }
87 | // console.log("old sketch override");
88 | newLayer.setOverrideValue(newLayer.overrides[0], label);
89 | }
90 |
91 | // set the newLayer name which sets the export file name
92 | newLayer.name = label;
93 | });
94 | }
95 | }
96 |
97 | sketch.UI.message("Finished Building Table");
98 | }
99 |
100 | export default function() {
101 | sketch.UI.message("Running…");
102 | if (selectedCount === 0) {
103 | sketch.UI.alert("Error", "⛔️ No Layers are selected");
104 | } else {
105 | loadCSV();
106 | }
107 | }
108 |
--------------------------------------------------------------------------------
/src/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://raw.githubusercontent.com/BohemianCoding/SketchAPI/develop/docs/sketch-plugin-manifest-schema.json",
3 | "icon": "icon.png",
4 | "homepage": "https://github.com/EricKramp/sketch-table-builder",
5 | "version": "0.1.7",
6 | "scope": "document",
7 | "commands": [
8 | {
9 | "name": "Build Table",
10 | "identifier": "table-builder.build-identifier",
11 | "script": "./build-table.js"
12 | }
13 | ],
14 | "menu": {
15 | "title": "Table Builder",
16 | "isRoot": true,
17 | "items": [
18 | "table-builder.build-identifier"
19 | ]
20 | }
21 | }
22 |
--------------------------------------------------------------------------------
/table-builder_demo.csv:
--------------------------------------------------------------------------------
1 | Name,Kingdom,Phylum,Class,Order,Family
2 | Spotted Hyena,Animalia,Chordata,Mammalia,Carnivora,Hyaenidae
3 | Woolly mammoth,Animalia,Chordata,Mammalia,Proboscidea,Elephantidae
4 | Nine-banded armadillo,Animalia,Chordata,Mammalia,Cingulata,Dasypodidae
5 | Donkey,Animalia,Chordata,Mammalia,Perissodactyla,Equidae
6 | American bison,Animalia,Chordata,Mammalia,Artiodactyla,Bovidae
7 | Brown-throated sloth,Animalia,Chordata,Mammalia,Pilosa,Bradypodidae
8 | Dog,Animalia,Chordata,Mammalia,Carnivora,Canidae
9 | Eastern grey kangaroo,Animalia,Chordata,Mammalia,Diprotodontia,Macropodidae
10 | Goat,Animalia,Chordata,Mammalia,Artiodactyla,Bovidae
11 | Little Owl,Animalia,Chordata,Aves,Strigiformes,Strigidae
12 | Arctic hare,Animalia,Chordata,Mammalia,Lagomorpha,Leporidae
13 | European rabbit,Animalia,Chordata,Mammalia,Lagomorpha,Leporidae
14 | Roborovski hamster,Animalia,Chordata,Mammalia,Rodentia,Cricetidae
15 | Common bottlenose dolphin,Animalia,Chordata,Mammalia,Cetacea,Delphinidae
16 | Dodo,Animalia,Chordata,Aves,Columbiformes,Columbidae
17 | Dugong,Animalia,Chordata,Mammalia,Sirenia,Dugongidae
18 | Harbor seal,Animalia,Chordata,Mammalia,Carnivora,Phocidae
19 | Weaver ant,Animalia,Arthropoda,Insecta,Hymenoptera,Formicidae
20 | Giraffe,Animalia,Chordata,Mammalia,Artiodactyla,Giraffidae
21 | Koala,Animalia,Chordata,Mammalia,Diprotodontia,Phascolarctidae
22 | Llama,Animalia,Chordata,Mammalia,Artiodactyla,Camelidae
23 | Lion,Animalia,Chordata,Mammalia,Carnivora,Felidae
24 | Narwhal,Animalia,Chordata,Mammalia,Cetacea,Monodontidae
25 | Platypus,Animalia,Chordata,Mammalia,Monotremata,Ornithorhynchidae
26 | Brown Bear,Animalia,Chordata,Mammalia,Carnivora,Ursidae
27 | Hairy Hermit Crab,Animalia,Arthropoda,Malacostraca,Decapoda,Paguridae
28 | Giant Panda,Animalia,Chordata,Mammalia,Carnivora,Ursidae
29 | Black Rat,Animalia,Chordata,Mammalia,Rodentia,Muridae
30 | Alligator,Animalia,Chordata,Reptilia,Crocodylia,Alligatoridae
--------------------------------------------------------------------------------
/table-builder_demo.sketch:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/EricKramp/sketch-table-builder/f13aadae79d7ce9b9041c587db3d9eb26933b978/table-builder_demo.sketch
--------------------------------------------------------------------------------