Figma Workflow and Best Practices
Knowing Figma's tools is only half the skill. Organizing your files, working efficiently under deadlines, and collaborating cleanly with teams separates a competent Figma user from a truly effective one.
File Structure Best Practices
A well-structured file saves hours when projects grow large. Follow this page organization from day one:
Figma File: "ProjectName – Platform"
Page 1: Cover
(file name, version, date, owner)
Page 2: ✅ Specs & Flows
(annotated screens, user flow diagrams)
Page 3: 🎨 Designs – Production
(polished, approved screens only)
Page 4: 🔧 Designs – WIP
(work-in-progress explorations)
Page 5: 📦 Components
(all main components live here)
Page 6: 🗑️ Archive
(old screens moved here, not deleted)
Naming Conventions
Consistent naming reduces confusion when multiple designers work in one file. Apply naming rules at every level:
- Pages: Use emoji prefixes to show status at a glance (✅ ready, 🔧 in progress, 🗑️ archived).
- Frames: Use path notation —
Screen / State(e.g.,Home / Logged In,Cart / Empty). - Layers: Use kebab-case —
hero-image,nav-bar,price-label. - Components: Use slash grouping —
Button/Primary,Icon/Arrow Right.
Performance Tips for Large Files
Large files with hundreds of frames can become slow. Apply these habits to keep performance smooth:
- Flatten complex vector artwork after you finish editing it (Ctrl/Cmd + E).
- Use components instead of duplicating the same design element 50 times.
- Move unused designs to an Archive page and hide them.
- Keep images compressed — use PNG for icons and flat illustrations, JPEG for photos.
- Split very large projects into multiple files linked by a shared library.
Keyboard Shortcuts That Save the Most Time
Action Shortcut ----------------------------- ---------------------------- Duplicate Ctrl/Cmd + D Rename selected layer Ctrl/Cmd + R (or double-click in layers) Create component Ctrl/Cmd + Alt + K Toggle fill (hide/show) Alt + click color swatch Copy style to another layer Alt + drag layer in layers panel Show/hide layers panel Ctrl/Cmd + Shift + \ Quick action search Ctrl/Cmd + / Scale tool (resize with font) K Group selection Ctrl/Cmd + G Frame selection Ctrl/Cmd + Alt + G Zoom to selection Shift + 2 Zoom to fit all Shift + 1
Designing for Multiple Screen Sizes
Design mobile first. Start at 390px (iPhone 14 width). Once the mobile layout works, expand to 768px (tablet) and then 1440px (desktop). Auto Layout and constraints handle most of the adaptation — set them up on mobile and the layout flexes to larger sizes with minimal rework.
The Design Review Process
Before sharing designs with stakeholders or developers, run through this checklist:
- All layers named correctly.
- All text uses text styles (no free-floating font sizes).
- All colors use color styles or variables.
- All interactive screens have prototype connections.
- Accessibility contrast checked (use Stark plugin).
- Assets marked for export with correct scale settings.
- Frame marked as "Ready for dev" in Dev Mode.
Working with a Design System While Designing
Always build new screens using existing components from your design system. Resist the urge to draw a new button or card from scratch. Pull from the library, use instances, and override only what the specific screen requires. This discipline keeps designs consistent and speeds up developer handoff.
When to Explore vs When to Polish
In early stages, work fast and rough. Use gray rectangles as placeholders for images. Ignore exact pixel values. Focus on structure and information hierarchy. Only refine pixels, shadows, and exact colors once the layout and flow gets approval. Polishing before approval wastes time when changes roll in.
Documenting Design Decisions
Add sticky note annotations directly on the canvas to explain non-obvious design choices. Write comments in areas developers might misinterpret — for example, "This padding changes at tablet breakpoint" or "This icon appears only when the user has unread notifications." Annotations in the file itself outlast any Slack or email conversation.