Stroke and Padding Behavior in CSS Export

Dear Figma Team,

I would like to provide feedback regarding the behavior of stroke and padding when exporting designs for CSS implementation. While Figma offers excellent design tools and helpful CSS hints, there is a notable inconsistency between how strokes are visually represented in Figma and how they translate into CSS code. This discrepancy can lead to confusion and extra work during the development process.

Issue Description

When designing input fields in Figma, strokes (borders) are measured separately from padding, and padding is displayed as starting from the outer edge of the element's frame. However, when exporting to CSS or implementing designs manually, borders are treated differently due to the CSS box model:

1. In CSS, padding is measured from the inner edge of the border (stroke).

2. Figma suggests using box-sizing: border-box for correct border inclusion in dimensions, but it does not account for the fact that stroke thickness affects the visual padding.

Example Scenario

In my design:

• The input field has a width of 59px, height of 33px, padding of 6px, and a border (stroke) of 1px.

• Figma visually displays the padding as starting from the outer edge of the stroke.

• When implemented in CSS with box-sizing: border-box, the padding starts inside the border, reducing the effective space inside the input field.

This discrepancy requires manual adjustment in CSS using calculations like calc(6px - 1px) to subtract the stroke width from the padding value. While this workaround ensures design fidelity, it adds unnecessary complexity and obscures the intent behind the original design.

Suggested Improvements

To address this issue and improve design-to-code translation, I recommend the following enhancements:

1.Better Stroke Awareness in CSS Export

• When suggesting CSS properties like padding and box-sizing: border-box, include adjustments for stroke thickness directly in the generated code.

• For example:

  css

  padding: calc(6px - 1px); /* Subtract stroke width */

2.Visual Indication of Stroke Impact

• In Figma's dev mode layout panel or when inspecting an element, clearly indicate that stroke thickness affects padding calculations in CSS.

• Add a note or tooltip explaining that developers may need to adjust padding values to account for stroke width.

3.Enhanced Auto Layout Integration

• In Auto Layout settings, allow strokes (borders) to be included explicitly in spacing calculations.

• For example, add an option to subtract or include stroke thickness when defining paddings or margins.

Benefits of These Improvements

By addressing these issues, Figma would:

• Reduce confusion for developers translating designs into code.

• Improve design fidelity across tools.

• Save time by eliminating manual adjustments during implementation.

• Strengthen its position as a tool that bridges design and development seamlessly.