Enllaços de dispositiu
Una de les millors característiques de Figma és que us permet transferir ràpidament els dissenys que feu amb ell al codi. Si sou un desenvolupador d'aplicacions o treballeu amb dissenyadors, aquesta és una habilitat valuosa per aprendre. Amb l'ajuda d'eines integrades i nombrosos connectors, Figma us permet exportar el vostre disseny a diverses plataformes.
Si voleu obtenir més informació sobre com convertir el vostre disseny de Figma en codi, heu arribat al lloc adequat. En aquest article, parlarem de com exportar codi a Figma i quines eines haureu d'utilitzar.
Com exportar codi a Figma en un PC Windows
Si sou un usuari de Windows i voleu exportar codi a Figma, us agradarà saber que podeu utilitzar nombroses opcions.
Inspecció Figma
Un dels mètodes que podeu utilitzar per exportar codi a Figma és Figma Inspect. Aquesta funció us permet convertir fàcilment els vostres dissenys a Android, iOS o codi web. Com que està integrat, no cal que instal·leu cap connector ni aplicació de tercers.
A continuació s'explica com utilitzar-lo:
- Seleccioneu els elements que us interessen i aneu a la pestanya Inspeccionar.
- A la secció Codi, seleccioneu el codi que voleu exportar (CSS per a Web, Swift per a iOS o XML per a Android).
L'eina generarà el codi en funció de l'opció que trieu, i després podreu exportar-lo. Tot i que aquesta és una gran eina, té algunes limitacions. És a dir, no podeu exportar SVG a HTML. Per això, haureu d'utilitzar un connector.
Connectors de Figma
Figma inclou centenars de connectors útils. Esmentarem alguns que podeu utilitzar per exportar el vostre disseny a HTML.
Figma a HTML
El connectar us permet convertir el vostre disseny a HTML o CSS, depenent de les vostres necessitats. Seguiu els passos següents per instal·lar el connector i exportar el codi:
- Accediu al menú principal prement la icona a l'extrem superior esquerre.
- Premeu Connectors.
- Premeu Navega els connectors a la comunitat.
- Escriviu Figma a HTML i seleccioneu Connectors a la part superior.
- Premeu Instal·la.
- Torneu al vostre disseny i seleccioneu els elements desitjats.
- Torneu al menú principal, seleccioneu Connectors i, a continuació, seleccioneu Figma a HTML.
- Trieu HTML o CSS.
- Premeu Copia o Descarrega, segons les vostres necessitats.
Anima per a Figma
Un altre complement útil és Anima per a Figma. Amb aquest connector, podeu convertir el vostre disseny a HTML, CSS, React i Vue. Seguiu aquests passos per utilitzar el connector:
- Obriu el menú principal seleccionant la icona superior esquerra.
- Premeu Connectors.
- Seleccioneu Explora els connectors a la comunitat.
- Escriviu Anima per a Figma.
- Premeu Instal·la.
- Seleccioneu els elements que voleu exportar.
- Obriu el menú principal, premeu Connectors i seleccioneu Anima per a Figma. Registra't si no tens un compte.
- Trieu el tipus de codi i premeu Exporta codi.
Com exportar codi a Figma en un Mac
L'exportació del vostre disseny a codi en un dispositiu Mac es pot fer de diverses maneres.
Inspecció Figma
Aquesta eina integrada us permet inspeccionar i exportar codi i altres valors per als vostres dissenys. Amb Figma Inspect, podeu triar entre tres opcions de codi: Android, iOS o Web (només CSS).
Seguiu els passos següents per utilitzar Figma Inspect en un Mac:
- Seleccioneu els elements que voleu exportar.
- Obriu la pestanya Inspeccionar a la dreta.
- Trieu entre CSS, iOS o Android.
- Copia el teu codi.
Si només esteu interessats en CSS, iOS i Android, aquesta és una eina excel·lent per utilitzar. Tanmateix, si voleu exportar el vostre disseny a HTML, haureu d'utilitzar un mètode diferent.
Connectors de Figma
Si voleu convertir els vostres dissenys a HTML, Figma ofereix desenes de connectors que serveixen per a aquest propòsit. El procés d'instal·lació és senzill. Enumerem alguns dels més populars.
Figma a HTML
Això connectar us permet convertir el vostre disseny a CSS o HTML. A continuació s'explica com instal·lar-lo:
- Seleccioneu la icona superior esquerra per obrir el menú principal.
- Premeu Connectors.
- Seleccioneu Explora els connectors a la comunitat.
- Escriviu Figma a HTML a la barra de cerca i seleccioneu Connectors a la part superior.
- Premeu Instal·la.
- Torna al teu disseny i selecciona els elements que vols exportar.
- Obriu el menú principal, seleccioneu Connectors i, a continuació, seleccioneu Figma a HTML.
- Seleccioneu HTML o CSS.
- Premeu Copia o Descarrega.
Figma a Codificar
Amb aquest connectar , podeu convertir el vostre disseny de Figma a HTML, Tailwind, Flutter o Swift UI. Seguiu els passos següents per instal·lar-lo i utilitzar-lo:
- Premeu la icona superior esquerra per accedir al menú principal.
- Seleccioneu Connectors.
- Premeu Navega els connectors a la comunitat.
- Escriviu Figma to Code a la barra de cerca i trieu Connectors a la part superior per obtenir resultats rellevants.
- Premeu Instal·la.
- Aneu al vostre disseny i seleccioneu els elements desitjats.
- Accediu de nou al menú principal, seleccioneu Connectors i, a continuació, seleccioneu Figma to Code.
- Seleccioneu el codi desitjat.
- Premeu Copia al porta-retalls.
Puc exportar el codi a Figma a l'iPhone?
La nova aplicació Figma per a iPhone només estava disponible com a versió beta vol de prova per als primers 10.000 iPhones, però la companyia afirma que el llançament complet arribarà aviat. L'aplicació us permet navegar i accedir als vostres dissenys i fer un seguiment dels canvis en directe al vostre iPhone mentre editeu el disseny a l'ordinador.
En aquell moment, no és possible editar dissenys mitjançant l'aplicació per a iPhone, la qual cosa significa que no hi ha manera d'exportar codi a través d'ella.
Figma també ofereix el Mirall Figma aplicació a l'App Store. Aquesta aplicació us permet reflectir els vostres dissenys a qualsevol dispositiu iOS sense estar connectat a la mateixa xarxa. D'aquesta manera, podeu comprovar com es veu el vostre disseny en un dispositiu determinat (en aquest cas, iPhone) i fer un seguiment dels canvis. Tot i que és útil, l'aplicació no us permet exportar codi al vostre iPhone. Per això, hauràs d'agafar el teu ordinador.
També podeu accedir als vostres dissenys mitjançant el vostre navegador. Tanmateix, encara només podreu veure el vostre disseny i fer un seguiment dels canvis en directe.
Puc exportar el codi a Figma a un iPad?
Malauradament, no és possible exportar codi a Figma si feu servir un iPad. Figma està treballant en l'aplicació mòbil, i hi ha una versió beta, però no estava disponible per a tauletes, només per a iPhones i Androids.
L'aplicació Figma Mirror està disponible als iPads. L'aplicació us permet fer un seguiment dels canvis que feu al vostre disseny a l'ordinador i comprovar com es veuen a la pantalla de l'iPad. Malauradament, l'opció d'exportar codi dins de l'aplicació no està disponible.
Si no voleu instal·lar l'aplicació, podeu accedir a Figma a través del vostre navegador i fer un seguiment dels canvis al disseny. Però, exportar codi a Figma només és possible en un ordinador.
Puc exportar codi a Figma en un Android
Figma està treballant actualment en l'aplicació per a Android i ofereix una versió beta per a 10.000 telèfons Android. Podeu convertir-vos en provador baixant l'aplicació des de Play Store i accedir-hi enllaç . Podeu navegar, veure i compartir els vostres dissenys i fer un seguiment dels canvis dins de l'aplicació fins i tot quan no esteu a prop de l'ordinador.
Tot i que l'aplicació és útil per a molts propòsits, de moment no us permet exportar codi.
El Mirall Figma l'aplicació també està disponible per a Android. El seu objectiu principal és fer un seguiment dels canvis que feu als vostres dissenys a l'ordinador i assegurar-vos que es veuen bé en tots els dispositius Android. L'opció per exportar el codi no està disponible.
També podeu utilitzar Figma al vostre navegador si no voleu instal·lar l'aplicació. Tanmateix, encara no podreu exportar el codi. Per això, hauràs d'utilitzar el teu ordinador.
com instal·lar Google Play Store a Firestick
Preguntes freqüents addicionals
Com exporto colors de Figma a Xcode?
Malauradament, no és possible exportar colors de Figma a Xcode ja que Figma no ho admet. Però, hi ha una solució alternativa que podeu utilitzar anomenada Exportació Figma . Seguiu els passos següents per utilitzar-lo:
1. Si encara no ho heu fet, instal·leu-lo Exportació Figma .
2. Obriu Terminal.app.
3. Obriu la carpeta amb el fitxer figma-export.
4. Inicieu figma-export.
5. Exporteu colors amb ./figma-export colors -i figma-export.yaml.
Com exporto el codi HTML de Figma?
Com s'ha esmentat anteriorment, l'eina integrada anomenada Figma Inspect us permet obtenir CSS, però no HTML. Si necessiteu el codi HTML, haureu d'instal·lar un connector.
Figma inclou desenes de connectors que serveixen per a aquest propòsit. La nostra recomanació és Figma a HTML . A continuació s'explica com utilitzar-lo:
1. Obriu el menú principal. És la icona de la part superior esquerra.
2. Premeu Connectors.
3. Seleccioneu Browse Plugins in Community.
4. Escriviu Figma a HTML a la barra de cerca i assegureu-vos que els connectors estiguin seleccionats a la part superior.
5. Seleccioneu Instal·la.
6. Torna al teu disseny i selecciona els elements que vols convertir a HTML.
7. Aneu al menú principal, seleccioneu Connectors i obriu Figma a HTML.
8. Premeu HTML.
9. Trieu entre Copia o Baixa.
Obteniu el codi que necessiteu
Figma us permet exportar diferents tipus de codis mitjançant diversos mètodes. Podeu utilitzar eines integrades o descarregar diferents complements, segons les vostres necessitats. De moment, l'exportació de codis només és possible mitjançant ordinadors. Figma va llançar la versió beta de l'aplicació mòbil (limitada a 10.000 dispositius iPhone o Android), però no inclou aquesta opció. Afortunadament, exportar codi als ordinadors és ràpid i fàcil.
Com exporteu el codi a Figma? Utilitzeu algun dels mètodes que hem esmentat en aquest article? Explica'ns a la secció de comentaris a continuació.
