Figma RealContent Skill
Connect Figma designs with live content from CMS and spreadsheets.
Advanced References
- •Setup Guide: See realcontent-setup.md
- •CMS Integrations: See cms-integrations.md
Overview
RealContent is a Figma plugin that sources live data from your content systems directly into your designs.
Plugin: RealContent on Figma Community
Supported Content Sources
| Source | Plan |
|---|---|
| Google Sheets | Free (Starter) |
| Contentful | Professional |
| Kontent.ai | Professional |
Key Features
1. Link Content with Layers
- •Bind text layers to content fields
- •Auto-update when content changes
- •Maintain design-content connection
2. Stress-Test Designs
- •Swap between content instances
- •Test with different languages
- •Validate layouts with real data lengths
3. Discover Content Structure
- •Drop content onto canvas
- •Explore content relationships
- •Visualize content hierarchy
4. AI-Assisted Content
- •Generate realistic example text
- •Rephrase existing content
- •Add AI content with single click
Setup Workflow
- •Install Plugin: Search "RealContent" in Figma plugins
- •Connect Source:
- •Google Sheets: Share sheet URL
- •Contentful: Add API key and space ID
- •Kontent.ai: Configure project ID
- •Link Layers: Select text/image layers and bind to content fields
- •Sync Content: Pull latest content or set auto-refresh
Use Cases
- •Design Systems: Create content-driven component variants
- •Localization: Test designs with translated content
- •Content Preview: Show stakeholders designs with real content
- •Handoff: Share context between designers and content authors