[V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true" import { FigmaExporter } from "@/components/figma-exporter" export default function Home() { return (

Figma Frame Exporter

Exporte frames do Figma como imagens de forma fácil e rápida

) } [V0_FILE]typescript:file="app/api/figma/export/route.ts" isMerged="true" import { type NextRequest, NextResponse } from "next/server" interface ExportRequest { fileKey: string accessToken: string frameIds: string[] settings: { format: "png" | "jpg" | "svg" | "pdf" scale: number } } export async function POST(request: NextRequest) { try { const body: ExportRequest = await request.json() const { fileKey, accessToken, frameIds, settings } = body if (!fileKey || !accessToken || !frameIds || frameIds.length === 0) { return NextResponse.json({ error: "Parâmetros obrigatórios ausentes" }, { status: 400 }) } // Construir URL da API do Figma para exportação const params = new URLSearchParams({ ids: frameIds.join(","), format: settings.format, scale: settings.scale.toString(), }) // Adicionar parâmetros específicos para SVG if (settings.format === "svg") { params.append("svg_include_id", "true") params.append("svg_simplify_stroke", "true") } const exportUrl = `https://api.figma.com/v1/images/${fileKey}?${params.toString()}` // Fazer requisição para a API do Figma const response = await fetch(exportUrl, { headers: { "X-Figma-Token": accessToken, }, }) if (!response.ok) { const errorData = await response.json() return NextResponse.json({ error: errorData.message || "Erro ao exportar frames" }, { status: response.status }) } const data = await response.json() if (data.err) { return NextResponse.json({ error: data.err }, { status: 400 }) } // Retornar URLs das imagens geradas return NextResponse.json({ images: data.images, message: `${frameIds.length} frames exportados com sucesso`, }) } catch (error) { console.error("Erro ao exportar frames:", error) return NextResponse.json({ error: "Erro interno do servidor" }, { status: 500 }) } } [V0_FILE]typescriptreact:file="components/ui/checkbox.tsx" isMerged="true" "use client" import * as React from "react" import * as CheckboxPrimitive from "@radix-ui/react-checkbox" import { Check } from "lucide-react" import { cn } from "@/lib/utils" const Checkbox = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) Checkbox.displayName = CheckboxPrimitive.Root.displayName export { Checkbox } [V0_FILE]typescriptreact:file="components/ui/select.tsx" isMerged="true" "use client" import * as React from "react" import * as SelectPrimitive from "@radix-ui/react-select" import { Check, ChevronDown, ChevronUp } from "lucide-react" import { cn } from "@/lib/utils" const Select = SelectPrimitive.Root const SelectGroup = SelectPrimitive.Group const SelectValue = SelectPrimitive.Value const SelectTrigger = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, children, ...props }, ref) => ( span]:line-clamp-1", className, )} {...props} > {children} )) SelectTrigger.displayName = SelectPrimitive.Trigger.displayName const SelectScrollUpButton = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName const SelectScrollDownButton = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName const SelectContent = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, children, position = "popper", ...props }, ref) => ( {children} )) SelectContent.displayName = SelectPrimitive.Content.displayName const SelectLabel = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) SelectLabel.displayName = SelectPrimitive.Label.displayName const SelectItem = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, children, ...props }, ref) => ( {children} )) SelectItem.displayName = SelectPrimitive.Item.displayName const SelectSeparator = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) SelectSeparator.displayName = SelectPrimitive.Separator.displayName export { Select, SelectGroup, SelectValue, SelectTrigger, SelectContent, SelectLabel, SelectItem, SelectSeparator, SelectScrollUpButton, SelectScrollDownButton, } [V0_FILE]typescriptreact:file="components/ui/badge.tsx" isMerged="true" import type * as React from "react" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const badgeVariants = cva( "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2", { variants: { variant: { default: "border-transparent bg-primary text-primary-foreground hover:bg-primary/80", secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80", destructive: "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80", outline: "text-foreground", }, }, defaultVariants: { variant: "default", }, }, ) export interface BadgeProps extends React.HTMLAttributes, VariantProps {} function Badge({ className, variant, ...props }: BadgeProps) { return

} export { Badge, badgeVariants } [V0_FILE]json:file="package.json" isMerged="true" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "1.3.1", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "geist": "^1.3.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "14.2.25", "next-themes": "^0.4.6", "react": "^19", "react-day-picker": "9.8.0", "react-dom": "^19", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "vaul": "^0.9.9", "zod": "3.25.67" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^18", "@types/react-dom": "^18", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]typescriptreact:file="components/figma-exporter.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Checkbox } from "@/components/ui/checkbox" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Badge } from "@/components/ui/badge" import { Loader2, Download, Eye, FileImage, ImageIcon } from "lucide-react" import { useToast } from "@/hooks/use-toast" interface FigmaFrame { id: string name: string type: string absoluteBoundingBox?: { x: number y: number width: number height: number } } interface ExportSettings { format: "png" | "jpg" | "svg" | "pdf" scale: number } export function FigmaExporter() { const [figmaUrl, setFigmaUrl] = useState("") const [accessToken, setAccessToken] = useState("") const [frames, setFrames] = useState([]) const [selectedFrames, setSelectedFrames] = useState>(new Set()) const [thumbnails, setThumbnails] = useState>({}) const [exportSettings, setExportSettings] = useState({ format: "png", scale: 1, }) const [loading, setLoading] = useState(false) const [exporting, setExporting] = useState(false) const { toast } = useToast() // Extrair file key da URL do Figma const extractFileKey = (url: string) => { const match = url.match(/figma\.com\/design\/([a-zA-Z0-9]+)/) return match ? match[1] : null } // Buscar frames do arquivo Figma const fetchFrames = async () => { if (!figmaUrl || !accessToken) { toast({ title: "Erro", description: "Por favor, insira a URL do Figma e o token de acesso", variant: "destructive", }) return } const fileKey = extractFileKey(figmaUrl) if (!fileKey) { toast({ title: "Erro", description: "URL do Figma inválida", variant: "destructive", }) return } setLoading(true) try { const response = await fetch(`/api/figma/frames?fileKey=${fileKey}&accessToken=${accessToken}`) const data = await response.json() if (!response.ok) { throw new Error(data.error || "Erro ao buscar frames") } setFrames(data.frames) setThumbnails(data.thumbnails || {}) toast({ title: "Sucesso", description: `${data.frames.length} frames encontrados`, }) } catch (error) { toast({ title: "Erro", description: error instanceof Error ? error.message : "Erro ao buscar frames", variant: "destructive", }) } finally { setLoading(false) } } // Alternar seleção de frame const toggleFrameSelection = (frameId: string) => { const newSelection = new Set(selectedFrames) if (newSelection.has(frameId)) { newSelection.delete(frameId) } else { newSelection.add(frameId) } setSelectedFrames(newSelection) } // Selecionar todos os frames const selectAllFrames = () => { if (selectedFrames.size === frames.length) { setSelectedFrames(new Set()) } else { setSelectedFrames(new Set(frames.map((f) => f.id))) } } // Exportar frames selecionados const exportFrames = async () => { if (selectedFrames.size === 0) { toast({ title: "Erro", description: "Selecione pelo menos um frame para exportar", variant: "destructive", }) return } const fileKey = extractFileKey(figmaUrl) if (!fileKey) return setExporting(true) try { const response = await fetch("/api/figma/export", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ fileKey, accessToken, frameIds: Array.from(selectedFrames), settings: exportSettings, }), }) const data = await response.json() if (!response.ok) { throw new Error(data.error || "Erro ao exportar frames") } // Download das imagens for (const [frameId, imageUrl] of Object.entries(data.images)) { const frame = frames.find((f) => f.id === frameId) const fileName = `${frame?.name || frameId}.${exportSettings.format}` // Criar link de download const link = document.createElement("a") link.href = imageUrl as string link.download = fileName link.target = "_blank" document.body.appendChild(link) link.click() document.body.removeChild(link) } toast({ title: "Sucesso", description: `${selectedFrames.size} frames exportados com sucesso`, }) } catch (error) { toast({ title: "Erro", description: error instanceof Error ? error.message : "Erro ao exportar frames", variant: "destructive", }) } finally { setExporting(false) } } return (

