Skip to main content

Hi, I’ve been trying to recreate a commercial tartan pattern for myself trough Figma, and though it looks almost okay, the spacing in between the horizontal lines below (created by a clipping layer) always seems to be uneven.

The solid squares in the center look almost rectangular due to the clipping mask, the white squares in the corner end up being actually rectangular, despite all white borders being equally wide, and the spacing in the bottom white stripes are closer together in the middle.

 

I know it must be caused by either ratios or my clipping layer, but I’m not sure which math is required to make a perfect square tile.

 

Frame/tile size: 2250 px

Purple stripe: 306.8 px wide

White stripe: 41.11 px wide

Clipping mask stripe: 10.2 px wide

 

The entire pattern is created by making all vertical stripes first, then duplicating that layer and rotating it by 90 degrees, and then appying the striped clipping mask in between the vertical and horizontal layers

 

The reason I’m using Figma is because I want to use a vector-based software in case I want to rotate the stripes, and I don’t have Adobe Illustrator

I do not really understand the issue, but one of the things I can tell you is that Figma isn’t one of the best tool when dealing with vectors that are not pixel perfect (you have decimals in pixels).

One recommendation is to have make the pattern pixel perfect (e.g. purple strip: 308 px, white stripe: 42 px) 

Another thing is you need to take into account the width of the strip with the spacing (e.g hight is 10px + spacing is 10 to maintain the visual balance between the space and the width) so the width of the white strip should be (5 of vertically aligned stripes + 4 spaces which is 90 px in this example)

attached is one that I recreated for you, you might adjust the numbers and colors. note that I did not use a clipping mask but rather an auto-layout to create the pattern quickly. also the main frame size changed to 2260 px to account for the duplication of the pattern keeping the horizontal stripes having the same distance from top and bottom.

https://www.figma.com/design/vmTqSaIlxQMUYVoztUsSuS/Untitled?node-id=1-39&t=GNsH3BPZwxGzkrtA-11

Hi Osama, thank you! That’s more or less what I was after.

I realized the sizing of the elements caused issues as well, so during the day I resized them to be integers.This tutorial below helped me with creating the white borders as well (it seems I was supposed to have them on just one side for each direction)

 

 

After a lot of finicky work I also got the horizontal twill pattern to line up evenly with the white and purple, which gave me the same result as you. I guess it’s just a fact that the twill causes the squares to look like rectangles on the edges.

My intended end result was diagonal, it’s about as good as I can get it :)
 

 

Reply


Terms & ConditionsCookie settings