# Source: https://stately.ai/docs/assets.mdx

# Assets in Statelyâs editor (/docs/assets)
import { Plus, Paperclip, Star, Info } from 'lucide-react';

# Assets

You can drag and drop assets on any state or upload them using the <Plus size={18} /> plus menu and <Paperclip size={18} /> **Asset** on any selected state.

<Callout>
  Assets are a premium feature of Stately Studio. You can try Stately Studioâs premium plans with a free trial. [Check out the features on our Pro plan](studio-pro-plan), [Team plan](studio-team-plan), [Enterprise plan](studio-enterprise-plan) or [upgrade your existing plan](https://stately.ai/registry/billing).
</Callout>

Assets are valuable when you want to include use cases, features, workflows, and more to your state machines. One of our most frequent requests is from teams who want to tie their logic to real-life user interfaces, and assets provide a way to connect user interface design to logic in a way your whole team can understand.

<Callout>
  You can now [embed Figma frames](figma) that stay in sync with your Figma files.
</Callout>

<EmbedMachine embedURL="https://stately.ai/registry/editor/embed/c447d996-cef1-421d-a422-8be695668764?mode=design&machineId=bf81f493-6855-43e7-a6aa-4551f1acdc6e" title="State assets" />

## Order of assets

The first asset, indicated by the <Star size={18} /> star icon, is the asset shown on the canvas.

Further assets are accessible from the state <Info size={18} /> **Details** panel, where you can also drag to reorder the assets and choose their [displayed size](#asset-sizes).

## Asset sizes

Once your asset is uploaded to your state, you can choose the display size from the **Size** menu that shows on hover over the asset, or from the dropdown menu in the state <Info size={18} /> **Details** panel:

* small **sm**
* medium **md**
* large **lg**
* extra large **xl**

<Callout>
  You can also add images from any URL using markdown in [state and transition descriptions](descriptions).
</Callout>