Getting Started with Figma: Frames and Layout
Workspace setup, grids, and Auto Layout fundamentals.
Step 1: Workspace and New File
Open Figma in the browser or desktop app and create a new design file. The infinite canvas holds frames and elements; organize work inside frames rather than floating on the canvas alone.
Learn the left toolbar: Move (V), Frame (F), Rectangle (R), and Text (T). The right Properties panel changes with selection. Rename layers immediately — Header, Card_Stats, Button_Primary — so files stay manageable as they grow.
Step 2: Shapes, Text, and Constraints
Build basic UI with rectangles and text. Set fill, stroke, corner radius, and typography from the Design panel. Line height around 1.5 for body text improves readability.
When objects sit inside a frame, Constraints control resize behavior — left, right, center, or scale. Prefer Frame over Group: frames clip content and support grids and Auto Layout. Use align and distribute tools for precise spacing.
Step 3: Layout Grid and Column Grid
Select a frame and add a Layout Grid from the Design panel. A 12-column mobile grid with 16 px margins and 16 px gutter is a common starting point. Lower grid opacity so guides help without clutter.
Snap elements to columns, not arbitrary pixels. An 8 pt spacing system — padding 16, gap 24, icons 24x24 — creates consistent rhythm across screens.
Step 4: Auto Layout Basics
Select elements and press Shift+A to add Auto Layout. Choose horizontal or vertical direction, set padding and gap, and watch frames resize when content changes — essential for buttons, cards, and nav bars.
Nest Auto Layout frames for complex components. Use Fill container on a child to stretch within a row or column. Min and max width constraints prevent buttons from breaking on long translations.
Step 5: Components and Reuse
Select a button or input and create a Component with Ctrl+Alt+K. Instances stay linked to the main component; override text and icons per instance while structure stays synced.
Organize components on a dedicated page or frame in the file. Consistent naming — Button/Primary, Input/Default — speeds handoff and later design system work.
Step 6: Handoff Preparation
Inspect mode lets developers read spacing, colors, and export assets. Mark ready frames and add short notes for interaction or edge cases.
Practice exercise: build a mobile frame 393x852 with a 12-column grid, header with logo left and avatar right, and a primary button using Auto Layout. You are ready for full mobile screen design in the next tutorial.
FAQ
Frame or Group?
Use Frame for UI work. Frames support clipping, grids, Auto Layout, and export bounds. Groups only bundle selection and lack layout features.
When should I use Auto Layout?
Use it for any UI that must adapt to content length — buttons, lists, forms, and nav. Static marketing illustrations may not need it, but product UI almost always does.
What grid should I start with?
12 columns with 16 px gutter works for mobile and desktop when combined with appropriate margins. Adjust margins per breakpoint — tighter on phone, wider on desktop.