Desain
7 Jul 2025
Stack dan cara memanfaatkan layout responsif
Stack adalah kerangka khusus yang secara otomatis menyelaraskan elemen anak untuk menciptakan struktur responsif, memungkinkan pengguna untuk mempertahankan tata letak yang alami tanpa perlu penempatan manual. Dalam artikel ini, kita akan menjelaskan tentang Stack.
Diposting oleh
Diterjemahkan oleh
Daftar Isi
Daftar Isi
Dokumen ini disusun untuk membantu pengguna Framer di Indonesia yang mengalami kesulitan karena kurangnya sumber daya berbahasa Indonesia. Kami telah menerjemahkan konten dari blog resmi dan menambahkan informasi berguna untuk praktik. Kami berharap ini dapat memberikan sedikit bantuan bagi Anda yang menggunakan FramerFramer.
Apa itu Stack?
Stack adalah frame khusus yang secara otomatis mengatur elemen anak secara horizontal atau vertikal.
Mirip dengan konsep Flexbox di CSS atau Auto Layout di Figma, ini unggul dalam pengaturan konten dan implementasi struktur responsif.
Keunggulan Stack
Tidak perlu menempatkan elemen secara manual
Ukuran dan pengaturan secara otomatis disesuaikan menurut konten
Implementasi struktur responsif mudah
Layout tetap natural bahkan jika teks atau gambar berubah
Misalnya, jika teks tombol diubah, lebar tombol juga akan menyesuaikan secara otomatis, dan jika teks di kartu bertambah, area keseluruhan akan meluas secara natural.
Tiga cara membuat Stack
Menambahkan properti Stack ke frame yang ada
Pilih frame, lalu atur
Layoutdi sebelah kanan
Membuat Stack frame dari awal
Pilih
RowatauColumndi toolbar lalu tarik
Mengelompokkan elemen yang ada menjadi Stack
Pilih beberapa elemen, kemudian
klik kanan > Add Stackatau gunakan pintasan (Mac:Option + Cmd + Return, Windows:Ctrl + Alt + Enter)
Menelusuri properti Stack
Properti | Deskripsi |
|---|---|
Direction | Penyusunan horizontal/vertikal |
Distribute | Penyesuaian otomatis jarak antar elemen, mulai/tengah/akhir |
Align | Penyusunan vertikal berdasarkan |
Gap | Mengatur jarak antar elemen, bisa disesuaikan dengan tarik |
Padding | Menentukan spasi dalam Stack (bisa disetel terpisah untuk keempat sisi) |
Penyesuaian otomatis Stack sesuai elemen anak
Menggunakan Shift + A atau klik kanan > Fit Content memungkinkan frame Stack untuk menyesuaikan secara otomatis dengan ukuran elemen anak.
Contoh penggunaan Stack
Bar Navigasi: Logo + Menu (Stack horizontal)
Komponen Kartu: Gambar + Teks + Tombol (Stack vertikal)
Komposisi Tombol: Lebar disesuaikan secara otomatis berdasarkan panjang teks (
Fit Content)
Juga mendukung struktur layout responsif
Menerapkan Stack pada seluruh halaman memudahkan perubahan struktural berdasarkan breakpoint.
Mengelola setiap bagian seperti header, body, dan footer sebagai Stack menjadikan penyesuaian pengaturan atau jarak menjadi lebih intuitif.
Artikel ini adalah adaptasi dari konten resmi FramerFramer 'Stacks and Relative Positioning in FramerFramer'.
