Kit gratuito de interfaz de usuario de Figma: aplicación Social Food

Como parte de una nueva serie de recursos en Tuts+, estamos regalando kits de interfaz de usuario gratuitos. Este es nuestro primer kit gratuito de interfaz de usuario de Figma, así que descárguelo ahora mismo, use los componentes de interfaz de usuario que necesite, guarde los demás para otro diseño, otro día, ¡y no se olvide de volver a consultar para obtener más obsequios próximamente!

¿Qué incluye este kit gratuito de interfaz de usuario de Figma?

  • 22 diseños de página
  • Iconos personalizados
  • Sistema de diseño
  • Elementos nativos de la interfaz de usuario de iOS
  • Variantes de componentes Figma

Pantallas de bienvenida

Regístrese o inicie sesión con opciones claras de pantalla de inicio.

Fuentes de recetas de usuario

4 pantallas de noticias para mostrar seguimientos, explorar publicaciones, ver descripciones y agregar comentarios.

IU de búsqueda

Pantallas de búsqueda para entrada manual, fácil acceso a búsquedas recientes y alimentos de todo el mundo.

Páginas de perfil

Páginas de perfil de usuario para mostrar comidas deliciosas y fuentes de recetas.

Alimentaciones de actividad

Páginas de fuentes de actividad para Me gusta y comentarios, con componentes de gráficos abiertos y cerrados.

Vídeo y medios

Páginas de carga de videos y fotos, que muestran la selección de archivos del rollo y herramientas de edición de videos en la aplicación.

Ilustraciones personalizadas

Ilustraciones personalizadas y componentes de íconos, para usar en este y otros diseños de interfaz de usuario.

Componentes Figma

Todos los componentes de la interfaz de usuario creados con variantes siempre que sea posible (obtenga más información sobre cómo las variantes de Figma lo ayudan a cambiar los elementos de la interfaz de usuario).

Cómo usar este kit de interfaz de usuario de Figma

Una vez que haya descargado el kit de interfaz de usuario de la aplicación Food, ¿qué sigue?

Paso 1

Ubique el archivo ZIP donde se guardan sus descargas. Si hace doble clic en el archivo, Figma se abrirá pero el archivo no. En su lugar, deberá importar eso.

Paso 2

Para importar el kit de interfaz de usuario de Figma, haga clic en el Importar archivo (que se muestra a continuación) o arrastre y suelte el archivo en la aplicación Figma.

importar archivo figma

Verá que la miniatura del archivo aparece en su navegador de archivos Figma y aparecerá una ventana para mostrar el progreso de la importación.

progreso de la importación del archivo figma

Paso 3

En esta etapa, puede que le resulte útil mover el kit de interfaz de usuario de Figma recién importado de Borradores a un proyecto diferente. Aquí verá que tengo un proyecto de «Kits de interfaz de usuario gratuitos» donde guardaré este y futuros kits.

proyecto de kit de interfaz de usuario de figma

Paso 4

Cuando esté listo para usar el kit de interfaz de usuario, haga doble clic en la miniatura y se abrirá en el editor. Verá tres páginas entre las que puede elegir:

  • Cubrir
  • Diseño de interfaz de usuario
  • Sistema de diseño
páginas de figuras

Él Cubrir es simplemente la imagen utilizada como miniatura. Él Diseño de interfaz de usuario comprende 22 pantallas totalmente diseñadas para que las uses y edites como quieras.

Él Sistema de diseño contiene todos los componentes utilizados en el diseño de la interfaz de usuario. Puede editarlos aquí para ver los cambios reflejados en el diseño real.

sistema de diseño (componentes)

Si es nuevo en Figma y desea aprender lo que puede hacer con este kit de interfaz de usuario de Figma, eche un vistazo a nuestro curso para principiantes gratis en youtube (¡y no olvides suscribirte para más cursos como este!).

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *