Hermes Wiki
Tools/Figma

Figma

figma.com — "father" of the other diagramming/design tools (Eraser, Draw.io, Excalidraw, Canva): superset of their capabilities plus custom branding, precise vector control, and real animation, all on the free Starter plan (unlimited personal drafts, Smart Animate, vector tools, Community assets — no paid tier needed for solo explanatory content).

Mental model: unlike node-based tools (Eraser/Draw.io) where connectors auto-attach, Figma is a raw vector canvas — you position everything pixel-by-pixel. Moderate learning curve (~1-2 hrs to basics) if already comfortable with design software.

Why it fits explanatory content (Instagram/YouTube):

  • Purpose-built frames per platform: 1080×1920 (Reels/Shorts), 1920×1080 or 3840×2160 (YouTube), 4:5/1:1 (IG carousels).
  • Brand consistency: saved color palettes, tech-stack icon sets (AWS/K8s/Kafka/Postgres), typography, dark-mode/glassmorphism styling.
  • Smart Animate: auto-tweens motion between two frames — e.g. move a "packet" from API Gateway to a queue, or scale up a box to zoom into a subsystem — without a separate video editor. Export as video/GIF or record via OBS/Screen Studio.
  • Community plugins (Iconify for 100k+ icons, AWS/GCP/Azure architecture kits, motion/keyframe plugins) are free.
  • Can import diagrams straight out of Eraser or Draw.io and re-skin/animate them — but export format matters, see below.

SVG vs PNG import — this decides whether you can actually edit/animate the diagram:

  • SVG (recommended): Figma decomposes it into independent editable layers — every icon, box, label, and connecting line becomes its own element. You can recolor individual boxes, add glow/shadow, swap fonts to match branding, and — because each element is a distinct layer — build Smart Animate transitions: place a dot on an arrow in Frame 1, move it to the arrow's end in Frame 2, and Figma tweens a "packet flowing" animation. Same technique to scale up a box and "zoom into" a subsystem on the next frame.
  • PNG (limited): imports as one flattened image. No access to individual icons/text/lines — only whole-image animation (fade in/out, pan, zoom on the whole diagram).

Recommended pipeline: in Eraser, write the diagram-as-code layout → export as SVG (not PNG) → drag into Figma → apply branding, dark-mode, and 16:9/9:16 frames → Smart Animate individual layers (packet motion, zoom-ins) or screen-record the canvas → publish to YouTube/IG.

Cost: $0 to get fully production-ready (Figma free tier + free icon kits + free plugins + OBS for recording). Optional: Screen Studio (~$89 one-time, macOS) for cinematic cursor/camera smoothing. Rough timeline: 3-5 hrs for basic mastery (frames, Auto Layout, vector import), 5-8 hrs more for animation/motion — call it 1-2 weeks at ~1 hr/day to production-ready.

Code interop: Figma runs on its own vector canvas engine, not a browser — you can't paste raw HTML/CSS/JS and have it render live.

  • Code → Figma: plugins like HTML to Design (paste HTML/CSS or a URL, get native editable Figma frames/text/auto-layout) or Builder.io convert web pages/components into editable layers. JS logic doesn't execute — only the resulting visual layout/CSS (colors, flexbox, borders, padding) comes across. Useful for pulling a web-rendered diagram (e.g. Mermaid/D3) in as an editable graphic when SVG export isn't clean.
  • Figma → Code: built-in Dev Mode inspects any element's CSS/Tailwind/React styles; plugins (Anima, Locofy, Builder.io) export full responsive HTML/CSS/React components.
  • Figma's Auto Layout (Shift+A) is the same model as CSS Flexbox, so it's a low-friction switch for anyone coming from web dev.

Dev hand-off: click any element in Dev Mode to read exact CSS/Tailwind/React properties, padding/margins, flex direction, and HEX/RGB — the industry-standard alternative to hand-offs done via Canva asset exports, with Penpot and Adobe_XD as other dedicated UI-design options.

Hermes Wiki