En resum
- Col·laboració en temps real al navegador, amb pla gratuït i opció d’instal·lar-lo al teu servidor.
- El complement Penpot Exporter porta els fitxers de Figma a Penpot.
- Els prototips no sempre passen i alguns dissenys canvien: s’han de revisar.
És per a tu si…
- Vols una eina oberta, sense dependre d’un proveïdor.
- El teu equip desenvolupa web i li interessa que els dissenys facin servir CSS real.
- Necessites tenir les dades al teu propi servidor.
Millor una altra opció si…
- Depens de molts complements de Figma, de FigJam o del Dev Mode.
- Treballes amb clients o equips que exigeixen fitxers de Figma.
De Figma a Penpot: equivalències
| Figma | Penpot |
|---|---|
| Marcs | Taulers |
| Auto layout | Flex layout i Grid layout |
| Components | Components i biblioteques |
| Variants | Variants |
| Variables | Design tokens |
| Prototip | Interaccions i fluxos |
| Dev Mode | Pestanya d’inspecció, amb CSS i HTML |
| Complements | Complements de Penpot, menys nombrosos |
Pas a pas
Crea el compte
Registra’t a penpot.app. Si el teu equip prefereix tenir les dades a casa, també el pots instal·lar al teu servidor amb Docker.
Instal·la l’exportador
A Figma, busca el complement Penpot Exporter entre els de la comunitat i obre’l al fitxer que vols passar.
Exporta el fitxer
Tria el que vols endur-te i deixa que generi el fitxer. Amb fitxers molt grans pot trigar: passa’ls a poc a poc.
Importa a Penpot
Al tauler de projectes, fes servir l’opció d’importar fitxers i tria el que has exportat.
Revisa el resultat
Comprova tipografies, autolayout, components i variants. Instal·la o carrega les fonts que faltin. Els prototips no solen passar: refés-los amb interaccions.
Comparteix amb l’equip
Convida l’equip al projecte i publica les biblioteques compartides. Mostra la pestanya d’inspecció a qui programa.
Fitxers i formats
Penpot no obre .fig directament: fes servir el complement Penpot Exporter, que genera un fitxer importable. Penpot desa en el seu format obert .penpot i exporta a SVG, PNG, JPG i PDF. Si treballes amb dissenys molt complexos, comprova cada pàgina, perquè algunes funcions de Figma no es converteixen igual.
El que no hi trobaràs
- La conversió des de Figma no és perfecta i els prototips no solen passar.
- Hi ha menys complements i plantilles que a Figma.
- Sense un equivalent a FigJam ni al Dev Mode avançat.
Trucs
- Comença passant una biblioteca de components: així comproves el més delicat des del principi.
- Conserva els fitxers de Figma durant un temps per si els has de consultar.
- Prova el flux amb qui programa: la inspecció en CSS és un dels seus punts forts.
Preguntes freqüents
Penpot obre fitxers de Figma?
No directament. Has de fer servir el complement Penpot Exporter des de Figma i després importar el fitxer.
És gratis?
Té un pla gratuït al seu servei en línia i és de codi obert, així que també el pots instal·lar al teu propi servidor.
Té col·laboració en temps real?
Sí. Diverses persones poden treballar al mateix fitxer alhora i deixar comentaris.
Independent: no tenim cap relació comercial, patrocini ni afiliació amb Figma ni amb aquestes alternatives, i ningú no ens paga per recomanar-les. Els enllaços porten als seus webs oficials i no són d’afiliat; el web es finança només amb anuncis de Google AdSense, que no influeixen en la selecció. Més informació.