Figma: Design, Prototype, and Collaborate Across Enterprise

Figma

The last few months, I’ve been helping to develop and integrate a highly customized WordPress instance for a client. It’s quite the balance of styling, extending WordPress through custom fields, custom post types, a design framework, a child theme, and custom plugins.

The difficult part is that I’m doing it from simple mockups from a proprietary prototyping platform. While it’s a solid platform for visualization and design, it doesn’t easily translate to HTML5 and CSS3. Add all of the other iterations, and my days get quite frustrating with progress being extremely slow.

One piece of the puzzle is that the design agency simply handed over the prototypes, without providing any type of master stylesheet… so we’re working to accomplish that by exporting the prototypes into Zeplin, and then translating the CSS to WordPress. The number of steps necessary and the gaps between platforms make it a difficult process. Not to mention trying to simplify the complexities for speed and scalability

Figma

Figma centralizes much of this work with a platform that enables design, feedback, and collaboration throughout each member of your team, including:

  • Designers – Collaborate in context and in real time. Never worry about your files being out of date or overwriting each other’s work.
  • Stakeholders – Send a link to collect feedback, get change requests, and allow stakeholders to make copy updates in your designs.
  • Developers – Engineers always have access to the current source-of-truth and can inspect elements, export assets, and copy code.

Figma has some Unique Features:

  • Boolean Operations – With four formulas: union, subtract, intersect, and exclude, you can combine any set of shape layers with precision.
  • Components – Build faster and more consistently with reusable and scalable elements across your files. Access layers in each instance so you can intuitively edit and override text and images inline.
  • Constraints – Scale your design to fit any screen size by fixing objects to a parent frame, snapping object to a grid, or even by creating components that scale.
  • Device Frames – Present your designs in the right environments. You can even choose between portrait and landscape mode.
  • Interactions – Make your prototypes come to life by defining interactions on click, while hovering, while pressing, and more.
  • Overlays – With relative and manually positioning you have full control over where and how overlays appear.
  • Pixel-perfection – 60fps interactive editing brings you ultra crisp, pixel-perfect previews and exports.
  • Prototyping – Quickly build flows by connecting screens and adding in elements like interactions, transitions, overlays, and more. Instead of syncing to other tools simply share a URL to receive feedback.
  • Responsive Design – Stretch your layouts and see how they will respond to changes in screen size.

Responsive Prototyping

  • Scrolling – Enable horizontal, vertical, or any direction scrolling within individual shapes or the entire parent frame.
  • Styles – Synchronize colors, text, grids and effects across all your projects. Maintain fewer text styles and align your designs across different devices with Figma’s unique grid styles.
  • Team Libraries – Share components and styles in Figma—no need for shared drives or additional tools. You and your team control how and when changes are rolled out with simple publishing workflows.
  • Vector Networks – Figma created the pen tool to be more intuitive, allowing for direct manipulation while preserving backwards-compatibility with paths.

For enterprise clients, Figma can drive consistency, efficiency, and security at scale. The platform enables enterprise clients to easily manage design systems with team libraries and the ability to upload and share custom fonts across your organization. Single Sign-On, access controls, and activity logs are included.

Get Started with Figma

Figma has a great selection of tutorials that they maintain on their YouTube channel, here’s a Getting Started video:

Figma gives developers the ability to inspect, copy, export assets, and copy CSS directly from the design file. You can also enable your existing workflows with integrations, including Zeplin, Avocode, Jira, Dropbox, ProtoPie, and Principle for Mac. They also have a robust API.

Try Figma for Free

This site uses Akismet to reduce spam. Learn how your comment data is processed.