Tuo Figma:ään: Buddy muuttaa kuvat, HTML, Claude-suunnittelun, Claude-prototyypit ja verkkosivustot tasoiksi6 min read

Suunnittelutyö ei enää ala yhdestä paikasta.

Joskus ensimmäinen idea on Claude Design-prototyyppi. Joskus se on Clauden artefakti. Joskus se on HTML-kokeilu, kuvakaappaus, rakastamasi aloitussivu tai toimiva verkkosivusto, josta tiimisi haluaa oppia.

Ongelmana on, että tekoäly tai verkko ei saa luoda jotain mielenkiintoista. Ongelmana on saada idea takaisin paikkaan, jossa tuotesuunnittelu todella tapahtuu: Figma.

Buddy antaa sinun tuoda melkein mitä tahansa Figma:ään ja muuttaa sen muokattaviksi suunnittelutasoksiksi kankaalle. Ei litistetty kuvakaappaus. Ei staattinen viitekuva. Todellisia tasoja, joita voit muokata, järjestää, tarkentaa ja luovuttaa.

Tuo mitä tahansa Figma:ään Buddy:n avulla ja jatka sitten suunnittelua Figma:ssä

Buddy on Anima:n Figma AI -suunnitteluagentti. Se sijaitsee Figma:n sisällä, lukee kankaasi ja auttaa sinua luomaan, muokkaamaan ja järjestämään malleja chatin kautta.

Nyt Buddy toimii myös siltana ulkopuolisen inspiraation ja Figma-työnkulun välillä. Liitä artefakti, kuva, kuvakaappaus, HTML tai URL, ja Buddy muuttaa sen muokattaviksi Figma-tasoiksi, jotta voit jatkaa suunnitteluprosessia rakentamatta manuaalisesti jokaista kehystä.

Tämä tarkoittaa, että voit aloittaa seuraavista:

• Claude Design esineitä, kun haluat tuoda tekoälyn luoman käyttöliittymän Figma:ään.
• Clauden esineitä, kun prototyyppi, näyttö tai interaktiivinen idea luotiin Claudessa.
• HTML esineitä, kun suunnittelu alkaa generoidusta HTML:stä tai koodatusta mallista.
• Kuvia ja kuvakaappauksia, kun haluat liittää visuaalisen viittauksen ja saada muokattavat Figma-tasot.
• Verkkosivusto URLs, kun haluat kloonata julkisen verkkosivuston Figma-muotoon, voit tarkastella ja miksata uudelleen.

Työnkulku on yksinkertainen: tuo lähde Buddy:ään, anna Anima:n tulkita visuaalista rakennetta ja jatka sitten suunnittelua suoraan Figma-kankaalle.

Miksi tällä on väliä: AI antaa sinulle ensimmäisen luonnoksen, Figma antaa sinulle hallinnan

AI-työkalut ovat erittäin hyviä luomaan ensimmäisiä luonnoksia. He voivat luoda sovelluskonsepteja, aloitussivuja, hallintapaneeleja, käyttöönottokulkuja, hinnoittelusivuja, sisäisiä työkaluja ja tuotekokeita muutamassa minuutissa.

Mutta ammattimainen suunnittelutyö ei lopu ensimmäiseen luonnokseen. Siitä se yleensä alkaa.

Tiimien on vielä muokattava kopiota, korjattava hierarkia, käytettävä tuotemerkkiä, kohdistettava välit, käytettävä komponentteja, tarkasteltava reunatapauksia ja laadittava tiedosto, jonka kanssa muut suunnittelijat, PM:t ja insinöörit voivat työskennellä.

Siksi tuonti on tärkeää. Jos tekoälyn luoma idea pysyy lukittuna chat-ikkunassa, artefaktien katseluohjelmassa, kuvakaappauksessa tai selaimen välilehdessä, sitä on vaikea muuttaa todelliseksi tuotesuunnittelun työnkuluksi.

Buddy tuo työn takaisin Figma:ään muokattavissa olevina tasoina, joten AI-tuloksesta tulee jotain, jota tiimisi voi muokata.

Tuo Claude Design artefaktit Figma:ään

