Early in 2022 I wanted to understand how generative NFT projects actually worked from a design perspective. Not the smart contract side, but the asset production reality. How do you create thousands of unique characters that still feel part of the same collection? I decided to build a simple fish character system in Figma as an exercise.
The goal was never to launch an NFT collection. I wanted to master large-scale compositing in Figma using a shared component skeleton. Each fish would share the same structure—body, tail, fins, head, eyes, accessories—but every part could be swapped with variants.
I started by breaking down the fish into logical layers. The French labels stuck because I was thinking in my native language while building: dos (back), queue (tail), corps (body), nageoire (fin), tete (head), yeux (eyes), and hat. Each became its own component with multiple variants.
The component architecture proved more interesting than the visual style. I created a master skeleton component that acted as the container. Every layer was positioned with absolute constraints so swapping a variant would not break the overall composition. This was critical. Early attempts failed because I relied on auto-layout too heavily, which created cascading shifts when variants had different dimensions.
Body color variants came first. I made twelve different base colors using Figma's color styles linked to the component variants. The key decision was keeping the base body shape identical across colors. This ensured perfect alignment when composing the full character. Slight shape variations would have required individual positioning adjustments, destroying the scalability I was after.
Tail shapes presented the first real challenge. I designed five different tail silhouettes. Each tail component had its own variant set with different shapes but identical attachment points. I used the same pivot position relative to the body so they could be swapped without repositioning. This constraint shaped every subsequent part.
Eyes required more variants than I expected. Beyond basic eye shapes, I added expression variants and accessory combinations like sunglasses. The sunglasses component was built as an overlay that could sit on multiple head shapes. I learned to design accessories with transparent padding around them so they could be dropped onto different base layers without clipping issues.
The hat system taught me the most about compositing logic. Hats needed to sit correctly on different head shapes and body rotations. I created a dedicated attachment component that acted as a positioning guide. Every hat variant was built to align to this invisible guide rather than directly to the head. This abstraction made it possible to add new hats later without touching existing compositions.
Instance swapping became my primary workflow. Instead of manually editing each fish, I would duplicate the master fish component and then swap instances for each layer. Figma's instance swap feature proved essential. I organized my components into a clean page with clear naming: Fish/Base, Fish/Body, Fish/Tail, Fish/Eyes, Fish/Accessories. The naming convention mattered more than I anticipated for quick navigation when managing dozens of variants.
I generated around 120 unique fish combinations manually. The process revealed why NFT projects use scripts for final generation. Even with a perfectly structured component system, the manual assembly of hundreds or thousands of combinations becomes tedious. The design system needs to be so robust that a script can reliably swap variants without visual errors.
One insight that emerged was the importance of variant properties over separate components. Early on I created entirely separate components for each tail type. Later I consolidated them into a single Tail component with multiple variants. This reduced maintenance overhead dramatically. Changing the base tail structure only required updating one component rather than five.
Color management also evolved during the project. I initially applied colors directly to the body variants. This created duplication when I wanted to adjust the overall palette. Switching to color styles linked across variants solved this. A single style update could shift the entire collection's feel while preserving the component logic.
Constraints and resizing behavior required careful attention. I avoided auto-layout for the final composition because it introduced unwanted spacing. Instead I used fixed positioning with constraints pinned to the center. Every layer had explicit width and height properties so swapping variants maintained perfect alignment.
The project confirmed that successful modular character systems depend on strict rules established early. Every component must share the same coordinate system. Attachment points must match exactly. Variant dimensions should be consistent where possible. These constraints feel limiting during creative exploration but become liberating when scaling the system.
I also learned the value of documentation within the file itself. I created a separate page that showed every available variant in a grid format. This became my reference when composing new fish. Without this overview, I would have lost track of available options as the system grew.
The exercise gave me a much clearer understanding of why many NFT collections look similar in structure. The technical requirements for scalable compositing push designs toward certain patterns: flat colors, consistent proportions, modular accessories. These aren't just aesthetic choices. They emerge from the need to maintain visual coherence across thousands of combinations.
What surprised me most was how much the design system thinking mirrored software architecture. The fish components followed many principles I use when building interactive experiences: single responsibility, consistent interfaces, abstraction layers. The head component didn't need to know about the tail. The hat component only needed to know its attachment point.
If I were to rebuild this system today, I would invest more time in the variant property architecture. Figma has improved its variant capabilities since this project. Using boolean properties and nested variants more strategically could reduce the total number of variants needed while increasing flexibility.
The real value of this exercise wasn't the fish characters themselves. It was the muscle memory I developed for thinking in modular, composable design systems. The same principles apply when building product configurators, character creators, or any interface where users need to compose complex outputs from smaller parts.
Business owners exploring generative concepts often focus on the technology or the market potential first. The design system foundation receives less attention until production reveals the gaps. Building this fish system showed me that investing in clean component architecture early prevents painful refactoring later.
The modular approach also clarified the difference between decorative variation and meaningful customization. Some attributes like body color create visual diversity without changing the character's identity. Others like head shape or accessories affect personality more significantly. Understanding this distinction helps when designing configuration experiences for real products.
I keep the Figma file as a reference when starting new component-heavy projects. The naming, the layer organization, the constraint patterns all serve as reminders of lessons learned through deliberate practice. Sometimes the best way to understand a complex system is to build a simplified version that exposes the core mechanics.
This project reinforced my belief that design systems work best when they emerge from real composition needs rather than theoretical perfection. I didn't start with a comprehensive design system document. I started with one fish and kept extracting reusable components as complexity increased. The system grew organically from the problems I encountered.
For founders considering generative product experiences, the lesson is clear: prototype the composition system before building the full interface. The constraints you discover while assembling variations will shape every other decision. A beautiful individual asset means little if it cannot be reliably combined with others.
The fish still make me smile when I open the file. They represent a specific moment in my learning journey—when I moved from creating single illustrations to thinking in systems that could generate many. That shift in perspective has influenced every project since.