Jokaisen projektin oikea puoli on reaaliaikainen esikatselu — ei mockup vaan projektikansion todelliset tiedostot, paikallisesti tarjoiltuina ja uudelleenpiirrettyinä sitä mukaa kun agentti kirjoittaa niitä. Se, mitä näet, on kirjaimellisesti se, mitä julkaiset.
Result-, Code- ja Split-välilehdet
Paneelin yläreunan välilehdet vaihtavat, miten katsot samaa tilaa:
- Result — renderöity suunnitelma. Täällä ohjaus tapahtuu.
- Code — esikatselun alla oleva lähdekoodi, kun haluat nähdä tiedostot.
- Split — molemmat vierekkäin.
Viewportit ja zoomaus
Työkalurivin laitepainikkeet muotoilevat tuloksen uudelleen kiinteillä leveyksillä — työpöytä, tabletti ja puhelin — joten voit tarkistaa, miten suunnitelma reagoi, poistumatta ajosta, ja leveys-chipit hyppäävät suoraan gaten tarkistamiin murtopisteisiin (puhelin- ja tabletikoot, joissa navigaatio ja osumakohteet useimmiten rikkoutuvat).
Niiden vieressä oleva zoomaussäädin näyttää −, prosenttiluvun ja +, ja askeltaa 25 %:sta 400 %:iin. Voit myös nipistää ohjauslevyllä, vierittää Ctrl pohjassa tai painaa ⌘/Ctrl +, − ja 0 — pikanäppäimet toimivat silloinkin, kun kohdistus on suunnitelman sisällä. Laitekehyksessä nipistys pitää osoittimen alla olevan kohdan paikallaan. Klikkaa prosenttilukua palataksesi 100 %:iin. Suunnitelmat, jotka zoomaavat omaa näkymäänsä, kuten kartta, pitävät nipistyksen itsellään.
Koska tarkistus on reaaliaikainen, gaten ajama viiden leveyden vertailu — työpöytä, läppäri, tabletti ja kaksi puhelinleveyttä — on jotain, mitä voit itse silmäillä missä tahansa vaiheessa, ei vain vuoron päätyttyä.
Poimi, kommentoi ja työkaluraili
⌥-hoveröinti esikatselussa korostaa kohdistimen alla olevan elementin — saman elementin, jonka agentti näkee — ja ⌥-klikkaus pinnii siihen kommentin. Railin painikkeet avaavat ohjauslaatikot: Tweaks reaaliaikaisille säädöille, Comment mode pinneille ja piirtämiselle, Designer talk kysyäksesi suunnitelmalta, miksi se näyttää siltä kuin näyttää. Jokaisella on oma sivunsa kohdassa Ohjaus.
Esitystila
Present pudottaa studion kromin pois ja täyttää ikkunan tuloksella — esitä ajo jollekin toiselle huoneessa tai katso suunnitelmaa ilman transkriptiota vieressä. Escape palaa projektiin.
Mikä pysyy livenä agentin työskennellessä
Esikatselu piirtää itsensä uudelleen vuoron aikana, ei vain lopussa — katsot suunnitelman kokoontuvan tiedosto kerrallaan. Agentteja ohjeistetaan kirjoittamaan pääsivu ensin ja tallentamaan se jokaisen osion tai näytön jälkeen, joten esikatselu alkaa näyttää suunnitelmaa jo buildin varhaisessa vaiheessa eikä vasta lopussa. Datamallista rakennetut suunnittelutyypit, kuten Mobile app, Social Media, Pixel Sprite, Diagram ja Map, renderöivät ensin aloitusversion ja päivittyvät sitä mukaa kuin malli kasvaa. Ohjaus (pickit, kommentit, Tweaks) pysyy myös livenä; uudet muistiinpanot jonoutuvat seuraavalle vuorolle sen sijaan, että ne keskeyttäisivät buildin.
Ennen kuin pääsivu on olemassa
Moninäyttöinen suunnitelma voi käyttää minuutteja tokenien, komponenttityylien ja jaettujen skriptien kirjoittamiseen ennen kuin pääsivu tallennetaan. Siihen asti esikatselualue näyttää build-kortin tyhjän kehyksen tai pohjan esimerkkisisällön sijaan:
- Design so far on ylimpänä. Heti kun agentti tallentaa design-suunnitelmansa, kortti piirtää sen suunnitelman omilla tokeneilla: todellisen otsikon ja ensisijaisen toiminnon, osiot järjestyksessä, sen yhden rohkean hetken ja agentin luonnoksen ensimmäisestä näytöstä. Sen jälkeen tulee esimerkkinäyttö jokaisessa teemassa, sitten paletti, fontit ja komponentit (painikkeet, kortit, chipit, syöttökentät, kytkimet) koottuina tyylitiedostoista, jotka agentti on tallentanut. Osio on merkitty esimerkiksi, ei agentin kirjoittamaksi näytöksi, ja kortti kasvaa sisällön mukaan, joten pitkä suunnitelma luetaan ylhäältä alas ilman toista vierityspalkkia.
- Build so far listaa tämän ajon aikana kirjoitetut tiedostot uusin ensin, kokoineen ja ikineen, sekä rivin, joka kertoo, onko pääsivu vielä kirjoittamatta, yhä pohjan aloitusversio vai kirjoitettu ja latautumassa.
- Pitkässä ajossa huomautus lisää, että pitkät buildit ovat tavallisia moninäyttöisille suunnitelmille.
Uudessa verkkosivustossa pohjan paikkamerkkisivu pysyy piilossa ensimmäisen buildin ajan. Tokenien tai tyylitiedostojen kirjoittamista ei lasketa aloitukseksi; kortti pysyy näkyvissä, kunnes agentti kirjoittaa uudelleen nimenomaan pääsivun, ja kertoo sen: sivu on yhä pohjan paikkamerkki, ei sinun suunnitelmasi. Editoripohjat (sprite, character, 3D part, diagram, map) ovat poikkeus — niiden pääsivu on editori, joten mikä tahansa suunnitelmatiedosto tuo esikatselun silti esiin.
Kortti näyttää suunnitelman, ei koskaan lähdekoodia — siinä ei ole prosentteja eikä aika-arvioita, vain se, mitä agentti on oikeasti tallentanut.
Jos tallennettu sivu latautuu mutta ei koskaan yhdisty esikatseluun (esimerkiksi koska jokin sen skripteistä kaatui varhain), esikatselu näyttää sen sellaisenaan kahden sekunnin jälkeen huomautuksella "Showing the saved page — it hasn't answered the preview bridge, so picking and comments wait." (Näytetään tallennettu sivu — se ei ole vastannut preview bridgelle, joten poiminta ja kommentit odottavat.) Esikatselu päivittyy silti myöhemmillä tallennuksilla.
Vinkki: Tarkista puhelinviewport ennen kuin julistat tuloksen valmiiksi — gate tekee sen. Navigaatio, joka toimii työpöytäleveydellä mutta päättyy umpikujaan mobiilissa, on ylivoimaisesti yleisin FAIL.