Figma: From Design to CSS Implementation
48mIntermediate2023-07-11
Authors
Joseph Labrecque
University Professor, Adobe Educator, Studio Head
Course details
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.
Skills covered
Web Design BusinessFigmaInteraction DesignWeb StandardsWeb DesignSmall Business and EntrepreneurshipUser ExperienceProjectWeb Development
Concepts
Introduction
- Implementing CSS from your Figma designs
- Getting set up
Producing Image Assets
- An overview of the design project
- Defining image export properties
- Exporting and organizing images
Translating CSS Rules
- Using the Inspect workspace
- Documenting the project CSS
- Populating the design document
- Defining a CSS document
Implementing CSS within HTML
- Creating an HTML document
- Replacing Figma elements for CSS
- Refining the design from Figma
Conclusion
- What's next