Figma on aina kannustanut kehittäjien ja suunnittelijoiden välistä yhteistyötä. Se tavoittelee loputonta yhteisön tekemien laajennusten aarretta. Tarvitsetko 3D-elementtejä? Sitä varten on plugin. Tarvitsetko abstrakteja SVG-tiedostoja? Sitä varten on pluginMyös.
Figman suunnitteluosa on kuitenkin aina ollut suhteellisen staattinen - työskennellyt aina liikkumattomien suorakulmioiden kanssa, jotka on liitetty toisiinsa ennalta määritettyjen käyttäjän vuorovaikutusten kautta. Mutta entä jos kertoisin sinulle, että suunnitelmasi voivat yhtäkkiä herätä henkiin – että ne voivat olla animoituja, interaktiivisia ja jopa tilallisia? Mikä sitten erottaisi konseptin toteutuksesta?
Kuvio kesäkuussa että se tuo taulukkoon JavaScript-pohjaisia widgetejä. Nyt suunnittelijat voivat selata ja toteuttaa logiikkaohjattuja komponentteja suoraan Figmassa!
Sano Hei Widgets API! Haluatko tietää, mikä se on ja miten sitä käytetään? Juuri sitä aiomme tehdä yhdessä tässä postauksessa.
Figma-widgetit avaavat paljon mahdollisuuksia
Kuvittele, että työskentelet kellon ympäri kumppanisi kanssa suunnitellaksesi suuren ravintolasovelluksen. Olette molemmat jo yhteistyössä samalla Figma-levyllä; jaatte molemmat täsmälleen saman asiakirjan, ja muutokset tapahtuvat lennossa.
Tiedät varmasti jo, että yhteistyöhön kuuluu muutakin kuin pelkkä suunnitteluprosessi:
- projektinhallinta,
- järjestää äänestykset äänten keräämiseksi,
- valetietojen tuonti ja visualisointi,
- ja ehkä jopa pelata moninpeliä vilvoitellakseen monen tunnin työn jälkeen.
Tarvitsemme vain yhden henkilön hallitsemaan kaikkea ja lähettämään linkkejä muille ryhmän jäsenille. Mutta oh, se ei ole kovin tehokasta, vai mitä?
No, siellä widgetit tulevat peliin. Voimme kuvitella kaiken tämän - kyllä, kaiken - poistumatta Figmasta.
Tässä on vain muutamia tapoja, joilla voit halutessasi käyttää widgetejä Figmassa:
Lista menee me ja me. Kuten huomaat, siellä on jo lukuisia widgetejä, joita voit vapaasti käyttää asiakirjoissasi. Itse asiassa voit lisätä widgetejä suoraan taulullesi Widgetit-valikosta (Shift+I).
Mutta emme ole täällä oppimassa käyttämään widgetejä, koska se on helppoa. Tehkäämme mitä osaamme parhaiten: luomme oman Figma-widgetin! Tämä inspiroituu Chris Coyierin suunnittelu lainaa verkkosivustoa. Otamme API:n, syötämme sen widgetiin ja näytämme sitten satunnaisia suunnittelulainauksia suoraan Figmassa.
Tässä on mitä tarvitsemme
En halua olla huonojen uutisten välittäjä, mutta widgetien kehittäminen edellyttää Windows- tai Mac-käyttöjärjestelmää. Olen pahoillani, Linux-käyttäjät, mutta teillä ei ole onnea. (Voisit silti käytä VM:tä jos haluat seurata mukana.)
Me aiomme lataa Figma Desktop sovellus. Yksinkertaisin tapa aloittaa on luomalla widget-malli suoraan sovelluksesta.
Luodaan uusi taulu avaamalla widget-valikko (Shift+ I), vaihtamalla kohtaan Kehitys -välilehti ja luo uusi kohde.
Tämän jälkeen Figma kehottaa sinua nimeämään uuden widgetin ja päättämään, onko se räätälöity paremmin suunnittelulevyt tai FigJam-levyt liian. Edellinen vaihtoehto on riittävä tämän artikkelin tarkoituksiin.
Ja räätälöinti ei lopu tähän; Figma antaa sinulle myös mahdollisuuden aloittaa valmiilla laskuriwidgetillä tai iFrame-yhteensopivalla vaihtoehdolla, joka antaa sinulle pääsyn myös Canvas- ja Fetch-sovellusliittymiin (sekä kaikkiin muihin selaimen sovellusliittymiin). Käytämme yksinkertaista "Tyhjä" -vaihtoehtoa, mutta muokkaamme sitä lopulta itse hyödyntämään Fetch API -sovellusta.
Sen jälkeen sinua pyydetään tallentamaan uusi widget-projektisi erityiseen hakemistoon järjestelmässäsi. Kun tämä on tehty, käynnistä terminaali ja ohjaa se kyseiseen kansioon. Älä suorita vielä komentoja – teemme sen myöhemmin ja saamme tarkoituksella virheilmoituksen saadaksemme lisätietoja Widgets API:sta.
Widgetin suunnittelu
Haemme suunnittelua suoraan Chris Coyierin suunnittelu lainaa verkkosivustoa. Joten mennään sinne ja sukellataan käynnistämällä DevTools.
Kaksi pikanäppäintä, joita käytän tässä, ovat Ctrl+Shift+C (Tai Cmd+Shift+C) vaihtaaksesi "Pick element" -työkalun ja Shift+Click muuttaaksesi värimuodon HEX-koodiksi. Teemme tämän oppiaksemme Chrisin verkkosivustolla käytetyistä väreistä, fonteista, fonttien painoista ja kirjasinkooista. Kaikki nämä tiedot ovat tärkeitä Figmaan läheisesti muistuttavan widgetin rakentamiseksi, mikä on seuraava askeleemme! Sinä pystyt nappaa suunniteltu komponentti ja käytä sitä omassa kankaassasi.
En mene tässä paljon yksityiskohtiin, koska tämän artikkelin pääaihe on widgetien rakentaminen kirjoittamalla koodia. Mutta en voi tarpeeksi korostaa, kuinka tärkeää on pitää hyvää huolta sinusta widgetien tyyliin… CSS-Tricksillä on jo lukuisia suunnittelusuuntautuneita Figma-opetusohjelmia; et tule katumaan niiden lisäämistä lukulistallesi.
Asettelun luominen widgetillemme
Kun suunnittelu on poissa tieltä, on aika ottaa ohjelmointisormet esiin ja alkaa rakentaa widgetimme vaihteita.
On erittäin mielenkiintoista, kuinka Figma kääntää suunnittelun rakennuspalikat Reactin kaltaisiksi komponenteiksi. Esimerkiksi kehyselementit, joissa on automaattinen asetteluominaisuus, esitetään muodossa <AutoLayout /> komponentti koodissa. Tämän lisäksi käytämme kahta muuta komponenttia: <Text /> ja <SVG />.
Katso Figma-tauluani… Pyydän sinua keskittymään kohdepuuhun. Se on mitä tarvitsemme voidaksemme kääntää widget-suunnittelumme JSX-koodiksi.
Kuten näet, suunnittelulainaus-widget vaatii kolmen komponentin tuomista. Se on kohtuullinen määrä komponentteja ottaen huomioon, että täysi API sisältää vain kahdeksan kerrospohjaista solmua. Mutta kuten pian näet, nämä moduulit ovat enemmän kuin riittäviä kaikenlaisten asettelujen luomiseen.
// code.tsx
const { widget } = figma;
const { AutoLayout, Text, SVG } = widget;Ja tämän ansiosta meillä on kaikki mitä tarvitsemme mennäksemme eteenpäin ja rakentaaksemme widgetimme rungon, kuten tekisimme Reactissa:
function QuotesWidget() {
const quote = `...`;
const author = `...`;
return (
<AutoLayout>
<SVG />
<AutoLayout>
<Text>{quote}</Text>
<Text>— {author}</Text>
</AutoLayout>
<SVG />
</AutoLayout>
);
}
widget.register(QuotesWidget);Tämä koodi on vähintäänkin hämmentävä. Tällä hetkellä emme voi erottaa suunnittelukerroksia toisistaan. Onneksi pystymme ratkaisemaan tämän ongelman helposti käyttämällä name omaisuutta.
<AutoLayout name={"Quote"}>
<SVG name={"LeftQuotationMark"} />
<AutoLayout name={"QuoteContent"}>
<Text name={"QuoteText"}>{quote}</Text>
<Text name={"QuoteAuthor"}>— {author}</Text>
</AutoLayout>
<SVG name={"RightQuotationMark"} />
</AutoLayout>;Ja tietenkään emme vieläkään näe lainausmerkkiämme SVG:itä, joten yritämme korjata asian. The <SVG/> komponentti hyväksy a srcominaisuus, joka ottaa SVG-elementin lähdekoodin. Tästä ei ole paljon sanottavaa, joten pidetään se yksinkertaisena ja siirrytään suoraan takaisin koodiin:
const leftQuotationSvgSrc = `<svg width="117" height="103" viewBox="0 0 117 103" fill="none" xmlns="<http://www.w3.org/2000/svg>">
// shortened for brevity
</svg>`;
const rightQuotationSvgSrc = `<svg width="118" height="103" viewBox="0 0 118 103" fill="none" xmlns="<http://www.w3.org/2000/svg>">
// shortened for brevity
</svg>`;
function QuotesWidget() {
return (
<SVG name={"LeftQuotationMark"} src={leftQuotationSvgSrc} />
<SVG name={"RightQuotationMark"} src={rightQuotationSvgSrc} />
);
}Uskon, että voimme kaikki olla samaa mieltä siitä, että kaikki on nyt paljon selkeämpää! Kun nimeämme asioita, niiden tarkoitus tulee yhtäkkiä paljon selvemmäksi koodimme lukijoille.
Esikatselemme widgetiämme reaaliajassa
Figma tarjoaa loistavan kehittäjäkokemuksen luotaessa widgetejä, mukaan lukien (mutta ei rajoittuen) kuuma uudelleenlataus. Tämän ominaisuuden avulla voimme koodata ja esikatsella widgetiin tehtyjä muutoksia reaaliajassa.
Aloita avaamalla widget-valikko (Shift+I), siirryt kehitysvälilehdelle ja napsautat tai vedät uuden widgetin taululle. Etkö löydä widgettiäsi? Älä huoli, napsauta vain kolmen pisteen valikkoa ja tuo widgetisi manifest.json tiedosto. Kyllä, siinä kaikki, mitä se tarvitsee tuoda se takaisin olemassaoloon!
Odota, saitko virheilmoituksen näytön alareunaan?
Jos on, niin tutkitaan. Klikkaa "Avaa konsoli” ja lue mitä siinä on sanottavaa. Jos Avaa konsoli -painike on poissa, on olemassa vaihtoehtoinen tapa avata virheenkorjauskonsoli. Napsauta Figma-logoa, siirry widget-luokkaan ja paljasta kehitysvalikko.
Tämä virhe johtuu todennäköisesti siitä, että emme ole vielä kääntäneet TypeScript-koodiamme JavaScriptiksi. Voimme tehdä sen komentorivillä suorittamalla npm install ja npm run watch. (tai yarn ja yarn watch ). Ei virheitä tällä kertaa!
Toinen este, johon saatat törmätä, on se, että widget ei hahmonnu uudelleen aina, kun koodia muutetaan. Voimme helposti pakottaa widgetimme päivittämään seuraavan kontekstivalikon komennon: Widgetit → Piirrä widget uudelleen.
Widgetin muotoilu
Nykyisessä muodossaan ulkonäkö widgeteistämme ovat vielä melko kaukana lopullisesta tavoitteestamme.
Joten miten muotoilemme Figma-komponentteja koodista? Ehkä CSS:llä, kuten tekisimme React-projektissa? Negatiivinen. Figma-widgetien avulla kaikki muotoilu tapahtuu joukon kautta hyvin dokumentoitua rekvisiittaa. Onneksi nämä tuotteet on nimetty melkein identtisesti vastineilleen Figmassa.
Aloitamme määrittämällä kaksi <AutoLayout /> komponentit. Kuten yllä olevasta infografiikasta näet, rekvisiittanimet kuvaavat melkoisesti niiden tarkoitusta. Tämän ansiosta meidän on helppo siirtyä suoraan koodiin ja alkaa tehdä muutoksia. En näytä koko koodia uudelleen, joten luota komponenttien nimiin, jotka ohjaavat sinut, mihin katkelmat kuuluvat.
<AutoLayout
name={"Quote"}
direction={"horizontal"}
verticalAlignItems={"start"}
horizontalAlignItems={"center"}
spacing={54}
padding={{
horizontal: 61,
vertical: 47,
}}
>
<AutoLayout
name={"QuoteContent"}
direction={"vertical"}
verticalAlignItems={"end"}
horizontalAlignItems={"start"}
spacing={10}
padding={{
horizontal: 0,
vertical: 0,
}}
></AutoLayout>
</AutoLayout>;Olemme juuri edistyneet paljon! Tallennetaan ja siirrytään takaisin Figmaan nähdäksesi miltä widgetimme näyttää. Muistatko kuinka Figma lataa widgetit uudelleen automaattisesti uusien muutosten jälkeen?
Mutta se ei ole vielä aivan perillä. Meidän on myös lisättävä taustaväri juurikomponenttiin:
<AutoLayout name={"Quote"} fill={"#ffffff"}>Katso jälleen Figma-tauluasi ja huomaa, kuinka muutokset voivat näkyä lähes välittömästi takaisin widgetiin.
Jatketaan tätä opasta ja muotoillaan tyyliä <Text> komponentteja.
Katsottuaan Widgets API -dokumentaatio, on jälleen selvää, että kiinteistöjen nimet ovat lähes identtisiä Figma-sovelluksen vastaavien kanssa, kuten yllä olevasta infografiikasta näkyy. Käytämme myös arvoja viimeisestä osiosta, jossa tarkastelimme Chrisin verkkosivustoa.
<Text name={'QuoteText'}
fontFamily={'Lora'}
fontSize={36}
width={700}
fill={'#545454'}
fontWeight={'normal'}
>{quote}</Text>
<Text name={'QuoteAuthor'}
fontFamily={'Raleway'}
fontSize={26}
width={700}
fill={'#16B6DF'}
fontWeight={'bold'}
textCase={'upper'}
>— {author}</Text>Tilan lisääminen widgetiin
Widgetissämme näkyy tällä hetkellä sama lainaus, mutta haluamme poimia koko lainausjoukosta satunnaisesti. Meidän on lisättävä olivat widgetillemme, jonka kaikki React-kehittäjät tietävät olevan muuttuja, jonka muutos laukaisee komponenttimme uudelleenrenderöinnin.
Figman avulla tila luodaan käyttämällä useSyncedState koukku; se on aika paljon Reagoi useState, mutta se vaatii ohjelmoijia määrittämään yksilöllisen avaimen. Tämä vaatimus johtuu siitä tosiasiasta, että Figman on synkronoitava widgetimme tila kaikki asiakkaat, jotka saattavat tarkastella samaa suunnittelutaulua, mutta eri tietokoneiden kautta.
const { useSyncedState } = widget;
function QuotesWidget() {
const [quote, setQuote] = useSyncedState("quote-text", "");
const [author, setAuthor] = useSyncedState("quote-author", "");
}Siinä on kaikki muutos, jonka tarvitsemme nyt. Seuraavassa osiossa selvitetään, kuinka tietoja noudetaan Internetistä. Spoilerihälytys: se ei ole niin yksinkertaista kuin miltä näyttää.
Haetaan tietoja verkosta
Muista, kun Figma antoi meille mahdollisuuden aloittaa iFrame-yhteensopivalla widgetillä. Vaikka emme valinneet tätä vaihtoehtoa, meidän on silti otettava käyttöön joitakin sen ominaisuuksia. Selitän, miksi emme voi yksinkertaisesti soittaa fetch() widget-koodissamme.
Kun käytät widgetiä, käytät omalla tietokoneellasi jonkun muun kirjoittamaa JavaScript-koodia. Vaikka Figman henkilökunta tarkistaa kaikki widgetit perusteellisesti, se on silti valtava tietoturva-aukko, koska me kaikki tiedämme kuinka paljon vaurioita voi aiheuttaa jopa yksi JavaScript-rivi.
Tämän seurauksena Figma ei voi yksinkertaisesti eval() mikä tahansa anonyymien ohjelmoijien kirjoittama widget-koodi. Lyhyesti sanottuna tiimi päätti, että paras ratkaisu on käyttää kolmannen osapuolen koodia tarkasti vartioidussa hiekkalaatikkoympäristössä. Ja kuten saatat arvata, selaimen sovellusliittymät eivät ole käytettävissä tällaisessa ympäristössä.
Mutta älä huoli, Figman ratkaisu tähän toiseen ongelmaan on <iframe>s. Mikä tahansa HTML-koodi, jonka kirjoitamme tiedostoon, mieluiten nimeltään ui.html, voi käyttää kaikkia selaimen sovellusliittymiä. Saatat ihmetellä, kuinka voimme käynnistää tämän koodin widgetistä, mutta tutkimme asiaa myöhemmin. Siirrytään nyt takaisin koodiin:
// manifest.json
{
"ui": "ui.html"
}<!-- ui.html -->
<script>
window.onmessage = async (event) => {
if (event.data.pluginMessage.type === 'networkRequest') {
// TODO: fetch data from the server
window.parent.postMessage({
pluginMessage: {
// TODO: return fetched data
}
}, '*')
}
}
</script>Tämä on yleinen malli widgetistä-iframe viestintää. Käytetään sitä tietojen hakemiseen palvelimelta:
<!-- ui.html -->
<script>
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
}
}, '*')
}
}
</script>Jätämme virheiden käsittelyn pois, jotta tämä pysyy yksinkertaisena ja täsmällisenä. Hyppäämme takaisin widget-koodiin ja katsomme, kuinka pääsemme sovelluksessa määritettyihin toimintoihin <iframe>:
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()
}
})
}Kuten näette, käskemme ensin Figmaa paljastamaan pääsyn piilotetuillemme <iframe> ja käynnistää tapahtuman nimellä "networkRequest". Käsittelemme tämän tapahtuman ui.html tiedosto tarkistamalla event.data.pluginMessage.type === 'networkRequest', ja lähettää tiedot takaisin widgetiin.
Mutta mitään ei tapahdu vielä… Emme ole vieläkään soittaneet fetchData() toiminto. Jos kutsumme sitä suoraan komponenttifunktiossa, konsolissa tapahtuu seuraava virhe:
Cannot use showUI during widget rendering.Figma käskee meitä olemaan soittamatta showUI suoraan funktion runkoon… Joten mihin se pitäisi sijoittaa? Vastaus tähän on yksi uusi koukku ja yksi uusi toiminto: useEffect ja waitForTask. Saatat olla jo perehtynyt useEffect jos olet React-kehittäjä, mutta käytämme sitä täällä tietojen hakemiseen palvelimelta, kun widget-komponentti asennetaan.
const { useEffect, waitForTask } = widget;
function QuotesWidget() {
useEffect(() => {
waitForTask(fetchData());
});
}Mutta tämä johtaa jälleen uuteen "virheeseen", jossa widgetimme hahmonnetaan uudelleen uudella lainauksella ikuisesti. Tämä tapahtuu, koska useEffectmääritelmän mukaan laukeaa uudelleen aina, kun widgetin tila muuttuu, ei, kun soitamme fetchData. Ja kun siellä on tekniikka vain soittaa useEffect Reactissa se ei toimi Figman toteutuksessa. Figman dokumenteista:
Widgetit toimivat
useEffectpitäisi käsitellä useita kertoja samassa tilassa.
Onneksi meillä on yksinkertainen ratkaisu, jota voimme hyödyntää ja soittaa useEffect vain kerran, kun komponentti asennetaan ensimmäisen kerran, ja se on tarkistamalla, ovatko tilan arvot edelleen tyhjiä:
function QuotesWidget() {
useEffect(() => {
if (!author.length & !quote.length) {
waitForTask(fetchData());
}
});
}Saatat törmätä pelottavaan "muistin käyttö rajojen ulkopuolella" virhe. Sen melko yleistä nähdä laajennusten ja widgetien kehityksessä. Käynnistä vain Figma uudelleen, niin sitä ei enää ole.
Olet ehkä huomannut, että lainausteksti sisältää joskus outoja merkkejä.
Nämä ovat Unicode-merkit ja meidän on muotoiltava ne oikein koodiksi:
<!-- ui.html -->
<script>
window.onmessage = async (event) => {
// ...
const quoteContent = decodeEntities(data[0].yoast_head_json.og_description);
};
// <https://stackoverflow.com/a/9609450>
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(/<script[^>]*>([Ss]*?)</script>/gim, "");
str = str.replace(/</?w(?:[^"'>]|"[^"]*"|'[^']*')*>/gim, "");
element.innerHTML = str;
str = element.textContent;
element.textContent = "";
}
return str;
}
return decodeHTMLEntities;
})();
</script>Ja voilà, widgetimme haki upouuden suunnittelutarjouksen joka kerta, kun se lisättiin suunnittelutaululle.
Ominaisuusvalikon lisääminen widgetiin
Vaikka widgetimme hakee tuoreen lainauksen instantoinnissa, olisi paljon käytännöllisempää, jos voisimme tehdä tämän prosessin uudelleen, mutta poistamatta sitä. Tämä osio on lyhyt, koska ratkaisu on varsin merkittävä. Kanssa omaisuuden valikot, voimme lisätä vuorovaikutteisuutta widgetiin yhdellä kutsulla usePropertyMenu koukku.
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="<http://www.w3.org/2000/svg>">
<!-- Shortened for brevity -->
</svg>`,
},
],
() => fetchData()
);
}Yhdellä yksinkertaisella koukulla voimme luoda painikkeen, joka tulee näkyviin widgetimme viereen, kun se valitaan. Tämä oli viimeinen osa, joka meidän piti lisätä, jotta tämä projekti saadaan päätökseen.
Julkaisemme widgetimme yleisölle
Widgetin rakentamisesta ei ole paljon hyötyä, jos ei kukaan käyttötarkoituksiin se. Ja samalla Figma antaa organisaatioille mahdollisuuden aloittaa toimintansa yksityinen widgetit sisäiseen käyttöön, on paljon yleisempää julkaista nämä pienet ohjelmat maailmalle.
Figmalla on herkkä widgetien tarkistusprosessi, joka voi kestää 5–10 arkipäivää. Ja vaikka yhdessä rakentamamme suunnittelulainaus-widget on jo widget-kirjastossa, aion silti näyttää, kuinka se pääsi sinne. Älä yritä julkaista tätä widgetiä uudelleen, koska se johtaa vain poistamiseen. Mutta jos teit siihen merkittäviä muutoksia, jatka ja jaa oma widgettisi yhteisön kanssa!
Aloita napsauttamalla widget-valikkoa (Shift+I) ja vaihtamalla kohtaan Kehitys -välilehti nähdäksesi widgetimme. Napsauta kolmen pisteen valikkoa ja paina julkaista.
Figma kehottaa sinua antamaan joitain tietoja widgetistäsi, kuten otsikon, kuvauksen ja joitain tunnisteita. Tarvitsemme myös 128 × 128 -kuvakkeen ja 1920 × 960 -bannerikuvan.
Kun kaikki nämä resurssit on tuotu, tarvitsemme edelleen kuvakaappauksen widgetistämme. Sulje julkaisumodaali (älä huoli, et menetä tietojasi) ja napsauta widgetiä hiiren kakkospainikkeella avataksesi mielenkiintoisen kontekstivalikon. Etsi Kopioi/Liitä nimelläluokka ja valitse Kopioi PNG-muodossa.
Kun tämä on tehty, palataan julkaisumodaaliin ja liitetään widgetin kuvakaappaus:
Vieritä alas ja julkaise lopuksi modaalisi. Juhlia! 🎉
Figma ottaa sinuun yhteyttä parin päivän sisällä modaalitarkistuksen tilasta. Jos hylkäät, sinulle annetaan mahdollisuus tehdä muutoksia ja lähettää uudelleen.
Yhteenveto
Rakensimme juuri Figma-widgetin tyhjästä! Tässä on monia asioita, joita ei käsitellä, kuten klikkaa tapahtumia, syöttölomakkeitaja paljon. Voit kaivaa widgetin koko lähdekoodiin tämä GitHub-repo.
Niille, jotka haluavat viedä Figma-taitonsa korkeammalle tasolle, suosittelen tutustumaan Widgets-yhteisöön ja käyttämään inspiraationa sitä, mikä pistää silmään. Jatka uusien widgetien rakentamista, jatka React-taitojen teroittamista, ja ennen kuin edes huomaatkaan, opetat minut tekemään kaiken tämän.
Lisää resursseja
Minun piti viitata moniin asiakirjoihin tehdessäni tätä widgetiä. Ajattelin jakaa sen, mikä auttoi eniten.
