협업을 위해 반드시
활용해야 할 피그마 기능

저는 2021년부터 피그마를 적극적으로 활용하기 시작했습니다. 현재 피그마는 UX/UI디자인에서 전세계적으로 가장 대중적인 도구임에 틀림이 없습니다. 피그마가 이러한 인기를 얻게된 데에는 많은 이유가 있겠지만, 저는 개발자와의 원활한 협업을 가능하게 해주는 것이 가장 큰 이유라고 생각합니다. 이 글에서는 UX/UI디자이너가 피그마를 사용해야 하는 이유와 특히 중점을 두어 핵심 기능들에 대해 이야기할 예정입니다.

‍

실시간 협업을 위한 최적의 환경

피그마의 가장 큰 장점 중 하나는 웹 기반 플랫폼으로서의 접근성과 협업 기능입니다. 여러 사용자가 동시에 하나의 프로젝트에 접근하여 실시간으로 작업할 수 있으며, 변경사항이 즉각적으로 모든 팀원에게 반영됩니다. 이는 더이상 파일명에 “최종”이라는 이름을 붙여가면서 공유할 필요가 없다는 의미입니다. 제공된 링크를 통하면, 디자인 과정과 최신 디자인을 한눈에 볼 수 있고, 의사소통의 지연을 크게 줄여줍니다. 또한, 프로젝트의 모든 이력이 저장되어 언제든지 이전 버전으로 돌아갈 수 있는 점도 큰 메리트입니다.

‍

프론트엔드 개발자와 효율적인 작업

최근 10년 간, 프론트엔드의 개발 방식은 정말 많은 진화를 거듭했습니다. 백엔드만이 개발자로, 프로그래머로 존중받던 시절이 있었으나, 프론트엔드의 기술이 매우 발전된 지금은 프론트엔드 개발자 역시 백엔드개발자 못지않게 좋은 대우를 받고 있습니다. 이는 Angluar, React, Vue 등과 같이 프론트엔드 개발에 많은 발전이 있기 때문인데요, 이들의 특징은 컴포넌트 기반의 개발 프레임워크라는 것입니다. UX/UI디자이너는 주로 프론트엔드 개발자와 협업을 하기 때문에 피그마 작업을 할 때에 이들이 쉽게 개발하고, 소통할 수 있는 방식으로 작업할 수 있어야합니다. 피그마에서 제공하는 컴포넌트(Component), 프로퍼티(Properties), 로컬 변수(Local Variables)는 이를 가능하게하는 핵심 기능입니다.

‍

주요 기능들에 대한 깊은 이해

• 컴포넌트(Component): 재사용 가능한 디자인 요소를 생성하여 일관성을 유지하고 작업 시간을 절약할 수 있도록 합니다. 그리고 이는 프론트엔드 개발에 있어 코드를 단순하게 만들어주는 결과로 이어집니다. 대표적으로 사용하는 컴포넌트로는 버튼, 인풋(텍스트필드 또는 드롭다운셀렉터), 체크박스, 라디오버튼, 토글스위치, 아이콘 등이 있습니다.
• 프로퍼티(Properties): 컴포넌트 내에서도 세부적인 변형을 쉽게 관리할 수 있게 해주는 기능입니다. 예를 들어, 버튼 컴포넌트에 색상, 크기, 텍스트 등을 프로퍼티로 설정하면, 새로운 컴포넌트를 만들지 않더라도 다양한 상황에 맞게 빠르게 커스터마이즈 할 수 있습니다.
• 로컬 변수(Local Variables): 디자인 요소의 특정 속성을 변수로 설정하여 그 값이 프로젝트 전반에 걸쳐 쉽게 업데이트되고 관리될 수 있도록 합니다. 이는 특히 색상 팔레트, 컴포넌트의 너비 또는 높이, 버튼의 모서기 라운드(Radius) 등을 일관되게 관리할 때 유용합니다. 다양한 회사의 프로덕트를 만드는 외주 업무의 경우, 로컬 변수를 통해 새로운 프로젝트를 할 때마다 새로운 컴포넌트를 만들 필요가 없게 됩니다.

