HTML objekti u Sketch-u

Primjer HTML stranice: https://hyperlayer.co/test/

Page

Slojevi stranica su organizacijska apstrakcija najviše razine unutar dokumenta.

Koristi se za elemente:

• html

{
    "_class": "page",
    "do_objectID": "217f554f-cbdb-46b8-b8c9-8c4b710fa44b",
    "booleanOperation": -1,
    "isFixedToViewport": false,
    "isFlippedHorizontal": false,
    "isFlippedVertical": false,
    "isLocked": false,
    "isVisible": true,
    "layerListExpandedType": 0,
    "name": "Document",
    "nameIsFixed": false,
    "resizingConstraint": 63,
    "resizingType": 0,
    "rotation": 0,
    "shouldBreakMaskChain": false,
    "exportOptions": {
        ...
    },
    "frame": {
        "_class": "rect",
        "constrainProportions": false,
        "height": 1326.5625,
        "width": 1600,
        "x": 0,
        "y": 0
    },
    "clippingMaskMode": 0,
    "hasClippingMask": false,
    "style": {
        ...
    },
    "hasClickThrough": true,
    "groupLayout": {
        "_class": "MSImmutableFreeformGroupLayout"
    },
    "layers": [],
    "includeInCloudUpload": true,
    "horizontalRulerData": {
        ...
    },
    "verticalRulerData": {
        ...
    }
}

Artboard

Artboard slojevi pomoć su u organizaciji dokumenta. Imaju fiksni okvir kojim obično preslikavaju varijacije dimenzija uređaja ili veličine prikaza.

{
    "_class": "artboard",
    "do_objectID": "4d8faf43-8ec8-48fb-ab10-1cce47a4b411",
    "booleanOperation": -1,
    "isFixedToViewport": false,
    "isFlippedHorizontal": false,
    "isFlippedVertical": false,
    "isLocked": false,
    "isVisible": true,
    "layerListExpandedType": 0,
    "name": "Document",
    "nameIsFixed": false,
    "resizingConstraint": 63,
    "resizingType": 0,
    "rotation": 0,
    "shouldBreakMaskChain": false,
    "exportOptions": {
        ...
    },
    "frame": {
        "_class": "rect",
        "constrainProportions": false,
        "height": 1283.6875,
        "width": 1584,
        "x": 0,
        "y": 0
    },
    "clippingMaskMode": 0,
    "hasClippingMask": false,
    "style": {
        ...
    },
    "hasClickThrough": true,
    "groupLayout": {
        "_class": "MSImmutableFreeformGroupLayout"
    },
    "layers": [],
    "hasBackgroundColor": false,
    "includeBackgroundColorInExport": true,
    "includeInCloudUpload": true,
    "isFlowHome": false,
    "presetDictionary": {},
    "resizesContent": false,
    "backgroundColor": {
        ...
    },
    "horizontalRulerData": {
        ...
    },
    "verticalRulerData": {
        ...
    }
}

Group

Grupni slojevi pomoć su u organizaciji dokumenta.

Koristi se za elemente:

• div

• text *

{
    "_class": "group",
    "do_objectID": "50ed9238-d844-4dd2-9265-704326e89f82",
    "booleanOperation": -1,
    "isFixedToViewport": false,
    "isFlippedHorizontal": false,
    "isFlippedVertical": false,
    "isLocked": false,
    "isVisible": true,
    "layerListExpandedType": 0,
    "name": "(body)",
    "nameIsFixed": false,
    "resizingConstraint": 63,
    "resizingType": 0,
    "rotation": 0,
    "shouldBreakMaskChain": false,
    "exportOptions": {
        ...
    },
    "frame": {
        "_class": "rect",
        "constrainProportions": false,
        "height": 1283.6875,
        "width": 1584,
        "x": 8,
        "y": 21.4375
    },
    "clippingMaskMode": 0,
    "hasClippingMask": false,
    "style": {
        ...
    },
    "hasClickThrough": false,
    "groupLayout": {
        "_class": "MSImmutableFreeformGroupLayout"
    },
    "layers": []
}

ShapeGroup

Oblici slojeva grupiraju slojeve s više oblika.

Koristi se za elemente:

• rectangle *

{
    "_class": "shapeGroup",
    "do_objectID": "3af6aa1d-7c4a-4e68-9712-387915b0311b",
    "booleanOperation": -1,
    "isFixedToViewport": false,
    "isFlippedHorizontal": false,
    "isFlippedVertical": false,
    "isLocked": false,
    "isVisible": true,
    "layerListExpandedType": 0,
    "name": "\/html[1]\/body[1]",
    "nameIsFixed": false,
    "resizingConstraint": 63,
    "resizingType": 0,
    "rotation": 0,
    "shouldBreakMaskChain": false,
    "exportOptions": {
        ...
    },
    "frame": {
        "_class": "rect",
        "constrainProportions": false,
        "height": 1283.6875,
        "width": 1584,
        "x": 0,
        "y": 0
    },
    "clippingMaskMode": 0,
    "hasClippingMask": false,
    "style": {
        ...
    },
    "hasClickThrough": false,
    "groupLayout": {
        ...
    },
    "layers": [
        ...
    ],
    "windingRule": 1
}

