Best practices

· 7 min read

Design efficiently and maintain high-quality work with these best practices.

File Organization

Keep your work organized from the start.

Naming Conventions

Files: Use descriptive, consistent names:

  • ✅ Mobile App - User Profile v2.0
  • ✅ Marketing Site - Homepage Redesign
  • ❌ Untitled 7
  • ❌ Final Final REAL Final v3

Layers: Name everything meaningfully:

  • ✅ button/primary/default
  • ✅ icon/chevron-right
  • ✅ header/navigation-bar
  • ❌ Rectangle 42
  • ❌ Group 7
  • ❌ Frame 123

Layer Hierarchy

Group Related Elements:

Header
├── Logo
├── Navigation
│   ├── Link - Home
│   ├── Link - About
│   └── Link - Contact
└── User Menu
    ├── Avatar
    └── Dropdown

Collapse Completed Sections: Keep your layers panel clean by collapsing finished sections.

Delete Unused Layers: Don’t leave hidden or unused layers cluttering your file.

Page Organization

Use pages to organize large projects:

Pages for Stages:

📄 Wireframes
📄 Visual Design
📄 Prototypes
📄 Archive

Pages for Sections:

📄 Homepage
📄 Product Pages
📄 Checkout Flow
📄 User Profile

Component Best Practices

Build flexible, maintainable components.

Component Structure

Use Auto Layout: Always use Auto Layout for components that contain multiple elements.

Benefits:

  • Responsive to content changes
  • Maintains spacing automatically
  • Easier to resize
  • More predictable behavior

Proper Nesting:

Button Component
└── Auto Layout Frame
    ├── Icon (optional)
    └── Text Label

Name Layers: Even inside components, name every layer clearly.

Component Variants

Organize Properties: Group related variants:

Button
├── Type: Primary, Secondary, Tertiary
├── Size: Small, Medium, Large
└── State: Default, Hover, Pressed, Disabled

Logical Combinations: Ensure all variant combinations make sense.

Default State: Set the most common variant as default.

Overrides

Expose Properties: Make common customizations easy:

  • Text content
  • Icon visibility
  • Color overrides (when appropriate)

Instance Properties: Use instance properties for common swaps:

  • Icon variations
  • Boolean toggles (show/hide)

Documentation: Add descriptions to component properties explaining their use.

Design System Management

Maintain a healthy design system.

Consistency

Single Source of Truth: Keep one library file as the source of truth for all components and styles.

Use Styles Everywhere:

  • Color styles for all colors
  • Text styles for all typography
  • Effect styles for shadows and blurs

Avoid Detaching: Don’t detach from components unless absolutely necessary.

Naming Conventions

Hierarchical Names: Use slashes for hierarchy:

color/primary/500
color/gray/100
text/heading/h1
text/body/regular
component/button/primary

Consistent Format: Choose a format and stick to it team-wide.

Library Updates

Semantic Versioning:

  • Major: Breaking changes
  • Minor: New features, backward compatible
  • Patch: Bug fixes

Changelog: Document what changed in each update:

v2.1.0
- Added: Dark mode variants for all buttons
- Updated: Increased button height for better accessibility
- Fixed: Misaligned icon in alert component

Test Before Publishing: Always test library changes in real projects before publishing.

Performance Optimization

Keep files fast and responsive.

Layer Efficiency

Flatten When Done: Flatten complex layer hierarchies that won’t change:

  • Finished illustrations
  • Complex effects
  • Heavy shadows

Simplify Paths: Remove unnecessary anchor points from vector paths.

Reduce Boolean Operations: Flatten boolean operations when editing is complete.

Image Optimization

Appropriate Format:

  • PNG: Graphics with transparency
  • JPG: Photos and complex images
  • SVG: Icons and simple graphics

Compress Before Importing: Use ImageOptim or similar tools before importing.

Delete Unused Images: Clean up unused images from your file’s assets.

Effect Optimization

Minimize Blur: Heavy blur effects slow rendering - use sparingly.

Combine Shadows: Multiple shadows on many layers impact performance.

Simplify Effects: Consider using images for complex effects in large files.

File Size

Split Large Projects: Use multiple files for very large projects.

Use Components: Component instances are more efficient than copied groups.

Archive Old Versions: Move old iterations to archive page or separate file.

Responsive Design

Design for all screen sizes.

Mobile First

Start Small: Design mobile layouts first, then scale up.

Touch Targets: Minimum 44×44px for interactive elements.

Thumb Zone: Place important actions within easy reach on mobile.

Breakpoints

Standard Breakpoints:

Mobile: 375px - 767px
Tablet: 768px - 1023px
Desktop: 1024px+

Design Key Sizes: Don’t design every size - focus on:

  • 375px (Mobile)
  • 768px (Tablet)
  • 1440px (Desktop)

Constraints

Set Appropriate Constraints:

  • Navigation: Left & Right (stretch)
  • Centered logo: Center
  • Sidebar: Left + Top & Bottom
  • Footer: Left & Right + Bottom

Auto Layout

Responsive Components: Use Auto Layout with:

  • Hug contents for flexible sizing
  • Fill container for stretching
  • Min/max width for boundaries

Accessibility

Design for everyone.

Color Contrast

WCAG Standards:

  • AA: 4.5:1 for normal text
  • AA: 3:1 for large text (18pt+)
  • AAA: 7:1 for normal text

