Pengenalan Figma untuk Pemula | Tutorial Belajar Figma Bahasa Indonesia
Summary
TLDRIn this video, Masrul Wijaya introduces Figma, a powerful online design tool for creating user interfaces, wireframes, and graphics. He highlights Figma's simplicity and advanced features, such as real-time collaboration and cloud-based design, eliminating the need for heavy software downloads. The tutorial covers Figma's interface, including the left sidebar for components and the right sidebar for design settings, prototyping, and handover specs. Wijaya also discusses the differences between Figma's starter and professional plans, emphasizing the tool's accessibility and potential for both personal and professional use.
Takeaways
- 😀 Figma is a cloud-based design tool used for creating user interfaces, wireframes, and graphics.
- 🌐 It operates entirely online, eliminating the need for downloading software or sharing files, making it accessible through any browser.
- 👥 Figma supports real-time collaboration, allowing multiple designers to work on the same file simultaneously.
- 🔥 It emphasizes a borderless, transparent, and open-source approach, aiming to be accessible to everyone with a browser.
- 💡 Figma's interface is intuitive and simple, designed to be less complex than traditional software like Adobe Photoshop.
- 👨👩👧👦 The platform offers a 'community' section for sharing files, plugins, and widgets, fostering engagement among users.
- 📁 Users can manage their files through a left sidebar, organizing them into layers and assets similar to Photoshop's layer system.
- 🖥️ The right sidebar includes design, prototype, and handoff sections, facilitating the transition from design to development.
- 📊 Figma provides different plans, including a free 'Starter' plan with limitations, and more comprehensive plans for professional use.
- 🔗 The tool allows for easy customization of templates and the ability to move files between different projects with drag-and-drop functionality.
Q & A
What is Figma and what is its primary use?
-Figma is a collaborative interface design tool used by designers to create various products such as user interfaces, wireframes, and even graphics.
How does Figma differ from traditional design software like Photoshop or Illustrator?
-Figma is a cloud-based tool, which means there's no need to download software or share files manually. Everything is online, accessible through a browser, and allows for real-time collaboration.
What are some of the key values that Figma promotes?
-Figma promotes values such as collaboration, borderlessness, transparency, and being open-source driven.
What is the significance of Figma being accessible to anyone with a browser?
-It means that users can access Figma from any device with a browser, without the need for specific hardware, making it highly accessible and convenient.
What are the different components visible on the Figma interface upon logging in?
-Upon logging in, users can see components like the team library, recent files, drafts, and a community section where files, plugins, and widgets are available.
What is the difference between a 'file' and a 'project' in Figma?
-A 'file' in Figma is a single design document, while a 'project' is a collection of files that are grouped together, similar to folders.
What are the limitations of the Figma 'Starter' plan mentioned in the script?
-The 'Starter' plan allows for only one team, three files, and three frames per file. It is quite limited, suitable for personal use or testing, but not ideal for professional work.
How does Figma facilitate real-time collaboration among designers?
-Figma allows multiple designers to work on the same file simultaneously, enabling real-time collaboration without the need for file sharing.
What are the main sections of the Figma workspace?
-The main sections include the top toolbar, the left sidebar with layers and assets, and the right sidebar with design, prototype, and handoff specifications.
What is the purpose of the 'Prototype' section in the right sidebar of Figma?
-The 'Prototype' section is used to set up interactions between frames, such as transitions and animations, to create clickable prototypes.
How can users customize the canvas size in Figma?
-Users can customize the canvas size by clicking on the canvas, right-clicking, and setting the desired dimensions in the properties panel.
Outlines
🌐 Introduction to Figma's Online Design Platform
The speaker, Masrul Wijaya, introduces Figma as a powerful online design tool for creating user interface products, wireframes, and graphics. Figma stands out as it operates entirely in the cloud, eliminating the need for downloading software or sharing files, making it accessible through any browser. It emphasizes Figma's simplicity and advanced features, such as real-time collaboration, which allows multiple designers to work on a single file simultaneously, enhancing the design process and workflow. The speaker also mentions Figma's values, including collaboration, borderless design, transparency, and an open-source approach, and notes its widespread use by companies globally.
🔍 Exploring Figma's Interface and Features
The speaker provides a guided tour of Figma's interface, highlighting the left sidebar with components and the ability to switch between accounts. They explain the concept of 'files' in Figma, which are the main workspaces for design, and 'drafts', which are works in progress. The community aspect of Figma is introduced, showcasing a hub for files, plugins, and widgets. The speaker emphasizes the platform's collaborative nature, allowing for real-time work with other designers and the ability to invite others to view or edit files. They also touch on the different plans offered by Figma, including the free 'starter' plan with limitations and the more feature-rich 'professional' plan.
🎨 Deep Dive into Figma's Design Tools and Workspace
The speaker delves into the specifics of Figma's design tools, explaining the workspace as a canvas for design work and the toolbar that offers basic tools and advanced settings. They discuss the concept of 'frames' and 'layers', which are similar to Photoshop's layering system but with different terminology. The speaker also introduces 'assets', which are reusable components within Figma. They demonstrate how to create and customize pages, adjust settings, and move files between different projects. The paragraph concludes with a comparison between the starter and professional versions of Figma, highlighting the increased capabilities and features available to professional users, such as unlimited projects and files.
📝 Wrapping Up the Figma Overview and Future Tutorials
In the concluding part, the speaker summarizes the key points about Figma's features and capabilities, emphasizing its simplicity and the lack of limitations on computer resources due to its cloud-based nature. They express their intention to create more tutorial videos to help users better understand how to use Figma effectively. The speaker also invites viewers to join a design community on Discord for further learning and collaboration. The video ends with a call to action for viewers to like, subscribe, and join the community for more design-related content and support.
Mindmap
Keywords
💡Figma
💡Cloud-based
💡Real-time collaboration
💡User Interface (UI)
💡Wireframes
💡Prototype
💡Layers
💡Components
💡Version History
💡Design System
💡Workspace
Highlights
Figma is introduced as a powerful and simple design tool for creating user interfaces, wireframes, and graphics.
Figma operates entirely online, eliminating the need for downloading software or sharing files.
Real-time collaboration is a key feature, allowing multiple designers to work on the same file simultaneously.
Figma claims to be a home for working together, with a focus on collaboration and streamlined workflow.
The platform is used globally by various companies, highlighting its widespread adoption.
Figma's values include being collaborative, borderless, transparent, and community-driven.
The platform aims to make design accessible to everyone with a browser and an account.
Figma's interface includes a left sidebar for components and a right sidebar for design settings.
The platform offers unlimited file creation, with the ability to duplicate and use files as references.
Figma provides a community section for engagement with files, plugins, and widgets.
The platform supports version history, allowing users to track changes and revert to previous versions.
Figma offers different plans, including a free starter plan with limitations on teams and file usage.
Professional plans provide more extensive features, such as unlimited projects and files.
Figma's workspace is designed to be intuitive and simple, with a focus on ease of use.
The platform includes a toolbar with basic tools for design, such as creating and manipulating objects.
Figma allows for the creation of prototypes, setting interactions between frames.
The platform includes a comments section specifically for handover to developers, including CSS, iOS, and Android specifications.
Figma's professional plan offers advanced features like team libraries, which are not available in the starter plan.
The video concludes with an invitation to join a design community on Discord for further learning and collaboration.
Transcripts
wood
[Musik]
menyumbang
Halo semua Kembali lagi bersama saya
masrul Wijaya di desa design jadi hari
ini saya mau ngejelasin hikmah from
scratch buat kalian dan mungkin teman
udah pada familiya sama yang namanya
figma jadi fitnah itu sebenarnya sebuah
tool buat designer untuk
membuat berbagai macam produk
misalkan produk untuk user interface
ataupun
warframes dan bahkan grafik desainer pun
bisa gitu Hai Nah semuanya figma itu
eh sangat Menurut saya itu sangat simple
namun juga sangat canggih begitu karena
disini kita
enggak lagi yang kayak dulu yang
misalkan Photoshop ataupun ilustrator
yang kita harus download
softwarenya kemudian kita punya file
yang harus dishare eh di-upload dan
sebagainya Nah itu berbeda di figma jadi
di figma kita benar-benar ngedesain
semuanya itu
ezycloud gitu jadi enggak ada yang
namanya File of lain kecuali kita memang
mau mendownloadnya jadi Semuanya serba
online gitu semua serba di laut
dan merasa itu sangat canggih karena
kita nggak repot lagi gitu untuk punya
Hut laptop yang khusus gitu ya untuk
menjalankan software ini karena setelah
Halo selamat kita punya browser di
laptop manapun di device apapun kalau
kita bisa login ya kita bisa pakai
hikmat dan file yang udah kita bikin
semuanya disitu tetapi
Hai nah disini semuanya figma itu eh dia
Hai Nih misalnya nih value dia atau
nilai yang dia bawa tuh kayak misal
real-time collaboration jadi dalam satu
file tuh bisa ada
multiple designer kayaknya di Photoshop
atau produk Adobe yang baru bisa ya
kayak gitu ya cuman disini memang
bener-bener jadi andalan utama dia gitu
Nilai plus dia
media welcome more people itu desain
proses kemudian workflow dia bisa lebih
cepat morvant katanya ya kita cek aja
habis ini
kemudian ini dia mengklaim bahwa became
a home for working together We Own
company was artinya apa ya oke Bisa
ditaksir sendirilah nah disini dia
mengklaim bahwa dia punya atau produk
dia udah dipakai oleh perusahaan di
berbagai belahan dunia begitu ya dan Ini
nilai-nilai dia ada kolaboratif
borderless transparent kami driven open
source dan ya ngerti toh dan visi dia
adalah apa ini Oke Max design aksesibel
to everyone seperti yang sudah saya
jelaskan sebelumnya ya jadi asal kamu
punya Browser dan akun kamu bisa buka
itu dimanapun tanpa ada kendala yang
berarti begitu
Oke Langsung aja kita move ke hikmahnya
Hai nah disini kalau misalnya kalian
udah login nyae daftar mudian login gitu
ya Ini tampilan awalnya akan kalian
temui jadi disini bisa kalian lihat di
sebelah sini designer sebelah kiri ini
ada beberapa komponen jadi ini yang
pertama yang paling atas pojok kiri atas
ini dia bisa pilih akun Dia bisa ini ya
bisa nambah beberapa akun di sini nanti
lihatnya di sini comment ada-ada reasons
ini dimana Ya seperti namanya ya bisa
menjadi file-file terbaru yang baru
dibuka atau baru diedit tuh munculnya
disini kemudian Ini draft ini kayak ya
draft D semuanya file yang udah dibikin
yang diluar
Hai hati makan masuk disini dan ini eh
unlimited kita bisa bikin seberapa
banyak kita bisa bikin a limited lah
gitu istilahnya
Hai kemudian di sini ada community nah
community itu kayak Ya namanya juga
figma dia mencoba untuk
menggaet Ya untuk engagement itu semua
file ataupun plug-in ataupun widget itu
semua ada di sini jadi teman-teman bisa
langsung brush apapun disini misalnya
ini ada file auto like out kemudian apa
ini Icons 3D Icons dan sebagainya
semuanya lengkap disini dan ini semuanya
udah
file figma jadi tinggal di duplikat aja
bisa jadi referensi dan menurut saya ini
Okelah gitu buat buat nambah-nambah
referensi gitu
hai hai
di balik lagi ke ini tambahan ini nah
Hai Di sini ada nama saya nah ini ini
ini adalah tim jadi saya punya tim 16
Anya ini masruh Nama saya ini pun bisa
direm sebenarnya tergantung teman-teman
mau
nama yang kayak gimana nah kemudian
dibawahnya ada
kalau di vidmate kita nyebutnya Project
at cuman analoginya ini mirip lebih ke
folder sih folder yang
menyatukan atau grup beberapa file gitu
nah sayangnya disini untuk yang
eh starter kita balik lagi ke websitenya
kita cek
Hai nah Disini
Hai praising jatuh ada-ada 4 Sebenarnya
ya Nah yang starter ini yang free itu
cuman bisa satu tim dan dalam satu tim
itu cuman bisa
buat tiga figma dan 3 fix jam Fals
Hai nah itu yang menurut saya sangat ya
terbatas ya untuk urusan
pekerjaan bilang kalau udah profesional
ya tapi kalau untuk urusan ya untuk
personal atau iseng-iseng atau testing
atau nyoba itu bisa lah itu mulai dari
sini dulu nah disini ada ada bilang dia
ad limited personal Fals tampil limited
kolaborator nah ini cuma berlaku di
draft yang yang saya sebutin tadi Nah
disini jadi didrop sini kayak gue ya
semuanya lah semuanya campur aduk di
sini bisa bikin unlimited cuman kalau
misal mau bikin Disini di dalam project
ini itu starter cuman bisa satu doang
ininya projectnya sedang kawasan
profesional ataupun yang APP lanvin
diatasnya lagi itu bisa bikin beberapa
ini ya bikin beberapa Project dan bikin
beberapa tim bahkan bisa gitu nah ini
Project ada misalkan learning saya bikin
ada beberapa ini kan learning ada satu
file fetch Hai Di sini
mungkin buat temen-temen bedanya a yang
biru Ini Mayang Um itu apa itu kalau
yang biru dia nyebutnya figma design
file itu
inilah apa namanya
wuking Space utama untuk mendesain
misalnya nilai desain atau UX kita ya
Bisanya disini sedangkan virzam itu
kayak whiteboarding kayak tools buat
brainstorming aja gitu yang dia memang
bukan buat ngabisin sebenarnya begitu
Hai Nah sekarang kita coba
Hai Abu kamisan Tadi saya udah bikin
hai satu file di sini basic tutorials
zakat
Hai Nah kita coba pelajari dulu disini
most of the time kalian akan mengerjakan
di kanvas ini Didi work work space ini
jadi
Eh kalian harus benar-benar paham ya Dan
menurut saya ini pun sangat simple
intuitive dan enggak terlalu ribet kayak
misal kalau kalian lihat
eh software Adobe gitu ya yang
ditulisnya banyak banget dan lautnya
mungkin Kompleks gitu ya Nah itu beda
banget sama asik makan Nadia
sangat-sangat simpel di sini enggak
enggak Islam Gak neko-neko lah gitu
Hai nah disini bisa dilihat yang Oke
yang paling atas ini tetap kalau kalian
buka file beberapa itu bisa disini
Tabnya macem-macem kemudian dibawahnya
ada di sini ada namanya toolbar
Hai ini toolbar nih kalau kalian klik
disini mainnya bisa ada beberapa menu
yang kelihatan kemudian ini basic tools
nya ini tugasnya di sini ada beberapa
yang mungkin nanti akan dijelaskan di
video terbiasa yang lebih mendetail ya
kemudian disini ada projectnya project
design kemudian ini nama file-nya basic
tutorials nah disini kita bisa lihat ada
version history kita bisa export
duplicate dan seterusnya YouTube
Hai nabrak nya di sini ada
Fiu tuh dan presentation
am sorry ada Fiu sama share
Hai nah ini maksudnya share to yang
sudah saya jelaskan sebelumnya jadi dia
kan eh kolaboratif tuh ya jadi dia bisa
invite
designer lain untuk bekerja di file yang
sama begitu sedang ini punya nih untuk
ya view ya bisa ngejamin Jumat sesuai
apa yang kita pengin kemudian di sebelah
kiri ada
left sidebar ini dia terbagi Jadi dua
dua tab Sunarya
Hai ada layer sama Asep itu secara
Hai umum
Hai di prinsip dia sama kayak Photoshop
yang pakai layer studi Anda grup gitu ya
cuman ada beberapa istilah misalkan
frame ada yang lain lagi yang mungkin
nanti akan dijelaskan di video berbeda
kemudian aset-aset itu semacam kalau
difitnah itu ada komponen itu masuk ke
sini Yang nanti akan dijelaskan lagi
komen bisa dapet nah di dalam file itu
kita bisa
bikin beberapa pc bisa ini Rp10 isinya
cuman ini doang
nah ini kalau misalnya saya tambahin at
new page itu bisa tetap divalen sama
anda jadi kosong jadi page
Asep nggak yakin ini maksimal berapa
cuman kayaknya bisa banyak banget nanti
tinggal dicek lagi aja di websitenya
mungkin ada
eh cuman ini juga jadi nanti
pertimbangan juga kalau misalkan kalian
bikin pes-nya banyak banget Hai dan
isinya udah banyak itu biasanya jadi
lemot gitu jadi kebanyakan isi sedangkan
kita akan via.web yafia Cloud pasti ada
tetap ada limitasi gitu
nah kemudian di sebelah kanan ada
right sidebar di sini ada tiga Tab
pertama design
kalau misalkan ini masih kosong Jadi
kalau misalnya Saya klik disini misalnya
ada objek kalau medicinae ini baru
kelihatan apa-apa jatuhnya nanti kita
belajar lebih dalam lagi yah di lain
kesempatan kemana dia Prototype disini
kita bisa
[Musik]
setting-an nanti Interaction antar frame
nya kayak gimana kemudian sekali kayak
gimana kemudian Mau bikin devicenya apa
gitu
The Comment section spek ini tak khusus
buat handover ke develop mentimun
biasanya gitu ya di sini dianya dianya
CSS ada air es Android dan ya sejauh ini
masih tiga ini sih gitu
Hai nah kemudian m
[Musik]
Hai Nah misalkan
tadi kita liat nih kayak gini basic
tutorials ini kan
Hai diet tamnel nya nunjukkin
itu ya isi di acara rendem maksudnya
saya juga nggak tahu dia ngambilnya
screenshot dari mana intinya ya garis
besar apa namanya file-nya kayak apa itu
isinya apaan ah kita bisa sebenarnya
bikin custom tamnel gitu Nah misalkan
kita bikin misalkan 1000 kalo nggak
salah ini ukurannya harusnya sorry
[Musik]
Hai rangla salah
1600
ininya lebarnya kemudian dirinya 900 itu
udah pas
Hai kemudian misalkan
Hai ah pindah di sini
[Musik]
hai
gitu ya Nah ini kawasan diklik kemudian
Klik Kanan
am set es tamnel kayak gini
ketika kita lihat lagi di luar
nah dia bakal Berubah kayak gini jadi
itu bisa customized lah itu
Hai nah kemudian kalau misalkan kita
udah bikin beberapa file ya itu kita
bisa semuanya pindah antar antar antar
Project jadi merah ini yang tadi ini
tinggal saya drag aja di sini tinggal
drag
kesini percaya perbedaan Nadia akan
pindah ke sini gitu tinggal tinggal drag
aja
Hai sebenarnya kalau menurut saya Karena
saya udah pakai a
a clean yang profesional begitu ya jadi
ngerasa bedanya yang starters sama
profesional itu dimana secara garis
besar karena memang mungkin kebanyakan
dari kita lainnya ini ya profesional ya
karena lebih kalau buat freelance
designer mungkin lebih
affordable gitu karena enggak sampai
segini banyak gitu nah
Hai sejauh ini yang saya rasakan di
plant profesional versus starter Jadi
kalau di profesional itu dia a
Hai ada yang namanya tim liberios yang
proses sangat
powerfull gitu ya jadi tadi kan seperti
yang udah kita bahas distater itu dia
cuman ada satu Project kemudian satu
eh eh sorry satu Project kemudian ada
tiga file 93 Vixion files itu ya Nah itu
kita kalau create komponen create
apa ya komponen sih lebih tepatnya komen
aja Nah itu kita nggak bisa pakai itu di
file yang berbeda itu yang keunggulan
profesional sedangkan di
apa namanya di starter
Hai itu enggak bisa Nah apalagi dia
limitnya cuman satu Project dan 3 files
dan kita mungkin pekerjaannya bisa lebih
banyak kan dari situ ada beberapa adanya
Lara nanti makin pekerjaan bisa sampai
ratusan Fals ribuan Fals dan kita nggak
mungkin cuman bikin semua jadi satu file
karena itu akan
semakin memberatkan sistem gitulah
karena nanti bakal semakin lemot tekan
semuanya jadi Satukan dan jadi enggak
rapi gitu
disitu Isih yang yang saya rasakan
sejauh ini
selain itu sebenarnya untuk
fitur-fitur yang lain Star sama
profesional udah-udah
Hai cukup apa ya 1112 Mei cuman itu
doang yang tadi yang komen itu Nah
mungkin kalau misalnya temen-temen
bingung semua komponen itu kayak gimana
time Sorry tim liberties kayak gimana
Eh itu bakal nanti dijelasin sih di
video yang berbeda karena itu memang
cukup mendalam topiknya dan nggak
mungkin bisa selesai di satu video yang
kali ini kita video penjelasan aja
secara garis besar
Hai mungkin itu si untuk yang sekarang
pengenalannya
Eh nanti saya akan coba Bikin lagi
beberapa
video supaya kalian bisa lebih paham
mengenai figma cara menggunakan figma
dan
saya berani jamin sih maksudnya gak buat
kalian gampang untuk menggunakan tools
ini karena sangat simple menurut saya
sangat simpel dan semua orang bisa
menggunakannya itu tanpa harus ada
limitasi
komputer ataupun laptop ya karena ini
memang berdasar berbasis akrual gitu
makasih banyak ya udah nonton video ini
sampai akhir jika kalian merasa video
ini bermanfaat buat kalian jangan lupa
untuk like dan subscribe ya nah saya
mencoba untuk membuat komunitas bisa
design di discord jadi buat kalian yang
berminat untuk join dan pengen gabung
pengen belajar bersama cek link di
description ya Oke sampai jumpa di video
berikutnya bye bye
関連動画をさらに表示
Figma Tutorial: A Beginners Tutorial (2023 UI UX Design)
Figma Vs Motiff - New AI Design Tool! | Better Pricing, AI UI Design, Design Systems & More
Figma Tutorial: Layout Grids
Config 2024: How we redesigned Figma (KC Oh, Ryhan Hassan, & Joel Miller, Figma)
How to get ahead of 99% of Product Designers (Starting today)
Explaining Figma Components Like You’re Five (Simplest Way Possible)
5.0 / 5 (0 votes)