Figma는 항상 개발자와 디자이너 간의 협업을 장려해 왔습니다. 커뮤니티 제작 플러그인의 끝없는 보물을 위해 노력합니다. 3D 요소가 필요하십니까? 이를위한 플러그인이 있습니다. 추상 SVG가 필요하십니까? 플러그인이 있습니다도.

즉, Figma의 디자인 부분은 항상 상대적으로 정적이었습니다. 항상 사전 정의된 사용자 상호 작용을 통해 서로 연결된 움직일 수 없는 직사각형으로 작업했습니다. 하지만 내가 당신의 디자인이 갑자기 생기를 불어넣을 수 있다고 말하면 어떻게 될까요? 그렇다면 개념과 구현을 구분하는 것은 무엇입니까?

피그 마 6 월에 발표 JavaScript 기반 위젯을 테이블로 가져오고 있습니다. 이제 디자이너는 Figma에서 바로 로직 기반 구성 요소를 찾아보고 구현할 수 있습니다!

인사 위젯 API! 그것이 무엇이며 어떻게 사용하는지 알고 싶습니까? 그것이 바로 우리가 이 포스트에서 함께 할 일입니다.

Figma 위젯은 수많은 가능성을 열어줍니다.

대형 레스토랑 애플리케이션을 설계하기 위해 파트너와 함께 XNUMX시간 내내 작업하고 있다고 상상해 보십시오. 당신은 이미 같은 Figma 보드에서 공동 작업을 하고 있습니다. 둘 다 즉석에서 발생하는 변경 사항과 정확히 동일한 문서를 공유하고 있습니다.

물론 협업에는 설계 프로세스보다 더 많은 것이 포함된다는 사실을 이미 알고 계실 것입니다.

• 프로젝트 관리,
• 표를 모으기 위해 투표를 주최하고,
• 모의 데이터 가져오기 및 시각화,
• 그리고 아마도 여러 시간의 일을 마치고 피로를 풀기 위해 멀티플레이어 게임을 할 수도 있습니다.

모든 것을 관리하고 그룹의 다른 구성원에게 링크를 보내는 데 한 사람만 있으면 됩니다. 하지만 오, 그건 별로 효율적이지 않죠?

바로 위젯이 작동하는 곳입니다. 우리는 Figma를 떠나지 않고도 이 모든 것을 할 수 있습니다.

다음은 Figma에서 위젯을 사용하는 몇 가지 방법입니다.

목록이 간다 우리와 우리. 알 수 있듯이 문서에서 자유롭게 사용할 수 있는 위젯이 이미 많이 있습니다. 실제로 위젯 메뉴(Shift+I).

그러나 우리는 위젯 사용법을 배우기 위해 여기에 있는 것이 아닙니다. 왜냐하면 그것은 쉽기 때문입니다. 우리가 가장 잘하는 일을 합시다. 우리는 우리만의 Figma 위젯을 만들 것입니다! 이것은 영감을 받을 것입니다. Chris Coyier의 디자인 인용 웹사이트. API를 가져와 위젯에 공급한 다음 Figma에 직접 임의의 디자인 인용문을 표시합니다.

여기 우리에게 필요한 것이 있습니다.

나는 나쁜 소식을 전하는 것을 좋아하지 않지만 위젯을 개발하려면 Windows 또는 Mac에 있어야 합니다. Linux 사용자 여러분, 죄송합니다. 운이 없으시군요. (당신은 여전히 VM을 사용 따라하고 싶다면.)

우리는 거 야 Figma 데스크탑 다운로드 신청. 시작하는 가장 간단한 방법은 앱에서 바로 위젯 템플릿을 생성하는 것입니다.

위젯 메뉴(Shift+ I)로 전환 개발 탭을 클릭하고 새 항목을 만듭니다.

그 다음, Figma는 새 위젯의 이름을 지정하고 더 적합한지 여부를 결정하라는 메시지를 표시합니다. 디자인 보드 또는 FigJam 보드 도. 이 문서의 목적에는 전자의 옵션으로 충분합니다.

