← Resources

Metamask Clone (Crypto Wallet)

Metamask Clone (Crypto Wallet)

지갑 로그인, 트랜잭션 승인, 네트워크 전환 & 에러 상태

MetaMask 익스텐션 화면과 상태를 정확하게 재현한 Figma 컴포넌트입니다. 스크린샷을 찍을 필요 없이, 미리 만들어진 컴포넌트를 디자인 플로우에 드래그하기만 하면 됩니다.

지갑 잠금해제, 트랜잭션 승인, 네트워크 전환, 계정 관리, 에러 상태 등 실제 MetaMask 인터페이스와 동일하게 디자인된 컴포넌트를 포함합니다.

  1. Figma를 벗어나지 않고 실제와 같은 유저 플로우 제작 가능
  2. MetaMask 연동 경험을 빠르게 프로토타이핑
  3. 모든 문서에서 디자인 일관성 유지
  4. 이해관계자에게 블록체인 인터랙션을 명확하게 전달
  5. MetaMask 익스텐션에서 사용자가 마주하는 대부분의 시나리오 커버
  6. Figma 내 유저 플로우 검증에 최적화

Variable

해당 Variable을 변경하면 컴포넌트의 텍스트가 자동으로 업데이트됩니다: WalletAddress, NetworkName, NetworkCurrency, BaseCurrency, SiteName, SiteURL

NetworkName을 변경하면 네트워크 아이콘이 자동으로 업데이트됩니다. 다음을 지원합니다. : Ethereum Mainnet, Polygon Mainnet, OP Mainnet, Binance Smart Chain, Avalanche Network C-Chain, Base Mainnet

디자인 시스템

일관된 간격과 테두리를 위해 Tailwind 기반 변수로 제작되었습니다. 원본 변수 다운로드: Local Variables for Tailwind

실제 MetaMask 화면에서 색상과 아이콘을 추출하여 제작했습니다.

후원: https://buymeacoffee.com/0x3den

Wallet login, transaction approval, network switching & error states

Ready-made Figma components that accurately represent MetaMask Extension screens and states. Instead of taking screenshots, simply drag these pre-built components into your design flows.

Components cover wallet unlock, transaction approval, network switching, account management, and error states - all designed to match the actual MetaMask interface.

  1. Create realistic user flows without leaving Figma
  2. Quickly prototype MetaMask-integrated experiences
  3. Maintain design consistency across all documentation
  4. Clearly Communicate blockchain interactions to stakeholders
  5. Cover most scenarios users encounter in MetaMask Extension
  6. Perfect for user flow validation within Figma

Dynamic Variables

These variables automatically update text across all connected components:WalletAddress, NetworkName, NetworkCurrency, BaseCurrency, SiteName, SiteURL

When you change NetworkName, the network icons automatically update for: Ethereum Mainnet, Polygon Mainnet, OP Mainnet, Binance Smart Chain, Avalanche Network C-Chain, Base Mainnet.

Design System

Built with Tailwind-based variables for consistent spacing and borders. Original variables available for download: Local Variables for Tailwind

Made by extracting colors and icons from real MetaMask screens.

Support: https://buymeacoffee.com/0x3den

Figma에서 열기