OKEGUYS
  • Tutorial
    • Adobe
    • Ahrefs
    • Blogger
    • Canva
    • Google Adsense
    • Google Analyitcs
    • Google Documents
    • Google Tag Manager
    • Microsoft Office
    • SEO
    • UI/UX
    • Web Design
    • WordPress
  • Fix It
    • Life Hack
    • How To Fix
  • Gadget
    • PC
    • Smart TV
    • Smartwatch
    • Smartphone
  • Intermezzo
    • Recommendation
  • Games
  • Anime
  • News
  • Ramadan Corner
OKEGUYS
  • Tutorial
    • Adobe
    • Ahrefs
    • Blogger
    • Canva
    • Google Adsense
    • Google Analyitcs
    • Google Documents
    • Google Tag Manager
    • Microsoft Office
    • SEO
    • UI/UX
    • Web Design
    • WordPress
  • Fix It
    • Life Hack
    • How To Fix
  • Gadget
    • PC
    • Smart TV
    • Smartwatch
    • Smartphone
  • Intermezzo
    • Recommendation
  • Games
  • Anime
  • News
  • Ramadan Corner
OKEGUYS
Home Development UI/UX

Tutorial UI/UX: Cara Buat Auto Layout di Figma dan Fungsinya

Salah satu fitur di Figma yang akan membantu pekerjaan kamu menjadi lebih efisien

Februari 24, 2021
in UI/UX
150 5
Cara Buat Auto Layout Figma

OKEGUYS – Buat kamu yang sedang ingin membuat situs atau aplikasi, kamu harus tahu dulu nih Cara Buat Auto Layout di Figma dan Fungsinya.

Langkah-langkah berikut akan mengajarkan kamu bagaimana cara kerja auto layout di Figma, melihat lebih dekat fitur auto layout baru saat sedang mendesain UI Shopping Cart.

Cara Buat Auto Layout dan Fungsinya di Figma

Pengertian Auto Layout

Ini adalah fitur Figma yang memungkinkan kamu untuk menerapkan dynamic frames yang menyesuaikan dengan isinya.

Kamu bisa menggunakan fitur ini untuk membuat tombol yang mengubah ukuran sesuai dengan teksnya, membuat daftar atau kolom elemen yang dapat kamu atur ulang dengan mudah, atau kamu bisa menumpuk auto layout frames di dalam auto layout frames lainnya.

