Design, prototype, and gather feedback all in one place with Figma.
Figma is the first interface design tool based in the browser, making it easier for teams to create software.
Stay in one tool for your design, prototyping and communication.
‣ Powerful editing tools
Fast and powerful, Figma has the tools you need to get your work done.
‣ Built for UI
A better way to create digital products.
‣ Team libraries
Create design systems with linked UI components the whole team can use.
‣ Getting work into production
Reduce the friction of turning visual concepts into code.
‣ Built for teams
The flexibility and controls you need to scale Figma for your team.
‣ Streamlined communication
Consolidate feedback, bringing the conversation into your design tool.
Leave thoughtful review and gain regular revenue. Learn more
Creating a high-quality software design with a single program, uniting all the desired functions for design, editing, UX, layout etc., is merely possible. In reality it is a combination of tools, platforms and apps. Figma can be one of worthy components for such combination. The collaborative design tool for prototypes, compatible with Windows, Mac, Linux, Figma is quite simple and contains all the necessary instruments for web designers.
Desktop or online version - both require Internet connection. The upside of having projects in the cloud is that they become accessible on any device (view mode only on mobile devices) and anywhere. Just log into account and share a link. It may be more convenient to work with a desktop version, because some keyboard shortcuts in a browser work differently. Additionally, if connection breaks, all changes will still be saved when it restores.
|Vendor||Figma, Inc. (website)|
|Newest version (for Windows)||Figma v.75.0.0 out September 2019|
|Operating systems||SaaS, Windows|
|Installer file size||52.5 MB|
|Key features||Versions history, Plugins, Collaboration tool|
|Extra features||Styles library, Prototypes, Commenting|
|License||Free / Subscription|
|Pricing||$12.00 Figma Professional (1 Year, 1 User)$45.00 Figma Organization (1 Year, 1 User)|
Interfaceisn’t complex, furthermore, pop-ups and GIF-tips are all around with helpful information. Lots of video tutorials on the website too. Projects are saved as drafts with all the edits, version history function also allows saving different versions of files. Figma supports integrations with Avocode, Zeplin, DribbleandPrinciple. Also, it is possible to generate CSS, iOS and Android codes for each element. Additionally, live embeds of Figma files work on sites and services like Embed.ly.
This amazing feature allows several people to work on a project simultaneously. The program generates a link forproject, which one can share and invite other team members to join. Everyone can add comments, and see what changes were made and by whom.
There are few levels/types of access. Edit access givesan abilityto change files and projects: file name, content, permissions. View only access allows to view and comment, copy a file to personal drafts and/or share it. Only the admin person can determine who gets what level of access - for the sake of control. For example, a client would get the View only access, and that way, the workflow speeds up since there will be faster (or continuous) feedback.
Figma has lots of handy tools that make the job web designers a bit easier. Scale tool can scale multiple elements at once, which is more convenient than selecting each element separately. By switching Move Tool to Scale Tool and dragging the bounding box, content will scale proportionally. This allowsto changethe frame with all the elements for devices of different sizes quickly.
Layers are called Frames - they allow to combine elements together. A tool called Constraintsenlarges and/or reduces objects proportionally. Also, each object can be pinned stationary attopbottom, top left and bottom left, etc. Fixed positions are only for frames, but it is possible to place a lot of frames in one file. For example, if you pin a button in the right-left corner and scale the Frame, a button will remain in its place.
Connected items - Components, are equally important. It works like this: select an item and click on “Create Component” button, its group will appear incomponentslibrary. Then you can makerequirednumber of copies of the element and put them in different places within one frame or few frames. As a result, if one element changes, others will too. But if one of the Instances (copies) are changed, it will not be transferred to others. This scenario can be relevant when there’s an object that should be the same on every page.
Team Library allows to share Styles and Components across files and teams, as well as keep Styles and instances of Components synchronized. Smart Selections tool is for aligning objects with equal distance between them. It works on horizontal or vertical axes at the same time - which is especially suitable for creating galleries and graphic presentations.
To arrange elements quickly, there are auto rulers in Figma. Also, under eachelementits size is visible just by clicking on it. Layout Grid can be configured, and rulers can be customized to divide the Frameproportionally. There are also rulers for all the frames in working space. Fonts in Figma are Google fonts. Files with other fonts receive a “missing font” alert, and then a user can add fonts as well.
Of course, Figma does not provide such variety of design features like, say, Photoshop, yet still contains plenty of useful options. There are different colors blending modes, effects, color models. A nice gradient creation tool with instrument handles allowsto regulateintensity straight on an element.
Figma supports exporting files in PNG, JPG, SVG and PDF. You can export one or few layers simultaneously, or use the Slice tool and select any part of Frame for export. It is also possible to copy and paste properties of elements: effects, strokes, color, layer mode. Colors can be added tolibraryto create color presets. Paint bucket tool provides color fill options.
The process of creating vector shapes in Figma is very well thought out and implemented. Users may easily manipulate the shape of objects, controls are intuitive and simple. With selecting and hovering over a polygon, 2 control handles inside the bounding box appear - to adjust parameters. “Count” is for the number of corners, corner radius is how sharp or rounded you want each point to be. It is possible to make complex figures, selectindividualsurface plane, manipulate it separately (change fill, shape, color).
A significant advantage of Figma over other similar online UX design tools. It enables designers to show an interactive model ofproduct, as in action, and therefore, to look more attractive and understandable to a client. Connections can be established from any object within a Frame - begin with creating of hotspots on the object within a prototype. Forexample:a line or block of text -> a button, image or icon -> navigation menu or tooltip etc.
Trigger determines what initiates the action: click on an object, hovering the cursor over an object, drag the cursor up or down, etc. After Delay function allows to adjust a pop-up window and time after which it will appear if a user is on the page and does not interact with it. There are 3 types of actions: a) Navigate - a transition between Frames, b) Swap - exchange overlays (a new overlay will retain the same overlay settings as the original), c) Overlay - opens a Frame above the current Frame.
Transitions determine how a prototype will move from one Frame another. Overflow Behaviour function is for scrolling objects vertically, horizontally or in both directions simultaneously. For instance, you want to add Google Map and allow visitors to move it.
Presentation Mode has templates and previews of frames for different devices, i.e. iPhone, iPad, Google Pixel, Surface Pro, Google Nexus, Apple Watch, as well as previews for social networks. In this mode, you can arrange previews horizontally or vertically, edit size, background color, set a starting frame for prototypes.
Starter free version provides unlimited file storage, free view, 2 editors, 30 days of version history and 3 projects limit. Of course, to access all features and benefits of Figma, you have to purchase it.
Professional version costs $12 per user for 1 month - if billed annually, and $15 if billed monthly. This version gets youunlimitednumber of projects, editors and version history, private projects and team library features.
Also, developers suggest Organization Beta version which costs $45 per editor for 1 month and is billed annually. It includes such additional features: 24/7 priority support, unlimited team spaces, unlimited team projects, company draft ownership, enforced SSO, remote provisioning, activity logs, advanced system controls, advanced privacy settings.
All features in Figma are free for students and their educators at accredited institutions. They only have to verify their student status.
Sketchis a standard and popular graphical interface editor. It offers rich functionality, lots of integrations and plugins, is highly adjustable. For example, LaunchPad plugin allowsto convertSketch files into static HTML web pages. Or Craft Sync plugin, that lets you send Sketch files into InVision. Figma is behind in this regard.
Although Figma wins in performance and works on MacOS, Windows and Linux OS devices, while Sketch is only for Mac. Also, the library of files in Figma is more conveniently organized and working with styles (color adjustment for strokes, fills, etc.) is more thoughtful than in Sketch.
To store and send files in Sketch, you need to use third-party services such as Dropbox. Figma, on the other hand, is a cloud-based design program - there’s no need to download or send files anywhere, just share a link with access. Plus, Version History in Figma gives the opportunity to see or roll back to previous versions.
Overall, Figma is still a comparatively young tool to compete with Sketch. Unlike Sketch, it is notsuitabledesigning large-scale projects. But it already has a number of advantages, and it is actively improving.
InVision Studio is very similar to Figma by functionality and interface. The main advantage of Invision design tool is the ability to work with animation. Animations there can be run on a timer. Also, you can adjust interaction with the cursor or touch interaction according to personal preference. Similarly, it is possible to configure swipes for mobile apps or the number of clicks the cursor, and so on. In turn, Figma brings another type of benefits to thetabe: collaboration/teamwork in real time, presentation mode (live preview for different devices).
Figma is a convenient and simple online web design tool, with key advantages such as vector objects, team collaboration options, prototyping. The learning curve for Figma is low - users can get aboard and start utilizing it quickly. The best use of Figma design app is for web designers who need a basicgraphiceditor to prepare dynamic product prototypes.