커스터마이징은 여기서 끝나지 않습니다. Figma는 또한 미리 만들어진 카운터 위젯이나 Canvas 및 Fetch API(및 기타 모든 브라우저 API)에 대한 액세스를 제공하는 iFrame 지원 대안으로 시작할 수 있는 옵션을 제공합니다. 우리는 간단한 "Empty" 옵션을 사용할 것이지만 결국에는 Fetch API를 사용하기 위해 스스로 수정하게 될 것입니다.

그런 다음 새 위젯 프로젝트를 시스템의 특수 디렉토리에 저장하라는 메시지가 표시됩니다. 완료되면 터미널을 시작하고 해당 폴더로 이동합니다. 아직 명령을 실행하지 마십시오. 나중에 실행하고 Widgets API에 대해 더 많이 배우기 위해 의도적으로 오류가 발생합니다.

위젯 디자인하기

우리는 디자인을 바로 가져옵니다. Chris Coyier의 디자인 인용 웹사이트. 이제 DevTools를 실행하여 자세히 살펴보겠습니다.

내가 여기서 사용하는 두 가지 단축키는 Ctrl+Shift+C (또는 Cmd+Shift+C) "요소 선택" 도구를 전환하고 Shift+Click 색상 형식을 HEX 코드로 변경합니다. Chris의 웹 사이트에서 사용되는 색상, 글꼴, 글꼴 두께 및 글꼴 크기에 대해 알아보기 위해 이 작업을 수행합니다. 이 모든 정보는 우리의 다음 단계가 될 Figma에서 밀접하게 유사한 위젯을 구축하는 데 중요합니다! 당신은 할 수 있습니다 설계된 구성 요소를 잡아 자신의 캔버스에서 사용하십시오.

이 기사의 주요 주제는 코드를 작성하여 위젯을 작성하는 것이므로 여기에서 자세히 설명하지 않겠습니다. 그러나 나는 당신을 잘 돌보는 것이 얼마나 중요한지 충분히 강조할 수 없습니다. 위젯의 스타일… CSS-Tricks에는 이미 수많은 디자인 지향 Figma 튜토리얼; 읽기 목록에 추가한 것을 후회하지 않을 것입니다.

위젯 레이아웃 만들기

디자인을 방해하지 않고 프로그래밍 손가락을 꺼내 ​​위젯의 기어 빌드를 시작할 때입니다.

Figma가 디자인 빌딩 블록을 React와 유사한 구성 요소로 변환하는 방법은 매우 흥미 롭습니다. 예를 들어 자동 레이아웃 기능이 있는 프레임 요소는  코드의 구성 요소. 그 외에도 두 가지 구성 요소를 더 사용할 것입니다.  과 .

내 Figma 보드를 살펴보세요... 정확히는 개체 트리에 초점을 맞추도록 요청하는 것입니다. 위젯 디자인을 JSX 코드로 변환하는 데 필요한 것입니다.

보시다시피 디자인 견적 위젯은 세 가지 구성 요소를 가져와야 합니다. 고려하면 꽤 많은 부품수입니다. 전체 API XNUMX개의 레이어 기반 노드만 포함합니다. 그러나 곧 보게 되겠지만 이러한 모듈은 모든 종류의 레이아웃을 만드는 데 충분합니다.

// code.tsx
const { widget } = figma;
const { AutoLayout, Text, SVG } = widget;

그리고 이것으로 React에서 하는 것처럼 위젯의 골격을 구축하는 데 필요한 모든 것이 있습니다.

function QuotesWidget() {
  const quote = `...`;
  const author = `...`;

  return (
    
      
      
        {quote}
        — {author}
      
      
    
  );
}

widget.register(QuotesWidget);

이 코드는 매우 혼란스럽습니다. 지금은 디자인 레이어를 구분할 수 없습니다. 고맙게도 다음을 사용하여 이 문제를 쉽게 해결할 수 있습니다. name 재산.

  
  
    {quote}
    — {author}
  
  
;

물론, 우리는 여전히 따옴표 SVG를 볼 수 없으므로 이를 수정하기 위해 노력하겠습니다. 그만큼  구성 요소 수락 srcSVG 요소의 소스 코드를 가져오는 속성입니다. 이것에 대해서는 할 말이 많지 않으므로 간단하게 유지하고 곧바로 코드로 돌아가겠습니다.

