figma 레이어에 슬래시("/")를 사용하면 안되는 이유 (피그마 팁)

figma layers에서 ("/") 슬래시를 사용하지 마세요.

피그마는 요즘 디자인 협업 툴로 많이 사용되고 있습니다.

디자인 및 기획을 하는 단계에서 피그마 사용시 레이어 이름의 frame에서 슬래시("/")를 사용해서 레이어를 구분하는 경우가 있습니다.

피그마 사용시 슬래시("/")를 사용하면 안되는, 또는 사용하지 말아야 하는 이유에 대해서 설명하고자 합니다.

다음은 간단한 예시로 슬래시("/")를 사용한 레이어 이름입니다.

figma layers

setting icon

위 이미지에 보시면 피그마 레이어 이름에 슬래시("/")를 사용한 것을 볼 수 있습니다.

홈 / 아이콘 / 세팅과 같은 레이어 이름을 사용하고 있습니다.

레이어의 이름을 구분하기 위해 슬래시("/")를 사용한 것인데요.

슬래시("/")를 사용하여 이름을 구분하는것은 보기에 좋을 수 있지만, 문제는 assets을 export 할 때 발생합니다.

우선 레이어를 선택하고 우측 하단의 export에서 이미지를 export 하고 나면

홈 폴더 안에 아이콘 폴더가 생성되고 그 안에 세팅이라는 이름의 png 파일이 생성됩니다.

finder

위 이미지와 같이 홈 폴더 안에 아이콘 폴더가 생성되고 그 안에 세팅이라는 이름의 png 파일이 생성됩니다.

이는 슬래시("/")를 사용하여 레이어 이름을 구분했기 때문에 발생하는 문제입니다.

이는 다운로드시 "/"가 포함된 폴더를 생성하기 때문에 발생하는 문제입니다.

"/"는 개발에서 폴더를 구분하는 경로 기호로 사용되기 때문에, 레이어 이름에 슬래시("/")를 사용하면 export 시 폴더가 생성되는 문제가 발생합니다.

요즘은 따로 assets을 작업해주지 않고 협업하는 작업자들이 피그마에서 직접 assets을 export하는 경우가 많기 때문에 다운로드 받는 작업자에게는 불편함을 초래할 수 있습니다.

따라서 피그마에서 레이어 이름을 구분할 때는 슬래시("/")를 사용하지 않는 것이 좋습니다.

대신 - 또는 _와 같은 기호를 사용하여 레이어 이름을 구분하는 것이 좋습니다.

예를 들어 홈-아이콘-세팅 또는 홈_아이콘_세팅과 같이 사용하면 됩니다.

만약 슬래시("/")를 사용하여 레이어 이름을 구분하고 싶다면, frame을 그룹을 만들어주면 됩니다.

해당 프레임 우클릭 > Group selection을 선택하면 됩니다.

group

이렇게 하면 슬래시("/")를 사용해도 다운로드시 폴더가 생성되지 않습니다.

하지만 단점으로는 layers에서 하나 이상의 뎁스가 생길 수 있어 레이어 구분이 조금 복잡해질 수 있습니다.

두가지 방법 - 또는 _를 사용하여 레이어 이름을 구분하는 방법과 frame을 그룹으로 묶는 방법 중 어느 하나를 선택하여 사용하면 됩니다.

원활한 협업을 위해 피그마에서 레이어 이름을 구분할 때는 단일 frame에 슬래시("/")를 사용하지 않는 것이 좋습니다.

이상으로 피그마 레이어 이름에 슬래시("/")를 사용하지 말아야 하는 이유에 대해 알아보았습니다.