Sessions need a laptop or desktop.

If you’re on your phone now, that’s fine. Enrol now and we’ll email you a link so you can pick up when you’re at a computer.

Enrol free →

Takes a minute. No payment, and no card at any point.

Or read on

Figma · Foundations

Turn a brief and a first draft into a booking app anyone can click through, on Figma’s free plan.

What you’ll end up with

One finished three-screen booking flow, shared as a clickable prototype. Home, Choose a service and Confirm booking, each a phone-sized screen built from the copy deck with its mistakes put right; a button component used on all three screens and a service card component used three times; the brand’s colour style and text style, applied; and a named prototype flow shared as a view-only link that opens for someone who is not signed in.

10½

hours in all — about 7 guided, 3½ on your own

6

sessions. Each designed to be completed in one sitting

Free

No payment and no card required.

Finishing gives you a completion record showing the work you built, and all three levels earn the Alongrail Certificate in Figma. See what you’ll build →

You don’t need prior experience with Figma. There’s no payment and no card required.

From a brief and a first draft to a booking app anyone can click through

In this course, Alongrail checks some steps on your screen. Others it can’t read reliably, so you confirm those yourself.

Alongrail is not affiliated with, endorsed by or connected to Figma. Figma is named here as the software the course teaches, and nothing more.

01110 min

Get in, and let Make draw a first draft

You are signed in on Figma's free plan, Figma Make has drawn a first draft of the firm's home screen from its brief, and your own design file exists with its page named, a picture of the draft on the canvas as a reference, and an empty frame for the first screen at exactly the size the brand list gives.

6 checked on your screen · 5 you confirm

02110 min

Home, from the copy deck

Home holds the logo at the brand list's width, the approved headline in the heading font and size, the subline, the van photograph filling its box without being stretched, and the phone line with the firm's real number — every fact the draft guessed at, put right from the copy deck.

7 checked on your screen · 2 you confirm

0395 min

One button, built once

The booking button exists once, as a main component built with auto layout to the brand list's padding, filled with the primary colour by its code, and Home uses it as an instance — so a change made once will reach every screen that uses it.

5 checked on your screen · 2 you confirm

0480 min

Say the colour and the type once

The file has a colour style and a text style named as the brand list names them, the button's main component and Home's headline use them, and both show among the file's local styles — so the brand's teal and its heading are each defined in one place.

4 checked on your screen · 1 you confirm

05125 min

Two more screens, and a second component

The two screens the brand list names after Home exist at Home's size, built from the copy deck: a Service card component used three times with each service's words, price and photograph, the button's words changed on each screen without touching its master, and the firm's name put right where the copy deck spelt it two ways.

7 checked on your screen · 2 you confirm

06100 min

Click through it, and hand it over

The three screens click through in order and back to the start, as a prototype flow named as the brand list names it; you have played it, shared it so anyone with the link can view it, and opened the link in a private window to see exactly what someone without a Figma account sees.

6 checked on your screen · 2 you confirm

What you need before you start

A laptop or desktop

Sessions need a laptop or desktop. If you’re on your phone now, that’s fine. Enrol now and we’ll email you a link so you can pick up when you’re at a computer. Figma runs in the browser, on Windows or a Mac.

Chrome or Edge

Alongrail runs in the browser too, in its own tab beside Figma.

Figma

Figma runs in your browser. Nothing is installed.

Figma →

The course files

Everything you work with is in the download.

No cardNo work emailNo experience needed

What’s free

The whole course: every session, both parts, the files, and your record. Alongrail charges nothing for it. No payment, and no card at any point.

The software

Nothing is paid at any point. Figma's free Starter plan carries everything this course uses, and the course names the paid features it steps round.

The data you’ll work with
Quillfern brand
Quillfern copy
The work you do
The finished clickable prototype

Every file is invented — the companies, the people and everything in them are made up for the course.

Before you start

