Figma in 3 hours
The BEM Biologi workshop in 2024 was the first one where I had real evidence the curriculum worked. Twenty-five biology students, almost none with design backgrounds, three hours from blank Figma file to shipped-quality artifacts they used the following week. I walked out and rewrote the deck the same evening — not because it had failed, but because watching the room work showed me which slides had been load-bearing and which had been padding.
This is the deck I now teach, in the order I teach it. Three hours, one room, one shipped thing per student.
the constraint
The rooms look the same most of the time: 15-30 mostly-bachelor's students, mostly first-time on Figma, often from non-design majors. The session is usually a Saturday or evening, three hours, occasionally four if the org budgets it.
Why three hours specifically: most student-org events are budgeted in 2-4 hour blocks; attention curves drop steeply after hour 3; and "ship one real thing" is plausible inside three hours but not inside two. The 3-hour window is the smallest interval where the ship-a-thing outcome is reachable.
What the workshop is not: a Figma 101 tour of every feature. The tour-style workshop is what most beginner sessions default to, and almost nobody retains anything from it because nothing was built. The session has to be a workshop, not a seminar. Production-first.
the deck shape — one decision per slide
The structural rule the whole curriculum runs on: every slide either asks the student to make one decision or demonstrates one decision being made. No slide lists features in the abstract.
Wrong: a slide that lists Frames, Auto Layout, Constraints, Variants, Components, Styles, Plugins.
Right: a slide that asks should this be a Frame or a Group? Click one and explain why.
The rule does double work: it teaches that design is decisions, not features, and it keeps the 25-person room moving at roughly the same pace because every slide has a tractable thing to do.
the worked example — the bio specimen catalog
The example I reuse most is the design of a small organizational interface — a specimen catalog, a project tracker, a research-team page. Pick whichever feels closest to what the room would actually need.
The exercise unfolds in five passes, each pass adding a layer:
- Pass 1 (20 min): the rectangle pass. Just frames, no styling. Decide what goes where before what it looks like. Half the workshop's value is here.
- Pass 2 (20 min): typography pass. One typeface, three sizes, three weights. Constrained palette forces composition decisions.
- Pass 3 (20 min): color pass. Three colors maximum — one accent, one neutral, one background. Color discipline is the bit that separates amateur from competent visual output.
- Pass 4 (40 min): components pass. Reusable patterns. This is where Figma's technical features pay off — Components, Variants, Auto Layout. Students who skipped passes 1-3 can't really do this pass.
- Pass 5 (20 min): polish + handoff. What makes a Figma file usable by someone else — named layers, clear sections, exportable assets.
The pass structure is non-negotiable. Skipping the rectangle pass to start designing is the single biggest mistake new Figma users make. I'm now explicit about it: no styling until pass 2.
what students actually build
Left the workshop and rebuilt my org's deck the next day.
The outcomes from this curriculum across three years:
- A biology student designed her research lab's specimen catalog interface. The lab adopted it.
- A chemical engineering student rebuilt his org's Instagram template. The org used it for the next year.
- Two industrial engineering students taught their own design workshop the following semester, using my deck.
- One UGM English-competition team designed their event landing page in the workshop and shipped it for the actual event.
- A theology student built a Ramadan event countdown that 800 community members used.
The artifacts are real. They're not portfolio pieces. They went into use. That's the difference between a workshop that teaches and a workshop that only entertains.
what doesn't work
Three things I cut from earlier versions of the deck:
Design history references. Bauhaus, Swiss design, Eames era — they land flat in STEM rooms. Students hear fact I have to memorize not frame for the principle. Cut for STEM, kept for humanities-adjacent rooms.
Plugin tours. I used to spend 20 minutes on Figma plugins. Almost nobody installed them after the workshop. The plugins that matter are the 3-4 specific ones tied to the worked example — I demo those in context and skip the rest.
Long Q&A blocks. Open Q&A at the end of a 3-hour session is dead air. Three students ask questions; everyone else checks their phones. Now I replace open Q&A with a show your screen round — every student demos their work for 60 seconds. Engagement is higher; learning compounds; the questions that emerge are real.
the rule for first-time mentors
If I had to compress the whole curriculum into one piece of advice for someone running their first workshop:
Don't teach the tool. Teach the decisions. Have the room ship one real thing they need. Everything else is downstream.
The students don't remember which Figma menu does what. They remember the moment they made a real design choice and saw it work. That's the unit of learning. Every slide that doesn't produce a moment like that is filler.
The curriculum I now run is roughly half the length of the curriculum I started with. The retention is roughly double. The trade has been: less coverage, more conviction. Compression beats coverage — same lesson as the Kallaway-storytelling synthesis, applied to a different surface.