Embedding External Assets: Figma, YouTube, Miro & More

The complete guide to connecting your design tools with Gameframe

Read Time: 15 minutes

§Introduction: The Asset Sprawl Problem#

If you've worked on any game project, you know the reality: your game design doesn't live in just one place.

• —Character concepts → Figma or Photoshop
• —UI mockups → Figma or Sketch
• —Tutorial videos → YouTube or Loom
• —Sprint planning → Miro or Notion
• —Balance spreadsheets → Google Sheets
• —Reference images → Google Drive or Dropbox
• —Prototype recordings → Loom or internal servers
• —Mood boards → Pinterest or Miro

The design doc says "see character design" but where IS the character design? A link in Slack? A Figma somewhere? Which version?

Gameframe's embed system solves this. You bring external assets directly INTO your documentation. One source of truth. Everything visible. Everything version-controlled.

§Part 1: Supported Services and Formats#

Full Embed Support#

These services render interactively inside your documents:

Direct Image Support#

Any direct image URL renders inline:

• —PNG - Screenshots, pixel art, UI elements
• —JPG/JPEG - Photos, concept art, renders
• —GIF - Animations, simple demos
• —WebP - Modern compressed images
• —SVG - Vector graphics, icons, diagrams

Link Previews#

URLs that can't be fully embedded still get smart previews:

• —Title and description extraction
• —Favicon display
• —One-click to open in new tab

§Part 2: How to Embed (Three Methods)#

Method 1: Markdown Image Syntax#

The standard way. Use markdown image format:

![Description](URL)

Examples:

