Strokes

[Cenadros]

👤 User story

As a Figma/Penpot user, I want to be able to edit and view strokes created in Figma also in Penpot when importing a Figma file to Penpot, so that I can seamlessly continue my design work.

✅ Acceptance criteria

• Consider solution for local variables in Figma (included in the Research section below).
• Strokes created in Figma are displayed as editable strokes in Penpot.
• Support for Solid Stroke (Figma & Penpot).
• Support for Dashed Stroke (Figma & Penpot).
• Advanced Stroke Settings in Figma: Translated as Dashed in Penpot.
• Replicate Position: Center, Inside, Outside.
• Replicate Weight (px).
• Support for color (will be worked on in other US "HEX & RGB").
• Support for strokes applied to: Rectangles, circles, vector paths, vector networks and frames. (boolean groups will be worked in other US)
• Stroke per side in Figma is applied to all sides in Penpot.
• Support for multiple layers of strokes.
• Support for position of multiple strokes in Figma (translation to Penpot).
• Support for opacity & blend modes.
• Test file in Figma to confirm the correct export/import of the file to Penpot.

---

📄 Documentation

Guides:
Figma
Penpot

Supported properties in both Penpot and Figma:

• Position: Center, Inside, Outside
• Weight (px)
• Color and opacity
• Style: Solid & dashed
  Penpot (Solid, Dotted, Dashed, Mixed)
  
  Figma (Solid, Dashed & Custom/Advanced stroke)
  

ℹ Figma also supports:

• Strokes per side
• Saving stroke settings as a Local style or Local variable (beta)
• Advaced/custom stroke settings (applies to all vector paths, including paths or vector networks with Pen or Pencil)

---

🔎 Research

• What happens when a stroke is related to a local variable or a design system library?
  ⚠️ Local variables are in beta