Mengubah Design Figma Menjadi HTML, TailwindCSS, JavaScript dan Deploy ke Github Pages

Daftar Isi

• Latar Belakang
• Persyaratan
• Proses Mengubah Desain Figma ke HTML, TailwindCSS, JavaScript
• Deploy Projek ke Github Pages Menggunakan Github Action

Latar Belakang

Figma banyak digunakan untuk mendesain antarmuka web. Namun, desain tersebut perlu dikonversi ke kode agar bisa diakses secara online. Proses ini melibatkan HTML untuk struktur, Tailwind CSS untuk styling yang cepat dan konsisten, serta JavaScript untuk interaktivitas.

Setelah selesai, halaman hasil konversi dapat dideploy menggunakan Github Pages secara gratis. Dengan demikian, penting untuk mempelajari alur kerja dari desain Figma hingga menjadi halaman web yang aktif dan responsif.

Persyaratan

1. Personal Computer atau Laptop
2. Akun Figma
3. Akun Github
4. Code Editor (Pada tutorial ini menggunakan VSCode)
5. Git

Proses Mengubah Desain Figma ke HTML, TailwindCSS, JavaScript

• Buka file desain yang akan diubah menjadi HTML. Pada tutorial ini saya menggunakan desain dari Shayna.com yaitu Pricing Pro.

• Selanjutnya kita akan buat projek. Buka Terminal lalu buat folder baru dengan perintah mkdir pricing-pro (pricing-pro adalah nama projek, silahkan sesuaikan dengan projek kalian).

• Kemudian pilih direktori yang kita buat dengan perintah cd pricing-pro lalu buka code editor dengan perintah code .

• Maka akan tampil windows baru VSCode dengan projek yang sudah kita buat. Sekarang bisa tutup Terminal dan bisa menggunakan Command Prompt bawaan VSCode.

• Untuk membuka Command Prompt di VSCode tekan ctrl + j atau kalian juga bisa menggunakan Terminal bawaan dari Windows seperti sebelumnya.
• Selanjutnya kita perlu inisialisasi projek node.js dengan perintah npm init -y

• Selanjutnya kita install tailwindcss dan @tailwindcss/cli dengan perintah npm i tailwindcss @tailwindcss/cli

• Kemudian buat struktur projek seperti berikut ini

• Buka file input.css lalu import tailwindcss seperti pada gambar berikut

• Buka file index.html dan ubah jadi seperti berikut

• Buka command prompt lalu ketik perintah berikut npx @tailwindcss/cli -i ./src/input.css -o ./src/output.css --watch

• Tambah command prompt baru kemudian install live-server dengan cara npm i -g live-server. Jika sudah jalankan perintah live-server —watch=”src/index.html”

• Buka browser jika tampilan sudah seperti berikut ini maka TailwindCSS sudah terpasang dengan benar.

• Sekarang kita akan menentukan font dan color. Buka desain figma lalu pilih teks untuk mengetahui jenis font yang dipakai, umumnya desain web hanya menggunakan satu jenis font. Pada tutorial ini kita akan menggunakan Poppins.

• Buka lagi file input.css lalu tambahkan custom font Poppins ke TailwindCSS

• Jika berhasil maka font nya akan berubah seperti pada gambar berikut

• Sekarang kita akan membuat variable color untuk TailwindCSS. Pada desain figma pilih layer terluar dan lihat pada sidebar kanan Selections colors. Pada tutorial ini saya akan menggunakan #FFFFFF ****sebagai background color, #0A0815 sebagai foreground color, dan #EB7145 sebagai primary color. ****Untuk penamaan color tidak harus sama, silahkan bebas tentukan sesuai keinginan kalian.

• Sekarang lihat hasilnya, jika sukses maka akan seperti berikut ini

• Sekarang kita akan mencoba slicing header. Pada desain figma pilih frame untuk header, di sini kita akan menentukan lebar, tinggi, dan warna background. Sesuai dengan desain lebar 1512px, tinggi 752px, dan warna background adalah warna foreground.

• Untuk menentukan padding horizontal dan padding top dari navbar, pilih frame yang diperlukan lalu tekan alt sambil arahkan kursor ke frame lain yang ingin kita ketahui jaraknya. Dari sini kita dapat tentukan padding x nya 100px dan padding top nya 30px

• Kita tarapkan pada kode HTML seperti berikut ini

• Sekarang kita akan buat logo, karena di sini logonya hanya menggunakan teks kita hanya perlu menerapkan style nya menggunakan TailwindCSS. Dari desain ini kita tahu font size 32px, font weight bold, line height auto, dan warna teks primary.

• Sekarang kita coba terapkan pada kode HTML. Biasanya logo akan dibungkus oleh tag a. Oh iya, kita perlu menambahkan class -z-50 pada background agar background tidak menutupi teks.

• Dan hasilnya akan seperti ini

Deploy Projek ke Github Pages Menggunakan Github Action

• Buat repository baru di Github

• Sebelum inisialisasi git, buat file dengan nama .gitignore di root direktori projek lalu tambahkan node_modules

• Sekarang buat Github Action. Buat file dengan nama gh-page.yml letakkan pada direktori .github/workflows, maka akan seperti berikut ini.

• Kemudian tambahkan kode berikut ini ke dalam file gh-page.yml

name: Deploy to GitHub Pages
on:
  push:
    branches:
      - main # Pastikan branch utama sesuai dengan repo kamu

permissions:
  contents: write # Izinkan workflow menulis ke repository

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout Repository
        uses: actions/checkout@v4

      - name: Deploy to GitHub Pages
        uses: JamesIves/github-pages-deploy-action@v4
        with:
          branch: gh-pages # Membuat dan mengupdate branch gh-pages
          folder: src # Sesuaikan dengan lokasi index.html (src/)
          clean: true

• Sekarang buka command prompt lalu ketik perintah git init (Pastikan Git sudah terinstall)
• Kemudian git add .
• Lalu git commit -m “chore: first commit”
• Setelah itu buat branch dengan perintah git branch -M main
• Lalu tambahkan repository dengan perintah git remote add origin <https://github.com/cakfan/bwa-pricing-pro.git>
• Kemudian push ke repository yang sudah kita buat dengan perintah git push -u origin main

• Buka halaman Settings pada repository. Kemudain pilih Pages di bagian Code and automation. Kemudan pada Branch pilih gh-page lalu klik Save

• Untuk mengakses github page kita https://{username}.github.io/{nama_repository} pada tutorial ini adalah https://cakfan.github.io/bwa-pricing-pro untuk slicing yang sudah selesai bisa diakses di https://cakfan.github.io/pricing-pro