Transformez vos projets Figma en composants shadcn avec Anima

Nous sommes ravis de dévoiler une nouvelle fonctionnalité d’Anima : la prise en charge de shadcn ! Désormais, designers et développeurs peuvent collaborer de manière fluide pour convertir des designs Figma en code shadcn propre et prêt pour la production, adapté à Tailwind CSS. Grâce à l’intégration d’Anima, vous accélérerez votre processus de développement tout en maintenant la cohérence du design et la qualité du code.

Points forts

Anima prend désormais en charge shadcn, permettant une transformation rapide et efficace des designs Figma en composants shadcn basés sur Tailwind. Pour une expérience optimale, nous recommandons de commencer avec la bibliothèque officielle shadcn pour Figma, afin d’aligner vos designs avec les composants shadcn dès le départ. Créez dès aujourd’hui avec Anima et optimisez vos flux de travail Tailwind !

Le fossé entre design et développement

Les designers privilégient la créativité et l’expérience utilisateur, travaillant souvent sur une toile vierge dans Figma. Bien que cette flexibilité favorise l’innovation, elle peut engendrer des défis lors de la traduction des designs en code structuré. Les développeurs, quant à eux, doivent produire des composants évolutifs et réutilisables alignés sur des frameworks comme shadcn.

Ce décalage peut ralentir les projets et créer des inefficacités. Anima comble cet écart en transformant les idées de design en composants shadcn avec précision et rapidité, permettant aux équipes de livrer plus vite et mieux.

Qu’est-ce que shadcn ?

shadcn est une bibliothèque de composants moderne et flexible construite sur Radix UI Primitives et stylisée avec Tailwind CSS. Elle fournit des composants accessibles et non stylés pouvant être adaptés à tout système de design ou lignes directrices de marque. Avec shadcn, les développeurs ont un contrôle total sur l’apparence et les fonctionnalités de leurs composants, ce qui en fait un choix idéal pour créer des éléments d’interface utilisateur évolutifs, réutilisables et de haute qualité.

Comment Anima simplifie l’intégration de shadcn

Vous commencez avec shadcn ?

• Utilisez le plugin Figma d’Anima pour concevoir des mises en page et des composants alignés avec le système de shadcn.
• Anima génère automatiquement des composants shadcn avec les utilitaires Tailwind, prêts à être implémentés.

Vous avez déjà un projet ?

• L’extension VS Code d’Anima, Frontier, apprend de votre configuration existante : vos composants, votre configuration Tailwind et votre thématisation.
• Frontier génère du code shadcn entièrement compatible avec la structure de votre projet, vous faisant gagner des heures de codage manuel.

Découvrez les résultats : comment Anima fonctionne avec shadcn

Méthode de paiement

import { Button } from "@/components/ui/button";
import {
  Card,
  CardContent,
  CardFooter,
  CardHeader,
} from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { Apple, CreditCard } from "lucide-react";
import React from "react";

const paymentMethods = [
  { id: "card", name: "Card", icon: CreditCard },
  {
    id: "paypal",
    name: "Paypal",
    icon: () => (
      <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
        <path
          d="M19.5 8.5h-2.5a2 2 0 0 0-2-2h-6a2 2 0 0 0-2 2h-2.5"
          stroke="currentColor"
          strokeWidth="1.5"
          strokeLinecap="round"
          strokeLinejoin="round"
        />
      </svg>
    ),
  },
  { id: "apple", name: "Apple", icon: Apple },
];

const months = Array.from({ length: 12 }, (_, i) => ({
  value: String(i + 1).padStart(2, "0"),
  label: String(i + 1).padStart(2, "0"),
}));

const years = Array.from({ length: 10 }, (_, i) => ({
  value: String(new Date().getFullYear() + i),
  label: String(new Date().getFullYear() + i),
}));

export default function PaymentMethod() {
  return (
    <Card className="w-[400px]">
      <CardHeader className="space-y-1.5">
        <h2 className="text-lg font-semibold leading-none">Payment Method</h2>
        <p className="text-sm text-muted-foreground">
          Add a new payment method to your account.
        </p>
      </CardHeader>

      <CardContent className="space-y-4">
        <div className="grid grid-cols-3 gap-4">
          {paymentMethods.map((method) => (
            <Button
              key={method.id}
              variant="outline"
              className="h-20 flex-col gap-2"
            >
              <method.icon className="h-6 w-6" />
              <span className="text-sm font-medium">{method.name}</span>
            </Button>
          ))}
        </div>

        <div className="space-y-2">
          <label className="text-sm font-medium">Name</label>
          <Input defaultValue="First Last" />
        </div>

        <div className="space-y-2">
          <label className="text-sm font-medium">Card number</label>
          <Input />
        </div>

        <div className="grid grid-cols-3 gap-4">
          <div className="space-y-2">
            <label className="text-sm font-medium">Expires</label>
            <Select>
              <SelectTrigger>
                <SelectValue placeholder="Month" />
              </SelectTrigger>
              <SelectContent>
                {months.map((month) => (
                  <SelectItem key={month.value} value={month.value}>
                    {month.label}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>

          <div className="space-y-2">
            <label className="text-sm font-medium">Year</label>
            <Select>
              <SelectTrigger>
                <SelectValue placeholder="Year" />
              </SelectTrigger>
              <SelectContent>
                {years.map((year) => (
                  <SelectItem key={year.value} value={year.value}>
                    {year.label}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>

          <div className="space-y-2">
            <label className="text-sm font-medium">CVC</label>
            <Input placeholder="CVC" />
          </div>
        </div>
      </CardContent>

      <CardFooter>
        <Button className="w-full">Continue</Button>
      </CardFooter>
    </Card>
  );
}

Anima détecte intelligemment des propriétés telles que la taille, la variante et le type, garantissant une intégration fluide avec shadcn.

Maximisez votre efficacité avec Anima

Pour obtenir les meilleurs résultats, nous recommandons de concevoir avec la bibliothèque shadcn pour Figma. Cela garantit que vos designs s’alignent avec les composants préconstruits, produisant un code plus propre et plus efficace. Même si vos designs s’écartent de la bibliothèque, Anima s’adaptera, créant un résultat de haute qualité et utilisable.

À venir : génération de configuration Tailwind

Nous travaillons sur de nouvelles fonctionnalités pour améliorer davantage votre flux de travail, notamment la possibilité de générer un fichier de configuration Tailwind directement à partir de vos designs Figma. Cela permettra de standardiser vos tokens de design et d’assurer la cohérence dans votre projet.

Commencez à mieux construire dès aujourd’hui

Avec l’intégration shadcn d’Anima, vous pouvez transformer vos designs Figma en composants Tailwind robustes rapidement et facilement. Qu’il s’agisse d’un simple bouton ou d’une interface utilisateur détaillée, Anima vous permet de vous concentrer sur l’essentiel : offrir des produits exceptionnels.

Prêt à faire passer vos projets Tailwind au niveau supérieur ? Essayez Anima dès aujourd’hui et découvrez la puissance de la transformation design-to-code avec shadcn.