Dt Figma Export

+============================================================+
| PROJECT DETAILS                        (section, blue fill) |
+============================================================+
|  +------------------------------------------------------+  |
|  | Customer: {customer name}                             |  |
|  +------------------------------------------------------+  |
|  +------------------------------------------------------+  |
|  | Project: {project name}                               |  |
|  +------------------------------------------------------+  |
|  +------------------------------------------------------+  |
|  | Sprint: {milestone / sprint info}                     |  |
|  +------------------------------------------------------+  |
|  +------------------------------------------------------+  |
|  | Workstream: {workstream description}                  |  |
|  +------------------------------------------------------+  |
|  +------------------------------------------------------+  |
|  | Prototype: {link to prototype or video}               |  |
|  +------------------------------------------------------+  |
+============================================================+

// ── LOAD FONTS (required before any text operations) ──
await figma.loadFontAsync({family: "Inter", style: "Regular"});
await figma.loadFontAsync({family: "Inter", style: "Bold"});

// ── PROJECT DETAILS CONSTANTS (do not change) ──
const DET_PAD   = 40;    // internal padding
const ROW_W     = 1000;  // field row width
const ROW_H     = 52;    // field row height
const ROW_GAP   = 16;    // gap between rows
const DET_W     = ROW_W + 2 * DET_PAD; // 1080
const CORNER_R  = 16;    // outer corner radius

// ── COLORS (do not change) ──
const BG_BLUE  = {r: 0x00/255, g: 0x78/255, b: 0xD4/255}; // #0078D4
const ROW_BLUE = {r: 0x21/255, g: 0x96/255, b: 0xF3/255}; // #2196F3
const WHITE    = {r: 1, g: 1, b: 1};

// ── BUILDER FUNCTION ──
// fields = [{label: "Customer", value: "{Customer name}"}, ...]
function buildProjectDetails(fields, x, y) {
  const DET_H = 2 * DET_PAD + fields.length * ROW_H
              + (fields.length - 1) * ROW_GAP;

  const section = figma.createSection();
  section.name = "PROJECT DETAILS";
  section.fills = [{type: 'SOLID', color: BG_BLUE}];

  let rowY = DET_PAD;
  for (const field of fields) {
    const row = figma.createShapeWithText();
    row.shapeType = "ROUNDED_RECTANGLE";
    row.resize(ROW_W, ROW_H);
    row.x = DET_PAD;
    row.y = rowY;
    row.cornerRadius = 6;
    row.fills = [{type: 'SOLID', color: ROW_BLUE}];
    row.strokes = [];

    const lbl = field.label + ": ";
    row.text.characters = lbl + field.value;
    row.text.fontName = {family: "Inter", style: "Regular"};
    row.text.fontSize = 18;
    row.text.fills = [{type: 'SOLID', color: WHITE}];
    row.text.textAlignHorizontal = "LEFT";
    row.text.setRangeFontName(0, lbl.length,
      {family: "Inter", style: "Bold"});

    section.appendChild(row);
    rowY += ROW_H + ROW_GAP;
  }

  section.resizeWithoutConstraints(DET_W, DET_H);
  section.x = x;
  section.y = y;
  figma.currentPage.appendChild(section);
  return section;
}

// ── USAGE ──
// Place at (0, 0). Exercise templates go below at y = details.height + 80.
// const details = buildProjectDetails([
//   {label: "Customer",    value: "{Customer name}"},
//   {label: "Project",     value: "{Project name}"},
//   {label: "Sprint",      value: "{Milestone / Sprint}"},
//   {label: "Workstream",  value: "{Workstream description}"},
//   {label: "Prototype",   value: "{Link to prototype or video}"},
// ], 0, 0);

