Figma: From Design to CSS Implementation

Focused View

Joseph Labrecque

48:45

220 View

01 - Introduction

01 - Implementing CSS from your Figma designs.mp4

00:49

02 - Getting set up.mp4

01:40

02 - 1. Producing Image Assets

01 - An overview of the design project.mp4

01:28

02 - Defining image export properties.mp4

04:03

03 - Exporting and organizing images.mp4

03:10

03 - 2. Translating CSS Rules

01 - Using the Inspect workspace.mp4

03:30

02 - Documenting the project CSS.mp4

03:18

03 - Populating the design document.mp4

06:47

04 - Defining a CSS document.mp4

04:40

04 - 3. Implementing CSS within HTML

01 - Creating an HTML document.mp4

02:52

02 - Replacing Figma elements for CSS.mp4

06:40

03 - Refining the design from Figma.mp4

08:45

05 - Conclusion

01 - Whats next.mp4

01:03

Description

You’ve created some great designs, but how can you turn them into code-ready assets that your developers can use? In this practical course, university professor Joseph Labrecque helps you understand what your Figma files need in order to translate well into “developer speak”. Learn how to define image export properties, as well as export and organize your images. Find out how to use the Inspect workspace, document your project in CSS, populate the design document, and define a Figma-generated CSS file. Plus go over creating an HTML document, replacing Figma-generated properties for clean CSS, and refining your design from Figma.

More details

User Reviews

Rating

average 0

Total votes0

Focused display

CSS

Figma

CSS Animations

tailwind css

Joseph Labrecque

Instructor's Courses

Joseph Labrecque is a creative developer, designer, and educator with nearly two decades of experience creating expressive web, desktop, and mobile solutions. He joined the University of Colorado Boulder College of Media, Communication and Information as faculty with the Department of Advertising, Public Relations and Media Design in Autumn 2019. His teaching focuses on creative software, digital workflows, user interaction, and design principles and concepts. Before joining the faculty at CU Boulder, he was associated with the University of Denver as adjunct faculty and as a senior interactive software engineer, user interface developer, and digital media designer. Labrecque has authored a number of books and video course publications on design and development technologies, tools, and concepts through publishers which include LinkedIn Learning (Lynda.com), Peachpit Press, and Adobe. He has spoken at large design and technology conferences such as Adobe MAX and for a variety of smaller creative communities. He is also the founder of Fractured Vision Media, LLC; a digital media production studio and distribution vehicle for a variety of creative works. Joseph is an Adobe Education Leader, Adobe Community Professional, and member of Adobe Partners by Design. He holds a bachelor’s degree in communication from Worcester State University and a master’s degree in digital media studies from the University of Denver.

Linkedin Learning

View courses Linkedin Learning

LinkedIn Learning is an American online learning provider. It provides video courses taught by industry experts in software, creative, and business skills. It is a subsidiary of LinkedIn. All the courses on LinkedIn fall into four categories: Business, Creative, Technology and Certifications. It was founded in 1995 by Lynda Weinman as Lynda.com before being acquired by LinkedIn in 2015. Microsoft acquired LinkedIn in December 2016.