Learn to build a Complete Company Design System with Costa Alexoglou
 |
| Learn how to build a Complete Company Design System |
What You Will Learn in this course
- Check out a simple mono repo functions with Yarn work areas
- What are design tokens, and ways to create them with Styled-Dictionary
- Instructions to make a shared component library
- Automating test for accessibility issues (Hatchet)
- Automating test for visual changes (Chromatic)
- Using Storybook to Develop and document our design system
- Learning An effective way to distribute with GitHub Actions and Changesets
- Learning an effective way to give a Tailwind configuration to different groups
We will dive into the world of design systems, And figure out how they can assist developers with increasing their efficiency, which eventually accelerate the development interaction and make consistency across a company's items
beginning with covering the basic ideas of design systems, On toward the architecture of a monorepo codebase, We will Learn how to set up shared configurations for TypeScript, ESLint, and Prettier, and to make an establishment package for hosting and distributing design tokens and assets.
Course Insights
9 modules33 lessons1h 19m aggregate
Introduction
5 lessons
Course Introduction
An introduction to the course
INTRODUCTION
1:40 minutes
Outline
Using advancements in this course
Illustration
Design systems are exploding
Why design systems are becoming famous
Illustration
1:57 minutes
Mental models for design systems
Step by step instructions on how to think of design systems
Example
2:37 minutes
From Figma to Code
Most effective way to change over a Figma document according to necessity
Illustration
4:54 minutes
Design System Monorepo
5 lessons18m all out
Module 1 Introduction
What you will realize in Module 1
Example
Monorepo Architecture
structure a design system in monorepo using most effective method
Example
1:19 minutes
Begin building the monorepo
making a monorepo using yarn work area
Illustration
6:29 minutes
TypeScript Configuration
Illustration
5:00 minutes
ESLint and Prettier Configs
Illustration
5:43 minutes
Establishment package
5 lessons8m all out
React package
3 lessons3m complete
Storybook package
4 lessons7m absolute
Styling components
3 lessons17m absolute
Testing components
4 lessons8m absolute
CI, Changelogs and Publishing
3 lessons4m absolute
Synopsis
1 example
 |
| DOWNLOAD HERE |
Your Instructors (Teacher)
Name: Costa Alexoglou
Profession: Curr. Engineer @neo4j
Fellow: benefactor @loceye
blog.alexoglou.com
From Instructor:
Greetings! I am a Senior programmer. As of now, leading the design system at Neo4j, a system which is utilized by 8+ groups and in excess of 40 engineers.
Working with UIs and design for the past 5 years and have zeroed in on shared front-end insight and tooling since 2020.inspiration for this course is that, I really appreciate creating the best-shared developer encounters conceivable. In the course, you'll not just get point-by-point instructions on the most proficient method to make a complete company design system, but you'll likewise come to see best practices that I obtained by building these systems without any preparation beforehand.