AppChef Platform Tutorial

(For experienced Sketch users)

  • Click here for a more detailed version for newer users

Installation and Setup

1. Download and install Sketch from Sketch’s website:
https://www.sketchapp.com/download/sketch.zip

2. Download and install Appchef’s “Sketch2App” plugin:
https://sketchpacks.com/Live4Code/Sketch2App/install

3. Download and install Craft plugin from Invision: 
https://www.invisionapp.com/craft

4. Download an app called Expo to your phone:
iOS: https://itunes.apple.com/us/app/expo-client/id982107779?mt=8
Android: https://play.google.com/store/apps/details?id=host.exp.exponent&hl=en

Sign Up for Trial Access

1. Visit our website:
http://appchef.io

2. Click the “Sign Up” button on the upper right corner

3. Enter your name and email and hit “Submit” to get access to the service

4. We will then start the process for setting up your account. Wait for our email response, which will include a link to our portal to finish your sign up.

Using the Template

  1. Open up the AppChef Sketch template with Sketch. On the first page you will see an empty artboard named “Home”. This artboard will serve as the home screen of your application. If no “Home” artboard is named a list of all the artboards will be the home screen.
  2. From this point, you can start adding symbols from our library the usual way. These symbols correspond with actual mobile components that will draw the attributes that you set and render them in the live app. Things such as font, color, position, and many other attributes changes are currently supported through detaching the symbol instance.
  3. Create or duplicate artboards to create new screens as you usually would.
  4. Once you have your screens created you need you will need to link them together. This is where we utilize the Craft plugin’s “prototype” feature. simply select a component that you wish to use as a link (like a button) and hit “C” on the keyboard and an arrow from the component will appear connected to your mouse pointer. From here, simply click on the screen you wish the component to link to and a line will appear showing the link. In some component symbols, you may have to detach in order to select the layer or group that you wish to link.
  5. When you are satisfied with all the screens and have linked them all together, you can upload your designs through our plugin to our platform. It will ask you to enter you username and password. This will be the same credentials you use to log onto our portal. You must detach any symbols including images and give the image layer a unique name or you will encounter an error when uploading the file.
  6. Once the upload has completed, log onto our portal using your username and password from earlier and you will see the file under your projects. The name will reflect the name of the file you uploaded.
  7. Find the QR code column in the portal. Using a free app called “Expo” from the app store you can scan the QR code for your project and Expo will generate a live app based on your designs, including links and all.

Thanks for using AppChef, feel free to contact on Facebook or Twitter using @appchefteam or here on Medium if you have any questions or comments.