Figma 101 – A Tool Overview
Figma is a design platform that features great tools for UX/UI design, prototyping, collaboration, and specifications. This case study is an overview of how to get started with Figma and the stand-out features.
Topics
Getting Started
Join our organization by going to Figma.com and creating an account using your @kp.org email. You will have “viewer” access by default. You can request “editor” access by contacting an Admin. For more information about getting started, download the Getting Started with Figma PPT.
Design Tools
Art Boards & Pages
Art boards are created for each individual screen mockup. These can be duplicated for quick workflow and moved around for easy categorization and flow mapping. Art boards are created inside of Pages. Multiple pages can be created for organizing your project.
Components
Similar to Sketch, Figma allows users to draw shapes, add text, and do basic layout functionalities. Once a design element is laid out it can be turned into a Master Component for use across several screens. Any stylistic changes made to the Master Component will cascade through all attached Component Instances. Component Instances can be updated with unique content while maintaining the master style. This streamlines the workflow and allows design teams to re-use pre-built Design System Components. Learn more about Components.
Constraints
One great additional feature is the ability to add Constraints to design elements for easy re-sizing to different screen sizes and layouts. Constraints can be applied to maintain an object’s position relative to the position of the Frame, or to scale the object as a percentage of the Frame’s dimensions. Learn more about Constraints.
Auto Layout
Another useful feature is Auto Layout, which helps Components and other design elements scale properly when the content is changed. Auto-layout helps the designer easily mockup several dynamic variations of how the screen might render when input with a variety of content. Learn more about Auto Layout.
Design Systems
Patterns and Libraries
Figma users can set up Design Systems to share common patterns, colors, and assets across several projects. Components, styles, and assets can be updated at any time and pushed across the organization. There are controls for who can view and contribute to the libraries. Learn more about Design Systems.
UI Kits
The Figma community is rich with free UI Kits and Templates that help UX/UI Designers get started with their projects. These templates created by Figma include Flowcharts, Wireframes, Mobile UI, and more. Learn more about Templates.
Vast amounts of community created UI kits can be found to provide inspiration or a foundation for getting started with your design. UI Kits for several types of design patterns are available including landing pages, table components, app templates, UX flow templates, and more. Figma Finder is one place to find UI Kits.
Prototyping
Built In Functionality
The built in prototyping system allows designers to build, test, and iterate on their designs very quickly. Connect UI elements and define interactions to turn static designs into dynamic and clickable prototypes. Learn more about Prototyping.
Mirror
Experiencing designs on devices is essential to creating an optimal experience. Figma Mirror makes it easy for designers, developers, and other stakeholders to quickly review the designs on their own device hardware. Simply log in to the Figma Mirror app then select a screen in the Figma project to see it display on the phone. Learn more about Figma Mirror or download it for Android on Google Play and for iOS on the App Store.
Handoff
Comments
There are several tools to help Figma users share their designs with stakeholders and developers. Comments, Observation Mode, and collaboration are all useful ways to speed up the design workflow. Comments can be left by any Figma user directly onto the Figma art boards for quick, clear communication. Learn more about Comments.
Observation Mode
Share links can be created to send to stakeholders to allow them to observe your screen for real-time presentations in high-definition. Designers can avoid the lossy video compression and color distortion that is inherent to many screen sharing platforms by allowing stakeholders to link directly to the source file and watch their mouse move around the screen in Observation Mode. This allows the viewer to track each movement including zooming and switching between pages. Learn more about Observation Mode.
Collaboration
Design Teams can easily collaborate across several projects. The latest updates and files for the team are available on the Project Page dashboard. Several designers can work on a design file simultaneously and edit together in real-time. Each designer’s mouse can be seen on the screen to help teams remotely work together. Learn more about Collaboration.
Specifications
Figma has built-in specification functionality and provides basic code to help developers start creating your design. A developer using Figma can hover over any design element on the screen to see visual guides for spacing, sizing, and relations to surrounding elements. Clicking on the element reveals hex codes, font families, and more. Learn more about Specifications.
While the built-in specifications system in Figma is very robust, some users may prefer to use other well known tools such as Zeplin. Fortunately, Figma has easy to use Zeplin integration.
With so many robust features, it is clear why many design teams are using Figma as an essential tool in their process. The MCoE Design Team uses Figma as part of our workflow and encourages other design teams to explore it as well.
Want to learn more? Check out these case studies below:
 |
Hamburger Menu v. Tab Bar Determine which navigation style – hamburger or tab bar menu- provides the most intuitive and positive user experience as well which one was preferred by users. |
 |
Search Tool Best practices in implementing search functionality. |
 |
Sign Out Button Inconsistencies of sign out button locations and design. Provides recommendations for a button standard. |
 |
Zeplin tool MCoE Design team has been using Zeplin for specs and comps. Learn about the Zeplin tool. |