How to build a Shopify store with a custom UI using Figma + Anima

We built a live eCommerce app in Figma using Anima's React Component Library. Then we turned it into a Shopify template and deployed it on Netlify using Anima's generated code. Here's how.

Before starting

1. Sign up to Anima
2. Install the Anima plugin for Figma
3. Install Node.js

Part one: Make your design interactive

We've added a ton of interactive open source React components to our Figma plugin. You can use them to create your own design file or duplicate our sample file to get started.

Step 1: Explore the Component Library

1. Open the Anima plugin for Figma.
2. Select Component Library.

Step 2: Insert a MUI component

1. Select MUI from the Component Library menu.
2. Choose the component you want to use and customize it for your application.
3. Click insert to add the component to your canvas, then incorporate it into your design.

Part two: Go from Figma to React using Anima

Once you're happy with your design, you can export it as developer-friendly React code using Anima.

Step 1: Sync to Anima

1. Open the plugin in Figma
2. Click Preview , then Sync

Step 2: Export React code

1. Open your project in the Anima web app and select Export code
2. Change Selected Framework to React
3. Export code for the entire project

Step 3: Run locally

1. Unzip the downloaded code
2. Open terminal in the Anima code folder
3. Run npm install
4. Run npm start
5. Open http://localhost:1234

Part three: Create a Shopify project with Hydrogen

Once you're happy with your design, you can export it as developer-friendly React code using Anima.

1. Use this guide to create another project with the basic Shopify features
2. Follow this guide to prepare your Shopify template for deployment to Netlify

Part four: Combine Both Projects

Now we have two projects, one generated by Anima and the other one generated by Shopifys Hydrogen library. From now on, the Shopify Hydrogen project will be the primary project where all of the files and folders will be merged.

1. package.json : Add dependencies from Animas project into Shopifys and run npm install.
2. jsconfig.json : Change property jsx from react to react-jsx.
3. src :
   1. assets : Create new assets folder inside the src folder and move the Anima projects img and fonts folders into it.
   2. index.css: Move the Anima projects globals.css and styleguide.css code into the Shopify projects index.css.
   3. components : Move the components folder from Animas project into Shopifys project, and change all Link components to use @shopify/hydrogen instead of react-router-dom.

If the component has an image, replace the image source with a variable declared at the top of the file on an import statement (if path is specified by a prop then remove that prop and set the path based on the variable at the constants folder):

4. **routes** : Create new files for each page in the routes folder using [this guide](https://shopify.dev/custom-storefronts/hydrogen/framework/routes) (the index.server.js should be used as the Home Page)
5. **constants** : If Animas project has generated multiple variables for the props of each page in the _App.jsx_ file, then create a _constants_ folder in the _src_ folder and add all these variables to its index.client.jsx file. Add **export** before each one, and if any jsx code has been generated inside any of these variables, then remove it.                                                                                                                                                                                                  

For example, if you have something like this:

It should be changed to this:

Part five: Connect with Shopify API

1. Create a Shopify Partner Account.
2. Create a Development Store by following this guide.
3. Add some products to this new store (it must have at least one variant).
4. Generate a storefront access token by following this guide.
5. Add your storefront token and your store domain to hydrogen.config.js.
6. Create a query by following this guide, or use this code example to get product data:

Now in the HomePage you can use the products array for rendering each product card with the actual data from the Shopify store.

Part six: Add a cart and checkout

1. Create CartProvider.client.jsx inside the components folder with the following code inside:

1. Create CartUIProvider.client.jsx inside the components folder with the following code inside:

1. Add Context to App.server.jsx:

1. Create AddToCartButton.client.jsx file inside the components folder with the following code:

1. Wrap every product component with ProductOptionsProvider from @shopify/hydrogen/client, pass the corresponding product to it, and use the created AddToCartButton:

1. On the Cart Page we import the useCart hook from @shopify/hydrogen/client and render each selected product from the lines property (for more info check out this tutorial) then we display the total cost of the cart and add the checkoutUrl to the pay button:

Part seven: Add Tailwind CSS and Make it Responsive

We'll be using the Tailwind CSS framework to make each page responsive.

1. Install tailwind css and its peer dependencies, and generate the tailwind.config.js and postcss.config.js files:

$ npm install -D tailwindcss @tailwindcss/typography postcss autoprefixer  
$ npx tailwindcss init -p

1. Add the paths to the template files in your tailwind.config.js file:

1. Add the paths to the template files in your tailwind.config.js file:

1. Make each router page display the corresponding component depending on the screen size. For example:

Part eight: Build & Publish to Netlify

Netlify is a great cloud platform to host React apps. Follow their deployment guide to connect your repo and automatically deploy your app.

Heres how to deploy to Netlify.

See for yourself

• Check out the Figma file here,
• Inspect the code here,
• Explore the live app here.

---

The post How to build a Shopify store with a custom UI using Figma + Anima, written by Ignacio Daz, appeared first on Anima Blog.