TGx:Frontend Masters | Design Systems with React & Storybook [FCO]

Hot Picks

First Cam

New Movies

1080p x265

New TV

Misc

Torrent details for "Frontend Masters | Design Systems with React & Storybook [FCO]" Log in to bookmark

Quicknav > Description Read comments 0 Post guest comment

Torrent details

Name:

Frontend Masters | Design Systems with React & Storybook [FCO]

Controls:

Report Torrent

Torrent verified by Prom3th3uS

Category:

Other > Training

Language:

English

Total Size:

1.65 GB

Info Hash:

fba5411d604ea0ff947984ed1dd01a56f7c9be35

Added By:

Prom3th3uS :_verified_uploader:

Added:

25-05-2020 04:00

Views:

2,437

Update stats Post guest comment 0

Health:

Seeds:

Leechers:

Completed:

236

File	Size
0. Websites you may like - Shortcut.lnk	1.19 kB
1. Introduction/1. Introduction.mp4	76.12 MB
2. Foundations of Design Systems/1. Design Systems & Why They Matter.mp4	34.79 MB
2. Foundations of Design Systems/2. Drawbacks of Design Systems.mp4	10.84 MB
2. Foundations of Design Systems/3. Team Structure.mp4	8.86 MB
2. Foundations of Design Systems/4. Who are Design Systems For_.mp4	4.41 MB
2. Foundations of Design Systems/5. A Practical Example.mp4	10.75 MB
2. Foundations of Design Systems/6. The Three Pillars of Design Systems.mp4	12.55 MB
2. Foundations of Design Systems/7. Building a Design System.mp4	42.09 MB
2. Foundations of Design Systems/8. Design System Checklist.mp4	13.88 MB
2. Foundations of Design Systems/9. Common Mistakes.mp4	14.79 MB
3. Foundations of Design/1. Color Overview.mp4	29.25 MB
3. Foundations of Design/10. Typescale Exercise.mp4	31.81 MB
3. Foundations of Design/11. Typescale Solution.mp4	12.77 MB
3. Foundations of Design/12. Other Areas of Design.mp4	8.19 MB
3. Foundations of Design/2. Color Terminology.mp4	20.73 MB
3. Foundations of Design/3. Color Semantics.mp4	16.10 MB
3. Foundations of Design/4. Color Values.mp4	6.32 MB
3. Foundations of Design/5. Creating a Color Palette.mp4	19.80 MB
3. Foundations of Design/6. Color Palette Practice.mp4	22.87 MB
3. Foundations of Design/7. Typography.mp4	11.26 MB
3. Foundations of Design/8. Fonts.mp4	16.48 MB
3. Foundations of Design/9. Typescale.mp4	3.31 MB
4. Designing Components with Figma/1. Button States & Styles.mp4	38.43 MB
4. Designing Components with Figma/2. Building a Button Exercise.mp4	13.88 MB
4. Designing Components with Figma/3. Building a Button Solution.mp4	7.32 MB
4. Designing Components with Figma/4. Designing a Modal.mp4	43.87 MB
4. Designing Components with Figma/5. Designing a Modal Practice.mp4	5.37 MB
5. Developing Styled Components/1. How We Apply CSS & Specificity.mp4	16.91 MB
5. Developing Styled Components/10. Adding Global Styles.mp4	38.77 MB
5. Developing Styled Components/11. Adding State Exercise.mp4	20.59 MB
5. Developing Styled Components/12. Adding State Solution.mp4	42.48 MB
5. Developing Styled Components/13. Button Variations.mp4	29.72 MB
5. Developing Styled Components/14. Button Variations Exercise.mp4	56.96 MB
5. Developing Styled Components/15. Button Variations Solution.mp4	7.67 MB
5. Developing Styled Components/16. Making Extensible Themes.mp4	99.06 MB
5. Developing Styled Components/17. Building a Modal Wrapper.mp4	48.99 MB
5. Developing Styled Components/18. Building a Modal.mp4	77.51 MB
5. Developing Styled Components/2. Problems with CSS.mp4	7.88 MB
5. Developing Styled Components/3. CSS Naming Architectures & Preprocessors.mp4	10.42 MB
5. Developing Styled Components/4. CSS in JS.mp4	4.16 MB
5. Developing Styled Components/5. Application Setup.mp4	87.70 MB
5. Developing Styled Components/6. Button Activity Exercise.mp4	24.09 MB
5. Developing Styled Components/7. Button Activity Solution.mp4	16.63 MB
5. Developing Styled Components/8. Adding Utilities.mp4	23.86 MB
5. Developing Styled Components/9. Creating a Theme.mp4	35.88 MB
6. Animating Components/1. Micro-interactions.mp4	16.35 MB
6. Animating Components/2. useSpring .mp4	32.67 MB
6. Animating Components/3. useTransition.mp4	46.92 MB
6. Animating Components/4. Animating the Modal.mp4	41.77 MB
7. Documenting Components with Storybook/1. Documenting Components with Storybook.mp4	36.72 MB
7. Documenting Components with Storybook/2. Using Add-ons & Themes.mp4	103.14 MB
7. Documenting Components with Storybook/3. Actions.mp4	12.95 MB
7. Documenting Components with Storybook/4. Knobs.mp4	30.22 MB
7. Documenting Components with Storybook/5. Modal Documentation Exercise.mp4	5.97 MB
7. Documenting Components with Storybook/6. Modal Documentation Solution.mp4	5.54 MB
7. Documenting Components with Storybook/7. Accessibility.mp4	17.45 MB
7. Documenting Components with Storybook/8. Customizing Storybook.mp4	21.18 MB
7. Documenting Components with Storybook/9. Deploying Storybook.mp4	101.88 MB
8. Wrapping Up/1. Wrapping Up.mp4	18.21 MB
Course Info.txt	13.43 kB
design-systems-formatted.pdf	5.48 MB
fem-design-systems-master/package-lock.json	852.32 kB
fem-design-systems-master/package.json	1.41 kB
fem-design-systems-master/public/favicon.ico	3.08 kB
fem-design-systems-master/public/index.html	1.77 kB
fem-design-systems-master/public/logo192.png	5.22 kB
fem-design-systems-master/public/logo512.png	9.44 kB
fem-design-systems-master/public/manifest.json	492.00 B
fem-design-systems-master/public/robots.txt	67.00 B
fem-design-systems-master/README.md	83.00 B
fem-design-systems-master/src/assets/icons/BaseIcon.js	714.00 B
fem-design-systems-master/src/assets/icons/CloseIcon.js	1.41 kB
fem-design-systems-master/src/assets/illustrations/SignIn.svg	10.08 kB
fem-design-systems-master/src/assets/illustrations/SignUp.svg	16.37 kB
fem-design-systems-master/src/assets/index.js	187.00 B
fem-design-systems-master/src/components/Button.stories.mdx	1.24 kB
fem-design-systems-master/src/components/Buttons.js	2.87 kB
fem-design-systems-master/src/components/index.js	83.00 B
fem-design-systems-master/src/components/Modal.stories.mdx	811.00 B
fem-design-systems-master/src/components/Modals.js	2.81 kB
fem-design-systems-master/src/components/TextFields.js	1,007.00 B
fem-design-systems-master/src/index.js	1.46 kB
fem-design-systems-master/src/utils/colors.js	489.00 B
fem-design-systems-master/src/utils/Global.js	496.00 B
fem-design-systems-master/src/utils/index.js	108.00 B
fem-design-systems-master/src/utils/themes.js	1.62 kB
fem-design-systems-master/src/utils/typography.js	262.00 B
fem-design-systems-master/storybook-static/asset-manifest.json	929.00 B
fem-design-systems-master/storybook-static/favicon.ico	3.08 kB
fem-design-systems-master/storybook-static/iframe.html	2.87 kB
fem-design-systems-master/storybook-static/index.html	1.01 kB
fem-design-systems-master/storybook-static/logo192.png	5.22 kB
fem-design-systems-master/storybook-static/logo512.png	9.44 kB
fem-design-systems-master/storybook-static/main.09022d40a351d4691fe3.bundle.js	60.42 kB
fem-design-systems-master/storybook-static/main.09022d40a351d4691fe3.bundle.js.map	153.00 B
fem-design-systems-master/storybook-static/main.d78cd8ed3205003265ab.bundle.js	283.00 B
fem-design-systems-master/storybook-static/manifest.json	492.00 B
fem-design-systems-master/storybook-static/precache-manifest.33bcd3eaffd93de796d3eebb244c125c.js	423.00 B
fem-design-systems-master/storybook-static/robots.txt	67.00 B
fem-design-systems-master/storybook-static/runtime~main.09022d40a351d4691fe3.bundle.js	2.94 kB
fem-design-systems-master/storybook-static/runtime~main.09022d40a351d4691fe3.bundle.js.map	169.00 B
fem-design-systems-master/storybook-static/runtime~main.23a842e0cf9f5bd27e60.bundle.js	1.46 kB
fem-design-systems-master/storybook-static/sb_dll/storybook_ui-manifest.json	110.35 kB
fem-design-systems-master/storybook-static/sb_dll/storybook_ui_dll.js	2.35 MB
fem-design-systems-master/storybook-static/sb_dll/storybook_ui_dll.LICENCE	3.57 kB
fem-design-systems-master/storybook-static/service-worker.js	1.15 kB
fem-design-systems-master/storybook-static/vendors~main.09022d40a351d4691fe3.bundle.js	1.42 MB
fem-design-systems-master/storybook-static/vendors~main.09022d40a351d4691fe3.bundle.js.LICENSE.txt	2.40 kB
fem-design-systems-master/storybook-static/vendors~main.09022d40a351d4691fe3.bundle.js.map	170.00 B
fem-design-systems-master/storybook-static/vendors~main.3f8b9da0222c36107145.bundle.js	2.70 MB
fem-design-systems-master/yarn.lock	614.30 kB

