

Discover the exciting world of software development and design.
Team Library is the MVP out of all the available features in Figma. This allows you to design effective, scalable design systems by reusing shared components across files, helping you to collaborate with ease! Since the tool is web-based, everything is synchronized and nothing is left out.
To follow this tutorial, you can download the source file, which will help you compare your progress.
These are sets of properties applied to style particular elements or objects. Styles describe attributes for Color, Text, Stroke, Background Color, Effects, and Layout Grids.
Components allow for a faster and smoother workflow. With this, you can create a master component and create multiple instances of it throughout the design. This is helpful when it comes to elements such as the menu, the footer, buttons as they help you to be consistent across the project.
Components and Styles can be shared to your team via Team Library. Team Library allows you to access the saved styles across all the team files and projects. This improves efficiency and maintains consistency.
Let’s learn how create and publish components and styles to a library. We’ll also take a look at some tips and tricks!
Figma’s Team Library allows big teams to collaborate and maintain design systems efficiently and remove all the nuances involved with working as a remote team.
The Confetti plugin allows you to generate confetti patterns in your design file. In this tutorial, we’ll first learn how to install it and then use it to generate confetti patterns.
To follow this tutorial, you can download the source file, which will help you compare your progress.
The first step is to install the plugin through the plugin tabs in the dashboard.
Once the plugin is installed, it’s time to use it!
In the above step, we only used one shape i.e. the polygon to generate a pattern. You can use multiple shapes to generate a number of patterns. Let’s go ahead and do that as well!
In this tutorial, we went over how to create confetti using the Confetti plugin, this can be a nice addition to the success state in your design.
Looper is a Figma plugin that generates graphics that you can use in your design project. In this tutorial, we’ll learn how to install the plugin and then, use it to create shapes.
To follow this tutorial, you can download the source file, which will help you compare your progress.
Looper is very useful, particularly so when it comes to backgrounds. You can generate really funky and awesome background patterns for your UI. Be it a shape or a text element, Looper works seamlessly with any layer in your design project.
Looper is a Figma plugin for creating trippy generated graphics that works with any Vector, Shape or Text layer.
It’s time to use the Looper plugin now!
Mentioned below are some really cool designs that utilize the looper plugin.
Plugins in Figma are very helpful in improving your workflow. Looper is another amazing plugin that lets you create beautiful patterns that can be used to make your design look even more pleasing to the eyes of the users.
In this tutorial we’ll go through the process of creating Apple Watch rings. This involves creating progress rings. We’ll be mainly using the Arc tool for this purpose.
To follow this tutorial, you can download the source file, which will help you compare your progress.
We can create a number of shapes using the ellipse tool such as pie charts, donut shapes, rings and much more. This is achieved via the Arc tool. It takes in three value – start, sweep and ratio.
Not that we’ve a clearer idea of how the arc tool works. Let’s see how we can use it!
It’s time to apply what we’ve learnt in the above steps to create the Apple Watch Rings!
In this tutorial, we went over how to use the Arc tool to create rings. This is a very simple technique that comes in handy when trying to create progress rings for Dashboards, icons and much more.
Getting production code from your design elements has always been a huge challenge for designers and developers. Figma makes it easy as everything is available right inside the tool, rather than having to create a bunch of accounts and switching back and forth between tools.
To follow this tutorial, you can download the source file, which will help you compare your progress.
You can share your design files with clients, co-workers, or with anyone using the public link or inviting them to your project. You have the control, which means you can invite them either with a view or edit permission. This helps a lot in getting feedback and collaborating with other designers!
People with an account who receive your invitation or link can view and inspect properties, sizes, and even code or assets. This is very similar to how Zeplin, Abstract, or Sympli work.
At any time, you can create a version of your design so that it’s kept in history. This is recommended whenever you need to save a bulk of changes, similar to how you’d use Git. Also, you can see the history of all the versions you’ve saved previously. Figma makes it very simple to switch back and forth between those versions to see the changes.
You can click on the Export button for each layer of your design to export elements or frames as a PNG, JPG, or SVG (you can also export the asset in multiple formats simultaneously) file. Once you set it up, during Inspect, people can automatically save the file.
In addition to the Export button, you can also create a custom Slice if you need to create a zone where you want to capture an image with everything merged. This is a very similar experience to creating a screenshot on the Mac.
The Inspect tab can be found at the top of the Properties panel, next to Design and Prototype. You can find all the properties written in plain code (Table) or actual languages such as CSS, Swift or Android.
Let’s first focus on learning how to export a selected frame or a selected element via the Export option in the Properties panel.
Note: If you’re adding a custom input, make sure to add one of the following letters to the number – x (multiplier), w (width) and h (height).
PNG (Portable Network Graphics): PNG is a lossless bitmap format that allows for the preservation of images at their original quality. It’s widely used by websites and applications where high-quality graphics are required, such as advertising and screenshots. It was created as an alternative to JPEG and GIF, so it’s frequently used for displaying transparent images.
In the first image, we can see the Frame in white. In the second image, you will notice that the Frame is transparent.
Image 1 (JPG), Image 2 (PNG)
JPG (Joint Photographic Group): JPG is a pixel-based image format. Each JPG has fixed dimensions, but the compression leads to a loss of quality and also a lower file size. For example, if an image is saved as a JPG and then re-opened and edited, filters that affect quality will not be effective. Instead, attempt to use PNG if you want an image with adjustable dimensions, transparent pixels, or any modifications beyond simple cropping.
SVG (Scalable Vector Graphics): SVG is a scalable format, which means that its graphics aren’t tied to any specific resolution. It’s also an XML-based vector graphic, which means you can make any element as large or small as you like without losing clarity.
PDF (Portable Document Format): If you’re looking for a format that’s compatible with any device, then PDFs are a great choice. They allow you to share complex and interactive layouts—and they’re compatible with any software or operating system.
With PDFs, you can render and manipulate individual elements of a design—which makes it a versatile format that’s independent of software, hardware, or operating system. Plus, it’s easy to create using Adobe Acrobat or Illustrator.
Pixel density is the number of pixels per inch (PPI), which is a measurement of the resolution of a display. The higher the pixel density, the more detailed and sharp your screen will be.
iPhones and Macs both use high-resolution displays with high pixel densities, which allows them to display images and text with a high level of detail and clarity. The specific pixel density of an iPhone or Mac will vary depending on the model, but in general, they both offer high-resolution displays that are sharp and clear.
When exporting images from an iPhone or Mac, it’s important to consider the pixel density of the device you’re using. If you’re exporting an image to be used on a device with a lower pixel density, you may need to reduce the resolution of the image to ensure that it displays properly. On the other hand, if you’re exporting an image to be used on a device with a higher pixel density, you may need to increase the resolution to take advantage of the higher pixel density.
Image 1: Low-density screen displayed with density independence. Image 2: High-density screen displayed with density independence.
Figma takes note of any selection or export settings you might have applied via the Export List. With the Export List option, you can export every asset present in that list with a single click. Let’s see how we can access Export List.
You also have the option to directly copy the SVG code and paste it to a file. Simply, right-click the element, select More < Copy/Paste and then, Copy as SVG. Once that’s done, you can paste the SVG code in your favorite code editor.
The best part of Figma is that you can export all of your elements in one go, instead of exporting them one by one.
In the event that you need to manually back up your entire Figma files, you can save a local copy of a file in the .fig (Figma) or .jam (FigJam) formats. This is useful if you want to duplicate files between Figma accounts or teams, or if you want to manually back up your files. Figma doesn’t include any version history or comments when you save a local copy of a file.
Figma eliminates having to jump to different tools since it’s web-based. You’re able to share your designs with anyone with just a link and it’d open right there in the browser, installing the app is not even necessary. Figma makes us work more efficiently, it also enables us to communicate our designs better.
Getting production code from your design elements has always been a huge challenge for designers and developers. Figma makes it easier by allowing users to export the CSS code of any particular element instantly. Below, you’ll find instructions on how to do this easily.
The Code tab in the Properties panel allows you to inspect and export the code. Currently, Figma supports CSS, iOS and Android imports. Some of the properties you can import include color values, typography, sizes, etc. It allows two formatting styles which are Table and Code, you can simply toggle between the two.
As mentioned above, Figma has two formatting styles for all the syntaxes available. These are – table and code. The formatting styles make it very easy to export the code. You can simply toggle between them by clicking the icons.
Figma also allows you to copy the CSS properties of any elements. This can be done by right-clicking an element, selecting Copy/Paste and then, Copy as CSS.
To import CSS code directly from Figma, do the following:
You can export CSS code for the gradients in a similar manner.
Figma is known for its collaboration power. All of your team members can work on the same page, at the same time. And, when you’re working with a developer team member it won’t make any trouble. Your developer friend can copy the design properties and start working with it.
Mocking up designs with Lorem Ipsum might not always work, as we later come to realize, the layout starts breaking. The actual copy might ask for more space than what we had initially. Now that we know things don’t work well, changing our content across our design can be time-consuming, and that’s where Plugins help!
To follow this tutorial, you can download the source file, which will help you compare your progress.
Think of Figma as a modular phone, and plugins as separate modules that help enhance and bring new/specific functionalities. Figma plugins only run in the editor and let you perform tasks within files. There are countless plugins for you to install and work with but here, let’s talk about some of the favorites of many designers.
Unsplash is the best place to find beautiful photography that you can use for both personal and commercial use, and it’s totally free. With this plugin, you can directly search and insert images as fills to the elements you wish to apply these to.
Google Sheets Sync is a simple plugin that lets you pull data from your spreadsheet to the design elements. This is really helpful as it allows you to manage your own data, which eases updating and making changes to the data.
Consider this as an alternative to Google Sheets Sync if you don’t have any real data; this plugin quickly generates data for you like names, phone numbers, US addresses, emails, URLs, and much more.
Let’s see how we can add data to our profile settings.
Using real data in your work will help you have a better idea of how the interface is going to work, make better decisions, account for edge cases or alignment issues that you might not have thought of. Clients often have a hard time visualizing how a prototype will lead to a final product. By using real data, they have a better idea and context, so the feedback that you get is more accurate.
Prototyping is an important process of design. Creating a prototype helps your engineers understand how the interactions and animations should work in the final product. Figma makes it super simple to create prototypes using transitions without downloading a third-party app.
To follow this tutorial, you can download the source file, which will help you compare your progress.
Creating a prototype can help with communicating our ideas without a flaw so that engineers can know exactly what you want. Engineers can understand the complexity of the interactions and foresee difficulties in setting a realistic timeline.
Transitions indicate the shift from one action to another. Having detailed transaction eases the user’s understanding of your app. Without transitions, it would not be easy to communicate what is happening to the user.
Easing or Keyframes define the acceleration of a transition happening between two connected frames. This lets you create very smooth interactions that feel more natural.
Flow prototyping is important as it shows the entire journey that your user experiences. For example, a user logs in on the home page and then, clicks the courses icon which takes him to a list of available courses. What about when the user clicks on the tutorials icon?
It is essential to prototype these experiences so that you can test your app before development starts in order to see the setbacks.
Micro-interactions are small or subtle functional animations that happen when an action is performed. Micro-interactions often create a pleasant feeling. These small details incubate a positive user experience in your app.
Figma’s most amazing feature is Smart Animate. It lets you create delightful and advanced animations/interactions by looking for similar layers and recognizing the differences to animate them. This can help create detailed transitions like parallax scrolling, loading sequences, gestures, and more.
You can preview your prototype at any moment by pressing the Play button at the top right of the Figma UI or view it on your phone by using the Figma Mirror app. The prototype itself can be shared just like a design file. This is extremely useful for creating an entire experience for your app and show it to the world!
To start prototyping your design:
Prototyping with Figma is very simple and easy with features like Smart Animate. We can still achieve a code level prototype using Figma. It all comes to how you execute your idea. You can also check the Prototyping Tools section from the UI Handbook for more information about tools.
When multiple people are working on the same file, sometimes it becomes difficult to keep a track of important changes. This is where the version control feature comes in. With version history, you can keep track of all the changes that’ve been made to a design file by viewing earlier versions of the file.
Any user can access version control, be they on one of the Starter plans or on a Professional or Figma Organization plan. The only difference is the amount of time. On a Starter plan, you can access up to 30 days of version history while on a Professional or Figma Organization plan, you’ve access to unlimited version history.
A version is saved when the file hasn’t been edited for 30 minutes. To view versions, you can do the following:
You can add an existing version to version history while editing by doing the following:
You can head back to editing your current version via two ways:
You can duplicate the version by selecting any version and then, clicking on the ‘. . .’ icon. From the dropdown menu, select Duplicate.
Figma also gives you the option to restore your design file to a previous version by selecting a version, clicking on the ‘. . .’ icon and then, select Restore This Version.
Version History feature makes it super easy to control different versions of your design file. Whatever you design or edit you don’t have to worry about loosing any of it though there’s multiple team-mates designing in the same file. You are always in control of your designs.
With features like real-time collaboration via commenting, Figma has opened a whole new way of collaborating with designers and developers. Since it’s web-based, everything is in sync and you’re able to share your designs with developers or clients with just a link, it has never been this easier.
Imagine you bring in 2-10 designers, solving the same problem with a 10 minutes deadline. What you’ll notice is that after a few minutes, some might be blocked. At that point, they will look at others and duplicate the work to branch out and start from others ideas. That’s a powerful way to solve problems.
Since Figma is web-based you can share your design/prototype with a link or inviting a specific person via email. This can be useful when you want to share your designs with clients or stakeholders to get feedback or to show the progress you’ve been making!
Figma offers you the ability to invite developers. Inviting them with a “Can View” access shows all the essential options that a developer needs such as specs, Android, iOS, and CSS properties, to view prototypes and the options to export necessary assets.
You can share Live Embeds by simply going to the Share button and clicking on Public embed. Before doing that, it’s important to allow public access to your file. If done right, it’s going to give you an iFrame HTML code that can be pasted into your Website or even on platforms such as Slack.
Comments in Figma enable designers to have real-time collaboration right in the design file. Comments can be used to give feedback and respond to said feedback. This makes iteration and editing based on the feedback way more easier.
To enter comment mode in Figma, simply click the ‘Add/Show Comments’ ( C on keyboard ) option in the toolbar. Once you click on the ‘Add/Show Comments’ option, you’ll be able to see the comments, both on the canvas and in the Properties panel.
When a comment has been taken into consideration or when the changes have been made according to the feedback, you can remove a comment by clicking on the comment in the canvas and then on the checkmark on the right. This will delete the comment from both the canvas as well as the Properties panel.
Figma gives its users the ability to directly mention a person by their name. Due to the addition of this, you can filter comments based on whether you’d like to see all the comments or whether you’d prefer the comments that mention you. You can apply the filter in the Properties panel.
Let’s go through all the settings that are available to us.
You can also copy and share the link via the modal.
Figma has taken design collaboration to the next level with these features, making it easy for teams to collaborate and work with designers and engineers worldwide without worrying about having them in-person for feedback or other collaborative processes.
Discover the exciting world of software development and design with our comprehensive courses in React, Swift, and other cutting-edge technologies.
No Posts Found.