Desain
8 Jul 2025
FramerFramer로 responsif teks gaya breakpoint 설정하기
FramerFramer에서 텍스트 스타일 브레이크포인트를 설정하면 다양한 기기에서 가독성을 높이고 디자인 일관성을 유지할 수 있습니다. 또한, 반응형 UI를 손쉽게 구현할 수 있게 됩니다.

Diposting oleh

Diterjemahkan oleh
Daftar Isi
Daftar Isi
Dokumen ini dibuat untuk mengatasi kesulitan yang dialami pengguna domestik saat mempelajari Framer karena kurangnya materi dalam bahasa Indonesia, dengan menerjemahkan konten blog resmi ke dalam Bahasa Indonesia dan menambahkan informasi berguna untuk praktik kerja. Semoga ini bisa membantu Anda yang menggunakan Framer.
Apa itu Titik Henti Gaya Teks?
Agar sebuah situs web dapat dilihat di berbagai perangkat, ukuran teks dan jarak juga perlu disesuaikan berdasarkan ukuran layar. Framer menawarkan fitur yang sangat mudah untuk mengatur ini. Itulah Text Style Breakpoints.
Cara Membuat Titik Henti Gaya Teks
Buka tab
Assetsdi sebelah kiri dan pindah ke bagianStylesPilih gaya teks yang diinginkan (Contoh:
H1,Body M, dll.)Klik tombol
Add Breakpointspada bagianBreakpointsdi bawah jendelaEdit Style

Tiga Titik Henti yang Disediakan Secara Default
Desktop (L)Min width: 1200Tablet (M)Min width: 810Mobile (S)
Atribut Titik Henti
Font Size(Ukuran Font)Line Height(Tinggi Baris)Letter Spacing(Spasi Huruf)Paragraph Spacing(Spasi Paragraf)
Perhatian: Karena atribut dapat disesuaikan per titik henti, dimungkinkan untuk mengatur ukuran H1 ke 56px pada desktop dan menguranginya menjadi 32px pada perangkat mobile.
Mengapa Fitur Ini Penting?
Elemen yang paling sering digunakan dalam desain adalah teks. Karena teks bisa kehilangan keterbacaan atau terlalu besar sehingga merusak tata letak tergantung pada ukuran layar, mengatur titik henti yang sesuai dengan ukuran layar sangatlah penting.
Keuntungan Pengaturan Titik Henti
Otomatis menyesuaikan
ukuran hurufuntuk antarmuka responsifMempertahankan
konsistensi gayayang sudah dirancang oleh desainer sebelumnya
Konten ini merupakan terjemahan dan adaptasi dari dokumen resmi Framer ‘Setting Text Styles breakpoints’.




