Free vs Premium Content

Content Tier Overview

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

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 is not 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 are unsure whether Pro is right for you, try several Free+ challenges first. They will 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 is 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, comprehensive requirements
• Unique, interesting projects you will not 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 comprehensive projects
• Need consistent Figma access across all challenges
• Are committed to regular practice

Comparing the Tiers

Design File Access by Tier

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

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 are 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. Do not 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 (our highest-quality projects)
• 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 are 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 (our highest-quality projects)
• Figma files for all Free challenges
• 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 are ready to start building. Pick a challenge, download the files, and begin your Frontend Mentor journey. We look forward to seeing your solutions.