![]() A problem with this technique is that the Space property will only appear in the panel if your selected layers are already arranged in a row or column.Ī more predictable and straightforward workflow is possible with the Distribute Layers plugin: Select your layers, run the appropriate plugin command (Distribute Layers provides 4 plugin commands for distributing layers up, down, left, or right), enter your desired Space value, then hit Enter. To be more precise, you can also directly edit the layers’ Space property in the Design panel. If the layers you selected are already evenly spaced out, you can click and drag on the magenta vertical bar between the layers to adjust the space between them. However, this technique will not work if you want to move multiple layers.Ī solution is the Move Layers plugin: Select the layers you want to move, run the plugin, enter an x and/or y pixel offset, then hit Enter. To precisely move a single layer, you can directly edit the x and y properties in Figma’s Design panel. Moving layers is an action that you’ll do extremely often when working in Figma, using either the mouse or the arrow keys on your keyboard. In this article, I’m going to share 9 utility plugins I’ve developed to help me work more effectively in Figma as a product designer at Shopify. Ever lost resolution when bringing a large image into Figma? Or been frustrated at not being able to directly input a spacing value for your layers? Or perhaps you’ve been unable to resize a frame independently of its contents?įortunately, Figma’s comprehensive plugins API allows us to customize Figma and build simple workarounds. Multiplayer editing eases collaboration across our remote teams and, because Figma documents are just URLs, they’re accessible to everyone, not just designers.Īlthough Figma has grown to be an indispensable hub for collaborating on design, it isn’t without limitations. Figma is now Shopify’s default tool for product design and prototyping. This was after months of user research and testing by the Polaris tooling team. Shopify officially shifted from using Sketch, InVision, Abstract, and Zeplin, to Figma at the end of 2019. This occurs when you've applied an auto-layout to the selection.9 utility plugins I developed to work more effectively in Figma Sometimes, you may see the Constraints label change to Constraints and resizing in the property inspector. While it may not seem to make sense based on their use cases, they all have their applications when you get into real-world UI scenarios. I suggest experimenting by selecting a single object and selecting the various horizontal and vertical constraint settings. The element's position will stay the same, based on the horizontal center of the frame.Ĭhange the object's size and position as a percentage of the frame.Īs for the vertical axis, all things remain the same as above, except they're applied vertically. ![]() The element will be effected by both the right and left side of the frame, and the object may grow or shrink on the horizontal axis. The element will stick to either the left or right of the frame without affecting the object's size. Here are the following settings that are made possible through constraints on the horizontal axis: As you can see, a dashed line appears based on the object based on the constraint settings that have been applied.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |