Belajar FIGMA dasar dengan Mudah - Belajar Figma Bareng (1/3)
Summary
TLDRThe video script appears to be a tutorial on creating a user interface design, possibly for an app or website. It discusses various design elements, color schemes, and interactive components such as buttons and icons. The script mentions the use of a grid layout, customization options, and the importance of aligning elements for a cohesive design. It also touches on the process of importing assets and adjusting their properties to fit the overall aesthetic of the project.
Takeaways
- 😀 The script discusses the process of creating a prototype for a project, suggesting a hands-on approach to design and implementation.
- 🔍 It mentions the use of a 'fight map' and 'megapixels', indicating a focus on detailed planning and high-resolution design elements.
- 🎨 The script talks about choosing colors and illustrations, emphasizing the importance of aesthetics in the project's visual identity.
- 📱 There is a mention of designing for different devices, including iPhones and iPads, highlighting the need for responsive design.
- 🛠️ The script refers to using components like 'Pets' and 'PC outlet', suggesting the use of modular design elements in the project.
- 📐 It discusses layout grids and margins, indicating an attention to detail in the alignment and spacing of design elements.
- 🖌️ The script includes instructions for editing and customizing design elements, such as changing colors and fonts, to match the project's style.
- 🔄 There is mention of duplicating and modifying components, indicating a workflow that involves reusing and adapting design elements.
- 📝 The importance of text and typography is highlighted, with discussions on font sizes and styles for different parts of the project.
- 🔗 The script touches on the integration of interactive elements, such as buttons and icons, to enhance user engagement.
- 🌐 It concludes with the mention of importing assets and finalizing the design, suggesting a comprehensive approach to the project's completion.
Q & A
What is the purpose of the 'Prototype' mentioned in the script?
-The 'Prototype' in the script refers to a preliminary model or version of a product, which will later be used in a project after being finalized.
What does 'Munculkan' mean in the context of the script?
-'Munculkan' in the script seems to be an instruction to make something appear or become visible, possibly in a user interface or design layout.
What is the significance of 'Deden perut' in the script?
-The term 'Deden perut' is not clear from the script, it might be a typo or a term specific to the context that is not universally understood without additional information.
What is the 'fight map' mentioned in the script?
-The 'fight map' is likely a term used to describe a layout or schematic that is part of the design process, possibly related to a game or interactive element.
What does 'megapixel' refer to in the script?
-The term 'megapixel' in the script could be referring to the resolution of an image or screen, indicating a high level of detail.
What is the 'Black Edition cheat' mentioned in the script?
-The 'Black Edition cheat' seems to be a specific feature or tool mentioned in the script, possibly related to a game or software, but the context is not clear without further information.
What is the meaning of 'duplicated' in the script?
-In the script, 'duplicated' refers to the action of copying an element, such as a design component, to be used elsewhere in the project.
What is the 'Pets' component mentioned in the script?
-The 'Pets' component in the script is likely a design element or feature within the project, possibly representing a pet-related aspect of the user interface.
What does 'layout grid' refer to in the script?
-The 'layout grid' is a design term used in the script to describe the arrangement and structure of elements within a user interface or design layout.
What is the 'input field' mentioned in the script?
-The 'input field' in the script refers to a part of a user interface where users can enter data or information, such as text.
Outlines
😀 Prototyping and Design Process
The first paragraph discusses the process of prototyping and design, including the creation of a project that might be used in the future. It involves clicking and revealing features, adjusting elements like the 'Deden perut' for movement, and the use of various design elements such as illustrations and color selection. The paragraph also touches on the use of templates and components to streamline the design process, with a focus on creating a user-friendly and visually appealing interface.
🛠️ Design Customization and Layout Adjustments
This paragraph delves into the customization of design elements and layout adjustments. It covers the creation of grid layouts, setting margins, and working with components like PC outlets. The speaker discusses the importance of design consistency and the use of rulers for precise alignment. There's also mention of creating a save area similar to WordPress functionality and the use of different design elements to enhance the visual appeal of the project.
🎨 Color Selection and Component Application
The third paragraph focuses on selecting colors and applying them to various components within the design. It discusses the process of choosing a primary color and how it can be used to create a consistent look across the application. The speaker also talks about the use of different shades and the importance of color in creating a cohesive design. Additionally, there's mention of the application of these colors to components like buttons and text to ensure a uniform appearance.
📱 Mobile Interface Design and Component Interaction
This paragraph discusses the design of mobile interfaces, specifically for an iPhone, and the interaction of various components. It covers the process of importing and resizing elements to fit the screen, adjusting text and icons for better alignment, and ensuring that the interface is user-friendly. The speaker also talks about the use of different components such as input fields and buttons, and how they can be customized to improve the overall user experience.
🔄 Importing and Adjusting Design Elements
The final paragraph covers the process of importing and adjusting design elements to fit the project's requirements. It discusses the importance of aligning elements properly and changing their properties to match the design's theme. The speaker also talks about the process of searching for and importing specific elements like icons and illustrations, and how they can be adjusted for size, color, and position to create a cohesive design.
Mindmap
Keywords
💡Prototype
💡Illustration
💡Design
💡Component
💡Template
💡Color
💡Grid
💡Layout
💡Margin
💡Typography
💡Interface
Highlights
Creating a prototype that can be used in future projects.
Using a click action to reveal additional elements in a design.
Adjusting the layout to include a navigation bar and keyboard.
Customizing the design with color selection and vector illustrations.
Utilizing a grid system for layout design with specific margins and spacing.
Creating a unique design for a website or application interface.
Duplicating components for reuse in the design.
Importing and customizing illustrations for a personalized look.
Selecting and applying a primary color to maintain brand identity.
Designing with responsiveness in mind for different screen sizes.
Incorporating interactive elements like buttons and icons.
Adjusting text styles for readability and aesthetic appeal.
Using templates to streamline the design process.
Customizing input fields for user interaction.
Adding a personal touch with unique illustrations and icons.
Ensuring design elements are aligned and evenly spaced.
Creating a login interface with user and password fields.
Importing and adjusting the layout of a PDF document for design.
Finalizing the design with a focus on user experience and visual appeal.
Transcripts
Hai bermain belajar ya intense sampai
Goblin materinya sampai jadi Prototype
terjadi nanti hasilnya itu kayak gini
hasilnya ini bakalan ke pakailah di
proyek kirimkan nanti udah pas of
Hai tahun bisa jadi kita bila terjadi
itu buat gajari nih masuk nih terus pas
diklik kayak gini biasa Munculkan nanti
diklik muncul juga habis itu bisa Klik
masuk atau go ada bakalan muncul kayak
gini
Hai Deden perut Bisa diskon kiri-kanan
sama atas bawah nanti jadinya kayak gitu
akhirnya lam gacuk keren banget sih Kok
keren banget ya ampun bersama di sini
biar gampang drivernya itu ada fight map
megapiksel ini nanti bakalan buat apa
ilustrasinya yang kita ditulis seperti
itu dan ilustrasi yang di login ini
gratis sih yg lainnya juga banyak itu
ketempel gituri apa gimana restorasi
UltraViolet radiasi vektor vektor vektor
ilustrasi jadi jadi lu pilih warna juga
berubah dia memang sungguh Perry jadi
gampanglah Oke setelah itu prepare yang
kedua ada mini bisul ketiga itu ada
warnanya jadi kita ngambil War dari ini
rusuh nih Nah ini nih
Hai ridwana warna ini nanti cuma ngambil
satu doang sih lagi di sini banyak nih
paginya semakin gua pakai nanti di
tutorial ini ada itempi Avatar Ramos
pete dog Jadi lu searching aja bisa
smooth edho
Hai center Azmi ada install aja nih
kalau install nanti bakalan ada ceklis
gitu nah terus langsung ke bikin ajalah
kita nih dulu new file disini karena
main aplikasi dikasih bisa nah disini
maksudnya komponen itu my komponen Biar
apa ya kayak kalau lu tahu atau mix
design jadi dia bakalan bikin kaya
sebuah template gitu jadi nanti kalau
misalnya diubah satu nanti gue basmol
gede contohnya batang gitu Jadi kita
udah bikin awalnya itu batang yang
warnanya ini tiba-tiba Pak sudah jadi
aplikasi nyampenya buah warna gitu nanti
bakalan bacanya itu di semua face itu
bakalan berubah jadi
Hai diganti satu lagi nah sebelumnya ini
kita harus The Black Edition cheat dari
ios ipad 13 ini design Kids Ayo s.ip 13
nah ini ini diduplikat aja nih ini
duplicated Nanti dia bakalan muncul di
fic
Hai layang ini nih jadi nanti kita bakal
ngambil apa namanya top-up namanya yang
atas itu tuh yang kayak adzam ada logo
WiFi itu terus sama keyboard-nya disitu
nanti jadi lu duplicated dulu ini sampai
ambil mocaf nyari eh ngambil apa itu
komponen-komponen mengambil komponen
beberapa komponen-komponen doang tadi
saya yang keyboard-nya akan kita butuh
keyboardnya tadi daripada bikin hal satu
nanti lama Oke ada di sini ada Pets nih
disini face jadi kita bakalan bikin
pertama flash misalkan lu mau bikin
website Berarti kayak lem dulu ini terus
mau bikin kue design-nya bikin new
design sini jadi beda-beda in aja nah
kalau mau komponen-komponen disini ini
gua diubah way apa dibedain ya Jadi ada
disana
Comment and jenis komponen ini kita
bikin komponen yang tadi itu bikin aja
frame samain ama desain yang paling kita
bikin samuekon Alfan bukti sms-an paling
umum ukurannya kalau iPhone 12 lu boleh
boleh jadi kayak gitu Karena kan kalau
iPhone 12 nanti lu your screen nya susah
karena kan lu pada pakai Xiaomi kan jadi
salah ngetik kalau Advan Advan Advan
lagi meledak kalau ia Iya gimana Bang
gua bisa aja Nisa disini komponen fade
Hai di sini kita bakal bikin langsung
maupun investor ditinggalkan kayaknya
tadi tuh bareng xinergix Angeles ini
kalau nggak di ruler dulu deh Biar
ketahuan apa ramai nama Margin yang ada
di duduk tak janji cepet nanti ada ini
ulangnya kalau terlalu di situ Oke kita
bikin layout gridnya dulu deh polisinya
komponen PC outlet di sini kirinya itu
kita ganti jadi mencekam disini gridnya
misalkan berapa ya ganti Volume 5
belajarnya berapa ya 20 aja marginnya 5
nih poinnya 40 Teluk 10.00 mienya
Hai ini buat apa namanya kalau biar ada
save area gitu jadi kayak ada WordPress
kita jadi kita design-nya ya di sini aja
nanti udah ngelewatin websitenya setelah
itu ada ruler nih oleh tinggal parkir
sih kalau mau atas tarik kayak gini
kalau main kanan kiri tarik Mini Nah di
sini baru Tinggal kita desain ini
greatness Thailand nego Malang in Nah
setelah itu disini kita bikin aja
misalnya Baton ininya 250 dan hanya 50
border-radius nya 20-30
Hai Adi sini kita ngambil warna dulu
gimana Sehatnya terus kita ambil warna
yang ametis misalkan kopi Nah ini kan
kodenya nih tinggal kita ganti filenya
disini high diganti enter gitu nah di
awal berubah warna nah disini komponen
warna juga kita apa namanya komponen
warna yang tadi kita ini kita save juga
nih jadi Devil's ini file nih setelah
itu ditambah Ed create style Nah kalau
tempelkan ini buat warna utama berarti
primary color itu jadi MTQ
Ayo kita bikin Dukuh spam Extreme color
ini nanti bakalan berarti aplikasi yang
kita buat itu identik dengan warna sing
apa Ungu ini ya play-doh ada misalkan
kita mau buat phone juga Jadi ada
template font gitu kan untuk kita untuk
header itu gue pakai misalkan 24 Jan 4
eh 2828 terus Lego regular header
ganti-ganti Bolt ya lah itu sini udah
nggak ada edit-editan lagi dan warnanya
itu apa yang warna apa ya cuma ini aja
deh main warnanya Nah setelah itu lu
juga bisa save ini biar nanti kita nggak
usah ngedit ngedit phone-nya lagi jadi
Udah ada pohon templatenya sampai tadi
di bagian
Niken ada word.pdf kenapa tahu itu
stonington ini jadi di sini kita bikin
style untuk headernya nanti gitu ini
kita lanjut yang patung tadi ini belum
kelar batu Mini itu tambahin yang
namanya hands-on akunnya gitu buatan
disini dan kita gantungan puting
Hai ininya jangan ganti header nih kalau
mau ganti Sadikin kita masih ikutin
konseling tidur nih Nah di sini ada
bagian edit file nih Atau enggak yang
detektif ini dia bakalan eh apa ya
misahin yang tadi Nah jadi dia enggak
bergantung ama yang ponsel hydro ini di
sini tinggal kita ubah gua mau ini
medium aja ya gini lah itu ponselnya itu
gosok gede-gede lompat aja Nah kayak
gini nah untuk stretch komponennya
flublok nih sama lu mau komponen2 ini
mau dijadikan momen Klik Kanan play itu
ada free komponen nih atau catur rawk
Hai Mbak Jadi dia bakalan jadi komponen
satu kita ganti creamery Banten segitu
ini juga sama kalau mau apa ini enggak
usah deh Ma Cara pakainya gimana bisa
Banten ini kan gitu udah bikin nih jadi
udah bikin satu komponen Nah di sini ada
nih komponen PC nah deh bakal muncul di
aset ini layer ini Asep nanti akan
muncul di komponen ke sini kalau mau
pakai tinggal lari ke ini dia bakalan
muncul segitu dan kita lihat bikin lagi
kan in primary batin dan ada juga
Kendari batunya buat tayang Misalkan apa
ya bedain kontrak gitu Nah di sini gua
mau sistem dari batangnya ini kita Klik
Kanan dulu biar hilang ini kamu karena
aku mau bikin komponen yang berbeda jadi
detect instan jadi dia ngilangin laptop
Hai komponen yang ada play tuh gua
mengubah misalkan apanya ini detect juga
nih kita stylenya kita di teks asli itu
oh ini warnanya putih dan Pitt County
queens produknya struknya itu warna ungu
tadi Ungu
Hai dan ininya tiga roknya jangan ini
info terlalu tebel dua aja nelpon yang
tadi juga sama kita ganti nah kayak gitu
sama kita di di blog keduanya terlalu
ini oh ini jadi frame kalau nggak mau
jadi frame diambil Pajero Nah di sini
baru Tinggal kita bikin free komponen
lagi kita namain Recon Deri Baton stick
itu kita lihat-lihat set nah ini udah
jadi pengen written on the beach Banten
kalau kita masukin Nah udah jadi ya
segitu habis ini kita langsung bikin
itunya dulu Yoi desainnya disini ini
komponen ini redesign Nah di sini kita
bikin frame iPhone
enam air penguapan aja ya karena ini
yang standar lagi peternakan lu punya
jadi di sini kita bikin misalkan login
yang login Kalau lu nggak mau ininya
gerak-gerak itu lebih salok Klik Kanan
ada love atau analog dia nggak bakal
bisa diterapkan namanya pindah pindahin
segitu Tapi itu nanti aja kalau di sini
udah jadi baru kita lock Nah di sini
pertama kita di memasukin apa namanya 10
welcome cuma fb.edi sini ada kalau mau
pakai tadi yang style tadi tuh ngider di
sini ada nih jadi klik teksnya lalu
itu yang titik 4 ini pakai headers ada
bakalan penyesuaian nama karr yang tadi
kita bikin kayak gitu dan warnanya
tinggal kita ubah ini kita aktif ini
dulu beritanya nih layout klik kita di
jadinya ganti jadi kolom
Hai on-nya 4 marginnya 20 sudah ternyata
Jangan jauh-jauh 10 Nah segitu terus
kita tarik rollernya Nah kita ilangin
aja nih kita haid aja nih jangan di
delete okejitu dan ini dia jadi Welcome
to Miami kita langsung bikin Cebong
bikin cari ilustrasinya Stasiun ini
Kanada teknik ditinggal lu
Hai hadits ini banyak nih warnanya Kalau
bisa sih warnanya gue saranin pakai
pewarna ini ini kodenya lu kopi
ilustrasi nah disini akan ada hak
tinggal hashtag Nah jadi warnanya kan
nanti bakalan sama juga setelah itu
terganggu memakai ingini download SPG
nya jangan download.png ya download
FBnya dia bakalan muncul di sini kalau
udah di download buka
Hai Innovation ini masukkin ke hikmah
kita ini pak sesuaian kalau nggak kalau
mau langsung misalkan mau tengah-tengah
gitu pakai Hendro Priyo Iya bitrate
biasa Dolken Kopaja berkoin Welcome to
my eyes
hai hai
saat ini kita anggur pajak deh biar dia
enggak jadi frame karena ini frame
himpunan grup-grup bener setelah itu
baru kita buruk lagi karena tadi jadinya
Friend bukan jadi grup biasa
tinggalkan Factor login
Hai Nah kalau misal lihat nih Ini masih
di atasnya frame Fuji nih jadi dia
enggak di dalam fans-nya login Jadi lu
tinggal tarik ke bawah biar dia ada di
dalam face login ini kita lah itu balik
lagi ke komponen kita belum bikin yang
namanya input field nya gitu tadi kita
butuh info input field pencet tadi jadi
begini Gampang sih tinggal kayak bikin
[Musik]
E250 aja samain sama yang baterainya ini
setelah itu warna kita ubah Nah untuk
teksnya juga misalkan Tektonisme ini kan
masih pakai header nih kita dites lagi
dites lagi nah kita ganti jadi ini
kecilin
e18 dan gak board regular aja lah itu
warnanya untuk warna tas warna ungu tapi
agak atasnya gini gitu Nah setelah itu
untuk ini sebenarnya ada nanti tinggal
kita by apa meskipun iconnya sih utama
kalau misal udah download yang icon wifi
tadi tuh yang di ini Hai lebih Klik
Kanan place in the nanti bakalan muncul
podium lagi nih ada atau yang udah lu
install jadi Cupen pilih icon Yi
menunggu sebentar sampai muncul dengan
sini tinggal user ID
Hai misalkan lu mau search apa home Om
ke sini akan muncul atau karena gue
butuh yuser berarti iser ini Play Itu
lampu masih gimana ya ini deh pilih aja
ikonnya
hai lalu bisa chatting chatting aja
disini dan linford udah adem akan muncul
di sini ini biar sejajar gitu caranya lu
blok aja dua-duanya nih play to listen
Hai yang apalagi namanya Like You versi
call center menjadi dia bakal sejajar
dan disini tinggal ganti aja warnanya
tracktion kolornya ini kita ganti jadwal
MU
Oh gitu nah ini Tinggal kita kalau mau
bikin komponen Enggak apa-apa Begini
komponen tadi gua mau bikin komponen
yaitu yang teks aja nih
Hai ternanti gua bakalan ganti icon yang
usernya juga akan ada password juga
terjadi umumkan 30 kalau jadi komponen
dia enggak boleh bisa diganti lagi
icon-nya yang tadi terjadi Flores bikin
account apa Lu harus bikin komponen yang
baru lagi nanti passwordnya jadi
daripada bikin gua kayak gitu mendingan
deh ini aja komponen-komponennya dua ini
objek ini Baitul
[Musik]
Ayo kita bikin putih Ok trus kita ke
pdfin habis ini aset Kita masukin begini
tadi center aja lah itu kita di masukin
lagi nih iPhone
[Musik]
Hai impor maaf kalau udah impor kita
cari lagi lovebird
Hai kemana ya ini aja kita impor pagi
the management of
Hai mungkin tadi klik dulu ini atau yang
ininya setelah itu di-like infertil
center biar dia sejajar warnanya kita
ganti juga ini kata sedikit sih
Hai Oke gitu Setelah itu lu copy-paste
aja Nah di sini lu ganti Paspor Kan
kalau misalnya lu ketik banyak-banyak
yakin kayak gini nah kalau misalkan mau
biar otomatis itu enggak ke bawah kayak
gitu ke komponen yang jatuh klik aja di
inputnya di sini Lu setting nih
dipanjangin play to the kiri Ini lagi
ngelive kita Nah kalau kita lihat jadi
bakalan pasti layer Kyle Nadia bakal
otomatis berubah bakalan panjang
password Ya tinggal kita di ubah
warnanya juga
Aku titip strawberry kayak gini
metrotvnews alat ini tombol dulu zuk
mana sih kok nggak papalah ini login
kita bikin merekamnya juga iPhone Alfan
tambahin di sini welcome
hai hai
Hai play-doh kita cari lagi ilustrasinya
[Musik]
Manado stresnya ini aja deh protes DJ
MP3 nih kirim Translate itu lu tinggal
masukin aja yang tadi itu batang
batangnya
Hai nah disini Banten untuk misalkan
untuk login Nah ini kan masih apa
namanya Masih ke Lyon live ya Jadi lu
harus coba dulu klik aja badannya play
tuh yang ini nih speknya lubah jadi
center Legend center kayak gitu Nah
kalau kita lihat klier deh bakalan
langsung teks center ini setengahnya
Setelah itu kita bakal pakai yang
secondary bab ini kita ganti jadi sign
up
Oh gitu Ini kan udah jadi login
[Musik]
interface nah ini login disini ada
[Musik]
Hai makan Welcome login kita udah jadi
nih
[Musik]
hai hai
関連動画をさらに表示
Membuat UI DESIGN yang simple dengan FIGMA - Belajar Figma Bareng (2/3)
Membuat Prototyping & Interactions di Figma - Belajar Figma Bareng (3/3)
Figma To Real Website | Responsive Homepage | HTML, CSS & JavaScript | Part 7
Föreläsning: Designelement
Lesson 4: Design with themes & strips | Wix Learn
Learn Framer in 20 Minutes (Crash Course)
5.0 / 5 (0 votes)