Web/Guru
Visit hellodevs.co
  • Agency website
  • Figma → Next.js
  • Light & dark mode
  • Design engineering
The HelloDevs website open on a laptop, seen from a low angle against an orange glow

HelloDevs case study: from Figma design and motion to a Next.js website

Figma to Next.js

Project Overview

HelloDevs is a Shopify development agency: it builds Shopify apps, themes and custom builds that stay maintainable long after launch. The website presents its services, apps, work and expertise through a modern digital experience designed to communicate value and build trust with potential clients.

We designed the site in Figma and prototyped its motion there first, then engineered that idea into a production Next.js website: GSAP scroll animation, Lenis smooth scrolling, and a light and a dark theme.

Project
HelloDevs
Industry
Shopify development
Platform
Web / Shopify ecosystem
Built with
Next.js, GSAP, Lenis

One design, every screen

A responsive Next.js site, on the phone and in the browser

The same Figma design runs from a phone to a wide desktop. On small screens the Our Work rail becomes a native CSS scroll-snap row you swipe with your thumb, and the numbers in Our Story count up as they arrive.

A hand holding a phone with the HelloDevs website scrolling on its screen

We blend creativity, code, and cutting-edge tech to turn your ideas into powerful products.

10+

Number of Apps

100%

Client's Satisfaction

10+

Number of Projects
The HelloDevs home page in a desktop browser, scrolling from the hero through Our Story, Our Work and Our Scope

The brief

Goal, problems and solutions for a Shopify development agency website

Goal

Create a modern and professional website that clearly communicates HelloDevs’ expertise, showcases its products and services, and encourages potential clients to start a conversation.

Problems

  • Communicating Multiple Capabilities

    A wide range of Shopify and e-commerce services needed to be presented clearly without making the website feel complicated.

  • Establishing Product Credibility

    The website needed to demonstrate expertise and give visitors confidence in the team’s ability to deliver reliable digital products.

Solutions

  • Clear Content Structure

    Organized services, products and company information into a simple hierarchy so visitors can quickly understand what HelloDevs offers.

  • Product-Focused Presentation

    Highlighted products, capabilities and supporting content to demonstrate expertise while creating a stronger and more professional brand presence.

Figma to Next.js

From Figma motion to production code

We designed HelloDevs in Figma, prototyped how every section should move, then engineered that motion in Next.js. Scroll the four steps: the same Our Work rail goes from a Figma frame to the live site.

  1. Design in Figma

    Every act of the home page starts as a Figma frame: Our Story, Our Work, Our Scope, Our Proof. Brand orange, cream and ink become variables, Unbounded sets the display type, and the same values land in the code as tokens.

    app/globals.css
    /* Design tokens: values taken from Figma */
@theme {
  --color-brand: #fd6600;
  --color-cream: #ffefde;
  --color-ink: #1a1a1a;
  --font-display: var(--font-unbounded);
}

  2. Prototype the motion

    Before any code, the motion is prototyped: a walkthrough video of the whole page and a loader animation. The build follows them beat for beat, and each component notes the Figma frame and the timestamps it implements.

    lib/motion.ts
    // The site's motion vocabulary: one curve,
// one rise distance, one stagger
export const EASE = {
  expo: "expo.out",
  out: "power3.out",
};
export const RISE = 32;
export const STAGGER = 0.08;

  3. Engineer it in Next.js

    Design engineering turns the prototype into code. Our Work pins its card rail and scrubs it with GSAP ScrollTrigger, each card leans as it crosses the centre, and Lenis smooths the wheel on GSAP's own clock. Below 1024px the rail is a native CSS scroll-snap row.

    components/home/OurWork
    const mm = gsap.matchMedia();
mm.add(
  "(min-width: 1024px) and (prefers-reduced-motion: no-preference)",
  () => {
    gsap.to(track, {
      x: () => -distance(),
      ease: "none",
      scrollTrigger: {
        trigger: section,
        start: "top top",
        end: () => "+=" + (distance() + 320),
        pin: true,
        scrub: 1,
      },
    });
  },
);

  4. Ship it in light and dark

    The site ships with a light and a dark theme that switch without a flash of the wrong colours, and with its SEO written in code: sitemap, robots, llms.txt, a generated Open Graph image and JSON-LD on every page.

    app/layout.tsx
    <ThemeProvider
  attribute="class"
  defaultTheme="light"
  enableSystem={false}
>
  <SmoothScrollProvider>
    {children}
  </SmoothScrollProvider>
</ThemeProvider>

Website Design: Light Mode

