Media is too big
VIEW IN TELEGRAM
19. Creating the Callout Component Story
Steven continues the solution to the Implementing a Callout Component exercise by creating the story for the callout component. The code used in the solution can be found at the link below.
- https://stevekinney.net/courses/storybook/callout-component-solution
#lesson
Steven continues the solution to the Implementing a Callout Component exercise by creating the story for the callout component. The code used in the solution can be found at the link below.
- https://stevekinney.net/courses/storybook/callout-component-solution
#lesson
Media is too big
VIEW IN TELEGRAM
20. Play Functions
Steve uses the play function to simulate user interaction. Tests can be added to stories to ensure the UI responds appropriately to different interaction scenarios.
#lesson
Steve uses the play function to simulate user interaction. Tests can be added to stories to ensure the UI responds appropriately to different interaction scenarios.
#lesson
Media is too big
VIEW IN TELEGRAM
21. Validating Attributes & Styles
Steve adds additional tests to the story to validate attribute values and the existence of specific styles on the UI component. Styles can be validated either by class or individual style rules. Students are then instructed to add a test for a disabled Text Area.
#lesson
Steve adds additional tests to the story to validate attribute values and the existence of specific styles on the UI component. Styles can be validated either by class or individual style rules. Students are then instructed to add a test for a disabled Text Area.
#lesson
Media is too big
VIEW IN TELEGRAM
22. Importing Variants
Steve demonstrates variant variations can be imported to create a union type and add type safety to the component styles.
#lesson
Steve demonstrates variant variations can be imported to create a union type and add type safety to the component styles.
#lesson
This media is not supported in your browser
VIEW IN TELEGRAM
23. Storybook Test Runner
Steve demonstrates how to set up a test runner for Storybook tests. Playwright is the tool that executes the tests. The test runner can be added to a CI/CD pipeline to automate UI testing.
#lesson
Steve demonstrates how to set up a test runner for Storybook tests. Playwright is the tool that executes the tests. The test runner can be added to a CI/CD pipeline to automate UI testing.
#lesson
Media is too big
VIEW IN TELEGRAM
24. Visual Testing with Chromatic
Steve walks through the capabilities of Chromatic, a visual testing & review tool that scans every possible UI state across browsers to catch visual and functional bugs. It can be used within Figma or as part of a CI/CD pipeline. Visual changes are detected and displayed in the Figma UI. The UI changes can be approved or rejected.
#lesson
Steve walks through the capabilities of Chromatic, a visual testing & review tool that scans every possible UI state across browsers to catch visual and functional bugs. It can be used within Figma or as part of a CI/CD pipeline. Visual changes are detected and displayed in the Figma UI. The UI changes can be approved or rejected.
#lesson
Media is too big
VIEW IN TELEGRAM
25. Accessibility Testing
Steve highlights the accessibility testing features within Figma that are enabled by installing the addon-a11y package. Violations will be listed, and the issues can be visually highlighted in each story.
#lesson
Steve highlights the accessibility testing features within Figma that are enabled by installing the addon-a11y package. Violations will be listed, and the issues can be visually highlighted in each story.
#lesson
Media is too big
VIEW IN TELEGRAM
26. Using Decorators for Context
Steve explains that decorators allow you to wrap a component in your story with another component.
#lesson
Steve explains that decorators allow you to wrap a component in your story with another component.
#lesson
Media is too big
VIEW IN TELEGRAM
27. Using Loaders to Fetch Data
Steve demonstrates how loaders offer a way to asynchronously load data or perform actions before a story is rendered. This can be useful when fetching mock data from an API, performing setup tasks, or dynamically manipulating props or globals based on external factors before the story is displayed.
#lesson
Steve demonstrates how loaders offer a way to asynchronously load data or perform actions before a story is rendered. This can be useful when fetching mock data from an API, performing setup tasks, or dynamically manipulating props or globals based on external factors before the story is displayed.
#lesson
This media is not supported in your browser
VIEW IN TELEGRAM
28. Wrapping Up
Steve wraps up the course by sharing some advice on why adding a Storybook to help document a design system at any stage can benefit the long term.
#lesson
Steve wraps up the course by sharing some advice on why adding a Storybook to help document a design system at any stage can benefit the long term.
#lesson
Title: Figma for Developers, v2
Description: Learn to use Figma's developer-friendly features like constraints, auto layout, component properties and CSS generation to efficiently build and translate designs to code. Bridge the gap between design and development.
Link: https://frontendmasters.com/courses/figma-v2/
Time: 4 hours, 12 minutes
Lessons: 28 / 28
Tags: #course #frontendmasters #720p
Description: Learn to use Figma's developer-friendly features like constraints, auto layout, component properties and CSS generation to efficiently build and translate designs to code. Bridge the gap between design and development.
Link: https://frontendmasters.com/courses/figma-v2/
Time: 4 hours, 12 minutes
Lessons: 28 / 28
Tags: #course #frontendmasters #720p
👍1
This media is not supported in your browser
VIEW IN TELEGRAM
1. Introduction
Steve Kinney introduces the course by sharing his personal experience of using Figma as a front-end engineer and how it has helped facilitate collaboration between design and engineering teams. He mentions various features and concepts in Figma, such as design tokens, components, and prototyping, that can benefit both designers and developers. The majority of this course will be covered in the free tier of Figma, with some advanced features requiring a paid account.
- https://stevekinney.net/courses/figma
- https://www.figma.com/community/file/1362026240901861662
#lesson
Steve Kinney introduces the course by sharing his personal experience of using Figma as a front-end engineer and how it has helped facilitate collaboration between design and engineering teams. He mentions various features and concepts in Figma, such as design tokens, components, and prototyping, that can benefit both designers and developers. The majority of this course will be covered in the free tier of Figma, with some advanced features requiring a paid account.
- https://stevekinney.net/courses/figma
- https://www.figma.com/community/file/1362026240901861662
#lesson
Media is too big
VIEW IN TELEGRAM
2. Figma Overview & Tour
Steve introduces Figma and gives a tour of its interface. He explains the different sections of the toolbar, the Figma menu, and the account information. He also discusses the left panel, which includes pages and assets, and the right panel, which displays properties for manipulating layers. Steve also mentions keyboard shortcuts and the Quick Actions command palette.
- https://stevekinney.net/courses/figma
- https://www.figma.com/community/file/1362026240901861662
#lesson
Steve introduces Figma and gives a tour of its interface. He explains the different sections of the toolbar, the Figma menu, and the account information. He also discusses the left panel, which includes pages and assets, and the right panel, which displays properties for manipulating layers. Steve also mentions keyboard shortcuts and the Quick Actions command palette.
- https://stevekinney.net/courses/figma
- https://www.figma.com/community/file/1362026240901861662
#lesson
Media is too big
VIEW IN TELEGRAM
3. Aligning Objects Exercise
Steve demonstrates how to align and distribute objects in Figma. He shows how objects can snap into place when dragged close to each other, and how to use the alignment and distribution options in the toolbar to quickly arrange multiple objects. Steve also explains how to manually adjust spacing and use numerical values to fine-tune the position of objects. The lesson includes a hands-on exercise for students to practice aligning objects in Figma.
#lesson
Steve demonstrates how to align and distribute objects in Figma. He shows how objects can snap into place when dragged close to each other, and how to use the alignment and distribution options in the toolbar to quickly arrange multiple objects. Steve also explains how to manually adjust spacing and use numerical values to fine-tune the position of objects. The lesson includes a hands-on exercise for students to practice aligning objects in Figma.
#lesson
This media is not supported in your browser
VIEW IN TELEGRAM
4. Layers, Frames, Sections & Groups
Steve discusses how frames are used to group and organize elements, and how they are essential for using features like layout grids, constraints, and auto layout. He also demonstrates how to create frames using pre-sized options and how to toggle the clip content button to show or hide elements that exceed the frame's bounds.
#lesson
Steve discusses how frames are used to group and organize elements, and how they are essential for using features like layout grids, constraints, and auto layout. He also demonstrates how to create frames using pre-sized options and how to toggle the clip content button to show or hide elements that exceed the frame's bounds.
#lesson
This media is not supported in your browser
VIEW IN TELEGRAM
5. Selecting & Inspecting Exercise
Steve explains how to use the "select all with same property" feature in a design tool. He demonstrates how to easily select and manipulate objects with similar properties, such as color, stroke, or effect. He also shows how to use the "target" feature to select all objects using a specific color and make changes to them. Students are then instructeds to practice selecting similar objects.
#lesson
Steve explains how to use the "select all with same property" feature in a design tool. He demonstrates how to easily select and manipulate objects with similar properties, such as color, stroke, or effect. He also shows how to use the "target" feature to select all objects using a specific color and make changes to them. Students are then instructeds to practice selecting similar objects.
#lesson
This media is not supported in your browser
VIEW IN TELEGRAM
6. Constraints
Steve demonstrates how constraints can be used to control the positioning and resizing of elements within a frame. He shows examples of different constraint settings, such as centering, scaling, and constraining to specific edges, and how they affect the layout of elements. Practical examples of how constraints can be used to create responsive designs are also provided in this segment.
#lesson
Steve demonstrates how constraints can be used to control the positioning and resizing of elements within a frame. He shows examples of different constraint settings, such as centering, scaling, and constraining to specific edges, and how they affect the layout of elements. Practical examples of how constraints can be used to create responsive designs are also provided in this segment.
#lesson
Media is too big
VIEW IN TELEGRAM
7. Constraints Exercise
Steve guides the students through implementing responsive behavior in a web page design using constraints in Figma. He starts by setting constraints for the navigation bars, ensuring that the top nav sticks to the top and the bottom nav sticks to the bottom. Then, he moves on to the image posts and explores different options like scaling and centering to make them responsive.
#lesson
Steve guides the students through implementing responsive behavior in a web page design using constraints in Figma. He starts by setting constraints for the navigation bars, ensuring that the top nav sticks to the top and the bottom nav sticks to the bottom. Then, he moves on to the image posts and explores different options like scaling and centering to make them responsive.
#lesson
This media is not supported in your browser
VIEW IN TELEGRAM
8. Layout Grids
Steve introduces layout grids and explains how layout grids can be used to create column and row layouts, adjust margins and gutters, and align elements within a frame. Steve also demonstrates how layout grids can be used to create reusable grids for consistent design elements such as navigation bars.
#lesson
Steve introduces layout grids and explains how layout grids can be used to create column and row layouts, adjust margins and gutters, and align elements within a frame. Steve also demonstrates how layout grids can be used to create reusable grids for consistent design elements such as navigation bars.
#lesson
This media is not supported in your browser
VIEW IN TELEGRAM
9. Layout Grids Exercise
Steve demonstrates how to create a layout grid with two columns, 36 pixel margins, and 16 pixel gutters. He shows how to add padding to the grid using either a single row and column or by adding separate rows and columns. Steve also explains how to save grid styles for future use and mentions sharing design system tokens and styles across multiple project files.
#lesson
Steve demonstrates how to create a layout grid with two columns, 36 pixel margins, and 16 pixel gutters. He shows how to add padding to the grid using either a single row and column or by adding separate rows and columns. Steve also explains how to save grid styles for future use and mentions sharing design system tokens and styles across multiple project files.
#lesson
Media is too big
VIEW IN TELEGRAM
10. Tablet Layout
Steve demonstrates how layout grids and constraints work together in Figma. He shows an example of a website layout with two columns and a top and bottom bar and explains how to set up the grids and constraints to create a responsive layout. Steve also mentions the use of auto layout for handling edge cases.
#lesson
Steve demonstrates how layout grids and constraints work together in Figma. He shows an example of a website layout with two columns and a top and bottom bar and explains how to set up the grids and constraints to create a responsive layout. Steve also mentions the use of auto layout for handling edge cases.
#lesson