The course covers Figma, in your browser.

  • A computer with a current desktop browser — Chrome, Edge, Firefox or Safari — and an internet connection. Nothing is installed.
  • A free Figma account. The first step of session one makes one with you if you have none; it is free, and no payment details are asked for. If Figma offers a paid plan or a trial, choose the free Starter plan.
  • quillfern-files.zip, downloaded from the course page and unzipped into one folder you can find again. It holds the brand list quillfern-brand.csv, the copy deck quillfern-copy.csv, the Make brief quillfern-make-brief.txt, the logo quillfern-logo.png, four photographs, and quillfern-make-fallback.png, a picture of a first draft to use if Make cannot be.
  • A spreadsheet program or a text editor to read the .csv and .txt files; any will do, and the course never asks you to change them.
  • The five Quillfern start pictures, quillfern-s2-start.png to quillfern-s6-start.png, in the same folder — pictures of where each session starts, to rebuild from only if your own file is lost.
  • wrenhaven-files.zip and the five Wrenhaven start pictures for the second business, downloaded into the same folder and the zip unzipped there. Every one of their names carries the business, so both sets can sit together.
  • A way to take a picture of part of your screen: on Windows, the Windows logo key with Shift and S opens the Snipping Tool's selection; on a Mac, Command with Control, Shift and 4 takes a picture of an area straight to the clipboard. Both are part of the computer, not something to install.
  • Share your whole screen when Alongrail asks, not one browser tab: the course moves between Figma's own tabs, the picture tool and, at the end, a private browser window, and a single shared tab would hide all of them.
  • Figma Make once. Figma's free plan gives a small daily allowance of AI use, and the first draft in session one uses most of a day's. If Figma says your allowance has run out, the supplied draft picture takes its place and nothing else changes.
  • Who can see your work: files you make stay in your own drafts. Figma's own default lets a person look at a draft only if you send them its link, and nothing is sent to anyone until session six, which says who can open the link before it exists. On the free plan a shared prototype link also lets the person holding it look at the design file behind it; they cannot change it. Every business, name, number and photograph in the course is invented.
  • Alongrail is not affiliated with, endorsed by or connected to Figma. Figma is named here as the software the course teaches, and nothing more.

Alongrail teaches the software and gives you a record of what you built, with a link to the work itself. What happens with it afterwards is yours. We don’t place people and we take no part in anyone’s recruitment process.

Enrol free and start now.

Sign in, confirm the one thing the course needs, and session 1 opens. No payment, and no card at any point.

If something goes wrong on the way, press “Something’s wrong” in the panel, or write to hello@alongrail.com — we reply within one working day.

Frequently asked questions

What you build

Take a small firm's brief, logo, photographs and copy deck and turn them into the core booking flow of a phone app — three screens built on Figma's canvas from a first draft Figma Make drew, with a button made once and used everywhere, a colour style and a text style, connected into a prototype anyone with the link can click through — on Figma's free plan, in a browser.

One Figma design file in your drafts holding the three screens of a plumbing firm's booking flow — Home, Choose a service and Confirm booking — each a named phone-sized screen built from the copy deck with its mistakes put right; a button component used on all three screens and a service card component used three times; the brand's colour style and text style, applied; and a named prototype flow shared as a view-only link that opens for someone who is not signed in. With it in your drafts, the Make file that drew the first draft.

How a session works
  1. Open Figma
  2. Share your screen
  3. One instruction
  4. You do it
  5. It confirms it
  6. Next

You open Figma and share your screen. Alongrail reads what’s there and gives you one instruction. You do it. It confirms the step landed, then gives you the next one. If something doesn’t match what you see, one button gets you back on track.

Guided

AlongrailMore detailMinimise

Next step

In the Fields list, tick Region. The chart fills in.

One field on the axis, one measure as the value.

Ask about this step
Done — what next
3 looksStop sharingEnd session

then

On your owna different company’s data

AlongrailMore detailMinimise

Quiet

Same job, a different company's files. Alongrail stays quiet until you ask.

Ask about this step
Help
3 looksStop sharingEnd session

Guided, then on your own.

The second part of every session uses a different company’s data, with the same kind of mess in different places. Alongrail stays quiet until you ask. It’s the work your record points to.

About 10½ hours in all·about 7 guided·about 3½ on your own

What you earn — the record, the certificate and a sample

Completion record