Test Contrast: Use Acme plugins or tools to check:

  • Stark
  • Contrast
  • A11y - Color Contrast Checker

Don’t Rely on Color Alone: Use icons or text labels in addition to color.

Typography

Readable Sizes:

  • Body text: Minimum 16px
  • Line height: 1.5× font size
  • Line length: 45-75 characters

Font Weights: Ensure sufficient weight for readability.

Hierarchy: Clear visual hierarchy through size and weight differences.

Focus States

Visible Focus: Always design visible focus states for keyboard navigation.

Logical Tab Order: Ensure tab order follows visual flow.

Alt Text

Plan for Alt Text: Note where alt text is needed for images and icons.

Decorative vs Informative: Distinguish between decorative images (can be skipped) and informative images (need description).

Collaboration Workflow

Work effectively with your team.

Communication

Clear Comments: Be specific and constructive:

  • ✅ “Let’s increase the button contrast to meet WCAG AA standards (currently 3.2:1, needs 4.5:1)”
  • ❌ “Doesn’t look right”

Context: Explain the why behind design decisions.

@Mentions: Mention relevant people for visibility.

File Sharing

Appropriate Permissions:

  • Edit: Team members actively working
  • Comment: Stakeholders and reviewers
  • View: Broader organization

Clear Status: Add status labels or notes:

  • 🟡 In Progress
  • 🟣 Ready for Review
  • 🔵 In Review
  • 🟢 Approved

Version Control

Named Versions: Save named versions at milestones:

  • Before major changes
  • When ready for review
  • After approval
  • Before handoff

Branch for Exploration: Use branches for experimental work or major changes.

Developer Handoff

Make implementation smooth.

Preparation

Complete Designs: Ensure all states are designed:

  • Default, hover, focus, active, disabled
  • Empty states
  • Error states
  • Loading states

Consistent Naming: Use names that match code conventions:

  • camelCase or snake_case
  • Match component names in codebase

Export Assets: Mark all assets for export with appropriate settings.

Documentation

Interaction Notes: Document interactions that aren’t obvious:

  • Animations (duration, easing)
  • Transitions
  • Conditional logic
  • Edge cases

Responsive Behavior: Note how elements should behave:

  • What stays fixed vs scrolls
  • How content reflows
  • Breakpoint-specific changes

Annotations: Use comments to note:

  • Implementation details
  • Third-party libraries to use
  • Technical constraints
  • API requirements

Specs

Provide:

  • Spacing measurements
  • Color values (hex, RGB)
  • Typography specs
  • Asset files
  • Interactive prototype

Developer Mode: Ensure developers have view access to:

  • Inspect properties
  • Copy code
  • Download assets

Design Process

Efficient workflow from concept to completion.

Research Phase

Gather Requirements:

  • User needs
  • Business goals
  • Technical constraints
  • Content requirements

Competitive Analysis: Research similar products and patterns.

User Flows: Map out user journeys before designing screens.

Ideation

Low Fidelity First:

  • Sketches
  • Wireframes
  • Lo-fi prototypes

Iterate Quickly: Multiple directions before polishing.

Get Feedback Early: Don’t wait until designs are perfect.

Visual Design

Style Exploration: Try different visual directions:

  • Color schemes
  • Typography
  • Visual style

Apply System: Use design system components whenever possible.

Attention to Detail:

  • Alignment
  • Consistent spacing
  • Typography hierarchy
  • Micro-interactions

Testing

Internal Review: Team review for:

  • Design quality
  • Consistency
  • Completeness
  • Technical feasibility

User Testing: Test with actual users:

  • Usability testing
  • A/B testing
  • Feedback sessions

Iterate: Refine based on feedback.

Quality Checklist

Before considering work complete:

Visual Quality

  • All text is properly styled (no default text)
  • Consistent spacing throughout
  • Proper alignment
  • No stray pixels or artifacts
  • Proper layer nesting
  • Everything named clearly

Components

  • All components properly set up
  • Variants cover all states
  • Auto Layout used where appropriate
  • No detached instances (unless intentional)

Responsiveness

  • Designed for key breakpoints
  • Constraints set correctly
  • Tested at different sizes

Accessibility

  • Color contrast meets WCAG AA
  • Focus states designed
  • Alt text planned
  • Readable text sizes

Completeness

  • All screens designed
  • All states covered
  • Empty states designed
  • Error states designed
  • Loading states designed

Handoff Ready

  • Assets marked for export
  • Interactions documented
  • Comments addressed
  • Developer notes added
  • Prototype working

Common Pitfalls

Avoid these common mistakes.

Don’t

  • ❌ Detach from components unnecessarily
  • ❌ Use absolute positioning when Auto Layout works
  • ❌ Leave default layer names
  • ❌ Forget to name versions
  • ❌ Design without constraints
  • ❌ Skip documentation
  • ❌ Ignore performance
  • ❌ Copy instead of using instances

Do

  • ✅ Use components and styles
  • ✅ Name everything clearly
  • ✅ Organize with pages and frames
  • ✅ Set up constraints
  • ✅ Use Auto Layout
  • ✅ Test responsiveness
  • ✅ Document decisions
  • ✅ Keep files clean

Continuous Improvement

Learn Constantly: Stay updated with new features and techniques.

Seek Feedback: Ask for constructive criticism on your work.

Review Your Work: Look back at old projects and see what you’d improve.

Share Knowledge: Help teammates learn best practices.

Contribute: Improve the design system with new components and patterns.

Next Steps