Modul FrontEnd Web Dasar
  • Pengenalan Penulis
  • Muqadimah
  • Tujuan Pembelajaran
  • Prasyarat Pembelajaran
  • Persiapan & Pendahuluan
    • Tools Yang Dibutuhkan
    • Cara Kerja Internet: Bagaimana Website Sampai ke Pengguna
    • Web Statis & Dinamis
    • Peranan Web Server & Web Browser
    • Anatomi Website (HTML, CSS, JavaScript)
    • Referensi Tambahan
  • Belajar HTML
    • Pengenalan HTML
    • Elemen, Tag, dan Atribut
    • Strukur Dasar HTML
    • Menjalankan File HTML di Browser
    • Semantic HTML
    • Tag Dasar HTML
      • Tag Heading (h1-h6)
      • Tag Paragraf (p)
      • Tag Untuk Pemformatan Teks Dasar
      • Tag Anchor/Link (a)
      • Tag Image (img)
      • Tag List (ul, ol, li)
      • Tag Table (table)
      • Tag Form (form, input, select, textarea)
      • Tag Div
      • Tag Audio & Video
      • iframe
      • Tag Untuk Citation, Quotation dan Definisi
      • Tag Untuk Hasil Kode Komputer
    • Simbol/Karakter Khusus
  • Belajar CSS
    • Pengenalan CSS
    • Menambahkan CSS ke HTML
    • Selektor CSS
    • Properti CSS
      • Teks Formatting
      • Warna dan Background
      • Pengenalan Box Model
      • Box Model: Konten
      • Box Model: Padding dan Margin
      • Box Model: Border
      • Box Shadow
      • Box Sizing
      • Positioning
      • Display
      • Pengenalan Flexbox
      • Flexbox: Properti Pada Container
      • Flexbox: Properti Item
      • Flexbox: Gap
      • Pengenalan Grid
      • Grid: Grid Struktur
      • Grid: Gap
      • Grid: Alignment
      • Grid: Grid Auto Flow
      • Grid: Item Placment
      • Grid: Functions in Grid Layout
    • Media Queries Untuk Responsifitas Pada Website
    • Media Queries: Media Types
    • Media Queries: Media Features
  • Belajar JavaScript
    • Pengenalan JavaScript
    • Menghubungkan JavaScript ke HTML
    • Variable
    • Tipe Data
    • Operator & Ekspresi
    • Perkondisian
    • Perulangan
    • Fungsi
    • Debugging
    • JavaScript BOM (browser Object Model)
      • Pengenalan JavaScript BOM
      • Akses ke Objek Window
      • Akses ke Objek Document
      • Akses Ke Navigator Object
      • Akses ke Screen Object
      • Akses ke Histori Object
    • JavaScript DOM (Document Object Model)
      • Pengenalan JavaScript DOM
      • Menarget Element HTML
      • Menambah, Menghapus, dan Mengedit Element
    • Events Handler
      • Pengenalan Event Handler Untuk Interaktifitas
      • Windows Events
      • Form Events
      • Keyboard Events
      • Clipboard Events
      • Mouse Events
    • Web Storage
      • Pengenalan Web Storage
      • Local Storage
      • Session Storage
  • Framework CSS
    • Pengenalan Framework CSS (Bootstrap)
    • Menambahkan Bootstrap ke Project
    • Penggunaan Utility Classes
    • Penggunaan Komponen Bootstrap
    • Customizing Bootstrap
    • Responsive dengan Bootstrap
  • Belajar Figma Untuk Slicing
    • Pengenalan dan Peran Figma
    • Membuat Desain Website
    • Melakukan Slicing
  • Pengenalan Framework FrontEnd
  • Hosting (Web Statis)
Powered by GitBook
On this page
  1. Belajar Figma Untuk Slicing

Pengenalan dan Peran Figma

Figma adalah alat desain grafis berbasis web yang memungkinkan desainer untuk membuat, mengedit, dan berbagi desain antarmuka pengguna (UI) dan pengalaman pengguna (UX). Berikut adalah beberapa poin pengenalan dan peran Figma:

Pengenalan Figma:

  1. Desain Berbasis Web: Figma sepenuhnya berbasis web, yang berarti tidak perlu mengunduh atau menginstal perangkat lunak di komputer Anda. Anda dapat mengaksesnya dari browser web mana pun dengan koneksi internet.

  2. Desain Kolaboratif: Figma dirancang untuk kolaborasi tim. Banyak orang dapat bekerja pada proyek yang sama secara bersamaan, membuat perubahan langsung, dan memberikan umpan balik dalam waktu nyata.

  3. Multiplatform: Figma tersedia untuk digunakan di berbagai platform, termasuk Windows, macOS, dan Linux, sehingga memudahkan kolaborasi lintas platform.

  4. Prototyping: Selain desain UI/UX, Figma juga menyediakan fitur prototyping yang memungkinkan desainer membuat tautan antar halaman dan menjalankan simulasi interaksi pengguna.

Peran Figma:

  1. Desain UI/UX: Figma digunakan untuk membuat desain antarmuka pengguna dan pengalaman pengguna untuk berbagai aplikasi dan situs web.

  2. Prototyping: Desainer menggunakan Figma untuk membuat prototipe interaktif yang memungkinkan pengguna untuk menjelajahi dan menguji alur aplikasi atau situs web.

  3. Kolaborasi Tim: Tim desain dapat menggunakan Figma untuk bekerja secara bersama-sama pada proyek yang sama, melakukan revisi, dan memberikan umpan balik secara langsung.

  4. Presentasi Desain: Figma juga digunakan untuk membuat presentasi desain yang menarik dan dinamis, memperlihatkan bagaimana desain akan berfungsi dan terlihat dalam penggunaan nyata.

Dengan fitur-fitur yang kuat dan kemudahan penggunaan, Figma telah menjadi salah satu alat desain yang paling populer dan serbaguna di kalangan desainer UI/UX saat ini.

PreviousBelajar Figma Untuk SlicingNextMembuat Desain Website

Last updated 1 year ago