/JSON-to-Layers

Primary LanguageJavaScriptMIT LicenseMIT

JSON to Layers

JSON to Layers HERO

You can import from Fireworks PNG (as JSON) to the Sketch (for ver.41). (README in Japanese)

TL;DR: Fireworks to Sketch 3 — QuickCast.

Old Versions

Installation

Download the plugin zip and unzip. Open the Folder and double click the "JSON to Layers.sketchplugin".

And need install "Fw to JSON" command.

Usage

  1. Create new document and run the plugin in Sketch.
  2. Select the exported JSON file in the Fw to JSON.
  3. To complete the import wait a little.

Import JSON on Sketch.

Pages & States

Pages and States convert as Artboards. Pages are arranged horizontally to the canvas. Stataes are vertically aligned to the canvas.

Rectangle

If not transformed create Rectangle Layer in Sketch. Otherwise, create layer by Path.

Layer and Sub-Layer

Layers and sub-layers convert group layer with enabled "Click-through when selecting".

Feather (Fill & Stroke)

Can't convert the feather.

Gradinent Fill

Will convert Linear to Liner Gradient, Radial and Elliptical to Radial Gradient, Conical to Angular Gradient. otherwise convert to Linear gradient in Sketch.However, conical is incomplete conversion.

Pattern Fill

Export as a bitmap of applying the pattern. Original pattern files are not exported.

Stroke

Stroke setting to be converted is as follows.

  • Stroke width
  • Stroke position
  • Radius
  • dash setting
  • shape (circle or square)

3-th of each gap and line setting are discared in Sketch.

Blending

These blend mode is not supported in the Sketch. Convert as "Normal".

  • average
  • dissolve
  • inversecolorburn
  • softburn
  • linearburn
  • inversecolordodge
  • softdodge
  • lineardodge
  • softlight2
  • vividlight
  • linearlight
  • pinlight
  • hardmix
  • negation
  • red
  • green
  • blue
  • reflect
  • glow
  • freeze
  • heat
  • additive
  • subtractive
  • subtract
  • interpolation
  • stamp
  • xor
  • invert
  • tint
  • erase

Live Effects

There Live Effects are not convert.

  • Ajust Color
    • Auto Levels
    • Brightness/Contrast
    • Curves
    • Hue/Saturation
    • Invert
    • Levels
  • Bevel and Emboss
  • Blur
    • Blur
    • Blur More
    • Radius Blur
  • Other
  • Sharpen
  • Photoshop Live Effects
    • Bevel and Emboss
    • Satin
    • Pattern Overlay

Text

Inside process is different, it will not be same result.

Symbol

Symbol convert as symbol. but, if Different bounding, generate as new symbol.

Auto Shape

Convert as Group.

Texture and Bitmap

Export as Fireworks PNG and apply patterned Fill in Sketch.

Bitmap Mask

Sketch can't use bitmap as a mask. Instead, use a rectangle of same bounding. Import a bitmap manually, if necessary.

Bug reports

  1. Open Console.app from /Applications/Utilities/.
  2. Type "Sketch Plugin" in filter box.
  3. Run broken plugin.
  4. Submit output of the Console.app via Github issues with the version of your Sketch.app.

Lisence

This software is released under the MIT License, see LICENSE.