🏋️♀️ Fitness Time
Aplicació Flutter amb integració Figma MCP + Gemini Code Assist
Una aplicació de fitness moderna creada amb Flutter i dissenyada des de Figma, connectada via MCP Server i generada amb l’ajuda de Gemini Code Assist. Aquest projecte és un exemple real de la metodogia Design → Code automatitzada i potent.
✨ Característiques principals
- Generació automàtica del disseny des de Figma
- Sincronització bidireccional amb Gemini Code Assist
- Tipografia Montserrat i paleta personalitzada a
AppStyles - Imatges carregades per NetworkImage, sense assets locals
- Arquitectura Material 3 amb
.withValues(alpha:) - Indicador circular (
CircularPercentIndicator) amb percentatge visual i etiqueta - Barra de navegació inferior fixa amb 3 seccions (Inici / Cercar / Botiga)
- Pantalla de perfil amb targetes de mètriques i sliders per *Height* i *Weight*
🛠️ Tecnologies
| Tecnologia | Rol |
|---|---|
| Flutter 3.27+ | Framework principal |
| Dart | Llenguatge de codi |
| Figma + MCP Server | Disseny i connexió local |
| Gemini Code Assist | Generador de codi assistit |
| Google Fonts (Montserrat) | Tipografia del projecte |
| percent_indicator (package) | Indicador circular |
| Git + GitHub | Control de versions i publicació |
⚙️ Configuració de l’entorn
1️⃣ Mode desenvolupador a Figma
Activa: Settings → Advanced → Developer Mode Instal·la: plugin Figma to Code (Flutter)
2️⃣ MCP Server (Beta)
Funcionalitat Beta (requereix compte Figma Pro) Activa: Settings → Advanced → Enable MCP server
3️⃣ Verificació local
Adreça predeterminada: http://127.0.0.1:3845/mcp
4️⃣ Fitxer de configuració (VS Code)
Ruta: C:\Users\\AppData\Roaming\Code\User\mcp.json
Contingut:
{ "servers": { "Figma MCP": { "url": "http://127.0.0.1:3845/mcp", "type": "http" } } }
5️⃣ Extensions i comandes a VS Code
Extensions imprescindibles:
Gemini Code Assist
Figma for VS Code
MCP Servers
Comandes útils a Gemini / extensió:
/tools
/mcp list
/mcp run
6️⃣ Token Figma
Genera un Personal Access Token amb permisos files:read (i files:write si cal) ⚠️ Desa’l fora del repo, mai dins Git
7️⃣ Generació automàtica
Selecciona frame a Figma (home_page / profile_page)
Executa: /mcp run "Via Figma MCP: digues el nom del frame…"
El codi Flutter es genera dins lib/pages
🚀 Com executar
git clone https://github.com/Annabf7/fitness_time_app.git
cd fitness_time_app flutter pub get flutter run
🎨 Paleta de colors i tipografia
Fons: #F6F1F9
Rosa: #F896D8
Lila: #BF63F8
Blau: #3407DA
Text fosc: #181528
Gris secundari: Colors.black45
Font: Montserrat
📸 Captures de pantalla
🎨 Prototip Figma
🏠 Home Page
👤 Profile Page
📚 Aprenentatges teorics del curs
Tema 0 – Organització i objectius
Presentació de Flutter i seus avantatges
Configuració de l’entorn: VS Code, SDK, emuladors
Estructura bàsica d’un projecte Flutter
Tema 1 – Introducció a Flutter
Widgets: StatelessWidget vs StatefulWidget
MaterialApp / Scaffold / AppBar
Creació de la pantalla principal
Tema 2.2 – Null Safety
Ús de ?, ! i late
Evitar errors per valors null
Aplicació al codi real del projecte
Tema 3 – Layouts
Column, Row, Stack, Expanded
Padding, Align, SizedBox
SingleChildScrollView
Components reutilitzables
Tema 4 – Navegació
push, pop, navegació jeràrquica
Hero transitions
BottomNavigationBar amb etiquetes fixes
🧠 Conclusió
Aquest projecte mostra com el flux Design → Code és viable amb eines modernes:
Figma per al disseny
MCP Server per al pont local
Gemini Code Assist per generar codi
Flutter per executar i mostrar el resultat
És un pas cap a un desenvolupament més eficient, alineat amb disseny i apt per a entorns professionals.
👩💻 Autoria
Desenvolupat per Anna Borràs Font GitHub: @Annabf7
Projecte creat com a part del curs CIFO – Desenvolupament d’aplicacions Flutter 2025 💡 Flux real “Design to Code” basat en IA i MCP 💡 Projecte de recerca i implementació real de fluxos “Design to Code” amb IA.