대화 형 피그마 위젯 구축

3D 요소가 필요하십니까? 플러그인이 있습니다! 초록 SVG가 필요하십니까? 플러그인도 있습니다!

그러나 Figma의 설계 부분은 항상 비교적 정적이었습니다. 그러나 내가 당신의 디자인이 갑자기 살아남을 수 있다고 말하면 어떻게 생각하겠습니까? 애니메이션, 대화식 또는 상태가 될 수 있습니까? 그렇다면 개념과 구현의 차이점은 무엇입니까?

Figma는 6 월에 JavaScript 기반 위젯을 출시 할 것이라고 발표했습니다. 이제 디자이너는 Figma에서 직접 논리 구동 구성 요소를 탐색하고 구현할 수 있습니다!

위젯 API에 대해 함께 배우자! 그것이 무엇인지, 어떻게 사용하는지 알고 싶습니까? 이것이 바로이 기사에서 우리가 함께 탐구 할 것입니다.

Figma Widget은 무한한 가능성을 가능하게합니다

당신과 당신의 파트너가 밤낮으로 대규모 식당 응용 프로그램을 설계한다고 상상해보십시오. 당신은 모두 동일한 Figma Artboard에서 공동 작업을합니다.

물론, 공동 작업에는 설계 프로세스 이상의 것이 포함되어 있다는 것을 이미 알고 있습니다.

• 프로젝트 관리,
• 투표권을 잡고,
• 시뮬레이션 된 데이터를 가져오고 시각화 할 수도 있습니다.

한 사람만이 모든 것을 관리하고 나머지 그룹에 링크를 보내야합니다. 그러나 이것은 효율적이지 않습니다.

위젯이 작동하는 곳입니다. 우리는 Figma를 떠나지 않고이 모든 것 (예,이 모든 것)을 상상할 수 있습니다.

여기에 그림에서 위젯을 사용하고 싶은 몇 가지 방법이 있습니다.

• jira and asana에 대한 작업 생성
• github에서 문제를 만들어
• 음성 메모 표시
>
• 타이머 생성

SO 등. 보시다시피, 이미 문서에 무료로 사용할 수있는 많은 수의 위젯이 있습니다. 실제로 위젯 메뉴 (Shift I)에서 직접 아트 보드에 위젯을 추가 할 수 있습니다.

그러나 우리는 위젯을 사용하는 방법을 배우기 위해 여기에 있지 않습니다. 우리가 최선을 다하겠습니다 : 우리는 우리 자신의 Figma 위젯을 만들 것입니다! 이 위젯은 Chris Cyier의 Design Quote 웹 사이트에서 영감을 얻을 것입니다. 우리는 API를 가져 와서 위젯에 공급 한 다음 Figma에 직접 임의의 디자인 따옴표를 표시합니다.

우리가 필요로하는 것은 무엇입니까

나는 나쁜 소식의 스프레더가되는 것을 좋아하지 않지만 위젯을 개발하려면 Windows 또는 Mac에 있어야합니다. Linux 사용자, 죄송합니다. 운이 좋지 않습니다. (학습을 계속하려면 가상 머신을 사용할 수 있습니다.)

Figma Desktop 응용 프로그램을 다운로드합니다. 시작하는 가장 쉬운 방법은 애플리케이션에서 직접 위젯 템플릿을 생성하는 것입니다.

위젯 메뉴 (Shift I)를 열고 개발 탭으로 전환하고 새 프로젝트를 만들어 새 아르트 보드를 작성하겠습니다.

그 후, Figma는 새로운 위젯의 이름을 지정하고 아르트 보드 또는 피자 아트 보드를 설계하는 데 더 적합한 지 여부를 결정하라는 메시지를 표시합니다. 이 기사의 목적 상, 이전 옵션으로는 충분합니다.

사용자 정의는 끝나지 않습니다. Figma는 조립식 카운터 위젯 또는 Iframe을 활성화하는 대안으로 시작할 수있는 옵션을 제공합니다. 우리는 간단한 "빈"옵션을 선택하지만 결국 Fetch API를 사용하도록 직접 수정합니다.

시스템은 새로운 위젯 프로젝트를 시스템의 특수 디렉토리에 저장하라는 메시지를 표시합니다. 완료되면 터미널을 시작하여 폴더로 지시하십시오. 지금 명령을 실행하지 마십시오. 나중에 할 것입니다. 우리는 의도적으로 위젯 API에 대해 더 많이 배우는 목표로 오류가 발생할 것입니다.

