Fer que el vostre contingut es pugui desplaçar a Figma implica navegar per la pestanya lateral. Malauradament, no apareix automàticament a la interfície d'usuari principal. El contingut que es pot desplaçar és útil quan voleu presentar molta informació dins d'un marc del vostre disseny. Alguns exemples inclouen pàgines de destinació, interfícies d'aplicacions o finestres emergents.
Aquest article explicarà com fer que els vostres dissenys de Figma es puguin desplaçar.
Encaixar un text que es pot desplaçar dins d'una forma
Comencem fent un text desplaçable dins d'una forma senzilla. Aquest és l'exemple més comú de text desplaçable, i després podeu afegir altres propietats com el color, els tipus de lletra i els contorns.
Així és com es fa:
- Crea una forma bàsica. Per a aquest exemple, recomanem fer un rectangle vertical. Podeu fer-ho seleccionant l'eina rectangle a la barra lateral esquerra o utilitzant l'ordre 'R'. Mantingueu premut l'esquerra, feu clic a un punt del llenç i dibuixeu la forma.
- A la barra lateral dreta, sota la pestanya de disseny, marqueu al costat de l'opció 'contingut del clip'.
- Seleccioneu l'eina de text per crear un quadre de text i col·loqueu-lo dins del marc desplaçable. Escriviu o copieu i enganxeu qualsevol contingut que feu servir.
- Seleccioneu el marc i aneu a la pestanya del prototip a la part dreta de la vostra interfície. A continuació, seleccioneu l'opció 'desplaçament desbordant' i l'estil que preferiu. Aquí triarem 'desplaçament vertical'.
Un cop feu clic a l'opció de desplaçament de desbordament a la pestanya del prototip, hi ha diversos estils. Triem la vertical ja que estem utilitzant un rectangle vertical com a exemple. Això us permet llegir el text de dalt a baix. Alguns dels altres estils inclouen:
quan faig clic al menú d'inici no passa res
- Desplaçament horitzontal: els usuaris poden fer que el seu text es desplaça d'esquerra a dreta en alguns exemples. Aquesta opció és preferible si esteu creant dissenys en format paisatgístic.
- Sense desplaçament: si voleu bloquejar el contingut al seu lloc, trieu l'opció sense desplaçament.
- Ambdues direccions: creeu un disseny amb molt de contingut i desplaceu-vos tant verticalment com horitzontalment.
Hauríeu d'utilitzar funcions desplaçables dins del vostre disseny per minimitzar l'esforç (clics) que fa servir el vostre lector mentre interactua amb el contingut. Poden lliscar o utilitzar la roda del ratolí en lloc de fer clic o tocar tones de text.
Com dissenyar els vostres components desplaçables
Depenent del vostre producte, haureu de dissenyar el vostre marc de contingut i el propi contingut. El procés implica afegir color, tipus de lletra i, potencialment, altres components al disseny general. Canviar aquests elements és fàcil, però seleccionar l'estètica adequada requereix una consideració acurada.
Com canviar el tipus de lletra del vostre disseny desplaçable
El primer que haureu de fer és canviar el tipus de lletra del vostre disseny desplaçable. Figma ofereix una àmplia gamma d'estils per triar. Aquí teniu el mètode més senzill:
- Seleccioneu el contingut del marc desplaçable que voleu canviar.
- Navegueu al menú desplegable situat a la part superior esquerra i seleccioneu-lo.
- Desplaceu-vos pels tipus de lletra fins que trobeu el que voleu utilitzar.
Si la marca per a la qual esteu dissenyant té una tipografia determinada, és probable que en trieu la mateixa perquè sigui coherent amb la imatge de marca. Si teniu més marge de moviment, hauríeu d'experimentar amb diferents exemples abans de triar l'adequat.
Algunes consideracions inclouen:
- Intenció del disseny: l'elecció d'una tipografia hauria de coincidir amb la intenció del vostre disseny. Si voleu transmetre molta informació amb claredat, busqueu fonts menys decoratives però elegants.
- Altres components: el vostre tipus de lletra és un element visual com qualsevol altre del vostre disseny. Hauria de coincidir amb el marc i altres components que incloeu.
- Estètica general i marca: la sensació general de la marca també hauria d'influir en la font escollida. Per exemple, un servei de lliurament de flors no inclourà el mateix tipus de lletra que una pàgina de destinació SAAS.
Tot i que escollir la font correcta pot requerir una mica d'experimentació, alguns exemples concrets de tipus de lletra són les opcions més fiables:
- Roboto: si voleu jugar amb seguretat, feu servir Roboto. Es considera un tipus de lletra versàtil i neutre amb moltes aplicacions. Com que és tan fàcil d'entendre, molts trien Roboto per a instruccions i pàgines de destinació.
- Poppins: per a un atractiu amable però modern i net, trieu Poppins. Aquesta font és més arrodonida i fa que el text sigui atractiu i fàcil de llegir.
- Raleway: quan dissenyeu una marca de luxe sofisticada, potser voldreu considerar Raleway. En general, és prim, però té diferents variacions de pes i un aspecte general elegant.
- Lato: amable, fiable i seriós són les paraules adequades per descriure aquesta font. Els dissenyadors poden utilitzar Lato per a encapçalaments i textos de paràgrafs on la llegibilitat i la claredat són les principals preocupacions.
També voldreu tenir en compte la mida de la lletra i l'estil de text que trieu. Generalment, la negreta s'utilitza per als titulars o per emfatitzar els segments, mentre que la cursiva s'utilitza per a les cometes.
Canviar el color de la forma del marc
A més de canviar el tipus de lletra, també voldreu canviar el color de la forma del marc. Una vegada més, la tonalitat exacta dependrà de la marca per a la qual esteu dissenyant o de la vostra estètica. Afortunadament, la interfície de Figma facilita la selecció d'un color.
A continuació s'explica com podeu canviar els colors del marc:
- Seleccioneu el marc que voleu editar.
- La capa apareixerà a la barra lateral dreta. Aneu a la secció 'Omplir'.
- Seleccioneu el '+' per afegir un farciment.
- S'obrirà una finestra de selecció de colors. Seleccioneu el color de farciment i el degradat. També podeu escriure un codi hexadecimal si coneixeu la tonalitat exacta.
Igual que amb altres elements de disseny, és possible que hàgiu d'experimentar amb diferents colors i com es veuen amb la font escollida.
com eliminar la capçalera a Google Docs 2017
PMF
Hi ha una ordre de text desplaçable a Figma?
Malauradament, no hi ha cap ordre per fer que un text es pugui desplaçar dins de Figma. Tanmateix, podeu completar el procés amb només uns quants clics mitjançant el mètode esmentat anteriorment.
Com puc decidir quina opció de desbordament vull?
Això depèn del tipus de text que utilitzeu, del disseny general i de la seva funció. L'estil vertical acostuma a ser bo per repassar textos grans.
Quina interfície del dispositiu normalment necessitarà un disseny de text desplaçable?
Un bon exemple serien les maquetes de disseny d'una aplicació. Els usuaris poden crear un telèfon com a marc general, mentre que el text desplaçable pot ser la interfície de l'aplicació.
Figma és la millor opció per fer dissenys desplaçables?
Figma és una de les millors eines per fer una àmplia gamma de formularis, inclosos els dissenys desplaçables. Millor encara, Figma és gratis. Tanmateix, és possible que tingueu determinades preferències personals. Proveu d'experimentar amb algunes plataformes, com ara Adobe Illustrator, fins que trobeu l'eina més adequada per a vosaltres.
Feu que els vostres dissenys siguin desplaçables i fàcils d'usar
Fer qualsevol text dins d'un marc a Figma és fàcil. Simplement seleccioneu el marc i després aneu a l'opció de contingut del clip. Un cop completat, podeu triar les vostres opcions de desplaçament de desbordament. De la mateixa manera, no hauríeu de descuidar altres elements crucials del disseny, com ara el color i la forma del marc i la font del text. Fer que el vostre disseny es pugui desplaçar és una opció excel·lent per a pàgines de destinació, interfícies d'aplicacions i finestres emergents. Fa que els textos siguin més fàcils de navegar en comptes de fer clic, augmentant en última instància l'experiència de l'usuari.
Us ha semblat fàcil fer que el vostre contingut es pugui desplaçar a Figma? Què passa amb seleccionar el tipus de lletra adequat? Feu-nos-ho saber a la secció de comentaris a continuació.
