Hermes Wiki
Projects/tech-explainer-video-workflow

Tech Explainer Video Workflow — YouTube, Instagram, and Course Reuse

Production workflow for tech-focused explainer videos (system design, architecture walkthroughs, code demos) targeting YouTube and Instagram, with the same footage reused as unlisted YouTube lessons embedded in courses. Ties together the diagramming/design tools already documented in Eraser, Figma, and Canva.

1. Toolchain

Stage Tool Role
Scripting Teleprompter app + written script Draft the talk track/bullets; deliver on-camera segments with eye contact instead of reading off-screen.
Face recording (A-roll) Camera (webcam/DSLR/phone) Talking-head capture — intros, hooks, transitions, reactions.
Screen + diagram capture OBS Studio Records code editor, terminal, browser, and animated diagram canvases at 60fps.
Code walkthroughs VS Code Live coding, config walkthroughs, HTML/CSS/JS demos — clean theme, minimal chrome.
Architecture diagrams Eraser Diagram-as-code: fast system/AWS/microservice layout from text, exported as SVG.
Diagram polish + animation Figma Import Eraser's SVG, apply branding/dark-mode, build 16:9 and 9:16 frames, Smart Animate motion (packet flow, zoom-ins).
Thumbnails, slides, overlays Canva Thumbnails, title cards, lower-thirds, quick presentation slides.
Editing & assembly DaVinci Resolve Cuts A-roll/B-roll together, color grades, mixes audio, exports final formats.

Total tool cost at this tier: $0 — Eraser, Figma, Canva, OBS, VS Code, and DaVinci Resolve (non-Studio) are all free for a solo creator; see Tools/Figma for the free-tier breakdown.

2. Pipeline Overview

[1. SCRIPT]        [2. DIAGRAM]              [3. RECORD]              [4. EDIT]
Outline + talk  →  Eraser (code → layout)  →  OBS: screen + Figma  →  DaVinci Resolve
track, load to     → export SVG → Figma        canvas + VS Code         combine A-roll,
teleprompter        (brand, animate)            demos; Camera: A-roll    B-roll, diagrams,
                                                                          export per platform

Step 1 — Script & A-roll

  • Write the outline as a beat list, not a verbatim script: hook → problem → concept → diagram walkthrough → code demo → recap/CTA. Full sentences only for the hook and the recap, since those are the two places wording precision matters most.
  • Load the beat list into a teleprompter app (phone/tablet propped at lens height, or a teleprompter rig if recording regularly) — keeps eyeline on the lens instead of dropping to notes.
  • Record A-roll in short segments per beat rather than one continuous take; makes re-takes and edit-point insertion cheap.
  • Record a few seconds of room-tone / silent B-roll of yourself at the end of the session — useful as a cutaway under narration later.

Step 2 — Diagram pipeline (see Tools/Eraser and Tools/Figma for tool-level detail)

  1. Eraser — write the system layout as diagram-as-code (or use a template from its catalog); this is faster than manual drag-and-drop for anything with more than a few nodes.
  2. Export as SVG, not PNG. SVG imports into Figma as independently editable layers (every box/line/icon separate); PNG imports as one flattened image with no per-element editing or Smart Animate capability. This is the single most consequential export decision in the whole pipeline.
  3. Figma — drop the SVG in, set the frame size for the target platform (1920×1080 or 3840×2160 for YouTube, 1080×1920 for Reels/Shorts, 1080×1350 or 1080×1080 for IG feed/carousel), apply brand colors/dark-mode/typography.
  4. Smart Animate across duplicated frames to animate what the narration is describing in real time — a highlighted request moving from client to API gateway to database, a box scaling up to "zoom into" its internals, a sequence of steps appearing progressively. Animating in sync with the talk track (not as a generic fade) is what makes a diagram read as an explanation rather than a picture.
  5. Export the animated sequence as video/GIF, or screen-record the Figma canvas live via OBS while manually stepping through frames — the live-record approach is often faster for a single video and skips Figma's export plugin setup.

Step 3 — Screen + code capture (OBS)

  • One OBS scene per capture type: full-screen VS Code, full-screen browser (for HTML/CSS/JS demos or live sites), and Figma canvas. Switch scenes rather than re-window each session.
  • VS Code: increase font size (18–22pt) for readability at 1080p/vertical crop, use a high-contrast theme, hide the sidebar/status-bar clutter you're not actively narrating, and disable notification popups (Slack, email, OS) before recording.
  • HTML/CSS/JS walkthroughs: record the browser dev tools alongside the editor when the point is "this CSS produces this layout" — split-screen editor+browser reads clearer than cutting between two separate full-screen clips.
  • Record screen and mic as separate tracks (OBS supports this natively) so audio can be cleaned/leveled in DaVinci without re-touching video.
  • Capture at 60fps even if the final export is 30fps — smoother slow-motion/reframe headroom in the edit, and any Smart Animate motion capture benefits directly from the extra frames.

Step 4 — Edit & assemble (DaVinci Resolve)

  1. Import A-roll (camera), B-roll (OBS: screen/code/browser), diagram exports (Figma), and any Canva slides/lower-thirds.
  2. Structure: hook (first 3–5s must state the payoff, this is what survives the swipe-away on Reels/Shorts), then alternate A-roll (you explaining) with B-roll (diagram/code) — cut to B-roll whenever the narration references something visual, don't let a diagram sit on screen through an unrelated sentence.
  3. Audio: level dialogue first, then layer light background music under B-roll segments only (drop it under A-roll so it doesn't compete with speech), add a subtle whoosh/click on cut points if the channel style uses that.
  4. Captions/subtitles — burn in for Instagram (autoplay-muted default), optional-but-recommended for YouTube (Resolve's subtitle track or upload an SRT).
  5. Color: a light grade on A-roll only is usually enough; don't grade screen-capture footage, it reads as color inaccuracy on UI.

Step 5 — Multi-format export

  • YouTube (long-form / course lesson): 1080p or 4K, 16:9, chapter markers matching the beat list from Step 1.
  • YouTube Shorts / Instagram Reels: 1080×1920, 9:16 — either re-record the Figma diagram in a vertical frame directly (best quality) or reframe/crop the 16:9 edit (faster, some loss of framing control).
  • Instagram feed/carousel: export key diagram frames or slide frames as static 1:1 / 4:5 images directly from Figma or Canva — a carousel post can walk through the same diagram one step per slide.
  • Course lesson (YouTube, unlisted): same export as the long-form YouTube video, just set to Unlisted and linked from the course platform instead of published to the channel. No separate edit needed — this is the reuse payoff of building the pipeline once.

3. Why this pipeline specifically

  • Eraser → Figma via SVG is the load-bearing decision in the whole chain: it's what turns a static architecture diagram into an animated one without hand-drawing vectors from scratch or relying on a paid animation tool.
  • Recording OBS scenes instead of exporting Figma animations as video trades a small amount of polish for a much faster iteration loop — useful for a solo creator shipping regularly rather than optimizing every frame.
  • One unlisted YouTube upload serving both channel content and course lessons avoids maintaining two separate production pipelines; the course platform just links to (or embeds) the unlisted video.
  • DaVinci Resolve over a lighter editor is worth the extra learning curve specifically because multi-track audio (separate dialogue/screen/music) and node-based color are both needed once A-roll and B-roll are mixed regularly — a simpler cutter-only tool becomes limiting fast at this content volume.
Hermes Wiki