디자인 위젯

우리는 Chris Coyier의 디자인 견적 웹 사이트에서 직접 디자인을 얻습니다. 그래서, DevTools를 시작하여 더 깊이 파고 들으십시오.

여기에서 내가 사용하는 두 가지 주요 바로 가기는 Ctrl Shift C (또는 CMD Shift C)입니다. 선택 요소 도구를 전환하고 클릭하여 색상 형식을 16 진 코드로 변경합니다. Chris 웹 사이트에 사용되는 색상, 글꼴, 글꼴 두께 및 글꼴 크기를 이해하기 위해이 작업을 수행합니다. 이 모든 정보는 Figma에서 매우 유사한 위젯을 구축하는 데 중요하며 이것이 다음 단계가 될 것입니다! 설계된 구성 요소를 잡고 자신의 캔버스에 사용할 수 있습니다.

이 기사의 주제는 코드를 작성하여 위젯을 구축하는 것이기 때문에 여기서는 자세히 설명하지 않습니다. 그러나 나는 당신의 위젯을 신중하게 스타일링하는 것이 매우 중요하다는 것을 강조해야합니다. CSS 트릭에는 이미 디자인 지향적 인 Figma 튜토리얼이 있습니다.

위젯에 대한 레이아웃 생성

디자인이 완료된 후 프로그래밍 손가락을 꺼내서 위젯의 기어를 구축하기 시작할 때입니다.

Figma가 설계 빌딩 블록을 반응 형 구성 요소로 변환하는 방법은 매우 흥미 롭습니다. 예를 들어, 자동 레이아웃이있는 프레임 워크 요소는 코드에 <autolayout> </autolayout> 구성 요소로 표시됩니다. 또한 <text> </text> 및 <svg> </svg> 의 두 가지 다른 구성 요소를 사용합니다.

내 피그마 아트 보드를보세요 ... 객체 트리에주의를 기울 이도록 요청합니다. 이것이 위젯 설계를 JSX 코드로 변환 할 수 있어야 할 필요성의 핵심입니다.

보시다시피, 우리의 디자인 견적 위젯은 세 가지 구성 요소를 가져와야합니다. 전체 API에는 8 개의 레이어 기반 노드 만 포함되어 있다는 점을 고려할 때 이는 상당한 수의 구성 요소입니다. 그러나 곧 알 수 있듯이 이러한 모듈은 모든 종류의 레이아웃을 만들기에 충분합니다.

 <cod> // code.tsx const {widget} = const {autolayout, svg} =  </cod>

우리는 위젯의 골격을 반응합니다 > <svg> </svg> {quote} - {author} <svg> </svg> )} widget.register (quoteswidget); 이제 설계 레이어를 구별 할 수 없습니다. 다행히도 name 속성을 ​​사용 하여이 문제를 쉽게 해결할 수 있습니다.

 <code> <autolayout name="{" quote> <svg name="{" leftquotationmark> </svg> <autolayout name="{" quotecontent> <text name="{quotetext"> {text> ">  </text></autolayout>; </autolayout></code> 

물론, 우리는 여전히 우리의 인용문 SVG를 볼 수 없으므로이 문제를 해결하기 시작합시다. <svg> </svg> 구성 요소는 svg 요소의 소스 코드를 사용하는 src 속성을 ​​허용합니다. 이것에 대해 할 말이 많지 않으므로 간단하게 유지하고 코드로 직접 이동합시다.

const leftquotationsvgsrc =`<svg fill="none" style="max-width:90%">`; const rightquotationsvgsrc =`<svg fill="none" height="103" viewbox="0 118 103" width="118" xmlns="<http://www.w3.org/2000/svg>"> // simplicity for simplicity </svg>`; return (<svg name="{" leftquotationmark> </svg>);} </svg>

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

위젯 미리보기

Figma는 핫 재 장전을 포함하여 (이에 국한되지 않음) 위젯을 구축 할 때 좋은 개발 경험을 제공합니다. 이 기능을 사용하면 위젯을 실시간으로 인코딩하고 미리 볼 수 있습니다.

먼저 위젯 메뉴 (Shift I)를 열고 개발 탭으로 전환 한 다음 새 위젯을 아트 보드로 클릭하거나 드래그하십시오. 위젯을 찾을 수 없습니까? 걱정하지 마십시오. 3 도트 메뉴를 클릭하고 위젯의 manifest.json 파일을 가져 오십시오. 예, 그것이 다시 존재로 되 찾는 모든 단계입니다!

