Start with real components.
Eleven native Figma variants with editable text, Auto Layout and linked examples. Change a state without rebuilding the card.
.fig · variants · instancesWallet & transfer interfaces
Give uncertainty
a clear next step.
A complete transfer flow, from connecting a wallet to checking an unknown result. Native Figma components, React behavior and words that stay in sync.
11 states. One shared contract.
For designers and developers building together.
Result unknown
We cannot confirm the result yet
A response is missing or could not be verified. The original request may still complete.
Transfer amount12.5 USDC
- Network
- Base Sepolia
- Request
- Original request retained
Recovery guidance
Resolve the existing request before sending again. A timeout is not proof that the transfer failed.
- Next action
- Check existing request
State anatomy · actual Core copy
Native FigmaReact + TypeScriptState & copy catalogBase Sepolia example
Made to move from design to code
One flow.
Shared understanding.
Carry the same states, messages and recovery actions through your design file and implementation.
<TransactionFlow
controller={controller}
asset={asset}
network={network}
/>Keep the request intact.
React components and a typed controller preserve the original request through asynchronous responses, reload and recovery.
React · TypeScript · scoped CSSReview→Submit→Verify
Work from an integration.
A standalone Base Sepolia example, state catalog, copy CSV and sync checks connect the interface to a concrete transfer flow.
Example · JSON · CSV · guideSee the design file
The native components,
up close.
These are actual exports from the Core Figma file. Open an image to inspect its text, spacing and long transaction IDs. Screenshots show the design; they do not operate a wallet.
The file contains eleven editable variants and linked instances. Figma’s State property changes the instance; Auto Layout and text layers remain editable. See compatibility and integration scope ↗
From the installed example
One request.
Even when it takes longer.
Follow a delayed wallet response through five recorded moments. These images show the included React component running with a simulated wallet and network.
Recorded example, simulated wallet/network
No live wallet connection or funds. Select a step to inspect what the buyer example displayed.
Read the example’s integration scope ↗
Look inside the lifecycle
Read every state.
Select a moment to see its exact message, recovery guidance and next action. This is a copy explorer; it does not connect a wallet.
transaction.unknown
Result unknownWe cannot confirm the result yet
A response is missing or could not be verified. The original request may still complete.
Recovery guidance
Resolve the existing request before sending again. A timeout is not proof that the transfer failed.
Next action
Includes uncertainty, rejection, reversion and replacement — each with its own response.
Built for a focused job
For the flow your
team is shipping.
Use Core as the design and interface layer for a wallet or token-transfer experience. Adjust its styling and connect it to your application's state.
The included integration targets direct USDC transfers on Base Sepolia with a browser EOA wallet. Your application owns its network configuration, trusted recovery records, receipt verification and order fulfillment.
Read the integration boundaryChoose who will use it
Same kit.
The right license.
Keep the purchased version. Core updates released within 12 months are included. Pay once in native USDC on Base.
Personal
For one individual
39USDC
One person accessing or editing the source files.
- Full Core Kit · native Figma and code
- Unlimited own and client end products
- 12 months of Core package updates
- Purchase recovery with your wallet
Team
For one organization
119USDC
Up to 10 active editors, including your contractors.
- Full Core Kit · native Figma and code
- Unlimited own and client end products
- 12 months of Core package updates
- Purchase recovery with your wallet
Commercial use included. Reusable source redistribution and resale are excluded. Network fees are separate and shown in your wallet.
Read the full license ↗Try the smaller starting point
Meet the free starter.
Eight state examples, an editable SVG board, React/Tailwind source and copy data. A separate sample with its own free licenses.