‍

라이브러리를 활용하는 것이 핵심

컴포넌트, 프로퍼티, 로컬 변수는 모두 프론트엔드 개발에서 자주 사용하는 개념이기도 합니다. 실력있는 UX/UI디자이너로 평가받기 위해선 디자이너가 만든 디자인 시스템 환경이 프론트엔드 개발 환경과 유사하게 조성할 수 있어야합니다.

프론트엔드 개발자는 프로젝트를 시작할 때, 사용할 컴포넌트 라이브러리를 선택합니다. 한국 개발자들 사이에서는 Material UI(https://www.mui.com/)가 가장 대중적인 라이브러리입니다. 따라서 디자이너 역시 MUI의 컴포넌트 시스템과 유사하게 구조를 잡는다면, 개발자가 컴포넌트를 제작하는 데에 필요한 노력을 줄일 수 있습니다. MUI를 포함한 대부분의 컴포넌트 라이브러리는 피그마에서 손쉽게 검색하여 찾을 수 있습니다.

아래는 활용하기 좋은 디자인 라이브러리의 피그마 링크입니다. 복제하셔서 사용하실 수 있습니다.

• iOS - Human Interface Guidelines
• Android - Material Design
• React - Material UI

‍

‍

라이브러리에는 컴포넌트의 이름뿐만 아니라 프로퍼티 역시 잘 설정되어 있는데요, 이를 내가 디자인할 서비스의 브랜드에 맞춰 커스터마이징하여 사용하시면 됩니다. 디자인을 하면서 디자인시스템 역시 내가 더 효율적으로 일할 수 있는 형태로 개선하시길 바랍니다.

‍

‍

로컬 변수를 활용하여 다크모드 설정하기

로컬 변수는 비교적 최근에 추가된 기능입니다. 로컬 변수는 특정 속성을 변수로 설정하여 그 값이 프로젝트 전반에 걸쳐 쉽게 업데이트되고 관리될 수 있도록 하는 기능입니다. 색의 경우, 로컬 변수가 추가되기 전에도 자주 사용하는 컬러를 설정하는 것이 가능했지만, 로컬 변수 기능이 업데이트된 후로는 자주 사용하는 컬러를 로컬 변수로 설정하는 것을 더 추천하고 있습니다. 그 이유는 다크모드를 더 손쉽게 작업할 수 있기 때문입니다. 로컬 변수가 추가되기 전에는 컴포넌트 하나하나마다 다크모드 속성을 추가하고 대응해줬어야합니다. 하지만, 로컬 변수를 활용한다면 수많은 페이지를 클릭 한 번으로 모두 다크모드로 바꿀 수 있습니다.

로컬 변수는 이뿐만 아니라, 내가 사용하고 있는 디자인 시스템의 느낌을 바꾸는 데에도 유리합니다. 디자인 시스템의 브랜딩은 컬러, 크기, 모서리 라운드만으로 크게 달라집니다. 리브랜딩으로 프로덕트의 전반적인 느낌을 바꿀 때, 로컬 변수를 활용한다면 손쉽게 수정할 수 있게 됩니다.

‍

‍

마무리하며…

피그마를 활용한 UX/UI디자인은 단순히 아름다운 UI를 만드는 것을 넘어, 효과적인 협업과 효율적인 프로젝트 관리를 가능하게 합니다. 피그마의 핵심 기능들을 잘 이해하고 사용할 줄 알면, 프론트엔드 개발자와의 소통이 원활해지고, 개발 프로세스에 직접적으로 기여할 수 있습니다. 이 능력은 프로젝트의 품질을 높이며, 업무 프로세스를 최적화하는 데 큰 기여합니다. 또한, 이미 많은 회사들에서 UX/UI디자이너에게 반드시 요구하는 능력이기도 하죠. 피그마의 기능을 숙지하고 인정받는 UX/UI디자이너가 되길 바랍니다.