Skip to main content

Scrimba for Designers

Designers can move from Figma to working frontend with HTML, CSS, Flexbox, Grid, and React on Scrimba. The Frontend Developer Path runs about 81.6 hours, and you start free with HTML and CSS. The interactive editor fits how designers already work: change the code, see the result. Pro costs less than a bootcamp; see the official pricing page (opens in a new tab).

Quick verdict​

If you want to code your own Figma designs without becoming a full engineer, this guide stops at the visual layer (HTML, CSS, Flexbox, Grid, light React) and skips backend. If you do decide to switch careers later, the Frontend Developer Path is the next step.

Read this page if​

You design in Figma, Sketch, or XD and you want to code your own designs rather than hand them off and watch developers approximate them. You want enough frontend to build a portfolio site, prototype interactive ideas, or join a startup where the design-engineering boundary is soft. You like learning visually and find pure-text courses dry.

Skip this page if​

You want to fully switch careers from design to engineering. This guide stops at the visual layer; it deliberately skips backend, deployment depth, and the hiring module. If you want a job as a developer rather than a hybrid, read the Frontend Developer Path or the Fullstack Developer Path instead, and use the 6-month study plan for pacing.

You already write HTML and CSS comfortably and want to add JavaScript and React. Jump straight to Learn JavaScript and Learn React; the box-model material here will feel like a recap.

You only need a no-code tool to ship marketing pages. Webflow, Framer, or even Notion sites get you there faster than learning HTML and CSS from scratch. Learn to code once the no-code ceiling blocks you.

Why designers pick this up fast​

You arrive with three transferable habits.

  • Visual thinking: you already see layouts as components, grids, and hierarchy.
  • Attention to detail: you notice a 2px padding error that engineers will miss for weeks.
  • CSS intuition: Flexbox maps directly to Figma Auto Layout, and Grid maps to your column-based page layouts.

The hardest part of frontend for most beginners (visual layout) is the part you already think in. The harder shift for you will be JavaScript logic and state.

The designer's sequence on Scrimba​

You do not need backend databases yet. Stick to the visual stack.

Phase 1: HTML and CSS foundation​

Course: Learn HTML and CSS (Free, 5.7 hours of video; budget 12 to 18 hours).

Goal: understand the box model and document structure. Designer translation: HTML is your layer panel; CSS is your properties panel. The builds are visual from the start: a Google.com clone, a digital business card, a space exploration site, and a birthday site. The closing Hometown Homepage solo project is free.

Phase 2: Modern layouts (Flexbox and Grid)​

Courses: Learn CSS Flexbox and Learn CSS Grid. Both are Pro courses; the first four Flexbox scrims (nine minutes, the axis model) and three Grid scrims are free samples. Each course is two to three hours of work, and Grid ends with a BBC News clone solo project.

Goal: ship Figma Auto Layout in code. Flexbox handles one-dimensional layouts (rows or columns); Grid handles two-dimensional page structure.

Phase 3: Responsive design​

Course: Responsive Web Design (Pro, 15.1 hours of video; budget 30 to 45 hours across six projects).

Goal: make a layout work on phone, tablet, and desktop without hand-coding three versions. This is the step where most no-code designers stop being able to fake it.

Phase 4: JavaScript for interactivity​

Course: Learn JavaScript (Free in full; budget 20 to 30 hours). Module 1 is a passenger counter you deploy to Netlify.

Goal: handle clicks, hover states, and small bits of state. Designer translation: prototyping logic, but real. You no longer need to mock interactions in Figma; you can build them.

Phase 5: React for component thinking​

Course: Learn React (Free; budget 35 to 45 hours). The first Pro solo project, a Digital Business Card built from a design file, is the designer's natural test.

Goal: reusable UI components. Designer translation: React components are Figma Components with code. You build a Button once and reuse it everywhere with different props.

Optional: UI Design Fundamentals​

Course: UI Design Fundamentals with Gary Simon (Free, 70 minutes of video, 20 scrims; two to three hours with the five challenges).

This course is useful even for designers: it teaches you to implement a design system in CSS, not draw one in Figma. The Contrast lesson measures a hero's WCAG ratios before and after; Design Challenge 3 hands you a grayscale form and five hex codes. The translation step is where most designer-developer pipelines break, and this course lives at exactly that boundary.

Your new workflow​

Design in Figma, then open VS Code and build the live version yourself. No more dev-handoff meetings where padding and typography drift. For client work, you can ship landing pages end to end and charge accordingly.

What this guide does not promise​

This sequence will not make you a software engineer. It makes you a designer who codes the visual layer well, a different role from full-stack development. If you want a full developer job, follow the Frontend Path in full and include the Getting Hired module.

Sources​

  • Nielsen Norman Group articles on the design-development handoff document the common pain points (drifted spacing, approximated interactions) this guide targets.
  • Adobe and Figma both publish posts on the "hybrid designer-developer" or "design engineer" role; that label is the job title this path supports.
  • BLS Occupational Outlook Handbook for current web and software developer wage ranges.
  • Scrimba Help Center for the current free course list and Pro feature set.

FAQ for designers​

Code what you design, inside the lesson

Free HTML and CSS scrims first; Pro when you want the full Frontend path.

Try Scrimba free (opens in a new tab)

Related Guides

Next step

Learn CSS Grid

Docs
Last updated on