const leftQuotationSvgSrc = `<svg width="117" height="103" viewBox="0 0 117 103" fill="none" xmlns="">
  // shortened for brevity
`;
const rightQuotationSvgSrc = `<svg width="118" height="103" viewBox="0 0 118 103" fill="none" xmlns="">
// shortened for brevity
`;

function QuotesWidget() {
  return (
    
    
  );
}

이제 모든 것이 훨씬 더 명확해졌다는 데 우리 모두 동의할 수 있다고 생각합니다! 우리가 사물의 이름을 지정할 때, 그 목적은 갑자기 우리 코드의 독자에게 훨씬 더 분명해집니다.

위젯을 실시간으로 미리보기

Figma는 다음을 포함한(그러나 이에 국한되지 않는) 위젯을 구축할 때 훌륭한 개발자 경험을 제공합니다. 핫 리로딩. 이 기능을 사용하여 실시간으로 위젯의 변경 사항을 코딩하고 미리 볼 수 있습니다.

위젯 메뉴(Shift+I), 개발 탭으로 전환하고 새 위젯을 클릭하거나 보드로 드래그합니다. 위젯을 찾을 수 없습니까? 걱정하지 마세요. 점 XNUMX개로 된 메뉴를 클릭하고 위젯을 가져오기만 하면 됩니다. manifest.json 파일. 예, 그것이 그것을 존재로 되돌리는 데 필요한 전부입니다!

잠깐, 화면 하단에 오류 메시지가 표시되었나요?

그렇다면 조사해보자. 클릭 "콘솔 열기"라고 말하고 읽어보십시오. 만약 콘솔 열기 버튼이 사라지면 디버깅 콘솔을 여는 다른 방법이 있습니다. Figma 로고를 클릭하고 위젯 카테고리로 이동하여 개발 메뉴를 표시합니다.

이 오류는 TypeScript를 JavaScript로 아직 컴파일하지 않았기 때문일 수 있습니다. 명령줄에서 다음을 실행하여 수행할 수 있습니다. npm install 과 npm run watch. (또는 yarn 과 yarn watch ). 이번에는 오류가 없습니다!

부딪힐 수 있는 또 다른 장애물은 코드가 변경될 때마다 위젯이 다시 렌더링되지 않는다는 것입니다. 다음 컨텍스트 메뉴 명령을 사용하여 위젯을 강제로 업데이트할 수 있습니다. 위젯 → 위젯 다시 렌더링.

위젯 스타일 지정

현재 상태로, 외모 의 위젯은 여전히 ​​최종 목표에서 꽤 멀었습니다.

그렇다면 코드에서 Figma 구성 요소의 스타일을 지정하는 방법은 무엇입니까? React 프로젝트에서 하는 것처럼 CSS를 사용하면 될까요? 부정적인. Figma 위젯을 사용하면 모든 스타일링은 다음 세트를 통해 발생합니다. 잘 문서화 된 소품. 운이 좋게도 이 항목의 이름은 거의 똑같이 Figma의 상대방에게.

두 가지를 구성하여 시작하겠습니다.  구성 요소. 위의 인포그래픽에서 볼 수 있듯이 소품 이름은 목적을 잘 설명합니다. 이것은 우리가 바로 코드로 뛰어들어 약간의 변경을 시작하기 쉽게 합니다. 전체 코드를 다시 표시하지 않을 것이므로 스니펫이 속하는 위치를 안내하는 구성 요소 이름에 의존하십시오.

  
;

우리는 많은 발전을 이루었습니다! 저장하고 Figma로 돌아가서 위젯이 어떻게 생겼는지 살펴보겠습니다. Figma가 새 변경 사항에 따라 위젯을 자동으로 다시 로드하는 방법을 기억하십니까?

하지만 아직 거기까지는 아닙니다. 또한 루트 구성 요소에 배경색을 추가해야 합니다.

다시 말하지만, Figma 보드를 살펴보고 변경 사항이 위젯에 거의 즉시 반영될 수 있는 방법을 확인하십시오.

이 가이드를 따라 이동하여 스타일을 지정해 보겠습니다.  구성 요소.

