most at times people fail to recognize various tools present in figma that would enable them create better designs and interfaces be it a landing page, fliers , cards these tools are very important in helping to;
•ease the design process
•create better designs
and make you an overall effective designer
the following tools and functions help designers in creating better designs and quickly as well;auto layout, components, and variants.
auto layout
Auto layout dynamically calculates the size and position of all the views in your view hierarchy, based on constraints placed on those views. For example, you can constrain a button so that it is horizontally centered with an Image view and so that the button’s top edge always remains 8 points below the image’s bottom. If the image view’s size or position changes, the button’s position automatically adjusts to match.
This constraint-based approach to design allows you to build user interfaces that dynamically respond to both internal and external changes.
importance of auto layout
the importance of auto layout cannot be over emphasized as it helps the designer to design with ease without constantly making adjustments with every change in element it also gives alignment and padding to the layer it is applied to, thereby making the interface look neat and clutter free.it also allows you to consistently space layers be it vertically or horizontally .
on figma the keyboard shortcut to applying auto layout to an element is by selecting the element and clicking on SHIFT +A
components
Components are elements you can reuse across your designs. They help to create and manage consistent designs across projects. You can create components from any layers or objects you’ve designed. These could be a whole range of things like buttons, icons, layouts, and more.
Importance of components
components as stated above can be used when you need to reuse particular elements accross your design.
but they’re also applicable when you need to design various states for either buttons, icons, text fields etc
these states include; enabled, disabled, hover etc
when components are applied you an easily switch between these stars without necessarily redesigning them for each interface which aids in saving of time used in designing. adding the concept of components to a design tool makes the composition of complex designs more consistent and more efficient.
the shortcut to creating a component is
MACBOOK - COMMAND+OPTION +, K
WINDOWS-CONTROL +ALT + K
variant
Variants are component combinations that we can group as a single component set. A set contains components with different properties and we can configure the values of an instance.
Variants work slightly differently from components as they have a different naming system to organize everything. It's very important to keep in mind that only use variants when necessary if not stick to components.
It’s best to use variants when dealing with multiple versions of similar components that share the same properties, such as state, size, color, etc. Also, when having two distinct variations like a toggle on/off
PROPERTIES AND VALUES
Usually, components have a slash (/) naming system, while variants have the same but also have Properties and Values that define your variants' attributes. You can add as many properties and values as you need to and customize, giving you the option to code components.
Properties: State
Values: Active, Hover and Disabled
PROTOTYPING
Figma’s prototyping features allow you to create interactive flows that explore how a user may interact with your designs. Prototypes are a fantastic way to: Preview interactions and user flows. Share and iterate on ideas.
The Prototype tab allows you to view, edit, or create interactions and animations. There are a few ways editors can access prototype settings: Select Prototype tab in the right sidebar to enter prototype mode. Use the shortcut ⇧ Shift E to open the Prototype tab and view any connections.
or simply move to the inspection layer on the right hand side and select prototype.
PURPOSE OF PROTOTYPE
A prototype is an early sample, model, or release of a product built to test a concept or process. It is a term used in a variety of contexts, including semantics, design, electronics, and software programming. A prototype is generally used to evaluate a new design to enhance precision by system analysts and users.
