In addition to this project, one of our partners was needing a mobile application that was going to use the same database as the web app. To facilitate communication between the backend and all of their applications, we needed a robust solution for sending notifications with concealed information to the mobile app.
After a thorough proof of concept, we decided to harness the capabilities of Firebase to bridge the gap between our backend and various applications.
What is Firebase?
Firebase serves as a Backend as a Service (BaaS) that simplifies the creation of a backend with minimal coding expertise. It offers seamless integration with various platforms, including iOS, Android, Unity, and C++.
Firebase's extensive range of services spans authentication, storage, real-time database, crash reports, and Firebase Cloud Messaging (FCM), which is instrumental for push notifications.
Advantages of Firebase Cloud Messaging (FCM)
FCM gives us many advantages, here is the list of the most important:
Cost-Effective: FCM offers unlimited use for free, making it a budget-friendly choice.
Multi-Platform Integration: It seamlessly integrates with multiple platforms, simplifying the development process.
Well-Documented: Firebase provides comprehensive documentation, making it user-friendly.
Swift Delivery: FCM ensures that 95% of all notifications experience a minimal delay of just 250ms from the time of dispatch to reception on the recipient's platform (courtesy of Google).
Audience Targeting: You can tailor messages to specific devices, platforms, or user groups.
Versatile Messaging: Messages can be dispatched via the Firebase Console or the Firebase API.
Here's the FCM flow:
Setting up the Client-Side
Now that the Firebase introduction is finished, it’s coding and configuring time.
To begin, create a Firebase Console project using your Google account. Once in the Firebase dashboard, select 'Add project'. Specify your project's name and region, and then click on 'Create project'.
Ok, you’re done! You have your project created, so now you are able to use all Firebase functionalities!
You must register each platform you intend to configure Firebase for. In this tutorial, we'll focus on configuring an Android project.
During app registration, you'll need to fill in the package name according to your app's specifications. Firebase's initial project already contains the package name, typically set as 'com.google.firebase.quickstart.fcm'. You can find these projects in the documentation samples section.
Following app registration, you'll need to download and add the 'google-services.json' file to your project. If you haven't already received it from Firebase, they will provide it.
Additionally, don't forget to add FCM dependencies, as they are essential for Firebase to function seamlessly within your app.
Well done, your client side is ready, if you want more information about client side configuration you can get it on the documentation guide for Android or for iOS or other platforms you will find on the side panel of the Cloud Messaging documentation page.
Obtaining Device Tokens
For each app-installation, Firebase is going to create a token that identifies it, so in case of sending a notification to that specific app-installation, you will need that token.
To learn about getting this token, please read 'Access the device registration token' part on the setting up section of the platform you want to configure Firebase to.
Well done, your client side is ready, if you want more information about client side configuration you can get it on the documentation guide for Android or for iOS or other platforms you will find on the side panel of the Cloud Messaging documentation page.
Sending Our First Notification
We can send push notifications without a fully configured backend, using the Firebase console.
To do this, navigate to your Firebase project, select 'Notifications' in the side panel, and click 'Send your first message'. This will take you to this configuration panel:
Here you'll need to provide the following details:
Message text: The main content of your notification.
Target: Define the devices you want to reach, selecting from options like "User segment," "Topic," or "Single device." Each target allows you to tailor your message effectively.
Once you've filled in these fields, click 'SEND MESSAGE'.
A pop-up will display, summarizing the key details of your notification. Click 'SEND', and your push notification is on its way!
Configuring Your .NET Backend
For this example, we'll use a .NET backend – a console project designed specifically for a .NET Meetup in Uruguay.
To access the Firebase API, you'll need critical information from Firebase, including the API URL (https://fcm.googleapis.com/fcm/send) and a unique server key that authenticates your Firebase project for security purposes.
To obtain the server key:
Access 'Project settings' as depicted in the image.
Select the 'Cloud Messaging' tab.
Find the server key in the 'Project credentials' section.
Time to Code the Backend
In addition to the API URL and server key, you'll require a method with specific parameters to communicate with the Firebase API. For this purpose, create a static class named "PushNotificationLogic.cs" containing the following method:
These parameters are:
deviceTokens: An array of strings, each string represents a FCM token provided by Firebase on each app-installation. This is going to be the list of app-installations that the notification is going to send.
title: It’s the bold section of a notification.
body: It represents 'Message text' field of the Firebase SDK, this is the message you want to send to the users.
data: These is a dynamic object, it can be whatever you want because this object is going to be used as additional information you want to send to the app, it’s like hidden information. For example an action you want to execute when the user presses on the notification or an id of some product.
For the method, I am going to suppose that all parameters are correct without bad values (you can add all the validations you want). The first thing we have to do is to create an object with all the data we need to send to the API, I created two classes for that:
public class Message { public string[] registration_ids { get; set; } public Notification notification { get; set; } public object data { get; set; } } public class Notification { public string title { get; set; } public string text { get; set; } }
Then, just create a new object of type 'Message' and serialize it as I did it here:
var messageInformation = new Message() { notification = new Notification() { title = title, text = body }, data = data, registration_ids = deviceTokens }; //Object to JSON STRUCTURE => using Newtonsoft.Json; string jsonMessage = JsonConvert.SerializeObject(messageInformation);
Now we just need a request to Firebase API and we’re done.
The request has to be as a "Post" Method to the Firebase API-Url, we have to add a Header which is "Authorization" and use a value like: “key={YourServerKey}”.
Then we add the content (jsonMessage) and you are ready to hit the api.
Here it is the code you need to do the last part:
// Create request to Firebase API var request = new HttpRequestMessage(HttpMethod.Post, FireBasePushNotificationsURL); request.Headers.TryAddWithoutValidation(“Authorization”, “key=” + ServerKey); request.Content = new StringContent(jsonMessage, Encoding.UTF8, “application/json”); HttpResponseMessage result; using (var client = new HttpClient()) { result = await client.SendAsync(request); }
In addition to this project, one of our partners was needing a mobile application that was going to use the same database as the web app. To facilitate communication between the backend and all of their applications, we needed a robust solution for sending notifications with concealed information to the mobile app.
After a thorough proof of concept, we decided to harness the capabilities of Firebase to bridge the gap between our backend and various applications.
What is Firebase?
Firebase serves as a Backend as a Service (BaaS) that simplifies the creation of a backend with minimal coding expertise. It offers seamless integration with various platforms, including iOS, Android, Unity, and C++.
Firebase's extensive range of services spans authentication, storage, real-time database, crash reports, and Firebase Cloud Messaging (FCM), which is instrumental for push notifications.
Advantages of Firebase Cloud Messaging (FCM)
FCM gives us many advantages, here is the list of the most important:
Cost-Effective: FCM offers unlimited use for free, making it a budget-friendly choice.
Multi-Platform Integration: It seamlessly integrates with multiple platforms, simplifying the development process.
Well-Documented: Firebase provides comprehensive documentation, making it user-friendly.
Swift Delivery: FCM ensures that 95% of all notifications experience a minimal delay of just 250ms from the time of dispatch to reception on the recipient's platform (courtesy of Google).
Audience Targeting: You can tailor messages to specific devices, platforms, or user groups.
Versatile Messaging: Messages can be dispatched via the Firebase Console or the Firebase API.
Here's the FCM flow:
Setting up the Client-Side
Now that the Firebase introduction is finished, it’s coding and configuring time.
To begin, create a Firebase Console project using your Google account. Once in the Firebase dashboard, select 'Add project'. Specify your project's name and region, and then click on 'Create project'.
Ok, you’re done! You have your project created, so now you are able to use all Firebase functionalities!
You must register each platform you intend to configure Firebase for. In this tutorial, we'll focus on configuring an Android project.
During app registration, you'll need to fill in the package name according to your app's specifications. Firebase's initial project already contains the package name, typically set as 'com.google.firebase.quickstart.fcm'. You can find these projects in the documentation samples section.
Following app registration, you'll need to download and add the 'google-services.json' file to your project. If you haven't already received it from Firebase, they will provide it.
Additionally, don't forget to add FCM dependencies, as they are essential for Firebase to function seamlessly within your app.
Well done, your client side is ready, if you want more information about client side configuration you can get it on the documentation guide for Android or for iOS or other platforms you will find on the side panel of the Cloud Messaging documentation page.
Obtaining Device Tokens
For each app-installation, Firebase is going to create a token that identifies it, so in case of sending a notification to that specific app-installation, you will need that token.
To learn about getting this token, please read 'Access the device registration token' part on the setting up section of the platform you want to configure Firebase to.
Well done, your client side is ready, if you want more information about client side configuration you can get it on the documentation guide for Android or for iOS or other platforms you will find on the side panel of the Cloud Messaging documentation page.
Sending Our First Notification
We can send push notifications without a fully configured backend, using the Firebase console.
To do this, navigate to your Firebase project, select 'Notifications' in the side panel, and click 'Send your first message'. This will take you to this configuration panel:
Here you'll need to provide the following details:
Message text: The main content of your notification.
Target: Define the devices you want to reach, selecting from options like "User segment," "Topic," or "Single device." Each target allows you to tailor your message effectively.
Once you've filled in these fields, click 'SEND MESSAGE'.
A pop-up will display, summarizing the key details of your notification. Click 'SEND', and your push notification is on its way!
Configuring Your .NET Backend
For this example, we'll use a .NET backend – a console project designed specifically for a .NET Meetup in Uruguay.
To access the Firebase API, you'll need critical information from Firebase, including the API URL (https://fcm.googleapis.com/fcm/send) and a unique server key that authenticates your Firebase project for security purposes.
To obtain the server key:
Access 'Project settings' as depicted in the image.
Select the 'Cloud Messaging' tab.
Find the server key in the 'Project credentials' section.
Time to Code the Backend
In addition to the API URL and server key, you'll require a method with specific parameters to communicate with the Firebase API. For this purpose, create a static class named "PushNotificationLogic.cs" containing the following method:
These parameters are:
deviceTokens: An array of strings, each string represents a FCM token provided by Firebase on each app-installation. This is going to be the list of app-installations that the notification is going to send.
title: It’s the bold section of a notification.
body: It represents 'Message text' field of the Firebase SDK, this is the message you want to send to the users.
data: These is a dynamic object, it can be whatever you want because this object is going to be used as additional information you want to send to the app, it’s like hidden information. For example an action you want to execute when the user presses on the notification or an id of some product.
For the method, I am going to suppose that all parameters are correct without bad values (you can add all the validations you want). The first thing we have to do is to create an object with all the data we need to send to the API, I created two classes for that:
public class Message { public string[] registration_ids { get; set; } public Notification notification { get; set; } public object data { get; set; } } public class Notification { public string title { get; set; } public string text { get; set; } }
Then, just create a new object of type 'Message' and serialize it as I did it here:
var messageInformation = new Message() { notification = new Notification() { title = title, text = body }, data = data, registration_ids = deviceTokens }; //Object to JSON STRUCTURE => using Newtonsoft.Json; string jsonMessage = JsonConvert.SerializeObject(messageInformation);
Now we just need a request to Firebase API and we’re done.
The request has to be as a "Post" Method to the Firebase API-Url, we have to add a Header which is "Authorization" and use a value like: “key={YourServerKey}”.
Then we add the content (jsonMessage) and you are ready to hit the api.
Here it is the code you need to do the last part:
// Create request to Firebase API var request = new HttpRequestMessage(HttpMethod.Post, FireBasePushNotificationsURL); request.Headers.TryAddWithoutValidation(“Authorization”, “key=” + ServerKey); request.Content = new StringContent(jsonMessage, Encoding.UTF8, “application/json”); HttpResponseMessage result; using (var client = new HttpClient()) { result = await client.SendAsync(request); }
A while ago we noticed something pretty common: everyone wanted to share more knowledge internally, but nobody wanted another heavy corporate ritual.
Internal talks usually start with good intentions and slowly disappear. They take time, preparation, and energy. And at some point people start feeling like they need to be experts before presenting anything.
So we tried the opposite.
15 minute talks.
Small topics.
Low pressure.
And one important rule: every session had to leave something useful behind. A tool, a workflow, an idea, a shortcut, a new way to approach a problem. Something people could actually use after the talk ended.
We didn’t want theory that went nowhere.
Somehow, that ended up working much better than we expected.
The idea was to reduce friction
Screenshot of the shared topic pool
Tiny Knowledge Bytes is intentionally simple:
anyone can suggest topics
anyone can end up presenting
you don’t need to master the topic
talks can come from experiments, client problems, tools or random discoveries
sessions should leave something practical behind
if nobody volunteers, the system picks someone for us
The goal was making knowledge sharing feel lightweight instead of exhausting.
Some of the best talks start with:
“I tried this yesterday and it was weird.”
The topic pool started growing on its own
Over time, topics started coming from everywhere.
Sometimes someone took a course and used a Tiny Knowledge Byte as a way to give something back to the team. Other times, a client problem triggered research into new tools, workflows or AI approaches.
A lot of sessions start from curiosity or necessity more than planning.
And honestly, the mix is part of what makes it interesting.
Sometimes a UX session drifts into Computer Vision. Sometimes someone technical shares a visual workflow that half the design team ends up adopting later.
There’s not much curation. It behaves more like a constant exploration system.
Then another problem appeared: choosing who presents
And this is where things became unnecessarily dramatic.
Nobody wanted to be “the person who chooses”. So we started adding absurd layers of randomness until we somehow ended up building a full internal app called 2FS.
Two Factor Sorteo.
Yes, it’s real.
The wheel proposes. The oracle decides.
The logic is simple.
First, a wheel picks someone.
Then a Magic 8 Ball decides whether destiny approves the selection.
If the oracle rejects the person, the process starts again.
That’s it.
The app accidentally became part of the learning loop too
Apps developed for the Tiny Knowledge Bytes.
2FS originally started as an excuse to experiment with:
Claude Code
Claude Design
design systems
editorial interfaces
motion and microinteractions
Eventually those same explorations turned into future Tiny Knowledge Bytes.
The tool we used to select speakers started generating new topics itself.
The system started feeding itself
One of the most interesting side effects is that people started building things outside their usual role because of previous Tiny Knowledge Bytes.
2FS itself is a good example. A designer saw sessions about Claude tooling and AI workflows and thought:
“Maybe I can actually build this.”
What started as a ridiculous speaker selection tool became a real product experiment involving Claude Code, interface systems and interaction design.
Then it came back into the Tiny Knowledge Bytes circuit as a new talk.
That loop became surprisingly valuable:
someone learns something,
tries it,
builds something with it,
and eventually inspires someone else to do the same.
What ended up mattering most
Final Oracle Certificate.
Over time we realized knowledge sharing works much better when:
it doesn’t require huge preparation
it’s allowed to be imperfect
it mixes different disciplines
it leaves something practical behind
and somehow involves a mystical wheel connected to a Magic 8 Ball
At that point, it stops feeling like another internal obligation and starts feeling like something people genuinely want to keep alive.
Just this month, I built a full design system in about 20 hours.
What used to take weeks, sometimes months, is now dramatically faster. So… what actually changed? And more importantly: what didn’t?
Design systems take time. On complex platforms, they can take hundreds of hours.
We were working with a large and complex product where inconsistencies had started to pile up. Different modules had evolved in isolation, teams were making independent decisions, and there were no shared guidelines. The answer was clear: we needed a design system.
AI tools were just starting to emerge back then. They were mostly useful for simple tasks as they tended to hallucinate when things got complex. Developers had started using them earlier than designers, MCP didn't exist yet, and Figma plugins were the best automation we had.
But the context has changed. Fast.
The Manual Era
We did what most teams did. We stopped, and we built it. Manually.
Picture two designers, a mountain of inconsistencies, and no map. We had to cross-reference information manually, digging through the code, detecting what could be merged, agreeing on naming conventions, deciding how to name components. Hours and hours of discussion until we finally landed on a solution.
In the end, we got there. A cleaner system, faster workflows, and for the first time, both teams speaking the same visual language. Hard-won, but it worked.
But now every month a new AI model seems to be released. Design is finally catching up with what developers faced about two years ago. New tools arose, and with that, the scope of our work as designers completely changed.
The Human Factor
For an internal project, I used our Kaizen site as a reference, combined with documentation from industry leaders as a guideline.
I started in v0, which is essentially a chat interface where you can generate UI components through prompts. I fed it the colors, typographies, and a reference image, and from there it was a back-and-forth: the AI generated, I reacted, adjusted, and pushed until the output matched what I had in my head. And just like that, I started prompting my way through a Design System.
Once a component was ready, I used the html.to.design plugin to bring it into Figma (yes, plugins are still alive!). Think of it as a bridge: the plugin exports designs directly from the browser into a Figma file.
Inside Figma, the intervention was more hands-on. First, I checked that everything was visually consistent with what was defined in v0: colors, typography, styles. Then I used Figma's built-in AI to rename all the component layers using BEM convention (something that would have taken a significant amount of time to do so manually).
BEM, which stands for Block Element Modifier, is a widely adopted naming convention in CSS. It structures layer names hierarchically and predictably, for example: button__label--disabled.
Using it keeps the code clean, readable, and consistent, especially when you're working alongside a developer who needs to understand what came out the other side.
Beyond naming, I also made sure the layer structure would generate the right properties when building component sets in Figma, so that all the variants would be correctly exposed and usable. My team also pointed out that adding descriptions to components and variants was key as context for any agent using them through an MCP.
The last step was connecting everything to Windsurf via MCP. With a frame selected in Dev Mode, Windsurf could read the Figma file and use the components to build more complex screens.
We worked closely with a developer throughout this phase. Not just for the technical knowledge, but because having someone who reads code fluently meant catching things we wouldn't have spotted otherwise. The design role here was direction and supervision: making sure the AI used the components correctly and didn't invent solutions where context was missing.
Every step of the process had a human decision behind it.
An Unexpected Discovery
At one point, before we had any of the naming conventions figured out, I selected a frame and asked Windsurf to build a form using the components inside it, styled to match a specific card. The developer next to me was skeptical until he saw the result, and then he was just as surprised as I was.
What we realized is that the MCP wasn't reading layer names to understand context. It was reading everything inside the frame, even the loose text sitting alongside the components. Good naming is still worth doing. But the MCP doesn't need it to understand what it's looking at.
Learning to Talk to an AI
The more specific and contained your prompt, the better the outcome. We started with the most atomic component: the button, and worked outward from there. Each approved component became context for the next one, so the system gradually picked up the visual language we were building.
At some point I got ambitious and asked for five cards in a single prompt: blog card, service card, testimonial card, stats card, feature card… structures, states and all. The AI delivered.
Visually, everything looked fine. Then the developer looked at the code and pointed out that all five cards were independent components instead of variants of one. For a design system, that breaks everything.
One correction prompt fixed it. But it was a good reminder: the AI does exactly what you ask, not what you mean. And fixing it after the fact can cost more than getting it right from the start.
Some Things Learned Along the Way
Precision is key. Natural language is fine when you're asking for a cooking recipe, but when referring to a component, if you say things like "create" instead of "add", you'll probably end up with a whole new set of components instead of additional variants of an existing one.
The "Frame" is the context: MCPs can read everything inside the frame you select. This is a game-changer. It means the "naming conventions" debate might be shifting. If the AI understands the context visually and structurally, will we still spend hours discussing nomenclature in 2027?
No matter what happens, you can always roll back in less than 5 minutes and start over.
Work closely with a developer: they can help you understand MCPs and clear up any code-related doubts. Once you start to grasp their logic, you'll learn very quickly how to prompt in ways that AI actually understands.
There's nothing to lose by asking the AI to follow a specific naming convention for the code. It keeps everything clean and readable, and it takes no extra effort.
The AI covers roughly 80% of the work (generation, variations, exploration...), but the remaining 20% is where quality lives, and that part is not delegable. The AI executes. The judgment is still yours. And if you skip the review, you're not saving time: you'll spend it later.
Context matters more than tooling. What you don't define, the AI will invent. Small components may be resolved well, but large interfaces require more definition from the start. A well-defined system scales. An undefined one generates inconsistencies faster than you can fix them.
Figma is no longer the mandatory starting point. It's useful as a visual reference, a QA space, or a consolidation layer. But the AI doesn't need it. We still do.
There's no single right workflow yet. What you do depends on the project. We're in a transition moment where the tools change faster than the standards. The best thing you can do right now is experiment.
What AI Still Can’t Replace
Through all of this, a few things became very clear. These are the parts that didn’t change:
Knowing when something looks off. The AI generates, but it doesn't notice when the result doesn't feel right. That eye is yours.
Direction and supervision. The AI used the components we gave it, but without someone supervising it, it invents solutions where there is no context to work from.
The definition of done is still a human call, whether it's a conversation with a PO, a stakeholder, or just the designer's criteria. There's no prompt for that.
The context: knowing why certain decisions matter, what a component should communicate, what the user will actually feel. Business knowledge, stakeholder dynamics, unwritten rules, empathy for the end user. These take years to build and live in the people doing the work, not in the tools they use.
My Two Cents
The tools changed, and that gave me the chills, but throughout this experience I found that the designer's role is more alive than ever.
What once took a team weeks can now be prototyped in hours. That’s not a threat; it’s an invitation to get curious.
I'm still figuring a lot of this out, and I suspect most of us are. There's no right workflow yet, and honestly, that's fine. We are in a transition where tools change faster than standards. The best thing you can do is experiment. Don't wait for a "definitive" workflow, it might be obsolete by next month.
Go ahead, try prompting your way through a component. You might be surprised how fast the system starts to take shape.
