Mag-import sa Figma: Ginagawa ng Buddy ang Mga Larawan, HTML, disenyo ng Claude, mga prototype ng Claude, at Mga Website sa Mga Layer

Reading Time: 6 minutes

Hindi na nagsisimula ang gawaing disenyo sa isang lugar.

Minsan ang unang ideya ay isang Claude Design prototype. Minsan ito ay isang artifact ni Claude. Minsan ito ay isang HTML na eksperimento, isang screenshot, isang landing page na gusto mo, o isang live na website na gustong matutunan ng iyong team.

Ang problema ay hindi pagkuha ng AI o sa web upang lumikha ng isang bagay na kawili-wili. Ang problema ay ibalik ang ideyang iyon sa lugar kung saan aktwal na nangyayari ang disenyo ng produkto: Figma.

Hinahayaan ka ng Buddy na mag-import ng halos anumang bagay sa Figma at gawin itong mga nae-edit na layer ng disenyo sa canvas. Hindi isang naka-flatten na screenshot. Hindi isang static na reference na larawan. Mga totoong layer na maaari mong i-edit, ayusin, pinuhin, at ibigay.

Install Buddy Figma Agent →

Mag-import ng Anuman sa Figma gamit ang Buddy, pagkatapos ay magpatuloy sa pagdidisenyo sa Figma

Ang Buddy ay ang Anima na ahente ng disenyo ng Figma AI. Nakatira ito sa loob ng Figma, binabasa ang iyong canvas, at tinutulungan kang gumawa, mag-edit, at mag-ayos ng mga disenyo sa pamamagitan ng chat.

Ngayon, gumagana na rin ang Buddy bilang tulay sa pagitan ng inspirasyon sa labas at iyong daloy ng trabaho sa Figma. I-paste sa isang artifact, larawan, screenshot, HTML, o URL, at ginagawa ito ng Buddy sa mga nae-edit na Figma na mga layer upang maipagpatuloy mo ang proseso ng disenyo nang hindi manu-manong ibinabalik ang bawat frame.

Ibig sabihin maaari kang magsimula sa:

Claude Design artifact, kapag gusto mong magdala ng interface na binuo ng AI sa Figma.
Mga artifact ni Claude, kapag ang isang prototype, screen, o interactive na ideya ay ginawa sa Claude.
HTML artifact, kapag nagsimula ang disenyo mula sa nabuong HTML o isang naka-code na mockup.
Mga larawan at screenshot, kapag gusto mong mag-paste ng visual na sanggunian at makakuha ng mga nae-edit na Figma na layer.
Website URLs, kapag gusto mong i-clone ang isang pampublikong website sa Figma bilang isang disenyo maaari mong suriin at i-remix.

Ang daloy ng trabaho ay simple: dalhin ang pinagmulan sa Buddy, hayaan ang Anima na bigyang-kahulugan ang visual na istraktura, pagkatapos ay ipagpatuloy ang pagdidisenyo nang direkta sa Figma canvas.

Bakit ito mahalaga: Binibigyan ka ng AI ng unang draft, binibigyan ka ng Figma ng kontrol

Ang mga tool ng AI ay napakahusay sa pagbuo ng mga unang draft. Maaari silang gumawa ng mga konsepto ng app, landing page, dashboard, onboarding flow, page ng pagpepresyo, internal na tool, at eksperimento ng produkto sa ilang minuto.

Ngunit ang gawaing propesyonal na disenyo ay hindi nagtatapos sa unang draft. Ito ay karaniwang nagsisimula doon.

Kailangan pa rin ng mga team na i-edit ang kopya, ayusin ang hierarchy, ilapat ang brand, ihanay ang spacing, gumamit ng mga bahagi, suriin ang mga gilid na case, at maghanda ng file na maaaring aktwal na gamitin ng ibang mga designer, PM, at engineer.

Kaya naman mahalaga ang import. Kung ang isang ideyang binuo ng AI ay mananatiling naka-lock sa loob ng isang chat window, artifact viewer, screenshot, o tab ng browser, mahirap na maging isang tunay na daloy ng trabaho sa disenyo ng produkto.

Ibinabalik ng Buddy ang gawaing iyon sa Figma bilang mga nae-edit na layer, kaya ang output ng AI ay nagiging isang bagay na maaaring hubugin ng iyong team.

Mag-import ng Claude Design artifact sa Figma