Thanks for rating :
mchaaben3 (5),

Description

Lynda and other Courses >>> https://www.freecoursesonline.me/
For Developer Tools & Apps >>> https://ftuapps.com/
Forum for discussion >>> https://1hack.us/

Author: Emma Bostian - LogMeIn
Release Date: May 12, 2020
Language: English
Duration: 3 hours, 31 minutes
Course Source: https://frontendmasters.com/courses/design-systems/

Description

Design systems increase the speed of development across teams, as well as make your applications look and feel consistent. In this course, you'll create a design system from scratch and learn the foundational design concepts that go into one. You'll design your components using Figma, then take those designs and turn them into coded components using React. Finally, you'll animate those components, document them with Storybook, and deploy your Storybook application so you can share it with your team!

This course and others like it are available as part of our Frontend Masters video subscription.

Some Key Takeaways!

By coding along with us in the Workshop, you’ll:

• Foundational knowledge of what a design system is, who's building them, and the benefits and drawbacks
• Learn foundational design skills like color theory, typography, and spacing to build a design kit in Figma
• Build accessible, reusable components with React and styled components
• Add micro-interactions to our component with React Spring
• Document our component with Storybook
• Learn tools and resources for scaling your design system

Your (Awesome) Instructor

Emma Bostian is an American Software Engineer based out of Karlsruhe, Germany. She will be joining Spotify this July as a Software Engineer in Stockholm, Sweden. Emma is also an instructor at Egghead.io, co-host of the Ladybug Podcast, and panelist on JSParty.

Workshop Details

Design systems are a hot topic in the world of development and all of the big companies are building one. But what is a design system and how do you build one? In this workshop we'll dive into the foundational theory of design systems and build pieces of one from start to finish. We'll build a design system by designing, developing, documenting, and deploying several components.

Is This Workshop for Me?

Summary

Those with at least one year of experience with basic React and CSS will gain knowledge on the start to finish process of building a design system.

Any Prerequisites?

• React basics (i.e. Hooks)
• CSS basics