{"id":67020,"date":"2023-02-02T14:05:07","date_gmt":"2023-02-02T19:05:07","guid":{"rendered":"https:\/\/world.edu\/?p=67020"},"modified":"2023-02-03T12:41:29","modified_gmt":"2023-02-03T17:41:29","slug":"9-best-figma-practices-to-accelerate-productivity","status":"publish","type":"post","link":"https:\/\/world.edu\/9-best-figma-practices-to-accelerate-productivity\/","title":{"rendered":"9 Best Figma practices to accelerate productivity"},"content":{"rendered":"

\"\"<\/span><\/p>\n

Are you a UI\/UX Designer looking to improve the workflow of your designs? Then, don’t worry; we will show you the most effective and best Figma Practices in this post. When you follow these practices in your projects it will surely help you increase your productivity and build your apps faster.<\/span><\/p>\n

As a designer, maintaining consistency in your design for a particular project becomes very important. For eg: When you use a Spotify App on your iPhone, iPad, or your macOS you will never find any difference in the UI of the screens. Not only Spotify but you will always find this consistency in design in every reputed web app.<\/span><\/p>\n

This is where Figma Practices are useful to do smart work and save a lot of time. Now there, are lots of other advantages you will find when you’re using Figma. For instance, you can use ready-to-use<\/span> Figma UI Kits<\/span><\/a> to speed up your workflow as it comes with organized components and UI elements.<\/span><\/p>\n

Now, without wasting any time, let’s directly jump on to the best practices you should consider while using Figma.\u00a0<\/span><\/p>\n

Now talking about the design practice, imagine if Spotify decides to change the design of its play button. Will the Designer work on each screen and each layout to change the design? Hell no!<\/p>\n

This is where Figma Practices are useful to do smart work and save a lot of your time. Now, there are lots of other advantages you will find when using these best figma practices.<\/span><\/p>\n

So without wasting any time, let’s directly jump on to the best practices you should consider while using Figma!<\/span><\/p>\n

Best Figma Practices<\/b><\/h2>\n

We have selected those practices which can be used in often coming tasks in your design project. Therefore, let’s get started!<\/span><\/p>\n

Using an Auto Layout<\/b><\/h3>\n

\"\"<\/p>\n

Auto Layout is one of the best Figma Practices that is found very useful to Figma Designers. It is a property that lets you create designs that change size based on the content you add or remove. Now, this practice is very useful when you need to add or remove your content after you design the element.<\/span><\/p>\n

Therefore, no need to resize your design element or padding with the auto layout you can easily add new layers, accommodate longer text strings or maintain alignment as your designs evolve.<\/span><\/p>\n

Now, you can add auto layout to a frame or a selection of objects such as frames with existing content, Components, component sets, Groups, or other selections of layers and\/or objects.<\/span><\/p>\n

Furthermore, to use auto layout to a selected frame you can use the Shortcut <\/span>‘Shift +A’ <\/b>or right-clicking on a frame or object and select <\/span>\u2018Add Auto layout\u2019<\/b>.<\/span><\/p>\n

Using Layer Outlines Figma Practice<\/b><\/h3>\n

\"\"<\/p>\n

Outline layers are very useful when it comes to holding strokes or finding edges for filled shapes. This practice allows defining the border or contour of an object or shape and helps you to separate it from its fill colors.<\/span><\/p>\n

In addition, you can customize these outline layers in terms of color, weight, and style, providing a visual frame and helping to distinguish objects within a design composition.<\/span><\/p>\n

To use this practice figma then from the toolbar click the <\/span>Zoom\/View<\/b> option then click <\/span>Outlines<\/b> > <\/span>Show Out outlines<\/b>. After that, select if you\u2019d like to <\/span>Include hidden layers<\/b> and <\/span>Include object bounds<\/b>.<\/span><\/p>\n

Furthermore, If you’re used to using Keyboard Shortcuts then you can also try this \u2318 Command \/ ControlY or \u21e7 ShiftO then, \u2318 Command \/ Control\/ to search <\/span>outline<\/b> in the quick actions menu.<\/span><\/p>\n

The practice of Organizing.<\/b><\/h3>\n

\"\"<\/p>\n

If you’re designing an application or a website it included lots of components and design elements. Now, you know the design well but when it comes to explaining your design to your team members and client it can be confusing.<\/span><\/p>\n

Therefore, defining and documenting the components of your design makes it easier for your team as well as, for you to understand the design. In addition, it will also make it easier to find components in the Asset panel.<\/span><\/p>\n

You can name your components in a particular way as well naming multiple layers with a group. Now, in the above example of a<\/span> Dashboard UI Kit<\/span><\/a> you can see how perfectly they have organized the components. In addition, it has a consistent naming convention, that allows you to search and import easily.<\/span><\/p>\n

Use Constraints to do Effortless Resizing<\/b><\/h3>\n

\"\"<\/p>\n

Now, constraints are mostly used when you want to control how your designs will look on multiple screens. This Figma practice helps to tell figma how a particular layer should respond when the size of the frame is changed.<\/span><\/p>\n

In addition, Constraints can be applied to any layer that is within the frame. Therefore, you can not apply constraints to a layer that is outside the frame. Now, using this constraint is very easy. When you create a frame and place an element inside the frame you can see a constraint box on the left side of the panel.<\/span><\/p>\n

For reference, you can check the above example of a<\/span> Figma UI Kit<\/span><\/a> where the constraints are used in a blog card.<\/span><\/p>\n

This box is sectioned with horizontal and vertical lines by which you define how a layer should behave as you resize it. Now, horizontal deals with the x-axis whereas vertical deals with the Y-axis.<\/span><\/p>\n

Furthermore, to use constraint you can check this official tutorial video from Figma.<\/span>
\n