Beginner’s Guide

Updated

Welcome to Sketchflow! This guide is here to help you hit the ground running, even if you’ve never build a product before. Follow these steps to move smoothly from your first login to your very first runable website.

1. Setting Up Your Account

  • Sign Up or Log In

Access the Sketchflow platform and create your free account, or log in with your existing credentials.

Setting-up-Sketchflow-account

  • Explore the Dashboard

Get comfortable with your workspace—this is where all your projects come to life.

Project-dashboard-interface

2. Starting Your First Project

Sketchflow offers three ways to kick off a new project:

  • Blueprint : Start from scratch by describing your product and its key features.
  • SnapDesign : Have inspiration images? Upload screenshots, and Sketchflow will create initial designs for you.
  • Template Library : Browse ready-made templates and copy one to your workspace for quick customization.

Just choose the option that fits you best, then follow the simple prompts.

3. Building and Editing Your Design

Blueprint Mode

  • Enter your product info and requirements. Additionally, you can keep your project description as simple as a list of key features or make it as detailed as a full product requirement document.

    Creating-project-in-blueprint-mode

  • Sketchflow will help you map out workflows (user journeys) for your product, and you can further adjust and refine them based on your specific needs.

    Editing-product-workflow

  • Directly generate interfaces for the auto-selected key nodes in your project.

    Auto-select-key-pages

  • Choose or describe your style preferences, or use AI recommend style.

    Choose-styles

  • Generate and edit interface mockups.

    Interface-mockups

SnapDesign Mode

  • Upload screenshots/images and add notes about your requirements.

    Uploading-screenshots-in-SnapDesign-mode

  • Receive auto-generated designs based on your references.

  • Edit layouts, sections, and elements to suit your vision.

Template Mode

  • Choose a template, copy it to your project, review its structure, and make changes to fit your product.

    Browsing-template-library

    Copying-and-customizing-templates

Wherever you start, you can always fine-tune sections, customize UI elements, and update design styles.

4. Code Generation

Generate source code for your ready-to-go, well-designed websites or mobile apps.

Code-workspace

5. Previewing and Sharing

  • Preview Mode Test your design and simulate user interactions to experience the flow like a real user. Instantly preview web projects in a simulated webpage, app projects with scanning QR code.

    Web-preview-button-1

  • Click the Preview button, you'll be redirected to:

    Web-preview-button-2

  • Scan QR code to preview your mobile app

    Mobile-preview-button

  • Collaboration & Sharing Share your project via a link or email. Assign view-only or importing permissions for teammates or stakeholders.

    Collaboration-and-sharing

6. Exporting Your Work

Download your finished design as Sketch, HTML files, Web (React.js), Android (Kotlin) and iOS (Swift). Ready for further editing in your favorite design tools such as Figma or Sketch for further customization.

Exporting-files-web
Exporting-files-mobile

Finish development in your IDE, complete the end-to-end development process.

7. Tips for Beginners

  • Feel free to experiment—AI support makes it easy to iterate and keeps your progress safe with version tracking.
  • Not sure where to start? Try using a template or SnapDesign for inspiration.
  • Tweak your design as much as you like; nothing is final until you’re satisfied.

Get Started Now

Open Sketchflow, start your first project, and bring your ideas come to life. No matter your background, Sketchflow puts powerful design tools at your fingertips—happy building!