The HelloDevs home page as it runs on hellodevs.co today, captured from the live site. The light theme is white and editorial: its contrast comes from the orange Our Work act, the ghost headings and the type. Every act started as a Figma frame and a Figma motion prototype before it became a Next.js component.

HelloDevs home page in light mode, top half: the Shopify Development Agency hero, the Our Story stats bars, the orange Our Work act with app cards, the Our Scope services list and the Our Proof case studies
Home page, part 1: hero, Our Story, Our Work, Our Scope, Our Proof
  • Unbounded meets GeistUnbounded for display type, Geist for text, both self-hosted through next/font.
  • Our Work: GSAP pinA pinned card rail scrubbed by ScrollTrigger; each card leans as it passes. Below 1024px it is a native CSS scroll-snap row.
  • Our Scope: CSS stickyA sticky stage drives the services accordion; the numerals cross-fade instead of animating font size.
HelloDevs home page in light mode, bottom half: the You’ll Get deliverables list, the Our Trust testimonial and stats, the Our Guide FAQ, the Our Talk contact form and the footer
Home page, part 2: You’ll Get, Our Trust, Our Guide, Our Talk, footer
  • Ghost headingsThree layers per heading: a scrubbed parallax, a static mask and a soft-focus glyph entrance.
  • Our Trust → Our GuideA sticky 3D testimonial deck; the FAQ panel slides up over it and answers open with pure CSS grid rows.

Dark Mode, engineered with next-themes

Dark mode is not an inverted light mode. The sections keep their rhythm, alternating #1A1A1A and #0D0D0D grounds, while next-themes swaps the palette behind them. The swap washes across the page in half a second instead of cutting.

HelloDevs services page in light mode: the Our Services hero with an orange glow on white

Try it: this is the HelloDevs services page in both themes, and the switch is copied from the site’s own moon and sun toggle.

HelloDevs home page in dark mode, top half: the hero on near-black, the Our Story stats bars, the orange Our Work act, the Our Scope services list and the Our Proof case studies on dark cards
Home page in dark mode, part 1
  • One class, no flashnext-themes puts .dark on <html> from localStorage before the first paint, so the page never flashes the wrong theme.
  • Tones, not coloursSections declare a tone (light, dark, brand); the theme swaps the palette behind it, so no component hard-codes white or ink.
  • The orange act stays orangeOur Work keeps its brand ground in both themes; on orange the logo turns white.
HelloDevs home page in dark mode, bottom half: You’ll Get, the Our Trust testimonial on a raised dark card, the Our Guide FAQ, the Our Talk contact form and the footer
Home page in dark mode, part 2
  • Raised dark cardsCards move to #262626 with a deeper shadow; hairlines mix currentColor, so one rule is right on every ground.

Front-end engineering

Design engineering under the hood

A motion-heavy site only works if it stays fast, accessible and easy to find. This is the stack behind hellodevs.co and the numbers it scores.

The stack, layer by layer

  1. SEO in codesitemap.ts · robots.ts · llms.txt · JSON-LD
  2. GSAP + LenisScrollTrigger · SplitText · Flip on one ticker
  3. next-themesLight and dark, no flash
  4. Tailwind CSS v4Figma tokens in @theme
  5. Next.js 16 + React 19App Router · TypeScript

Lighthouse, hellodevs.co home page

Desktop
Performance
96
Accessibility
93
Best Practices
100
SEO
100
First Contentful Paint
0.9 s
Largest Contentful Paint
1.1 s
Total Blocking Time
80 ms
Cumulative Layout Shift
0.009

Crawl checks on the live site

  • robots.txt
  • sitemap.xml · 28 URLs
  • llms.txt
  • Open Graph image · 1200 × 630
  • JSON-LD · Organization, WebSite, FAQPage

Lighthouse 12.8, desktop preset, live home page, measured by Webguru on 2 October 2026.

