When approaching a web design task Sketch has been my tool of choice for some time, I find it a lot more efficient than Photoshop and using Sketch has sped up the way I work when tackling designing a website.
Designing in Figma is very similar to sketch, however there are a couple of features that I preferred in Figma that I have listed below. Place image: This allows you to place an image within a shape but when resizing it will act as a mask. Vector tool: I come from an illustrator background Adobe Illustrator is my jam so using the vector tool in Figma has been a dream! The ability to connect more than two strokes to a node has made it easy peasy to draw complex shapes and symbols.
Smart grid: This is cool for when I hide my layout grid I can still see a dashed line to help me butt my edges. I found it less intrusive than alternatives like smart guides in Adobe. These are just a few design features I like about Figma, but the options available for prototyping in Figma are what convinced me to switch from Sketch.
Here are a few of my favourite features that I found most useful when prototyping. This saves time creating loads of screens when I can just apply smaller frames to my designs.
Triggers: The option to click or hover! Again this is so useful when taking my prototypes to the next level. Transitions: Figma has a range of transitions you can apply, the interesting part for me is you have the ability to control the duration speed of your transitions.
Duplicate Files: A simple feature but when prototyping I regularly try out a couple of options for the user journey. The wide range of possibilities for prototyping make it a lot easier for me to show my functioning design ideas in Figma than previous prototyping tools such as Marvel App.
Thanks for reading :. Sign in. Holly Sunderland Follow. UX Collective Curated stories on user experience, visual, and product design. UX Collective Follow. We believe designers are thinkers as much as they are makers. See responses 3. More From Medium. More from UX Collective. Taras Bakusevych in UX Collective.Instances are a copy of a component see ComponentNode. They will always be automatically updated if a component is modified.
Try to avoid access patterns that involve alternating component writeinstance readcomponent writeinstance readDuplicates the instance node.
The new instance will have the same master component. By default, the duplicate will be parented under figma. The component that this instance reflects. This could be a remote, read-only component.
This can be set to turn this instance into a different component. On nested instances instances inside other instancessetting this value clears all overrides and performs nested instance swapping.
The scale factor applied to the instance. An internal identifier for a node. Plugins typically don't need to use this since you can usually just access a node directly. Returns the parent of this node, if any. This property is not meant to be directly edited.
To reparent, see appendChild. Returns true if this node has been removed since it was first accessed. If your plugin stays open for a while and stores references to nodes, you should write your code defensively and check that the nodes haven't been removed by the user. The name of the layer that appears in the layers panel.
This may update automatically for text layers. Returns the name of the current file on figma.
Subscribe to RSS
Returns a string representation of the node. For debugging purposes only, do not rely on the exact output of this string in production code. Removes this node and all of its children from the document. Retrieves custom information that was stored on this node using setPluginData.
Lets you store custom information on any node, private to your plugin. Retrieves custom information that was stored on this node using setSharedPluginData. Lets you store custom information on any node, public to all plugins. Sets state on the node to show a button and description in the properties panel when the node is selected.
Whether the node is visible or not. Does not affect a plugin's ability to access the node. Whether the node is locked or not, preventing certain user interactions on the canvas such as selecting and dragging. Does not affect a plugin's ability to write to those properties. The list of children, sorted back-to-front. That is, the first child in the array is the bottommost layer on the screen, and the last child in the array is the topmost layer.
It only takes a minute to sign up. I tried to draw rectangle and switch it to different types e. Symbol, net, info, etc. Changing the layer of a line may or may not change its color, but has no other effect on its style or width. You need to use the "change style" command. If you want the wire in a different color, you need to put it in a different layer. Before drawing the wire, click the "Change object properties" wrench, then "Layer Wires you draw will then be gray.
Right-click the wire, select Properties, and then you can change it to "shortdash", for instance. The result will be a gray dashed line like your link shows. You'll probably want to change the wire layer back to Nets when you're done. Sign up to join this community. The best answers are voted up and rise to the top.
Home Questions Tags Users Unanswered. Asked 6 years, 4 months ago. Active 2 years, 9 months ago. Viewed 4k times. Dave Tweed k 11 11 gold badges silver badges bronze badges. Shawn Le Shawn Le 3 3 gold badges 8 8 silver badges 16 16 bronze badges. Active Oldest Votes. Also, when you're laying down wires, there's a "Style" dropdown available on the toolbar.
Dave Tweed Dave Tweed k 11 11 gold badges silver badges bronze badges. Ken Shirriff Ken Shirriff 1, 10 10 silver badges 19 19 bronze badges. Sign up or log in Sign up using Google.
Sign up using Facebook. Sign up using Email and Password. Post as a guest Name. Email Required, but never shown. The Overflow Blog. The Overflow How many jobs can be done at home? Featured on Meta. Community and Moderator guidelines for escalating issues via new response….
Feedback on Q2 Community Roadmap. Related In a previous postwe discovered the functionality of Smart Selections in Figma. These allow for implicit grouping and are a quick way of dealing with multiple objects. When working with many layers and objects however, we need a more formal way of bundling these.
Usually, you would use a group for this, but Figma throws another option in the mix: Frames. Groups are defined by their contents. The boundaries of your group are the outside edges of whatever is inside it. So, whenever you change the position or dimensions of an object, the bounds of the group will modify accordingly. The group object itself has a relation to the parent element in your document. By default the constraints of the group will be set to Left and Top, as you can see by the dashed lines here:.
If you set the constraints to Scale, your group will scale along with its parent element, which could also be the artboard. Resizing a group will always resize the contents. If you need to keep the same aspect ratio, you can hold Shift while resizing. If you want or need to use constraints on the objects within your group, you need to use Frames instead. We will come back to this later. When you setup a frame, its initial dimensions are based on its contents.
Your frame is like a window a viewport, or an artboard if you wish where you look through and see the objects behind it. As you can see in the animation, objects can be partially out of the frame. Depending on the Clip Content setting, the outside parts will be visible or not. Alternatively, you can reposition content and reset the frame bounds with the Resize to Fit button.
Designing a Pitch Deck in Figma
Note that you have to hover or reselect the frame to see its changed dimensions. Resizing the frame looks like it has no effect on the objects, but if we set an object to different constraints, you will notice it really works as expected. When would you use groups and when to switch to frames?
They are after all very similar, and you can easily toggle between them by using the dropdown in the properties panel. Groups are most suitable for easy combining of items that belong together, like a logo and brand name, to make managing them in the layer list easier. Frames are most suitable for layout of child elements that belong together, but that maintain a specific relation to each other by using constraints. Play around with the Clip Content and custom constraints to fully grasp the possibilities.
Notes :. I hope this sheds some light on the differences and similarities between Figma Groups and Frames. If you have any questions, or requests about design or Figma, feel free to shoot me a message at ovan hackages. You can find more information about Hackages on our learning platform. We also love to contribute to open source and to organise free community events all around Europe! Sign in. Figma Groups or Frames.
Olivier Vanbiervliet Follow. Groups The Basics. Advanced When you setup a frame, its initial dimensions are based on its contents. Creating complex solutions for UI design, like nested menu items that use custom constraints, that behave as a component.Sasha is a product designer at dvhb.
For the last few years he has worked mostly on agritech and logistics b2b solutions. Outside of work he enjoys life with … More about Sasha Belichenko …. Every second Tuesday, we send a newsletter with useful techniques on front-end and UX. In this tutorial, we will talk about how tables can be created in Figma by using components and Atomic Design methodology.
We will also take a look at the basic elements of the table layout and how components can be included in the component library so that they can become part of the design system you are using. To follow along, you will need to have at least some understanding of the basic Figma concepts, its interface, and how to work with Figma components. In terms of Atomic Design, they are atoms.
To learn more, the folks at littleBits wrote a great article on the topic. Quick Note : While writing this article, Figma introduced plugins. Who knows, maybe this article will actually help an aspiring Figma plugin developer to create a really neat Figma Tables plugin, or at least, I hope it will.
Imagine the table as an organism. The table cell is then a molecule which is comprised of individual atoms. The background will be a separate component in Figma. In this component, add a rectangle of the same size as the component itself. It will be the only object inside the component. The fill color of the rectangle will determine the background color of the cell. I recommend choosing that color from the color styles that are configured at the beginning of the project.
This one is a bit trickier than the background. We may need different kinds of borders: one for the separate cells with borders aroundone for the whole row of cells with only top and bottom borders, or one for the table header that we might want to separate from the rest with a wider line.
There are many options. Each line within the cell border might havea different width, color, and style. For example, the left one could be a continuous red line, and the top one a dotted grey line.In a famous interview, Charles Eames answered a short sequence of fundamental questions about the nature of design. Instead of arranging UI elements to make products, I arrange mathematical concepts expressed in code to implement tools and features.
And constraints of time, simplicity, maintenance, and even aesthetics play a similarly dominant role in my process. One recent project highlights these parallels exceptionally well.
Figma keyboard shortcuts
What unfolded was a mathematical odyssey, fraught with false starts, hidden problems, emergent constraints, exploration, tension and resolution. In short, it was a story every designer experiences, at some scale, almost every day. To provide joy to math geeks like me and to illustrate how the design process unfolds when math is the medium, every step is presented below, from square one to shipping.
What is the difference, you ask? Try taking a careful look at the corners of a Macbook, or at an old-school, wired earbud case under a desk lamp.
Desperately seeking squircles
Notice how difficult it is to find an orientation where the corners have harshly contrasting highlights. Of course, at Figma we love iOS designers, and we feel our users should have the platform elements they need right at their fingertips.
In order to give them access to this new shape while designing, we need to find a precise mathematical description so we can start figuring out how to build it into our tool.
Luckily, people have been asking this question for as long as iOS 7 has existed, and we are certainly not the first to walk this part of the journey!
Fundamental initial work by Marc Edwards included a screenshot that indicated the icon shape was a particular generalization of an ellipse, called a superellipse. The following mathematical formula can describe circles, ellipses, and superellipses depending on how a, b, and n are chosen:. In fact, for all choices of n in the equation above, there is a small but systematic discrepancy when compared with the real icon shape.
And we really do owe our users the real thing. Two important details remain, preventing us from cloning the shape directly into Figma and moving on:. The Apple squircle formula is of little help to us here, because its smoothing is done in a fixed way: it gives no indication for how to get nearer to or further from the old rounded rectangle. What we really need is a parametrizable smoothing scheme, where some particular value of the parameter corresponds very closely to the Apple shape.
As an added bonus, if we can parametrize the smoothing process that transforms a rounded square into a squircle, we can likely apply the same process to other places where corner rounding happens in Figma: stars, polygons, and even corners in arbitrary vector networks drawn with the pen tool.
Despite the complication, this is beginning to look like a much more complete and valuable feature than simply adding support for iOS 7 squircles would have been. We are now giving designers an infinite variety of new shapes to use in many situations, and one of them happens to correspond to the squircle icon shape that got us started in the first place.
An analogous task would be for a dancer to take a single still image of a ballerina in mid-flight, then design a leap in such a way that a movie of her executing it reproduces the image exactly at a precise point in time. Which sounds freaking hard. So maybe some calculation will be necessary after all? When discussing superellipses before, we used an equation involving x and y, where all the points x, y in the plane which satisfy the equation implicitly trace out the superellipse.
In mathematical language, we will describe our corner by the path r twhich is structured as. From the path r t we can differentiate to get the velocity v t and acceleration a t :.
Finally, the mathematical curvature, which plays a starring role in our story, can in turn be expressed in terms of the velocity and acceleration:. But what does this formula really mean? Though it may look a bit complicated, curvature has a straightforward geometric construction, originally due to Cauchy:.Figma Tutorial: Masks
This concept too has an analogue in the car picture: at any point t, the signed curvature k t is just the angle through which the steering wheel has been turned at time t, with plus signs used for turns to the right and minus signs for turns to the left.
With curvature introduced, we have a last couple wrinkles to iron out. These two different ways of driving will yield very different path histories even though the exact same route was taken.The rectangle is one of the most commonly used shapes in Figma.
A notable feature it has over other kinds of shapes is the ability to specify independent corner radius values. Duplicates the rectangle node. By default, the duplicate will be parented under figma. An internal identifier for a node. Plugins typically don't need to use this since you can usually just access a node directly. Returns the parent of this node, if any.
This property is not meant to be directly edited. To reparent, see appendChild. Returns true if this node has been removed since it was first accessed. If your plugin stays open for a while and stores references to nodes, you should write your code defensively and check that the nodes haven't been removed by the user.
The name of the layer that appears in the layers panel. This may update automatically for text layers. Returns the name of the current file on figma. Returns a string representation of the node.
For debugging purposes only, do not rely on the exact output of this string in production code. Removes this node and all of its children from the document. Retrieves custom information that was stored on this node using setPluginData. Lets you store custom information on any node, private to your plugin. Retrieves custom information that was stored on this node using setSharedPluginData. Lets you store custom information on any node, public to all plugins.
Sets state on the node to show a button and description in the properties panel when the node is selected. Whether the node is visible or not. Does not affect a plugin's ability to access the node. Whether the node is locked or not, preventing certain user interactions on the canvas such as selecting and dragging. Does not affect a plugin's ability to write to those properties.
Array of effects. See Effect type.