The Problem

Fintech designers spend hours creating realistic-looking charts for mockups and pitch decks. The process is painful: screenshot a chart from TradingView, import it into Figma, trace the candlesticks manually, adjust the colors, hope nobody notices the data is from 2019.

Or worse: make up numbers. Pick some fake prices, draw some candles, and pray it looks believable when you present to stakeholders who actually trade.

I did this for years. Every time I needed a Tesla chart, I'd google "TSLA stock chart," grab a screenshot, and spend 20 minutes recreating it. Multiply that across every project, every revision, every A/B test variant.

Brutal.

‍

The Internal Solution

I built the first version for my team at Capital.com. We were designing trading interfaces and needed realistic data fast. The plugin connected to Capital's API and pulled live market data for stocks, crypto, forex, commodities, and ETFs.

Pick an instrument, choose your timeframe, hit generate. Editable vector chart drops onto your canvas with real price data.
‍

The team started using it immediately. Within two weeks, it became the default way we mocked up charts. No more screenshots. No more fake numbers. Just real data, formatted correctly, ready to design with.

‍

Going Commercial

After seeing how much time it saved internally, I decided to turn it into a product. That meant building all the stuff that makes a plugin feel like an actual service—payments, accounts, emails, the works.

Built the whole thing in three to four weeks. Trading Charts went live on Figma Community in early December.

‍

What It Does

Trading Charts gives you access to hundreds of instruments across stocks, crypto, forex, commodities, and ETFs:

• Stocks (Apple, Tesla, Nvidia, etc.)
• Crypto (Bitcoin, Ethereum, Solana)
• Forex (EUR/USD, GBP/JPY)
• Commodities (Gold, Oil, Natural Gas)
• ETFs and Indices

You can generate candlestick charts or line charts, customize intervals from 5 minutes to monthly, adjust colors, toggle grids, and export everything as editable vectors. The charts use real market data, so when you're designing a crypto dashboard or a stock trading app, you're working with actual price movements.

Free tier gives you 5 charts per month. Pro tier is $15/month for unlimited charts. Enterprise is $29/month with priority support.

How It Works

The plugin has three main pieces:

1. Plugin Interface (Vite + TypeScript)

Built with Vite and TypeScript, compiling down to a single HTML file that Figma can read. The UI shows a live preview of the chart before you generate it, so you know exactly what you're getting. All the UI code lives in modular TypeScript files that bundle into one artifact.
‍

2. Cloudflare Workers Backend

Two separate workers handle different parts of the system. One proxies requests to Capital.com's API, managing authentication and converting their data format to something the plugin can render. The other handles everything license-related: Stripe payments, subscription webhooks, and validation checks.
‍

3. Chart Generation Engine

The Figma plugin backend (code.js) takes the data and generates vector charts directly in your Figma file. It calculates layouts dynamically based on price label widths, positions candlesticks or line segments, adds grids and axes, and outputs everything as editable vector shapes you can customize.

Sessions with Capital.com's API last 10 minutes and get cached for 9 minutes to avoid hitting rate limits. If a data resolution isn't available for a specific instrument, the system automatically falls back to the next best option (e.g., 5-minute → 15-minute → 30-minute intervals).

‍

Current Status

Trading Charts is live on Figma Community. I'm adding more data sources and working on a feature that lets you overlay multiple instruments on one chart.

If you design fintech interfaces, go try it. If you don't, at least you know designers can ship full-stack products now.