← CSS59 / 62

Auto layout Figma = Flexbox

Ini pemetaan yang perlu kamu hafal karena dipakai setiap hari: Auto layout vertical → flex-direction: column; horizontal → row. Properti *gap* di Figma → gap. *Padding* → padding. Alignment di panel Figma → justify-content dan align-items. Begitu kamu melihatnya sebagai Flexbox, membaca desain jadi jauh lebih cepat.

👀 Contoh dulu

/* Panel Figma:
   Auto layout : Vertical
   Gap         : 12
   Padding     : 16
   Align       : Center      */

.panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  align-items: center;
}

Hasilnya: Hasil di browser identik dengan frame di Figma — karena auto layout memang Flexbox dengan nama berbeda.

💡 Pemetaan: Vertical→column, Horizontal→row, Gap→gap, Padding→padding, Align→align-items.

📝 Sekarang giliranmu

Desainnya: auto layout horizontal, gap 16px, padding 24px, item center secara vertikal. Terapkan ke .toolbar.

Preview
← SebelumnyaBerikutnya →