내용을 살펴본 후 위젯 API 문서위의 인포그래픽에서 볼 수 있듯이 속성 이름이 Figma 앱의 해당 속성 이름과 거의 동일하다는 것이 다시 한 번 명확해졌습니다. 또한 Chris의 웹 사이트를 조사한 마지막 섹션의 값을 사용할 것입니다.

{quote}

— {author}

위젯에 상태 추가

우리 위젯은 현재 동일한 인용문을 표시하지만 전체 인용문 풀에서 무작위로 가져오기를 원합니다. 우리는 추가해야합니다 상태 모든 React 개발자가 알고 있는 변경 사항이 구성 요소의 다시 렌더링을 트리거하는 변수입니다.

Figma를 사용하면 상태가 생성됩니다. useSyncedState 훅; 꽤 많이 리액트의 useState, 그러나 프로그래머가 고유 키를 지정해야 합니다. 이 요구 사항은 Figma가 전체 위젯의 상태를 동기화해야 한다는 사실에서 비롯됩니다. 모든 동일한 디자인 보드를 볼 수 있지만 다른 컴퓨터를 통해 볼 수 있는 클라이언트.

const { useSyncedState } = widget;

function QuotesWidget() {
  const [quote, setQuote] = useSyncedState("quote-text", "");
  const [author, setAuthor] = useSyncedState("quote-author", "");
}

그것이 지금 우리에게 필요한 모든 변화입니다. 다음 섹션에서는 인터넷에서 데이터를 가져오는 방법을 알아보겠습니다. 스포일러 경고: 보이는 것만큼 간단하지 않습니다.

네트워크에서 데이터 가져오기

Figma가 iFrame 지원 위젯으로 시작할 수 있는 선택권을 줬을 때를 떠올려 보세요. 우리는 그 옵션을 사용하지 않았지만 여전히 일부 기능을 구현해야 합니다. 단순히 전화를 걸 수 없는 이유를 설명하겠습니다. fetch() 우리의 위젯 코드 내에서.

위젯을 사용할 때 다른 사람이 작성한 JavaScript 코드를 자신의 컴퓨터에서 실행하고 있는 것입니다. 모든 위젯은 Figma 직원이 철저히 검토하지만 우리 모두가 얼마나 많은 것을 알고 있기 때문에 여전히 큰 보안 허점입니다. 자바스크립트 한 줄로도 피해를 줄 수 있다.

결과적으로 Figma는 단순히 eval() 익명의 프로그래머가 작성한 모든 위젯 코드. 간단히 말해서, 팀은 최상의 솔루션이 철저하게 보호되는 샌드박스 환경에서 타사 코드를 실행하는 것이라고 결정했습니다. 그리고 짐작하셨겠지만 이러한 환경에서는 브라우저 API를 사용할 수 없습니다.

그러나 걱정하지 마십시오. 이 두 번째 문제에 대한 Figma의 솔루션은 에스. 파일에 작성하는 모든 HTML 코드, 가급적이면 ui.html, 모든 브라우저 API에 액세스할 수 있습니다. 위젯에서 이 코드를 트리거하는 방법이 궁금할 수도 있지만 나중에 살펴보겠습니다. 지금 바로 코드로 돌아가 보겠습니다.

// manifest.json
{
  "ui": "ui.html"
}

window.onmessage = async (event) => {
  if (event.data.pluginMessage.type === 'networkRequest') {
    // TODO: fetch data from the server

    window.parent.postMessage({
      pluginMessage: {
        // TODO: return fetched data
      }
    }, '*')
  }
}

이것이 widget-to-에 대한 일반 템플릿입니다.iframe 의사소통. 이를 사용하여 서버에서 데이터를 가져옵니다.

window.onmessage = async (event) => {
  if (event.data.pluginMessage.type === 'networkRequest') {
    // Get random number from 0 to 100
    const randomPage = Math.round(Math.random() * 100)

    // Get a random quote from the Design Quotes API
    const res = await fetch(`https://quotesondesign.com/wp-json/wp/v2/posts/?orderby=rand&per_page=1&page=${randomPage}&_fields=title,yoast_head_json`)
    const data = await res.json()

    // Extract author name and quote content from response
    const authorName = data[0].title.rendered
    const quoteContent = data[0].yoast_head_json.og_description

    window.parent.postMessage({
      pluginMessage: {
        authorName,
        quoteContent
      }
    }, '*')
  }
}

