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, developer-friendly 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)