The newline Guide to React Component Design Systems with Figmagic

This course is a comprehensive guide to building a React component library based on a well-architectured design system. You’ll create a full component-based React-driven application with Figmagic, underpinned by Storybook, good documentation, and with CI and automated testing. Learn senior-level system architecture skills for frontend React code; skills you can apply broadly in working on any frontend application.

  • 4.1 / 5 (14 ratings)
  • Published
  • Updated
Course Instructor
Avatar Image

Mikael Vesavuori

Cloud Software Architect (and Technical Standards Lead) at Polestar

How The Course Works

01Remote

You can take the course from anywhere in the world, as long as you have a computer and an internet connection.

02Self-Paced

Learn at your own pace, whenever it's convenient for you. With no rigid schedule to worry about, you can take the course on your own terms.

03Community

Join a vibrant community of other students who are also learning with The newline Guide to React Component Design Systems with Figmagic. Ask questions, get feedback and collaborate with others to take your skills to the next level.

04Structured

Learn in a cohesive fashion that's easy to follow. With a clear progression from basic principles to advanced techniques, you'll grow stronger and more skilled with each module.

Course Overview

What You Will Learn
  • How to set up a continuous design pipeline from code to CI/CD, using some of the best services out there

  • What Figma, Figmagic, and design tokens are and how they enable you to be more productive

  • How design tokens can function as a contract between designers and developers, setting up powerful new ways of working

  • Generate React components using Figma

  • The history of design/code tooling and how to argue for process and tooling change

  • Understand the value of documentation, using Storybook and Figma to document your work

Among developers and architects, "continuous integration and delivery/deployment" (CI/CD for short) has increasingly become the norm for almost two decades. And while frontend development has gone through the framework revolution, going from design to code with the speed expected of CI/CD is still a pain. But it doesn't need to be!

This 10-module course is taught by Mikael Vesavuori, an architect and developer who has helped companies like Polestar redefine their technology and design processes, tooling and ways of working.

In the course, we will create a full component-based React-driven application with Figmagic, underpinned by Storybook, good documentation, and with CI and automated testing.

We will bring the dev-designer collaboration to its current state-of-the-art with a DevOps-inspired life cycle, which could be called “continuous design” (after continuous integration/deployment or CI/CD).

While there is a pre-defined, specific toolset that we’ll use, the end goal of the course is to teach you a wider perspective of what it means to work end-to-end with design systems. Nearly all individual tools are exchangeable: we’re more interested in the capabilities enabling our desired way-of-working than the specific tools chosen to get there.

Our students work at

  • salesforce-seeklogo.com.svgintuit-seeklogo.com.svgAdobe.svgDisney.svgheroku-seeklogo.com.svgAT_and_T.svgvmware-seeklogo.com.svgmicrosoft-seeklogo.com.svgamazon-seeklogo.com.svg

Course Syllabus and Content

Module 1

Introduction

2 Lessons

Module 10

Summary and thank you

1 Lesson

Subscribe for a Free Lesson

By subscribing to the newline newsletter, you will also receive weekly, hands-on tutorials and updates on upcoming courses in your inbox.

What Students are Saying

        Meet the Course Instructor

        Mikael Vesavuori

        Mikael Vesavuori

        👋 Hi! I'm Mikael, and while working as a cloud architect, I can't keep myself away from the keyboard so I write a lot of open source Node code too. What I know best and love most is enabling teams through technologies like Figma, Figmagic and the serverless paradigm.

        Purchase the course today

        One-Time Purchase

        newline Guide to React Component Design Systems with Figmagic

        $69$79$10.00 off
        The newline Guide to React Component Design Systems with Figmagic
        • Discord Community Access
        • Full Transcripts
        • Money Back Guarantee
        • Lifetime Access

        newline Pro Subscription

        $18/MO

        Get unlimited access to the course, plus 60+ newline books, guides and courses. Learn More

        The newline Guide to React Component Design Systems with Figmagic

        Billed annually or $40/mo billed monthly. Free to cancel anytime.

        • Discord Community Access
        • Full Transcripts
        • Money Back Guarantee
        • Lifetime Access

        Plus:

        • Unlimited access to 60+ newline Books, Guides and Courses
        • Interactive, Live Project Demos for Every newline Book, Guide and Course
        • Complete Project Source Code for Every newline Book, Guide and Course
        • Best Value 🏆

        Frequently Asked Questions

        Who is this course for?

        This course is for everyone who ever asked themselves: 'Why does the front-end workflow suck, year after year?' In this course, I attempt to provide a holistic solution to that question, from theory and principles to tooling and actual full-scale implementation.

        What is the ratio of coding vs Figma design?

        During the course, you will both do a bit of design (according to directions in the course) but mostly it's about modifying pre-provided code. So, the ratio is more code than design, since Figma is just a necessary support.

        What if I need help?

        You can ask me questions anytime through the community Discord channel or by sending us a message.

        Newline Image

        newline Guide to React Component Design Systems with Figmagic

        $69

        $79