Autonomy dokumentatsioon
Integratsioonid

Figma

Ühenda Figma Autonomyga ja kasuta disainikaadreid testsammude visuaalsete baasjoontena.

Ühenda Figma ja testsamm saab võrrelda reaalajas toodet kaadriga, mille järgi see disainiti. Autonomy renderdab kaadri serveripoolselt ja eraldab sellest disainifaktid, nii et kontroll teab kavandatud geomeetriat, värve ja kirjatüüpi — mitte ainult tasapinnalist pilti.

Kuidas Figma pistikprogramm töötab. Autonomy ühendub Figma REST API kaudu, mitte ei käivita koodi Figma redaktoris, seega pole Figma kogukonnalehelt midagi paigaldada. Annad ühe korra isikliku ligipääsutokeni ja kleebid seejärel kaadrite URL-id sinna, kuhu neid vajad.

Figma ühendamine

  1. Ava Figmas Account Settings → Personal Access Tokens ja loo token failide ja sõlmede lugemisõigusega.
  2. Ava Autonomys Settings → Integrations ja leia Figma kaart.
  3. Klõpsa Configure API Key, kleebi token ja klõpsa Test connection. Autonomy kontrollib seda enne salvestamist Figma vastu.
  4. Klõpsa Save key.

Token krüpteeritakse puhkeolekus ja seda ei tagastata kunagi brauserisse ega käivitajale. Asendamine on kirjutamine; tagasilugemist ei ole.

Keskkonnapõhised tokenid

Tööruumi tasemel võti katab vaikimisi kõike. Kui erinevad keskkonnad peaksid lugema erinevaid Figma faile — näiteks eraldi disainiorganisatsioon valge sildistusega build'i jaoks — alista võti keskkonna kaupa Environments → edit an environment → Figma integration alt. Keskkonna võti võidab selles keskkonnas tehtavate käivituste jaoks.

Kaadri lisamine sammule

  1. Ava testjuhtum ja mine Visual References vahekaardile.
  2. Vali samm, millele viide kuulub.
  3. Klõpsa Add Figma frame ja kleebi kaadri URL.

URL peab olema täielik Figma link, mis sisaldab parameetrit node-id:

https://www.figma.com/design/<fileKey>/<title>?node-id=1042-317

Aktsepteeritakse nii figma.com/design/... kui ka vanemat figma.com/file/... kuju. Ava kaader Figmas ja kasuta Copy link — pelk faili-URL ilma sõlmeta ei sisalda renderdatavat kaadrit.

Mida Autonomy toob

Viite lisamisel lahendab tausttöö selle:

  • Sõlme PNG-renderdus 2× skaalas, mida hoitakse baasjoone pildina.
  • Disainifaktid sõlme alampuust: kaadri laius, kõrgus ja nimi; täitevärvid hex-kujul; tekstistiilid, sealhulgas kirjatüübi perekond, paksus, suurus, reakõrgus ja näidistekst; nurkade raadiused; ning auto-layout polsterdus ja vahed.

Disainifaktid on see, mis laseb võrdlusel kavatsusest aru saada. Mittevastavust ülevaatavale nägemismudelile antakse kaadri tegelikud värvi- ja kirjatüübi väärtused, nii et ta eristab „rõhuvärv on vale roheline" olukorrast „ekraanipilt jäädvustati animatsiooni keskel".

Iga viide näitab oma lahendamise olekut Visual References vahekaardil. Ebaõnnestunud viidet saab kohapeal uuesti proovida. Lahendamata viited proovitakse automaatselt uuesti käivituse alguses.

Baasjoonte ajakohasena hoidmine

Viide on hetkeseisupilt, mitte reaalajas link. Kui disain muutub, lahenda viide uuesti, et baasjoon vastaks. Käsitle tahtlikku disainimuudatust kahest osast uuendusena: tarni kasutajaliides, värskenda viidet.

Piirangud

  • Kaadri valija kuvab kuni 24 tipptaseme kaadrit faili või sõlme kohta.
  • Käsitsi üleslaaditud viitepiltide piir on 25 MB. Figma renderdused ei ole sellest piirangust mõjutatud.
  • Token vajab lugemisõigust igale viidatavale failile. Ühe meeskonna jaoks piiratud token ei saa renderdada teise meeskonna kaadrit.

Tõrkeotsing

"No Figma API key configured"

Tööruumile ega käivituse kasutatud keskkonnale pole võtit seadistatud. Lisa võti Settings → Integrations alt või sea keskkonna alistus.

"Figma URL is missing a node-id parameter"

Kleebisid faili-URL-i, mitte kaadri lingi. Ava kaader Figmas, kopeeri selle link ja kleebi terve URL koos päringustringiga.

"Figma rejected the token (403)"

Token tühistati, aegus või sellel pole sellele failile ligipääsu. Genereeri uus ja käivita Test connection uuesti enne salvestamist.

Baasjoon näeb õige välja, aga iga käivitus on mittevastavus

Kontrolli vaateakent. Võrdle töölaualaiust kaadrit töölaualaiuse pildiga. Tolerantsi ja vaateakna juhiste kohta vaata Visuaalsed kontrollid.

On this page