This helps tackle design in a more efficient and intuitive manner, as well as simplify the handoff process to developers. These Instances are essentially just copies and are all linked to the Main Component, meaning any changes made to the Main Component will be automatically applied to all the Instances as well. After creating a Main Component with specified properties such as color and size, you can create as many Instances of it as needed. Components are composed of two parts: a Main Component and its Instances. Inspired by the popular use of components in engineering contexts like app, web, and game development, Figma created Components to allow designers to reuse existing designs instead of spending extra time on repetitive and tedious work.
You can either enter a numerical value to set equal padding on all four sides of the element or click open the last button to manually set unique values for each side. The button directly next to the arrows is used to specify spacing between items in the Auto Layout frame, and the rightmost two buttons allow you to specify padding sizes. Clicking the arrows will specify the direction that the element will resize along the down arrow will resize along the y-axis, which is useful for things like lists or social media feeds, and the right arrow will resize along the x-axis, which is useful for things like rows of buttons and or icons. After adding this, you will see some options pop up under Auto Layout (see Figure 1). To use auto layout, you can either click the ‘+’ sign next to Auto Layout in the right sidebar or use the keyboard shortcut ‘shift’ + ‘A’. Additionally, you can ensure that the elements you create can work across various device sizes. This can be useful in many cases where you need to create responsive designs, such as navigation bars, card items, buttons, and list views. Auto LayoutĪuto layout can be added to frames and components to create dynamic elements that resize and reflow along with their contents.
In the following section, I discuss a few of these features. Designįigma has several functionalities that aim to make design easier without compromising its capabilities. This post serves as an introduction to these features to help you make the most out of all the resources Figma has to offer. After testing out Figma with my own work, I’ve compiled a list of features that I found particularly useful in facilitating my design workflow. To make design accessible to everyone, it has a number of unique features for designing, prototyping, and collaborating. Figma is a web-based tool that streamlines the product design process from start to finish.
0 kommentar(er)
