Memulai Proyek Figma

Variables

Pertama import Tailwind CSS Variable dulu karena kebanyakan project menggunakan Tailwind CSS.

• Gunakan plugin export/import variables dan lakukan export figma file berikut Tailwind CSS v3.3.2 Design System with variables
• Setelah mendapatkan file TailwindCSS.json jangan lupa lakukan import dengan menggunakan plugin yang sama yaitu export/import variables

Light and Dark Mode

Setelah melakukan import variable, jangan lupa membuat mode light dan dark mode dalam variables.

Colors

• Foreground or Text
• Background
• System
  • Success
  • Warning
  • Danger

Text Input Form

State

• Normal
• Hover
• Focus
• Error
• Disable

Button

State

• Normal
• Hover
• Focus
• Error
• Disable
• Loading/Busy