[피그마] 피그마 기능들 정리하기

• 지난 블로그 글에서, 피그마에서 개인적으로 유용하게 쓰는 기능들을 정리해보겠다고 언급했었다.
• 피그마를 많이 다뤄보진 않았지만, 다른 사람의 참고가 되었음 하는 마음에 몇 가지를 정리해본다.

---

컴포넌트(Component) 기능

  다양한 곳에서 여러 번 사용되는 컴포넌트를 만들 때 사용된다. 하나의 컴포넌트로 묶으려는 요소들을 모두 선택한 후, 마우스 오른쪽 클릭하여 나오는 메뉴를 통해 컴포넌트를 만드는 것이 가능하다(혹은 맥 기준 Option + Command + K).

[Create component]를 통해 생성 가능하다

 

  '중복되는 요소는 그냥 복사 + 붙여넣기로 사용하면 되지 않나?' 라고 생각할 수 있지만, 그럴 경우 컴포넌트의 디자인을 수정해야 할 때 골치아플 수 있다. 복붙한 모든 컴포넌트의 디자인을 수정하던가, 하나를 수정하고 다른 자리의 컴포넌트들 자리에 하나하나 다시 붙여넣던가... 컴포넌트가 사용되는 영역이 넓어질수록, 디자인 규모가 커질 수록 불편함이 커질 것이다.

 

  하지만 컴포넌트를 사용하면, 원본 컴포넌트의 디자인을 수정하는 것으로 한 번에 복사된 컴포넌트들의 디자인을 바꿀 수 있다! FE 개발 시 중복되는 UI를 컴포넌트화 하여 관리하는 것과 일맥상통한다.

 

컴포넌트를 생성한 모습

 

  컴포넌트를 만들면 선택한 요소들이 하나의 컴포넌트로 묶이게 되며, 위 사진과 같이 아이콘과 함께 보라색으로 표시된다. 이것이 원본 컴포넌트로, 이 컴포넌트의 디자인을 변경할 시 해당 컴포넌트의 복제본들 또한 함께 디자인이 바뀌게 된다.

 

 

Variant 기능

  컴포넌트에는 다양한 Variant를 설정하는 것이 가능하다. 한 컴포넌트가 상태에 따라 다른 디자인을 가지게 될 때 유용하게 쓰일 수 있는 기능이다. 한 컴포넌트의 상태는 버튼으로 예를 들자면 일반/호버링 중일 때/눌렸을 때 등으로 나눌 수 있다.

 

  피그마에서 Variant를 만드는 방법 중 하나는 이름을 설정하는 것이다.

디자인만 다른 같은 컴포넌트들

 

  위 사진처럼, 디자인만 다른 컴포넌트들을 만들고 이름을 ScrollBtn으로 지정해주었다. 이름을 설정할 때, /[variant 이름] 의 형태로 설정해야 한다.

이름 설정 후, 두 컴포넌트를 동시에 선택하면 다음과 같은 옵션이 나온다.

 

  컴포넌트의 이름을 설정하면 두 개의 컴포넌트를 Variant로 묶을 수 있는 메뉴가 나온다.

 

Variant로 컴포넌트들을 묶은 모습

 

  컴포넌트들을 Variant로 묶으면 위와 같이 하나의 그룹으로 묶이게 되고, 그 후론 우측 메뉴의 Variant를 통해 각각의 컴포넌트로 바로 전환이 가능하다. variant의 이름은 위 이미지처럼 수정이 가능하다.

  Variant가 설정된 컴포넌트는, 한 번 설정한 후로는 variant를 전환하는 것만으로 편하게 디자인을 바꿀 수 있다. 한 컴포넌트가 다수의 variant 프로퍼티를 가지는 것도 가능하므로, 자신의 디자인에 따라 다양한 상태에 따른 디자인을 구현할 수 있다.

 

 

Local Variable

  해당 디자인 파일 내에서 자주 쓰이는 색/숫자/텍스트 등을 로컬 변수화 하여 관리하는 것이 가능하다.

Variable에 색상 값을 저장한 모습

 

  이 기능의 유용한 점은, 특정 디자인에서 자주 쓰이는 값들을 저장 + 더 쉽게 접근하여 사용할 수 있다는 것 뿐만 아니라, 앞서 언급한 컴포넌트 기능과 마찬가지로 Local Variable 내에서 등록한 변수의 값을 변경하면 그 변경사항이 자동적으로 적용된다는 점이다.

 

