Over the last few months I’ve been using Figma as the design engine for building our new online course. The course contains around 65 short form videos, with several hundred slides, all custom designed (plus a ton of other assets). This is first time we’ve used the tool in this way - it’s been a learning curve. Here’s a snapshot of our workflow:

🎨 1. Brand Kit: Create a core set of brand / deck assets, with as many variations on layouts as you can stomach (this saves time later)

🔳 2. Storyboard: Sketch each bit on paper first with a rough idea of the layout that best explains the concept (it’s too easy to get lost in a vortex of design options, so go offline first). Aim for max 10 slides (I always end up with more alas)

🖼️ 3. Sections: Set up your content using Figma’s new ‘Section’ option. Name each one

✍🏽 4. Describe: Start in Figma by adding 1-2 lines of text for each slide (try using the model of ‘Objective’, ‘Narrative’ and ‘Transition’ for each one). No images yet!

🎥 5. Layout: Add the layouts once the text feels cohesive. To test this, focus on a) mini scenes (2-5 slides), and b) the transitions from one slide and scene to another (pro tip: narrative transitions are much underrated)

🪄6. Extras: Import any additional resources you want to use (i.e. from places like Google Slides). Use the PDF to Figma plugin to do this. Import them at 2-3x size, lay out the slides you need, then rebuild using your layout template. I don’t do this earlier as I find I can get overwhelmed by material

📸 7. Images: Use Figma’s Unsplash plugin to quickly find and add images

✄ 8. Trim: Cut as much text as you can from the slides. Yes, you may need to change layout here. It’s worth it though

🎤 9. Narrate: Re-run your narrative, do a rough timing check, shunt things around (probably 10 times)

🧽 10. Clean: all the slide frames in numerical order so you can sequentially stack them into your delivery gear (we use mmhmm studio)

☕️ 11. Have a cup of tea

Pro Tip: If you can, work in a pair - switching places between image/styling and the narrative/content pieces. This reduces cognitive overload a LOT (shout out to Fer Franco - our wonderful experience design whiz)

How to use Figma for building online courses

There's something wrong. Great! Check your inbox and click the link to confirm your subscription.