Whether working on your own or as part of a team, following these best design practices will make you a design superstar by improving your productivity, organization and making the design-to-code handoff run much more smoothly!
You can also watch the YouTube video series here!
Skip to a section
2. Frame it
💡 Tip: If you're looking to optimize your Anima-generated code from your Figma design, check out this article for some additional best practices!
1. Name it and keep it clean:
One of the most important habits to implement as a designer is to name and clean up all of your design assets. Naming each and every one of your layers will make your project more organized and easy to navigate, especially if you’re handing it off to another designer or a developer! Don't forget, these are the same names that will appear in the exported code.
Do not leave your layer panel looking like this:
Instead, make it look something like this. Descriptive and easy to read:
Additionally, make sure to delete any layers, styles, frames and elements that are unused or hidden. And double check that all your text layers are set to “Auto-width” or “Auto-Height” instead of “Fixed”.
These might seem like tedious tasks, but they will ensure that the exported code is clean and free of unnecessary clutter!
2. Frame it:
If you have multiple related layers, it's always better to combine them into more organized, manageable layers, such as frames.
If there is any relationship between layers
To define the resizing behavior of child elements
To control the frame size independently of its contents
To apply styles
💡 Tip: Frames are suitable for Layout Grids, Auto Layouts, Constraints, Components and Styles.
Multiple objects (made of vector elements or images) that together make up a single symbol can be combined as groups as well, but we recommend using frames instead. Generally speaking, frames can do everything groups can do and contain logic that groups can’t.❗️Too many groups, especially nested groups (groups within groups), can complicate your design and code.
3. Make it responsive:
As mentioned above, one of the benefits of using Frames is their ability to support Figma's Auto Layout feature. This, in a nutshell, will help make your designs more responsive for different screen sizes!
So, what exactly is the purpose of auto layout?
According to Figma, "Auto layout is a property you can add to frames and components. It lets you create designs that grow to fill or shrink to fit, and reflow as their contents change. This is great when you need to add new layers, accommodate longer text strings, or maintain alignment as your designs evolve."
If your UI elements change between breakpoints, like a menu panel collapsing into a hamburger menu for the mobile display, you can also use Anima's Breakpoints feature.
💡 Tip: Check out this article to learn more about responsiveness with Figma and Anima, as well as some practice tutorials for using auto layout in Figma!
4. Use Components:
Components are time-saving assets that you can reuse multiple times throughout your design.
How to create a component?
Select the elements you want to include within your component.
Right-click the desired layers and select “Create component”.
Rename it (remember to name everything in your project!).
Locate it within the “Assets" tab and drag it in to use an instance.
5. Know when to mark layers for export:
When syncing to Anima, make sure to enable “mark for export” for any element that you wish to convert into an Image. And if you want to receive the live code for all the assets, make sure it is not marked for export!
See the full article here.
6. Taking it to the Next Level with Anima:
So, you have followed all these steps and now you would like to turn your design into a fully functional interactive Prototype? Excellent! This is where Anima comes in.
Anima helps you:
Create fully responsive prototypes.
Translate Design to Code: Build faster with developer-friendly code in HTML, React and Vue.
Establish a more seamless collaboration process between designers & developers.
Sounds interesting? Go ahead and take a look at this article to start learning how to sync your Figma Design with Anima!
💡 Tip: When exporting to Anima, make sure to enable “mark for export” for any element that you wish to convert into an Image. And if you want to receive the live code for all the assets, make sure it is not marked for export!
That’s it! You are now ready to take your designs to the next level while significantly improving the workflow of your team!