Video Tutorials
Design best practices

Design best practices

These videos are shorter, typically less than 5 minutes. They are specific and will focus on a single topic. For the most up to date content, check out our Design best practices (opens in a new tab) and subscribe to our YouTube Channel (opens in a new tab)

Remove Overlapping layers

Issue : Messy overlaps in Figma hinder code generation

Solution : Design with Code in Mind

  • Use Auto Layout : Utilize Auto Layout for flexible resizing to avoid content clashes.
  • Avoid Fixed Heights: Allow content to adapt naturally for a smooth conversion.

Benefits :

  • Faster Locofy Lightning: Efficiently generate clean, maintainable code.
  • Happy Developers: Streamline the handoff process with well-structured code.

Flattening complex background

Complex graphics in Figma can pose challenges for code generation. Here's how to optimize them:

Issue :

  • Layered vector graphics (SVG) within your design can lead to bloated code.
  • Locofy might generate separate code elements for each layer, increasing complexity.

Solution : Flatten When Possible

  • Identify Suitable Graphics: Consider flattening graphics that don't require individual element control.
  • Flatten and Replace: Copy the layered SVG as a PNG image. Paste the PNG as a background image in your Figma frame. Copy the styling properties of the original SVG and apply them to the background image.

Benefits :

  • Lighter Code: Flattened graphics translate to simpler, cleaner code.
  • Reduced File Size: PNG backgrounds are often smaller than complex SVGs.
  • Faster Code Generation: Locofy can process the background image more efficiently.

Fix Inconsistent Paragraph Spacing in Figma

Issue : Manual spacing creates messy designs and bloated code.

Solution : Use paragraph spacing!

  • Find the hidden gem (often under text styles).
  • Set consistent spacing for a clean hierarchy.

Benefits :

  • Visually pleasing design.
  • Lighter, production-ready code.

Use same layer structure

Issue : Inconsistent layer structures in Figma (like missing "New" tags) can trip up Locofy's code generation, creating separate components and messy code.

Solution : Maintain a uniform layer structure across similar elements (e.g., cards). Hide variations strategically (like hiding "New" tags when not needed) to preserve a clean structure.

Benefits : Locofy can accurately identify shared components, resulting in cleaner, more efficient code and a smoother workflow.

Remember : Consistency is key! By keeping layers identical, you empower Locofy to generate well-organized code, making the handoff between design and development a breeze.

Align elements in center for improved responsiveness

Balancing Auto Layout and Control :

  • Auto Layout lays the groundwork for your design.
  • Fine-tune centering with fixed inner container width for consistent presentation across screens.
  • Maintain desired padding in the outer container.

Benefits :

  • Precise content centering.
  • Consistent spacing throughout responsiveness.
  • Control over design vision while leveraging Locofy's AI.

Locofy's Role : Analyzing your design, adapting to minor adjustments for optimal code generation.

Takeaway :Combine Auto Layout with strategic tweaks for beautiful and responsive Figma layouts. Locofy remains a valuable tool, learning from your designs for the best possible outcome.

Use border instead of line separator

Issue : Using lines (1px divs) for borders creates unnecessary elements and messy code.

Solution : Leverage Figma's built-in border feature.

  • Select elements and apply a bottom border (no need for extra lines).
  • Customize Borders: Figma allows individual side selection (top, bottom, etc.).

Benefits :

  • Cleaner Code: Reduces unnecessary elements and simplifies CSS.
  • Responsive Design: Borders adapt well during layout changes (unlike lines).
  • Improved Workflow: Less code means smoother handoff between design and development.

Remember: Design with code in mind. Using borders effectively creates cleaner Figma designs and streamlines the development process.

Name important layers in Figma

Issue : Messy layer names create confusing code.

Solution : Use clear, descriptive names (e.g., "Main Header"). This is one of the design best practices for better code generation after using the Locofy Lightning.

Benefits :

  • Cleaner, readable code.
  • Smoother handoff to developers.
  • Locofy's AI generates better code with good names.

Adding wrapper frame for elements with different alignments

Issue : Locofy struggles to understand ungrouped elements in Figma's Auto Layout.

Solution : Group related elements before applying Auto Layout.

Benefits :

  • Clearer Code Structure: Locofy generates cleaner, more maintainable code with proper grouping.
  • Improved Responsiveness: Grouped elements resize together for a better user experience.

Remember : Grouping elements before using Auto Layout ensures Locofy interprets your design correctly, resulting in a cleaner code and a seamless workflow.

Use Gaps intead of Paddings

Issue : Maintaining consistent spacing during responsive design can be tricky with padding.

Solution : Use Gaps

  • Gaps are applied to the container, ensuring consistent spacing across elements.
  • Padding is applied to individual elements, leading to potential misalignment in responsive layouts.

Benefits :

  • Effortless Responsiveness: Gaps automatically adapt with resizing, eliminating manual adjustments.
  • Cleaner Code: Less CSS code needed due to centralized gap management.

Use min/max width and min/max height

Issue : Keeping elements stacked in responsive layouts can be a pain.

Solution : Use Min and Max Width/Height for Figma's Auto Layout.

Benefits :

  • Clean Stacks: Elements stack automatically at your defined width.
  • Preserved Images: Maintains image proportions to avoid weird shrinking.

How to get help

How to get assistance from our team via our Discord community & documentation.

Want additional Content?

Please fill out our Survey (opens in a new tab)