AvanzaCast/docs/figma-import-report.md

Figma import report

File: jTTsEco3IFs46dNG6dY9GM (Stream_clone)

Summary:

• The Figma file contains a single frame Figma design - streamyard1.png with nested frames and rectangles.
• Key nodes detected and mapped to React components:
  • 1:173 Transmision (TEXT) -> mapped to FigmaHeader title
  • 1:49 Personas (TEXT) -> mapped to PersonCard label
  • Several Image RECTANGLE nodes with imageRef -> mapped to MediaGrid assets
  • Button frames -> mapped to ui/Button usage in FigmaHeader

Notes:

• Images were downloaded to packages/studio-panel/public/figma-assets/.
• Some frames in Figma are complex groups; I created representative components (FigmaHeader, PersonCard, MediaGrid). These are starting points — further refinement may be needed to exactly match spacing/typography.

Next steps:

• Replace placeholder images with exact exported assets where necessary.
• Extract exact colors and typography tokens from Figma into tailwind.config.cjs.
• Iterate creating more precise components for groups (e.g., SceneCard, Toolbar, Controls).