Editor ng Canvas
Ang canvas ng pag-edit ng wireframe ay kung saan mo idinisenyo at pinipino ang iyong mga screen. Ang kaliwang sidebar ay naglalaman ng lahat ng mga tool sa pagguhit at pagpili, ang gitna ay ang canvas kung saan mo inilalagay at inaayos ang mga elemento, at ang kanang sidebar ay nagpapakita ng mga katangian ng napiling elemento.
Mga Tool
Piliin
I-click upang piliin at ilipat ang mga elemento sa canvas. Ang mga napiling elemento ay nagpapakita ng kanilang mga katangian sa kanang sidebar.
Parisukat
Gumuhit ng mga hugis-parihaba na elemento ng lalagyan sa canvas.
Bilog
Gumuhit ng mga bilog na elemento sa canvas.
Teksto
Magdagdag ng mga label ng teksto at mga bloke ng nilalaman.
Larawan
Ilagay ang mga placeholder ng imahe.
Pindutan
Magdagdag ng mga interactive na elemento ng button.
Ilagay
Magdagdag ng mga field ng input ng form.
+ (Magdagdag ng Screen)
Magdagdag ng bagong screen sa proyekto ng wireframe.
Naka-lock na mga Elemento
Ang mga screen na nabuo ng AI ay naka-lock bilang default — ang mga elemento ay hindi maaaring ilipat o baguhin ang laki hanggang sa ma-unlock. Pindutin ang Ctrl + D upang i-unlock ang lahat ng mga elemento sa kasalukuyang screen, na nagbibigay sa iyo ng ganap na kontrol upang muling ayusin at i-edit ang mga ito.
Mode ng Storyboard
Pinapayagan ka ng storyboard mode na makita ang lahat ng iyong mga frame at mga punto ng koneksyon sa isang malawak na tanawin. Lumipat sa pagitan ng single-screen canvas at storyboard mode gamit ang parehong button sa kaliwang sidebar. Sa storyboard mode, ang bawat screen ay ipinapakita bilang isang card na may isang preview ng layout nito.
Mga Feature ng Storyboard
Pangkalahatang-ideya ng Frame
Tingnan ang lahat ng mga screen nang sabay-sabay na may kanilang mga bilang ng elemento at mga visual na preview.
Itakda ang Modal
Markahan ang anumang screen bilang isang modal overlay sa halip na isang buong pahina.
I-click upang I-edit
I-click ang anumang card ng frame upang tumalon sa view ng canvas nito para sa detalyadong pag-edit.
Mga Kontrol sa Pag-zoom
Gamitin ang mga kontrol sa pag-zoom sa kaliwa upang mag-zoom in/out sa storyboard.
Mga Koneksyon sa Daloy
I-visualize kung paano konektado ang mga screen sa pamamagitan ng mga daloy ng pagkilos sa pagitan ng mga frame.
Mga Katangian ng Elemento
I-double-click ang anumang elemento sa canvas upang ipasok ito at buksan ang panel ng mga katangian nito sa kanang sidebar. Ang panel ay may tatlong tab: Mga Katangian, Daloy, at Mga Kulay. Mula dito maaari mong i-edit ang posisyon, laki, istilo, at pag-uugali para sa bawat elemento.
Tab ng Mga Katangian
Posisyon (X, Y)
Itakda ang eksaktong posisyon ng pixel ng elemento sa canvas.
Sukat (Lapad, Taas)
Itakda ang mga dimensyon ng elemento sa mga pixel.
Z-Index (Order ng Layer)
Kontrolin kung aling mga elemento ang lilitaw sa itaas ng iba.
Radius ng Border
Itakda ang pag-ikot ng sulok na may isang numeric na halaga o gamitin ang mga preset na Matulis, Bilog, o Pill.
Nilalaman ng Teksto
I-edit ang teksto na ipinapakita sa loob ng elemento.
Tab ng Mga Kulay
I-customize ang background, border, at mga kulay ng teksto para sa napiling elemento.
Mga Daloy
Ang mga daloy ay nagtatakda ng mga pagkilos at pag-navigate sa pagitan ng mga screen. Ang isang daloy ay isang pagkilos tulad ng pag-navigate sa isa pang pahina, pagbubukas ng isang modal, o pagruta sa ibang lugar. Ang maliliit na icon ng link sa canvas ay nagpapahiwatig kung aling mga elemento ang may mga daloy na naka-attach. Ang mga frame ay awtomatikong iniuugnay sa isa't isa sa panahon ng pagbuo ng AI, at ang mga koneksyon ng daloy ay nilikha din.
Pag-set up ng mga Daloy
Piliin ang isang Elemento
I-click ang elemento na gusto mong idagdag sa isang daloy.
Buksan ang Tab ng Daloy
Sa kanang sidebar, lumipat sa tab ng Daloy upang makita ang mga umiiral na koneksyon o magdagdag ng mga bago.
Magdagdag ng Koneksyon
I-click ang Magdagdag ng Unang Koneksyon (o ang + button) upang lumikha ng isang bagong daloy. Pumili ng isang target na screen o frame upang ikonekta.
Tingnan sa Canvas
Ang mga konektadong elemento ay nagpapakita ng isang maliit na icon ng link sa canvas upang ipahiwatig na mayroon silang mga pagkilos ng daloy.
Mga Koneksyon sa Block
Mga Koneksyon sa Block ay nagbibigay-daan sa iyo na ikabit ang mga block mula sa Block Library nang direkta sa mga elemento ng wireframe. Kapag nag-double-click ka sa isang elemento at nag-scroll pababa sa panel ng mga katangian, makikita mo ang seksyon ng Mga Koneksyon sa Block. I-click ang + Magdagdag ng Block upang i-link ang isang block (HTML, component, o template) sa elemento. Ang mga konektadong block ay isinasangguni kapag bumubuo ng code gamit ang AI, na ginagawang madali upang ikabit ang partikular na HTML o code ng component sa mga elemento ng wireframe.
Pag-e-edit gamit ang AI
Ang AI prompt bar sa ibaba ng canvas ay nagbibigay-daan sa iyo na gumamit ng AI upang i-edit o lumikha ng mga screen. Piliin ang iyong AI model mula sa dropdown sa kaliwa, ilarawan ang mga pagbabago na gusto mo, at babaguhin ng AI ang wireframe para sa iyo. Maaari mo ring gamitin ang input ng boses o ang button na CLI Edit para sa advanced na pag-edit.
Pag-prompt na Nakabatay sa Konteksto
Iisang Screen
Kapag nag-e-edit ng isang screen, ipinapakita ng prompt bar ang "Pag-edit ng 'Pangalan ng Screen'" at ang mga pagbabago ng AI ay nalalapat lamang sa screen na iyon.
Storyboard
Kapag nasa storyboard mode, maaaring i-edit ng AI ang lahat ng mga frame nang sabay-sabay o bumuo ng mga bagong frame gamit ang mga umiiral na bilang sanggunian.
Mga Naka-attach na Larawan
Gamitin ang icon ng mikropono sa prompt bar upang diktahan ang iyong mga tagubilin sa halip na mag-type.
Pag-e-edit sa pamamagitan ng CLI
I-click ang CLI Edit para sa isang advanced na mode ng pag-edit na may higit na kontrol sa mga pagbabago na pinapagana ng AI.
Pag-export at Pagsasama
Ang mga Wireframe ay maaaring i-export, i-import, o direktang gamitin kapag lumilikha ng mga proyekto o sa loob ng mismong Project Hub. Ginagawa nitong madali upang pumunta mula sa disenyo ng wireframe hanggang sa isang gumaganang proyekto nang hindi manu-manong muling nililikha ang mga layout.