Feature request: Outline Stroke feature

Help us improve Penpot
1

Hey folks!

I decided I’d try to design an icon set using Penpot. However, after looking in every contextual menu I could open, I very quickly realized that the app is missing the crucial ability to convert a stroke into a shape, similar to the “Outline Stroke” feature in Illustrator and Figma.

The lack of such a feature means that I cannot export icons for use in icon fonts without outlining the strokes in another program. It also makes the designing process considerably more annoying, especially when boolean operations are involved. For example, if I’m making a “transform” icon that shows a square with 4 handles in the corner, I would try to subtract circles from the square path, to create negative space around the handles, like so:

Capture d'écran_20221111_015052
Capture d'écran_20221111_015052546×571 29.5 KB

However, not being able to outline that path means that when I apply the boolean operation, the circles get subtracted from the shape before the stroke is generated, which doesn’t yield the result I’m looking for.

Capture d'écran_20221111_020626
Capture d'écran_20221111_020626779×418 46.4 KB

On that note, if such a feature were to be added, I would also greatly appreciate to have the workflow I described above work without having to flatten the path beforehand. In Figma, when performing boolean operations involving paths with strokes, the paths are treated as if they were flattened when added or subtracted from other shapes, even though the original path is still editable. Essentially, it’s non-destructive stroke outlining, which is super convenient to have!

5 Likes
2

Well requested! Count me in as a +1 on this feature.

1 Like
3

Hi! We know that this feature is a must and in fact we have already designed it but waiting to be prioritized. Here’s the story at Taiga).

@Voxy, on the request that it won’t be necessary to flatten the path beforehand, I’m not entirely sure that the design is meeting this need. We plan 2 different cases, flatten in selection mode and flatten in edition mode. Taking a look at the image, would this second case be what you’re expecting?

image
image1184×1097 108 KB

In any case I’ve added the link to this post to the Taiga story, so we can take this conversation into consideration at the time to develop the feature.

4 Likes
4

Hi, thank you for the swift response! Good to hear the feature is on the roadmap! :slight_smile: Allow me to elaborate on the second part of my suggestion. Here’s how boolean operations currently behave in Figma:

Capture d'écran_20221111_131423
Capture d'écran_20221111_131423745×813 18.9 KB

As you can see, the path with stroke and outlined stroke yield identical results, as if Figma implicitly flattened the stroke before applying the operation. Note that the path is still fully editable inside the boolean group, meaning changes to that path are a lot easier than if I had to modify the outlined stroke.

I hope this makes it easier to understand why I’m suggesting this! ^^

4 Likes
5

so in the substraction result in the first row you can still edit the stroke of the now white path inside the base shape? :astonished:

1 Like
6

Understood, thanks for the clarification!

2 Likes
7

Exactly! :slightly_smiling_face: It’s my favorite thing about this specific implementation, as it allows for a non-destructive workflow. I picked subtraction as my example, but it also works in the other 3 types of boolean operations.

2 Likes