Mi experiencia en la importación de archivos PDF a Figma – Usabilidad web y seo

Mi experiencia en la importación de archivos PDF a Figma

Vistas: 188
0 0
Tiempo de lectura:6 Minutos, 6 Segundos


Valentin Nog

Fue doloroso, pero encontré un truco y una forma perfecta de importar archivos PDF a Figma.

Figma ha conquistado el mundo del diseño. Según la encuesta UX Tools 2020 Design, Figma fue la herramienta más utilizada en 2020 para el diseño de interfaces de usuario, flujos de usuarios, creación de prototipos, traspaso, sistemas de diseño y control de versiones. Si bien Figma es un producto favorito, en mi opinión, carece de algunas características clave. Es decir, la capacidad de importar archivos PDF fácilmente sin pasar horas solucionando problemas de importación después.

Si cree que esto es un inconveniente menor, nunca ha tenido un cliente que envíe activos solo en formato PDF. Estás de suerte, amigo. Mucha gente ha solicitado esta función y Figma afirma que están trabajando en ella.

Como no sabemos cuándo Figma lanzará el PDF en el importador de Figma, decidí averiguar cómo encontrar una solución. Fue doloroso. Me encontré con muchos callejones sin salida, pero al final encontré un truco y una solución correcta (encontré la solución correcta después de pasar 2 largas horas convirtiendo archivos файлов).

Tómese una taza de café y únase a mí en este viaje de PDF a Figma.

Estoy creando varias pantallas para una aplicación de citas. En una de las pantallas, puede responder preguntas para iniciar una conversación para un partido. Tenemos preguntas divididas en varias categorías.

Aplicación de citas con interfaz de usuario: sin iconos

El diseño está configurado, pero necesito agregar íconos. Los iconos se crearon internamente y me enviaron … a través de PDF. Peor aún, me enviaron un PDF de 15 páginas, con el que resultó ser aún más difícil de trabajar.

No me di cuenta de que Figma simplemente rechaza completamente los archivos PDF, por lo que primero intenté arrastrar y soltar PDF en Figma. Recibí este hermoso mensaje de error.

Error de Figma: formato de archivo no compatible para archivos PDF

Entonces hice lo que todos hacen cuando reciben un error, fui a Google. Resulta que Figma solo acepta archivos Figma, archivos Sketch y archivos de imagen (PNG, JPG, GIF). Fue desalentador y tuve que despedirme de cualquier oportunidad de tener bonitas capas para estos íconos.

Bajando los estándares para este diseño, pensé en convertir el PDF a PNG y luego importarlo. Abrí mi PDF en Vista previa de Mac y guardé el archivo como PNG. Luego arrastré el archivo PNG a Figma. ¡Funcionó! … Ver.

El archivo con el que estoy trabajando tiene más de una docena de páginas y cuando lo convertí a PDF usando Vista previa de Mac, importó un PNG del primer icono, pero eso es todo. El resto de las imágenes no se encontraron por ninguna parte.

En este punto, estaba muy decepcionado, así que comencé a buscar en Google nuevamente. Esto me impulsó a instalar la versión gratuita de Adobe Acrobat. Cuando intenté convertir PDF a PNG, se abrió una página web que intentaba venderme una versión paga de Adobe Acrobat. Otro callejón sin salida.

Estaba a punto de tomarme un descanso y volver a intentarlo más tarde cuando probé con otro convertidor. Un convertidor de PDF a PNG en línea llamado Cloud Convert.

CloudConvert – convertidor de PDF a PNG

Estoy seguro de que hay muchos convertidores de PDF a PNG gratuitos en Internet, pero me gustó Cloud Convert. Fue rápido y todas mis imágenes se colocaron en una carpeta. ¡Ahora finalmente podría importar estas imágenes a Figma con solo arrastrar y soltar!

Iconos importados como imágenes PNG

Desafortunadamente, la pelea aún no ha terminado.

Estoy acostumbrado a trabajar con capas y no con PNG estáticos. Me costó un poco conseguir que estos iconos encajaran en mi diseño. Cada rectángulo debe tener un icono correspondiente. También quería agregar algunos elementos creativos dentro de los rectángulos.

