Lessons

Explore all newline lessons

Tags
Author
Pricing
Sort By
Video
Most Recent
Most Popular
Highest Rated
Reset
https://s3.amazonaws.com/assets.fullstack.io/n/20211207071359411_CoverImage_DesignSystemswithFigmagic1.png

lesson

Why Figma? The Pros of Collaborative DesignThe newline Guide to React Component Design Systems with Figmagic

Going from static files, private work, and image-based output to a collaborative, real-time component-oriented tool changes everything about the design workflow.

https://s3.amazonaws.com/assets.fullstack.io/n/20211207071359411_CoverImage_DesignSystemswithFigmagic1.png

lesson

Intro to Design Tokens: How to Communicate in Design WorkThe newline Guide to React Component Design Systems with Figmagic

One magic, simple concept (design token) and a one-stop shop to contain our design equal one hell of a powerhouse.

https://s3.amazonaws.com/assets.fullstack.io/n/20211207071359411_CoverImage_DesignSystemswithFigmagic1.png

lesson

Build Better Design and Change Governance With FlowsThe newline Guide to React Component Design Systems with Figmagic

A diagram can be the difference between an organization of "petty kings" doing their own thing and having actionable plans built on a shared identity. What we need is some kind of governance.

https://s3.amazonaws.com/assets.fullstack.io/n/20211207071359411_CoverImage_DesignSystemswithFigmagic1.png

lesson

Build a Continuous Design Workflow With a Design SystemThe newline Guide to React Component Design Systems with Figmagic

Time to set the stage and see what we can do to be a top shop using continuous design principles and tooling.

https://s3.amazonaws.com/assets.fullstack.io/n/20211207071359411_CoverImage_DesignSystemswithFigmagic1.png

lesson

An Intro to Figma: Shortcuts, Frames, and ComponentsThe newline Guide to React Component Design Systems with Figmagic

Figma reshaped how millions of people and companies follow the design process. Now, we're going to form our process around it.

https://image.mux.com/1k01QCVlS02WC4CDCgpDgcjEDrfYxBZjhidrxPRphEDUU/thumbnail.png?time=0

lesson

How To Add An Ant Design System Form To A React AppThe newline Guide to Modernizing an Enterprise React App

While these components require a little more effort to get working, the improvements they provide are worth the time.

https://image.mux.com/l006AaX8RX01csb1p8uFE005Y5ykeNO00uk00GnUHrvki9z00/thumbnail.png?time=0

lesson

How To Add Ant Design System To A React AppThe newline Guide to Modernizing an Enterprise React App

Setting Ant Design up takes a little doing because it's so customizable.

https://image.mux.com/6FGP7rFPOmEGp5qc9KhaO2MjX1ia8501D02wFMeQLze00A/thumbnail.png?time=0

lesson

Setting Up Contexts To Share Functions Within A React AppThe newline Guide to Modernizing an Enterprise React App

Context doesn't necessarily need to live at the top level of a component to be useful.

https://image.mux.com/8hF6xIjW8VBFMx6L9e15RAE5j9sF1bdsx2caQO3zjao/thumbnail.png?time=0

lesson

Simplify React Prop Management With A Context HookThe newline Guide to Modernizing an Enterprise React App

Bring the Context API into Hardware Handler to decrease our reliance on props.