EasyContent & Figma Integration Guide

This feature is available on the team and business plans.
Users with manage integrations permission can access this feature.

The EasyContent plugin for Figma allows design teams to work with real, structured content directly in their designs. This integration ensures content accuracy, improves collaboration, and streamlines the workflow between design and content teams by bringing actual content into the design process.

Overview video

Plugin download page

https://www.figma.com/community/plugin/1437976334370162029/easycontent-design-with-real-content

Why Use the EasyContent Plugin?

Designing with placeholders can lead to inconsistencies and costly revisions. With EasyContent, you can:

• Enhance Collaboration: Ensure design and content teams are aligned by working with real content.
• Improve UX: Test your designs with actual content to ensure they work in all scenarios.
• Impress Stakeholders: Present realistic mockups that accurately reflect the final product.

Key Features

• Direct Integration with EasyContent: Securely connect your EasyContent projects to Figma.
• Drag and Drop Content Fields: Easily insert text and images from your content projects into your designs.
• Content Swapping: Swap between different content items to test layouts and stress-test designs.
• Real-Time Updates: Keep your designs up-to-date with the latest content from your projects.
• Support for Text and Images: Currently supports single-line text, multi-line text, rich text, and images.

Step-by-Step Guide to Using the Integration

1. Select a Content Source

• Open the Plugin: In Figma, go to the Plugins menu and select EasyContent - Design with Real Content.
• Choose EasyContent.io as Source: Select EasyContent.io as the content source to establish the connection
  

2. Generate an API Key in EasyContent

• In your EasyContent account, go to Integrations > API keys
  
  
• Create a New Key: Select the project (e.g., Figma Integration Demo) and click Add.
• Copy the API Key: This key will be used to connect Figma to your EasyContent account.
   

3. Connect to EasyContent in Figma

• Paste the API Key: In the EasyContent plugin within Figma, paste the copied API key and click Connect.
  

4. Choose a Template

• Select a Content Template: Once connected, choose a content template from your EasyContent project. For example, you might select Feature Page for a product feature layout.
  

5. Select a Content Item

• Choose Content Item: Pick a specific content item, like "Real-time collaboration" or "Customizable templates" to populate the design with relevant content.
  

6. Map Fields in Figma

• Drag Fields into Place: Within Figma, drag and drop the EasyContent fields (e.g., Page Title, Feature Name, etc.) to populate text layers in your design. This allows the design to reflect actual content from EasyContent.
  

Getting Started

1. Install the Plugin: Download the EasyContent plugin from the Figma Marketplace.
2. Connect Your Account: Enter your EasyContent API key to securely connect your projects. If you don’t have an account, create it here.
3. Select a Project and Template: Choose the content you want to work with.
4. Drag and Drop Content: Insert content fields directly into your design.