How to Make a Feature Image in Figma (Blog & Social Media)

What Is a Feature Image and Why It Matters

A feature image (also called a hero image or social share image) is the primary visual representation of your content. It appears in three critical places:

Blog posts: Displayed at the top of your article, in preview cards on homepage/archives.

Open Graph (OG) preview: Shows when someone shares your link on social media (Facebook, LinkedIn, Twitter).

Social media thumbnails: Custom thumbnail on YouTube, featured image on Pinterest, preview on LinkedIn.

A compelling feature image can increase social shares by 40-50% and blog traffic through improved click-through rates from search results and social platforms.

Standard Feature Image Sizes

Design once, export for multiple platforms.

Use Case	Dimensions	Aspect Ratio	Notes
Open Graph (OG)	1200×630 px	1.91:1	Facebook, LinkedIn default
Facebook Share	1200×628 px	1.91:1	Slightly different, but 1200×630 works
Twitter (X) Card	1200×675 px	16:9	Use “Summary Large Image”
Pinterest	1000×1500 px	2:3	Vertical format, very popular
YouTube Thumbnail	1280×720 px	16:9	Min 640×360 px, but design for 1280×720
Blog Featured	1200×800 px	3:2	Common blog standard
Instagram Post	1080×1080 px	1:1	Square format
LinkedIn Article	1200×627 px	1.91:1	Same as OG
Email Header	600×400 px	3:2	Mobile-responsive email

Pro tip: Design 1200×630 (OG standard) as your primary size. It works on most platforms and can be cropped/resized for others.

Creating a Reusable Feature Image Template in Figma

Step 1: Set Up Your Master Frame

Create new Figma file named “Feature Image Template”
Create frame: 1200×630 px
Name frame: “Feature Image Master”
Set background color to your brand primary color

Step 2: Add Background Layer

Choose one approach:

Solid color: Simple, fast-loading

Rectangle tool (R)
Draw rectangle covering entire frame
Fill with brand color
Optional: Add gradient (2-color, subtle angle)

Image background: More visual

Use Unsplash plugin to insert photo
Cover entire frame
Reduce opacity to 40-60% so text will be readable
Add darker overlay rectangle on top (black, 30-50% opacity)

Step 3: Create Text Hierarchy

Main headline:

Position: Top third or center
Font size: 48-60px
Font weight: Bold
Color: White or high-contrast with background
Max length: 6-8 words (fits on two lines)

Subtitle or tagline:

Position: Below headline
Font size: 20-24px
Font weight: Regular or medium
Color: Same as headline or lighter shade
Purpose: Add context to headline

Author/date (optional):

Position: Bottom left
Font size: 12-14px
Color: White or light gray
Format: “By [Name] • [Date]“

Step 4: Add Visual Elements

Choose one:

Logo:

Position: Bottom right or top left
Size: 80-120px
Opacity: 100% for dark backgrounds, 80% for busy backgrounds

Icon/illustration:

Position: Right side, center-aligned
Size: 200-300px
Opacity: Match brand transparency standards
Purpose: Visual interest, reinforces message

Accent shape:

Simple geometric shape (circle, rectangle, triangle)
Position: Corner or edge
Color: Secondary brand color
Opacity: 30-50% for subtlety

Step 5: Set Safe Zones

Add guides for critical content areas:

View → Guides → Create guide
Add guides at 100px from each edge (safe zone)
Keep main text within safe zone
Keep important visuals within safe zone

This ensures content isn’t cut off on different platforms.

Step 6: Create as Reusable Component

Select your completed template
Right-click → “Create component”
Name: “Feature Image / Blog”
Duplicate for variations:
- “Feature Image / Tutorial”
- “Feature Image / News”
- “Feature Image / Product”

Adding Text Overlay on Images

Text over images requires careful contrast management.

Step 1: Choose Background Approach

Option A: Dark overlay

Add semi-transparent black rectangle
Opacity: 40-60% (adjust until text is readable)
Position: Over entire image
Use white text on top

Option B: Text background box

Create rectangle
Fill with semi-transparent color (brand color)
Size: 300-500px wide, 200-300px tall
Position: Slightly offset from center
Add 20-40px padding inside
Use white text

Option C: Gradient overlay

Create rectangle covering image
Apply gradient (top: transparent, bottom: black)
Position text at bottom where contrast is strongest

Step 2: Test Contrast

Right-click text layer
Select “Contrast” plugin
Verify minimum 4.5:1 ratio for body text
Verify minimum 3:1 ratio for large text
Adjust text color or background opacity if needed

Step 3: Ensure Readability at Small Sizes

