Si no coneixes Figma, és el moment que et comptem una mica més sobre aquest programa. Es tracta d’un programari amb el qual pots desenvolupar un projecte web amb totes les eines que imagines, ideal per a treballs col·laboratius. Hui t’expliquem els passos bàsics per a realitzar un disseny web amb Figma des de zero.
Dissenya una web amb Figma pas a pas
1. Crea un nou projecte
El primer que has de fer és crear un arxiu nou a través del botó Drafts i donar-li un nom al teu projecte. Podràs modificar alguns paràmetres, que et permetran adequar la taula de treball segons les necessitats que vages a tindre més endavant.
2. Prepara un frame sobre el qual treballar
En els botons superiors trobaràs un marc (amb una forma semblant al coixinet #) i ací podràs crear un frame. Podràs triar entre diferents formats adaptats a les pantalles i formes de visualització d’una pàgina web, des de telèfons mòbils fins al mateix ordinador.
D’igual forma, podràs crear un marc a la teua mesura triant les dimensions que preferisques, sense necessitat de lligar-te a aquests models predeterminats. Abans de posar-te a treballar, et recomanem que marques amb unes guies que delimiten la zona de seguretat del teu projecte, l’espai en el qual saps que es veurà perfectament el que inclogues sense importar el dispositiu que el reproduïsca.
3. Introdueix diferents elements funcionals
Un dels grans avantatges que té Figma és que resulta molt intuïtiu i visual per a treballar amb ell, per la qual cosa et serà senzill dissenyar una pàgina web en pocs passos. Veuràs com, a poc a poc, aconsegueixes conformar un site que va cobrant vida alhora que treballes sobre ell.
Per descomptat, l’organització ha de ser un must en el teu projecte. Mantingues tots els elements que utilitzes sota control, i organitza correctament les capes i objectes que apareguen en la interfície perquè es mostren correctament quan arribe el moment.
4. Aprofita els recursos de la comunitat Figma
Finalment, no t’oblides que Figma és una plataforma col·laborativa, i que pots trobar innombrables paquets i kits amb elements i dissenys que altres usuaris han realitzat. Emplena la teua biblioteca amb el teu estil favorit i sempre el tindràs a mà per a afegir-lo al teu projecte.
6 xicotets trucs per a fer més eficaç el disseny web amb Figma
1. Canvia ràpidament al Mode de contorns
Comencem amb un truc que t’ajudarà a visualitzar millor tota la taula de treball, fent més senzill el disseny web o qualsevol altre projecte.
Amb la drecera de tecles CTRL (o CMD) + I o CTRL (o CMD) + SHIFT + 3 podràs passar a la Mode de contorns perquè pugues treballar de manera més precisa.
2. Revela tots els objectes del projecte
A vegades ens costa trobar tot el que tenim “sobre la taula”, o realitzar una acció concreta sobre tots els elements.
Figma ens facilita això a través del comando CTRL + / o CMD + /, que ens presentarà un quadre de text en el qual podrem escriure el comando que ens agradaria aplicar sobre tots els objectes.
3. Dissenya i espacia les columnes fàcilment
Fer ús del snapping i la distribució d’elements t’ajudarà a crear un disseny més organitzat i visualment atractiu.
Selecciona tots els objectes que vulgues incloure en aquesta funció i veu a Main menu (Menú principal) > Arrange (Organitzar) > Distribute Horitzontal Spacing (Distribuir espai horitzontal); ja ho tens!
4. Esborra els grups de capes que estiguen buits
Una de les xicotetes funcionalitats de Figma que fan la vida més senzilla és la eliminació de les capes i grups de capes quan ja no hi ha elements en el seu interior. Sempre que esborres totes les subcapas o capes fill dins d’un projecte, també s’eliminarà la capa grupal. Això, sens dubte, ajuda al fet que tot quede més net i localitzable.
5. Elimina l’espai entre els elements
Si abans parlàvem de l’espaiat entre objectes per a crear columnes ben alineades, ara ens toca tornar a ajuntar tots els elements. De nou, selecciona tot el que vulgues agrupar i veu a Main menu (Menú principal) > Arrange (Organitzar) > Pack Horitzontal (Agrupació horitzontal) o Arrange (Organitzar) > Pack Vertical (Agrupació vertical).
6. Visualitza totes les dreceres disponibles
Per si encara necessites conéixer alguns trucs més de Figma, el millor és aprendre’t les dreceres de teclat que poden ajudar-te a ser més ràpid i eficient en el teu treball. Amb el signe d’interrogació de la cantonada inferior dreta de la pantalla pots desplegar totes les dreceres, però també fent ús d’un d’ells!: CTRL + SHIFT + / o CMD + SHIFT + /
Com veus, no és difícil fer un disseny web amb Figma. Només has de començar a poc a poc i anar fent evolucionar el teu projecte, fins que aconseguisques el que estàs buscant. I, si et sents perdut en algun moment, recorda que pots fer ús de la comunitat de Doowebs per a resoldre qualsevol dubte.Posa’t en contacte amb Doowebs, empresa de disseny web a València, per a aprofitar tot el potencial d’un disseny web amb Figma.