Mis iconos PNG contienen texto. Afortunadamente está en la parte inferior, así que puedo recortarlo. Creé una máscara rectangular para recortar la imagen. Luego coloqué la imagen en mi mesa de trabajo.

Repetí esto para todos los íconos que tenían el mismo color de fondo que mi diseño. Mis dos iconos tienen fondos diferentes, por lo que necesitaba una máscara más precisa. Usé la herramienta Pluma para trazar cuidadosamente la forma del icono. Luego rellené la forma y creé una máscara. No fue un proceso fácil, tuve que limpiar los bordes un par de veces antes de quedar satisfecho.

¿Enmascarar iconos PNG como solución?

En la imagen de arriba, puedes ver mi diseño final. La calidad no está a la altura. Al acercar la imagen, es posible que vea algunas asperezas, pero funciona. No me preocupa demasiado que este diseño sea perfecto en píxeles. Si crea diseños de calidad, quedará decepcionado con este método.

Este proceso me llevó dos horas. Si tuviera que volver a hacerlo, creo que me llevaría alrededor de una hora, ya que me habría saltado todo el ensayo y error. Sin embargo, una hora es mucho tiempo para importar y colocar varios iconos.

Después de todo esto, todavía no estaba satisfecho con mi diseño, así que decidí probar con otro truco. Figma dijo que no admiten archivos SVG, pero me gustaría probarlo de todos modos. Usé Cloud Convert nuevamente y convertí mi PDF a formato SVG. ¡Sorprendentemente, Figma me permitió importar SVG y las imágenes tenían capas! Durante unos 3 segundos pareció un triunfo. Rápidamente me di cuenta de que los iconos estaban dañados y no podían repararse. No solo un poco difuso o sesgado; estaban llenos de Picasso.

Iconos después de importar SVG a Figma

Estaba tratando de encontrar la forma más barata de pegar estos íconos en mi diseño. Si bien este truco fue gratuito y funcionó con este archivo PDF en particular, no es mi mejor trabajo.

Si tuviera que hacerlo de nuevo, usaría un producto que encontré llamado XD2Sketch, específicamente su convertidor de PDF a Figma. Es bastante simple, solo necesita tomar un archivo PDF y convertirlo a un archivo Figma. Todas las capas y colores están ahí. La conversión de hasta 50 mesas de trabajo cuesta 50 dólares. Decidí probarlo y creo que valió la pena. Esto es lo que pude crear en solo unos minutos con iconos vectoriales. (Jugué para ver qué puedo hacer con estas imágenes importadas, este no es un diseño real).

Resultados usando XD2Sketch – un convertidor de PDF a Figma para importar archivos PDF

Podría sacar varios elementos dentro de los iconos y jugar con ellos para crear diseños más interesantes. Importé imágenes y jugué con diferentes capas durante menos de 10 minutos y obtuve la imagen de arriba.

Hackear PDF a PNG está bien para algunas personas. Debería utilizar esta técnica si …

Si le preocupa más el dinero que el tiempo.

  • Si está satisfecho con el diseño de baja calidad.
  • Si no le importa el trabajo adicional, cambie el tamaño, cree máscaras y use la herramienta Pluma.
  • A menos que su imagen PDF necesite cambios importantes.

Para la mayoría de los autónomos, creo que vale la pena usar XD2Sketch porque …

  • Tus diseños se verán más profesionales.
  • Ahorrará tiempo y molestias.
  • Si factura a su cliente $ 50 (que recomiendo encarecidamente si insisten en darle archivos PDF), ¡es gratis!
Comparación definitiva de todos los intentos de importar PDF a Figma

Espero que esto ayude a algunos de ustedes. Trabajar con PDF y Figma no es tan fácil como le gustaría. Esperemos que Figma esté trabajando en una solución 🙂

Happy
Happy
0
Sad
Sad
0
Excited
Excited
0
Sleepy
Sleepy
0
Angry
Angry
0
Surprise
Surprise
0
Previous post 7 formas de comercializar contenido de manera efectiva en la atención médica en 2021
Next post [Book] Diseñando sistemas de soporte vital en el espacio ultraterrestre – Poniendo a las personas primero – De Experientia

Average Rating

5 Star
0%
4 Star
0%
3 Star
0%
2 Star
0%
1 Star
0%

Deja una respuesta