FlowShot Setup Guide

Okay, so the easy way decided to play hard to get? No worries at all! This guide will walk you through setting things up manually. It's a little more hands-on, but you'll be a FlowShot pro in no time. Let's do this!

1. 1

   Install Node.js

   Node.js is like a backstage pass for running cool JavaScript stuff on your computer. FlowShot's core needs it.

   Head over to the official Node.js website and download the installer for your operating system (Windows, macOS, or Linux). We recommend the LTS (Long Term Support) version.

   Visit Node.js Website

   Once installed, open your terminal (Command Prompt on Windows, Terminal on macOS/Linux) and type this to check if it's working:

   node -v

   You should see a version number like v18.12.0. If you do, awesome! If not, try restarting your terminal or your computer.

2. 2

   Install pnpm

   pnpm is a speedy and efficient way to manage project packages (bits of code). Think of it as a super-organized librarian for Node.js projects.

   With Node.js installed, open your terminal and run this command to install pnpm globally:

   npm install -g pnpm

   To check if pnpm is ready, type:

   pnpm -v

   Seeing a version number? Fantastic! You're cruising.

   (Psst! Now might be a good time to try that "Easy Setup" button in FlowShot again!)

3. 3

   Install FFmpeg

   FFmpeg is a magical tool for handling video and audio. FlowShot uses it to record your beautiful Figma animations and turn them into videos.

   Installing FFmpeg can be a bit different for each OS:

   • Windows: Download from FFmpeg official builds, extract, and add the bin folder to your system's PATH. (A quick web search for "add ffmpeg to path windows" will show you how!)
   • macOS (using Homebrew): If you have Homebrew, it's super easy!

     brew install ffmpeg

   • Linux: Usually available via your package manager. For example, on Ubuntu/Debian:

     sudo apt update && sudo apt install ffmpeg

   To check if FFmpeg is installed, type this in your terminal:

   ffmpeg -version

   If you see version information, you're golden!

4. 4

   Get the FlowShot Server Code

   This is the "brain" that FlowShot talks to. You'll need to download its code from GitHub.

   Open your terminal, navigate to a folder where you like to keep projects (e.g., Documents/Projects), and then run this command:

   git clone https://github.com/novincode/figma-flow-capture.git

   This will create a new folder named figma-flow-capture. Go into it:

   cd figma-flow-capture

   If you don't have git, you'll need to install it. Search "install git" for your OS. Most Macs and Linux systems have it pre-installed.

5. 5

   Install Server Goodies

   Now that you're inside the figma-flow-capture folder in your terminal, it's time to install all the bits and bobs it needs to run.

   pnpm install

   This might take a few minutes. Grab a coffee! ☕

6. 6

   Install Browser Drivers (Playwright)

   Playwright is what FlowShot uses to control a browser and capture your Figma designs. It needs to install specific browser versions.

   Still in the figma-flow-capture folder, run:

   pnpm exec playwright install

   This ensures all necessary browser components are downloaded. It might also take a little while.

7. 7

   Fire Up the Server! 🔥

   This is the moment of truth! Time to start the FlowShot server.

   In the figma-flow-capture folder, run:

   pnpm start

   You should see some messages in your terminal indicating the server is running, usually on a specific port like http://localhost:8787. Keep this terminal window open while you're using FlowShot. If you close it, the server stops.

8. 8

   Point FlowShot to Your Server

   Open the FlowShot desktop application. Go to its settings or preferences. You should find an option to specify the "Server Address" or "API Endpoint".

   Enter the address your server is running on (e.g., http://localhost:8787 if that's what your terminal showed).

   Save the settings, and FlowShot should now be able to communicate with your manually started server!