I’m working on a React project using AWS Amplify and importing UI components from Figma. The workflow involves designing components in Figma and then bringing them into Amplify for development.
I’ve created basic forms in Figma that include input fields, submit buttons, and text labels. For the design, I applied custom styling to buttons like background colors and hover states. I also styled the text labels with specific font colors, drop shadows, and other visual effects.
When I import these designs into Amplify using the Figma component URL, I notice an issue. The button styling transfers correctly and looks exactly like the original design. However, all the text label formatting gets stripped away. The labels appear as plain text without any colors, shadows, or other styling properties I applied in Figma.
Has anyone experienced this issue before? What might be causing the text styles to not transfer properly during the Figma to Amplify import process?
I’ve encountered this issue on multiple occasions. Amplify’s Figma integration tends to prioritize layout over custom text styles, resulting in losses during the import. A practical approach I’ve found is to initially import the layout into Amplify, and then utilize Figma’s inspect panel to extract precise CSS properties for the text, such as colors and shadows. I compile these into reusable CSS classes for consistency across components. However, do keep in mind that certain intricate styles from Figma may not translate to CSS seamlessly, necessitating some simplifications for proper display.
Been there with Figma to Amplify. The issue is Amplify’s import just doesn’t handle text styling well - it grabs structure but ignores most decorative styles.
You’re basically stuck with whatever Amplify feels like importing. I used to spend hours fixing styling issues after every single import.
Game changer for me was building an automation layer for the whole design-to-code process. Instead of trusting Amplify’s weak import, I set up a workflow that pulls all styling data straight from Figma’s API and applies it correctly to React components.
The automation grabs text properties - colors, shadows, font weights, everything - directly from Figma and injects them into component CSS. Nothing gets lost.
You don’t need custom scripts for this. I use visual automation tools that connect Figma’s API with your dev environment, so every text style comes through perfectly.
Bonus: updates are automatic. Change text styling in Figma and your components update themselves instead of needing manual fixes.
Check out Latenode for this kind of automation. It handles API connections and styling workflows without the coding headache: https://latenode.com
amplify’s figma import is still buggy for text. it gets the content but forgets all the styling like shadows and color. try using figma’s dev mode! you can inspect text elements and copy the css properties directly to your react components.
Yeah, this is a known issue with Amplify’s Figma integration. It prioritizes structure over styling, so buttons import fine but text formatting gets stripped. I treat the Amplify import as just a starting point. After importing, I manually recreate text styles using CSS variables that match my Figma tokens. I’ll screenshot the original Figma text and reference it while writing CSS. You can also export text styles as CSS from Figma first (try the ‘Figma to CSS’ plugin), then apply those to your imported components. Extra work, but it keeps your design intact. The problem is Amplify sees text as content, not styled elements. Until they fix this, manual styling after import is your best bet.