UI Library configuration missing from feature branch

[socialsuiteDan]

Before opening, please confirm:

• [X] I have searched for duplicate or closed issues.
• [X] I have read the guide for submitting bug reports.
• [X] I have done my best to include a minimal, self-contained set of instructions for consistently reproducing the issue.
• [X] I have removed any sensitive information from my code snippets and submission.

App Id

d23hu3elmtkbzl

Region

ap-southeast-2

Environment name

multiple

Figma File Version (if applicable)

No response

Amplify CLI Version

10.4.1

If applicable, what version of Node.js are you using?

No response

What operating system are you using?

Windows

Browser type?

Chrome

Describe the bug

I'm trying to use the Feature Branch capability in Amplify Hosting to create separate backends for development purposes, but the UI Library configuration seems to be lost in the process.

I started out with a branch called staging, i did the initial setup in that environment including some figma components & UI library configuration to add slots, bindings, etc.

I've created a branch for a new feature, when i open Amplify Studio for the new environment the Figma file link is missing, and if i do a pull via the CLI all the generated UI components from my original branch get deleted. I've tried reconnecting the figma file and it re-imports the components, but all the configuration done within the UI Library is missing (component slots, data binding, etc).

Expected behavior

I would expect the figma file link and the configuration applied to individual components in the UI Library within the environment of a parent branch to be present in a new environment that was generated via a feature branch off the parent. If for some reason the figma file connection can't be passed through and needs to be re-authorized, i'd at least expect the individual component configuration not to be lost when the file is re-authorized, as that would be extremely time-consuming and error prone to re-create manually on every feature branch.

Reproduction steps

1. Set up a project that includes components imported from figma
2. Link the project to a repo (Ours is in Bitbucket, though i wouldn't expect that to matter)
3. Apply manual configuration to the components via the UI Library page in Studio
4. Pull down the components via CLI & commit to the repo
5. Create a feature branch in the repo & use the 'Connect Branch' button in the AWS Amplify console homepage to create a new environment, including a new backend
6. Once the backend is deployed, open Amplify Studio and look at the UI Library

Project Identifier

No response

Additional information

No response

[ykethan]

Hey @socialsuiteDan, thank you for reaching. Studio UI builder currently does not support cloning existing components from one environment to another. But this would make a great feature to have. Marking this as feature request.

[socialsuiteDan]

That's pretty frustrating, if there are features of the platform that are incompatible with each other it should really be called out in the UI or at least in the docs - it wasn't in any way clear when I started using figma-to-code components that it would prevent me from being able to have more than one version of the backend environment.

[ykethan]

Hey @socialsuiteDan, great callout. The Amplify team is working to improve documentation. Noting this for documentation update as well.

[BeaveArony]

We just talked about it in Amplify Office Hours.

+1 from me as well for this feature request. Copying/Syncing the components and their configuration would be nice!

To work around this, I currently use a single environment to make component changes and I try to amplify pull only from that one. If I still need to pull from other envs I will just revert the changes from the ui-components directory right after.

[ykethan]

cc: @wrpeck

[neilhunt1]

This is a significant issue for us as well. We have multiple developers who work on the backend APIs and we each have our own Amplify environment. We could be ok with the workaround suggested by @BeaveArony, and we tried out this process - having a shared environment that we used for Studio UI work that we each pulled from, but then we still could push to our own environments when doing backend development and just accept the Studio won't be in sync for the UI components across Amplify environments. However, we found that when we do a push to our own environment, at the end it also pulls the latest from the environment, which wipes out any changes you've made from other environments. So if we e.g. add component properties in Amplify Studio in one environment, when we checkout another environment, at any point we do a push or a pull, it wipes those out and then breaks all our code since those component props are now missing.

I'm not sure what to do, it seems we need to decide between team-based development in Amplify, or using Studio at all. Those are two major trade-offs, I'm not sure if there are other alternatives other than manually trying to keep the Studio environments in sync which is time consuming and certainly error prone.

[clintagossett]

@cwomack , thanks for writing this up. The lack of cross environment sync needs to be called out in the UI in some way to help ensure customers aren't dispointed after putting time into integrating with Figma.

[onelittleant]

+1 - Now that we have been working with Amplify for some months we are finding that multiple environments and staged deployments are very challenging. The UI components are handy, but having to "manually" deploy UI component settings/overrides is not manageable.

[DougalW]

I second the need for this feature, and am very surprised its not listed in the documentation as an issue.

We just encountered it and its almost a showstopper for us using Amplify. We need to be able to change forms in one environment and pull these into another environment - otherwise running any multi-environment setup (which should be everyone using Amplify) becomes impossibly hard. Please add this feature asap - it shouldn't be that hard!

[mikeswain]

This is a total show stopper with regards using Amplify Studio UI any any non-trivial project - it effectively means redoing all UI changes manually across environments. Unfortunately experience with this sort of UI generating tools over the years has always shown up these problems after the initial 'oh wow' moment of getting it to map the data layer to a ui the first time!

[tanosugi]

I got same issue but managed by following steps.

(1) Update ui only dev branch

(2) Use following command when you pull. amplify pull mkdir -p src/ui-generated rm src/ui-generated -rf mv src/ui-components src/ui-generated

(3) I replaced the code as follows

before: import AComponent from " from './ui-components'

after: import AComponent from " from './ui-generated'

(4) for quickly doing (2), I use following extention for vscode. https://marketplace.visualstudio.com/items?itemName=traBpUkciP.vscode-npm-scripts

I addd following to package.json "scripts": { ... "amplify:pull-y": "amplify pull -y && mkdir -p src/ui-generated && rm src/ui-generated -rf && mv src/ui-components src/ui-generated", }

[sakaal]

This is a severe limitation for the entire Amplify stack. It seems that pieces of the whole don't fit together. AWS is misleading customers claiming that we can manage the UI with Amplify Studio, and claiming that we can have separate development and production environments, but then the Amplify Studio and UI Library are not capable of handling the same. This limitation happens even if you are not using Figma. Just creating a simple form with Amplify Studio, via AWS-supported managed GUI, and then using that form in one environment becomes specific to that environment. If I create a form in development environment, I cannot sync the same to production, so the form will be missing from production environment UI Library. This happens purely when using AWS Amplify and Amplify Studio, independent of Figma.

[dryhurst]

what is the status of this issue? its been going on long enough with no update?