로컬 변수 값을 바꾸니 디자인도 알아서 색이 바뀐다!

 

  내 경우, 위 사진처럼 Local Variable 내에 사용할 색상값들을 등록해두었다. 이렇게 해두면 색상 코드값을 보는 것보다 훨씬 더 알아보기 쉽고, 나중에 개발 시 디자인 적용에도 유용하다.

 

 

Booelan Operation (Pathfinder)

  이번에 블로그 디자인을 하면서 유용히 사용한 기능이다. 복수의 도형에 대해 합치기/빼기(가장 아래쪽 레이어 제외, 다른 레이어는 겹친 부분을 빼는 작업)/교차(겹치는 영역만 남기기)/제외(겹치지 않는 부분만 남기기)의 4가지 작업을 제공한다.

 

파도 모양 벡터를 얻을 수 있었던 https://app.haikei.app/

 

  내 경우, 바다를 디자인 테마로 정했을 때부터 물결 모양을 넣고 싶었고, 바로 위 사진 속 사이트를 알게 되어 물결 모양 SVG 리소스를 구할 수 있었다. 다만 똑같은 물결 벡터를 2개를 겹쳐 깊이감 있는 파도 느낌을 내고 싶었는데, 이 경우 밑 부분이 크게 비어서 맘에 들지 않았다. 그렇다고 벡터를 늘리는건 원하는 느낌이 아니라, 아래에 밑 부분 물결과 똑같은 색상의 사각형 벡터를 하나 더 집어넣어 빈 공간을 채웠다.

 

벡터 추가 전과 후

 

  문제는 밑에 추가한 사각형 벡터와 물결 벡터는 서로 다른 벡터라, 그림자 등의 효과를 주면 따로따로 적용이 된다는 점이었다. 이를 해결할 수 있는 기능이 앞서 언급한 합치기 기능이다.

피그마 최상단 메뉴에 있는 Union Selection

 

  이렇게 합친 벡터들은 하나의 개체로 취급되며, 스타일도 공통으로 받는다. 해당 벡터를 내보내기 해서 살펴봐도 하나의 벡터로 합쳐져있는 것을 확인할 수 있다. 그 외에도 다양한 작업을 제공하니, 필요에 맞게 사용하면 좋을 것 같다.

 

 

+ 플러그인

  피그마의 기능이라고 보긴 어려울 것 같지만? 잘 쓰는 플러그인 몇 가지를 적는다.

 

Material Design Icons

  디자인에 사용가능한 다양한 벡터 아이콘(구글과 Icons8)들을 제공한다. 아이콘을 하나하나 웹에서 찾을 필요 없이, 목적에 맞는 아이콘을 찾아 파일에 끌어다 넣기만 하면 된다.

 

 

Figma to Code (HTML, Tailwind, Flutter, SwiftUI)

  디자인 시 사용하는 건 아니고, Dev 모드에서 사용하는 플러그인. 각 요소들에 적용된 스타일을 HTML, Tailwind 등에서 사용할 수 있록 변환해준다. 현재 블로그 개발에 Tailwind를 사용하고 있는데, Tailwind의 클래스 중에선 원래의 CSS 프로퍼티와 다른 이름도 많아 헷갈릴 때가 있다. 그 때 이 플러그인을 사용하면 스타일이 다 맞진 않지만 스타일 적용에 드는 시간을 꽤 단축시켜 주는 느낌이다. 

플러그인을 사용해 코드로 변환한 모습

 

+) 2024년 2월부터 피그마의 Dev 모드 지원이 중단된다... 정확히는 베타 기능이었던 Dev 모드를 유료 구독해야만 사용할 수 있다.

따라서 나처럼 무료로 사용하고 있던 사람은 Dev 모드 + Dev 모드의 플러그인 사용이 불가능해진다.

 

  Figma to Code 플러그인을 잘 써왔던지라 급하게 대안을 알아보고 있는데, 일단은 피그마의 CSS 코드 추출 + 별도 툴로 CSS를 Tailwind로 변환하는 방법을 사용할 듯 싶다.

Copy as code → CSS 선택 후 스타일을 클립보드로 복사한다.

 

  CSS를 Tailwind로 변환하는 작업은 https://transform.tools/css-to-tailwind 에서 가능하다. 엄청 만족스럽진 않아도, 나름 참고할 수 있을 정도로 사용이 가능할 것 같다.