Athletics Timeline Builder

About this plugin

# Timeline Builder — How to UseA Figma plugin that draws a project timeline (phases + milestones) onto a frame from a few text fields.## FieldsTitleThe big header text at the top of the frame. Also becomes the frame's layer name.Start dateFormat: MM/DD/YYYY. This is the date of Week 1 — everything else (week dates, milestone dates) is calculated from here.Number of weeksHow many week-columns the timeline spans. Range: 1–52.Current weekWhich week gets the "you are here" marker (starburst + vertical line above the grid).Set to 0 to hide the marker entirely — use this if the project hasn't started yet, or you don't want to show current progress.Any value from 1 to your total week count places the marker at that week.PhasesOne phase per line, comma-separated:Name, start week, end week, rowExample:Discovery, 1, 4, 1Design Sprint, 3, 8, 2Brand Guidelines, 7, 12, 2start week / end week are inclusive week numbers (1-indexed).row stacks phases vertically — use 1 for the top row, 2 for the next row down, etc. Phases on the same row will visually overlap if their week ranges overlap, so give overlapping phases different rows.Bar colors cycle automatically through a fixed palette in the order phases are listed — no need to set colors yourself.MilestonesOne milestone per line, comma-separated:Name, weekExample:Kickoff, 1Mid Review, 6Final Delivery, 12Each shows as a red dot below the grid with a connector line and a date + name label.Grey markersSame format as Milestones (Name, week), rendered as a separate grey row just below and slightly to the right of the milestone row. Leave blank if you don't need any — this field defaults to empty.DeliverablesOne deliverable per line. Renders as a "DELIVERABLES" badge with a bulleted list underneath, top-right of the frame. Leave blank to omit the whole section.## Building vs. rebuildingNothing selected → clicking Build timeline creates a brand-new frame, centered in your current viewport.A frame this plugin previously built is selected → the button switches to Rebuild timeline, and clicking it clears and redraws that same frame in place (keeping its position on the canvas) using the current field values. This is the easiest way to tweak a timeline after the fact: select it, adjust fields, hit rebuild.## FontsThe timeline uses Söhne for most text. If Söhne isn't available on a teammate's machine, the text may fall back or render oddly — swap the FONTS.sohne* entries in src/code.ts for Inter (already loaded by the plugin) if you need a portable, non-Figma-proprietary font.