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!
New to Anima? Create an account for free!
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:
Note: Figma AI auto naming is coming soon and should make naming much easier.
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.
Use 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.
Note: Too many groups or extra frames, 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."
Breakpoints
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! |
Note: Figma offers an easy way to convert a fixed "absolute position" design into Auto layout, using something called "Suggest Autolayout" as part of their UI3 changes. We recommend not to try this on large designs, but instead start with components and small groups of layers. Once all the smaller pieces are working properly, go up the layers and convert them into AutoLayout.
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.
Note: if you are using a design system library, particularly if you are planning to use Frontier, Anima's VSCode extension, we recommend that your design system components should have similar names and properties/variants as the code version of the design system. The closer the two are, the better the resulting code will become.
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!
Get involved in our Anima Community Forum!
New to Anima?