잠깐만, 화면 하단에 오류 메시지가 있습니까?

그렇다면 조사해 봅시다. " 콘솔 열기 "을 클릭하고 그 내용을 읽으십시오. 열린 콘솔 버튼이 사라지면 디버그 콘솔을 엽니 다. Figma 로고를 클릭하고 위젯 카테고리로 점프하고 개발 메뉴를 표시하십시오.

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

당신이 겪을 수있는 또 다른 장애물은 코드가 변경 될 때마다 위젯을 다시 렌더링 할 수 없다는 것입니다. 다음 컨텍스트 메뉴 명령을 사용하여 위젯 업데이트를 쉽게 강제 할 수 있습니다.

스타일 설정 위젯

현재 위젯의 모양은 여전히 ​​우리의 궁극적 인 목표와는 거리가 멀다.

코드에서 Figma 구성 요소를 어떻게 스타일링합니까? 아마도 React 프로젝트에서와 같이 CSS를 사용합니까? 실수. Figma 위젯의 경우 모든 스타일은 전체 속성 세트를 통해 구현됩니다. 다행히도이 프로젝트는 그림의 해당 프로젝트와 거의 같은 이름을 가지고 있습니다.

먼저 두 <autolayout> </autolayout> 구성 요소를 구성합니다. 위 그림과 같이, 속성 이름은 그 목적을 매우 명확하게 설명합니다. 이를 통해 코드로 바로 점프하고 몇 가지 변경을 시작할 수 있습니다. 전체 코드를 다시 표시하지 않으므로 구성 요소 이름을 사용하여 코드 스 니펫이 어디에 있는지 안내하십시오.

 <code> <autolayout direction="{" : start verticalalignitems="{" end> </autolayout> ; </code> 

우리는 큰 진전을 이루었습니다! 위젯이 어떻게 보이는지 확인하기 위해 Figma로 다시 저장하고 다시 봅시다. 새로운 변경 후 Figma가 위젯을 자동으로 다시로드하는 방법을 기억하십니까?

그러나 충분하지 않습니다. 또한 루트 구성 요소에 배경색을 추가해야합니다.

 <code> <autolayout fill="{"> </autolayout> </code>

유사하게 Figma Artboard를보고 거의 즉시 위급에 반영되는지 확인하십시오.

이 안내서를 계속하고 <text> </text> 구성 요소를 스타일로 사용하겠습니다.

위젯 API 문서를 본 후, 위의 그림과 같이 속성 이름이 Figma 응용 프로그램의 해당 항목과 거의 동일하다는 것을 명확하게 알 수 있습니다. 또한 이전 섹션에서 Chris 웹 사이트의 값도 사용할 것입니다.

 <code> <text fill="{ '#545454'}" fontfamily="{ 'lora'}" fontsize="{36}" fontweight="{ 'normal'}" name="{ 'quotetext'}" width="{700} ontfamily = "> - - - {author} </text> </code> 

위젯에 상태 추가

위젯은 현재 동일한 견적을 표시하지만 전체 견적 풀에서 무작위로 추출하려고합니다. 우리는 위젯에 상태를 추가해야합니다. 모든 React 개발자는 변경 사항이 구성 요소의 재 렌즈를 트리거하는 변수입니다.

