2) Membuat Projek Design Pertama | Tutorial Figma 2023

00:06:21
https://www.youtube.com/watch?v=uvpkJnYHOQU

摘要

TLDRVideo ini adalah tutorial Figma 2023 yang mengajarkan cara membuat proyek desain untuk aplikasi web dan mobile. Pengguna diperkenalkan dengan antarmuka Figma, termasuk menu dan alat yang tersedia. Fokus utama adalah pada penggunaan frame sebagai area desain, di mana pengguna dapat membuat antarmuka pengguna. Tutorial juga mencakup cara menduplikasi elemen, memberi komentar, dan mengganti nama layer. Dengan menggunakan Figma, desainer dapat berkolaborasi secara efektif dalam proyek desain.

心得

  • 🎨 Figma adalah alat desain kolaboratif.
  • 🖥️ Frame berfungsi sebagai area desain utama.
  • 🔄 Duplicasi elemen dengan Ctrl+C dan Ctrl+V.
  • 💬 Gunakan alat komentar untuk komunikasi.
  • 📱 Pilih frame sesuai perangkat yang diinginkan.
  • 🆕 Widget memudahkan pencarian komponen.
  • 🖊️ Ganti nama layer dengan mudah.
  • 📊 Desain kolaborasi meningkatkan efisiensi.
  • 📱 Fokus pada desain dalam frame untuk presentasi.
  • 🛠️ Pelajari shortcut untuk mempercepat proses desain.

时间轴

  • 00:00:00 - 00:06:21

    Video ini adalah tutorial Figma 2023 yang memperkenalkan cara membuat proyek pertama dan memahami konsep frame dalam desain aplikasi web dan mobile. Pengguna diajarkan untuk membuat file desain baru, memberi nama proyek, dan menjelajahi antarmuka Figma, termasuk menu dan alat yang tersedia. Penjelasan juga mencakup penggunaan widget dan plugin baru, serta pentingnya kolaborasi dalam desain. Selanjutnya, video menjelaskan cara membuat frame, yang berfungsi sebagai area desain, dan bagaimana memilih jenis frame yang sesuai, seperti iPhone 14 Pro. Pengguna juga diajarkan cara menduplikasi elemen dan mengganti nama halaman dalam proyek.

思维导图

视频问答

  • Apa itu Figma?

    Figma adalah alat desain berbasis web untuk UI/UX yang memungkinkan kolaborasi real-time.

  • Bagaimana cara membuat proyek baru di Figma?

    Klik pada menu 'recent' dan pilih 'new design file', lalu beri nama proyek.

  • Apa fungsi dari frame di Figma?

    Frame berfungsi sebagai area desain di mana elemen UI akan ditempatkan.

  • Bagaimana cara menduplikasi elemen di Figma?

    Gunakan Ctrl+C dan Ctrl+V atau Ctrl+D untuk menduplikasi elemen.

  • Apa itu widget di Figma?

    Widget adalah komponen baru yang memungkinkan pengguna mencari dan menggunakan elemen desain dengan mudah.

  • Bagaimana cara memberi komentar di Figma?

    Gunakan alat komentar untuk berkomunikasi dengan desainer lain dalam proyek.

  • Apa yang dimaksud dengan desain kolaborasi?

    Desain kolaborasi adalah proses bekerja sama dengan tim dalam proyek desain.

  • Bagaimana cara mengganti nama layer di Figma?

    Double klik pada layer di panel sebelah kiri untuk mengganti namanya.

  • Apa yang dimaksud dengan UI/UX designer?

    UI/UX designer adalah profesional yang merancang antarmuka pengguna dan pengalaman pengguna.

  • Apa saja jenis frame yang tersedia di Figma?

    Terdapat berbagai jenis frame untuk perangkat seperti iPhone, Android, tablet, dan desktop.

查看更多视频摘要