Name
Your name
Course
Figma Foundations — design a three-screen booking app from a first draft, and share it as a clickable prototype
Completed with guidance
The date you finish
Project
The clickable prototype you built on your own →
Skills demonstrated
Giving Figma Make a written brief, reading its first draft against the brief, and rebuilding it properly on the canvas · Making phone-sized frames at typed sizes and naming every frame, page and layer so anyone can find it · Setting text from a copy deck at a stated font and size, and putting right a copy deck that disagrees with itself · Placing a logo at a stated width and filling a box with a photograph without stretching it · Building a button with auto layout to a stated padding, making it a component and using its instances with their words changed · Making a colour style and a text style from a brand list and applying them · Building a three-screen flow with a second component used three times · Connecting screens into a prototype, naming its flow, sharing it view-only and checking it opens for someone who is not signed in

What was built

One Figma design file in your drafts holding the three screens of a plumbing firm's booking flow — Home, Choose a service and Confirm booking — each a named phone-sized screen built from the copy deck with its mistakes put right; a button component used on all three screens and a service card component used three times; the brand's colour style and text style, applied; and a named prototype flow shared as a view-only link that opens for someone who is not signed in. With it in your drafts, the Make file that drew the first draft.

The 6 sessions, and when each was completed on their own

Session 1Get in, and let Make draw a first draftthe date
Session 2Home, from the copy deckthe date
Session 3One button, built oncethe date
Session 4Say the colour and the type oncethe date
Session 5Two more screens, and a second componentthe date
Session 6Click through it, and hand it overthe date

Each session was completed twice: once with step-by-step guidance on one company’s data, then on a second company’s data from a brief, with guidance only when asked. Every check passed on both. Alongrail checked some steps on screen. The learner confirmed the others. Alongrail records the sessions, the checks and the dates; the dashboard itself is the learner’s own, hosted where they chose.

A completion record for Figma Foundations, now. It names the course, the date you finished, the skills you demonstrated, and links the clickable prototype you built on your own. It’s private until you publish it, and you can unpublish it at any time.

The record is a description of work you did, not a claim about you. Anyone who opens it can see the work for themselves.

See a sample record →

The Alongrail Certificate in Figma when all three levels are complete. Foundations is the first of three. Practitioner and Professional are in development, with no dates. See the track →

Your screen stays yours

It looks when you ask. Never otherwise. Images of your screen are not stored. What Alongrail sees →

Nothing you build is public until you publish it. Your record is private until you say so, and you can unpublish it at any time.

What’s Figma?

Figma is the software this course is built in. It runs in your browser.

You won’t learn it by watching hours of tutorials. You’ll learn it by building something real with it.

Who you’re building it for

Quillfern Plumbing is a family firm of three plumbers and one van. Customers ring to book a visit, and the phone rings while everybody is under a sink. The owner wants an app where customers book for themselves, and before she pays anyone to build it she wants to see its three main screens and click through them. Her nephew has sent the firm's logo, four photographs, a brand list and a copy deck with every word the screens need, and he tried an AI tool once and liked the look of what it drew. Nobody has read the copy deck against itself, and in places it disagrees with itself and with the photographs. You have a browser, a free Figma account and the files; every name, number and photograph in them is invented for this course.

Your job is to build the clickable prototype that answers it.

Do I need to know Figma already?

No. The course assumes you’ve never opened it.

What if I get stuck?

Press the button in the panel and say what you see. Alongrail works out where you actually are and picks the instruction back up.

Why 10½ hours, when other courses are 40?

Because the time is spent doing the work rather than watching it. About 7 hours is guided; the rest is you building the same thing again on your own.

What does Alongrail see on my screen?

Only the window you choose to share, and only when you ask it to look. Images of your screen are not stored by Alongrail. What Alongrail sees →

Can I use a Mac?

Yes. Figma runs in the browser.

What if I miss a week?

Nothing closes. The dates are there to help you keep moving, not to catch you out.

What’s the “on your own” part?

The second half of every session: the same work on a different company’s data, with Alongrail quiet unless you ask. Both parts are needed for your completion record.

Is it really free?

Yes. No payment, and no card at any point.

Who can see what I build?

Nobody, until you say so. Your record is private until you publish it, and you can unpublish it at any time. What you build stays in your own files or account; where a step publishes something to the software’s own site, the step says so and says who can see it.

Where this course sits

Figma Foundations is Foundations in Figma. The track has three levels; each one you complete earns its own record, and all of them together earn the Alongrail Certificate in Figma. All the courses →