Ang Claude Design ay mahusay para sa mabilis na pagtuklas ng mga ideya sa UI at mga interactive na konsepto. Maaari mong ilarawan ang isang produkto, feature, o landing page at makakuha ng pinakintab na artifact nang mabilis.

Ngunit kung ang susunod na hakbang ay pagsusuri sa disenyo, pagpapaganda ng tatak, o handoff, karaniwang kailangan ng iyong team ang resulta sa Figma.

Sa Buddy, maaari kang magdala ng Claude Design artifact sa Figma at magpatuloy mula doon. Nililikha muli ng Buddy ang interface bilang mga nae-edit na layer, upang maisaayos mo ang layout, typography, mga kulay, espasyo, mga icon, at nilalaman sa canvas.

Kapaki-pakinabang ito kapag ang isang founder, PM, marketer, o engineer ay gumawa muna ng AI prototype, pagkatapos ay gusto ng isang designer na gawin itong production-quality.

Mag-import ng mga artifact at AI prototype ni Claude

Ang mga artifact ni Claude ay maaaring magsama ng higit sa isang screen. Maaari silang maglaman ng mga estado, panel, menu, form, talahanayan, card, walang laman na estado, at buong konsepto ng UI.

Sa halip na manual na kumuha ng mga screenshot at subaybayan ang disenyo, i-paste ang artifact sa Buddy. Ginagawa ito ng Anima na isang structured na disenyo ng Figma na maaaring i-edit ng iyong team.

Kapag nasa canvas na ito, maaari mong:

Paghiwalayin ang mga screen sa mga frame.
I-edit ang teksto at kopya ng produkto.
Pinuhin ang espasyo at hierarchy.
Palitan ang mga generic na visual ng mga asset ng brand.
Ilapat ang iyong sistema ng disenyo.
Ihanda ang disenyo para sa pagsusuri o handoff ng engineering.

Ang AI prototype ay nagiging panimulang punto, hindi isang dead end.

Mag-import ng HTML artifact sa Figma

Maraming mga tool sa AI ang bumubuo ngayon ng HTML bilang output ng kanilang disenyo. Iyon ay maaaring maging kapaki-pakinabang para sa mabilis na mga preview, ngunit ang HTML ay hindi palaging ang pinakamagandang lugar upang suriin ang disenyo ng produkto.

Kailangan ng mga taga-disenyo ang kontrol ng canvas. Kailangan nilang ilipat ang mga layer, ihambing ang mga opsyon, suriin ang hierarchy, at ihanay ang trabaho sa isang sistema ng disenyo.

Tumutulong ang Buddy sa pamamagitan ng pagbabalik ng mga artifact ng HTML sa Figma. Magagamit mo ang HTML na output bilang source, pagkatapos ay gawin itong mga nae-edit na Figma na layer na maaaring linisin, muling ayusin, at pulido.

Ito ay partikular na kapaki-pakinabang para sa mga koponan na prototype muna sa code, pagkatapos ay nangangailangan ng isang maayos na file ng disenyo para sa pakikipagtulungan.

Mag-paste ng larawan o screenshot at kumuha ng mga nae-edit na Figma layer

Ang mga screenshot ay nasa lahat ng dako sa paggawa ng produkto.

Nagpapadala ang isang user ng screenshot ng isang daloy na gusto nila. Ang isang kasamahan sa koponan ay nagbabahagi ng isang pahina ng katunggali. Ang isang PM ay nag-drop ng isang magaspang na ideya sa UI sa Slack. Nag-sketch ang isang founder ng landing page gamit ang isa pang AI tool.

Karaniwan, ang screenshot na iyon ay isang sanggunian lamang. Maaari mo itong ilagay sa Figma, ngunit kailangan mo pa ring i-rebuild nang manu-mano ang UI kung gusto mo itong i-edit.

Sa Buddy, maaari kang mag-paste ng larawan o screenshot at gawin itong mga nae-edit na Figma na layer. Ang teksto, layout, visual na istraktura, at mga elemento ng UI ay nagiging isang bagay na maaari mong gamitin sa canvas.

Nai-save niyan ang pinakanakakainis na bahagi ng proseso: muling likhain kung ano ang mayroon na para lang makagawa ka ng mga pagbabago.

I-clone ang anumang website sa pamamagitan ng pag-paste ng URL

Ang inspirasyon sa website ay isa sa mga pinakakaraniwang panimulang punto para sa bagong produkto at gawain sa marketing.

Marahil ay gusto mo ang istraktura ng isang homepage ng SaaS. Baka gusto mong mag-aral ng page ng pagpepresyo. Marahil ay kailangan mong kumuha ng layout ng dashboard, onboarding flow, o seksyon ng landing page.

Sa Buddy, maaari mong i-paste ang isang website na URL at dalhin ang pahina sa Figma bilang isang nae-edit na disenyo. Sa halip na mag-save ng screenshot, tinutulungan ka ng Buddy na muling likhain ang visual na istraktura bilang mga layer sa canvas.

Gamitin ito upang matuto mula sa mga pattern, galugarin ang mga alternatibo, bumuo ng mga moodboard, o pabilisin ang unang bersyon ng isang bagong page. Pagkatapos ay gawin mo ito gamit ang iyong kopya, mga bahagi, tatak, at kuwento ng produkto.

Ano ang makukuha mo sa Figma canvas

Ang pangunahing pagkakaiba ay editability.

Ang Buddy ay hindi lamang naglalagay ng bitmap sa canvas. Ang layunin ay bigyan ka ng isang magagawang disenyo ng Figma na maaaring i-edit, suriin, at pagbutihin.

Pagkatapos mag-import, maaari kang magpatuloy sa normal na gawaing Figma:

Direktang i-edit ang text.
Ilipat at palitan ang laki ng mga layer.
Ayusin ang mga kulay, font, spacing, at hierarchy.
Ayusin ang mga frame at mga seksyon.
Ilapat ang Auto Layout kung saan kinakailangan.
Palitan ang mga magaspang na elemento ng mga tunay na sangkap.
Ihanay ang resulta sa iyong sistema ng disenyo.

Iyon ang punto ng Buddy: bilis nang hindi nawawala ang kontrol.

Isang mas mahusay na daloy ng trabaho para sa AI-generated na disenyo

Ang lumang daloy ng trabaho ay ganito ang hitsura:

Bumuo ng ideya sa isang AI tool.
Kumuha ng mga screenshot.
I-paste ang mga screenshot sa Figma.
Manu-manong muling itayo ang disenyo mula sa simula.
Simulan ang aktwal na gawaing disenyo.

Ang daloy ng trabaho ng Buddy ay mas maikli:

Gumawa o hanapin ang pinagmulan: artifact, HTML, larawan, screenshot, o URL.
I-paste ito sa Buddy.
Kumuha ng mga nae-edit na Figma na layer.
Ipagpatuloy ang pagdidisenyo sa canvas.

Mahalaga ito dahil mas maraming koponan ang nagsisimula sa AI at inspirasyon sa web, ngunit kailangan pa rin nila ng isang propesyonal na daloy ng trabaho sa disenyo. Ang Buddy ay nag-uugnay sa mga mundong iyon.

Para kanino ito?

Ang Mag-import ng Anuman sa Buddy ay kapaki-pakinabang para sa sinumang kailangang gumalaw nang mabilis nang hindi nawawala ang workflow ng Figma.

Mga taga-disenyo maaaring gawing nae-edit na mga panimulang punto ang mga output at screenshot ng AI.
Mga PM maaaring magdala ng mga artifact o website ng Claude sa Figma para sa mas malinaw na mga talakayan sa produkto.
Mga tagapagtatag maaaring lumipat mula sa ideya patungo sa disenyo ng file nang hindi muling itinatayo ang lahat nang manu-mano.
Mga marketer maaaring i-clone ang inspirasyon ng landing page at iakma ito sa kanilang brand.
Mga inhinyero maaaring magprototype sa HTML o AI tool, pagkatapos ay ibalik ang resulta sa disenyo.

Hindi ito tungkol sa pagpapalit ng disenyo. Ito ay tungkol sa pag-alis ng nakakainip na gawaing muling pagtatayo sa pagitan ng isang ideya at isang nae-edit na canvas.

Subukang i-import ang iyong susunod na ideya sa Buddy

Ang susunod na mahusay na screen ng produkto ay maaaring magsimula sa Claude Design, isang Claude artifact, isang nabuong HTML prototype, isang screenshot, o isang website na URL.

Sa Buddy, ang panimulang puntong iyon ay maaaring maging isang nae-edit na disenyo ng Figma sa iyong kasalukuyang daloy ng trabaho.

I-paste ito sa Buddy, kunin ang mga layer sa canvas, at magpatuloy sa pagdidisenyo.