El diseño y desarrollo de productos digitales nunca ha sido tan accesible como con las herramientas NoCode. En este curso, aprenderás a utilizar Framer para crear interfaces interactivas y visualmente atractivas, y Airtable para gestionar bases de datos de forma eficiente. Juntos, exploraremos cómo integrar estas plataformas para construir aplicaciones web funcionales y responsivas. A lo largo de las clases, diseñarás landing pages, aplicaciones móviles y conectarás tu frontend con un backend basado en Airtable.
Al finalizar, serás capaz de diseñar prototipos funcionales que respondan a necesidades reales, utilizando las mejores prácticas del ecosistema NoCode.
Este curso forma parte del Postgrado en Hiperautomatización con IA y No Code. Si quieres ampliar tu formación, consulta el programa completo.
Este curso forma parte del El Postgrado en Hiperautomatización con IA y No Code de IEBS.
Si quieres ampliar tu formación, consulta el programa completo.
Postgrados
Tecnología
El Postgrado en Hiperautomatización con IA y No Code de IEBS
a quién va dirigido
- Profesionales del diseño que buscan crear interfaces interactivas sin necesidad de programar.
- Emprendedores y gestores de proyectos que quieren desarrollar productos digitales de forma rápida y accesible.
- Especialistas en marketing interesados en crear soluciones digitales personalizadas y escalables.
- Desarrolladores junior o estudiantes que deseen explorar el mundo del NoCode como complemento a su formación técnica.
- Cualquier persona interesada en el diseño y desarrollo de productos digitales sin conocimientos previos en programación.
QUÉ APRENDERÁS
- Comprender las necesidades y requerimientos para diseñar y desarrollar un producto digital o aplicación corporativa desde cero.
- Dominar el uso de Framer para crear interfaces interactivas, responsivas y visualmente atractivas.
- Gestionar y visualizar datos de manera efectiva utilizando Airtable como backend.
- Integrar herramientas de diseño y bases de datos para crear aplicaciones web funcionales siguiendo la filosofía NoCode.
- Prototipar y desarrollar soluciones digitales rápidas y eficientes, optimizando recursos y tiempo.

