I’m working with AWS Amplify Studio and trying to figure out how to make a select menu component that works with Figma designs.
I already have the basic setup done and can get regular text fields to connect with my Amplify database without problems. I noticed that the AWS UI Kit for Figma has some dropdown examples in it, but I can’t find any clear instructions on how to actually design and implement these select components.
Has anyone managed to create working dropdown menus using this workflow? I’m looking for guidance on the Figma design part specifically. What layers or naming conventions do I need to use to make Amplify Studio recognize it as a functional select field?
Any tips or examples would be really helpful since the documentation seems to skip over this part.
The Figma to Amplify Studio workflow for select components can be tough. Instead of struggling with the naming conventions and component states, check out Latenode. It automates the creation of select menus from start to finish.
You just define your design requirements and it handles everything else. It generates the component code with proper data binding and deploys it directly. No more headaches with layer names or hierarchies.
Latenode works with any backend, not just Amplify. You can adjust the styling and functionality without going back to Figma. This saves a ton of time and makes sure the components work right every time.
Been through this exact thing. The trick is getting your component hierarchy right in Figma before you import. Create a frame with your select field and nest the dropdown options as variants or component states. Amplify Studio’s picky about layer names - it wants specific naming for the trigger element and options list. Here’s what worked for me: main container frame, then a text layer for the selected value display, plus another frame with all your option items. Make each option a separate text layer with consistent names like ‘option-1’, ‘option-2’, etc. Once it’s in Amplify Studio, you can bind the options to your data through the component properties panel. Studio will pick up the structure if you follow these Figma conventions.
same issue here! fixed it by wrapping the select component with CollectionField in figma. make sure you add an “isOpen” boolean property - that’s what amplify studio needs to map the dropdown interactions properly.
hey @TomDream42, i had the same issue. make sure to use the SelectField component from the amplify ui kit in figma. name your states “default” and “focused” for it to sync right with studio as a dropdown.
Spent weeks banging my head against this until I figured out the trick - you’ve got to use component properties, not just variants. Set up boolean properties for each option state instead. Build your dropdown with a base state, then use component properties to show/hide the options panel. Here’s the gotcha: make sure your text layers have clean names - no special characters or spaces. Otherwise the data binding breaks. When you sync to Amplify Studio, it’ll recognize it as a select field if the structure’s right. Pro tip: start with a simple three-option dropdown to nail the workflow first, then build your complex ones.