![[모멘토] #02 피그마 플러그인 개발
- 피그마 플러그인 개발하기](/_next/image?url=https%3A%2F%2Fmomenti-renew.s3.ap-northeast-2.amazonaws.com%2Fstorys%2Ftmp%2F1689567936592_4dae9fcb.png&w=3840&q=100)
[모멘토] #02 피그마 플러그인 개발 - 피그마 플러그인 개발하기
안녕하세요. 모멘티 프론트엔드 개발자 이현하입니다.
[모멘토] #02 피그마 플러그인 개발 - 피그마와 피그마 플러그인에 관한 이야기
지난 게시물에 이어 피그마플러그인 개발에 본격적으로 들어가 볼 텐데요.
개발에 앞서 기획이 있어야겠죠?
먼저 우리 모멘티에서 피그마와 가장 친한 디자이너님께 피그마를 사용하면서 불편했던 점이나 생겼으면 좋겠다 싶은 기능이 있었는지 이야기를 들어보았어요!
피그마 플러그인 개발하기
피그마 플러그인 기획
첫번째로는,
반응형 작업을 하다 보면 웹, 태블릿, 모바일 사이즈에 각각 적용된 텍스트 스타일이
서로 대응되어야 했는데, 페이지 디자인을 해나가다가 텍스트 스타일이 수정되어야 하면
다른 곳에 적용된 것은 어디에 있는지, 몇 개나 있는지 알고 싶은데
일일이 찾기가 어려워서 불편했어요.
두번째로는,
피그마 사용법이 미숙한 고객사와의 커뮤니케이션을 했었던 적이 있어요.
전달받은 텍스트 스타일 가이드와 실제 적용된 텍스트 스타일이 매칭되지 않았어요.
그래서 고객사가 정리한 텍스트 스타일 중에 디자인에 사용된 것, 사용되지 않은 것을 찾아내고 수정했습니다.
이 과정에서 텍스트를 하나하나 눌러서 어떤 스타일이 적용되었는지, 또 다른 곳에 적용된 건 없는지 찾아야 했던 점이 너무 불편했어요.
심지어 국문, 영문 따로 있어서 양이 어마어마했어요... ㅠㅠ
즉, 필요한 사항은
디자인 페이지가 많으면 많을수록, 대응해야 할 디바이스 크기가 다양할수록 텍스트 스타일도 다양해지기 때문에 텍스트 스타일을 검색하는 기능이 절실히 필요했습니다.
- 모멘티 디자이너님
디자이너님의 이야기를 듣고, 개발에 앞서 필요한 부분들에 대해 생각해 보았어요.
1. 이미 디자인된 페이지에서 특정 스타일 속성 값으로 특정 스타일이 적용된 노드를 찾을 수 있는가 ?
2. 특정 노드에 대한 위치를 찾고 선택 및 포커스를 이동시킬 수 있는가(조작이 가능한가) ?
3. 내가 선택한 노드에 대한 정보를 어디까지 얻을 수 있는가 ?
이러한 부분들을 고려하여 Figma에서 제공하는 Plugin API를 통해 개발이 가능할지를 파악하였고,
어떤 API를 사용하면 좋을지 플러그인 전용 Figma Plugin API 문서를 보면서 조사했습니다.
플러그인 개발을 시작하기 전, 알고 가야 할 부분 들에 대해 정리한 내용이에요.
** 알고 가야 할 부분
- 피그마 플러그인은 웹 기술을 기반으로 합니다.
- JavaScript를 사용하여 플러그인을 작동시키며, HTML을 사용하여 UI를 구축합니다.
- 피그마 플러그인 전용 API를 통해 Figma와 상호작용합니다.
- 플러그인 API는 읽기/쓰기 기능을 모두 지원하므로, 개발자가 보고, 만들고, 수정할 수 있습니다.
- Figma의 모든 파일은 노드 트리로 구성되며, 모든 파일의 루트에는 DocumentNode가 있습니다.
- 사용자는 한 번에 하나의 플러그인과 하나의 작업만 실행할 수 있습니다.피그마 플러그인 개발
플러그인 개발을 시작해 봅시다.
디자이너님이 완성해 주신 피그마를 보며 피그마 플러그인을 개발합니다..
먼저 피그마 플러그인 개발 및 배포를 위해서는 Figma Desktop Application을 다운로드해야 하며,
유료 플랜을 사용하여야 합니다.
1.피그마 데스크톱 어플리케이션을 실행합니다.
2. 피그마 어플리케이션 왼쪽 상단 모서리에 있는 Figma 메뉴를 열고
Plugins > Developement > New plugin… 를 클릭!
혹은, 오른쪽 마우스 클릭 Plugins > Developement > New plugin… 를 클릭!
3. 플러그인 이름 설정 및 Figma design + FigJam에서도 함께 쓸 수 있는 플러그인인지 선택합니다.
*Dev Mode에서 동일하게 진행 했을 경우 템플릿이 다르니 주의!
4. 원하는 플러그인 템플릿을 선택합니다.
*템플릿에 대한 설명은 이곳에 자세히 되어 있으니 필요시 참고해 주세요.
5. Save as를 하고나면 플러그인 폴더가 생성됩니다.
축하드립니다!
이제 이 폴더 안에서 개발을 시작하시면 됩니다 :)
HTML, CSS, JS만 사용해서 개발해 볼게요.
먼저 폴더 안 파일들을 둘러볼까요 ?
code.js와 manifest.json 파일이 생성되었을 텐데요.
저는 추가로 ui.html 파일을 생성해 주었어요.
Figma Plugin Doc을 보면서 개발을 진행합니다.
manifest.json
{
"name": "plugin name", //플러그인 이름
"id": "00000000000000000000", //플러그인 아이디
"api": "1.0.0", //플러그인 버전 정보
"main": "code.js", //플러그인 Javascript코드 경로
"ui": "ui.html", //플러그인 UI를 담은 파일 경로 (html파일 만들어주는거 잊지마세요!)
"editorType": ["figma"], //에디터 타입
"networkAccess": { //네트워크 엑세스
"allowedDomains": ["https://cdn.jsdelivr.net"],
"reasoning": "useing font" //저는 폰트를 사용하기 위해 cdn주소를 추가해주었어요.
}
}code.js
figma.showUI(__html__); //manifest의 ui에 있는 html에 접근하여 UI를 그려줍니다.
figma.ui.resize(576, 350); //ui의 사이즈를 지정해줍니다.
저장 후, figma로 돌아가서 다시 마우스 오른쪽 클릭을 하여 plugin으로 들어가 볼까요 ?
만약 내가 방금 만든 플러그인 이름이 보이지 않는다면,
Plugins> Devleopment > Manage Plugins in development 을 눌러
내가 만든 플러그인이 있는지 확인해 주세요.
이렇게 내가 만든 플러그인이 보일 거예요!
플러그인을 Hover 하면 Run 할 수 있어요!
만약 보이지 않더라도 당황하지 마시고, 옆에 플러스 버튼을 눌러 Import 하면 됩니다!
1. + 클릭!
2. Import plugin from manifest... 클릭!
3. 내가 방금 생성한 플러그인 폴더 안의 manifest.json 파일을 선택해 주세요.
그럼 다시 위와 같이 보여집니다.
짜잔! 제가 만든 피그마 플러그인이 실행되었어요 :)
와우! Hello World가 개발의 반인거 알고 계시죠?
이제 본격 퍼블리싱과 기능을 넣어 모멘티의 피그마 플러그인을 완성시켜보았어요!
선택된 TEXT NODE에 대한 폰트 스타일을 얻어오는 로직을 살짝 공개해 볼게요 :D
ui.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Figma Plugin</title>
</head>
<body>
<div>hello world!</div>
</body>
<script>
const getCurrentFontInfo = () => {
// 선택된 TEXT NODE에 해당하는 폰트 스타일을 불러옵니다.
parent.postMessage({ pluginMessage: { type: 'current-font' } }, '*');
};
getCurrentFontInfo();
window.onmessage = (event) => {
if (event.data.pluginMessage.type === 'current-font') {
console.log(event.data.pluginMessage);
}
};
</script>
</html>code.js
figma.showUI(__html__);
figma.ui.resize(576, 350);
figma.ui.onmessage = (msg) => {
//ui.html에서 보내온 message를 수신하기 위한 내용입니다.
if (msg.type === 'current-font') {
// 선택된 TEXT NODE가 있을 경우, TEXT STYLE을 Plugin으로 보내줍니다.
if (figma.currentPage.selection[0].type === 'TEXT') {
const selected = figma.currentPage.selection[0];
console.log('selected', selected);
const selectionInfo = {
id: selected.id,
name: selected.name,
fontSize: selected.fontSize,
fontFamily: selected.fontName,
fontWeight: selected.fontWeight,
letterSpacing: selected.letterSpacing,
lineHeight: selected.lineHeight,
};
figma.ui.postMessage({
type: 'current-font',
current: selectionInfo,
});
}
}
};
그럼 이렇게 콘솔에 제가 선택한 폰트 정보들만 찍히는 걸 볼 수 있어요.
Figma API를 통해 Figma page와 커뮤니케이션하면서 정보를 불러오고,
무엇보다 조작이 가능한 부분이 정말 신기했어요 :)
이제 완성된 피그마 플러그인을 배포하는 단계가 남아 있는데요.
다음 게시물에서 이어서 함께 알아보기로 해요 :)
![[모멘토] #03 피그마 플러그인 개발
- 피그마 플러그인 배포하기](/_next/image?url=https%3A%2F%2Fmomenti-renew.s3.ap-northeast-2.amazonaws.com%2Fstorys%2F25%2F1689567947601_0ae294d5.png&w=3840&q=100)
![[모멘토] #01 피그마 플러그인 개발
- 피그마와 피그마 플러그인에 관한 이야기](/_next/image?url=https%3A%2F%2Fmomenti-renew.s3.ap-northeast-2.amazonaws.com%2Fstorys%2F23%2F1689567758937_bb3072ad.png&w=3840&q=100)