1. Cara Membuat Ikon Notifikasi Menggunakan Figma Auto Layout

  1. Pilih Type tool (T) dari toolbar kamu, dan ketik “5”.
    Cara Buat Auto Layout Figma
    photo: envatotuts

    Gunakan font Montserrat untuk bagian teks ini, atur gayanya ke Bold dan ukurannya menjadi 12, centang tombol Text Align Center (Control-Alt-T), dan ubah warna menjadi putih (#FFFFFF).

  2. Setelah kamu pilih teks, cukup tekan shortcut keyboard Shift-A untuk menambahkan auto layout.
    Cara Buat Auto Layout Figma
    Fokus pada bagian Tata Letak Otomatis dari sidebar kanan untuk menyesuaikan pengaturan, dan atur Padding Around Items ke 8.
  3. Pastikan auto layout kamu tetap dipilih dan tetap fokus pada sidebar kanan.
    Cara Buat Auto Layout Figma
    photo: envatotuts

    Pertama, klik bagian isi untuk menambahkan warna isian dan atur ke # FF4200, lalu klik bagian Stroke untuk menambahkan coretan. Atur warnanya menjadi putih, tingkatkan bobot menjadi 2 dan atur perataan ke Luar.

    Pindah ke atas sidebar kanan dan atur Corner Radius menjadi 10.

  4. Ini adalah auto layout dasar kamu dan setiap kali kamu akan mengubah teks, ukuran frame diubah secara dinamis untuk mengakomodasi konten baru.

Cukup mudah kan Guys cara buat Auto Layout di Figma dan fungsinya juga cukup membuat pekerjaan kamu efisien. Jadi setiap kali kamu mau mengubah teks, maka auto layout itu akan menyesuaikan dengan konten baru kamu itu Guys.


Artikel Menarik Lainnya

  • Buat Frame Website Sederhana di Figma
  • Tahapan Penting Dalam UI/UX, Jangan Terlewat!
  • Perbedaan Wireframe, Prototype dan Mockup
  •  Panduan Awal untuk Membuat Wireframe
  • Tips UI untuk Buta Warna
Tags: Auto Layout UIFigmaTips UI
Share192Tweet120Send

Related Posts

Coba Bikin UI Figma
UI/UX

Tutorial UI/UX: Coba Bikin UI di Figma #2

OKEGUYS - Ini adalah tutorial lanjutan dari coba bikin UI di Figma bagian kedua ya Guys, yang akan membuat kamu lebih...

by Rivani Aryanagara
Februari 26, 2021
Bikin UI Figma
UI/UX

Tutorial UI/UX: Coba Bikin UI di Figma #1

OKEGUYS - Ini dia Guys, setelah kamu memahami dasar-dasarnya sekarang kita langsung coba bikin UI di Figma dengan lanjutan tutorial sebelumnya...

by Rivani Aryanagara
Februari 26, 2021
Mengenal Inspect Panel Figma
UI/UX

Tutorial UI/UX: Mengenal Inspect Panel Figma dan Penggunaannya

OKEGUYS - Sebelum kamu masuk ke tahap pembuatan web desain, alangkah lebih baiknya kamu mengenal inspect panel Figma dan cara penggunaannya...

by Rivani Aryanagara
Februari 25, 2021
Cara Buat Kaca Buram Figma
UI/UX

Tutorial UI/UX: Cara Buat Efek Kaca Buram di Figma

OKEGUYS - Dengan cara membuat efek kaca buram atau frosted glass di Figma kamu bisa membuat UI yang keren lho...

by Rivani Aryanagara
Februari 25, 2021
Next Post
Resident Evil Akan Kolaborasi dengan Rainbow Six Siege

Resident Evil Akan Kolaborasi dengan Rainbow Six Siege

Smartphone layar gulung LG Dihentikan

Pengembangan Smartphone Layar Gulung LG Dihentikan?

Discussion about this post

Recommended

Film Hollywood Bertemakan Islam

Rekomendasi Film Hollywood yang Bertemakan Islam

April 16, 2021
Aplikasi Download Video YouTube

Aplikasi Download Video Youtube Terbaik 2021

April 17, 2021
Godzilla Destruction Mobile

Godzilla Destruction Akan Hadir Versi Mobile Akhir Bulan Ini!

April 19, 2021
Cara Copy Paste Tulisan Dari Internet Ke Microsoft Word

Cara Copy Paste Tulisan Dari Internet Ke Microsoft Word

April 22, 2021
spesifikasi harga Xperia 1 III

Spesifikasi dan Harga Sony Xperia 1 III

Artikel Terbaru

Antivirus Terbaik Untuk Smartphone

Rekomendasi Antivirus Terbaik Untuk Smartphone

April 22, 2021
Tips Bermain Game Puasa

5 Tips Bermain Game Agar Serasa Tidak Sedang Puasa

April 22, 2021
Harga Paket Telkomsel Ramadhan

Harga Paket Telkomsel Murah di Bulan Ramadhan 2021

April 22, 2021
Cara Install Magisk Manager

Cara Install Magisk Manager, Mudah!

April 22, 2021
Modul Plugin Terbaik Xposed

Rekomendasi Modul Atau Plugin Terbaik Xposed

April 22, 2021
Game Offline PC Time Killer

5 Game Offline PC Time Killer Buat Ngabuburit

April 22, 2021
Cara Mengganti Gambar di Microsoft Word

Cara Mengganti Gambar di Microsoft Word

April 22, 2021

OKEGUYS.

Misi untuk membantu semua orang mengasah keahlian digital dengan beragam serial tutorial. Mendukung semua orang untuk dapat berkarya di ranah digital.

Member Of Limapagi Network Langit Group :

Limapagi Network Limapagi  Limapagi Network OKEGUYS  Limapagi Network OKEMOM

  • About Us
  • Contact
  • Privacy Policy
  • Cyber Coverage Guidelines
  • Login
No Result
View All Result
  • Tutorial
    • SEO
    • Ahrefs
    • Microsoft Office
    • UI/UX
    • Google Adsense
    • Google Analyitcs
    • Google Documents
    • Adobe
    • WordPress
    • Canva
    • Google Tag Manager
    • Webmaster
    • Blogger
  • Download
    • Download Apps
    • Download Games
  • Fix It
    • How To Fix
    • Life Hack
  • Gadget
    • PC
    • Recommendation
    • Smart TV
    • Smartwatch
    • Smartphone
  • Intermezzo
  • Games
  • News
  • Anime
  • Ramadan Corner

Welcome Back!

Sign In with Facebook
Sign In with Google
OR

Login to your account below

Forgotten Password?

Retrieve your password

Please enter your username or email address to reset your password.

Log In