+============================================================================+
| PERSONA - {ROLE NAME}                                    (section title)   |
+============================================================================+
|                                                                            |
| [Name]          (40pt bold)                        [👤 Portrait]           |
| [Role]          (22pt bold)                         248px ellipse          |
| [Description paragraphs]                            peach fill             |
|                  (14pt regular, grey)               gold stroke            |
|                                                                            |
+----------------------------------------------------------------------------+
| **Primary Tools**              (heading above cards, 13pt bold)            |
| [Tool 1]  [Tool 2]  [Tool 3]  [Tool 4]  [Tool 5]                         |
|  233x135   233x135   233x135   233x135   233x135   #FFE0C2 fill           |
+----------------------------------------------------------------------------+
| **Other Tools**                                                            |
| [Tool 1]  [Tool 2]                                                         |
+----------------------------------------------------------------------------+
| **Responsibilities**                                                       |
| [Resp 1]  [Resp 2]  [Resp 3]  [Resp 4]  [Resp 5]   (row 1)               |
| [Resp 6]  [Resp 7]  [Resp 8]  [Resp 9]              (row 2, wraps)        |
+----------------------------------------------------------------------------+
| **Behavioural Traits**                                                     |
| [Trait 1] [Trait 2] [Trait 3] [Trait 4] [Trait 5]                          |
| [Trait 6]                                                                  |
+----------------------------------------------------------------------------+
| **What do they desire in their role?**                                     |
| [Desire 1] [Desire 2] [Desire 3] [Desire 4] [Desire 5]                   |
+----------------------------------------------------------------------------+
| **What kinds of goals drive them?**                                        |
| [Goal 1] [Goal 2] [Goal 3] [Goal 4] [Goal 5]                             |
+----------------------------------------------------------------------------+
| **Needs**                                                                  |
| [Need 1] [Need 2] [Need 3] [Need 4] [Need 5]                             |
+----------------------------------------------------------------------------+
| **Hacks and Workarounds**                                                  |
| [Hack 1] [Hack 2] [Hack 3] [Hack 4] [Hack 5]                             |
+----------------------------------------------------------------------------+
| **Key Findings**                                                           |
| [Finding 1] [Finding 2] [Finding 3] [Finding 4] [Finding 5]               |
+============================================================================+

// ── LOAD FONTS (required before any text operations) ──
await figma.loadFontAsync({family: "Inter", style: "Regular"});
await figma.loadFontAsync({family: "Inter", style: "Bold"});

// ── LAYOUT CONSTANTS (do not change) ──
const CELL_W      = 233;   // card width
const CELL_H      = 135;   // card height
const GAP         = 8;     // consistent gap between all elements
const COLS        = 5;     // max cards per row before wrapping
const GRID_W      = COLS * CELL_W + (COLS - 1) * GAP;
const AVATAR_SIZE = 248;   // portrait circle diameter
const LEFT_PAD    = 20;    // left padding from section edge
const INTRO_X     = LEFT_PAD + AVATAR_SIZE + 32;
const INTRO_W     = 667;   // intro text block width
const HEADING_GAP = 6;     // gap between heading and its cards
const ROW_GAP     = 16;    // gap between last card row and next heading

// ── COLORS (do not change) ──
const CARD_COLOR = {r: 0xFF/255, g: 0xE0/255, b: 0xC2/255}; // #FFE0C2
const PEACH_BG   = {r: 249/255, g: 228/255, b: 200/255};    // avatar fill
const DARK       = {r: 0.15, g: 0.15, b: 0.15};             // heading + card text
const GRAY       = {r: 0.3, g: 0.3, b: 0.3};                // body text

// ── REUSABLE BUILDER FUNCTION ──
// Call once per persona. offsetX positions multiple cards side by side.
function buildPersona(personaName, roleTitle, bodyText, rows, offsetX) {
  const section = figma.createSection();
  section.name = "PERSONA - " + roleTitle.toUpperCase();

  // ── INTRO TEXT (left side, single shape with mixed fonts) ──
  const intro = figma.createShapeWithText();
  intro.shapeType = "SQUARE";
  intro.resize(INTRO_W, 450);
  intro.x = LEFT_PAD; intro.y = 20;
  intro.fills = [];
  intro.strokes = [];
  intro.text.textAlignHorizontal = "LEFT";
  intro.text.fontName = {family: "Inter", style: "Regular"};
  intro.text.fontSize = 14;
  intro.text.fills = [{type: 'SOLID', color: GRAY}];

  const fullText = personaName + "\n" + roleTitle + "\n\n" + bodyText;
  intro.text.characters = fullText;

  // Apply font ranges: name=40pt bold, role=22pt bold, body=14pt regular
  const nameEnd = personaName.length;
  const roleStart = nameEnd + 1;
  const roleEnd = roleStart + roleTitle.length;
  intro.text.setRangeFontName(0, nameEnd, {family: "Inter", style: "Bold"});
  intro.text.setRangeFontSize(0, nameEnd, 40);
  intro.text.setRangeFills(0, nameEnd, [{type: 'SOLID', color: DARK}]);
  intro.text.setRangeFontName(roleStart, roleEnd, {family: "Inter", style: "Bold"});
  intro.text.setRangeFontSize(roleStart, roleEnd, 22);
  intro.text.setRangeFills(roleStart, roleEnd, [{type: 'SOLID', color: DARK}]);
  section.appendChild(intro);

  // ── AVATAR (right side) ──
  const avatar = figma.createShapeWithText();
  avatar.shapeType = "ELLIPSE";
  avatar.resize(AVATAR_SIZE, AVATAR_SIZE);
  avatar.x = LEFT_PAD + GRID_W - AVATAR_SIZE;
  avatar.y = 20;
  avatar.fills = [{type: 'SOLID', color: PEACH_BG}];
  avatar.strokes = [{type: 'SOLID', color: {r: 200/255, g: 160/255, b: 80/255}}];
  avatar.strokeWeight = 4;
  avatar.text.characters = "Portrait";
  section.appendChild(avatar);

  // ── CATEGORY ROWS (heading above cards) ──
  let y = 500;

  for (const row of rows) {
    // Heading shape (transparent, left-aligned, bold)
    const heading = figma.createShapeWithText();
    heading.shapeType = "SQUARE";
    heading.resize(300, 30);
    heading.x = LEFT_PAD;
    heading.y = y;
    heading.fills = [];
    heading.strokes = [];
    heading.text.fontName = {family: "Inter", style: "Bold"};
    heading.text.fontSize = 13;
    heading.text.characters = row.label;
    heading.text.fills = [{type: 'SOLID', color: DARK}];
    heading.text.textAlignHorizontal = "LEFT";
    section.appendChild(heading);

    y += 30 + HEADING_GAP;

    // Card grid (ROUNDED_RECTANGLE shapes, 8px corner radius)
    const numCellRows = Math.ceil(row.items.length / COLS);
    for (let i = 0; i < row.items.length; i++) {
      const col = i % COLS;
      const cellRow = Math.floor(i / COLS);
      const card = figma.createShapeWithText();
      card.shapeType = "ROUNDED_RECTANGLE";
      card.resize(CELL_W, CELL_H);
      card.x = LEFT_PAD + col * (CELL_W + GAP);
      card.y = y + cellRow * (CELL_H + GAP);
      card.cornerRadius = 8;
      card.fills = [{type: 'SOLID', color: CARD_COLOR}];
      card.strokes = [];
      card.text.fontName = {family: "Inter", style: "Regular"};
      card.text.fontSize = 12;
      card.text.characters = row.items[i];
      card.text.fills = [{type: 'SOLID', color: DARK}];
      section.appendChild(card);
    }

    y += numCellRows * CELL_H + (numCellRows - 1) * GAP + ROW_GAP;
  }

  section.resizeWithoutConstraints(LEFT_PAD + GRID_W + LEFT_PAD, y + 40);
  section.x = offsetX;
  figma.currentPage.appendChild(section);
  return section;
}

// ── USAGE ──
// Call buildPersona once per persona. Arrange side by side:
// const p1 = buildPersona("Sam", "Case Worker", bodyText, rows, 0);
// const p2 = buildPersona("Alex", "Field Auditor", bodyText2, rows2, p1.width + 80);