Giter Club home page Giter Club logo

userflows's Introduction

User Flows

A plugin for generating user walkthroughs from Artboards in Sketch.

Demo

Video
Watch on Vimeo

Example Output

UserFlows Example

Supported Versions

UserFlows is only supported in Sketch 3.3 or later. To check what version you have installed, go to Sketch > About Sketch.
About Sketch

Installation

Download and extract the contents of this repository. Then double-click the UserFlows.sketchplugin bundle to install the plugin. Remember, this will only work if you are working with Sketch 3.3 or later.

Usage

Generate Flows

  1. Select Layers that you want to use as hotspots (one Layer or Group per Artboard).
  2. If you don't need hotspots, select the Artboard itself.
  3. Run the plugin from Plugins > User Flows > Generate a Flow. Generate Flow Dialog
  4. Enter details for the flow and hit Generate.

Note: The sequence of screens in a flow is based on the x position of your Artboards. Sketch does not allow event-tracking (yet) so it's not possible to determine the order in which layers or Artboards were selected, although that would be ideal.

Settings

To manage settings for the plugin, go to Plugins > User Flows > _Settings.
Settings Dialog

Shortcut

Once you've installed the plugin you can trigger it using: control + shift + f.

Bugs, Features and Feedback

If you encounter bugs, or think of some awesome enhancements, please create an Issue on Github or send a message on Twitter @abynim.


MIT License © Aby Nimbalkar. I'm on Twitter and LinkedIn.

userflows's People

Contributors

abynim avatar jawngee avatar

Watchers

 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.