A source component was not found for component id xxx:xxx

[OperationalFallacy]

Which Specific Feature is your question related to?

Figma integration

Question

Hi,

How is the Amplify UI Kit organized, specifically the components on the examples page?

Is it possible to import them? I'm getting tons of errors.

Thanks!

Related
#885

[ykethan]

Hey @OperationalFallacy, the examples in the UI kit are currently not connected to existing primitives and causing the text fields and checkbox to not appear.

Please refer to following file providing an example where i imported the primitives for the Login component in the components section.
https://www.figma.com/file/14t8nfGqsqQeez5kvo3HGT/AWS-Amplify-UI-Kit-(Community)?type=design&node-id=861-3635&mode=design&t=2Fmnekdrm14eh97M-0

[OperationalFallacy]

Hey @OperationalFallacy, the examples in the UI kit are currently not connected to existing primitives and causing the text fields and checkbox to not appear.

Please refer to following file providing an example where i imported the primitives for the Login component in the components section. https://www.figma.com/file/14t8nfGqsqQeez5kvo3HGT/AWS-Amplify-UI-Kit-(Community)?type=design&node-id=861-3635&mode=design&t=2Fmnekdrm14eh97M-0

Thank you, could you mark the component or leave some note there? I can't see the difference.

What's the process to make this higher-level components like login page, footer to work correctly? Should the be re-assembled manually, so-to speak?

[ykethan]

@OperationalFallacy made a visual marker in the figma file, its under My components section.
To provide an example, I set the primitive as follows

If you would like to have a customization on the login, you could use the Amplify UI library authenticator component and customize the it. Please refer to https://ui.docs.amplify.aws/react/connected-components/authenticator/customization
if you want to use Studio UI generated component as login component, you may have add the Sign-in logic manually. But Amplify Studio does provide properties such as Sign-out and user attributes which may assist with this.

[OperationalFallacy]

So when you import this component, does amplify UI work without errors?

I still get the import errors when I copy/pasted the example you created. Or it's not supposed to work this way?

Component "Login Page" was renamed to "LoginPage" for code compatibility.
A source component was not found for component id 4074:268 with name 'TextField'. Please ensure it exists in the Figma file you are working with. For the time being, we have recreated it inside of this component.
A source component was not found for component id 4074:524 with name 'CheckboxField'. Please ensure it exists in the Figma file you are working with. For the time being, we have recreated it inside of this component.
A source component was not found for component id 4074:364 with name '🔒Icon'. Please ensure it exists in the Figma file you are working with. For the time being, we have recreated it inside of this component.

Maybe sing-in is not a good example, and I can use imported component.

I just don't understand how "complex" components supposed should be imported, like footer, or header.

[ykethan]

@OperationalFallacy when we copy paste a component it will not have a reference to the primitive. you will need to set the reference similar to screenshot provided.
In this case you will need to set TextField, CheckboxField and Icon references by selecting the field and modifying it with the primitive present on the right side panel.
If have already imported the default UI kit, they should have example footer and header called MarketingFooter and NavBarHeader. which you could just modify for your use case.

[OperationalFallacy]

Oh, I see. That made a trick.

I'm a completely newbie in Figma and design, so thank you for helping patiently!

[github-actions]

⚠️COMMENT VISIBILITY WARNING⚠️

Comments on closed issues are hard for our team to see.
If you need more assistance, please open a new issue that references this one.
If you wish to keep having a conversation with other community members under this issue feel free to do so.