안녕하세요. 모멘티 프론트엔드 개발자 이현하입니다.

제가 피그마플러그인을 개발했던 내용을 공유해 보려고 합니다.

총 세 가지 내용으로 정리해서 게시할 예정이에요.

이 글이 피그마 플러그인 개발에 관심이 있는 많은 분들에게 작은 도움이 되었으면 좋겠습니다 :)

피그마와 피그마 플러그인에 관한 이야기

피그마란?

디자이너들이 사용하는 디자인 툴에는 Figma외에도 Sketch와 Adobe XD 등 많은 툴이 있다고 해요. 전 세계 실무 디자이너를 대상으로 한 설문 조사 결과를 볼 수 있는 UXTools 에 따르면, 2019년도부터 Figma가 급부상을 하면서 전 세계에서 가장 많이 사용되는 디자인 툴로 자리 잡았다고 하네요.

덕분에 디자이너와 협업하는 우리 개발자들도 Figma를 사용하는 일이 많아졌는데요. 친절한 Figma는 지난 6월 22일 피그마 컨퍼런스에서 (Config2023) 개발자를 위한 Dev Mode를 공개하였습니다.

디자이너뿐만 아니라 개발자 역시 중요한 사용자로 생각한 피그마.. 감동…😭

Figma Dev Mode

Dev 모드는 현재 베타버전으로 무료로 사용해 볼 수 있는데, 살짝 사용해 보니 개발자, 디자이너 모두에게 좋은 기능이라고 생각되었어요. 여백 치수 보려다가 나도 모르게 1px 2px 이동시키고.. 삭제 시키고.. 기겁하며 Ctrl Z를 눌렀던 적이 한두 번이 아닌데, Dev Mode에서는 결과물에 침범하지 않으면서 필요한 데이터만 빠르게 가져갈 수 있어서 좋았습니다. But.. 2023년까지는 베타로 무료 사용이 가능하지만, 2024년부터는 유료 플랜으로 바뀐다고 하네요... 아쉽..

​

피그마 플러그인

아쉬움을 뒤로하고 본론으로 돌아가 피그마의 플러그인에 대해 설명해 드릴게요.

피그마에는 다양한 기능이 많이 있지만, 때로는 피그마가 제공하지는 않지만 디자이너들에게는 꼭 필요한 기능들이 있는데요. 이러한 기능을 사용자들이 직접 제작하여 사용할 수 있도록 피그마에서는 플러그인이라는 시스템을 제공하고 있어요. 외부의 데이터를 필요로 하거나 더 특화된 기능을 필요로 할 때, 이 플러그인 시스템 위에서 플러그인을 만들어 사용할 수 있는데요. 지금은 플러그인 커뮤니티가 매우 활성화되어 다양한 사용자에 의해 많은 플러그인이 게시되어 있습니다.

​

대표 피그마 플러그인

디자이너들의 생산성을 더욱더 올려주는 플러그인에는 무엇이 있을까요?

대표적으로 Unsplash에 있는 이미지를 가져와 쉽게 삽입할 수 있는 Unsplash와,

더미 텍스트를 넣을 때 아주 유용한 Lorem ipsum,

다양한 아이콘 삽입 기능을 제공하는 Iconify 등 이 있어요.

이러한 유용한 기능을 담은 플러그인을 직접 만들 수 있다니 너무 기대되지 않나요?

다음 게시물에서는 플러그인을 실제로 개발한 이야기를 더욱 자세히 들여다보실 수 있으실 거예요!

그럼 다음 게시물에서 또 봬요 :)

​