Claude Design on erinomainen käyttöliittymäideoiden ja interaktiivisten konseptien nopeaan tutkimiseen. Voit kuvailla tuotetta, ominaisuutta tai aloitussivua ja saada nopeasti viimeistellyn artefaktin.

Mutta jos seuraava vaihe on suunnittelun tarkistus, brändin hienosäätö tai kanavanvaihto, tiimisi tarvitsee yleensä tuloksen Figma:ssä.

Buddy:n avulla voit tuoda Claude Design-artefaktin Figma:ään ja jatkaa sieltä. Buddy luo käyttöliittymän uudelleen muokattaviksi tasoiksi, joten voit säätää asettelua, typografiaa, värejä, väliä, kuvakkeita ja sisältöä kankaalle.

Tästä on hyötyä, kun perustaja, pääministeri, markkinoija tai insinööri luo ensin tekoälyprototyypin ja sitten haluaa suunnittelijan tekevän siitä tuotantolaatuista.

Tuo Claude-esineitä ja tekoälyn prototyyppejä

Claude-esineet voivat sisältää useamman kuin yhden näytön. Ne voivat sisältää tiloja, paneeleja, valikoita, lomakkeita, taulukoita, kortteja, tyhjiä tiloja ja täydellisiä käyttöliittymäkonsepteja.

Sen sijaan, että ottaisit manuaalisesti kuvakaappauksia ja jäljittäisit mallia, liitä artefakti Buddy:ään. Anima muuttaa sen jäsennellyksi Figma-malliksi, jota tiimisi voi muokata.

Kun se on kankaalle, voit:

• Erottele näytöt kehyksiin.
• Muokkaa tekstiä ja tuotekopiota.
• Tarkenna välilyöntejä ja hierarkiaa.
• Korvaa yleiset visuaalit brändisisällöillä.
• Käytä suunnittelujärjestelmääsi.
• Valmistele suunnittelu tarkistusta tai suunnittelua varten.

Tekoälyprototyypistä tulee lähtökohta, ei umpikuja.

Tuo HTML artefaktit Figma:ään

Monet tekoälytyökalut luovat nyt HTML:n suunnittelutulokseen. Siitä voi olla hyötyä nopeissa esikatseluissa, mutta HTML ei ole aina paras paikka arvioida tuotesuunnittelua.

Suunnittelijat tarvitsevat kanvashallintaa. Heidän täytyy siirtää tasoja, vertailla vaihtoehtoja, tarkastaa hierarkia ja kohdistaa työ suunnittelujärjestelmän kanssa.

Buddy auttaa tuomalla HTML artefaktit takaisin Figma:ään. Voit käyttää HTML-lähtöä lähteenä ja muuttaa sen sitten muokattaviksi Figma-tasoksiksi, jotka voidaan puhdistaa, järjestää uudelleen ja kiillottaa.

Tämä on erityisen hyödyllistä tiimeille, jotka ensin protokirjoittavat koodin ja tarvitsevat sitten kunnollisen suunnittelutiedoston yhteistyötä varten.

Liitä kuva tai kuvakaappaus ja hanki muokattavat Figma-tasot

Kuvakaappauksia on kaikkialla tuotetyössä.

Käyttäjä lähettää kuvakaappauksen virtauksesta, josta hän pitää. Joukkuekaveri jakaa kilpailijasivun. Pääministeri pudottaa karkean käyttöliittymäidean Slackiin. Perustaja luonnostelee aloitussivun toisella tekoälytyökalulla.

Yleensä tämä kuvakaappaus on vain viittaus. Voit sijoittaa sen Figma:ään, mutta sinun on silti rakennettava käyttöliittymä manuaalisesti uudelleen, jos haluat muokata sitä.

Buddy:n avulla voit liittää kuvan tai kuvakaappauksen ja muuttaa sen muokattaviksi Figma-tasoksiksi. Tekstistä, asettelusta, visuaalisesta rakenteesta ja käyttöliittymäelementeistä tulee jotain, jonka kanssa voit työskennellä kankaalla.

Tämä säästää prosessin ärsyttävimmän osan: jo olemassa olevan uudelleen luomisen, jotta voit tehdä muutoksia.

Kloonaa mikä tahansa verkkosivusto liittämällä URL

Verkkosivuston inspiraatio on yksi yleisimmistä uusien tuotteiden ja markkinointityön lähtökohdista.

