I’m working with AWS Amplify to build React components and I’m having trouble with design imports from Figma. My workflow involves designing UI elements in Figma first, then importing them into Amplify, and finally bringing them into my local dev setup.
In Figma, I create basic forms that include input fields, buttons, and text labels. I apply custom styling like background colors to buttons and add visual effects to labels such as custom text colors and drop shadows.
When I pull these designs into Amplify using the Figma component library URL, something weird happens. The button styling transfers perfectly and maintains all the colors I set. However, the label formatting completely disappears. All the custom colors and shadow effects I added to text labels don’t show up at all.
Has anyone experienced this issue before? What might be causing the selective import of styles?
This is exactly why I ditched direct Figma to Amplify imports for complex styling.
You’re hitting this because Amplify’s Figma sync barely supports advanced CSS properties - especially text effects and shadows. It only handles basic styling.
I got tired of fighting these limitations, so I built automation that handles the whole design-to-code pipeline. It grabs Figma designs, processes styling data, and spits out React components with all the CSS intact.
The automation catches text styling info that normally disappears and turns it into proper CSS classes. Then it updates my component library and pushes everything to dev automatically.
No more missing shadows or broken colors. Everything transfers exactly like the design.
You can build something similar with Latenode. It connects Figma to your dev setup while keeping all the styling details that usually get lost.
Ugh, this drives me crazy too! Amplify ignores Figma’s text effects because they don’t translate to standard CSS. Try converting your labels to components in Figma first - sometimes that tricks Amplify into keeping more of the styling.
yep, totally feel ya! it’s so annoying when styles don’t carry over. maybe give the text layers a good grouping and see if flattening helps before import? plus, be wary of the shadows—amplify can be picky with certain css styles.
Had the same issue on a client project last year. Amplify can’t handle Figma’s text shadows and advanced color effects properly - there’s no direct mapping between Figma’s styling and Amplify’s component system. Here’s what worked for me: manually add the missing styles in Amplify’s theme config after import. Go to your Amplify Studio, create custom CSS tokens for text styling, then apply them to components where the styling disappeared. Another option - export complex text elements as SVGs from Figma. Preserves all the visual effects but makes text non-selectable. For production stuff, I usually end up writing custom CSS overrides locally to match the original Figma designs exactly.
I’ve hit this wall so many times. Amplify basically ignores text styling while buttons get all the love.
I stopped fighting it and built a workaround. Now I use automation to pull designs straight from Figma, grab ALL the styling data (including text effects and shadows), and spit out clean React components with proper CSS.
The automation hits Figma’s API and grabs text layer properties that Amplify just skips. Converts shadows, gradients, custom colors - everything - into actual working CSS. Then builds components and pushes them straight to my codebase.
No more manual theme wrestling or missing styles. Everything matches the design perfectly because the automation catches what Figma exports but Amplify can’t handle.
I use Latenode for this since it connects Figma’s API to any dev workflow without the usual pain. Way better than Amplify’s busted import system.
Been wrestling with this exact problem for months. Amplify’s design tokens barely support text properties compared to other UI elements. Figma imports work fine for buttons since they match Amplify’s component structure. Text labels? Not so much. Figma treats text styling as layer effects, but Amplify wants typography tokens. What worked for me: create a custom theme override file locally. Import base components from Amplify, then use CSS custom properties for the missing text effects. My workflow is import the structure from Amplify, then add visual styling locally. It’s not perfect, but keeps design consistency without completely breaking Amplify’s workflow.