即时访问由人工智能支持的免费 YouTube 视频摘要！
字幕
id
自动滚动:
  • 00:00:01
    [Musik]
  • 00:00:08
    Selamat datang di tutorial vigma 2023
  • 00:00:12
    nah pada kali ini kita akan membuat
  • 00:00:14
    Project pertama kita dan akan berkenalan
  • 00:00:16
    dengan Apa itu frame sehingga
  • 00:00:18
    teman-teman di sini Memiliki gambaran
  • 00:00:21
    Gimana sih cara desain sebuah aplikasi
  • 00:00:23
    website maupun mobile jadi kalau kita
  • 00:00:27
    lihat masuk kepada menu recent lalu di
  • 00:00:31
    sini ada new design file itu diklik aja
  • 00:00:33
    setelah itu di sini ada sedikit seperti
  • 00:00:38
    pembaruan dari vigma cuman nggak usah
  • 00:00:41
    sekarang lah Nanti aja dan di sini kita
  • 00:00:44
    yang paling penting double klik dulu
  • 00:00:46
    untuk memberikan nama Project sebagai
  • 00:00:48
    contoh nama projectnya China
  • 00:00:51
    [Musik]
  • 00:00:53
    rank Oke seperti ini Nah setelah itu di
  • 00:00:58
    sini adalah tampilan workspace kita
  • 00:01:01
    menggunakan vigma sebagai seorang UI UX
  • 00:01:04
    designer atau juga developer yang
  • 00:01:06
    nantinya akan
  • 00:01:08
    bekerjasama dengan desainer jadi di
  • 00:01:11
    sebelah kiri itu ada menu vigma seperti
  • 00:01:14
    ini ya ini banyak sekali bisa dipahami
  • 00:01:18
    satu-satu lalu juga ada
  • 00:01:21
    move scale nanti kita akan belajar
  • 00:01:24
    satu-satu ya tenang aja Lalu ada frame
  • 00:01:27
    Slice terus ada basic shapes seperti
  • 00:01:30
    rectangle Line arrow ada pen pensil ada
  • 00:01:36
    tipografi ya yang paling penting ini
  • 00:01:37
    teks ya untuk memberikan informasi di
  • 00:01:40
    dalam sebuah Project website dan yang
  • 00:01:43
    baru di 2023 ini ada bagian sini ya
  • 00:01:47
    widget gini jadi kayak kita bisa
  • 00:01:49
    langsung cari komponen terus kita bisa
  • 00:01:52
    cari plugin atau bahkan widget ya Jadi
  • 00:01:56
    ini sebuah menu baru yang ditawarkan
  • 00:01:58
    figma namanya resource nah saya lebih
  • 00:02:01
    sering menggunakan Widget yang tersedia
  • 00:02:02
    maupun plugin dan di sini ada hand tool
  • 00:02:06
    ini buat pindah-pindah sebenarnya kalau
  • 00:02:09
    kita tekan spasi di keyboard itu udah
  • 00:02:11
    langsung ke hand tool kalau mau balik
  • 00:02:14
    lagi ke select tool itu tekan V aja di
  • 00:02:18
    keyboard jadi nanti kita juga akan bahas
  • 00:02:21
    tentang shortcut shortcutnya yang paling
  • 00:02:23
    penting ya dan di sini ada komen
  • 00:02:25
    biasanya nanti kita komen kok desainnya
  • 00:02:29
    blur gitu kan bisa nggak pakai warna
  • 00:02:32
    lain
  • 00:02:35
    nah kayak gitu jadi komen itu buat kita
  • 00:02:39
    berkomunikasi langsung dengan desainer
  • 00:02:41
    lainnya atau bahkan developer yang
  • 00:02:43
    berada di dalam sebuah Project yang sama
  • 00:02:46
    atau biasa disebut dengan desain
  • 00:02:48
    kolaboration alright everyone Sekarang
  • 00:02:51
    kita akan masuk kepada bagian frame jadi
  • 00:02:54
    di sini bisa tekan F pada keyboard atau
  • 00:02:57
    klik yang bagian pagar gini kalau S
  • 00:03:00
    Slice Kalau frame ya jadi tekan F lalu
  • 00:03:04
    di sebelah kanan akan memberikan
  • 00:03:06
    beberapa pilihan
  • 00:03:08
    frame Tapi biasanya kalau teman-teman
  • 00:03:11
    udah pakai Edo bxd atau sketch itu
  • 00:03:14
    disebutnya dengan artboard maupun Canvas
  • 00:03:16
    Ya apapun itu namanya sama aja ya Jadi
  • 00:03:21
    kita perlu adaptasi juga ketika kita
  • 00:03:22
    pindah software dari Adobe ke vigma di
  • 00:03:27
    sini ada pilihan font untuk Mobile
  • 00:03:29
    application seperti Iphone ada Android
  • 00:03:32
    tapi lebih banyak produk applenya ya dan
  • 00:03:35
    juga di sini ada tablet ya Ada desktop
  • 00:03:39
    presentation watch paper dan juga yang
  • 00:03:43
    lainnya untuk kali ini kita akan coba
  • 00:03:45
    pilih iPhone 14 Pro
  • 00:03:49
    jadi fungsi utama dari sebuah frame ini
  • 00:03:53
    adalah tempat dimana kita akan melakukan
  • 00:03:56
    proses desain ya Jadi kita bukan desain
  • 00:04:00
    yang di bagian hitam gelap ini bukan
  • 00:04:03
    tapi kita akan desain di bagian iPhone
  • 00:04:07
    14 Pro ini kita tidak bisa desain di
  • 00:04:10
    luar dari frame karena ketika nanti kita
  • 00:04:13
    presentasi ya di bagian sini yang hanya
  • 00:04:16
    ditampilkan itu yang ada di dalam sebuah
  • 00:04:19
    frame di luar frame itu tidak akan
  • 00:04:21
    terlihat jadi
  • 00:04:23
    kita bisa anggap bahwa frame ini sebuah
  • 00:04:27
    layar handphone kita Oke well inilah
  • 00:04:30
    caranya gimana untuk membuat frame dan
  • 00:04:33
    nanti kedepannya kita bisa mengisi
  • 00:04:36
    beberapa ui komponens ya membuat desain
  • 00:04:40
    sederhana untuk aplikasi mobile di dalam
  • 00:04:43
    frame ini jadi ketika di present tuh
  • 00:04:45
    tampilannya kurang lebih seperti ini
  • 00:04:47
    tapi ini masih gelap Oke kita
  • 00:04:49
    menggunakan iPhone 14 Pro ada di sini ya
  • 00:04:53
    untuk framenya jadi nanti ada button ada
  • 00:04:57
    image typography dan juga komponen
  • 00:05:01
    lainnya seperti itu Nah untuk melakukan
  • 00:05:04
    proses duplicate itu bisa kontrol c sama
  • 00:05:08
    control v aja jadi kayak gini atau
  • 00:05:11
    kontrol D langsung dia langsung duplikat
  • 00:05:14
    Oke atau cara lain gini kita tekan out
  • 00:05:18
    ya kalau di Windows kalau di Mac OS itu
  • 00:05:22
    bisa tekan option lalu tarik aja namanya
  • 00:05:26
    seperti ini
  • 00:05:29
    oke di sini kita punya halaman get
  • 00:05:32
    started halaman login halaman profil
  • 00:05:35
    ataupun halaman check out ya nanti
  • 00:05:38
    banyak halaman yang pasti akan dibuat
  • 00:05:40
    sebagai seorang UI maupun UX designer
  • 00:05:44
    Oke untuk melakukan proses rename itu
  • 00:05:47
    tinggal klik aja di sini kita double
  • 00:05:50
    klik misalnya get started lalu enter aja
  • 00:05:54
    atau Cara lainnya kita bisa lewat
  • 00:05:57
    sebelah kiri Ini ada layers itu double
  • 00:06:00
    klik aja Setelah itu kita kasih nama
  • 00:06:03
    misalnya login
  • 00:06:05
    Oke kurang lebih seperti itu baik akan
  • 00:06:07
    kita lanjutkan pada video selanjutnya
  • 00:06:14
    [Musik]
标签
  • Figma
  • UI/UX
  • Desain Aplikasi
  • Frame
  • Widget
  • Kolaborasi
  • Tutorial
  • Desain Web
  • Desain Mobile
  • Antarmuka Pengguna