What is under the hood

  • Next.js App Router, typed end to end

    Next.js 16 and React 19 in TypeScript. All copy lives in locale files, and the t() helper only accepts keys that exist, so a typo in a heading fails the build instead of shipping.

    lib/i18n.ts · MessageKey

  • Dark mode without the flash

    next-themes sets the theme class before the first paint, and Tailwind's dark variant is keyed to that class rather than to the OS. Coloured surfaces wash between themes in half a second instead of cutting.

    <ThemeProvider attribute="class">

  • GSAP and Lenis on one clock

    Lenis smooth scroll runs on GSAP's ticker and updates ScrollTrigger on every scroll, so scrubbed timelines never drift. Every timeline lives in a gsap.context that is reverted on unmount.

    gsap.ticker.add((t) => lenis.raf(t * 1000))

  • Reduced motion and native scrolling

    With reduced motion on, Lenis is skipped, pins are gated by gsap.matchMedia and transitions stop. On phones the Our Work rail is a native CSS scroll-snap row, and touch keeps its native momentum.

    snap-x snap-mandatory · syncTouch: false

  • Type served by next/font

    Unbounded for display, Geist for text and Geist Mono for code, self-hosted through next/font with swap, so there are no requests to a font CDN and no layout jump when they load.

    next/font/google · Unbounded · Geist

  • SEO written in code

    The sitemap is generated from the same registries the routes are built from, next to robots.ts and an llms.txt route. The Open Graph card is drawn in code, and every page carries Organization and WebSite JSON-LD.

    sitemap.ts · opengraph-image.tsx

Figma tokens → CSS variables

Design System

Drawn in Figma, shipped as code: two typefaces loaded with next/font, and every colour declared once in globals.css with a light and a dark value, so the dark mode is a token swap, not a second design.

HelloDevs helps brands grow on Shopify with apps, themes and custom builds that stay maintainable long after launch.

Unbounded

--font-display

18px – 76pxDisplay · Headings

We focus on clean architecture, scalable solutions and long-term partnerships that drive real results. Public App Store apps or private apps for one store: the build, the review process, the billing API and the maintenance after launch.

Geist

--font-sans

14px – 18pxBody · UI · Navigation

Labelled “Inter” on the Figma board, but the specimen there was already set in Geist, and Geist is what ships. The board and the build agree.

One token set, two themes

HelloDevs runs light and dark mode with next-themes. Each surface token holds two values and the whole page re-points at once, washing across in 0.5s on the same ease-out curve the live site uses. Try the switch: it is the site’s own moon-and-sun pair.

Contrast was measured, not assumed. #FD6600 is 2.97:1 on white, so on light grounds it stays a fill and display colour, and orange text on this page uses a deeper #C24E00 (4.79:1, AA). On ink #1A1A1A the same orange reaches 5.87:1, which is why the dark mode can set orange type freely. The site’s secondary grey moved from Figma’s #8C8C8C (3.36:1) to #737373 (4.74:1).

Figma to Next.js FAQ

Figma to Next.js and design engineering: Questions, answered

What clients ask us before we turn their Figma design into a website.

Ask us anything

  • Yes. We build from your Figma frames and your motion prototype, whether that is Smart Animate, a video walkthrough or a written brief. We match spacing and type to the design, then rebuild each animation in code with GSAP or CSS so it stays smooth on real devices.

  • We turn the design into tokens (colours, type, spacing), build each section as a React component in Next.js, wire in content and forms, then add motion, metadata and structured data. You review on a live preview link at every step, not only at the end.

  • Design engineering is the work between a finished design and a finished website: getting motion, responsiveness, accessibility and speed right without losing what made the design good. It is why a site like HelloDevs can move a lot and still score 96 for performance on desktop.

  • Webflow suits a marketing team that wants to edit layouts visually. WordPress suits a content-heavy site with many editors. Next.js suits a custom design with real motion, an app or shop behind it, and strict speed and SEO goals. We will tell you which fits after a short call.

  • Yes. We design both themes, store the visitor's choice and apply it before the first paint, so the page never flashes the wrong colours. Images, logos and charts get their own dark versions where they need one.

  • Yes. Webguru builds Shopify themes, custom storefronts and apps for brands worldwide. HelloDevs is a client: we designed and built its website, which presents HelloDevs' own Shopify services.

  • Not if it is built well. Text stays real HTML, motion runs after the content is visible, and pages ship with a sitemap, canonical tags and structured data. HelloDevs scores 100 for SEO in Lighthouse with all of its animation on.

  • We can. Maintenance covers framework and package updates, uptime and speed checks, content changes and new sections built in the same design system. Or we hand over clean, documented code to your own team.

  • It depends on the number of pages, how much custom motion there is, and whether there is a shop, app or CMS behind it. We quote after a short call, once we have seen your Figma file.

Don’t miss a new work

Two hands holding up a tablet that shows the live HelloDevs homepage, switching between its light and dark theme
Webguru.pk

Have a Figma design that needs engineering?

Let’s do a project together!

Send us the Figma file, and the motion prototype if there is one. We engineer it into a fast Next.js website with GSAP motion, light and dark mode and clean SEO, the way we built HelloDevs.

Let’s Connect
Webguru.pkwebguru.com.pk@gmail.com