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!
1. Name it:
Naming each and every one of your layers will make your project very 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:
2. Put it on a frame:
Frames are extremely versatile elements within Figma that allow you to use Layout Grids, Auto Layout, Constraints, and prototyping. Use them whenever you need this extended functionality!
3. Make it responsive:
As mentioned above, one of the benefits of using Frames is their ability to support constraints. This, in a nutshell, will help make your designs more responsive!
So, how do you add them?
Select the layer or parent inside of the frame.
Select the vertical and horizontal constraints in the constraints settings located in the Properties Panel.
You can choose to constrain vertically, horizontally or both, depending on your needs.
If you want the layer to stay in the same position, even when scrolling, check the box next to Fix position when scrolling.
Extra Tip: Be sure to test their responsiveness by scaling them vertically and horizontally!
4. Componentize it:
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”.
5. Keep it Clean:
Delete any layers, styles, frames and elements that are unused or hidden. Also, double check that all your text layers are set to “Auto-width” or “Auto-Height” instead of “Fixed”.
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.
A. Preparing for Anima: Mark for export:
When exporting to Anima, make sure to enable “mark for export” for any element that you wish to convert into an Image. This applies to any images you have and also to any design effects that are not currently supported in CSS but you still wish to export as is (see guidelines here).
B. Preparing for Anima: Name your styles :
Name your design styles (e.g: colors and typography) according to how you want them to be named in your CSS code.
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!