우리는 이것을 간단하고 핵심적으로 유지하기 위해 오류 처리를 생략합니다. 위젯 코드로 돌아가서 위젯에 정의된 함수에 액세스하는 방법을 살펴보겠습니다. :

function fetchData() {
  return new Promise(resolve => {
    figma.showUI(__html__, {visible: false})
    figma.ui.postMessage({type: 'networkRequest'})

    figma.ui.onmessage = async ({authorName, quoteContent}) => {
      setAuthor(authorName)
      setQuote(quoteContent)

      resolve()
    }
  })
}

보시다시피, 우리는 먼저 Figma에게 숨겨진 액세스 권한을 노출하도록 지시합니다.  이름으로 이벤트를 트리거하려면 "networkRequest". 우리는 이 이벤트를 ui.html 확인하여 파일 event.data.pluginMessage.type === 'networkRequest', 그런 다음 위젯에 데이터를 다시 게시합니다.

그러나 아직 아무 일도 일어나지 않고 있습니다. 우리는 아직 전화하지 않았습니다. fetchData() 기능. 컴포넌트 함수에서 직접 호출하면 콘솔에서 다음 오류가 발생합니다.

Cannot use showUI during widget rendering.

Figma는 우리에게 전화하지 말라고 말합니다 showUI 함수 본문에 직접... 자, 어디에 넣어야 할까요? 이에 대한 대답은 하나의 새로운 후크와 하나의 새로운 기능입니다. useEffect 과 waitForTask. 이미 익숙할 수도 있습니다. useEffect 당신이 React 개발자라면 위젯 컴포넌트가 마운트될 때 서버에서 데이터를 가져오기 위해 여기에서 사용할 것입니다.

const { useEffect, waitForTask } = widget;

function QuotesWidget() {
  useEffect(() => {
    waitForTask(fetchData());
  });
}

그러나 이것은 우리 위젯이 새로운 인용문으로 영원히 다시 렌더링되는 또 다른 "오류"를 초래할 것입니다. 이것은 때문에 발생합니다 useEffect, 정의에 따라 위젯의 상태가 변경될 때마다 다시 트리거됩니다. fetchData. 그리고 얼마 동안 기술이 있다 전화만 하기 useEffect 일단 React에서는 Figma의 구현에서 작동하지 않습니다. Figma의 문서에서:

위젯 실행 방식 때문에 useEffect 동일한 상태로 여러 번 호출되는 것을 처리해야 합니다.

고맙게도 전화를 걸고 활용할 수 있는 간단한 해결 방법이 있습니다. useEffect 구성 요소가 처음 마운트될 때 한 번만, 상태 값이 여전히 비어 있는지 여부를 확인하는 것입니다.

function QuotesWidget() {
  useEffect(() => {
    if (!author.length & !quote.length) {
      waitForTask(fetchData());
    }
  });
}

당신은 무서운 "범위를 벗어난 메모리 액세스" 오류. 이것의 플러그인 및 위젯 개발에서 흔히 볼 수 있는. Figma를 다시 시작하면 더 이상 존재하지 않습니다.

때때로 인용문에 이상한 문자가 포함되어 있음을 눈치채셨을 것입니다.

이것들은 유니 코드 문자 코드에서 적절하게 형식을 지정해야 합니다.

window.onmessage = async (event) => {
  // ...
  const quoteContent = decodeEntities(data[0].yoast_head_json.og_description);
};

// 
var decodeEntities = (function () {
  // this prevents any overhead from creating the object each time
  var element = document.createElement("div");

  function decodeHTMLEntities(str) {
    if (str && typeof str === "string") {
      // strip script/html tags
      str = str.replace(/]*>([Ss]*?)/gim, "");
      str = str.replace(/]|"[^"]*"|'[^']*')*>/gim, "");
      element.innerHTML = str;
      str = element.textContent;
      element.textContent = "";
    }

    return str;
  }

  return decodeHTMLEntities;
})();

Audiencegain과 짜잔, 우리 위젯은 디자인 보드에 추가될 때마다 완전히 새로운 디자인 견적을 가져왔습니다.

위젯에 속성 메뉴 추가

위젯이 인스턴스화 시 새로운 견적을 가져오는 동안 삭제하지 않고 이 프로세스를 다시 수행할 수 있다면 훨씬 더 실용적일 것입니다. 솔루션이 매우 주목할 만하므로 이 섹션은 짧게 하겠습니다. 와 함께 속성 메뉴, 한 번의 호출로 위젯에 대화형 기능을 추가할 수 있습니다. usePropertyMenu 훅.

const { usePropertyMenu } = widget;

function QuotesWidget() {
  usePropertyMenu(
    [
      {
        itemType: "action",
        propertyName: "generate",
	tooltip: "Generate",
        icon: `<svg width="22" height="15" viewBox="0 0 22 15" fill="none" xmlns="">
          
        `,
      },
    ],
    () => fetchData()
  );
}

간단한 후크 하나로 위젯이 선택될 때 위젯 근처에 표시되는 버튼을 만들 수 있습니다. 그것이 이 프로젝트를 완료하기 위해 추가해야 하는 마지막 부분이었습니다.

위젯을 대중에게 공개하기

아무도 없다면 위젯을 구축하는 데 별로 소용이 없습니다. 사용 그것. 그리고 동안 Figma는 조직에 출시 옵션을 부여합니다. 사설 위젯 내부 사용을 위해 이러한 작은 프로그램을 세상에 출시하는 것이 훨씬 더 일반적입니다.

Figma에는 영업일 기준 5~10일이 소요될 수 있는 섬세한 위젯 검토 프로세스가 있습니다. 우리가 함께 만든 디자인 인용 위젯은 이미 위젯 라이브러리에 있음, 나는 그것이 어떻게 거기에 도달했는지 계속 보여줄 것입니다. 이 위젯을 다시 게시하려고 하면 제거만 되므로 시도하지 마십시오.. 그러나 중요한 변경 사항을 적용했다면 계속해서 자신의 위젯을 커뮤니티와 공유하십시오!

위젯 메뉴(Shift+I) 및 전환 개발 탭을 클릭하여 위젯을 봅니다. 점 XNUMX개로 된 메뉴를 클릭하고 게시이다..

Figma는 제목, 설명 및 일부 태그와 같은 위젯에 대한 세부 정보를 입력하라는 메시지를 표시합니다. 128×128 아이콘 이미지와 1920×960 배너 이미지도 필요합니다.

이 모든 자산을 가져온 후에도 위젯의 스크린샷이 필요합니다. 게시 모달을 닫고(걱정하지 마십시오. 데이터가 손실되지 않습니다) 위젯을 마우스 오른쪽 버튼으로 클릭하여 흥미로운 컨텍스트 메뉴를 표시합니다. 찾기 다른 이름으로 복사/붙여넣기카테고리 및 선택 PNG로 복사.

완료되면 게시 모달로 돌아가 위젯의 스크린샷을 붙여넣습니다.

아래로 스크롤하여 마지막으로 모달을 게시하십시오. 축하하다! 🎉

Figma는 귀하의 모달 검토 상태에 대해 며칠 안에 연락을 드릴 것입니다. 거부의 경우, 귀하는 변경하고 다시 제출할 수 있는 기회.

결론

우리는 처음부터 Figma 위젯을 만들었습니다! 다음과 같이 여기에서 다루지 않은 많은 것들이 있습니다. 클릭 이벤트, 입력 양식및 훨씬 더. 다음에서 위젯의 전체 소스 코드를 파헤칠 수 있습니다. 이 GitHub 레포.

Figma 기술을 더 높은 수준으로 끌어올리고자 하는 사람들에게 위젯 커뮤니티를 탐색하고 눈에 띄는 것을 영감으로 사용하는 것이 좋습니다. 계속해서 더 많은 위젯을 만들고 React 기술을 연마하세요. 깨닫기도 전에 이 모든 작업을 수행하는 방법을 알려줄 것입니다.

추가 리소스

이 위젯을 만드는 동안 많은 문서를 참조해야 했습니다. 가장 도움이 되는 정보를 공유해야겠다고 생각했습니다.

더 많은 위젯 빌드:

더 깊이 있는 위젯 알아보기:

위젯 대 플러그인