Figma: From Design to CSS Implementation

This is the repository for the LinkedIn Learning course Figma: From Design to CSS Implementation. The full course is available from LinkedIn Learning.

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.

Instructions

This repository has branches for each of the videos in the course. You can use the branch pop up menu in github to switch to a specific branch and take a look at the course at that stage, or you can add /tree/BRANCH_NAME to the URL to go to the branch you want to access.

Branches

The branches are structured to correspond to the videos in the course. The naming convention is CHAPTER#_MOVIE#. As an example, the branch named 02_03 corresponds to the second chapter and the third video in that chapter. This serves as the starter project for each movie in the course. The main branch holds the final state of the code.

When switching from one exercise files branch to the next after making changes to the files, you may get a message like this:

error: Your local changes to the following files would be overwritten by checkout:        [files]
Please commit your changes or stash them before you switch branches.
Aborting

To resolve this issue:

Add changes to git using this command: git add .
Commit changes using this command: git commit -m "some message"

Installing

1. To use these exercise files, you must have the following installed:
   • Figma
   • Visual Studio Code (or any web content editor)
   • A modern web browser
2. Clone this repository into your local machine using the terminal (Mac), CMD (Windows), or a GUI tool like SourceTree.

Check out my other courses on LinkedIn Learning.