Figma는 개발자와 디자이너 간의 협업을 장려하고 있으며 풍부한 커뮤니티 플러그인 라이브러리로 번성합니다. 3D 요소가 필요하십니까? 플러그인이 있습니다! 초록 SVG가 필요하십니까? 플러그인도 있습니다!
그러나 Figma의 디자인 부분은 항상 비교적 정적으로 정의되어 왔으며, 이는 미리 정의 된 사용자 상호 작용을 통해 서로 연결된 부동 사각형을 사용하여 비교적 정적입니다. 그러나 내가 당신의 디자인이 갑자기 살아남을 수 있다고 말하면 어떻게 생각하겠습니까? 애니메이션, 대화식 또는 상태가 될 수 있습니까? 그렇다면 개념과 구현의 차이점은 무엇입니까?
Figma는 6 월에 JavaScript 기반 위젯을 출시 할 것이라고 발표했습니다. 이제 디자이너는 Figma에서 직접 논리 구동 구성 요소를 탐색하고 구현할 수 있습니다!
위젯 API를 함께 살펴 보겠습니다! 그것이 무엇인지, 어떻게 사용하는지 알고 싶습니까? 이것이 바로이 기사에서 우리가 함께 탐구 할 것입니다.
당신과 당신의 파트너가 밤낮으로 일하는 대형 식당 응용 프로그램을 설계하기 위해 일하는 것을 상상해보십시오. 당신은 모두 동일한 Figma Artboard에서 공동 작업을합니다.
물론, 공동 작업은 디자인 프로세스 만 포함되지 않는다는 것을 이미 알고 있습니다.
한 사람만이 모든 것을 관리하고 나머지 그룹에 링크를 보내면됩니다. 그러나 이것은 효율적이지 않습니다.
위젯이 작동하는 곳입니다. 우리는 Figma를 떠나지 않고이 모든 것 (예,이 모든 것)을 상상할 수 있습니다.
Figma에서 위젯을 사용하려는 몇 가지 방법은 다음과 같습니다.
기다렸다가 기다립니다. 보시다시피, 이미 문서에 무료로 사용할 수있는 많은 수의 위젯이 있습니다. 실제로 위젯 메뉴 (Shift I)에서 직접 아트 보드에 위젯을 추가 할 수 있습니다.
그러나 우리는 위젯을 사용하는 방법을 배우기 위해 여기에 있지 않습니다. 우리가 최선을 다하겠습니다 : 우리는 우리 자신의 Figma 위젯을 만들 것입니다! 이 위젯은 Chris Cyier의 Design Quote 웹 사이트에서 영감을 얻을 것입니다. 우리는 API를 가져 와서 위젯에 공급 한 다음 Figma에 직접 임의의 디자인 따옴표를 표시합니다.
나는 나쁜 뉴스 스프레더가되는 것을 좋아하지 않지만 위젯을 개발하려면 Windows 또는 Mac에 있어야합니다. Linux 사용자, 죄송합니다. 운이 좋지 않습니다. (계속 학습을 원한다면 여전히 가상 머신을 사용할 수 있습니다.)
Figma Desktop 응용 프로그램을 다운로드 할 것입니다. 시작하는 가장 쉬운 방법은 애플리케이션에서 직접 위젯 템플릿을 생성하는 것입니다.
위젯 메뉴 (Shift I)를 열고 개발 탭으로 전환하고 새 프로젝트를 만들어 새로운 아르트 보드를 만들어 봅시다.
그 후, Figma는 새로운 위젯의 이름을 지정하고 아르트 보드 또는 Figjam Artboards를 디자인하는 것이 더 나은지 결정하라는 메시지를 표시합니다. 이 기사의 목적 상, 이전 옵션으로는 충분합니다.
사용자 정의는 끝나지 않습니다. Figma는 또한 조립식 카운터 위젯 또는 iframe을 활성화하는 대안으로 시작할 수있는 옵션을 제공합니다.이를 통해 Canvas 및 Fetch API (및 기타 모든 브라우저 API)에 액세스 할 수 있습니다. 우리는 간단한 "빈"옵션을 선택하지만 결국 Fetch API를 사용하도록 직접 수정합니다.
그런 다음 새 위젯 프로젝트를 시스템의 특수 디렉토리로 저장하라는 메시지가 표시됩니다. 완료되면 터미널을 시작하여 폴더로 지시하십시오. 지금 명령을 실행하지 마십시오. 나중에 할 것입니다. 우리는 의도적으로 위젯 API에 대해 더 많이 배우는 목표로 오류가 발생할 것입니다.
Chris Cyier의 Design Quote 웹 사이트에서 직접 디자인을받습니다. 그래서, DevTools를 시작하여 더 깊이 파고 들으십시오.
여기서 사용하고있는 두 가지 주요 바로 가기는 CTRL Shift C (또는 CMD Shift C)이며 선택 요소 도구를 전환하고 클릭하여 색상 형식을 16 진 코드로 변경합니다. Chris 웹 사이트에 사용되는 색상, 글꼴, 글꼴 두께 및 글꼴 크기를 이해하기 위해이 작업을 수행합니다. 이 모든 정보는 Figma에서 매우 유사한 위젯을 구축하는 데 중요하며 이것이 다음 단계가 될 것입니다! 설계된 구성 요소를 잡고 자신의 캔버스에 사용할 수 있습니다.
이 기사의 주제는 코드를 작성하여 위젯을 구축하는 것이기 때문에 여기서는 자세히 설명하지 않습니다. 그러나 나는 당신의 위젯을 신중하게 스타일링하는 것이 매우 중요하다는 것을 강조해야합니다. CSS 트릭에는 이미 디자인 지향적 인 Figma 튜토리얼이 있습니다.
디자인이 완료되면 이제 프로그래밍 손가락을 꺼내서 위젯의 기어를 구축하기 시작합니다.
Figma가 디자인 빌딩 블록을 반응 형 구성 요소로 변환하는 방법은 매우 흥미 롭습니다. 예를 들어 자동 레이아웃 기능이있는 프레임 워크 요소는 코드에 표시됩니다.<autolayout></autolayout> 구성 요소. 또한 두 가지 다른 구성 요소를 사용합니다.<text></text> 그리고<svg></svg> .
내 피그마 아트 보드를 확인하십시오 ... 나는 당신에게 객체 트리에주의를 기울 이도록 요청합니다. 이것이 위젯 설계를 JSX 코드로 변환 할 수 있어야 할 필요성의 핵심입니다.
보시다시피, 우리의 디자인 견적 위젯은 세 가지 구성 요소를 가져와야합니다. 전체 API에는 8 개의 레이어 기반 노드 만 포함되어 있다는 점을 고려할 때 이는 상당한 수의 구성 요소입니다. 그러나 곧 알 수 있듯이 이러한 모듈은 모든 종류의 레이아웃을 만들기에 충분합니다.
<code>// code.tsx const { widget } = figma; const { AutoLayout, Text, SVG } = widget;</code>이를 통해 우리는 React에서와 같이 위젯의 골격을 만들 수 있습니다.
<code>function QuotesWidget() { const quote = `...`; const author = `...`; return (<autolayout></autolayout></code><svg></svg><autolayout><text> {인용하다}</text><text> - {작가}</text></autolayout><svg></svg>
);
}
Widget.register (quoteswidget); 이 코드는 말하기가 매우 혼란 스럽습니다. 이제 설계 레이어를 구별 할 수 없습니다. 다행히도 name 속성을 사용 하여이 문제를 쉽게 해결할 수 있습니다.
<code><autolayout name="{" quote></autolayout></code> <svg name="{" leftquotationmark></svg><autolayout name="{" quotecontent><text name="{" quotetext> {인용하다}</text><text name="{" quoteauthor> - {작가}</text></autolayout><svg name="{" rightquotationmark></svg> ; 물론, 우리는 여전히 인용문 SVG를 볼 수 없으므로이 문제를 시작합시다.<svg></svg> 구성 요소는 SVG 요소의 소스 코드를 취하는 src 속성을 수용합니다. 이것에 대해 할 말이 많지 않으므로 간단하게 유지하고 코드로 돌아 갑시다.
<code>const leftQuotationSvgSrc = `</code>
// 단순화를 위해 단축되었습니다 `;;
const rightquotationsvgsrc =` <svg fill="none" height="103" viewbox="0 0 118 103" width="118" xmlns="<http://www.w3.org/2000/svg>">
// 단순화를 위해 단축되었습니다</svg> `;;
함수 quoteswidget () {
반품 (
<svg name="{" leftquotationmark src="%7BleftQuotationSvgSrc%7D"></svg><svg name="{" rightquotationmark src="%7BrightQuotationSvgSrc%7D"></svg>
);
}나는 우리 모두가 이제 모든 것이 훨씬 더 명확하다는 데 동의 할 수 있다고 생각합니다! 우리가 사물의 이름을 지을 때, 그들의 목적은 갑자기 코드 독자에게 더 분명해집니다.
Figma는 핫 재 장전을 포함하여 위젯을 구축 할 때 우수한 개발 경험을 제공합니다. 이 기능을 사용하면 위젯을 실시간으로 인코딩하고 미리 볼 수 있습니다.
먼저 위젯 메뉴 (Shift I)를 열고 개발 탭으로 전환 한 다음 새 위젯을 클릭하거나 아트 보드로 끌어 올리십시오. 위젯을 찾을 수 없습니까? 걱정하지 마십시오. 세 개의 점 메뉴를 클릭하고 위젯의 manifest.json 파일을 가져 오십시오. 예, 그것이 다시 존재로 되 찾는 모든 단계입니다!
잠깐, 화면 하단에 오류 메시지가 있습니까?
그렇다면 조사합시다. " 콘솔 열기 "를 클릭하고 내용을 읽으십시오. 오픈 콘솔 버튼이 사라지면 디버그 콘솔을 열 수있는 대안적인 방법이 있습니다. Figma 로고를 클릭하고 위젯 카테고리로 점프하고 개발 메뉴를 표시하십시오.
오류는 아직 JavaScript로 TypeScript를 컴파일하지 않았기 때문일 수 있습니다. npm install 및 npm run watch (또는 yarn 및 yarn watch )를 실행하여 명령 줄 에서이 작업을 수행 할 수 있습니다. 이번에는 오류가 없습니다!
다른 장애물이 만날 수있는 또 다른 장애물은 코드가 변경 될 때마다 위젯을 다시 렌더링 할 수 없다는 것입니다. 다음 컨텍스트 메뉴 명령 을 사용하여 위젯 업데이트 를 쉽게 강제 할 수 있습니다.
지금은 위젯의 모양은 여전히 우리가 궁극적으로 목표로하는 것과는 거리가 멀다.
그렇다면 코드에서 Figma 구성 요소를 어떻게 스타일링합니까? 아마도 React 프로젝트에서와 같이 CSS를 사용합니까? 실수. Figma 위젯의 경우 모든 스타일은 전체 속성 세트를 통해 구현됩니다. 다행히도이 프로젝트는 그림의 해당 프로젝트와 거의 동일한 이름을 가지고 있습니다.
우리는 먼저 두 가지를 구성 할 것입니다<autolayout></autolayout> 구성 요소. 위 그림과 같이, 속성 이름은 그 목적을 매우 명확하게 설명합니다. 이를 통해 코드로 바로 점프하고 몇 가지 변경을 시작할 수 있습니다. 전체 코드를 다시 표시하지 않으므로 구성 요소 이름을 사용하여 코드 스 니펫이 어디에 있는지 안내하십시오.
<code><autolayout direction="{" horizontal horizontal:="" horizontalalignitems="{" center name="{" quote padding="{{" spacing="{54}" vertical:="" verticalalignitems="{" start> <autolayout direction="{" vertical horizontal:="" horizontalalignitems="{" start name="{" quotecontent padding="{{" spacing="{10}" vertical:="" verticalalignitems="{" end></autolayout></autolayout> ;</code>우리는 큰 진전을 이루었습니다! 위젯이 어떻게 보이는지 확인하기 위해 Figma로 다시 저장하고 다시 봅시다. 새로운 변경 후 Figma가 위젯을 자동으로 다시로드하는 방법을 기억하십니까?
그러나 충분하지 않습니다. 또한 루트 구성 요소에 배경색을 추가해야합니다.
<code><autolayout fill="{" name="{" quote></autolayout></code>다시 한 번, Figma Artboard를보고 변경 사항이 거의 즉시 위젯에 반영되는지 확인하십시오.
이 가이드를 계속하고 설정합시다<text></text> 구성 요소의 스타일.
위젯 API 문서를 확인한 후 위의 그림과 같이 속성 이름이 Figma 응용 프로그램의 상대와 거의 동일하다는 것이 명백합니다. 또한 이전 섹션에서 Chris 웹 사이트의 값도 사용할 것입니다.
<code><text fill="{'#545454'}" fontfamily="{'Lora'}" fontsize="{36}" fontweight="{'normal'}" name="{'QuoteText'}" width="{700}"> {quote}</text> <text fill="{'#16B6DF'}" fontfamily="{'Raleway'}" fontsize="{26}" fontweight="{'bold'}" name="{'QuoteAuthor'}" textcase="{'upper'}" width="{700}"> — {author}</text></code>위젯은 현재 동일한 견적을 보여 주지만 전체 견적 풀에서 무작위로 추출하려고합니다. 우리는 모든 반응 개발자가 알고있는 위젯에 상태를 추가해야하며, 변경 사항은 변수이며 구성 요소의 재 렌더링을 유발합니다.
Figma에서는 State가 useSyncedState hook을 사용하여 만들어졌지만 거의 React의 useState 입니다. 그러나 프로그래머는 고유 한 key 지정해야합니다. 이 요구 사항은 Figma가 동일한 디자인 아트 보드를 볼 수있는 모든 클라이언트에 걸쳐있는 위젯의 상태를 동기화해야한다는 사실에서 비롯됩니다.
<code>const { useSyncedState } = widget; function QuotesWidget() { const [quote, setQuote] = useSyncedState("quote-text", ""); const [author, setAuthor] = useSyncedState("quote-author", ""); }</code>지금은 그것이 우리가해야 할 모든 변화입니다. 다음 섹션에서는 인터넷에서 데이터를 얻는 방법을 알아낼 것입니다. 스포일러 경고 : 이것은 단순한 것만 큼 간단하지 않습니다.
Figma를 리콜하면 Iframe을 활성화하는 위젯으로 시작하도록 선택할 수 있습니다. 우리는 그 옵션을 선택하지 않았지만 여전히 그 기능 중 일부를 구현해야했습니다. 위젯 코드에서 fetch() 간단히 호출 할 수없는 이유를 설명하겠습니다.
위젯을 사용하면 컴퓨터의 다른 사람이 작성한 JavaScript 코드를 실행하는 것입니다. Figma 직원에 의해 모든 위젯이 철저히 면밀히 조사되었지만, 우리는 JavaScript 라인조차도 얼마나 많은 피해가 발생할 수 있는지 알고 있기 때문에 여전히 큰 보안 취약점입니다.
따라서 Figma는 익명 프로그래머가 작성한 위젯 코드를 간단히 eval() 수 없습니다. 간단히 말해서, 팀은 최상의 솔루션은 엄격하게 보호 된 샌드 박스 환경에서 타사 코드를 실행하는 것이라고 결정했습니다. 추측 한 바와 같이,이 환경에서는 브라우저 API를 사용할 수 없습니다.
그러나 걱정하지 마십시오.이 두 번째 문제에 대한 Figma의 해결책은<iframe></iframe> . 파일로 작성한 모든 HTML 코드 (바람직하게는 ui.html 이라고 함)는 모든 브라우저 API에 액세스 할 수 있습니다. 위젯 에서이 코드를 트리거 할 수있는 방법이 궁금하지만 나중에이를 살펴 보겠습니다. 이제 코드로 돌아가 봅시다.
<code>// manifest.json { "ui": "ui.html" }</code> <code>window.onmessage = async (event) => { if (event.data.pluginMessage.type === 'networkRequest') { // TODO: 从服务器获取数据window.parent.postMessage({ pluginMessage: { // TODO: 返回获取的数据} }, '*') } }</code>이것은 위젯에서 iframe 통신을위한 일반적인 템플릿입니다. 서버에서 데이터를 얻는 데 사용합시다.
<code>window.onmessage = async (event) => { if (event.data.pluginMessage.type === 'networkRequest') { // 获取从0到100的随机数const randomPage = Math.round(Math.random() * 100) // 从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() // 从响应中提取作者姓名和报价内容const authorName = data[0].title.rendered const quoteContent = data[0].yoast_head_json.og_description window.parent.postMessage({ pluginMessage: { authorName, quoteContent } }, '*') } }</code> 간단하고 명확하게 유지하기 위해 오류 처리를 생략합니다. 위젯 코드로 돌아가서 어떻게 액세스하는지 살펴 보겠습니다.<iframe></iframe> 정의 된 기능 :
<code>function fetchData() { return new Promise<void> (resolve => { figma.showUI(__html__, {visible: false}) figma.ui.postMessage({type: 'networkRequest'}) figma.ui.onmessage = async ({authorName, quoteContent}) => { setAuthor(authorName) setQuote(quoteContent) resolve() } }) }</void></code> 보시다시피, 우리는 먼저 Figma에게 우리의 숨겨진 공개에 공개적으로 접근하도록 지시합니다.<iframe></iframe> "NetworkRequest"라는 이벤트를 트리거합니다. 우리는이 이벤트를 ui.html 파일에서 event.data.pluginMessage.type === 'networkRequest' 확인한 다음 데이터를 위젯에 게시하여 처리합니다.
그러나 아직 아무 일도 일어나지 않았습니다 ... 우리는 여전히 fetchData() 함수를 호출하지 않았습니다. 구성 요소 함수에서 직접 호출하면 다음 오류가 콘솔에 나타납니다.
<code>在小部件渲染期间无法使用showUI。</code>
Figma는 우리에게 기능 본문에서 showUI 직접 부르지 말라고 말합니다 ... 그래서 우리는 그것을 어디에 두어야합니까? 대답은 새로운 후크와 새로운 기능인 useEffect 및 waitForTask 입니다. React Developer 인 경우 이미 useEffect 에 익숙 할 수도 있지만 위젯 구성 요소가 마운트 할 때 서버에서 데이터를 가져 오기 위해 여기에서 사용합니다.
<code>const { useEffect, waitForTask } = widget; function QuotesWidget() { useEffect(() => { waitForTask(fetchData()); }); }</code> 그러나 이로 인해 위젯이 항상 새로운 따옴표로 다시 렌더링되는 또 다른 "오류"가 발생합니다. 이는 정의상 위젯 상태가 변경 될 때마다 또는 fetchData 호출 할 때마다 useEffect 다시 시작되기 때문에 발생합니다. React에서 useEffect 한 번만 호출 할 수있는 기술이 있지만 Figma의 구현에는 작동하지 않습니다. Figma 문서에서 :
위젯이 실행되는 방식으로 인해 사용률은 동일한 상태를 사용하여 여러 번 호출되는 것을 처리해야합니다.
다행히도, 우리는 상태의 값이 여전히 비어 있는지 확인하여 구성 요소가 먼저 장착 된 후에 만 useEffect 호출하는 간단한 해결 방법을 활용할 수 있습니다.
<code>function QuotesWidget() { useEffect(() => { if (!author.length & !quote.length) { waitForTask(fetchData()); } }); }</code>끔찍한 " 메모리에 대한 메모리 액세스 "오류가 발생할 수 있습니다. 이것은 플러그인 및 위젯 개발에서 매우 일반적입니다. 그림을 다시 시작하면 다시는 나타나지 않습니다.
인용문에는 이상한 문자가 포함되어 있음을 알 수 있습니다.
이들은 유니 코드 문자이며 코드에서 올바르게 포맷해야합니다.
<code>window.onmessage = async (event) => { // ... const quoteContent = decodeEntities(data[0].yoast_head_json.og_description); }; //<https:> 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(/]*>([\\\\S\\\\s]*?)/gim, ""); str = str.replace(/]|"[^"]*"|'[^']*')*>/gim, ""); element.innerHTML = str; str = element.textContent; element.textContent = ""; } return str; } return decodeHTMLEntities; })();</https:></code>우리 위젯은 디자인 아트 보드에 추가 될 때마다 새로운 디자인 견적을받습니다.
위젯이 인스턴스화되면 새로운 견적을 얻는 반면,이 프로세스를 제거하지 않고이 프로세스를 다시 수행 할 수 있다면 더 실용적입니다. 이 섹션은 솔루션이 우수하기 때문에 간단히 소개됩니다. 속성 메뉴를 사용하여 usePropertyMenu Hook를 한 번에 호출하여 위젯에 상호 작용을 추가 할 수 있습니다.
<code>const { usePropertyMenu } = widget; function QuotesWidget() { usePropertyMenu( [ { itemType: "action", propertyName: "generate", tooltip: "Generate", icon: ` <svg fill="none" height="15" viewbox="0 0 22 15" width="22" xmlns="<http://www.w3.org/2000/svg>"></svg></code> `,
},
],,
() => fetchData ()
);
}간단한 후크를 사용하면 위젯을 선택할 때 위젯 근처에 나타나는 버튼을 만들 수 있습니다. 이것이이 프로젝트를 완료하기 위해 추가해야 할 마지막 부분입니다.
아무도 사용하지 않으면 위젯을 구축하는 데 거의 사용되지 않습니다. Figma는 조직이 내부 사용을 위해 개인 위젯을 출시 할 수 있지만 전 세계에 이러한 애플릿을 게시하는 것이 더 일반적입니다.
Figma에는 5 ~ 10 일이 소요될 수있는 세심한 위젯 검토 프로세스가 있습니다. 우리가 함께 만든 디자인 견적 위젯은 이미 위젯 라이브러리에 있지만 여전히 그것이 어떻게 도착하는지 보여줄 것입니다. 이 위젯을 다시 게시하지 마십시오. 이로 인해 삭제됩니다 . 그러나 몇 가지 큰 변경을 수행하면 커뮤니티와 자신의 위젯을 계속 공유하십시오!
먼저 위젯 메뉴 (Shift I)를 클릭하고 개발 탭으로 전환하여 위젯을보십시오. 세 개의 점 메뉴를 클릭하고 게시를 누릅니다.
Figma는 제목, 설명 및 일부 태그와 같은 위젯에 대한 세부 정보를 입력하라는 메시지를 표시합니다. 또한 128 × 128 아이콘 이미지와 1920 × 960 배너 이미지가 필요합니다.
이러한 모든 리소스를 가져온 후에도 여전히 위젯의 스크린 샷이 필요합니다. 게시 모드를 끄고 (걱정하지 말고, 데이터를 잃지 않음) 위젯을 마우스 오른쪽 버튼으로 클릭하여 흥미로운 컨텍스트 메뉴를 표시합니다. 카테고리 로 복사/붙여 넣기를 찾고 PNG로 복사를 선택하십시오.
이 작업이 완료되면 게시 모드로 돌아가 위젯의 스크린 샷을 붙여 넣으십시오.
아래로 스크롤하고 마지막으로 패턴을 해제하십시오. 축하하다! ?
Figma는 며칠 안에 연락하여 모델 검토 상태를 알려줍니다. 거부되면 변경 사항을 변경하여 다시 제출할 수 있습니다.
우리는 방금 처음부터 Figma 위젯을 만들었습니다! 클릭 이벤트, 입력 양식 등과 같이 여기에는 여기에서 다루지 않은 것이 많이 있습니다. 이 GitHub 저장소에서 위젯의 전체 소스 코드를 파헤칠 수 있습니다.
Figma 기술을 다음 단계로 끌어 올리고 싶어하는 사람들을 위해 위젯 커뮤니티를 탐색하고 영감을주는 관심사를 사용하는 것이 좋습니다. 더 많은 위젯을 계속 구축하고 React 기술을 계속 연마하면 실현하기 전에 모든 작업을 수행하는 방법을 가르쳐 줄 것입니다.
이 위젯을 만들 때 많은 문서를 언급해야했습니다. 내가 가장 도움이 된 것을 공유 할 것이라고 생각합니다.
위 내용은 대화 형 피그마 위젯 구축의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
