Figma Guide for Beginner Web DesignersFigma is an online graphic editor for collaborative work. You can use it to create a prototype site, an application interface and discuss edits with colleagues in real time. This article reviews tools and features of Figma, popular plugins and tells where you can learn to work with the service for free. To learn about top hacks for beginners in Figma read here: https://www.digitalconnectmag.com/top-hacks-for-beginners-to-figma/
What do you need Figma for?Figma can be used by designers, marketers, managers and developers. In this section we will describe the main scenarios of using the service and its advantages over other graphic editors.
What projects can be created in Figma?In Figma you can draw interface elements, create interactive prototypes, illustrations, vector graphics. Many designers use it to make website layouts for Tilda. If you want to work more flexibly with interface graphics, you can draw a layout in Figma and transfer it to Tilda.
PrototypeA prototype is a model of a site or application. It makes it easier for the customer to evaluate how people will use the product. To create a prototype, the designer draws screens and creates connections between them. In Figma, you can immediately show the customer how the design will look on the screen of a smartphone, tablet, or other device.
InterfaceInterface elements are the look and feel of a product. With Figma, you can create buttons, icons, feedback forms, and customize effects, such as clickable buttons, drop-down lists, and animations for blocks and pop-ups.
Interface of mobile applications Figma iOS UI kit.A prototype of the Tesla Model 3 control panel and its interface elements.
Vector GraphicsFigma has basic tools for working with vector objects, it allows exporting designs into SVG format and importing vector objects from Adobe Illustrator or Sketch editor.
What else can you do in FigmaFigma can be used not only by designers. For non-obvious scenarios to use the service, see the Templates section. Entrepreneurs, SMM people and project managers can manage projects with Gantt Chart in Figma, create ads with templates for Facebook. For developers, Figma has made Developer Handoff mode. You can use guides to determine the distances to objects and their size, copy CSS styles of elements, their code for Android and iOS.
Collaboration in FigmaFigma created a single environment for an entire team to work on a design. This is its main advantage over other graphic editors. Now the developer is always aware of the latest changes to the layout, the manager sees in real time what is happening with the project, and the customer leaves comments on the design directly in Figma.
Three reasons to choose Figma for collaborationCross-platform. You can work in the service from any browser, on any device and on any operating system. No need to download additional applications to coordinate the design. Cloud-based service. Figma is an online editor, so the results are saved in the cloud and can be viewed by all team members. At any time you can see the changes made by a colleague, and restore a backup copy if necessary. Feedback. Participants can leave comments on the layout in Figma and get feedback from their colleagues. Agreements will go faster and the history of correspondence will not get lost in the mail.
Getting Started in FigmaIn this section we'll look at how Figma works: create the first file and work with it.
How to install FigmaYou can work in the service from your browser or download Figma application on your computer. Choose a browser if you often use different devices. To do this, go to figma.com and register. You can download Figma to your desktop for free, it will help you get rid of numerous browser tabs in front of your eyes. Go to figma.com/downloads and select the iOS or Windows version of the program. Additionally, download the free Figma Mirror app (Android/iOS) to evaluate how your design will look on your phone.
Figma interfaceAfter registration, the user has access to two work areas - the graphic editor and the file manager, in which you can create projects and change profile settings. Let's look at the menu items of the file manager.
1. ProfileIn the profile settings you can upload an avatar, change your name, password and email to which you receive notifications. There you can also update your rates and delete your account.
2. SearchSearch for files and projects you're participating in through Search.
3. Recent files.Files are automatically saved in Figma. You can see all the files you've opened in the Recent tab.
4. PluginsThe Plugins item contains extensions that will help speed up your work in Figma. For example, with Unsplash plugin you can find stock illustrations without leaving Figma. And with Iconify a designer will have 40,000 vector icons for all occasions at his fingertips.
Forum Role: Participant
Topics Started: 0
Replies Created: 0