Figma에서는 austyncedstate hook을 사용하여 생성됩니다. 이 요구 사항은 Figma가 동일한 디자인 아트 보드를 볼 수있는 모든 클라이언트에 걸쳐있는 위젯의 상태를 동기화해야한다는 사실에서 비롯됩니다.

 <code> const {audy-text] = const [auther, setauthor] = austyncedstate ( "Quote-Author", </code>"; 다음 섹션에서는 인터넷에서 데이터를 얻는 방법을 알아낼 것입니다. 스포일러 경고 : 이것은 단순한 것만 큼 간단하지 않습니다.  <h3> 네트워크에서 데이터 가져 오기 </h3> <p> 리콜 피마를 통해 우리는 iframe을 가능하게하는 위젯으로 시작하도록 선택할 수 있습니다. 우리는 그 옵션을 선택하지 않았지만 여전히 그 기능 중 일부를 구현해야했습니다. 위젯 코드에서 단순히 <code> fetch () </code>를 호출 할 수없는 이유를 설명하겠습니다. </p> <p> 위젯을 사용하면 컴퓨터의 다른 사람이 작성한 JavaScript 코드를 실행하는 것입니다. Figma 직원에 의해 모든 위젯이 철저히 면밀히 조사되었지만, 우리는 JavaScript 라인조차도 얼마나 많은 피해가 발생할 수 있는지 알고 있기 때문에 여전히 큰 보안 취약점입니다. </p> <p> 따라서 Figma는 단순히 <code> eval () </code> 프로그래머가 작성한 위젯 코드를 익명으로 할 수 없습니다. 간단히 말해서, 팀은 최상의 솔루션은 엄격하게 보호 된 샌드 박스 환경에서 타사 코드를 실행하는 것이라고 결정했습니다. 추측 한 바와 같이,이 환경에서는 브라우저 API를 사용할 수 없습니다. </p> <p> 그러나 걱정하지 마십시오. 파일에 쓴 모든 HTML 코드 (바람직하게는 <code> ui.html </code>)는 모든 브라우저 API에 액세스 할 수 있습니다. 위젯 에서이 코드를 트리거 할 수있는 방법이 궁금하지만 나중에이를 살펴 보겠습니다. 이제 코드로 돌아가 봅시다 :  </p> <pre class="brush:php;toolbar:false"> <co> <cod> // manifest.json { "ui": "ui.html"}  </cod></co>

window.onmessage = async (event) = & gt. Server Window.parent.postMessage ({pluginMessage : {// todo : 검색된 데이터를 반환}}, '*')}

이것은 위젯에 대한 위젯에 대한 일반적인 템플릿입니다. 서버에서 데이터를 얻기 위해 사용합시다.

window.onmessage = async (event) = & gt; fetch (`https://quotesondesign.com/wp-json/wp/v2/posts/?orderby=rand& _fields = 제목, yoast_head_json *) const Endered Const QuoteContent = data [0] .yoast_head_json.og_description window.parent.postmessage ({pluginMessage : {Authorname, quotecontent}}, '*')}}

간단하고 명확하게 유지하려면 오류 처리를 생략합니다. 위젯 코드로 돌아가서 <fecrame> </fecrame> :

function fetchdata () {return new Promise (resolve = & gt; {figma.showui (__ html_, {vis}))에서 정의 된 함수에 어떻게 액세스하는지 살펴 보겠습니다. }) figma.ui.onmessage = async ({authorname, quotecontent}) = & gt; }

당신이 볼 수 있듯이, 우리는 먼저 Figma에게 숨겨진 <iframe> </iframe>에 공개적으로 액세스하고 "NetworkRequest"라는 이벤트를 트리거하도록 지시합니다. ui.html 파일 에서이 이벤트를 처리하여 event.data.pluginmessage.type === 'NetworkRequest'를 확인한 다음 데이터를 위젯에 다시 게시합니다.

그러나 아직 아무 일도 일어나지 않았습니다 ... 우리는 여전히 fetchdata () 함수를 호출하지 않았습니다. 구성 요소 기능에서 직접 호출하면 콘솔에 다음 오류가 나타납니다.

위젯 렌더링 중에 showui를 사용할 수 없습니다.

Figma는 기능 본문에서 직접 showui 에게 전화하지 말라고 말합니다 ... 그래서 어디에 넣어야합니까? 대답은 새로운 후크와 새로운 기능입니다 : useeffect 및 대기 포스 . React 개발자 인 경우 이미 useeffect 에 익숙 할 수도 있지만 위젯 구성 요소가 장착 될 때 서버에서 데이터를 가져 오기 위해 여기에서 사용합니다.

 <code> const {useeffect, waitfortask} = Widget QuotesWidget (() = & gt; {waitfortask (fetchData ()) </code>

; 정의에 따라 useeffect 가 위젯 상태가 변경 될 때마다 또는 fetchdata 를 호출 할 때마다 다시 시작되기 때문에 발생합니다. 반응에서 useeffect 만 호출 할 수있는 기술이 있지만 Figma의 구현과는 작동하지 않습니다. 그림 문서에서 :

위젯이 실행되는 방식으로 인해 사용률은 동일한 상태를 사용하여 여러 번 호출되는 것을 처리해야합니다.

운 좋게도, 우리는 useeffect 만 호출하는 간단한 해결 방법을 활용할 수 있습니다. 일단 상태의 가치가 여전히 비어 있는지 확인하여 구성 요소가 먼저 장착됩니다. }});}}

끔찍한 " 경계 "오류가 발생할 수 있습니다. 이것은 플러그인 및 위젯 개발에서 매우 일반적입니다. 그림을 다시 시작하면 다시는 나타나지 않습니다.

인용문에는 이상한 문자가 포함되어 있음을 알 수 있습니다.

이들은 코드에서 올바르게 포맷해야합니다 ODEENTITIES = (function () {// 이렇게하면 var 요소 = document.createElement ( "div"); function마다 오버 헤드가 객체를 생성하는 것을 방지합니다. decodehtmlentities (str) {if (str & amp; & amp; typeof str === "string") {// Stript/html tags str = str.replace (/]*& gt; /? 요소. reture} return decodehtmlentities} ();

위젯에 속성 메뉴 추가

위젯이 인스턴스화 된 경우 새 인용문을받는 동안이 프로세스를 제거하지 않고이 프로세스를 다시 수행 할 수 있다면 더 실용적입니다. 이 섹션은 솔루션이 우수하기 때문에 간단히 소개됩니다. 속성 메뉴를 사용하여 usepropertymenu hook를 한 번에 호출하여 위젯에 상호 작용을 추가 할 수 있습니다.

 <code> const {usepropertymenu} = widget quoteswidget () {usepropertymenu (usepropertymenu : "action", "generate", 툴팁 : "생성",`<svg fill="none height ="> "> </svg>`,},], () = & gt; fetchData ());} </code> 

간단한 후크를 사용하여 위젯을 선택할 때 위젯 근처에 나타나는 버튼을 만들 수 있습니다. 이것이이 프로젝트를 완료하기 위해 추가해야 할 마지막 부분입니다.

위젯을 대중에게 게시

아무도 사용하지 않으면 위젯을 구축하는 데 거의 사용되지 않습니다. Figma는 조직이 내부 용도로 private 위젯을 출시 할 수 있지만 전 세계에 이러한 애플릿을 게시하는 것이 더 일반적입니다.

Figma에는 5 ~ 10 일이 소요될 수있는 세심한 위젯 검토 프로세스가 있습니다. 우리가 함께 만든 디자인 견적 위젯은 이미 위젯 라이브러리에 있지만 여전히 그것이 어떻게 도착하는지 보여줄 것입니다. 이 위젯을 다시 게시하지 마십시오. 삭제 . 그러나 몇 가지 큰 변경을 수행하면 커뮤니티와 자신의 위젯을 계속 공유하십시오!

먼저 위젯 메뉴 (Shift I)를 클릭 한 다음 개발 탭으로 전환하여 위젯을보십시오. 3 도트 메뉴를 클릭하고 게시 를 누릅니다.

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

이러한 모든 리소스를 가져 오면 위젯의 스크린 샷이 여전히 필요합니다. 게시 모드를 끄고 (걱정하지 말고, 데이터를 잃지 않음) 위젯을 마우스 오른쪽 버튼으로 클릭하여 흥미로운 컨텍스트 메뉴를 표시합니다. 복사/붙여 넣기를 카테고리로 찾아서 를 png 으로 선택하십시오.

이 작업이 완료되면 게시 모드로 돌아가 위젯의 스크린 샷을 붙여 넣으십시오.

아래로 스크롤하여 모드를 게시하십시오. 축하하다! ?

Figma는 며칠 안에 연락하여 모델 검토 상태를 알려줍니다. 거부되면 변경 사항을 변경하여 다시 제출할 수 있습니다.

결론

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

Figma 기술을 다음 단계로 끌어 올리고 자하는 사람들을 위해 위젯 커뮤니티를 탐색하고 영감을주는 관심사를 사용하는 것이 좋습니다. 더 많은 위젯을 계속 구축하고 React 기술을 계속 연마하면 실현하기 전에 모든 작업을 수행하는 방법을 가르쳐 줄 것입니다.

더 많은 자원

이 위젯을 만들 때 많은 문서를 언급해야했습니다. 내가 가장 도움이 된 것을 공유 할 것이라고 생각합니다.

더 많은 위젯을 구축하십시오 :

• 위젯을 구축하기위한 모범 사례
• 공식 Figma 위젯 예제

더 깊은 위젯을 배우십시오 :

> 위젯 및 플러그인
• 위젯 및 플러그인
• Figma 플러그인 소개
• 플러그인이 장면 뒤에서 실행되는 방법

위 내용은 대화 형 피그마 위젯 구축의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!