Hi! I have a React component that presents product data, including product images, product title, ~20 product information editable text components, tag components, etc. My customers need the product data page/component to look personalized to them. To make it easier for my customers to personalize the product data component, I want to get them started with a design they like so they only have to tweak some minor aesthetic params if at all, so I need to create many (1K+) distinct versions of the product data component to achieve this smooth customer experience. I was planning to leverage a designer community that is on Figma to create thousands of product data component designs. The designs will be very different from each other; it's not just changing the background color and the font color. Each design will modify the layout completely with the product image in a different location with different alignment, modified text treatment for each of the 20 product information components, etc. I'm wondering if I could use the Amplify UI Figma-to-code capability to enable my use case at scale and any pointers on how to do it. Thanks in advance!
#✅ - Figma to code (React) - How to set up a React component with many (1K+) versions
steep sun
Hi @balmy aspen ! Just to clarify, are you creating a component set with 1k+ variants or are those all individual components?
balmy aspen
great question. I'm trying to figure out how to best think about it. What would you suggest it should be? what is more scalable?
steep sun
If they actually are disparate components, I would set them up that way in Figma. If they are the same layout essentially with different sizing or with smaller layout tweaks, you can use component sets. Figma-to-code currently requires that component sets all are composed of the same layers in Figma but you can hide specific layers for different variants.
That might end up driving your approach
balmy aspen
thanks. the variant approach feels like a better route because the component has the same underlaying behavior, regardless of aesthetics. question remains, how scalable is it? Have you seen components with 1K+ variants? Will Figma support it? Will the Amplify pipeline support it? What will it mean to the load time and performance of the page that loads this component with 1K+ variants?
steep sun
That would be a massive component. You might run into performance issues with React.
See this doc on the limitations to variants. It sounds like your use case might not work for that.
balmy aspen
ok, then I'll go with separate components, all with the same exact internal structure, and use the dynamic() function to decide on runtime the specific component to load based on the design the customer selects. Thanks for the insights.
warped crescentBOT
✅ - Figma to code (React) - How to set up a React component with many (1K+) versions