Monty  Boehm

Monty Boehm

1667750280

Node-sketch: Javascript Library to Manipulate Sketch Files

💎 node-sketch

Javascript library to manipulate sketch files

Install

npm install node-sketch

Example:

const ns = require('node-sketch');

async function run() {
    const sketch = await ns.read(__dirname + '/design.sketch');

    //Search the symbol named 'button'
    const buttonSymbol = sketch.symbolsPage.get('symbolMaster', 'button');

    //Search all instances of a symbol named 'old-button' and replace it with 'button'
    const firstPage = sketch.pages[0];
    
    firstPage
        .getAll('symbolInstance', instance => instance.symbolMaster.name === 'old-button')
        .forEach(instance => instance.symbolMaster = buttonSymbol);

    //Save the result
    sketch.save('modified-design.sketch')
        .then(console.log('File saved!!'));
}

run();

API

Two classes are used to manage sketch files:

Sketch

Represents the sketch file and contains all data (pages, symbols, styles, shapes, etc). Contains the method .save() to create a sketch file with the result.

const ns = require('node-sketch');

ns.read('input.sketch').then(sketch => {
    sketch.document           // document data
    sketch.meta               // meta data
    sketch.user               // user data
    sketch.pages              // array with all pages
    sketch.symbolsPage        // the Symbols page
    sketch.layerStyles        // array with the layer styles
    sketch.textStyles         // array with the text styles
    sketch.colors             // array containing the colors stored in the color palette
    sketch.gradients          // array containing the gradients stored in the gradient palette
    sketch.symbols            // array with all symbols stored in the document

    sketch.foreignSymbols     // array with the symbols loaded from external libraries
    sketch.foreignLayerStyles // array with the layer styles loaded from external libraries
    sketch.foreignTextStyles  // array with the text styles loaded from external libraries

    sketch.save('output.sketch');
});

Node

It's the base class used by all other elements. Any page, symbol, color, etc is an instance of this class.

const symbolsPage = sketch.symbolsPage;

console.log(symbolsPage instanceof Node); //true 

//It include useful methods to search an inner node by class:
const button = symbolsPage.get('symbolMaster');

//by class and name
const button = symbolsPage.get('symbolMaster', 'button');

//by class and callback
const button = symbolsPage.get('symbolMaster', symbol => symbol.name === 'button');

//Just a callback
const button = symbolsPage.get(node => node._class === 'symbolMaster' && node.name === 'button');

//And the same than above but returning all inner nodes instead just the first:
const allSymbols = symbolsPage.getAll('symbolMaster');

There are other classes extending Node to provide special funcionalities in some nodes, like Style or SymbolInstance.

JSON Scheme

Technically, the sketch format consist in a zip with some json files. To manipulate a sketch file with this library, you need to know the scheme of json. You can use this code to read and extract a sketch file into a directory, in order to inspect the json scheme:

const ns = require('../');

ns.read('demo.sketch').then(sketch => sketch.saveDir('demo'));

Here you can see an example of extracted file

CLI

Starting from v0.14.0, the command node-sketch was included to use the library from CLI. You only need a file named node-sketch.js exporting the function to manipulate a sketch file. For example:

module.exports = sketch => {
    //Convert the text style names to uppercase
    sketch.textStyles.forEach(textStyle => {
        textStyle.name = textStyle.name.toUpperCase();
    })
}

To execute this script with the sketch file my-styles.sketch, run node-sketch my-styles.sketch. By default, the file is readed, but not saved. If you want to override the file with the modifications, run node-sketch my-styles.sketch --save.

And to execute a script file with a different name, use the --script argument: node-sketch my-styles.sketch --script=my-script.js --save.


See the API detailed

Or build it locally with npm run docs

Download Details:

Author: oscarotero
Source Code: https://github.com/oscarotero/node-sketch 
License: MIT license

#sketch #node #sketchapp 

Node-sketch: Javascript Library to Manipulate Sketch Files
Monty  Boehm

Monty Boehm

1667672160

Sketch-commands: A Collection Of Script Commands for Sketch.app

Sketch Commands

Sketch Commands is a port of some of my Orange Commands for Fireworks for Sketch.app.

Installation

Documentation for All Commands

Align

  • Space Horizontal: Distributes the selected elements horizontally, with the same distance beetween them.
  • Space Vertical: Distributes the selected elements vertically, with the same distance beetween them.