Rectangle

Sloj pravokutnika dobijemo kod dodavanja oblika Rectangle na platno.

Koristi se za elemente:

• body

• div

• hr

• ...

{
    "_class": "rectangle",
    "do_objectID": "b0bf44dc-940a-4aa5-84f6-051ba5b73a6d",
    "booleanOperation": -1,
    "isFixedToViewport": false,
    "isFlippedHorizontal": false,
    "isFlippedVertical": false,
    "isLocked": false,
    "isVisible": true,
    "layerListExpandedType": 0,
    "name": "rectangle",
    "nameIsFixed": false,
    "resizingConstraint": 63,
    "resizingType": 0,
    "rotation": 0,
    "shouldBreakMaskChain": false,
    "exportOptions": {
        ...
    },
    "frame": {
        ...
    },
    "clippingMaskMode": 0,
    "hasClippingMask": false,
    "style": {
        ...
    },
    "edited": false,
    "isClosed": true,
    "pointRadiusBehaviour": 1,
    "points": [...],
    "fixedRadius": 0,
    "needsConvertionToNewRoundCorners": false,
    "hasConvertedToNewRoundCorners": true
}

Text

Tekstualni sloj predstavlja diskretni blok ili liniju teksta.

Koristi se za elemente:

• h[1-6]

• p

• span

• label

{
    "_class": "text",
    "do_objectID": "6d02c771-fd4b-4528-8a3c-451c7306080d",
    "booleanOperation": 0,
    "isFixedToViewport": false,
    "isFlippedHorizontal": false,
    "isFlippedVertical": false,
    "isLocked": false,
    "isVisible": true,
    "layerListExpandedType": 0,
    "name": "My First Page",
    "nameIsFixed": false,
    "resizingConstraint": 47,
    "resizingType": 0,
    "rotation": 0,
    "shouldBreakMaskChain": false,
    "exportOptions": {
        ...
    },
    "frame": {
        ...
    },
    "clippingMaskMode": 0,
    "hasClippingMask": false,
    "style": {
        ...
    },
    "attributedString": {
        "_class": "attributedString",
        "string": "My First Page",
        "attributes": [{
            "_class": "stringAttribute",
            "location": 0,
            "length": 13,
            "attributes": {
                "MSAttributedStringFontAttribute": {
                    "_class": "fontDescriptor",
                    "attributes": {
                        "name": "Helvetica",
                        "size": 32
                    }
                },
                "MSAttributedStringColorAttribute": {
                    "_class": "color",
                    "alpha": 1,
                    "blue": 0,
                    "green": 0,
                    "red": 0
                },
                "paragraphStyle": {
                    "_class": "paragraphStyle",
                    "alignment": 0
                }
            }
        }]
    },
    "automaticallyDrawOnUnderlyingPath": false,
    "dontSynchroniseWithSymbol": false,
    "glyphBounds": "{{0, 0}, {0, 0}}",
    "lineSpacingBehaviour": 2,
    "textBehaviour": 0
}

Bitmap

Bitmap slojevi sadrže jednu sliku.

Koristi se za elemente:

• img

{
    "_class": "bitmap",
    "do_objectID": "af4a6d46-af4d-4626-9041-a4a82548f89d",
    "booleanOperation": -1,
    "isFixedToViewport": false,
    "isFlippedHorizontal": false,
    "isFlippedVertical": false,
    "isLocked": false,
    "isVisible": true,
    "layerListExpandedType": 0,
    "name": "\/html[1]\/body[1]\/img[1]",
    "nameIsFixed": false,
    "resizingConstraint": 63,
    "resizingType": 0,
    "rotation": 0,
    "shouldBreakMaskChain": false,
    "exportOptions": {
        ...
    },
    "frame": {
        ...
    },
    "clippingMaskMode": 0,
    "hasClippingMask": false,
    "style": {
        ...
    },
    "clippingMask": "{{0, 0}, {1, 1}}",
    "fillReplacesImage": false,
    "image": {
        "_class": "MSJSONFileReference",
        "_ref_class": "MSImageData",
        "_ref": "images\/d08c1da1c88ba69c0bea5c9bc165b7413eec1d1d.png"
    },
    "intendedDPI": 72
}