Call Now+977-1-5553396

Our LocationTaphalho Rd, Kumaripati, Lalitpur, Nepal

Posted on: August 19, 2021

Figma for Prototype

Figma is a digital project design and prototype application that runs on the cloud. It’s designed to allow users to collaborate on projects and work from almost anywhere. It’s a user interface and user experience design program that lets you make websites, apps, and smaller user interface components that can be integrated into other projects.

Here’s how Figma describes itself:

“Figma helps teams create, test, and ship better designs from start to finish. Packed with design features you already love plus unique inventions like the Arc tool and Vector Networks, Figma helps you keep the ideas flowing. No need to stop to install, save, or export. It’s what any good cloud software should be.”

It similar to Adobe XD where we can design UX and UI of our websites and application easily. In Figma we can integrated plugins like, Figma to HTML, UI faces, Html Generator and many more. We can create component as our project required as well as we can use that components in different projects so it save our time while designing prototype. Since it is cloud-based tool, we can share our design in community and friends. We can create own template for design or we can use template provided by Figma. We can create team so other member can also involve in your project.

Some features of Figma are mention below:

  • Prototyping:

In Figma, prototyping is done by connecting Frames and items within Frames. When the prototype is shown, the user can navigate the app by clicking on connected items.

  • Built in commenting:

Anyone with the link can leave comments on any part of the design, similar to how InVision commenting works. You may tag people in comments, mark them as resolved, and even connect your account to Slack.

  • Developer Handoff:

In your project specification documents or project plans, include links to Figma design files. To explain or attract attention to design decisions, create “sticky note” components and place them on the canvas. Export Settings to frames, components, and assets that your developers might need to export for the final production build.

As we can see in above figure, code of selected part is shown in right sides of figure.

  • Multiplayer collaboration:

Members with authorization levels equal to or less than their own can invite others. Teams are collaborative workplaces where you may create resources and work on files and projects with others. To get the most out of Figma’s collaborative design process, invite your coworkers and collaborators to join your team.

  • Components:

Components are elements that can be reused in multiple designs. They aid in the creation and management of uniform designs across multiple projects. Components can be made from any layers or objects you’ve created. These could include a variety of items such as buttons, icons, layouts, and more.

  • Constraints:

Constraints are only applicable to items that are contained within Frames. Constraints instruct Figma how objects should react when their Frames are resized. This allows you to have more control over how your designs appear on different screen sizes and devices.  You can find them here, in the right-hand properties panel when you select a frame: Constraints are amazing, but they take a little getting used to. In Figma, we let you fix objects to the left, right, top, bottom, center, scale, left & right, or top & bottom.

Comparison between Figma and Adobe XD are:

FeaturesFigmaAdobe XD
OS/PlatformBrowser based (with Mac and Windows)Mac/Windows 10
PrototypingWith a framer integration you can do that.Having vector drawing ability, enables prototyping with XD (by creating click through prototypes i.e. interactive prototypes)
Live collaborationYes (mac,windows, linux)You can comment on prototypes with creative cloud.
Offline SupportNoYes
VersioningVersion saving and autosave exist here too but with an added advantage of ability to restore versions instantaneously.  Not yet, but coming soon.
Responsive DesignThe constraints functionality in combination with layout grids works great for responsive design (groups, art boards).Not yet, but coming soon.
File format SupportedExport : PNG, JPG and SVG Import : FIG, SKETCH, SVG, PNG, JPEG, GIF, TIFF, WEBPExport : PNG, SVG and PDF Import : JPG, GIF, PNG, TIFF, and SVG
HandoffNot required as such, as everything is accessible to everyone, all the time.Not yet, but coming soon.

Suraj Shrestha-BICT Sept 2017 Intake