Antes de crear un solo frame o dibujar cualquier elemento, la planificación estructurada de tu proyecto en Figma es fundamental para mantener la organización, facilitar la colaboración y acelerar el proceso de diseño. Un proyecto bien planificado no solo te ahorra tiempo, sino que establece las bases para un flujo de trabajo profesional y escalable.
¿Por qué planificar antes de diseñar?
Cuando trabajas en Figma sin una estructura previa, inevitablemente te encontrarás buscando archivos desperdigados, renombrando elementos genéricos como "Rectangle 23" o explicando a tus compañeros dónde encontrar cierto componente. La planificación inicial actúa como el esqueleto de tu proyecto, proporcionándote un mapa claro que guía cada decisión de diseño.
En el contexto de una aplicación móvil, esta planificación cobra aún mayor relevancia. Las apps móviles tienen flujos de usuario complejos, múltiples pantallas interconectadas y componentes reutilizables que deben mantenerse consistentes. Sin una estructura sólida, mantener la coherencia visual se convierte en una tarea hercúlea que consume horas de trabajo innecesario.
La buena noticia es que Figma ofrece herramientas nativas excepcionalmente poderosas para organizar proyectos: Pages, Frames, Components y Auto Layout. Dominar su uso desde el inicio de tu proyecto marcará la diferencia entre un diseño amateur y uno profesional.
Estructura básica de un proyecto en Figma
Un proyecto de aplicación móvil bien organizado en Figma sigue una jerarquía lógica que facilita la navegación y el trabajo en equipo. Esta estructura no es arbitraria, sino que responde a las necesidades reales del proceso de diseño y desarrollo.
Organización mediante Pages
Las Pages en Figma son los contenedores de nivel superior. Piensa en ellas como carpetas principales de un archivador. Para un proyecto de app móvil, una estructura recomendada sería:
- Cover: Página inicial con información del proyecto, versión y fecha
- Components: Biblioteca de componentes reutilizables del sistema de diseño
- Screens: Prototipos de todas las pantallas de la aplicación
- Flows: Mapas de flujo de usuario y wireframes
- Assets: Recursos gráficos, iconos e imágenes
- Documentation: Guías de estilo y especificaciones técnicas
Estableciendo tu sistema de nomenclatura
La nomenclatura consistente es quizás el hábito más importante que puedes adoptar. Un sistema de nombres claro permite que cualquier miembro del equipo encuentre lo que necesita sin preguntarte. Además, facilita la exportación de código para desarrollo.
Existen diferentes convenciones, pero las más utilizadas en la industria son:
- CamelCase: ButtonPrimary, CardHeader, InputField
- Snake_case: button_primary, card_header, input_field
- Kebab-case: button-primary, card-header, input-field
- Slash notation (recomendado por Figma): Buttons/Primary, Cards/Header, Inputs/Field
La slash notation es particularmente útil porque Figma la interpreta como estructura de carpetas, creando una jerarquía visual automática. Por ejemplo, al nombrar un componente como "Buttons/Primary/Default", Figma creará automáticamente carpetas anidadas que mejoran la navegación.
Ejemplos de nomenclatura efectiva en Figma:
🎨 Componentes:
Components/Buttons/Primary/Default
Components/Buttons/Primary/Hover
Components/Inputs/Text/Default
Components/Inputs/Text/Error
Components/Cards/Product/Standard
📱 Pantallas:
Screens/Onboarding/Step1
Screens/Home/Feed
Screens/Profile/Settings
🔧 Iconos:
Icons/Navigation/Home
Icons/Actions/Delete
Icons/Social/Twitter
🎯 Estados:
Button/States/Default
Button/States/Hover
Button/States/Disabled
Button/States/LoadingDefiniendo el sistema de diseño
Antes de diseñar cualquier pantalla, necesitas establecer los fundamentos de tu sistema de diseño. Esto incluye decisiones sobre espaciado, tipografía, colores y componentes base que se repetirán en toda la aplicación.
Sistema de espaciado
El espaciado consistente es crucial para la legibilidad y la jerarquía visual. Para aplicaciones móviles, un sistema de 4px o 8px funciona mejor. Esto significa que todos tus espaciados serán múltiplos de esta unidad base:
| Token | Valor en px | Uso típico |
|---|---|---|
| space-xs | 4px | Entre elementos muy cercanos, íconos |
| space-sm | 8px | Padding interno de componentes pequeños |
| space-md | 16px | Padding estándar, márgenes entre elementos |
| space-lg | 24px | Separación entre secciones |
| space-xl | 32px | Márgenes de pantalla, separación mayor |
| space-2xl | 48px | Separación entre bloques principales |
Paleta de colores
Define tu paleta de colores antes de diseñar. Una paleta típica para app móvil incluye:
- Color primario: Representa la identidad de marca y acciones principales
- Color secundario: Complementa al primario para acciones secundarias
- Colores semánticos: Éxito (verde), Error (rojo), Advertencia (amarillo), Info (azul)
- Colores neutros: Escala de grises para texto, fondos y bordes
- Color de fondo: Generalmente blanco o un gris muy claro paraapps blancas o claras
Flujo de trabajo recomendado
Un flujo de trabajo estructurado te ayuda a mantener el enfoque y evitar retrocesos costosos. Sigue esta secuencia para proyectos de apps móviles:
- Investigación y análisis: Estudia la competencia, define el usuario objetivo y documenta requisitos
- Arquitectura de información: Crea el mapa del sitio y define todos los flujos de usuario
- Wireframes de bajo nivel: Diseña la estructura y jerarquía sin preocupación por el diseño visual
- Prototipo de flujo: Conecta los wireframes para validar la navegación básica
- System design: Define tokens, componentes base y su comportamiento
- Diseño de pantallas: Construye cada pantalla usando los componentes del sistema
- Prototipo de alta fidelidad: Añade interacciones, animaciones y estados
- Revisión y test: Comparte con usuarios y refina basándote en feedback
- Preparación para desarrollo: Documenta especificaciones y exporta recursos
Configurando Auto Layout
Auto Layout es una de las funcionalidades más poderosas de Figma para diseño de interfaces. Permite crear componentes que se adaptan dinámicamente a su contenido, algo esencial para apps móviles donde el contenido varía constantemente.
Dominar Auto Layout desde el inicio de tu proyecto te permitirá:
- Crear botones y campos que se expanden según el contenido
- Construir listas y cards que se ajustan automáticamente
- Diseñar responsively sin múltiples breakpoints
- Reducir significativamente el tiempo de ajustes finales
Estructura recomendada para Auto Layout:
Frame (Auto Layout Horizontal)
├── Icon (16x16)
├── Text "Label" (Fill container)
└── Spacer (8px)
Esta estructura creará un botón que:
- Se expande horizontalmente con el texto
- Mantiene el icono siempre pegado al texto
- Respeta el espaciado consistente
- Funciona con cualquier longitud de labelPara proyectos más grandes, considera implementar estas técnicas avanzadas:
- Team Library: Publica tus componentes como biblioteca compartida que otros archivos pueden usar y sincronizar
- Versions: Usa el historial de versiones de Figma para marcar hitos importantes y poder revertir si es necesario
- Comments泛滥: Usa comentarios estratégicamente para comunicar cambios sin alterar el diseño
- Presentation mode: Configura vistas específicas para presentaciones y demos
- Dev Mode: Usa la pestaña de desarrollo para que los desarrolladores extraigan especificaciones precisas
Estas técnicas son especialmente útiles cuando trabajas en equipos de diseño o cuando el proyecto involucra múltiples disciplinas (diseño, desarrollo, producto).
Gestión de archivos y colaboración
Figma es inherently colaborativo, pero requiere buenas prácticas para aprovecharlo al máximo. Aquí hay consideraciones importantes para trabajar en equipo:
Estructura de archivos
| Enfoque | Ventajas | Desventajas |
|---|---|---|
| Archivo único grande | Todo junto, fácil de buscar | Conflictos de edición, archivo pesado |
| Múltiples archivos pequeños | Conflictos mínimos, carga rápida | Difícil mantener consistencia |
| Híbrido (archivo + librerías) | Lo mejor de ambos mundos | Requiere más planificación inicial |
Para la mayoría de proyectos, el enfoque híbrido funciona mejor: un archivo principal con la estructura completa, más bibliotecas de componentes compartidas para mantener consistencia entre proyectos.
Errores comunes en la planificación
Incluso diseñadores experimentados cometen errores de planificación. Conocer los más frecuentes te ayudará a evitarlos:
- No usar frames para cada pantalla: Algunos diseñadores colocan múltiples pantallas en un mismo frame, complicando la exportación y el prototipado
- Ignorar los estados de componentes: No planificar estados hover, pressed, disabled y loading desde el inicio resulta en trabajo duplicado
- Nombres genéricos: "Rectangle 7" o "Group 15" son señales de un proyecto desorganizado
- No documentar decisiones: Las decisiones de diseño sin documentación se olvidan y generan confusión
- Saltar el sistema de diseño: Diseñar pantallas directamente sin componentes base lleva a inconsistencias visuales
- Olvidar los safe areas: En iOS y Android hay áreas que no deben contener contenido interactivo
Cada plataforma móvil tiene especificaciones diferentes para las áreas seguras:
- iOS (iPhone): Safe area superior varía entre 44px y 59px dependiendo del modelo. La barra inferior suele medir 34px en modelos con home indicator.
- Android: Varía según el fabricante. Generalmente 24dp para status bar y navigation bar variable.
- Dispositivos foldable: Tienen consideraciones especiales cuando están plegados vs desplegados.
Figma tiene plugins que insertan automáticamente los contornos correctos para cada dispositivo. Investiga "Device Frames" o "Figma iOS Kit" para encontrar recursos útiles.
Resumen y próximos pasos
La planificación y estructura del proyecto en Figma no es un paso opcional o secundario, sino la base sobre la cual se construye todo el trabajo posterior. Invertir tiempo en configurar correctamente tu proyecto desde el inicio te ahorrará horas de trabajo correctivo y facilitará enormemente la colaboración con tu equipo.
Los elementos clave que debes tener configurados antes de comenzar a diseñar son:
- Estructura de pages clara y consistente
- Sistema de nomenclatura establecido
- Tokens de diseño definidos (colores, espaciado, tipografía)
- Componentes base construidos con Auto Layout
- Biblioteca de iconos organizada
- Template de archivo preparado para duplicar
"Un minuto de planificación ahorra diez minutos de ejecución." Esta máxima del mundo del desarrollo de software aplica perfectamente al diseño de interfaces. La disciplina en la planificación distingue a los diseñadores profesionales de los amateurs.
Pregunta 1: ¿Cuál es la convención de nomenclatura recomendada por Figma que crea automáticamente estructura de carpetas?
- a) CamelCase
- b) Snake_case
- c) Slash notation (separación con /)
- d) Kebab-case
Pregunta 2: ¿Qué funcionalidad de Figma permite crear componentes que se adaptan automáticamente al contenido?
- a) Components
- b) Frames
- c) Auto Layout
- d) Constraints
Ahora que tienes tu proyecto estructurado y organizado, estás listo para pasar a la fase de wireframing y diseño de pantallas. En la siguiente lección trabajaremos con Frames y las herramientas fundamentales de Figma para comenzar a materializar tu aplicación móvil.