CSS properties export in Figma - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

Understanding CSS Export from Figma

When you export CSS properties from a Figma design, which of the following best describes what you get?

A A complete CSS stylesheet with all selectors and media queries automatically generated.

B A snippet of CSS code representing the styles of the selected element only.

C An image file containing the visual styles of the element.

D A JSON file with all design tokens and variables.

💡 Hint

Think about what Figma provides when you inspect a single element's style.

Figma exports CSS as a snippet for the selected element's styles, not a full stylesheet or image.

🔧 Formula Fix

intermediate

Identify the Error in Exported CSS

You exported CSS from Figma and see this snippet:

color: #fff
font-size 16px;
background-color: #000;

What is the error in this CSS?

A Incorrect property name <code>font-size</code>.

B Background color value is invalid.

C Missing semicolon after <code>color: #fff</code>.

D Missing colon after <code>font-size</code>.

💡 Hint

Check the syntax of each CSS property declaration carefully.

The font-size property is missing a colon between the property and value.

❓ visualization

advanced

Best Practice for Exported CSS Usage

You have exported CSS properties from Figma for multiple elements. What is the best way to use these snippets in a web project?

A Combine snippets into a single CSS file and create meaningful class selectors to reuse styles.

B Use the snippets as inline styles in JavaScript only.

C Copy and paste all snippets directly into the HTML <code>style</code> attributes for each element.

D Convert snippets into images and use them as backgrounds.

💡 Hint

Think about maintainability and reusability in CSS.

Combining snippets into a CSS file with classes allows reuse and easier maintenance.

❓ data_modeling

advanced

Mapping Figma Styles to CSS Variables

You want to export colors from Figma as CSS variables for consistent theming. Which approach correctly models this?

A html { --primary-color = #ff0000; --secondary-color = #00ff00; }

B body { primary-color: #ff0000; secondary-color: #00ff00; }

C :root { --primary-color: #ff0000; --secondary-color: #00ff00; }

D :root { primary-color: #ff0000; secondary-color: #00ff00; }

💡 Hint

Recall the correct syntax for CSS custom properties.

CSS variables are declared inside :root with double dashes and colon syntax.

🎯 Scenario

expert

Handling Responsive Design in CSS Export from Figma

You exported CSS properties from Figma for a desktop design. You want to create a responsive design for mobile. What is the best approach?

A Manually add media queries to the exported CSS to adjust styles for different screen sizes.

B Convert the CSS to inline styles and use JavaScript to detect screen size and change styles.

C Use the exported CSS as is and rely on the browser to scale elements automatically.

D Export separate CSS snippets from Figma for each device size and combine them without media queries.

💡 Hint

Think about how CSS handles different screen sizes effectively.

Media queries allow CSS to adapt styles based on screen size, enabling responsive design.