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.

Practice

1. What is the main benefit of exporting CSS properties from Figma's Inspect panel?

easy

A. It provides ready-to-use style code for faster web development.

B. It automatically creates HTML structure for your website.

C. It exports images in multiple formats for design use.

D. It generates JavaScript code for interactive elements.

Solution

1. Step 1: Understand the purpose of CSS export in Figma

   Exporting CSS properties gives developers the exact styles used in the design, such as colors, fonts, and spacing.

2. Step 2: Identify what the Inspect panel provides

   The Inspect panel shows CSS code snippets that can be copied and used directly in web development, speeding up the process.

3. Final Answer:

   It provides ready-to-use style code for faster web development. -> Option A

4. Quick Check:

   CSS export = ready-to-use styles [OK]

Hint: Remember: Inspect panel exports CSS styles, not HTML or JS [OK]

Common Mistakes:

• Confusing CSS export with HTML or JavaScript generation
• Thinking images are exported as CSS
• Assuming CSS export creates interactive code

2. Which of the following is the correct CSS syntax snippet you might copy from Figma's Inspect panel for a text color?

easy

A. text-color: #FF5733;

B. font-color = #FF5733;

C. color: #FF5733;

D. color == '#FF5733';

Solution

1. Step 1: Recall standard CSS syntax for color

   CSS uses the property color followed by a colon and the color value ending with a semicolon.

2. Step 2: Compare options to standard CSS

   color: #FF5733; matches the correct syntax: color: #FF5733;. Others use invalid syntax or property names.

3. Final Answer:

   color: #FF5733; -> Option C

4. Quick Check:

   CSS color syntax = property: value; [OK]

Hint: CSS properties use colon and semicolon, not equals signs [OK]

Common Mistakes:

• Using equals sign (=) instead of colon (:)
• Using incorrect property names like font-color or text-color
• Missing semicolon at the end

3. Given this CSS snippet copied from Figma's Inspect panel:

font-family: 'Roboto', sans-serif;
font-weight: 700;
font-size: 16px;
line-height: 24px;

What will be the font weight and size applied to the text?

medium

A. Font weight 700 (bold), font size 16 pixels

B. Font weight normal, font size 24 pixels

C. Font weight 400, font size 16 pixels

D. Font weight 700, font size 24 pixels

Solution

1. Step 1: Identify font-weight value

   The snippet shows font-weight: 700; which means bold weight.

2. Step 2: Identify font-size value

   The snippet shows font-size: 16px; meaning the text size is 16 pixels.

3. Final Answer:

   Font weight 700 (bold), font size 16 pixels -> Option A

4. Quick Check:

   font-weight 700 + font-size 16px = Font weight 700 (bold), font size 16 pixels [OK]

Hint: 700 font-weight means bold; font-size uses px units [OK]

Common Mistakes:

• Confusing line-height with font-size
• Assuming 700 is normal weight
• Mixing up font-size and line-height values

4. You copied this CSS from Figma but the background color is not applying:

background-color #00FF00;

What is the error and how to fix it?

medium

A. Missing semicolon; fix to background-color #00FF00;;

B. Missing colon after property name; fix to background-color: #00FF00;

C. Property name is wrong; use bg-color: #00FF00;

D. Color code is invalid; fix to background-color: green;

Solution

1. Step 1: Identify CSS syntax error

   The snippet misses a colon after background-color, which is required in CSS.

2. Step 2: Correct the syntax

   Adding the colon and semicolon fixes it: background-color: #00FF00;.

3. Final Answer:

   Missing colon after property name; fix to background-color: #00FF00; -> Option B

4. Quick Check:

   CSS needs colon after property [OK]

Hint: CSS properties always need colon between name and value [OK]

Common Mistakes:

• Forgetting colon after property name
• Using wrong property names like bg-color
• Thinking semicolon is optional before fixing colon

5. You want to export CSS for a Figma design that uses a shadow effect. Which CSS property should you expect to copy from the Inspect panel to replicate the shadow on a website?

hard

A. shadow-color: rgba(0, 0, 0, 0.1);

B. text-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

C. shadow-effect: 0 4px 6px black;

D. box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

Solution

1. Step 1: Identify shadow type in design

   For general element shadows (like boxes), CSS uses box-shadow. For text shadows, it uses text-shadow.

2. Step 2: Match Figma shadow export

   Figma exports box shadows as box-shadow with offset and color values.

3. Final Answer:

   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); -> Option D

4. Quick Check:

   Box shadows use box-shadow property [OK]

Hint: Box shadows use box-shadow; text shadows use text-shadow [OK]

Common Mistakes:

• Using non-existent properties like shadow-color or shadow-effect
• Confusing text-shadow with box-shadow
• Omitting rgba color format