Dominar com anomenem capes, variables, components i tokens a Figma no és un caprici, és una necessitat pràctica. Un sistema de nomenclatura ben pensat accelera la feina, evita confusions i elimina friccions entre disseny i desenvolupament, especialment quan hi ha diverses persones editant els mateixos fitxers.
Si us dediqueu al disseny d'interfícies i busqueu elevar el vostre nivell, convé ordenar casa vostra des de l'arrel: quins noms s'usen, com s'estructuren i de quina manera es documenten. Al llarg d'aquesta guia trobaràs pràctiques contrastades, exemples clars i una proposta coherent per estandarditzar-ho tot a Figma, des del fitxer i la pàgina fins a la variable més petita de color o tipografia.
Fonaments: per què estandarditzar la nomenclatura a Figma
Abans d'entrar-ne al detall, cal recordar la base: un sistema de disseny és la font de la veritat d'un producte digital. És el conjunt de components i estils que defineix la identitat visual, l'accessibilitat i la coherència de la interfície, i Figma és el lloc on aquesta veritat es construeix, es publica i es consumeix.
Dins aquest sistema, les propietats i els seus valors són els maons que el sostenen. Colors, tipografies, espaiat, mides, efectes i estats requereixen una nomenclatura que sigui lògica, llegible i escalable per a tota l'organització, no només per a qui va dissenyar el primer component.
Amb una norma comuna s'eviten ambigüitats. Anomenar no consisteix a posar etiquetes boniques, sinó a crear una taxonomia que resisteixi el pas del temps i el creixement del producte, i que permeti que qualsevol persona de l'equip sàpiga què fer servir, on canviar-lo i com afecta els consumidors finals.
Organització de components i estils: patrons que funcionen
Una bona pràctica és que els noms expliquin la història de què és alguna cosa, com es comporta i on es fa servir. Això implica separar noms de rol semàntic de noms purament descriptius o d'aparença, i mantenir coherents entre si.
Per a components interactius, cal definir l'element i l'estat. Per exemple, un botó pot tenir estats base, hover, focus, pressed i disabled, i convé que el nom deixi clar el patró que seguirà tota la llibreria.
- Botons: utilitza una convenció consistent, com Boton Primari, Boton Secundari, Boton Tercari, i afegeix l'estat amb un sufix, per exemple Boton Primari — Hover.
- Icones: aposta per noms descriptius com Icona Correu, Icona Xarxes o Icona Buscar. Evita comodins genèrics que no expliquin res i que a llarga dificultin la cerca.
Si treballeu amb més d'un sistema o marca, diferencieu amb claredat l'àmbit. Primari i Secundari són etiquetes útils quan coexisteixen dos sistemes de disseny o dues paletes principals, i ajuden a mantenir la claredat a nivell de components i tokens.
La màgia de la nomenclatura no és només estètica; el seu efecte real és a la col·laboració. Quan disseny i desenvolupament comparteixen noms i estructura, la comunicació millora, els handoffs són més fluids i els errors es redueixen perquè qualsevol persona pot localitzar el recurs correcte a la primera.
Com aixecar i mantenir el teu design system a Figma
Establir el sistema de disseny en un fitxer dedicat aporta ordre i governança. Aquest fitxer ha de ser la referència per a les llibreries, els components mestres i els estils publicats, i convé que estigui protegit i versionat.
- Inventari inicial: llista els elements clau. Defineix la paleta base i les escales, la tipografia i els nivells, els patrons d'espaiat i els estils d'efectes.
- Arxiu mestre de sistema: crea un fitxer dedicat a Figma per al design system. Serà l'origen de components i estils, així com de la documentació.
- Components organitzats: agrupa per famílies (Botons, Formularis, Navegació, Feedback). Empra la nomenclatura consensuada i manté la jerarquia clara a Assets.
- Estils ben definits: publica estils de color, text, grid i efectes. Anomena els estils amb el mateix criteri que utilitzaràs en variables i tokens per evitar duplicitats.
- Documentació viva: afegeix pàgines de guia d'ús, exemples i pautes. Definiu què podeu editar, qui publica i com versionar canvis.
Tot això ha d'anar acompanyat de processos. És recomanable pactar un flux de publicació de llibreries, revisió per parells i un calendari de versions perquè els canvis es propaguin amb control i traçabilitat.
Design tokens i estàndards: del JSON a W3C i Style Dictionary
Els tokens de disseny són la representació mínima de decisions visuals i dinteracció en un format portable. Desar tokens a JSON s'ha convertit en pràctica comuna, i eines com Style Dictionary fan de pont cap a plataformes generant variables per a web, iOS o Android.
Ara bé, encara que hi ha consens a utilitzar JSON, no sempre n'hi ha com organitzar aquests JSON. Style Dictionary va popularitzar la taxonomia CTI (Category, Type, Item) per estructurar tokens, una cosa molt útil per filtrar i transformar en pipelins automatitzats.
Al juliol de 2023 es va publicar un esborrany rellevant del grup de treball de la W3C per estandarditzar el format de design tokens. Aquesta especificació proposa, entre altres coses, una propietat especial anomenada $type per categoritzar els tokens de manera explícita, distanciant-se de CTI en alguns aspectes.
Què implica això? Si exporteu tokens des de Figma amb la nova especificació i preteneu processar-los amb configuracions clàssiques de Style Dictionary, poden sorgir incompatibilitats a l'hora de filtrar o transformar perquè les regles esperen CTI. La bona notícia és que Style Dictionary és flexible: pots adaptar transformacions, filtres i formats per acoblar-te a l'estàndard emergent.
Mentre les guies oficials maduren, convé que l'estructura que adoptis tingui al cap els consumidors: traçabilitat de variables, claredat semàntica i compatibilitat amb les eines de build. Tingues present, a més, anàlisi de tercers i casos pràctics publicats per referents de la indústria (per exemple, propostes de taxonomia per a escales d'interfícies o experiències compartides per grans sistemes com Salesforce) per no reinventar la roda.
Nomenat de variables: colors i tipografia sense mals de cap
En molts equips es barregen noms com Blau Principal amb escales tipus Blau-500 i rols tipogràfics com Encapçalat Gran o Cos Regular. La forma més robusta de resoldre'l és separar capes: tokens base d'aparença i tokens semàntics d'intenció.
Colors. Defineix una paleta base per escales (per exemple, Blau 50, 100, 200, 300, 400, 500, 600, 700, 800, 900) i neutrals a part. Aquests són tokens base i mai no haurien d'usar-se directament en components si busques flexibilitat temàtica. A sobre, crea tokens semàntics com Color Fons Primari, Text Secundari o Vora Interactiva, que mapegen els base. Així, canviar un tema o una marca és mapeig, no cirurgia.
Per a estats, afegeix sufixos consistents: Hover, Focus, Active, Disabled i Selected són suficients per cobrir la majoria de casos. Si necessites contrast accessible, considera variants Alt Contrast associades als rols semàntics.
Tipografia. Declara tokens de composició que separin mida, pes, interlineat i tracking, i construeix estils de text amb rols. Empra noms d'intenció com a títol XL, Subtítol M, Cos M, Peu S, i deixa clar el pes amb un sufix estandarditzat, per exemple, Cos M Regular, Cos M Semibold. Si treballes amb múltiples marques o productes, afegeix un prefix de context com Web, iOS o Brand A quan sigui estrictament necessari.
Barrejar espanyol amb codis numèrics és viable si ets consistent. Fes servir guions per separar atributs, evita espais problemàtics i mantingues l'ordre semàntic de macro a micro, per exemple, Color — Fons — Primari — Hover o Text — Cos — M — Semibold. Si optes per escales numerades (p. ex., Blau-500), fes-les servir només en tokens base; els rols semàntics no han de dependre d'un número que no explica cap intenció.
Un apunt sobre internacionalització: encara que l'equip parli espanyol, estandarditzar sufixos o abreviatures tècniques (md, lg, sm, xl) facilita l'adopció per eines i persones d'altres equips. El que és clau no és l'idioma, sinó la coherència i la traçabilitat.
Arquitectura de Figma: equips, projectes, arxius i pàgines
L'estructura de Figma influeix en permisos, cerques i rendiment. En comptes tipus Professional Team treballes amb Projectes, Arxius i Pàgines; a Organization Team s'hi afegeix la capa d'Equips, útil en corporacions i estructures complexes.
Permisos. Pots donar accés de només lectura, edició o administració a nivell de projecte i fitxer. A més hi ha projectes de només visualització, on només edita la persona creadora, i invitació obligatòria, que actuen com a privats. Comunica sempre les invitacions amb edició per mantenir el control del sistema.
Nomenclatura de projectes. Estableix un patró del tipus _ perquè tot sigui identificable i ordenable. Afavoreix noms breus i utilitaris perquè es vegin complets a la interfície i no generin ambigüitats.
Tipus de fitxers. Diferència entre Main, Active i Archived. Main és la font de la veritat i està tancat a canvis excepte governança; Active és on es treballa; Archived és històric consultable. En publicar llibreries, fes-ho des de Main.
Portades i rendiment. Figma permet seleccionar un frame com a miniatura (Set as thumbnail). Fes servir un frame de 620×320 px perquè la portada es vegi nítida i colors consistents per tipus de fitxer (per exemple, un color per a Main, un altre per a Active, un altre per a Archived). Evita sobrecarregar fitxers gegants: divideix per funcionalitats i productes.
Pàgines, fluxos i numeració de frames: que tot expliqui alguna cosa
Nomenat de pàgines. Un patró efectiu és , amb id incremental i zeros a lesquerra per ordre estable. Complementa el nom amb un codi d'estat al mateix títol o en un emoji acordat per assenyalar si està finalitzada, en progrés, en revisió o descartada.
Fluxos i files. Treballa dins de cada pàgina amb files de frames que representin històries dusuari o escenaris. Inclou un frame de portada al començament de cada fila amb el nom del flux i una breu descripció contextual per evitar malentesos i facilitar-ne la revisió.
Numeració de frames. Una sintaxi com _ funciona molt bé. Fes servir zeros a l'esquerra per assegurar l'ordenació natural (01, 02, 03, 04, 05, 06, 07, 08, 09, 10) i numera vistes d'esquerra a dreta dins la fila. Exemple: 01_100, 01_101, 01_102 per a la primera fila; 01_200, 01_201, 01_202 per a la segona.
Versionat. No et recolzis només a l'autosave. Utilitza Version history per generar commits en assolir fites, especialment en sistemes de disseny o funcionalitats grans, deixant missatges clars per a l'equip i per a auditoria futura.
Llibreries d'equip i govern del sistema
Les llibreries converteixen un fitxer de Figma en proveïdor de components i estils reutilitzables. Es publiquen des del panell Assets i exigeixen una disciplina de permisos i revisions per no trencar dissenys dependents.
En organitzacions més grans val la pena crear un equip dedicat al sistema de disseny. Així controles millor qui pot editar i publicar, i la resta de l'empresa consumeix amb permisos de només lectura. Aquesta separació redueix incidents i fa més predictible el cicle de canvis.
Tipus d'equips a Organization: Open, Closed i Secret. Open permet que qualsevol persona s'uneixi i vegi documentació; Closed exigeix invitació per veure continguts; Secret ni tan sols és visible sense invitació. Tria segons la sensibilitat del projecte i la fase del sistema.
Analítica i administració. L'Admin Console de Organization aporta mètriques d'adopció de components i estils, i permet activar llibreries per defecte. Això és especialment útil per a Brand Assets, portades, iconografia o recursos comuns que han d'estar disponibles sense fricció.
Automatitza el renom amb Figma AI
Figma AI pot estalviar temps assignant noms contextuals a capes en bloc. La IA analitza contingut, posició i relació entre capes seleccionades per proposar un nom coherent, i fins i tot sincronitza entre marcs de nivell superior si detecta la mateixa capa sense nom.
L'eina respecta el que ja has anomenat. Només canvia capes que encara tenen la convenció per defecte de Figma i, si incloses capes reanomenades a la selecció, les mantindrà intactes llevat que forcis l'acció.
Capes que sí que reanomena: marcs, grups, text, instàncies que conservin el nom per defecte del component i rectangles amb farciment d'imatge. En instàncies, només actua sobre el contenidor, no sobre subcapes, per evitar efectes col·laterals.
Capes que no reanomena: capes ja reanomenades, ocultes o bloquejades; subcapes dins instàncies; formes vectorials individuals com el·lipses, estrelles, polígons i xarxes vectorials; i rectangles sense farciment d'imatge. Per a aquestes, el canvi continua sent manual oa nivell de component.
Com llançar-lo: després de seleccionar capes, podeu utilitzar el menú contextual, el botó d'Accions a la barra d'eines o el menú d'accions ràpides. Si no hi ha res a reanomenar, Figma mostra un avís i et permet forçar l'acció amb Reanomenar de totes maneres si necessites homogeneïtzar noms.
Bones pràctiques específiques per a colors i text en variables
Si avui conviuen Blau Principal i Blau-500, fa el salt a un model dual. Defineix variables base per escala (Blau-50 a Blau-900) i variables semàntiques per propòsit (Fons-Primari, Text-Secundari, Vora-Interactiu), i mapeja una a una altra. Aquest pont és allò que et dóna resistència a canvis de marca o tema.
Introdueix sufixos uniformes per a estats: Hover, Focus, Active, Disabled, Selected. Si treballes amb superfícies i elevació, afegeix variants per a Superfície-Elevada o Contingut-Sobre-Fons-Subtil, sempre sota el paraigua semàntic.
En tipografia, separa tokens d'àlies i de composició. Àlies per rol (Títol-XL, Subtítol-M, Cos-M) i composició amb mida, pes, interlineat i tracking. Quan canvieu els noms de font o el producte creixi, no haureu de tocar cada pantalla, només el mapatge.
Aquest enfocament també simplifica la comunicació amb desenvolupament. Els devs solen agrair variables estables i predictibles, per exemple, –color-text-primari o –font-body-md, en lloc d'un nom estètic que canviï per tendències.
Plugins recomanats per mantenir l'ordre
Usar eines auxiliars elimina tasques repetitives i errors humans. Hi ha plugins a Figma que ajuden a netejar noms, sincronitzar contingut o traçar connexions entre pantalles.
- Find and Replace: útil per unificar noms de capes, estils o textos en massa.
- Content Reel: permet inserir continguts d'exemple coherents i reutilitzables per testejar estats i longituds.
- Sorter: ajuda a ordenar capes i artboards amb criteris predictibles.
- Google Sheets Sync: sincronitza dades tabulars amb dissenys, perfecte per a llistats o taules.
- Autoflow: traça fletxes i connexions entre frames per presentar fluxos sense esforç.
- Redlines: genera especificacions visuals de mides, espaiats i estils.
Treballar amb clients i comptes Organization
Quan col·labores amb organitzacions externes, val la pena alinear estructura i permisos. En comptes Organization Team podeu crear equips per producte, activar llibreries per defecte i veure analítica d'adopció, el que ajuda a governar el sistema amb dades.
Avantatges de tenir equips separats: jerarquia clara, separació de productes o projectes, permisos específics segons el rol, nivell extra d'organització i col·laboració més fluida. El directori per nivells (Equips, Projectes) aporta un mapa mental immediat que redueix la fricció en entrar en un fitxer nou.
Per al dia a dia, mantingues el mateix patró que a casa teva: projectes per a Main, Active i Archived; arxius lleugers per funcionalitats; pàgines amb id i estat visibles; i versionat amb missatges clars en tancar cada fita per deixar rastre.
Formació i creixement professional
Si vols aprofundir i potenciar la teva carrera a UX/UI, valora formar-te amb professionals en actiu. Programes intensius com el Disseny UX/UI AI Driven Full Stack Bootcamp de KeepCoding combinen pràctica, criteri i tecnologia aplicada al disseny i al desenvolupament, amb profes que estan dia a dia al sector.
Més enllà d'aprendre a dominar Figma, aquest tipus de formació us exposa a casos reals, flux de treball amb equips i decisions amb impacte. Aquesta barreja de teoria i pràctica accelera la teva empleabilitat i t'ajuda a construir un portfoli sòlid en un mercat competitiu.
Amb un marc clar de noms i processos, un sistema de disseny ben publicat i una estratègia de tokens compatible amb estàndards, el teu equip guanyarà velocitat, reduirà errors i serà capaç d'evolucionar el producte sense trencar res. El que és important és acordar la convenció, documentar-la i fer-la complir amb eines, permisos i revisions: la resta és iterar amb cap.
