Working with Design Files

Understanding the Two Design Formats

Frontend Mentor provides designs in two formats, depending on your subscription:

| Feature | JPEG (Free) | Figma (Pro) | | --- | --- | --- | | Visual reference | Yes | Yes | | Exact measurements | No | Yes | | Precise colors | Style guide only | Inspect any element | | Export assets | No | Yes | | Font details | Style guide only | Full typography info | | Cost | Free | Pro subscription |

Both formats allow you to build great solutions, but they require different approaches.

Working with JPEG Designs (Free)

JPEG files are static images. You can't click into them to get measurements, but with the right techniques, you can still build accurate implementations.

Extracting Colors

The style guide provides your primary colors, but sometimes you need to verify or find additional colors:

Using Browser-Based Tools:

1. Open your design image in a new browser tab
2. Use a browser extension like ColorZilla or Eye Dropper
3. Click on the color you want to identify
4. Copy the hex, RGB, or HSL value

Using Computer Tools:

• macOS Preview: Use the color picker from Tools > Show Inspector
• Windows Paint: Use the color picker, then check Edit Colors

Tip: Always verify extracted colors against the style guide. JPEG compression can slightly alter colors, so the style guide values are more accurate.

Estimating Measurements

Without Figma, you'll need to estimate spacing, widths, and heights:

Method 1: Browser Zoom Technique

1. Open the design image in your browser
2. Zoom to 100% (actual size)
3. Use your browser's developer tools to measure
4. Create a transparent div and resize it over elements

Method 2: Image Editor Measurement

1. Open the design in an image editor
2. Use the ruler or measurement tools
3. Measure distances in pixels
4. Note these values for your CSS

Method 3: Screen Measurement Tools

Use dedicated measurement tools:

• macOS: Built-in Screenshot tool (Cmd+Shift+5) shows dimensions
• Windows: Microsoft PowerToys Screen Ruler
• Cross-platform: PixelSnap, Measurely

Identifying Fonts

The style guide tells you which fonts to use:

1. Check the style guide for the font family name
2. Note the weights needed (300, 400, 700, etc.)
3. Visit Google Fonts
4. Search for the font and select required weights
5. Copy the embed code to your HTML

<link rel="preconnect" href="<https://fonts.googleapis.com>">
<link rel="preconnect" href="<https://fonts.gstatic.com>" crossorigin>
<link href="<https://fonts.google.com/css2?family=Inter:wght@400;700&display=swap>" rel="stylesheet">

Recommended Tools for JPEG Workflows

• ColorZilla (Browser extension) - Color picking
• PixelSnap (macOS) - Screen measurement
• PerfectPixel (Browser extension) - Overlay comparison
• Responsively (App) - Multi-device preview

Working with Figma Files (Pro)

Figma files provide everything you need for precise implementation. Here's how to make the most of them.

Accessing Your Figma Files

1. From the Challenge page, click the Figma download button
2. The design downloads to your computer
3. Unzip/Extract the ZIP folder
4. Import the .fig file in Figma (browser or desktop app)
5. You now have full access to the file

Getting Exact Measurements

Selecting Elements:

1. Click on any element in the design
2. The right panel shows all properties

Measuring Spacing:

1. Select an element
2. Hold Alt/Option and hover over other elements
3. Figma displays the exact distance in pixels

Checking Dimensions:

1. Select any element
2. Look at the right panel under "Frame" or "Layout"
3. Width, height, and position are displayed

Extracting Precise Colors

In Figma, colors are exact:

1. Select an element with the color you need
2. Look at the "Fill" section in the right panel
3. Click the color swatch to see values
4. Copy as HEX, RGB, or HSL

For gradients:

1. Select the element
2. Click the fill color
3. View all color stops and positions
4. Note the gradient direction/angle

Inspecting Typography

Figma gives you complete font information:

1. Select a text element
2. Check the right panel under "Text"
3. You'll see:
   • Font family
   • Font weight
   • Font size
   • Line height
   • Letter spacing

/* Example of values from Figma */
.heading {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: -0.5px;
}

Exporting Assets

Sometimes you might need to export assets differently than provided:

1. Select the element or group to export
2. Look for "Export" at the bottom of the right panel
3. Click the + button to add an export setting
4. Choose format (PNG, SVG, JPG) and scale
5. Click "Export [element name]"

Pro Tip: Export icons as SVG for crisp rendering at any size. Export photographs as JPG or WebP for smaller file sizes.

Understanding Auto Layout and Constraints

Figma designs often use Auto Layout, which shows you:

• How elements are meant to space themselves
• Padding and gap values
• How components should respond to content changes

This information is invaluable for building flexible, responsive components.

Tips for Accurate Implementation

Regardless of which design format you use, these tips help achieve precise results:

Use Browser DevTools Overlay

1. Take a screenshot of your implementation
2. Open the design image
3. Use PerfectPixel or similar to overlay them
4. Adjust opacity to spot differences

Set Up CSS Custom Properties Early

:root {
  /* Colors from style guide */
  --color-primary: hsl(215, 51%, 70%);
  --color-secondary: hsl(178, 100%, 50%);
  --color-neutral-dark: hsl(217, 54%, 11%);

  /* Typography */
  --font-family: 'Outfit', sans-serif;
  --font-size-base: 18px;

  /* Spacing (establish a system) */
  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 32px;
  --space-xl: 48px;
}

Build Component by Component

1. Identify distinct components in the design
2. Build each one in isolation first
3. Then assemble them into the full layout
4. This makes debugging easier

Check at Multiple Breakpoints

1. Test your implementation at various widths
2. Compare against both mobile and desktop designs
3. Ensure smooth transitions between breakpoints
4. Watch for content overflow or awkward spacing

When It's OK to Deviate from the Design

Making an accurate replica is a goal, not an absolute rule. Here's when deviation is acceptable:

Accessibility Improvements

• Increase contrast if the design has insufficient color contrast
• Larger touch targets for better mobile usability
• Clearer focus states for keyboard navigation

Technical Constraints

• Font rendering differences across browsers and operating systems
• Sub-pixel rounding may cause 1px differences
• Responsive behavior between the provided breakpoints

Practical Decisions

• Performance optimizations that require different image formats
• Animation timing that feels better in practice
• Content edge cases the design didn't account for

Important: If you make intentional deviations, document them in your README when submitting. Explain why you made the change and how it improves the implementation.

Quick Reference: Measurement Checklist

When analyzing a design, gather these values:

• [ ] Primary and secondary colors
• [ ] Background colors
• [ ] Text colors for different contexts
• [ ] Font families and weights
• [ ] Font sizes for headings and body
• [ ] Line heights
• [ ] Letter spacing (if specified)
• [ ] Maximum content width
• [ ] Spacing between major sections
• [ ] Component padding
• [ ] Border radius values
• [ ] Shadow values (if any)
• [ ] Breakpoint widths

---

With these techniques, you'll be able to work confidently with any design format. The next guide explains how to understand and interpret the challenge brief.