Code Monkey home page Code Monkey logo

sketch-framer-3's Introduction

Sketch Framer 3

BEWARE: The plugin is not yet ready for human consumption. Also: it requires Sketch 3.0.3 7882 or better, and Framer Generator Version 3.0.26 (30) or better

This is the home of version 3 of the Sketch Framer plugin, for Sketch 3, to export to Framer 3. Yes, 3.0 is the new black.

Known Issues

  • Complex documents will crash Sketch on export. We're working to get that fixed, but meanwhile you can try these workarounds:
    • Flatten complex layers, either by adding a * to the end of the layer name, or by converting them to bitmaps
    • Split your document in multiple documents
    • Delete layers you don't plan to use (or mark them as "Please ignore" by adding a - to the layer name)

How-to

Run this on the project folder to concatenate the multiple parts of the plugin into a single .sketchplugin file and install it into all known destinations (Sketch Release, Sketch Beta, Framer Generator):

rake

Please note:

  • This script assumes that Framer Generator.app lives in /Applications/. Please move it there if it isn't installed already.
  • Right now the plugin only generates the view information of a Framer project if you run it from Sketch. This is because the plugin is intended to be run from Framer Generator, which takes care of generating the whole project skeleton.
  • The Export to Framer.sketchplugin file won't be stored in the repo until we get all the issues fixed :)

Development

If you'll be working on the plugin's code, you'll probably want to get the build system working. For that, you need to run this once, after cloning the repo:

$ sudo gem install bundler
$ bundle install --path vendor/bundle

and then, when you want to work on the code, run this:

$ bundle exec guard -i

This will watch the repo folder, compile and install the plugin everytime a .js file on the 'src' folder is updated. It'll also announce the fact with a nice voice message.

When you're done, just hit Ctrl + C on the Terminal window to stop guard.

TODO

  • hidden layers should remain hidden after export
  • hidden layers should have metadata visibility set to none
  • hide artboards others than the first
  • fix position for nested layers
  • fix position for layers with shadows
  • fix random crashes
  • backport Cemre's mask support
    • I think this is done, but I need testers to confirm it...
  • Optimization: export all assets in the same sandbox operation?
  • Export in a tmp folder, and pass it to Framer Generator so it moves the files to the right place
  • Layer stacking is wrong? Check align.sketch #7
  • Add back keywords #10
    • Flatten To have a group flattened so its child groups don't export individually, append * to its name. Example: Card*. Flattening complex groups will improve performance.
    • Shape/text layers To export a shape or a text layer as a view, put it in a group, or append + to its name. Otherwise they will export as a background image.
    • Ignore To ignore a layer, append - to its name. Example: Ignored-
    • Hidden layers Hidden layers in Sketch will be exported as hidden layers in Framer. To show the layer in Framer, try layer.visible = true
  • Masks Native masks now work! You can also use Scroll in the name of a group that includes a mask to make that group scrollable. To scroll the layer in Framer, do layer.scroll = true
  • Fix artboard positions
  • Symbol support?
  • Issue #12 seems to be related with layer complexity
  • Also, layers named just '+' are exported when they shouldn't (also, they seem to crash the script?)
  • #15 Remove keywords (*/+) from layer name for easier access
  • #16 document crashes.
    • I thought this was related to elapsed running time (timeouts, maybe?), but a basic, long running script works without a hitch.
    • Maybe we could move back to export assets one by one?
  • #17 document crashes
  • #10 + keyword not working in bitmap layers
  • #10 * keyword not removed from JS name

Ideas / Future

  • Maybe add a preference panel where you can setup export options (specially if we end up flattening complex layers to avoid crashes)

sketch-framer-3's People

Contributors

bomberstudios avatar koenbok avatar

Watchers

The Gitter Badger avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.