# Figma File Button

> File-link button with the multicolor Figma mark, file name and subtext.

- Author: Atelier UI
- License: MIT
- Page: https://chromotion.dev/en/components/figma-file-button
- Site: Atelier UI (https://chromotion.dev)

## Install

```bash
npx shadcn@latest add https://chromotion.dev/r/figma-file-button.json
```

Stack: React + TypeScript + Tailwind CSS v4, shadcn/ui conventions. `cn` comes from `@/lib/utils`.

## Dependencies

```bash
npm install lucide-react
```

## Usage

```tsx title="components/figma-file-button-demo.tsx"
import { FigmaFileButton } from "@/components/figma-file-button"

export default function FigmaFileButtonDemo() {
  return (
    <div className="flex flex-wrap items-center justify-center gap-4 p-8">
      <FigmaFileButton />
      <FigmaFileButton fileName="Mobile app v3" subtext="Edited 2 hours ago" />
    </div>
  )
}
```

## Source

```tsx title="components/figma-file-button.tsx"
import * as React from "react"
import { ExternalLink } from "lucide-react"

import { cn } from "@/lib/utils"

export interface FigmaFileButtonProps extends React.ComponentProps<"a"> {
  fileName?: string
  subtext?: string
}

export function FigmaFileButton({
  fileName = "Design system.fig",
  subtext = "Open in Figma",
  className,
  href = "https://figma.com",
  ...props
}: FigmaFileButtonProps) {
  return (
    <a
      href={href}
      className={cn(
        "group inline-flex items-center gap-3 rounded-xl border border-border bg-card py-2.5 pr-4 pl-3 text-card-foreground shadow-xs",
        "transition-[background-color,transform,border-color] hover:border-foreground/30 hover:bg-accent active:scale-[0.98]",
        "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background focus-visible:outline-none",
        className
      )}
      {...props}
    >
      <svg aria-hidden viewBox="0 0 38 57" className="h-8 w-5 shrink-0 transition-transform duration-300 group-hover:-rotate-6 group-hover:scale-110">
        <path fill="#1abcfe" d="M19 28.5a9.5 9.5 0 1 1 19 0 9.5 9.5 0 0 1-19 0z" />
        <path fill="#0acf83" d="M0 47.5A9.5 9.5 0 0 1 9.5 38H19v9.5a9.5 9.5 0 1 1-19 0z" />
        <path fill="#ff7262" d="M19 0h9.5a9.5 9.5 0 1 1 0 19H19V0z" />
        <path fill="#f24e1e" d="M0 9.5A9.5 9.5 0 0 0 9.5 19H19V0H9.5A9.5 9.5 0 0 0 0 9.5z" />
        <path fill="#a259ff" d="M0 28.5A9.5 9.5 0 0 0 9.5 38H19V19H9.5A9.5 9.5 0 0 0 0 28.5z" />
      </svg>
      <span className="flex flex-col leading-tight">
        <span className="text-sm font-semibold">{fileName}</span>
        <span className="mt-0.5 inline-flex items-center gap-1 text-xs text-muted-foreground">
          {subtext}
          <ExternalLink className="size-3 transition-transform duration-200 group-hover:translate-x-0.5 group-hover:-translate-y-0.5" />
        </span>
      </span>
    </a>
  )
}
```