![Main character final design](https://figma.com/file/abc123/Character-Sheet)
![Combat tutorial video](https://youtube.com/watch?v=xyz789)
![Sprint 12 planning board](https://miro.com/app/board/board123)
![Player stats spreadsheet](https://docs.google.com/spreadsheets/d/spreadsheet123)

Why this works: Gameframe detects the URL domain, determines the service, and renders the appropriate embed. The "description" becomes the alt text and caption.

Method 2: Bare URL on Its Own Line#

Even simpler. Just paste the URL:

Here's the character design:

https://figma.com/file/abc123/Character-Sheet

And here's the combat tutorial:

https://youtube.com/watch?v=xyz789

Key requirement: The URL must be on its own line, with blank lines before and after. Inline URLs (in the middle of text) become regular links, not embeds.

Method 3: Explicit Embed Blocks (Coming Soon)#

For more control, we're adding explicit embed syntax:

:::embed[figma]
url: https://figma.com/file/abc123
height: 600px
interactive: true
:::

This gives you options like custom height, interactivity toggles, and display modes.

§Part 3: Service-Specific Guides#

Figma: Design Files and Prototypes#

Figma is where most game UI and visual design happens. Here's how to embed it effectively.

Getting the URL:

1. 1.Open your Figma file
2. 2.Click Share (top right)
3. 3.Click Copy link
4. 4.Paste into your Gameframe document

URL formats that work:

• —https://figma.com/file/FILE_ID/File-Name
• —https://figma.com/design/FILE_ID/File-Name
• —https://figma.com/proto/FILE_ID/Prototype-Name (prototypes)

What you'll see:

• —Interactive preview of the design
• —Pan and zoom controls
• —Current page/frame visible
• —"Open in Figma" button for full editing

Pro tips:

1. 1.Link to specific frames: Add ?node-id=XX:YY to the URL to show a specific frame
2. 2.Use view-only links: For contractors who shouldn't edit the original
3. 3.Consider file size: Very large Figma files may load slowly

Privacy notes:

• —Public Figma files embed fully
• —Team/private files show a preview with "Open in Figma" (requires auth)
• —Password-protected files show placeholder only

Example:

## Character Visual Design

The main character went through three iterations. Here's the final approved design:

![Warrior final design - approved Dec 2024](https://figma.com/file/abc123/Characters?node-id=45:892)

Note the simplified silhouette compared to v2. This was changed after readability testing.

YouTube: Videos and Tutorials#

Perfect for gameplay references, animation inspiration, or internal tutorials.

Getting the URL:

• —Standard: https://youtube.com/watch?v=VIDEO_ID
• —Short: https://youtu.be/VIDEO_ID
• —Embed: https://youtube.com/embed/VIDEO_ID

All formats work.

What you'll see:

• —Full video player with controls
• —Play, pause, volume, fullscreen
• —Responsive sizing (fits document width)

Pro tips:

1. 1.Start at specific time: Add ?t=XXs to start at XX seconds
2. 2.Use unlisted for internal videos: Upload to YouTube as "Unlisted" for internal tutorials
3. 3.Playlists work too: Embed a playlist URL for a series

Example:

## Combat System Reference

Our combat is inspired by Hades' fast-paced style. Study this video for timing reference:

https://youtube.com/watch?v=abc123?t=45s

Key moments:
- 0:45 - Dash cancel timing
- 1:20 - Hit feedback animation
- 2:15 - Enemy telegraph system

Loom: Screen Recordings#

Great for walkthroughs, bug reproductions, and design explanations.

Getting the URL:

1. 1.Record your Loom
2. 2.Copy the share link: https://loom.com/share/VIDEO_ID
3. 3.Paste into document

What you'll see:

• —Embedded video player
• —Full Loom controls
• —Transcript link (if enabled)

Pro tips:

1. 1.Record short, focused videos: 2-5 minutes max
2. 2.Add chapters in Loom: Makes it easy to jump to sections
3. 3.Use for async communication: "Here's my feedback on the design" as a Loom

Example:

## Level 3 Walkthrough

Sarah recorded a complete walkthrough of the current Level 3 build:

https://loom.com/share/xyz789

Timestamps:
- 0:00 - Tutorial integration
- 2:30 - First combat encounter
- 5:15 - Known issues to fix

Google Docs, Sheets, and Slides#

Embed live Google Workspace documents directly.

Getting the URL:

1. 1.Open the document in Google
2. 2.Click Share
3. 3.Set to "Anyone with link can view" (minimum)
4. 4.Copy link

What you'll see:

• —Docs: Scrollable document preview
• —Sheets: Spreadsheet with visible cells
• —Slides: Presentation with navigation

Pro tips:

1. 1.Use "view" links: Change /edit to /view in URL for cleaner embeds
2. 2.Link to specific sheets: Add #gid=SHEET_ID to show a specific tab
3. 3.Published versions: Use File → Publish for cleaner embeds

Privacy note: The document must be shared with "Anyone with link" for the embed to work. Private docs show a placeholder.

Example:

## Balance Data

Current balance spreadsheet (updated weekly):

https://docs.google.com/spreadsheets/d/abc123/edit#gid=0

Key tabs:
- **Player Stats** - Health, mana, stamina values
- **Enemy Stats** - All enemy types
- **Items** - Loot table and drop rates

Miro: Boards and Diagrams#

Perfect for flowcharts, mind maps, and sprint planning.

Getting the URL:

1. 1.Open your Miro board
2. 2.Click Share → Copy board link
3. 3.Paste into document

What you'll see:

• —Interactive board preview
• —Pan and zoom
• —Read-only view (can't edit from embed)

Pro tips:

1. 1.Frame specific areas: Use Miro's frames and link to specific views
2. 2.Keep boards focused: One board per topic embeds better than mega-boards
3. 3.Use for async collaboration: Miro comments + Gameframe version history = full audit trail

Example:

## Game Loop Diagram

Here's the current core loop visualization:

https://miro.com/app/board/loop123

The "Progression" section (top right) is still being debated - see comments.

Direct Images#

Any image URL renders inline. No special service needed.

Supported formats:

• —.png - Screenshots, UI, pixel art
• —.jpg / .jpeg - Photos, concept art
• —.gif - Animations, demos
• —.webp - Modern compressed format
• —.svg - Vector graphics

Example:

## Concept Art

Early character concept before we simplified the design:

![Warrior concept v1 - Jan 2024](https://cdn.example.com/art/warrior-v1.png)

Compare to final:

![Warrior final - Nov 2024](https://cdn.example.com/art/warrior-final.png)

Note the reduced detail on armor for better silhouette readability.

§Part 4: Real-World Document Examples#

Example 1: Character Design Document#

# Player Character: The Warrior

## Visual Design

### Final Approved Design
![Warrior - final approved design v3](https://figma.com/file/chars/Warrior?node-id=89:123)

### Previous Iterations
- V1: Too detailed, poor readability at game zoom
- V2: Better silhouette, wrong color palette
- V3: Current - approved by art director Dec 2024

## Animation Reference

Movement and combat should feel weighty like Dark Souls, not floaty:

https://youtube.com/watch?v=darksouls_combat?t=30s

Key reference points:
- Attack commitment (can't cancel after startup)
- Recovery frames after heavy attacks
- Roll invincibility timing

## Stats and Balance

Current warrior stats (see Balance Document for full context):

https://docs.google.com/spreadsheets/d/balance/edit#gid=warrior_stats

| Stat | Value | Notes |
|------|-------|-------|
| Health | 150 | Buffed from 100 in v2.1 |
| Stamina | 100 | Standard across classes |
| Base Damage | 25 | Before weapon modifiers |

Example 2: Sprint Planning Document#

# Sprint 14: Boss Fight Polish

## Sprint Board

https://miro.com/app/board/sprint14

## Key Deliverables

### 1. Boss Attack Patterns
See attack flow diagram in Miro (top-left quadrant)

Design walkthrough:
https://loom.com/share/boss_walkthrough

### 2. Visual Effects
Current VFX reference from our art team:

![Boss fire breath effect](https://figma.com/file/vfx/Boss-Effects?node-id=12:45)

Reference for intensity level:
https://youtube.com/watch?v=elden_ring_fire?t=120s

### 3. Balance Targets
Target metrics from balance spreadsheet:

https://docs.google.com/spreadsheets/d/balance/edit#gid=boss_stats

§Part 5: Handling Embed Failures#

Why Embeds Sometimes Fail#

• —Private/restricted content: The source requires authentication
• —Deleted content: The original file was removed
• —Changed permissions: Sharing settings were updated
• —Service issues: Temporary outages
• —Network problems: Connectivity issues

What You See When It Fails#

Instead of a broken page, you'll see:

• —A clear message: "Unable to load embed"
• —The original URL (still clickable)
• —An "Open in [Service]" button
• —The alt text you provided

Your document remains functional. The embed becomes a smart link.

Preventing Failures#

1. 1.Use stable URLs: Avoid links that might change
2. 2.Check permissions: "Anyone with link can view" for shared assets
3. 3.Use organization accounts: More stable than personal accounts
4. 4.Regular audits: Review embeds periodically

§Part 6: Best Practices#

1. Write Descriptive Alt Text#

The text in ![Alt text here](url) appears as a caption and helps with accessibility.

Bad:

![Design](https://figma.com/...)
![Video](https://youtube.com/...)

Good:

![Warrior final design - approved Dec 2024](https://figma.com/...)
![Combat tutorial showing dash canceling](https://youtube.com/...)

2. Provide Context Around Embeds#

Don't just drop in an embed. Explain what it is and why it matters.

Bad:

https://figma.com/file/abc123

Good:

Here's the approved character design. Note the simplified silhouette 
compared to v2 - this was changed after playtest feedback about 
readability at normal zoom levels:

![Warrior final design](https://figma.com/file/abc123)

3. Don't Overload Documents#

Embeds add visual weight. Use them where they genuinely help understanding.

• —3-5 embeds per document: Good
• —10+ embeds: Probably too many, consider splitting the doc

4. Check Permissions Before Sharing#

Before sharing a document with contractors or external partners:

1. 1.Open all embeds
2. 2.Verify they load correctly
3. 3.Check source file permissions
4. 4.Test with a different account if possible

5. Use Embeds for Living References#

The best embeds are "living" - they update when the source updates.

• —Figma design changes → Embed shows new version
• —Spreadsheet updates → Embed shows current data
• —Miro board evolves → Embed reflects current state

Your design doc stays current automatically.

§Part 7: Troubleshooting#

"Embed shows 'Unable to load'"#

Check: Is the source file still accessible? Open the URL directly.

Check: Are permissions set to "Anyone with link can view"?

Check: Are you logged into the required service?

"Embed loads but shows wrong content"#

Check: Is the URL pointing to the right file/frame?

Try: Re-copy the URL from the source

"Embed is very slow to load"#

Cause: Large source files (big Figma documents, long videos)

Solution: Link to specific frames/timestamps, or use screenshots for static content

"Team members can't see the embed"#

Cause: Permissions are set to restricted

Solution: Update source file sharing to "Anyone with link"

§Summary#

Gameframe's embed system lets you:

• —Bring Figma designs directly into design docs
• —Include video references from YouTube and Loom
• —Connect live spreadsheets from Google Sheets
• —Add planning boards from Miro
• —Embed any image from any URL

The result: One document with everything your team needs to understand the design. No more hunting through Slack for "that Figma link." No more "which Google Sheet has the latest numbers?"

Everything in one place. Everything version-controlled. Everything connected.

Related guides:

• —Live Spreadsheet Sync - Connect balance data directly to documents
• —The Gameframe Editor - Master all editor features
• —Getting Started - Create your first vault

Ready to connect your assets? Start free and bring all your design tools together.