Як синхронізувати властивості Figma з конфігурацією Tailwind та генерувати класи
Вступ
Сьогодні існує багато інструментів, які обіцяють генерувати вихідний код з дизайну Figma. Однак через те, що ці інструменти не здатні зрозуміти контекст, вони зазвичай генерують код, який вимагає багато годин від розробників для аналізу, рефакторингу та виправлення.
Генератор Tailwind для Figma
Замість того, щоб намагатися замінити вас, Generic Tailwind Generator синхронізується з вашою конфігурацією Tailwind і генерує лише ті властивості, які не залежать від контексту застосунку, функціональності або архітектури. Наприклад, коли розмір шрифту тексту становить 12px, це клас Tailwind text-xs. Ви можете додати префікс lg:, якщо хочете, щоб цей розмір шрифту застосовувався тільки на мобільних пристроях, але якщо інструмент спробує зробити це за вас, вам, ймовірно, доведеться оновити цей код.
1. Відкрийте вашу локальну конфігурацію Tailwind
Перейдіть у папку вашого проєкту, де міститься файл tailwind.config.ts або tailwind.config.js, і виконайте наступну команду:
npx generic-css-cli
2. Запустіть плагін у Figma
У файлі Figma вашого проєкту зробіть правий клік, потім:
Плагіни → Керувати плагінами. Знайдіть Generic Tailwind Generator
Натисніть на синю кнопку Запустити. Тепер ви побачите ім’я вашої папки проєкту.
3. Виберіть елемент на дизайні, щоб побачити його властивості
У лівій панелі ви побачите класи Tailwind. У правій панелі є можливість перейменувати (необов'язково) та додавати теми до вашого проєкту Tailwind. Перейменовані змінні тем автоматично відображаються в класах.
Бережіть себе. До побачення
Перекладено з: Tailwind Copilot | Lazy to write font-size, font-weight… ever and ever ?