Duplicate

  • Duplicate Artboard Below: Duplicates the selected Artboard to the bottom of the current one.
  • Duplicate Artboard Right: Duplicates the selected Artboard to the right of the current one.

Effects

  • Repeat Horizontal: Repeats the selected layer horizontally, with a custom spacing between layers.
  • Repeat Vertical: Repeats the selected layer vertically, with a custom spacing between layers.

Export

  • All Artboards as PNG: Exports all the Artboards in the document as PNG files, in a folder at the file's location.
  • All Artboards as PNG in…: Exports all the Artboards in the document as PNG files, in a folder of your choice.
  • All Artboards as SVG: Exports all the Artboards in the document as SVG files, in a folder at the file's location.
  • All Artboards as PDF: Exports all the Artboards in the document as independent PDF files (one PDF file per Artboard), in a folder at the file's location.
  • All Slices as PNG: Exports all the Slices in the document as PNG files, in a folder at the file's location.
  • All Slices as PNG in ZIP: Exports all the Slices in the document as PNG files, archived in a ZIP file.
  • All Slices as PNG in…: Exports all the Slices in the document as PNG files, in a folder of your choice.
  • All Slices as SVG: Exports all the Slices in the document as SVG files, in a folder at the file's location.
  • All Slices as PDF: Exports all the Slices in the document as independent PDF files (one PDF file per Slice), in a folder at the file's location.
  • Save and Export Slices: Saves the file, exporting all the Slices in PNG format, in a folder at the file's location.
  • Selection to Desktop as PNG: Exports the selected layers as a PNG file on the Desktop.
  • Selection to Desktop as SVG: Exports the selected layers as a SVG file on the Desktop.
  • Selection to Desktop as PDF: Exports the selected layers as a PDF file on the Desktop.
  • Whole Page to Desktop as PNG: Exports the current page as a PNG file on the Desktop.
  • Whole Page to Desktop as PDF: Exports the current page as a PDF file on the Desktop.

Guides

  • Add Guides Manually to Artboard: Adds a pair of horizontal & vertical guides to the current Artboard, at the specified coordinates.
  • Around Selection: Add four guides that frame each of the selected layers.
  • Clear All Guides in Current Artboard: Removes all the guides in the current Artboard.
  • Clear All Guides in Current Page: Removes all the guides in the current Page.
  • Clear All Guides: Removes all the guides in the current document.
  • Clear Horizontal Guides in Current Page: Removes all the horizontal guides in the current Page.
  • Clear Vertical Guides in Current Page: Removes all the vertical guides in the current Page.
  • Repeat Guides Horizontally on Artboard: Creates a repeating pattern of horizontal guides by specifying the starting position of the pattern, distance between guides, and number of guides.
  • Repeat Guides Vertically on Artboard: Creates a repeating pattern of vertical guides by specifying the starting position of the pattern, distance between guides, and number of guides.

Numberize

A collection of commands to add / remove numbers to the name of Pages and Artboards.

  • Artboards Add: Adds a number in front of the Artboard name, using their stacking order.
  • Artboards Remove: Removes the number added by the previous command.
  • Pages Add: Adds a number in front of the name of all pages.
  • Pages Remove: Removes the number added by the previous command.

Pages

  • Duplicate Current Page: Duplicates the current page in the document.
  • Remove Current Page: Removes the current page in the document.
  • Set Name…: Sets the name of the current page.

Position

  • Move Up 100px: Moves the selected layers 100 pixels up.
  • Move Down 100px: Moves the selected layers 100 pixels down.
  • Move Left 100px: Moves the selected layers 100 pixels left.
  • Move Right 100px: Moves the selected layers 100 pixels right.
  • Set Position…: Sets the position of the selected layers to a custom value.
  • Swap Positions: Swaps the positions of two selected layers.

Properties

  • Make Pill: Makes the selected Rectangle layer a pill button by rounding its corners to the maximum possible value.
  • Rotation…: Sets the rotation of the selected layers to a custom value.
  • Set Radius…: Sets the corner radius of the selected layers to a custom value.

Select

  • All Layers in Current Artboard: Selects all the layers in the current Artboard.
  • All Text Layers in Page: Selects all the text layers in the current Page.
  • Current Artboard: Selects the current Artboard.

Size

  • Equalize Height Down: Makes all selected objects the same height, using the shortest one as the reference.
  • Equalize Height Up: Makes all selected objects the same height, using the tallest one as the reference.
  • Equalize Width Down: Makes all selected objects the same width, using the narrowest one as the reference.
  • Equalize Width Up: Makes all selected objects the same width, using the widest one as the reference.
  • Height -100px: Decreases the height of the selected layers by 100px.
  • Height +100px: Increases the height of the selected layers by 100px.
  • Height…: Sets the height of the selected layers to a custom value.
  • Scale to 16:9: Scales the selected layers so that they have a 16:9 aspect ratio.
  • Scale to 4:3: Scales the selected layers so that they have a 4:3 aspect ratio.
  • Set Size…: Sets the size of the selected layers to a custom value.
  • Width -100px: Decreases the width of the selected layers by 100px.
  • Width +100px: Increases the width of the selected layers by 100px.
  • Width…: Sets the width of the selected layers to a custom value.

Text

See this article for more details on Sentence vs Title case.

  • Case Sentence case: Sets the selected text layers to Sentence case.
  • Case Title Case: Sets the selected text layers to Title Case.

Download Details:

Author: Bomberstudios
Source Code: https://github.com/bomberstudios/sketch-commands 

#sketch #plugin #app #sketchapp #command 

Sketch-commands: A Collection Of Script Commands for Sketch.app
Monty  Boehm

Monty Boehm

1667656875

Sketch-web-viewer: View and inspect Sketch 43 Files in Browser

Sketch Web Viewer 💎 🔍


This project is brought to you by Launchpad for Sketch - Publish websites directly from Sketch, no coding needed.


demo.gif

View and inspect Sketch files in your browser.

Try it here.

👉 Features

  • 💎 View Sketch files across browsers and operating systems
  • 🔍 Inspect layer frame values by hovering on them
  • 🔒 No server side - your Sketch file is never uploaded anywhere
  • ✈️ Can run completely offline
  • 🗽 No need to signup or login to anything

Supports only the new Sketch 43 file format. Sketch 43 Beta can be downloaded here

☝️ Known Issues

  • No support for multiple pages documents - Issue #1
  • Large preview images overflow viewport and navbar
  • Tooltips override each other
  • More...

👋 Contribute

We welcome contributions! Just fork and make a pull request

This project is build using VueJS 2.

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

For detailed explanation on building for development, checkout the guide and docs for vue-loader.

Download Details:

Author: AnimaApp
Source Code: https://github.com/AnimaApp/sketch-web-viewer 
License: MIT license

#design #sketch #sketchapp 

Sketch-web-viewer: View and inspect Sketch 43 Files in Browser
w3hubs com

w3hubs com

1633082158

Pricing Table In Tailwind CS

Pricing Table In Tailwind CSS

In this pricing table, we used Tailwind CSS components and utility classes. For making responsive we used responsive classes which are already in utility classes.

Also read:- Tailwind CSS Neumorphism Login and Registration Form

Here we used responsive grid classes and text-color with font-size classes. Also, we used ul and li to show features in the list view.

Make it yours now by using it, downloading it, and please share it. we will design more elements for you.

source code

#buildtheweb #100daysofcode #web #tech #css #programing #coding #stackoverflow #programmers #codingisfun #github #css3 #codelife #codingdays #codecademy #html #javascript #programmers #developers #webdevelopers #fullstackdeveloper #dev #ui #salesfunnels #uitrends #sketchapp #webdesigncompany #java #websitedesigners #webdesigning #coderslife #websitebuilder #userexperiencedesign #webdesigninspiration #wordpresswebsite #websitetips #apps #webdesignerlife #adobe #squarespacedesigner #webdesignspecialist #wordpressdeveloper #appdevelopers 

Pricing Table In Tailwind CS
Erna  Herzog

Erna Herzog

1627087800

Easy Dotted Shape Tutorial in Sketch App

Download the free Sketch resources below and follow along as we create a dotted map design in Sketch–perfect for beginners!

Download the free Sketch files: https://www.dropbox.com/s/vmpptgc3l7bcy96/Dotted_Map_Course_Files.zip?dl=0

Download Duplicator–a free duplication plugin for Sketch:
https://github.com/turbobabr/duplicator

This is a detailed, hands-on Sketch tutorial for beginners that covers many topics:

  • How to create circles in Sketch
  • How to create Artboards in Sketch
  • How to duplicate shapes in Sketch fast
  • How to create and use Symbols in Sketch
  • How to create Masks in Sketch

#sketchapp #webdesign

#sketchapp #webdesign

Easy Dotted Shape Tutorial in Sketch App