7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
  1. Web Design
  2. UI Kits

Kit UI de Figma GRATIS: App de comida social

Read Time: 4 mins

Spanish (Español) translation by Eva Collados Pascual (you can also view the original English article)

Como parte de una nueva serie de recursos aquí, en Tuts+ estamos ofreciendo kits UI de diseño gráfico de app gratis. Este es nuestro primer kit UI para Figma gratuito, así que descarga estas plantillas para diseño de apps ahora mismo, usa los componentes UI que necesites, guarda el resto para otros diseños, para otros días, ¡y no olvides echar un vistazo a los próximos recursos gratuitos!

free food app ui kit from Tuts+free food app ui kit from Tuts+free food app ui kit from Tuts+

Descarga el kit UI gratis

 

¿Qué se incluye en este kit UI para Figma gratuito?

  • 22 diseños de página
  • Iconos personalizados
  • Sistema de diseño de apps
  • Elementos de UI nativos para el diseño gráfico de app gratis (iOS)
  • Variaciones de Figma para componentes

 

Pantallas de bienvenida

Empezamos nuestro diseño gráfico de app gratis, con la pantalla de bienvenida para el registro e inicio sesión mediante.

free ui kit splash screensfree ui kit splash screensfree ui kit splash screens

Feeds de recetas de usuario

Seguimos con los recursos de Figma, en este caso 4 pantallas de feed para mostrar el seguimiento, explorar publicaciones, y añadir comentarios.

free ui kit feed pagesfree ui kit feed pagesfree ui kit feed pages

UI de Figma con componentes para búsquedas

Recursos Figma de pantallas de búsqueda para introducirla manualmente, para acceder a búsquedas recientes, y a comidas de todo el mudo.

free ui kit search screensfree ui kit search screensfree ui kit search screens

Páginas de perfil

Este diseño gráfico de app gratis también incluye recursos de Figma para páginas de perfil de usuario a través de las cuales mostrar deliciosos feeds de comidas y recetas. 

free ui kit profile pagesfree ui kit profile pagesfree ui kit profile pages

Diseño en Figma para componentes de feeds de actividad

Recursos de Figma de páginas de feed de actividad para los me gusta y los comentarios, con componentes de gráfico abiertos y cerrados. 

free ui kit activity feedsfree ui kit activity feedsfree ui kit activity feeds

UI de app para vídeo y medios

Páginas para subir vídeos e imágenes, mostrando la selección del archivo, así como herramientas de edición de vídeo en la propia app.

free ui kit video editing pagesfree ui kit video editing pagesfree ui kit video editing pages

Ilustraciones e iconos personalizados

Este UI de Figma tiene componentes de ilustraciones e iconos personalizados, para su uso en este u otros diseños de UI.

custom icons for ui kitcustom icons for ui kitcustom icons for ui kit

UI de Figma con componentes

Todos los componentes UI creados junto con variaciones son posibles (aprende más sobre cómo ayudan las variantes de Figma a intercambiar elementos UI).

ui components with variantsui components with variantsui components with variants

Descargar Figma y usar este kit UI de Figma

Primero debes descargar Figma e instalar la aplicación en caso de que aún no la tengas en tu equipo. Después, una vez hayas descargado el kit UI para App de comida, ¿qué viene ahora?

Paso 1: Abrir el kit UI de app de comida

Localiza el archivo ZIP allí donde guardes tus descargas. Si haces doble clic se abrirá el archivo de Figma gratis, pero no el archivo en sí. En lugar de hacer esto último, debes importarlo. 

Descarga el archivo de Figma para app de comidaDescarga el archivo de Figma para app de comidaDescarga el archivo de Figma para app de comida
Descarga el archivo de Figma para app de comida

Paso 2: Importar el kit de app social

Para importar el kit UI de Figma, o bien haz clic en el botón Importar archivo (imagen inferior) o arrastra y suelta el archivo sobre la interfaz de la app de Figma. 

Importa el archivo a la app social de FigmaImporta el archivo a la app social de FigmaImporta el archivo a la app social de Figma
Importa el archivo a la app social de Figma

Verás aparecer la imagen de miniatura del archivo de la app social en el navegador de archivos de Figma, y emergerá una ventana para mostrar el progreso de la importación de este diseño de apps. 

Progreso de importación del archivo de Figma para el diseño de appsProgreso de importación del archivo de Figma para el diseño de appsProgreso de importación del archivo de Figma para el diseño de apps
Progreso de importación del archivo de Figma para el diseño de apps

Paso 3: Integrar el kit de Figma para diseño en un proyecto 

En este momento podrías pensar que es útil mover tu recién importado kit UI de Figma desde los borradores, a distintos proyectos Figma de diseño. Aquí puedes ver que yo tengo un proyecto denominado “Free UI Kits” en donde almacenaré este y los futuros kits.  

Proyecto de kit UI de Figma para diseño de appsProyecto de kit UI de Figma para diseño de appsProyecto de kit UI de Figma para diseño de apps
Proyecto de kit UI de Figma para diseño de apps

Paso 4

Cuando estés preparado para usar el kit para diseño gráfico de app gratis, haz doble clic sobre su miniatura y este se abrirá en el editor. Verás tres páginas entre las que elegir:

  • Portada
  • Diseño UI
  • Sistema de diseño
Páginas del archivo de FigmaPáginas del archivo de FigmaPáginas del archivo de Figma
Páginas del archivo de Figma para el diseño gráfico de app gratis

La Portada (Cover) consiste simplemente en la imagen utilizada como miniatura. El Diseño UI (UI Design) incluye 22 pantallas totalmente diseñadas para que las emplees y las edites como desees.

El Sistema de diseño (Design System) contiene todos los componentes utilizados en la UI de diseño para Figma gratis. Podrás editarlos aquí para ver los cambios reflejados en el diseño actual. 

Componentes del sistema de diseño para Figma gratisComponentes del sistema de diseño para Figma gratisComponentes del sistema de diseño para Figma gratis
Componentes del sistema de diseño para Figma gratis

Si nunca has usado Figma y quieres aprender más sobre lo que puedes hacer con este kit UI para Figma, consulta nuestro curso para principiantes gratuito en Youtube (¡y no olvides suscribirte para descubrir más cursos como este!). ¡Crea hoy mismo una app social con kits UI para app!

Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Scroll to top
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.