Build a banking app with Ant Design + Strapi.io

Anima is back end, design tool, and hosting agnostic. We're able to help our users ship products 10x faster by seamlessly integrating with a diverse range of tools and solutions. Occasionally, we like to test our approach by building a design-to-code solution that delivers on this.

Through the Anima Partners series, we'll look at how you can partner technology solutions with Anima to optimize your design-to-code workflow.

We redesigned the Silicon Valley Bank (SVB) banking app using Animas open source Component Library for Figma, connected our data, and went live in two days.

With Animas ready-to-use React components from Recharts and Ant Design, it took us 1 day to design and 1 day to go live using Strapi's headless CMS as the back end, with the app being deployed on Netlify.

How to build a React app fast with Figma + Anima + Strapi.io

Before starting

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

Partnered tech solutions used in this build: Figma + Recharts + Ant Design + Strapi.io + Netlify

Part one: Make your design interactive

We have a ton of interactive open source React components in our Figma plugin. Use them to create your own design file or duplicate our sample file to get started.

Step one: Explore the Component Library

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

Step two: Insert a chart

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

You can use the component library to insert any components you like

Part two: Convert your Figma design to React code using Anima

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

Step one: Sync to Anima

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

Step two: 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 whole project

Step three: Run locally

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

You now have the app running locally

Part three: Connect the charts to your data

Next, you want to populate your charts with real data from an API. To do this, we're going to set up Strapi and get our app connected to it. If you'd prefer, you can use the REST API of your choice instead.

Step one: Set up Strapi

1. Follow this Quick Start Guide to get Strapi up and running
2. Create your admin account

Step two: Connect your app to Strapi

1. In Strapi, go to Settings > API Tokens > Create a new API Token
2. Copy the API token
3. In the project folder, create a file called .env
4. Add the URL and Token (without the word Bearer) to this file:

API_URL=http://localhost:1337/api/
API_TOKEN=[YOUR API TOKEN]

Step three: Populate data in Strapi

1. In Strapi, go to Content-type builder and create a new collection type
2. Name the collection BalanceHistory
3. Add the following fields:
   • Month: Date
   • Amount: Number (Decimal)
4. Create entries for BalanceHistory and publish each one

Step four: Populate chart data using API

1. Open the code for one of your charts (i.e. BalanceChart)
2. Add code to fetch data from the Strapi API
3. Replace static data with fetched data in the chart args (here's an example)

Your chart is now using data fetched from your API

Build & Publish to Netlify

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

Heres how to deploy to Netlify.

Interested in joining our Partner Program, or seeing our tech partners? Get more info here.

Additional resources:

• Live app on Netlify
• Source code on GitHub
• Figma community file