Skip to content

Usage Examples

Jump to bottom
Konrad Dzwinel edited this page Aug 23, 2019 · 14 revisions

Here you can learn how to:

Convert single DOM Node to Sketch layers

Grab a single DOM node and convert it into a bunch of Sketch layers.

Note that this doesn't traverse the DOM so children nodes will not be converted!

import {Page, nodeToSketchLayers} from '@brainly/html-sketchapp';

// node that we want to extract
const node = document.querySelector('.button');

// Sketch page where our Sketch layers will live
const page = new Page({width: 100, height: 100});

page.setName('DOM Node to Sketch layers');

// each node may be exported as multiple Sketch layers
const layers = nodeToSketchLayers(node);

layers.forEach(layer => page.addLayer(layer));

// our page.asketch.json file that can be imported via Sketch plugin
console.log(page.toJSON());

🎮 Play with this code on CodePen. 🎮

Convert DOM tree to a Sketch page

Traversing the DOM yourself and calling nodeToSketchLayers on each node is possible but not recommended (there are multiple ways you can do it wrong). You should use nodeTreeToSketchPage (and nodeTreeToSketchGroup) to do the traversing for you (you'll get nice Sketch groups for free).

import {nodeTreeToSketchPage} from '@brainly/html-sketchapp';

// node that we want to extract
const node = document.body;

// nodeTreeToSketchPage will traverse the DOM tree, call nodeToSketchLayers on each DOM node, and crate a whole Sketch page for you
const page = nodeTreeToSketchPage(node);

page.setName('DOM tree to a Sketch page');

// our page.asketch.json file that can be imported via Sketch plugin
console.log(page.toJSON());

Convert DOM Node to a Sketch symbol

If you are not familiar with Sketch symbols you can read about them here.

import {Page, SymbolMaster, nodeTreeToSketchGroup} from '@brainly/html-sketchapp';

// node that we want to extract
const node = document.querySelector('.button');

// create a Sketch symbol and give it a name
const symbol = new SymbolMaster({x: 0, y: 0});
symbol.setName('Primary Button');

// convert button from html to sketch and add it to a symbol ✨
symbol.addLayer(nodeTreeToSketchGroup(node));

// Sketch page where our Sketch symbol will live
const page = new Page({width: 100, height: 100});

page.setName('DOM Node to a Sketch symbol');

// add symbol to a page
page.addLayer(symbol);

// our page.asketch.json file that can be imported via Sketch plugin
console.log(page.toJSON());

Create Sketch text styles, layer styles and document colors

You can read about text styles here, layer styles here and about document colors here.

import {Document, Text, nodeToSketchLayers} from '@brainly/html-sketchapp';

// document colors and text styles are stored in the Document (and not the Page)
const doc = new Document();

// any CSS compatible format works here
doc.addColor('red');
doc.addColor('#0F0');
doc.addColor('rgb(0,0,255)');

// grab a node from which we want to extract a text style
const textNode = document.querySelector('h1');

// nodeToSketchLayers may produce multiple layers, but we are only interested in Text
const textLayer = nodeToSketchLayers(textNode).filter(layer => layer instanceof Text)[0];

textLayer.setName('Heading');
doc.addTextStyle(textLayer);

// grab a node from which we want to extract layer style
const boxNode = document.querySelector('box');

// nodeToSketchLayers may produce multiple layers, but we are only interested in the first one (describing background, border and shadow in this case)
const boxLayer = nodeToSketchLayers(boxNode)[0];
boxLayer.setName('Box');

doc.addLayerStyle(boxLayer);

// our document.asketch.json file that can be imported via Sketch plugin
console.log(doc.toJSON());

Create and use instance of a symbol

Once you have symbols you can start using them to create instances.

🔥By putting instances into other master symbols you get overrides.

import {Page, SymbolMaster, nodeTreeToSketchGroup} from '@brainly/html-sketchapp';

// Sketch page where our Sketch layers will live
const page = new Page({width: 100, height: 100});

// we will keep references to icon master symbols here
const iconSymbols = new Map();

document.querySelectorAll('.icon').forEach(iconDiv => {
    // lets say we have this structure: <div data-name="hamburger-menu"><svg>…</svg></div>
    const name = iconDiv.dataset.name;

    // we put symbols one over another because we don't care here, you may want to do something smarter here
    const masterSymbol = new SymbolMaster({x: 0, y: 0});
    masterSymbol.setName(name);

    // convert icon div from html to sketch ✨
    masterSymbol.addLayer(nodeTreeToSketchGroup(iconDiv));

    // master symbol has to live somewhere in the Sketch document if we want to reference it
    page.addLayer(masterSymbol);

    // we collect master symbol references for later
    iconSymbols.set(name, masterSymbol);
});

// we grab a master symbol, create an instance of given size in given position
const iconInstance = iconSymbols.get('hamburger-menu').getSymbolInstance({x: 10, y: 10, width: 24, height: 24});

// we add icon instance to page (you can add it to a master symbol, or a grup, in the same way)
page.addLayer(iconInstance);

// our page.asketch.json file that can be imported via Sketch plugin
console.log(page.toJSON());
Clone this wiki locally