How do I import images into Figma UI Generated Components in Amplify?

0

I am using the generated UI components that come standard with the Figma-UI library premade by Amplify. Specifically, a card called ProductCard has product information with an image attached. When configuring the component in the Amplify Studio, I want to attach a static photo as the source of the picture. What are some ways to go about this?

I have the SVG on my local machine and normal react development would bundle the SVG into the code. Should I put the local development path in the src? Should I upload the SVG to the public bucket and point the src to that URL? Can I override the card's child props so I can make its src from the local development? Screenshot of studio

<Image
          width="154px"
          height="63px"
          display="block"
          gap="unset"
          alignItems="unset"
          justifyContent="unset"
          shrink="0"
          position="relative"
          padding="0px 0px 0px 0px"
          objectFit="cover"
          src="https://tmtamplifyapp-storage-c3cc73b4102934-dev.s3.amazonaws.com/public/tmt-logo.png"
          onClick={() => {
            mptOneOnClick();
          }}
          {...getOverrideProps(overrides, "mpt 1")}
        ></Image>

Then in the generated code, there is a part for overrides props. I want to keep the connection with the components' UI for future usage.

No Answers

You are not logged in. Log in to post an answer.

A good answer clearly answers the question and provides constructive feedback and encourages professional growth in the question asker.

Guidelines for Answering Questions