피그마 입문) 어떻게 플러그인을 안전하게 구현하는지

플러그인(사용자가 원하는 기능을 추가하고 생성하여 쓸 수 있는  프로그램)

 

플러그인은 자바스크립트, html,css로 만들어졌지만 차이가 있다

플러그인 시스템은 보안을 신경써야하기 때문에 

브라우저 api의 접근을 다르게 할 필요가 있었다

 

그래서 

1. 피그마 파일 콘텐츠에 어떻게 접근하는거야?

2. 내 플러그인을 위한 유저인터페이스 어떻게 만드는 거야?

3. 어떻게 네트워크 요청을 할 수 있는거야?

 

sandbox 샌드박스

(브라우저 api(주고 받을 수 있는 통신이라 이해하면됨)를 노출하고 

있지 않은 작은 자바스크립트 환경 )

 

성능을 위해 플러그인 코드가 샌드박스의 메인 스레드에서 실행되는

모델로 사용하기로 했어

물론 여기에도 작은 콘솔 api는 있지만 

xmlHttprequest(서버와 상호작용할 때 사용하는 객체,서버로부터 xml 데이터 가져올 때 쓰임) 그리고 돔과 같은 것들은 샌드박스에서 직접 하지 못하게 했어

 

ui를 보여주거나 네트워크를 접근하기 위한 브라우저 api를 

사용하려면 너는 요런 태그(<script>

안에 있는 <iframe>

)를 사용해야돼

간단히 보면 이 함수를 이용해서 작동되고 있어

이 <iframe>안에서 너는 html, 자바스크립트 그리고 브라우저 api 에도 

접근할 수 있는겨. 

 

메인 스레드(메인 실행구조, 동작구조)는 피그마의 "scene 씬"에 접근할 수 있어

(뭐뭐뭔소리야? -피그마 문서를 구성하는 계층의 계층이래. 옥히~) 하지만 브라우저 api는

접근할 수 없어 

반대로 iframe 그 태그는 브라우저api에 접근할 수 있는데 

피그마 씬에는 접근 못해 

 

대신 이 둘, 메인 스레드와 iframe은 메세지를 주고 받으면서 소통할 수 있어

 

플러그인이 일 다 마쳤을 때 

figma.closePlugin() 함수를 불러서 피그마한테 끝냈다고 말해줘. 

 

그렇지 않으면 사용자는 너의 플러그인이 동작중이다~ 를 계속 보게 

될거니까. 

그리고 사용자는 플러그인이 동작하는 동안에 

피그마가 나타내는 ui를 사용해서 언제든지 플러그인을 취소할 수 있어

이렇게 되면 피그마는 그 자체로 figma.closePlugin()함수 불러서 끝내겠지

 

출처 :  https://www.figma.com/plugin-docs/how-plugins-run/