CSS properties export in Figma - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to export CSS properties for a selected element in Figma.

Figma

const cssProperties = figma.[1][0].exportCSS();

Drag options to blanks, or click blank then click option'

AselectedElement

BcurrentSelection

Cselection

DselectedNode

Attempts:

3 left

💡 Hint

Common Mistakes

Using a variable name that does not exist in the Figma API.

Trying to call exportCSS() on the entire selection array instead of a single node.

In Figma plugin API, figma.selection returns the currently selected nodes. To export CSS properties, you use the selected node from figma.selection.

2fill in blank

medium

Complete the code to get the CSS string from the exported properties.

Figma

const cssString = cssProperties.[1];

Drag options to blanks, or click blank then click option'

AcssText

BtoString

Cstring

Dcss

Attempts:

3 left

💡 Hint

Common Mistakes

Using toString which is a method, not a property.

Using string or css which do not exist.

The exportCSS() method returns an object with a cssText property containing the CSS string.

3fill in blank

hard

Fix the error in the code to correctly export CSS properties from the first selected node.

Figma

const cssProperties = figma.selection[1].exportCSS();

Drag options to blanks, or click blank then click option'

A.first()

B[0]

C(0)

D{0}

Attempts:

3 left

💡 Hint

Common Mistakes

Using parentheses or curly braces which are invalid for array access.

Using a method like first() which does not exist.

figma.selection is an array. To access the first node, use bracket notation [0].

4fill in blank

hard

Fill both blanks to export CSS properties and log the CSS text to the console.

Figma

const cssProps = figma.selection[1].[2]();
console.log(cssProps.cssText);

Drag options to blanks, or click blank then click option'

A[0]

BexportCSS

CgetCSS

DtoCSS

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect method names like getCSS or toCSS.

Not using array indexing to select the node.

You must access the first selected node with [0] and call exportCSS() to get the CSS properties.

5fill in blank

hard

Fill all three blanks to export CSS properties, get the CSS text, and assign it to a variable.

Figma

const cssProps = figma.selection[1].[2]();
const cssText = cssProps.[3];

Drag options to blanks, or click blank then click option'

A[0]

BexportCSS

CcssText

DtoString

Attempts:

3 left

💡 Hint

Common Mistakes

Using toString instead of cssText.

Not indexing the selection array before calling the method.

Access the first selected node with [0], call exportCSS() to get CSS properties, then get the CSS string from cssText.

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