En aquesta secció, explorarem les eines i funcions bàsiques de Figma que et permetran començar a crear dissenys de manera eficient. Aquestes eines són fonamentals per a qualsevol projecte de disseny i prototipatge.
- Eines de Selecció i Moviment
- Eina de Selecció (V): Permet seleccionar i moure objectes dins del teu disseny. Pots seleccionar múltiples objectes mantenint premuda la tecla
Shift
mentre fas clic. - Eina de Mà (H): Utilitzada per desplaçar-te pel llenç sense modificar els objectes. Pots activar-la temporalment mantenint premuda la barra espaiadora.
- Eines de Dibuix
- Eina de Marc (F): Crea marcs que actuen com a contenidors per a altres elements. Els marcs són essencials per organitzar el teu disseny.
- Eina de Forma (R, O, L): Inclou rectangles (R), cercles (O) i línies (L). Aquestes formes bàsiques són els blocs de construcció del teu disseny.
- Eina de Ploma (P): Permet dibuixar formes personalitzades amb corbes i línies rectes. És ideal per a dissenys més complexos.
- Eines de Text
- Eina de Text (T): Crea caixes de text per afegir tipografia al teu disseny. Pots ajustar la mida, el color i l'estil del text des del panell de propietats.
- Eines de Transformació
- Escala (K): Permet redimensionar objectes de manera proporcional o no proporcional. Pots mantenir premuda la tecla
Shift
per escalar proporcionalment. - Rotació: Pots rotar objectes seleccionant-los i arrossegant el punt de rotació que apareix al voltant de l'objecte.
- Panell de Propietats
El panell de propietats és on pots ajustar les característiques dels objectes seleccionats, com ara:
- Color de Fons i Traç: Defineix el color de fons i el traç dels objectes.
- Opacitat: Ajusta la transparència dels objectes.
- Efectes: Afegeix ombres, difuminats i altres efectes visuals.
Exemple Pràctic
A continuació, et mostrem un exemple pràctic de com utilitzar aquestes eines per crear un disseny senzill:
1. Crea un nou marc (F) de 800x600 píxels. 2. Dibuixa un rectangle (R) dins del marc i ajusta el seu color de fons a blau. 3. Afegeix un cercle (O) al centre del rectangle i canvia el seu color a blanc. 4. Utilitza l'eina de text (T) per afegir un títol al disseny. 5. Ajusta la mida i l'estil del text des del panell de propietats.
Exercici Pràctic
Objectiu: Crea un disseny simple utilitzant les eines bàsiques de Figma.
- Crea un marc de 1024x768 píxels.
- Dibuixa un rectangle que ocupi la meitat inferior del marc i canvia el seu color a gris clar.
- Afegeix un cercle a la part superior del marc i canvia el seu color a taronja.
- Afegeix un text al centre del cercle amb el contingut "Benvingut a Figma".
- Ajusta la mida del text perquè sigui clarament visible.
Solució:
- Assegura't que el rectangle i el cercle estiguin centrats dins del marc.
- Utilitza el panell de propietats per ajustar els colors i l'estil del text.
- Experimenta amb l'opacitat i els efectes per donar més profunditat al disseny.
Conclusió
Ara que has après a utilitzar les eines i funcions bàsiques de Figma, estàs preparat per començar a crear dissenys més complexos. Aquestes habilitats són fonamentals per a qualsevol projecte de disseny i et serviran de base per als temes més avançats que veurem en els següents mòduls.
Prototipatge amb Figma
Mòdul 1: Introducció a Figma
- Començant amb Figma
- Comprendre la Interfície de Figma
- Eines i Funcions Bàsiques
- Creant el Teu Primer Marc
Mòdul 2: Dissenyant a Figma
- Treballant amb Formes i Text
- Utilitzant Colors i Estils
- Creant i Gestionant Components
- Utilitzant Graelles i Dissenys
Mòdul 3: Tècniques de Prototipatge Intermedi
- Introducció al Prototipatge
- Creant Components Interactius
- Utilitzant Superposicions i Transicions
- Prototipatge amb Variants
Mòdul 4: Tècniques de Prototipatge Avançades
- Tècniques d'Animació Avançades
- Utilitzant Plugins de Figma per al Prototipatge
- Disseny Col·laboratiu i Feedback
- Proves i Iteració de Prototips