Editor de llenç
El llenç d'edició de maquetes és on dissenyes i refines les teves pantalles. La barra lateral esquerra conté totes les eines de dibuix i selecció, el centre és el llenç on col·loces i organitzes els elements, i la barra lateral dreta mostra les propietats de l'element seleccionat.
Eines
Selecciona
Fes clic per seleccionar i moure els elements al llenç. Els elements seleccionats mostren les seves propietats a la barra lateral dreta.
Quadrat
Dibuixa elements de contenidor rectangular al llenç.
Cercle
Dibuixa elements circulars al llenç.
Text
Afegeix etiquetes de text i blocs de contingut.
Imatge
Col·loca elements de marcador de posició d'imatge.
Botó
Afegeix elements de botó interactius.
Entrada
Afegeix camps d'input de formulari.
+ (Afegeix pantalla)
Afegeix una nova pantalla al projecte de maquetes.
Elements bloquejats
El llenç de flux de pantalla et permet organitzar el teu treball d'enginyeria inversa en grups. Cada grup pot contenir múltiples imatges de pantalla i es pot tipificar com a Pantalla (pàgines, seccions o vistes principals) o Modal (superposicions, diàlegs, finestres emergents, calaixos). Fes doble clic a un grup per obrir-lo i treballar amb les seves imatges.
Mode de storyboard
El mode de storyboard et permet veure tots els teus fotogrames i els seus punts de connexió en una vista general. Alterna entre el llenç d'una sola pantalla i el mode de storyboard utilitzant el mateix botó a la barra lateral esquerra. En el mode de storyboard, cada pantalla es mostra com una targeta amb una previsualització del seu disseny.
Funcions del storyboard
Visió general del fotograma
Veu totes les pantalles d'un cop d'ull amb els seus recompte d'elements i previsualitzacions visuals.
Estableix el mode
Marca qualsevol pantalla com a superposició modal en lloc d'una pàgina completa.
Fes clic per editar
Fes clic a qualsevol targeta de fotograma per saltar a la vista del llenç per a l'edició detallada.
Controls de zoom
Utilitza els controls de zoom a l'esquerra per ampliar o reduir el storyboard.
Connexions de flux
Visualitza com les pantalles estan connectades mitjançant les accions de flux entre els fotogrames.
Propietats de l'element
Conjunt d'eines
Pestanya de propietats
Posició (X, Y)
Estableix la posició exacta en píxels de l'element al llenç.
Mida (amplada, alçada)
Estableix les dimensions de l'element en píxels.
Z-Index (ordre de les capes)
Controla quins elements apareixen a la part superior.
Radi del contorn
Estableix l'arrodoniment de les cantonades amb un valor numèric o utilitza els presets Afilat, Arrodonit o Pastilla.
Contingut de text
Edita el text que es mostra a l'element.
Pestanya de colors
Personalitza els colors de fons, de contorn i de text de l'element seleccionat.
Fluxos
Els fluxos defineixen les accions i la navegació entre les pantalles. Un flux és una acció com ara navegar a una altra pàgina, obrir un modal o redirigir-se a una àrea diferent. Les petites icones d'enllaç al llenç indiquen quins elements tenen fluxos adjunts. Els fotogrames s'enllacen automàticament entre ells durant la generació per la IA, i també es creen les connexions de flux.
Configuració de fluxos
Obre la pestanya de flux
A la barra lateral dreta, vés a la pestanya de flux per veure les connexions existents o afegir-ne de noves.
Afegeix una connexió
Fes clic a Afegeix la primera connexió (o al botó +) per crear un flux nou. Tria una pantalla o un fotograma de destinació per connectar-hi.
Visualitza al llenç
Els elements connectats mostren una petita icona d'enllaç al llenç per indicar que tenen accions de flux.
Eina de selecció
Fes clic a l'element que vols afegir-hi un flux.
Connexions de bloqueig
Les maquetes es poden exportar, importar o utilitzar directament quan es creen projectes o dins del propi Hub de projectes. Això facilita passar d'un disseny de maquetes a un projecte funcional sense haver de recrear els dissenys manualment.
Edició per la IA
Fes clic al botó + a la part superior de la barra lateral per obrir el diàleg Crea un nou grup de blocs. Dona un nom al teu grup i tria un tipus d'actiu per categoritzar el tipus de contingut que contindrà.
Indicacions contextuals
Pantalla única
Quan edites una sola pantalla, la barra d'indicacions mostra "S'està editant 'Nom de la pantalla'" i els canvis de la IA s'apliquen només a aquesta pantalla.
Guion gràfic
Quan estàs en el mode de storyboard, la IA pot editar tots els fotogrames alhora o crear nous fotogrames utilitzant els fotogrames existents com a referència.
Llista de fitxers seleccionats
Utilitza la icona del micròfon a la barra d'indicacions per dictar les teves instruccions en lloc d'escriure-les.
Edició de la CLI
Fes clic a Edició de la CLI per obtenir un mode d'edició avançat amb més control sobre els canvis impulsats per la IA.
Exportació i integració
Fent clic a "Visualitza" a un bloc s'obre el modal de detall. La capçalera del modal mostra el nom del bloc i la insígnia del tipus d'actiu. A l'interior, pots canviar entre dues pestanyes: