0

I want to apply some stripe pattern like this to an object in Figma:

Stripes

So far I found this plugin, but it does only allow to create a rectangle that has a linear gradient with many alternating colors.

Is there an easier way to have a striped object than my own answer?

1
  • Hi. Welcome to GDSE. I think this is one of the limitations of Figma currently, it doesn't have a dedicated custom pattern functionality unlike vector software such as Inkscape or Illustrator. Sadly Figma doesn't seem to support SVG patterns either, so it's not as if you could just make it in Inkscape, and import the SVG - it won't work. Your idea of making stripes from rectangles and using a mask to add them inside a shape is likely the most efficient, unless there is a plugin which adds the functionality.
    – Billy Kerr
    Jun 22 at 13:00

2 Answers 2

0

My workaround is to generate an auto layout with a white background.

Then I add long and small red rectangles in the foreground with the desired spacing.

Afterwards I rotate the whole auto layout frame by 45° and use it as a mask to apply this pattern to the shape of the object.

0

I'm not sure if this is the help you need but I'll give it a go.

You can use any stripe background generator out there to create your desired stripe (colour or thickness) - Download it.

In Figma, on any shape

  • Go to Fill
  • Drop-in your image
  • [Dropdown] "Solid" change to "Image"
  • [Secondary dropdown] "Fill" change to "Tile"

enter image description here

1
  • Thank you for your suggestion. The only Problem with this approach is that the image comes not as a vector. Therefore you need a high resolution to avoid a staircase effect. Especially at a 45° angle. Do you have any recommendations for a service, that offers svg download?
    – Leon D
    Jul 1 at 7:00

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.