Critical: Your feature image shrinks when displayed in social feeds.

Duplicate your design
Resize to 300×158 px (how it appears in social preview)
Can you still read the text clearly?
If not, increase font size or darken background
Iterate until readable at all sizes

Using Brand Colors and Fonts Consistently

Establish Your Color Palette

Before designing, create your color system:

Right-click Figma → “Colors” panel
Add your brand colors:
- Primary (brand main color)
- Secondary (accent)
- Neutral (grays for text)
- Highlight (call-to-action)

Example palette:

Primary: #FF6B6B (brand red)
Secondary: #4ECDC4 (teal)
Neutral: #2C3E50 (dark gray)
Highlight: #FFE66D (yellow)

Set Up Typography Styles

Right-click → “Typography” panel
Create styles for each text size:
- Headline: Poppins Bold 48px
- Subheading: Poppins Medium 24px
- Body: Inter Regular 14px
- Caption: Inter Regular 12px

Apply Consistently

When designing multiple feature images:

Always use saved colors (not new hex codes)
Always use saved typography (not new fonts/sizes)
This ensures consistency across all content

Exporting Feature Images

Export Single Image

Select your design frame
Right-click → “Export”
Format: PNG or JPG
Scale: 2x (for retina displays)
Name: “feature-image-blog-title.png”

Export Multiple Sizes

Create one master design, export for different platforms:

Select master frame (1200×630)
Right-click → “Export”
Add multiple exports with different scales:
- 2x (retina 1200×630)
- 1x (standard 1200×630)
- 0.5x (thumbnail 600×315)

Export for Web Optimization

For fastest loading:

Export as PNG for text-heavy images
Export as JPG for photo-heavy images
Use TinyPNG or ImageOptim to compress
Target size: 100-150 KB

Batch Export for Multiple Designs

Create frames for each article:
- “Feature - Article 1”
- “Feature - Article 2”
- “Feature - Article 3”
Right-click each frame → Export
Save all to one folder
Rename systematically (feature-article-1.png, etc.)

Creating Multiple Feature Images Efficiently

Method 1: Master Template Workflow

Create one master template (see above)
Duplicate frame for each article
Change only the text (headline, subtitle)
Keep background, colors, fonts consistent
Export all at once

Time savings: Design 10 feature images in 30 minutes instead of 3 hours.

Method 2: Use Figma Tokens for Variants

Create component-based template
Use component variants for different backgrounds
Swap out text and images per article
Maintain consistency automatically

Method 3: Use Automator Plugin

Create master design
Use Automator plugin to batch-apply text changes
Replace placeholder text with actual headlines
Apply to all duplicates at once

Method 4: Batch Template with Content Reel

Create template with placeholder text
Use Content Reel plugin
Load CSV file with headlines and data
Plugin creates variations automatically

Pro Tips for High-Converting Feature Images

Test different styles: Some audiences prefer minimalist (solid color + text), others prefer image-heavy. Test both and measure performance.

Include your brand: Logo, colors, fonts should be instantly recognizable. Your feature image is a branding asset.

Readable at small sizes: Remember your image shrinks in social feeds. Readable at 300×160px? You’re good.

Use compelling numbers: If sharing data, feature the number prominently (“3 Ways to…” or “42% Increase…”).

Create urgency/curiosity: Headlines like “What You Don’t Know About [Topic]” or “The Secret to [Result]” perform well (ethically).

Test colors: High contrast, saturated colors perform better in social feeds than pale, desaturated designs.

Update regularly: Periodically refresh your feature image designs to stay current and maintain visual interest.

Common Mistakes to Avoid

Too much text: Feature images with paragraphs of text won’t be readable in preview sizes. Keep it to 1-2 lines.

Poor contrast: Text that’s hard to read over images drives people away. Use Contrast plugin.

Ignoring safe zones: Content cut off at the edges looks amateur. Use guides.

Generic stock photos: Unique, on-brand visuals perform better than random stock photos. Use brand photography or illustrations.

Inconsistent styling: Each feature image should look like it belongs to the same publication. Consistency builds recognition.

Wrong dimensions: Using wrong aspect ratios means cropping or stretching. Design in exact target dimensions.

Conclusion

Feature images are a crucial part of your content strategy. They’re often the first impression potential readers have of your work. A professional, on-brand feature image increases clicks by 40-50% compared to mediocre alternatives.

Use the template approach to create professionally designed feature images in minutes. Maintain consistency in colors, fonts, and layout. Test different styles and double-down on what works. Your blogs will get more shares, your social media will look more polished, and your content will perform better across the entire funnel.