Free vs Premium Content

Content Tier Overview

| Tier | Access | Design Challenge Files | Best For | |------|--------|----------------------|----------| | Free | Everyone | JPEG (Figma for Pro subscribers) | Getting started, casual practice | | Free+ | Everyone | Figma for everyone | Practicing with Figma, previewing the Pro experience | | Premium | Pro subscribers only | Figma | Highest-quality portfolio projects |

Note

Product Challenges have different deliverables — see "How Tiers Apply to Product Challenges" below.

Free Tier

Free challenges are available to everyone who creates a Frontend Mentor account. These challenges provide everything you need to practice and improve your skills.

What Everyone Gets

Design Files

• JPEG images of the design (desktop and mobile views)
• All visual states (hover, active, focus where applicable)

Assets

• All required images
• Icons in appropriate formats
• Font files or links to web fonts

Documentation

• Detailed README with requirements
• Style guide with colors and typography
• User stories describing expected functionality

What Pro Subscribers Get

Pro subscribers get Figma access on Free challenges, giving them:

• Access to the original Figma design
• Exact measurements and spacing
• Layer inspection and organization
• Developer handoff features

Who Should Use Free Challenges

Free challenges are perfect for:

• Developers just starting with Frontend Mentor
• Those who want to practice without financial commitment
• Developers testing if Frontend Mentor fits their learning style
• Anyone comfortable estimating measurements from images

Tip

Many professional developers build successfully from JPEG files alone. While Figma access is convenient, it isn't strictly necessary to create accurate implementations.

Free+ Tier

Free+ challenges are special because they provide Figma design files to everyone, not just Pro subscribers. This makes them an excellent way to practice working with Figma and get a taste of the Pro experience.

What Everyone Gets

All users receive:

• JPEG design files
• Assets and documentation
• Full challenge access
• Figma design files (the key difference from Free tier)

Benefits of Figma Access

• Pixel-perfect accuracy with exact measurements
• Faster development with less guessing
• Professional workflow practice
• Better understanding of design structure
• Experience with the design-to-code workflow used in real teams

Why Free+ Exists

Free+ challenges serve an important purpose:

• Let everyone practice with Figma, regardless of subscription status
• Give you a taste of what Pro offers
• Help you decide if Figma access is valuable for your workflow
• Provide a stepping stone between Free and Premium challenges

Tip

If you're unsure whether Pro is right for you, try several Free+ challenges first. They'll show you exactly what working with Figma files is like.

Premium Tier

Premium challenges are our highest-quality projects and are exclusive to Pro subscribers. These are the best challenges Frontend Mentor offers, designed to create exceptional portfolio pieces.

What's Included

Highest-Quality Projects

• The most polished, comprehensive challenges on the platform
• Complex, real-world applications
• Designs that stand out in portfolios
• Regularly updated with new content

Full Figma Design Files

• Complete design file access
• All pages and components
• Design system elements where applicable

Comprehensive Resources

• High-quality images
• Complete icon sets
• Detailed requirements
• Extended user stories
• Additional technical specifications

Premium Challenge Characteristics

Premium challenges typically feature:

• More complex, detailed requirements
• Unique, interesting projects you won't find elsewhere
• The highest design quality
• Multiple pages or application states
• Greater learning potential

Why Go Premium

Premium challenges are ideal for developers who:

• Want the best portfolio pieces possible
• Are serious about landing a developer role
• Want access to the most in-depth projects
• Need consistent Figma access across all challenges
• Are committed to regular practice

How Tiers Apply to Product Challenges

Product Challenges are available across the Free and Premium tiers. The Free+ tier applies to Design Challenges only, since it relates to Figma design file access. Since Product Challenges don't include design files (JPEG or Figma), the tier differences work slightly differently.

What All Product Challenges Include

Regardless of tier, every Product Challenge provides:

• Product specification - Detailed requirements with acceptance criteria for each feature
• Brand kit - Colors, typography, spacing, and design inspiration
• UI/UX guidance - Patterns, accessibility checklist, and dos and don'ts
• Sample data - Real-world data with edge cases
• Starter CSS - CSS custom properties and optional Tailwind configuration
• AI context files - Instructions for AI coding tools

Free vs Premium Product Challenges

• Free Product Challenges are available to everyone and offer a complete spec-driven experience
• Premium Product Challenges are exclusive to Pro subscribers and feature more complex, substantial projects with richer specifications

The primary tier difference for Product Challenges is whether the challenge itself is accessible (Free vs Premium).

Comparing the Tiers

Design File Access by Tier (Design Challenges)

| Tier | Free Users | Pro Subscribers | |------|------------|-----------------| | Free | JPEG only | JPEG + Figma | | Free+ | JPEG + Figma | JPEG + Figma | | Premium | No access | JPEG + Figma |

Note

The table above applies to Design Challenges only. Product Challenges don't include JPEG or Figma design files.

Challenge Access Comparison

| Aspect | Free User | Pro Member | |--------|-----------|------------| | Free challenges | Full access (JPEG) | Full access + Figma | | Free+ challenges | Full access + Figma | Full access + Figma | | Premium challenges | No access | Full access + Figma |

Working with JPEG Files

If you're using Free challenges without Figma access, here are tips for accurate builds:

Measuring Techniques

1. Use design software - Import JPEGs into Figma (free account) or similar tools to measure
2. Browser developer tools - Take measurements using browser extensions
3. Common spacing patterns - Most designs use 8px, 16px, 24px, 32px spacing systems
4. Relative sizing - Focus on proportions rather than exact pixels

Achieving Accuracy

• Study the style guide carefully
• Use consistent spacing throughout
• Match colors exactly from the provided values
• Pay attention to typography details
• Test across screen sizes

Note

Employers care more about clean code and good problem-solving than pixel-perfect accuracy. Don't stress about small measurement differences.

Is Pro Worth It?

Consider a Pro subscription if you:

• Use Frontend Mentor regularly (weekly or more)
• Find estimating measurements frustrating
• Want access to Premium challenges for stronger portfolio pieces
• Are building a portfolio seriously
• Learn best with precise specifications

A Pro subscription may not be necessary if you:

• Practice occasionally
• Are comfortable with JPEG-based development
• Have limited budget
• Are just exploring the platform
• Prefer the challenge of estimation

Making Your Decision

Start Free

We recommend starting with Free and Free+ challenges to:

• Understand the platform
• Experience the workflow
• Try Figma access with Free+ challenges
• Determine if Frontend Mentor fits your style
• Build initial skills

Upgrade When Ready

Consider upgrading when:

• You're committed to regular practice
• Free challenges feel limiting
• You want access to Premium challenges for better portfolio pieces
• Figma access on all challenges would improve your workflow

Pro Subscription Benefits Summary

• Access to all Premium challenges
• Figma files for all Free challenges
• Unlimited AI-powered code reviews
• Full challenge library access
• Support continued platform development
• Regular new challenge releases

Getting Started

Regardless of which tier you use, Frontend Mentor offers valuable learning opportunities. The most important thing is to start building, submit solutions, and engage with the community.

Your growth as a developer depends more on consistent practice than on which tier you use. Choose the option that fits your current situation, and remember that you can always upgrade later as your needs evolve.

---

Congratulations on completing the Getting Started guide series. You now understand:

• What Frontend Mentor offers
• How to create your account
• How to navigate your dashboard
• How to choose appropriate challenges
• What each difficulty level involves
• The differences between content tiers

You're ready to start building. Pick a challenge, download the files, and begin your Frontend Mentor journey. We look forward to seeing your solutions.