PLAN DE ESTUDIOS
Resumen
En esta primera clase nos introduciremos en el uso de Framer como herramienta NoCode para el diseño y desarrollo de productos digitales. Comenzaremos con una visión general de sus principales características y ventajas, y exploramos la interfaz de usuario. Posteriormente, abordaremos los fundamentos del diseño en Framer, incluyendo la creación de frames, layouts y el uso de componentes predefinidos. La clase culminará con una sección dedicada a la interactividad básica, mostrando cómo crear botones, enlaces y animaciones simples, con un proyecto práctico de diseño de una landing page.
Objetivos
-
Familiarizarse con la interfaz y las herramientas básicas de Framer.
-
Aprender a crear y estructurar frames y layouts para un diseño visual efectivo.
-
Utilizar componentes predefinidos y trabajar con texto e imágenes.
-
Implementar interactividad básica mediante botones, enlaces y animaciones simples.
-
Completar el diseño de una landing page como proyecto práctico aplicando los conceptos vistos en clase.
Temario
- Introducción
- Introducción
- Layouts
- Creando el primer layout
- Layouts con IA
- Layout básico, animaciones, dark mode
- Animaciones
- Animaciones - Parte 1
- Animaciones - Parte 2
- Animaciones - Parte 3
- Breakpoints
- Breakpoints
- Componentes y variables
- Componentes y variables
Resumen
En la segunda clase nos centraremos en preparar la conectividad entre Framer y Airtable, asegurándonos de que ambas plataformas estén listas para trabajar juntas de manera eficiente. Comenzaremos configurando la base de datos en Airtable, definiendo los campos necesarios para recopilar y gestionar datos como texto, correos electrónicos, números y fechas. Simultáneamente, diseñaremos un formulario en Framer que se adapte a diferentes dispositivos, aprovechando los conceptos de diseño responsivo y configurando los nombres de los campos para garantizar la integración adecuada. Este sprint establece los cimientos para el intercambio de datos entre las plataformas, preparando el terreno para la conexión en la siguiente fase.
Objetivos
-
Configurar una base de datos en Airtable con campos adecuados para gestionar la información enviada desde el formulario en Framer.
-
Diseñar un formulario en Framer que incluya tipos de campos variados, como texto, correos electrónicos, números y selecciones, asegurando que sea responsivo y funcional en diferentes dispositivos.
-
Configurar correctamente los nombres de los campos en el formulario para garantizar la integración adecuada con Airtable.
-
Preparar las plataformas para una conexión fluida y eficiente en la siguiente fase del proyecto.
Temario
- Introducción
- Introducción
- Formularios en Framer
- Formularios en Framer
- Elementos fijos 1 y 2
- Elementos fijos 1 y 2
- Importación a Framer desde Figma y Web
- Importación a Framer desde Figma y Web
- Exportación de Framer a HTML
- Exportación de Framer a HTML
- Comunidad Framer, instalar plantillas
- Comunidad Framer, instalar plantillas
- Introducción a Airtable
- Estructura y campos - Parte 1
- Estructura y campos - Parte 2
- Estructura y campos - Parte 3
Resumen
En la tercera clase, nos enfocaremos en conectar Framer y Airtable para permitir el intercambio de datos en tiempo real. Comenzaremos integrando el formulario creado en Framer con Airtable, asegurándonos de que los datos ingresados se almacenen correctamente en la base de datos. A continuación, exploraremos cómo crear automatizaciones en Airtable para gestionar los datos y diseñar interfaces que faciliten su manejo. Por último, utilizaremos el plugin de Framer para visualizar la información almacenada en Airtable directamente en una nueva página dentro de nuestra aplicación, cerrando el ciclo de interacción entre ambas plataformas.
Objetivos
-
Aprender a conectar el formulario en Framer con Airtable para enviar y recibir datos en tiempo real.
-
Configurar automatizaciones en Airtable para organizar y gestionar la información de manera eficiente.
-
Diseñar interfaces en Airtable que faciliten la visualización y edición de los datos registrados.
-
Utilizar el plugin de Framer para mostrar información dinámica almacenada en Airtable dentro de la aplicación.
-
Validar la interacción entre ambas plataformas, asegurando un flujo de datos fluido y funcional.
Temario
- Vistas, formularios y filtros
- Vistas, formularios y filtros
- Interfaces en Airtable
- Interfaces en Airtable
- Automatizaciones con Airtable
- Automatizaciones con Airtable
- Importación y exportación de datos
- Importación y exportación de datos
- Conectividad
- Conectividad Framer & Airtable 1
- Conectividad Framer & Airtable 2
- Conectividad Framer & Airtable 3
- Tokens en airtable
profesorado
aprende con los mejores expertos
OPINIONES del Curso en Diseño y Desarrollo NoCode

Enrique Arias Muñoz
Fundador de Outfinders
@iebschool una gran experiencia con profesores impresionantes y compañeros de los que aprendes todos los días

Alexandra Mengoni León
Design Operations Lead at Accenture
No hay semana que mi diplomado con @iebschool no me inspire, motive y sea fuente de ideas nuevas. ¡Me encanta!

Paco Anes Castillo
Data Scientist at Securitas Digital Hub
¡Gracias a la @iebschool por el contenido de su master Product & Project Manager y los profesores que nos ayudan!

Francisco José Ruiz García
Cofounder en entradium
La formación en nuevas áreas ya no es una opción sino una obligación
resumen
del Curso en Diseño y Desarrollo NoCode
DURACIÓN
1 mes (40 horas)
INICIO
8 Enero
Modalidad
Online - Accesible 24/7
precio
510 U$S
incluye
Diploma IEBS y bolsa de empleo
valoración
4.9/5 de valoración por los alumnos
No enseñamos el futuro. Te ayudamos a crearlo.
FORMACIÓN RELACIONADA
Curso
Marketing Digital
Curso en Introducción a la Gamificación para empresas

Curso
Tecnología
Curso en Gestión financiera para principiantes

Curso
Tecnología
Curso en MOOC de Transformación Digital para Pymes

Curso
Management
Curso en MOOC de La productividad personal en la era del trabajo colaborativo

Curso
Tecnología
Curso en MOOC de Blockchain y criptomonedas

especialización
Tecnología
Curso de Big Data y Business Intelligence en Fintech
