Search
topics
    models
      layers
        API
          API Reference

          Introduction

          API Layers

          This is a prototype Javascript API for Sketch. It’s still a work in progress, but the intention is to make something which is:

          • native Javascript
          • an easily understandable subset of the full internals of Sketch
          • fully supported by Sketch between releases (ie we try not to change it, unlike our internal API which we can and do change whenever we need to)
          • still allows you to drop down to our internal API when absolutely necessary.

          The idea is to keep this API as lean-and-mean as possible. The main reason for that is that if we (Sketch) are committing ourselves to making sure that we don’t break it, then it’s essential that doing so doesn’t become an unmanageable task.

          Again, this is very much a work in progress, so comments and suggestions for this API are welcome - send them to developer@sketch.com, or open an issue to have a public discussion.

          Installation

          var sketch = require('sketch/dom')
          var async = require('sketch/async')
          var DataSupplier = require('sketch/data-supplier')
          var UI = require('sketch/ui')
          var Settings = require('sketch/settings')
          
          // a more convenient require which exposes everything (might be a bit slower)
          var sketch = require('sketch')
          

          The API comes bundled inside Sketch, so no installation is required. You access it by calling the global require function.

          Sketch Components

          The approach taken by the API is to wrap the native Sketch model objects inside javascript objects. These are thin wrappers, and contain no state - they just exist as a way to provide a cleaner and more stable coding interface to the underlying model.

          Each Component follows the same API:

          • Component.fromNative(sketchObject) returns a wrapped object from a native Sketch model object
          • Component.toJSON() return a JSON object that represent the component
          • new Component(properties) creates a new native Sketch model object and returns a wrapped object
          • componentInstance.sketchObject returns the native Sketch model object.
          • componentInstance.isImmutable() returns true if the component is wrapping an immutable version of a native Sketch model object. If that is the case, you won’t be able to mutate the object (setting any property will be a no-op).
          • componentInstance.type returns a string that represent the type of the component. If it’s undefined, it means that we couldn’t match the native object and that we returned a really lightweight wrapper.

          Document

          var Document = require('sketch/dom').Document
          

          A Sketch document.

          Properties  
          idstring The unique ID of the document.
          pagesPage[] The pages of the document.
          selectedPagePage The selected page of the Document.
          selectedLayersSelection The Selection of the layers that the user has selected in the currently selected page.
          pathstring The path to the document (or the appcast URL in case of a Document from a remote Library).
          sharedLayerStylesSharedStyle[] The list of all shared layer styles defined in the document.
          sharedTextStylesSharedStyle[] The list of all shared text styles defined in the document.
          colorsColorAsset[] A list of color assets defined in the document. Mutating the returned array will update the document colors.
          swatchesSwatch[] A list of swatches defined in the document. Mutating the returned array will update the document swatches.
          gradientsGradientAsset[] A list of gradient assets defined in the document. Mutating the returned array will update the document gradients.
          colorSpaceColorSpace The color space of the document.

          Access the selected Document

          var document = require('sketch/dom').getSelectedDocument()
          
          // also exposed on Document
          var document = Document.getSelectedDocument()
          

          Returns

          The selected Document or undefined if no document is open.

          Access all the open Documents

          var documents = require('sketch/dom').getDocuments()
          
          // also exposed on Document
          var documents = Document.getDocuments()
          

          Returns

          An array of Documents.

          Create a new Document

          var document = new Document()
          

          Open a Document

          // ask the user to select a document
          Document.open((err, document) => {
            if (err) {
              // oh no, we failed to open the document
            }
            // if the user cancel the opening, `document` will be `undefined`
          })
          
          // open a sketch document at the specified path
          Document.open('path/to/the/document.sketch', (err, document) => {
            if (err) {
              // oh no, we failed to open the document
            }
          })
          

          A method to open an existing sketch document or ask the user to open one. The method is asynchronous so if you want to do something after the document is opening it, make sure that you pass a callback and continue your script there.

          Parameters  
          pathstring The path to the document to open. If undefined, the user will be asked to select one.
          callbackfunction A function called after the document is opened. It is called with an Error if opening the Document was unsuccessful and a Document (or undefined).

          Find a Layer by Id

          var layer = document.getLayerWithID(layerId)
          if (layer) {
            // do something
          }
          

          A method to help find the first layer in this document which has the given id.

          Parameters  
          layerIdstring - required The ID of the layer to find

          Returns

          Return a Layer object or undefined if it’s not found.

          Find Layers by name

          var layers = document.getLayersNamed(name)
          if (layers.length) {
            // do something
          }
          

          A method to help find the layers in this document which have the given name.

          Parameters  
          namestring - required The name of the layers to find

          Returns

          Return an array of Layer.

          Find a Shared Layer Style

          var sharedStyle = document.getSharedLayerStyleWithID(sharedStyleId)
          

          A method to help find a shared style in the document.

          Parameters  
          sharedStyleIdstring - required The ID of the shared style to find

          Returns

          Return a SharedStyle object or undefined if it’s not found.

          Find a Shared Text Style

          var sharedStyle = document.getSharedTextStyleWithID(sharedStyleId)
          

          A method to help find a shared style in the document.

          Parameters  
          sharedStyleIdstring - required The ID of the shared style to find

          Returns

          Return a SharedStyle object or undefined if it’s not found.

          Get all the Symbol Sources

          var symbols = document.getSymbols()
          

          A method to get all Symbol Sources defined in the document.

          Returns

          Return an array of the SymbolMaster objects defined in the document.

          Find a Symbol Source

          var source = document.getSymbolMasterWithID(symbolInstance.symbolId)
          

          A method to help find a Symbol Source in the document.

          Parameters  
          symbolIdstring - required The Symbol ID of the Symbol Source to find

          Returns

          Return a SymbolMaster object or undefined if it’s not found.

          Center on Layer

          document.centerOnLayer(layer)
          

          A method to help center the view of the document window on a given layer.

          Parameters  
          layerLayer - required The layer to center the view onto

          Save the Document

          document.save()
          
          document.save('path/to/the/document.sketch')
          
          document.save('path/to/the/document.sketch', (err) => {
            if (err) {
              // saving the document failed :(
            }
          })
          

          A method to save a document to a specific path or ask the user to choose where to save it. The method is asynchronous so if you want to do something after the document is saved, make sure that you pass a callback and continue your script there.

          Parameters  
          pathstring The path where the document will be saved. If undefined, the user will be asked to select one.
          optionsobject The options for the save operation (only used when specifying a path).
          options.saveModeSaveMode The way to save the document.
          callbackfunction A function called after the document is saved. It is called with an Error if saving the Document was unsuccessful.

          Close the Document

          document.close()
          

          A method to close a document.

          Change the color space

          // By default the method assigns a new color space
          document.changeColorSpace(ColorSpace.sRGB)
          console.log(document.colorSpace === ColorSpace.sRGB) // true
          
          // Pass true as an optional second argument
          // to convert instead of assign
          document.changeColorSpace(ColorSpace.P3, true)
          console.log(document.colorSpace === ColorSpace.P3) // true
          
          // Alternatively, use the property setter (the behaviour
          // here is to always assign the color space)
          document.colorSpace = ColorSpace.P3
          console.log(document.colorSpace === ColorSpace.P3) // true
          
          // Create a document with a pre-defined color space
          const p3Doc = new Document({ colorSpace: ColorSpace.P3 })
          

          A method to change a document’s color space. For an in-depth discussion of this topic and the difference between assigning and converting the color space check the color management documentation.

          Document.SaveMode

          Document.SaveMode.SaveAs
          
          document.save('path/to/the/document.sketch', {
            saveMode: Document.SaveMode.SaveAs,
          })
          

          Enumeration of the save mode.

          Value  
          Save Overwrites a document’s file with the document’s contents
          SaveAs Writes a document’s contents to a new file and then changes the document’s current location to point to the just-written file
          SaveTo Writes a document’s contents to a new file without changing the document’s current location to point to the new file.

          Document.ColorSpace

          Document.ColorSpace.Unmanaged
          Document.ColorSpace.sRGB
          Document.ColorSpace.P3
          

          Enumeration of the available color space settings.

          Value  
          Unmanaged The default setting
          sRGB sRGB color profile
          P3 Display P3 color profile

          Library

          var Library = require('sketch/dom').Library
          

          A Sketch Library.

          Properties  
          idstring - readonly The unique ID of the Library.
          namestring - readonly The name of the Library.
          validboolean - readonly If Sketch has been able to load the Library. If the library is not valid, the methods will often not be available so always check this field before doing something with a library.
          enabledboolean If the user has enabled the Library.
          libraryTypeLibraryType - readonly The type of Library.
          lastModifiedAtDate - readonly The date at which the library was last updated

          Access all the Libraries

          var libraries = require('sketch/dom').getLibraries()
          
          // also exposed on Library
          var libraries = Library.getLibraries()
          

          Returns

          An array of Libraries.

          Get a Library from a path

          var library = Library.getLibraryForDocumentAtPath(
            'path/to/existing/document.sketch'
          )
          

          Get the library for a local Sketch document. If the Document was already added as a Library, it will simply return it. If it is not already a Library, it will be added.

          Parameters  
          pathstring - required The path of the Library.

          Returns

          The existing Library at the path or a new Library from the document at the path.

          Get a remote Library from an RSS feed URL

          Library.getRemoteLibraryWithRSS(
            'https://url/to/feed/rss.xml',
            (err, library) => {
              if (err) {
                // oh no, failed to load the library
              }
            }
          )
          

          Get the remote library for an RSS feed. If the RSS feed was already added as a Library, it will simply return it. If it is not already a Library, it will be added.

          Parameters  
          urlstring - required The URL to the rss feed describing the versions of the library.
          callbackfunction A function called after the library is added. It is called with an Error if adding the Library was unsuccessful and a Library (or undefined).

          Remove a Library

          library.remove()
          

          A method to remove an existing library.

          Get the Library’s Document

          var libDocument = library.getDocument()
          

          A library references a Sketch Document and you can access it with this method.

          Returns

          The Document that the Library references. It can throw an error if the Document cannot be accessed.

          Get the Symbols that can be imported

          var document = sketch.getSelectedDocument()
          var symbolReferences = library.getImportableSymbolReferencesForDocument(
            document
          )
          

          To import a Symbol from a Library, do not access its Document and look for the Symbol Source directly. Instead, get the Symbol References of the Library and use those to import them.

          Those references depends on the document you want to import them into. For example if a document has already imported a symbol, it will reference the local version to keep all the instances in sync.

          Returns

          An array of Shareable Object that represents the Symbols which you can import from the Library.

          Get the Shared Layer Styles that can be imported

          var document = sketch.getSelectedDocument()
          var stylesReferences = library.getImportableLayerStyleReferencesForDocument(
            document
          )
          

          To import a shared style from a Library, do not access its Document and look for the SharedStyle directly. Instead, get the Shared Layer Style References of the Library and use those to import them.

          Those references depends on the document you want to import them into. For example if a document has already imported a shared style, it will reference the local version to keep all the instances in sync.

          Returns

          An array of Shareable Object that represents the Shared Layer Styles which you can import from the Library.

          Get the Shared Text Styles that can be imported

          var document = sketch.getSelectedDocument()
          var stylesReferences = library.getImportableTextStyleReferencesForDocument(
            document
          )
          

          To import a shared style from a Library, do not access its Document and look for the SharedStyle directly. Instead, get the Shared Text Style References of the Library and use those to import them.

          Those references depends on the document you want to import them into. For example if a document has already imported a shared style, it will reference the local version to keep all the instances in sync.

          Returns

          An array of Shareable Object that represents the Shared Layer Styles which you can import from the Library.

          Get the Shared Swatches that can be imported

          var document = sketch.getSelectedDocument()
          var stylesReferences = library.getImportableSwatchReferencesForDocument(
            document
          )
          

          To import a Swatch from a Library, do not access its Document and look for the Swatch directly. Instead, get the Shared Swatch References of the Library and use those to import them.

          Those references depends on the document you want to import them into. For example if a document has already imported a shared Swatch, it will reference the local version to keep all the instances in sync.

          Returns

          An array of Shareable Object that represents the Shared Swatches which you can import from the Library.

          Library.LibraryType

          Library.LibraryType.LocalUser
          

          Enumeration of the types of Library.

          Value
          Internal
          LocalUser
          RemoteUser
          RemoteTeam
          RemoteThirdParty

          Importable Object

          var symbolReferences = library.getImportableSymbolReferencesForDocument(
            document
          )
          

          An Object that can be imported from a Library. All its properties are read-only.

          Properties  
          idstring The unique ID of the Object.
          namestring The name of the Object.
          objectTypeImportableObjectType The type of the Object. Will only be Library.ImportableObjectType.Symbol for now.
          libraryLibrary The Library the Object is part of.

          Import in the Document

          var symbol = symbolReference.import()
          var style = sharedStyleReference.import()
          

          An Importable Object is linked to a Document so importing it will import it in the said Document.

          Returns

          If the objectType of the Object is Symbol, it will return a Symbol Source which will be linked to the Library (meaning that if the Library is updated, the Symbol Instances created from the Source will be updated as well).

          Library.ImportableObjectType

          Library.ImportableObjectType.Symbol
          

          Enumeration of the types of Importable Objects.

          Value
          Symbol
          LayerStyle
          TextStyle
          Swatch

          Style

          var Style = require('sketch/dom').Style
          
          var shape = new Shape({
            style: {
              borders: [{ color: '#c0ffee' }],
            },
          })
          
          shape.style.fills = [
            {
              color: '#c0ffee',
              fillType: Style.FillType.Color,
            },
          ]
          
          text.style.textUnderline = 'double dash-dot'
          

          The style of a Layer.

          Properties  
          opacitynumber The opacity of a Layer, between 0 (transparent) and 1 (opaque).
          blendingModeBlendingMode The blend mode used to determine the composite color.
          blurBlur The blur applied to the Layer.
          fillsFill[] The fills of a Layer.
          bordersBorder[] The borders of a Layer.
          borderOptionsBorderOptions The options that the borders share.
          shadowsShadow[] The shadows of a Layer.
          innerShadowsShadow[] The inner shadows of a Layer.
          alignmentAlignment The horizontal alignment of the text of a Text Layer
          verticalAlignmentVerticalAlignment The vertical alignment of the text of a Text Layer
          kerningnumber / null The kerning between letters of a Text Layer. null means that the kerning will be the one defined by the font.
          lineHeightnumber / null The height of a line of text in a Text Layer. null means “automatic”.
          paragraphSpacingnumber The space between 2 paragraphs of text in a Text Layer.
          textColorstring A rgba hex-string (#000000ff is opaque black) of the color of the text in a Text Layer.
          fontSizenumber The size of the font in a Text Layer.
          textTransform‘none’ / ‘uppercase’ / ‘lowercase’ The transform applied to the text of a Text Layer.
          fontFamilystring The name of the font family of a Text Layer. 'system' means the font family of the OS ('.SF NS Text' on macOS 10.14).
          fontWeightnumber The weight of the font of a Text Layer. Goes from 0 to 12, 0 being the thinest and 12 being the boldest. Not every weight are available for every fonts. When setting a font weight that does not exist for the current font family, the closest weight that exists will be set instead.
          fontStyle‘italic’ / undefined The style of the font of a Text Layer.
          fontVariant‘small-caps’ / undefined The variant of the font of a Text Layer.
          fontStretch‘compressed’ / ‘condensed’ / ‘narrow’ / ‘expanded’ / ‘poster’ / undefined The size variant of the font of a Text Layer.
          textUnderlinestring: <line-style> [<line-pattern>] ['by-word'] / undefined where <line-style> can be single / thick / double and <line-pattern> can be dot / dash / dash-dot / dash-dot-dot The underline decoration of a Text Layer.
          textStrikethroughstring: <line-style> [<line-pattern>] ['by-word'] / undefined where <line-style> can be single / thick / double and <line-pattern> can be dot / dash / dash-dot / dash-dot-dot The strikethrough decoration of a Text Layer.
          fontAxesFontAxes The axes of the Text Layer font (only available when the font is a variable font).

          Get the default line height

          var defaultlineHeight = style.getDefaultLineHeight()
          

          When no line height is specified, style.lineHeight will be undefined. You can get the default line height of the font using style.getDefaultLineHeight().

          Returns

          A number if the layer is a Text layer or undefined.

          Check if the Style is in sync with a Shared Style

          var isOutOfSync = style.isOutOfSyncWithSharedStyle(sharedStyle)
          

          Returns

          Whether the Style has some differences with a Shared Style.

          Sync the Style with a Shared Style

          style.syncWithSharedStyle(sharedStyle)
          

          The style instance will be updated with the value of the Shared Style.

          var sharedStyle = styledLayer.sharedStyle
          sharedStyle.style = style
          

          The Shared Style value will be updated with the style.

          Style.BlendingMode

          Style.BlendingMode.Darken
          

          Enumeration of the blending mode.

          Value
          Normal
          Darken
          Multiply
          ColorBurn
          Lighten
          Screen
          ColorDodge
          Overlay
          SoftLight
          HardLight
          Difference
          Exclusion
          Hue
          Saturation
          Color
          Luminosity

          Blur

          shape.style.blur = {
            center: {
              x: 10,
              y: 20,
            },
            type: Style.BlurType.Motion,
            motionAngle: 10,
          }
          

          An object that represent the blur of the layer.

          Properties  
          blurTypeBlurType The type of the blur.
          radiusnumber The radius of the blur.
          motionAnglenumber The angle of the blur (only used when the blur type is Motion).
          centerobject The center of the blur (only used when the blur type is Zoom.
          center.xnumber The horizontal coordinate of the center of the blur.
          center.ynumber The vertical coordinate of the center of the blur.
          enabledboolean Whether the fill is active or not.

          Style.BlurType

          Style.BlurType.Background
          

          Enumeration of the type of a blur.

          Value  
          Gaussian A common blur type that will accurately blur in all directions.
          Motion Blur only in one direction, giving the illusion of motion.
          Zoom Will blur from one particular point out.
          Background This will blur any content that appears behind the layer.

          Fill

          shape.style.fills = [
            {
              color: '#c0ffee',
              fillType: Style.FillType.Color,
            },
          ]
          

          An object that represent a Fill. color, gradient and pattern will always be defined regardless of the type of the fill.

          Properties  
          fillTypeFillType The type of the fill.
          colorstring A rgba hex-string (#000000ff is opaque black).
          gradientGradient The gradient of the fill.
          patternobject The pattern of the fill.
          pattern.patternTypePatternFillType How the pattern should fill the layer.
          pattern.imageImageData / null The image of tile of the pattern.
          pattern.tileScalenumber The scale applied to the tile of the pattern.
          enabledboolean Whether the fill is active or not.

          Style.FillType

          Style.FillType.Color
          

          Enumeration of the types of fill.

          Value
          Color
          Gradient
          Pattern

          Style.PatternFillType

          Style.PatternFillType.Fit
          

          Enumeration of the types of pattern fill.

          Value
          Tile
          Fill
          Stretch
          Fit

          Border

          shape.style.borders = [
            {
              color: '#c0ffee',
              fillType: Style.FillType.Color,
              position: Style.BorderPosition.Inside,
            },
          ]
          

          An object that represent a Border.

          Properties  
          fillTypeFillType The type of the fill of the border.
          colorstring A rgba hex-string (#000000ff is opaque black).
          gradientGradient The gradient of the fill.
          enabledboolean Whether the border is active or not.
          positionBorderPosition The position of the border.
          thicknessnumber The thickness of the border.

          Style.BorderPosition

          Style.BorderPosition.Center
          

          Enumeration of the positions of a border.

          Value
          Center
          Inside
          Outside

          BorderOptions

          shape.style.borderOptions = {
            dashPattern: [20, 5, 20, 5],
          }
          

          An object that represent the options that the Borders of the Layer share.

          Properties  
          startArrowheadArrowhead The type of the arrow head for the start of the path.
          endArrowheadArrowhead The type of the arrow head for the start of the path.
          dashPatternnumber[] The dash pattern of the borders. For example, a dash pattern of 4-2 will draw the stroke for four pixels, put a two pixel gap, draw four more pixels and then so on. A dashed pattern of 5-4-3-2 will draw a stroke of 5 px, a gap of 4 px, then a stroke of 3 px, a gap of 2 px, and then repeat.
          lineEndLineEnd The type of the border ends (if visible).
          lineJoinLineJoin The type of the border joins (if any).

          Style.Arrowhead

          Style.Arrowhead.OpenArrow
          

          Enumeration of the type of the Arrowhead for line layers.

          Value
          None
          OpenArrow
          FilledArrow
          Line
          OpenCircle
          FilledCircle
          OpenSquare
          FilledSquare

          Style.LineEnd

          Style.LineEnd.Round
          

          Enumeration of the positions of a border.

          Value  
          Butt This is the default option that’ll draw the border right to the vector point.
          Round Creates a rounded, semi-circular end to a path that extends past the vector point.
          Projecting Similar to the rounded cap, but with a straight edges.

          Style.LineJoin

          Style.LineJoin.Miter
          

          Enumeration of the positions of a border.

          Value  
          Miter This will simply create an angled, or pointy join. The default setting.
          Round Creates a rounded corner for the border. The radius is relative to the border thickness.
          Bevel This will create a chamfered edge on the border corner.

          Shadow

          shape.style.shadows = [
            {
              color: '#c0ffee',
              blur: 3,
            },
          ]
          
          shape.style.innerShadows = [
            {
              color: '#c0ffee',
              blur: 3,
            },
          ]
          

          An object that represent a Shadow.

          Properties  
          colorstring A rgba hex-string (#000000ff is opaque black).
          blurnumber The blur radius of the shadow.
          xnumber The horizontal offset of the shadow.
          ynumber The vertical offset of the shadow.
          spreadnumber The spread of the shadow.
          enabledboolean Whether the fill is active or not.

          Gradient

          shape.style.fills = [
            {
              fillType: Style.FillType.Gradient,
              gradient: {
                gradientType: Style.GradientType.Linear,
                from: {
                  x: 0,
                  y: 0,
                },
                to: {
                  x: 50,
                  y: 50,
                },
                stops: [
                  {
                    position: 0,
                    color: '#c0ffee',
                  },
                  {
                    position: 0.5,
                    color: '#0ff1ce',
                  },
                  {
                    position: 1,
                    color: '#bada55',
                  },
                ],
              },
            },
          ]
          

          An object that represent a Gradient.

          Properties  
          gradientTypeGradientType The type of the Gradient.
          fromPoint The position of the start of the Gradient
          toPoint The position of the end of the Gradient.
          aspectRationumber When the gradient is Radial, the from and to points makes one axis of the ellipse of the gradient while the aspect ratio determine the length of the orthogonal axis (aspectRatio === 1 means that it’s a circle).
          stopsGradientStop[] The different stops of the Gradient

          Style.GradientType

          Style.GradientType.Radial
          

          Enumeration of the type of a Gradient.

          Value  
          Linear Linear gradients tend to be the most common, where two colors will appear at opposite points of an object and will blend, or transition into each other.
          Radial A radial gradient will create an effect where the transition between color stops will be in a circular pattern.
          Angular This effect allows you to create gradients that sweep around the circumference (measured by the maximum width or height of a layer) in a clockwise direction.

          Gradient Stops

          An object that represent a Gradient Stop. Each of colors of a Gradient are represented by a Stop. A Gradient can have as many Stops as you’d like.

          Properties  
          positionnumber The position of the Stop. 0 represents the start of the gradient while 1 represent the end.
          colorstring The color of the Stop

          Font Axes

          // Get the axes
          const axes = textLayer.style.fontAxes
          
          // If axes is non-null the Text Layer's font
          // is a valid variable font recognised by Sketch
          if (axes) {
            // Mutate the axes object, taking care
            // to work within the min and max range
            // specified for each axis
            axes.Weight.value = axes.Weight.max
            axes.Monospace.value = 1
            // Apply the new axes to update
            // the text layer
            textLayer.style.fontAxes = axes
          }
          

          The fontAxes property allows you to adjust the parameters, or “axes”, exposed by variable fonts.

          It works by allowing you to get and set an object representing the axes for a Text Layer’s current font. The object will only contain information about the axes supported by the Text Layer’s current font, and these will vary from font to font.

          The object is keyed by axis name, and has values with the following structure:

          Properties  
          idstring The axis id
          minnumber The minimum value allowable on the axis
          maxnumber The maximum value allowable on the axis
          valuenumber The current axis value

          Shared Style

          var SharedStyle = require('sketch/dom').SharedStyle
          
          document.sharedTextStyles.push({
            name: 'Header 1',
            style: text.style,
          })
          

          A shared style (either a layer style or a text style).

          Properties  
          idstring The unique ID of the Shared Style.
          styleTypeSharedStyle.StyleType The type of the Shared Style.
          namestring The name of the Shared Style.
          styleStyle The Style value that is shared.

          Note that the id of a Shared Style coming from a Library might look like this: FBFF821E-20F3-48C5-AEDC-89F97A8C2344[D1A683E0-5333-4EBE-977C-48F64F934E99].

          If you have a Symbol Instance which has a Layer using a Shared Style from a Library and a Layer in the Document using the same Shared Style from the Library, the style will be imported twice; once for use in the layer and once for use by the foreign Symbol. The reason for this is to do with syncing. If you change the Shared Style in the Library it will cause both the Symbol Instance and the Shared Style to be out-of-date in the document. This will be shown in the component sync sheet, but you can choose only to sync the Shared Style (or the Symbol). Using these “private” Shared Styles means that syncing just the shared style doesn’t implicitly also sync the symbol.

          The format of these Symbol private shared style IDs is SYMBOLID[STYLEID] Where: STYLEID is the id of the original Shared Style in the original Library. And SYMBOLID is the new symbolId of the foreign Symbol in the destination document.

          Where we have such as Symbol private style, the same ID will be used both as the local ID and as the remote ID.

          Create a new Shared Style from a Style

          const newSharedStyle = SharedStyle.fromStyle({
            name: 'Header 1',
            style: layer.style,
            document: document,
          })
          
          // you can also push to the shared styles arrays directly
          document.sharedTextStyles.push({
            name: 'Header 1',
            style: text.style,
          })
          

          Create a new Shared Style with a specific name in a specific Document.

          ⚠️You can only insert local shared styles (eg. not linked to a Library). document.sharedLayerStyles returns the foreign shared styles (eg. linked to a Library) concatenated with the local shared styles. So if you try to insert a new Shared Style at the beginning (using unshift for example), it will end up at the beginning of the local Shared Styles but that might not be the beginning of all the shared styles if there are some foreign.

          Get all the Instances

          var styles = sharedStyle.getAllInstances()
          

          Returns an array of all instances of the Shared Style in the document, on all pages.

          Returns

          A Style array.

          Get all the Instances’ Layers

          var layers = sharedStyle.getAllInstancesLayers()
          

          Returns an array of all layers with a Style which is an instance of the Shared Style in the document, on all pages.

          Returns

          A Layer array.

          Get Library defining the style

          var originLibrary = sharedStyle.getLibrary()
          

          If the SharedStyle was imported from a library, the method can be used to:

          • know about it
          • get the library back

          Returns

          The Library the Shared Style was defined in, or null if it is a local shared style.

          Sync the local reference with the library version

          const success = sharedStyle.syncWithLibrary()
          

          If a Library has some updates, you can synchronize the local Shared Style with the Library’s version and bypass the panel where the user chooses the updates to bring.

          Returns

          true if it succeeded.

          const success = sharedStyle.unlinkFromLibrary()
          

          You can unlink a Shared Style from the Library it comes from and make it a local Shared Style instead.

          Returns

          true if it succeeded.

          SharedStyle.StyleType

          SharedStyle.StyleType.Text
          

          Enumeration of the type of Shared Style. Unknown indicates the object is broken and Sketch can’t determine the style type.

          Value
          Text
          Layer
          Unknown

          Symbol Override

          var overrides = symbolInstance.overrides
          

          A Symbol override. This component is not exposed, it is only returned when accessing the overrides of a Symbol Instance or Symbol Source. The overrides are not available until after the instance is injected into the document.

          Properties  
          pathstring The path to the override. It’s formed by the symbolId of the nested symbols separated by a /.
          propertystring The property that this override controls. It can be "stringValue" for a text override, "symbolID" for a nested symbol, "layerStyle" for a shared layer style override, "textStyle" for a shared text style override, "flowDestination" for a Hotspot target override or "image" for an image override.
          idstring The unique ID of the override (${path}_${property}).
          symbolOverrideboolean If the override is a nested Symbol override.
          valueString / ImageData The value of the override which can be change.
          isDefaultboolean If the override hasn’t been changed and is the default value.
          affectedLayerText / Image / Symbol Instance The layer the override applies to. It will be an immutable version of the layer.
          editableboolean If the value of the override can be changed.
          selectedboolean / undefined If the override is selected (or undefined if it’s the override of a Symbol Source).

          Get the frame of an Override

          var frame = override.getFrame()
          

          The frame of an override can be different than the frame of its affected Layer in case where the Symbol Instance has been scaled for example.

          Returns

          A Rectangle describing the frame of the affected layer in the Symbol Instance’s coordinates.

          Flow

          var Flow = require('sketch/dom').Flow
          

          The prototyping action associated with a layer.

          Properties  
          targetArtboard / Flow.BackTarget The target artboard of the action or Flow.BackTarget if the action is a back action
          targetIdstring / Flow.BackTarget The ID of target artboard of the action or Flow.BackTarget if the action is a back action
          animationTypeAnimationType The type of the animation.

          Create a new prototyping action

          layer.flow = {
            target: artboard,
          }
          

          You can create an action without specifying an animation type, it will use the default one.

          layer.flow = {
            targetId: artboard.id,
          }
          

          You can create an action by using the ID of an Artboard instead of the artboard.

          layer.flow = {
            target: artboard,
            animationType: Flow.AnimationType.slideFromLeft,
          }
          

          You can also specify the animation type.

          layer.flow = {
            target: Flow.BackTarget,
          }
          

          You can also create a back action.

          Check if the action is a Back action

          layer.flow.isBackAction()
          

          Returns whether the prototyping action is a back action or not, eg. whether layer.flow.target === Flow.BackTarget.

          Check if the target is valid

          layer.flow.isValidConnection()
          

          In some cases, the target of the action can be invalid, for example when the target has been removed from the document. The methods returns whether the target is valid or not.

          Flow.BackTarget

          layer.flow = {
            target: Flow.BackTarget,
          }
          

          Flow.BackTarget is a constant that you can set the target to in order to always take you back to the last Artboard you were looking at. When a Target has been set to Flow.BackTarget, the transition leading into it will be reversed on return.

          Flow.AnimationType

          Flow.AnimationType.slideFromLeft
          

          Enumeration of the animation types.

          Value  
          none No animation
          slideFromLeft Slide from the left
          slideFromRight Slide from the right
          slideFromBottom Slide from the bottom
          slideFromTop Slide from the top

          Export Format

          An export format associated with a layer.

          Properties  
          fileFormatstring The file format of the export.
          prefixstring / undefined The prefix added to the file name.
          suffixstring / undefined The suffix added to the file name.
          sizestring The size of the export. Valid values include 2x, 100w, 100width, 100px, 300h, 300height.

          Valid export file formats

          • jpg
          • png
          • tiff
          • eps
          • pdf
          • webp
          • svg

          Selection

          var selection = document.selectedLayers
          

          A utility class to represent the layers selection. Contains some methods to make interacting with a selection easier.

          Properties  
          layersLayer[] The Layers in the selection. Setting this property will change the selection.
          lengthnumber - read-only The number of Layers in the selection.
          isEmptyboolean - read-only Does the selection contain any layers?

          map, forEach, and reduce

          selection.forEach(layer => log(layer.id))
          
          selection.map(layer => layer.id)
          
          selection.reduce((initial, layer) => {
            initial += layer.name
            return initial
          }, '')
          

          Even though a selection isn’t an array, it defines map, forEach and reduce by just forwarding the arguments to its layers. Those are just convenience methods to avoid getting the layers every time.

          Clear the Selection

          selection.clear()
          

          Clears the selection.

          Returns

          Return the selection (useful if you want to chain the calls).

          Point

          A utility class to represent a point.

          Properties  
          xnumber / Point The x coordinate of the point.
          ynumber The y coordinate of the point.

          Get a CGPoint

          var cgPoint = point.asCGPoint()
          

          Return the Point as a CGPoint.

          Get an NSPoint

          var nsPoint = rect.asNSPoint()
          

          Return the Point as a NSPoint.

          CurvePoint

          A utility class to represent a curve point (with handles to control the curve in a path).

          Properties  
          pointPoint The position of the point.
          curveFromPoint The position of the handle control point for the incoming path.
          curveToPoint The position of the handle control point for the outgoing path.
          cornerRadiusnumber The corder radius of the point.
          pointTypePointType The type of the point.

          Check if the point is selected

          shape.points[0].isSelected()
          

          In case the user is currently editing a path, you can check if a curve point is selected using the curvePoint.isSelected() method.

          CurvePoint.PointType

          Enumeration of the animation types.

          Value
          Undefined
          Straight
          Mirrored
          Asymmetric
          Disconnected

          Rectangle

          var Rectangle = require('sketch/dom').Rectangle
          
          var rect = new Rectangle(0, 0, 100, 100)
          
          var rectFromAnotherRect = new Rectangle(rect)
          

          A utility class to represent a rectangle. Contains some methods to make interacting with a rectangle easier.

          Properties  
          xnumber / Rectangle The x coordinate of the top-left corner of the rectangle. Or an object with {x, y, width, height}
          ynumber The y coordinate of the top-left corner of the rectangle.
          widthnumber The width of the rectangle.
          heightnumber The height of the rectangle.

          Offset the Rectangle

          var newRect = rect.offset(x, y)
          

          Adjust the rectangle by offsetting it.

          Returns

          Return this rectangle (useful if you want to chain the calls).

          Scale the Rectangle

          var newRect = rect.scale(scaleWidth, scaleHeight)
          

          Adjust the rectangle by scaling it. The scaleHeight argument can be omitted to apply the same factor on both the width and the height.

          Returns

          Return this rectangle (useful if you want to chain the calls).

          Change the coordinates basis

          var newRect = rect.changeBasis({
            from: layerA,
            to: layerB,
          })
          
          var parentRect = rect.changeBasis({
            from: layerA,
            to: layerA.parent,
          })
          
          var pageRect = rect.changeBasis({
            from: layerA,
            // leaving out `to` means changing the
            // basis to the Page's basis
          })
          

          Each layer defines its own system of coordinates (with its origin at the top left of the layer). You can change that basis from one layer to the other with changeBasis.

          Parameters  
          changeobject - required  
          change.fromLayer The layer in which the rectangle’s coordinates are expressed.
          change.toLayer The layer in which the rectangle’s coordinates will be expressed.

          Both from and to can be omitted (but not at the same time) to change the basis from/to the Page coordinates.

          Get a CGRect

          var cgRect = rect.asCGRect()
          

          Return the Rectangle as a CGRect.

          Get an NSRect

          var nsRect = rect.asNSRect()
          

          Return the Rectangle as a NSRect.

          fromNative

          var sketch = require('sketch/dom')
          var document = sketch.fromNative(context.document)
          

          A utility function to get a wrapped object from a native Sketch model object.

          Parameters  
          objectNative Sketch Object The native Sketch model object to wrap.

          Returns

          The wrapped object of the right type (you can check is type with wrappedObject.type), eg. a native document will be wrapped as a Document while a native text layer will be wrapped as a Text.

          Assets

          Wrapper classes that are used to represent reusable assets retrieved from a document or globally.

          Color Asset

          Properties  
          namestring The name of the asset, or null.
          colorstring The hex string for the color.

          Get the Global Colors

          var sketch = require('sketch/dom')
          var colors = sketch.globalAssets.colors
          

          Returns

          An array of ColorAsset objects.

          Gradient Asset

          Properties  
          namestring The name of the asset, or null.
          gradientGradient The gradient object.

          Get the Global Gradients

          var sketch = require('sketch/dom')
          var gradients = sketch.globalAssets.gradients
          

          Returns

          An array of GradientAsset objects.

          Swatch

          Properties  
          namestring The name of the swatch, or null.
          colorstring The hex string for the color.

          Get a referencing Color

          var sketch = require('sketch')
          var mySwatch = sketch.Swatch.from({
            name: 'Safety Orange',
            color: '#ff6600'
          })
          var myColor = mySwatch.referencingColor
          

          Returns

          A Color that references a Color Variable, which you can use anywhere the API expects a Color object.

          SmartLayout

          The SmartLayout object contains the set of possible Smart Layouts that can be applied to SymbolMaster and Group layers.

          Properties  
          LeftToRight Smart Layout flowing left to right
          HorizontallyCenter Smart Layout expanding horizontally from the center
          RightToLeft Smart Layout flowing right to left
          TopToBottom Smart Layout flowing from top to bottom
          VerticallyCenter Smart Layout expanding vertically from the center
          BottomToTop Smart Layout flowing from bottom to top

          Set a Smart Layout

          const SmartLayout = require('sketch').SmartLayout
          layer.smartLayout = SmartLayout.TopToBottom
          

          Given a reference to a SymbolMaster or Group layer use the smartLayout setter to apply one of the Smart Layout values.

          Clear a Smart Layout

          Set the smartLayout value to null to remove the Smart Layout. This is the equivalent of selecting “None” in the Sketch Inspector.

          symbol.smartLayout = null
          

          Trigger a smart layout

          const SmartLayout = require('sketch').SmartLayout
          symbol.smartLayout = SmartLayout.TopToBottom
          symbolInstance.resizeWithSmartLayout()
          

          In order to trigger a Smart Layout resize in an instance, for example after changing an override value, call the resizeWithSmartLayout() method on the SymbolInstance layer.

          Layer

          A Sketch layer. This is the base class for most of the Sketch components and defines methods to manipulate them.

          Properties  
          idstring The unique ID of the Layer.
          namestring The name of the Layer
          parentGroup The group the layer is in.
          lockedboolean If the layer is locked.
          hiddenboolean If the layer is hidden.
          frameRectangle The frame of the Layer. This is given in coordinates that are local to the parent of the layer.
          selectedboolean If the layer is selected.
          flowFlow The prototyping action associated with the layer.
          exportFormatsExportFormat[] The export formats of the Layer.
          transformobject The transformation applied to the Layer.
          transform.rotationnumber The rotation of the Layer in degrees, clock-wise.
          transform.flippedHorizontallyboolean If the layer is horizontally flipped.
          transform.flippedVerticallyboolean If the layer is vertically flipped.

          Duplicate the Layer

          var duplicatedLayer = layer.duplicate()
          

          A new identical layer will be inserted into the parent of this layer.

          Returns

          A new Layer.

          Remove the Layer

          layer.remove()
          

          Remove this layer from its parent.

          Returns

          The current layer (useful if you want to chain the calls).

          Get the position in the hierarchy

          var index = layer.index
          

          The index of this layer in its parent. The layer at the back of the parent (visually) will be layer 0. The layer at the front will be layer n - 1 (if there are n layers).

          Move the Layer in the hierarchy

          Using the index

          layer.index = 2
          

          You can set the index of the layer to move it in the hierarchy.

          Move to the front

          layer.moveToFront()
          
          // which is the same as
          
          layer.index = layer.parent.layers.length - 1
          

          Move this layer to the front of its parent.

          Returns

          The current layer (useful if you want to chain the calls).

          Move forward

          layer.moveForward()
          
          // which is the same as
          
          layer.index = layer.index + 1
          

          Move this layer forward in its parent.

          Returns

          The current layer (useful if you want to chain the calls).

          Move to the back

          layer.moveToBack()
          
          // which is the same as
          
          layer.index = 0
          

          Move this layer to the back of its parent.

          Returns

          The current layer (useful if you want to chain the calls).

          Move backward

          layer.moveBackward()
          
          // which is the same as
          
          layer.index = layer.index - 1
          

          Move this layer backward in its parent.

          Returns

          The current layer (useful if you want to chain the calls).

          Accessing the layer’s hierarchy

          // access the page the layer is in
          layer.getParentPage()
          page.getParentPage() === undefined
          
          // access the artboard the layer is in (if any)
          layer.getParentArtboard()
          artboard.getParentArtboard() === undefined
          
          // access the Symbol Source the layer is in (if any)
          layer.getParentSymbolMaster()
          symbolMaster.getParentSymbolMaster() === undefined
          
          // access the shape the layer is in (if any)
          layer.getParentShape()
          

          In addition to the direct parent, you can access a few other entities in the hierarchy of the layer.

          Group

          var Group = require('sketch/dom').Group
          

          A group of layers. It is also an instance of Layer so all the methods defined there are available.

          Properties  
          idstring The unique ID of the Group.
          namestring The name of the Group
          parentGroup The group the Group is in.
          lockedboolean If the Group is locked.
          hiddenboolean If the Group is hidden.
          frameRectangle The frame of the Group. This is given in coordinates that are local to the parent of the Layer.
          selectedboolean If the Group is selected.
          flowFlow The prototyping action associated with the Group.
          exportFormatsExportFormat[] The export formats of the Group.
          transformobject The transformation applied to the Group.
          transform.rotationnumber The rotation of the Group in degrees, clock-wise.
          transform.flippedHorizontallyboolean If the Group is horizontally flipped.
          transform.flippedVerticallyboolean If the Group is vertically flipped.
          styleStyle The style of the Group.
          sharedStyleSharedStyle / null The associated shared style or null.
          sharedStyleIdstring / null The ID of the SharedStyle or null, identical to sharedStyle.id.
          layersLayer[] The Layers that this component groups together.
          smartLayoutSmartLayout The Group’s Smart Layout.

          Create a new Group

          new Group()
          
          var group = new Group({
            name: 'my name',
            layers: [
              {
                type: sketch.Types.Text,
                text: 'Hello world',
              },
            ],
          })
          

          Adjust to fit its children

          group.adjustToFit()
          

          Adjust the group to fit its children.

          Returns

          The current group (useful if you want to chain the calls).

          Page

          var Page = require('sketch/dom').Page
          

          A Sketch page. It is an instance of both Layer and Group so all the methods defined there are available.

          Properties  
          idstring The unique ID of the Page.
          namestring The name of the Page
          parentDocument The document the page is in.
          layersLayer[] An array of the layers and Artboards that this page has. It contains the first level children of the Page. If you need to access all layers and sublayers in the Page, use find.
          frameRectangle The frame of the page.
          selectedboolean If the Page is selected.

          Create a new Page

          new Page()
          
          new Page({
            name: 'my page',
          })
          

          Get the selected Layers of the Page

          var selection = document.selectedLayers
          

          A read-only property to get the layers that the user has selected in the page.

          Returns

          Return a Selection object.

          Symbols Page

          The “Symbols” page is similar to other pages. The only way it is specific is when creating a Symbol, Sketch will ask the user if they want to move it to that page.

          You can put Symbols in any page but if you want to respect the convention Sketch put in place, here are a few methods to help you do so.

          Get the Symbols Page

          var symbolsPage = Page.getSymbolsPage(document)
          

          A method to get the Symbols Page of a Document.

          Parameters  
          documentDocument - required The document from which you want the Symbols Page.

          Returns

          Return a Page or undefined if there is no Symbols Page yet.

          Create the Symbols Page

          var symbolsPage = Page.createSymbolsPage()
          symbolsPage.parent = document
          

          A method to create the Page with the name that Sketch will recognize as the Symbols Page.

          Returns

          Return a Page.

          Knows if a Page is the Symbols Page

          var isSymbolsPage = page.isSymbolsPage()
          

          A method to tell if the page is the Symbols Page.

          Returns

          Return a boolean.

          Artboard

          var Artboard = require('sketch/dom').Artboard
          

          A Sketch artboard. It is an instance of both Layer and Group so all the methods defined there are available.

          Properties  
          idstring The unique ID of the Artboard.
          namestring The name of the Artboard
          parentPage The page the Artboard is in.
          selectedboolean If the Artboard is selected.
          layersLayer[] The layers that this component groups together.
          frameRectangle The frame of the Artboard. This is given in coordinates that are local to the parent of the layer.
          flowStartPointboolean A Start Point allows you to choose where to start your prototype from.
          exportFormatsExportFormat[] The export formats of the Artboard.
          backgroundobject The background of the Artboard
          background.enabledboolean If the background should be enabled, eg. shown or not
          background.includedInExportboolean If the background should be exported or if it should be transparent during the export
          background.colorstring The rgba representation of the color of the background

          Create a new Artboard

          new Artboard()
          
          new Artboard({
            name: 'my name',
            flowStartPoint: true,
          })
          

          Shape

          var Shape = require('sketch/dom').Shape
          

          A shape layer. It is an instance of Layer so all the methods defined there are available. It is shaped by its layers which have boolean operations between them.

          Properties  
          idstring The unique ID of the Shape.
          namestring The name of the Shape
          parentGroup The group the shape is in.
          lockedboolean If the Shape is locked.
          hiddenboolean If the shape is hidden.
          frameRectangle The frame of the Shape. This is given in coordinates that are local to the parent of the layer.
          selectedboolean If the Shape is selected.
          flowFlow The prototyping action associated with the Shape.
          exportFormatsExportFormat[] The export formats of the Shape.
          transformobject The transformation applied to the Layer.
          transform.rotationnumber The rotation of the Layer in degrees, clock-wise.
          transform.flippedHorizontallyboolean If the layer is horizontally flipped.
          transform.flippedVerticallyboolean If the layer is vertically flipped.
          styleStyle The style of the Shape.
          sharedStyleSharedStyle / null The associated shared style or null.
          sharedStyleIdstring / null The ID of the SharedStyle or null, identical to sharedStyle.id.

          Create a new Shape

          new Shape({
            name: 'my shape',
          })
          

          Image

          var Image = require('sketch/dom').Image
          

          An image layer. It is an instance of Layer so all the methods defined there are available.

          Properties  
          idstring The unique ID of the Image.
          namestring The name of the Image
          parentGroup The group the Image is in.
          lockedboolean If the Image is locked.
          hiddenboolean If the Image is hidden.
          frameRectangle The frame of the Image. This is given in coordinates that are local to the parent of the layer.
          selectedboolean If the Image is selected.
          flowFlow The prototyping action associated with the Image.
          exportFormatsExportFormat[] The export formats of the Image.
          transformobject The transformation applied to the Image.
          transform.rotationnumber The rotation of the Image in degrees, clock-wise.
          transform.flippedHorizontallyboolean If the Image is horizontally flipped.
          transform.flippedVerticallyboolean If the Image is vertically flipped.
          styleStyle The style of the Image.
          sharedStyleSharedStyle / null The associated shared style or null.
          sharedStyleIdstring / null The ID of the SharedStyle or null, identical to sharedStyle.id.
          imageImageData The actual image of the layer.

          Create a new Image

          var imageLayer = new Image({
            image: 'path/to/image.png',
          })
          

          The image property accepts a wide range of input:

          • an ImageData
          • a Buffer
          • a native NSImage
          • a native NSURL
          • a native MSImageData
          • a string: path to the file to load the image from
          • an object with a path property: path to the file to load the image from
          • an object with a base64 string: a base64 encoded image
          var imageLayer = new Image({
            image: 'path/to/image.png',
            frame: new Rectangle(0, 0, 300, 200),
          })
          

          By default, an Image layer will be created with a size of 100 × 100 pixels, unless you provide a frame property on its constructor.

          Original Size

          imageLayer.resizeToOriginalSize()
          

          Adjust the Image to its original size. This is equivalent to pressing the ‘Original Size’ button in Sketch’s Inspector.

          Returns

          The current Image (useful if you want to chain the calls).

          For performance reasons, Sketch initializes the Image object lazily. So if you want to set the dimensions of your Image layer to those of the original file, you’ll first need to create the object, and then call the resizeToOriginalSize method.

          ImageData

          var imageData = imageLayer.image
          
          imageData.nsimage // return a native NSImage
          imageData.nsdata // return a native NSData representation of the image
          

          An ImageData is a wrapper around a native NSImage.

          You can access the native NSImage with nsimage or a native NSData representation of the image with nsdata.

          imageLayer.image.size // { width: 100, height: 100 }
          

          As a convenience, you can access the original size of an ImageData object via its size property.

          ShapePath

          var ShapePath = require('sketch/dom').ShapePath
          

          A shape path layer. It is an instance of Layer so all the methods defined there are available.

          Properties  
          idstring The unique ID of the ShapePath.
          namestring The name of the ShapePath
          parentGroup The group the ShapePath is in.
          lockedboolean If the ShapePath is locked.
          hiddenboolean If the ShapePath is hidden.
          frameRectangle The frame of the ShapePath. This is given in coordinates that are local to the parent of the layer.
          selectedboolean If the ShapePath is selected.
          flowFlow The prototyping action associated with the ShapePath.
          exportFormatsExportFormat[] The export formats of the ShapePath.
          styleStyle The style of the ShapePath.
          sharedStyleSharedStyle / null The associated shared style or null.
          sharedStyleIdstring / null The ID of the SharedStyle or null, identical to sharedStyle.id.
          shapeTypeShapeType The type of the Shape Path. It can only be set when creating a new ShapePath.
          pointsCurvePoint[] The points defining the Shape Path.
          closedboolean If the Path is closed.

          Create a new ShapePath

          const shapePath = new ShapePath({
            name: 'my shape path',
            shapeType: ShapePath.ShapeType.Oval,
          })
          

          You can only set the shapeType when creating a new one. Once it is created, the shapeType is read-only. If it is not specified and you do not specify any points, it will default to ShapePath.ShapeType.Rectangle (if you do specify some points, it will default to ShapePath.ShapeType.Custom).

          const shapePath = ShapePath.fromSVGPath('M10 10 H 90 V 90 H 10 L 10 10')
          

          You can also create a new ShapePath from an SVG path (the string that goes in the d attribute of a path tag in an SVG). See the MDN documentation for more information about SVG paths.

          Get the SVG path

          const svgPath = shapePath.getSVGPath()
          

          Returns a string representing the SVG path of the ShapePath.

          ShapePath.ShapeType

          ShapePath.ShapeType.Oval
          

          Enumeration of the type of Shared Style.

          Value
          Rectangle
          Oval
          Triangle
          Polygon
          Star
          Custom

          ShapePath.PointType

          ShapePath.PointType.Undefined
          

          Enumeration of the point types.

          Value
          Undefined
          Straight
          Mirrored
          Asymmetric
          Disconnected

          Text

          var Text = require('sketch/dom').Text
          

          A text layer. It is an instance of Layer so all the methods defined there are available.

          Properties  
          idstring The unique ID of the Text.
          namestring The name of the Text
          parentGroup The group the Text is in.
          lockedboolean If the Text is locked.
          hiddenboolean If the Text is hidden.
          frameRectangle The frame of the Text. This is given in coordinates that are local to the parent of the layer.
          selectedboolean If the Text is selected.
          flowFlow The prototyping action associated with the Text.
          exportFormatsExportFormat[] The export formats of the Symbol Source.
          transformobject The transformation applied to the Text.
          transform.rotationnumber The rotation of the Text in degrees, clock-wise.
          transform.flippedHorizontallyboolean If the Text is horizontally flipped.
          transform.flippedVerticallyboolean If the Text is vertically flipped.
          styleStyle The style of the Text.
          sharedStyleSharedStyle / null The associated shared style or null.
          sharedStyleIdstring / null The ID of the SharedStyle or null, identical to sharedStyle.id.
          textstring The string value of the text layer.
          lineSpacingLineSpacing The line spacing of the layer.
          fixedWidthboolean Whether the layer should have a fixed width or a flexible width.

          Create a new Text

          var text = new Text({
            text: 'my text',
            alignment: Text.Alignment.center,
          })
          

          Adjust to fit its value

          text.adjustToFit()
          

          Adjust the Text to fit its value.

          Returns

          The current Text (useful if you want to chain the calls).

          fragments

          var fragments = text.fragments
          

          Returns a array of the text fragments for the text. Each one is a object containing a rectangle, a baseline offset, the range of the fragment, and the substring {rect, baselineOffset, range, text}.

          Text.Alignment

          Text.Alignment.center
          

          Enumeration of the alignments of the text.

          Value  
          left Visually left aligned
          right Visually right aligned
          center Visually centered
          justify Fully-justified. The last line in a paragraph is natural-aligned.

          Text.VerticalAlignment

          Text.VerticalAlignment.center
          

          Enumeration of the vertical alignments of the text.

          Value  
          top Visually top aligned
          center Visually vertically centered
          bottom Visually bottom aligned

          Text.LineSpacing

          Text.LineSpacing.constantBaseline
          

          Enumeration of the line spacing behavior for the text.

          Value  
          constantBaseline Uses min & max line height on paragraph style
          variable Uses MSConstantBaselineTypesetter for fixed line height

          Symbol Source

          var SymbolMaster = require('sketch/dom').SymbolMaster
          

          A Symbol Source. It is an instance of Artboard (hence of Layer and Group) so all the methods defined there are available.

          Properties  
          idstring The unique ID of the Symbol Source object (not to be confused with symbolId).
          namestring The name of the Symbol Source
          parentGroup The group the Symbol Source is in.
          frameRectangle The frame of the Symbol Source. This is given in coordinates that are local to the parent of the layer.
          selectedboolean If the Symbol Source is selected.
          exportFormatsExportFormat[] The export formats of the Symbol Source.
          layersLayer[] The layers composing the Symbol Source.
          backgroundobject The background of the Symbol Source
          background.enabledboolean If the background should be enabled, eg. shown or not
          background.includedInExportboolean If the background should be exported or if it should be transparent during the export
          background.includedInInstanceboolean If the background should appear in the instances of the Symbol Source
          background.colorstring The rgba representation of the color of the background
          symbolIdstring The unique ID of the Symbol that the Source and its instances share.
          overridesOverride[] The array of the overrides that the instances of the Symbol Source will be able to change.

          Create a new Symbol Source

          var symbol = new SymbolMaster({
            name: 'my symbol',
          })
          

          Create a new Symbol Source from an Artboard

          var symbol = SymbolMaster.fromArtboard(artboard)
          

          Replace the artboard with a Symbol Source.

          Parameters  
          artboardArtboard - required The artboard to create the Symbol Source from.

          Returns

          A new SymbolMaster

          Change to an Artboard

          var artboard = symbol.toArtboard()
          

          Replace the Symbol Source with an artboard and detach all its instances converting them into groups.

          Returns

          A new Artboard

          Create a new Instance

          var instance = symbol.createNewInstance()
          

          Creates a new SymbolInstance linked to this Source, ready for inserting in the document.

          Returns

          A new SymbolInstance

          Get all the Instances

          var instances = symbol.getAllInstances()
          

          Returns an array of all instances of the Symbol in the document, on all pages.

          Get Library defining the Symbol Source

          var originLibrary = symbol.getLibrary()
          

          If the Symbol Source was imported from a library, the method can be used to:

          • know about it
          • get the library back

          Returns

          The Library the Symbol was defined in, or null if it is a local symbol.

          Sync the local reference with the library version

          const success = symbol.syncWithLibrary()
          

          If a Library has some updates, you can synchronize the local Symbol Source with the Library’s version and bypass the panel where the user chooses the updates to bring.

          Returns

          true if it succeeded.

          const success = symbol.unlinkFromLibrary()
          

          You can unlink a Symbol Source from the Library it comes from and make it a local Symbol Source instead. It will be added to the Symbols Page.

          Returns

          true if it succeeded.

          Symbol Instance

          var SymbolInstance = require('sketch/dom').SymbolInstance
          

          A Symbol instance. It is an instance of Layer so all the methods defined there are available.

          Properties  
          idstring The unique ID of the Symbol Instance object (not to be confused with symbolId).
          namestring The name of the Symbol Instance
          parentGroup The group the Symbol Instance is in.
          lockedboolean If the Symbol Instance is locked.
          hiddenboolean If the Symbol Instance is hidden.
          frameRectangle The frame of the Symbol Instance. This is given in coordinates that are local to the parent of the layer.
          flowFlow The prototyping action associated with the Symbol.
          selectedboolean If the Symbol Instance is selected.
          exportFormatsExportFormat[] The export formats of the Symbol Instance.
          transformobject The transformation applied to the Symbol Instance.
          transform.rotationnumber The rotation of the Symbol Instance in degrees, clock-wise.
          transform.flippedHorizontallyboolean If the Symbol Instance is horizontally flipped.
          transform.flippedVerticallyboolean If the Symbol Instance is vertically flipped.
          styleStyle The style of the Symbol Instance.
          symbolIdstring The unique ID of the Symbol that the instance and its master share.
          masterSymbolMaster The Symbol Source that the instance is linked to.
          overridesOverride[] The array of the overrides to modify the instance.

          Create a new Symbol Instance

          var instance = new SymbolInstance({
            name: 'my symbol instance',
            symbolId: symbolId,
          })
          

          Create a new Symbol Instance from a Symbol Source

          var instance = symbol.createNewInstance()
          

          Creates a new SymbolInstance linked to this Source, ready for inserting in the document.

          Returns

          A new SymbolInstance

          Detach the instance

          var group = instance.detach()
          
          var group = instance.detach({
            recursively: true,
          })
          

          Replaces a group that contains a copy of the Symbol this instance refers to. Returns null if the Source contains no layers instead of inserting an empty group

          Parameters  
          optionsobject The options to apply when detaching the instance.
          options.recursivelyboolean If it should detach the nested symbols as well. Default to false.

          Returns

          A new Group or null

          Set an Override value

          instance.setOverrideValue(instance.overrides[0], 'overridden')
          

          Change the value of the override.

          Parameters  
          overrideOverride - required The override to change.
          valuestring / NSImage - required The value of override to set. Can be a string or an NSImage or a symbolId depending on the type of the override.

          Returns

          The current Symbol instance (useful if you want to chain the calls).

          Resize with Smart Layout

          instance.resizeWithSmartLayout()
          

          In order to trigger a Smart Layout resize in an instance, for example after changing an override value, call the resizeWithSmartLayout() method.

          HotSpot

          var HotSpot = require('sketch/dom').HotSpot
          

          A Sketch hotspot. It is an instance of Layer so all the methods defined there are available.

          Properties  
          idstring The unique ID of the HotSpot.
          namestring The name of the HotSpot
          parentGroup The group the HotSpot is in..
          lockedboolean If the HotSpot is locked.
          hiddenboolean If the HotSpot is hidden.
          frameRectangle The frame of the HotSpot. This is given in coordinates that are local to the parent of the HotSpot.
          selectedboolean If the HotSpot is selected.
          flowFlow The prototyping action associated with the HotSpot.

          Create a new Hotspot

          new HotSpot()
          
          new HotSpot({
            name: 'my name',
            flow: {
              target: artboard,
            },
          })
          

          Create a new Hotspot from a Layer

          var hotspot = HotSpot.fromLayer(layer)
          

          Slice

          var Slice = require('sketch/dom').Slice
          

          A Sketch slice. It is an instance of Layer so all the methods defined there are available.

          Properties  
          idstring The unique ID of the Slice.
          namestring The name of the Slice
          parentGroup The group the Slice is in.
          lockedboolean If the Slice is locked.
          hiddenboolean If the Slice is hidden.
          frameRectangle The frame of the Slice. This is given in coordinates that are local to the parent of the layer.
          selectedboolean If the Slice is selected.
          exportFormatsExportFormat[] The export formats of the Slice.

          Settings

          var Settings = require('sketch/settings')
          

          A set of functions to handle user settings. The settings are persisted when the user closes Sketch.

          Get a plugin setting

          var setting = Settings.settingForKey('my-key')
          

          Return the value of a setting scoped to your plugin for a given key.

          Parameters  
          keystring - required The setting to look up.

          Returns

          The setting that was stored for the given key. undefined if there was nothing.

          Set a plugin setting

          Settings.setSettingForKey('my-key', 0.1)
          

          Store a value of a setting scoped to your plugin for a given key.

          Parameters  
          keystring - required The setting to set.
          valueany - required The value to set it to.

          Get a Sketch setting

          var setting = Settings.globalSettingForKey('my-key')
          

          Return the value of a Sketch setting for a given key.

          Parameters  
          keystring - required The setting to look up.

          Returns

          The setting that was stored for the given key. undefined if there was nothing.

          Set a Sketch setting

          Settings.setGlobalSettingForKey('my-key', 0.1)
          

          Store a value of a Sketch setting for a given key.

          Parameters  
          keystring - required The setting to set.
          valueany - required The value to set it to.

          Get a Layer setting

          var setting = Settings.layerSettingForKey(layer, 'my-key')
          

          Return the value of a setting for a given key on a specific Layer or DataOverride or Override.

          Parameters  
          layerLayer / DataOverride / Override - required The layer on which a setting is stored.
          keystring - required The setting to look up.

          Returns

          The setting that was stored for the given key. undefined if there was nothing.

          Set a Layer setting

          Settings.setLayerSettingForKey(layer, 'my-key', 0.1)
          

          Store a value of a setting for a given key on a specific Layer or DataOverride or Override.

          Parameters  
          layerLayer / DataOverride / Override - required The layer on which the setting is set.
          keystring - required The setting to set.
          valueany - required The value to set it to.

          Get a Document setting

          var setting = Settings.documentSettingForKey(document, 'my-key')
          

          Return the value of a setting for a given key on a specific document.

          Parameters Description
          documentDocument - required The document on which a setting is stored.
          keystring - required The setting to look up.

          Returns

          The setting that was stored for the given key. undefined if there was nothing.

          Set a Document setting

          Settings.setDocumentSettingForKey(document, 'my-key', 0.1)
          

          Store a value of a setting for a given key on a specific document.

          Parameters  
          documentDocument - required The document on which the setting is set.
          keystring - required The setting to set.
          valueany - required The value to set it to.

          Get a session variable

          var myVar = Settings.sessionVariable('myVar')
          

          Return the value of a variable which is persisted when the plugin finishes to run but is not persisted when Sketch closes. It is useful when you want to keep a value between plugin’s runs.

          Parameters  
          keystring - required The variable to look up.

          Returns

          The setting that was stored for the given key. undefined if there was nothing.

          Set a session variable

          Settings.setSessionVariable('myVar', 0.1)
          

          Store a value of a variable which is persisted when the plugin finishes to run but is not persisted when Sketch closes. It is useful when you want to keep a value between plugin’s runs.

          Parameters  
          keystring - required The variable to set.
          valueany - required The value to set it to.

          UI

          var UI = require('sketch/ui')
          

          A set of functions to show some user interfaces. The set is small on purpose. Any more complex UI should be provided by third party libraries and doesn’t need to be in the core.

          Show a message

          UI.message('Hello world!')
          

          Show a small, temporary, message to the user. The message appears at the bottom of the selected document, and is visible for a short period of time. It should consist of a single line of text.

          Parameters  
          textstring - required The message to show.
          documentDocument The document to show the message into.

          Show an alert

          UI.alert('my title', 'Hello World!')
          

          Show an alert with a custom title and message. The alert is modal, so it will stay around until the user dismisses it by pressing the OK button.

          Parameters  
          titlestring - required The title of the alert.
          textstring - required The text of the message.

          Get an input from the user

          UI.getInputFromUser(
            "What's your name?",
            {
              initialValue: 'Appleseed',
            },
            (err, value) => {
              if (err) {
                // most likely the user canceled the input
                return
              }
            }
          )
          
          UI.getInputFromUser(
            "What's your favorite design tool?",
            {
              type: UI.INPUT_TYPE.selection,
              possibleValues: ['Sketch', 'Paper'],
            },
            (err, value) => {
              if (err) {
                // most likely the user canceled the input
                return
              }
            }
          )
          

          Shows a simple input sheet which displays a message, and asks for an input from the user.

          Parameters  
          messagestring - required The prompt message to show.
          optionsobject Options to customize the input sheet. Most of the options depends on the type of the input.
          option.descriptionstring A secondary text to describe with more details the input.
          option.typeInput Type The type of the input.
          option.initialValuestring / number The initial value of the input.
          option.possibleValuesstring[] - required with a selection The possible choices that the user can make. Only used for a selection input.
          option.numberOfLinesnumber Controls the height of the input field. Only used for a string input. If a value is provided it converts the textfield into a scrollable textarea.
          callbackfunction A function called after the user entered the input. It is called with an Error if the user canceled the input and a string or number depending on the input type (or undefined).

          UI.INPUT_TYPE

          UI.INPUT_TYPE.selection
          

          The enumeration of the different input types.

          Values
          string
          selection

          Get the theme of Sketch

          var theme = UI.getTheme()
          
          if (theme === 'dark') {
            // shows UI in dark theme
          } else {
            // shows UI in light theme
          }
          

          Sketch has 2 themes: light and dark. If your plugin has some custom UI, it should support both as well.

          Data Supplier

          var DataSupplier = require('sketch/data-supplier')
          

          When your plugin supplies some data, don’t forget to set the suppliesData field to true in your manifest.json!

          Register a Data Supplier

          var DataSupplier = require('sketch/data-supplier')
          
          // onStartup would be the handler for the `Startup` action defined in the manifest.json
          export function onStartup() {
            DataSupplier.registerDataSupplier(
              'public.text',
              'My Custom Data',
              'SupplyKey'
            )
          }
          

          Register some data with a name and a key.

          Parameters  
          dataTypestring - required The data type. Allowed values are public.text, public.image, or public.json (available in Sketch 71+).
          dataNamestring - required The data name, used as the menu item title for the data.
          actionstring - required The name of the Action that will be dispatched when the user requests some data. See supplyData.

          Context of the action

          When a user runs a Data plugin, Sketch will forward the request to your plugin, passing a context.data object with all the information you need to fulfil the request:

          Key  
          context.data.key A unique key to identify the supply request. You need to pass it to the supply method untouched.
          context.data.items The array of native model objects for which we want some data. It can be either a native Text, a native Shape or a native DataOverride (a special object when the data is for an Override)
          var util = require('util')
          var sketch = require('sketch/dom')
          var DataSupplier = require('sketch/data-supplier')
          
          // onSupplyKeyNeeded would be the handler for
          // the `SupplyKey` action defined in the manifest.json
          export function onSupplyKeyNeeded(context) {
            var count = context.data.items.count()
            var key = context.data.key
            var items = context.data.items
          
            // you will often want to get wrapped objects instead
            // of the native ones supplied in the context
            var wrappedItems = util.toArray(items).map(sketch.fromNative)
          }
          

          Supply the Data

          You have two different methods to supply data from your plugin: supplyData (to provide all the data at once), and supplyDataAtIndex (to provide data one by one).

          Supply all the data in one go

          var DataSupplier = require('sketch/data-supplier')
          
          // onSupplyKeyNeeded would be the handler for
          // the `SupplyKey` action defined in the manifest.json
          export function onSupplyKeyNeeded(context) {
            var count = context.data.items.count()
            var key = context.data.key
          
            var data = Array.from(Array(count)).map(i => 'foo')
          
            DataSupplier.supplyData(key, data)
          }
          

          When the plugin providing the dynamic data has finished generating the data (could be an asynchronous operation), it will call this function with the data key and the data.

          Parameters  
          keystring - required Should be equal to context.data.key
          datastring[] - required The list of values to provide. In case of public.image, the string is the path to the image.

          Supply the data one by one

          var util = require('util')
          var sketch = require('sketch/dom')
          var DataSupplier = require('sketch/data-supplier')
          
          // onSupplyKeyNeeded would be the handler for
          // the `SupplyKey` action defined in the manifest.json
          export function onSupplyKeyNeeded(context) {
            var key = context.data.key
            var items = util.toArray(context.data.items).map(sketch.fromNative)
          
            items.forEach((item, i) => {
              // item is either a Layer or a DataOverride
              DataSupplier.supplyDataAtIndex(key, 'foo', i)
            })
          }
          

          When the plugin providing the dynamic data has finished generating the datum (could be an asynchronous operation), it will call this function with the data key and the datum.

          Parameters  
          keystring - required Should be equal to context.data.key
          datumstring - required The value to provide. In case of public.image, the string is the path to the image. In case of public.json, the value is a JSON object.
          indexnumber - required The index of the item you are providing a value for.

          DataOverride

          A special object passed in the context of the action to supply data when the item is an Override.

          Properties  
          idstring The name of the override.
          overrideOverride The override whose value will replaced by the supplied data.
          symbolInstanceSymbolInstance The Symbol instance that the override is on that will have the data replaced.

          Deregister your Data Suppliers

          var DataSupplier = require('sketch/data-supplier')
          
          // onShutdown would be the handler for the `Shutdown` action defined in the manifest.json
          export function onShutdown() {
            DataSupplier.deregisterDataSuppliers()
          }
          

          When registering something, it’s good practice to clean up after it. This is specially useful when your plugin is updated: the Shutdown Action will be called before the Startup will. It gives you the opportunity to update your handler cleanly.

          async

          var fiber = require('sketch/async').createFiber()
          longRunningTask(function(err, result) {
            fiber.cleanup()
            // you can continue working synchronously here
          })
          

          By default, Sketch cleans up your script as soon as its call-stack is empty. So if you schedule an asynchronous task, chances are that when the task returns, your script will be cleaned up and it will crash Sketch.

          A fiber is a way to keep track of a asynchronous task. The script will stay alive as long as at least one fiber is running.

          To end a fiber, call fiber.cleanup(). This will tell Sketch that it can garbage collect the script if no other fiber is running.

          You can run a function when the fiber is about to be cleaned up by setting a callback: fiber.onCleanup(function () {...}). Always do your clean up in this function instead of doing before calling fiber.cleanup: there might be some cases where the fiber will be cleaned up by Sketch so you need to account for that.

          export

          var sketch = require('sketch/dom')
          sketch.export(layer, {
            formats: 'svg',
          })
          
          sketch.export([layer, layer2])
          
          const options = { scales: '1, 2, 3', formats: 'png, jpg' }
          sketch.export(page, options)
          
          sketch.export(document.pages)
          
          const options = { formats: 'json', output: false }
          const sketchJSON = sketch.export(layer, options)
          
          const options = { formats: 'png', output: false }
          const buffer = sketch.export(layer, options)
          

          Export an object, using the options supplied.

          Parameters  
          objectToExportLayer / Layer[] / Page / Page[] The object to export.
          optionsobject Options indicating which sizes and formats to use, etc..
          options.outputstring this is the path of the folder where all exported files are placed (defaults to "~/Documents/Sketch Exports"). If falsey, the data for the objects are returned immediately.
          options.formatsstring Comma separated list of formats to export to (png, jpg, webp, tiff, svg, eps, pdf or json) (default to "png").
          options.scalesstring Comma separated list of scales which determine the sizes at which the layers are exported (defaults to "1").
          options[‘use-id-for-name’]boolean Name exported images using their id rather than their name (defaults to false).
          options[‘group-contents-only’]boolean Export only layers that are contained within the group (default to false).
          options.overwritingboolean Overwrite existing files (if any) with newly generated ones (defaults to false).
          options.trimmedboolean Trim any transparent space around the exported image (leaving it undefined will match Sketch’s behavior: trim for layers that do not have a background color).
          options[‘save-for-web’]boolean If exporting a PNG, remove metadata such as the colour profile from the exported file (defaults to false).
          options.compactboolean If exporting a SVG, make the output more compact (defaults to false).
          options[‘include-namespaces’]boolean If exporting a SVG, include extra attributes (defaults to false).
          options.progressiveboolean If exporting a JPG, export a progressive JPEG (only used when exporting to jpeg) (defaults to false).
          options.compressionnumber If exporting a JPG, the compression level to use fo jpeg (with 0 being the completely compressed, 1.0 no compression) (defaults to 1.0).

          The method returns:

          • undefined if options.output is undefined or a string
          • an array of Buffers if objectToExport is an array and options.formats is an image format
          • an array of Objects if objectToExport is an array and options.formats is json
          • a Buffer if objectToExport is a single item and options.formats is an image format
          • a Object if objectToExport is a single item and options.formats is json

          import

          var sketch = require('sketch/dom')
          
          const layer = sketch.createLayerFromData(buffer, 'svg')
          
          const svgString =
            '<svg width="200px" height="100px" viewBox="0 0 200 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><rect fill="#000000" x="0" y="0" width="200" height="100"></rect></svg>'
          
          const group = sketch.createLayerFromData(svgString, 'svg')
          

          Import a file as a Layer.

          Parameters  
          dataBuffer / string The data for the file.
          typestring The type of the file being imported. "svg", "pdf", "eps", or "bitmap".

          The method returns:

          • a Group if the type is svg or if the type is pdf and the pdf has only one page
          • an Image if the type is bitmap
          • a Page if the type is pdf and the pdf has multiple pages or eps

          find

          var sketch = require('sketch/dom')
          sketch.find('Shape')
          
          // find all the Shapes in the current Document
          sketch.find('Shape')
          
          // find all the Layers in the first Page of the Document
          sketch.find('*', document.pages[0])
          
          // find all the Layers named "Layer-Name"
          sketch.find('[name="Layer-Name"]')
          
          // find all the Shape named "Layer-Name"
          sketch.find('Shape, [name="Layer-Name"]')
          

          ⚠️ This API is in preview. It might change in the future depending on the feedback from the community.

          Find Layers fitting some criteria.

          Parameters  
          selectorstring - required The object to export.
          scopeGroup / Document The scope of the search. By default it is the current Document.