Ehkä pidät SaaS-kotisivun rakenteesta. Ehkä haluat tutkia hintasivua. Sinun on ehkä tallennettava kojelaudan asettelu, käyttöönottoprosessi tai aloitussivuosio.

Buddy:n avulla voit liittää verkkosivuston URL ja tuoda sivun Figma:ään muokattavana mallina. Kuvakaappauksen tallentamisen sijaan Buddy auttaa sinua luomaan visuaalisen rakenteen uudelleen tasoina kankaalle.

Käytä sitä oppiaksesi malleista, tutkiaksesi vaihtoehtoja, rakentaaksesi tunnelmatauluja tai nopeuttaaksesi uuden sivun ensimmäistä versiota. Tee siitä sitten omasi kopiollasi, komponenteillasi, brändilläsi ja tuotetarinallasi.

Mitä saat Figma-kankaalle

Tärkein ero on muokattavuus.

Buddy ei ole vain bittikartan asettamista kankaalle. Tavoitteena on tarjota sinulle toimiva Figma-design, jota voidaan muokata, tarkistaa ja parantaa.

Tuonnin jälkeen voit jatkaa normaalia Figma-työtä:

• Muokkaa tekstiä suoraan.
• Siirrä tasoja ja muuta niiden kokoa.
• Säädä värejä, fontteja, välilyöntejä ja hierarkiaa.
• Järjestä kehyksiä ja osia.
• Käytä automaattista asettelua tarvittaessa.
• Korvaa karkeat elementit oikeilla komponenteilla.
• Kohdista tulos suunnittelujärjestelmäsi kanssa.

Se on Buddy:n tarkoitus: nopeus menettämättä hallintaa.

Parempi työnkulku tekoälyn luomaan suunnitteluun

Vanha työnkulku näytti tältä:

1. Luo idea tekoälytyökalulla.
2. Ota kuvakaappauksia.
3. Liitä kuvakaappaukset Figma:ään.
4. Rakenna suunnittelu uudelleen manuaalisesti tyhjästä.
5. Aloita varsinainen suunnittelutyö.

Buddy-työnkulku on lyhyempi:

1. Luo tai etsi lähde: artefakti, HTML, kuva, kuvakaappaus tai URL.
2. Liitä se Buddy:ään.
3. Hanki muokattavat Figma-tasot.
4. Jatka suunnittelua kankaalle.

Tällä on merkitystä, koska yhä useammat tiimit aloittavat tekoäly- ja verkkoinspiraatiosta, mutta he tarvitsevat silti ammattimaisen suunnittelutyönkulun. Buddy yhdistää nämä maailmat.

Kenelle tämä on tarkoitettu?

Tuo mitä tahansa Buddy:ään on hyödyllinen kaikille, jotka haluavat liikkua nopeasti menettämättä Figma-työnkulkua.

• Suunnittelijat voi muuttaa AI-lähdöt ja kuvakaappaukset muokattaviksi aloituspisteiksi.
• PM voi tuoda Claude-esineitä tai verkkosivustoviittauksia Figma:ään selventääkseen tuotekeskusteluja.
• Perustajat voi siirtyä ideasta suunnittelutiedostoon rakentamatta kaikkea uudelleen manuaalisesti.
• Markkinoijat voivat kloonata aloitussivun inspiraation ja mukauttaa sen brändiinsä.
• Insinöörit voi prototyyppiä HTML- tai AI-työkaluilla ja antaa sitten tuloksen takaisin suunnitteluun.

Kyse ei ole suunnittelun korvaamisesta. Kyse on tylsän rekonstruktiotyön poistamisesta idean ja muokattavan kankaan väliltä.

Kokeile tuoda seuraava ideasi Buddy:ään

Seuraava loistava tuotenäyttö saattaa alkaa Claude Design:stä, Claude-artefaktista, luodusta HTML-prototyypistä, kuvakaappauksesta tai verkkosivustosta URL.

Buddy:n avulla tästä aloituspisteestä voi tulla muokattava Figma-muotoilu olemassa olevaan työnkulkuusi.

Liitä se Buddy:ään, hanki kerrokset kankaalle ja jatka suunnittelua.