{/* Configuração inicial */} Exportador de Frames do Figma Visualize e exporte frames do seu arquivo Figma como imagens

URL do Figma setFigmaUrl(e.target.value)} />

Token de Acesso setAccessToken(e.target.value)} />

Obtenha seu token em: Figma → Settings → Personal Access Tokens

{/* Configurações de exportação */} {frames.length > 0 && ( Configurações de Exportação

Formato

Escala

)} {/* Lista de frames */} {frames.length > 0 && (

Frames Disponíveis Visualize e selecione os frames que deseja exportar

{frames.map((frame) => (

toggleFrameSelection(frame.id)} >

toggleFrameSelection(frame.id)} onClick={(e) => e.stopPropagation()} />

{thumbnails[frame.id] ? ( {frame.name}

{ const target = e.target as HTMLImageElement target.style.display = "none" target.nextElementSibling?.classList.remove("hidden") }} /> ) : null}

{frame.name}

{frame.absoluteBoundingBox && (

{Math.round(frame.absoluteBoundingBox.width)} ×{" "} {Math.round(frame.absoluteBoundingBox.height)}px

)} {frame.type}

))}

)}

) } [V0_FILE]typescript:file="app/api/figma/frames/route.ts" isEdit="true" isQuickEdit="true" import { type NextRequest, NextResponse } from "next/server" export async function GET(request: NextRequest) { const searchParams = request.nextUrl.searchParams const fileKey = searchParams.get("fileKey") const accessToken = searchParams.get("accessToken") if (!fileKey || !accessToken) { return NextResponse.json({ error: "File key e access token são obrigatórios" }, { status: 400 }) } try { // Buscar informações do arquivo Figma const response = await fetch(`https://api.figma.com/v1/files/${fileKey}`, { headers: { "X-Figma-Token": accessToken, }, }) if (!response.ok) { const errorData = await response.json() return NextResponse.json( { error: errorData.message || "Erro ao acessar arquivo Figma" }, { status: response.status }, ) } const data = await response.json() const findFrames = (node: any, isTopLevel = false): any[] => { const frames: any[] = [] // Filtrar apenas frames que são realmente frames principais if (node.type === "FRAME" && isTopLevel) { // Excluir componentes, instâncias e frames muito pequenos const isComponent = node.type === "COMPONENT" || node.type === "COMPONENT_SET" const isInstance = node.type === "INSTANCE" const isSmallFrame = node.absoluteBoundingBox && (node.absoluteBoundingBox.width < 50 || node.absoluteBoundingBox.height < 50) // Incluir apenas se não for componente, instância ou frame muito pequeno if (!isComponent && !isInstance && !isSmallFrame) { frames.push({ id: node.id, name: node.name, type: node.type, absoluteBoundingBox: node.absoluteBoundingBox, width: node.absoluteBoundingBox?.width || 0, height: node.absoluteBoundingBox?.height || 0, }) } } // Continuar busca apenas nos filhos diretos das páginas if (node.children && isTopLevel) { for (const child of node.children) { frames.push(...findFrames(child, false)) } } return frames } const allFrames: any[] = [] if (data.document && data.document.children) { for (const page of data.document.children) { if (page.type === "CANVAS" && page.children) { // Buscar apenas nos filhos diretos da página (top-level frames) for (const child of page.children) { if (child.type === "FRAME") { // Verificar se é um frame principal (não componente/instância) const isComponent = child.type === "COMPONENT" || child.type === "COMPONENT_SET" const isInstance = child.type === "INSTANCE" const isSmallFrame = child.absoluteBoundingBox && (child.absoluteBoundingBox.width < 50 || child.absoluteBoundingBox.height < 50) if (!isComponent && !isInstance && !isSmallFrame) { allFrames.push({ id: child.id, name: child.name, type: child.type, absoluteBoundingBox: child.absoluteBoundingBox, width: child.absoluteBoundingBox?.width || 0, height: child.absoluteBoundingBox?.height || 0, pageName: page.name, // Adicionar nome da página }) } } } } } } let thumbnails = {} if (allFrames.length > 0) { const frameIds = allFrames.map((frame) => frame.id).join(",") try { const thumbnailResponse = await fetch( `https://api.figma.com/v1/images/${fileKey}?ids=${frameIds}&format=png&scale=0.25`, { headers: { "X-Figma-Token": accessToken, }, }, ) if (thumbnailResponse.ok) { const thumbnailData = await thumbnailResponse.json() thumbnails = thumbnailData.images || {} } } catch (error) { console.error("Erro ao buscar thumbnails:", error) } } return NextResponse.json({ frames: allFrames, fileName: data.name, thumbnails, // Incluir thumbnails na resposta }) } catch (error) { console.error("Erro ao buscar frames:", error) return NextResponse.json({ error: "Erro interno do servidor" }, { status: 500 }) } }