Getting started
Welcome to the Academy!
What is shadcn/ui?
Getting started in Figma
Website Project (Lesson 1)
Theming
Introduction to theming
Primary color - Method 1. Tailwind CSS
Primary color - Method 2. Custom color
Neutral colors
Font family
Border radius
Creating new color variables
Example - Warning color variables
Creating new themes
Creating new typography styles
Dark mode
Website Project (Lesson 2)
Components
Introduction to components
Editing components
Creating new component variants
Creating new components
Adding custom icons - Method 1. Icon components
Adding custom icons - Method 2. Icon library
Working with the card component
Pricing card component
Website Project (Lesson 3)
Pro Blocks
Introduction to Pro Blocks
Simple landing page
Custom variables collection
Section Title component
Image properties
Pricing section block
Website Project (Lesson 4)
Plugin
Introduction to plugin
License key
API keys & Tokens
Google AI Studio
Anthropic AI
Best practices
Generating code
Exporting variables
Pro Blocks tab
Installing shadcn/ui
Generating code for the Pricing Card component
Website Project (Lesson 5)
Academy
Plugin
API keys & Tokens

API keys & Tokens

Transforming your Figma designs into shadcn/ui code is now possible with our plugin, powered by advanced large language models (LLMs). This article explains the importance of API keys and tokens in using the plugin.

AI Models

Our plugin supports these AI platforms:

Supported AI models include:

  • Gemini 2.5 Pro Preview (Recommended)
  • Claude 3.5 Sonnet
  • Claude 3.7 Sonnet

Why Do You Need an API Key?

An API key is essential for:

  • Access to AI Models: It allows the plugin to communicate with external AI providers to generate code.
  • Authentication & Authorization: It verifies your identity and authorizes requests.
  • Usage Tracking & Billing: It tracks your usage for billing purposes.

What Are Tokens?

Tokens are the basic units of data AI models use to process information. In our plugin:

  • Input Tokens: Describe your Figma design to the AI.
  • Output Tokens: Represent the generated shadcn/ui code.

Why Are Tokens (and AI Usage) Paid?

AI models incur costs due to:

  • Computational Resources: Training and running models require significant computing power.
  • Model Development & Maintenance: Continuous improvement and safety measures involve substantial investment.
  • Infrastructure Costs: Operating data centers and servers is expensive.
  • Specialized AI for Complex Tasks: Tailoring AI to specific tasks increases complexity and cost.

API keys and token-based billing enable these services, allowing our plugin to efficiently convert your designs into high-quality code. Understanding these concepts helps you manage your usage effectively.

‍

In upcoming lessons, you'll learn how to obtain an API key from the mentioned platforms. Choose one to get started.

Up next
Google AI Studio
Learn how to create a Google AI Studio account, set up billing, and get the API key.