In the last few months, I’ve been helping to develop and integrate a highly customized WordPressinstance 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 for our child theme stylesheet in 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 provides powerful design tools with multiplayer collaboration, allowing teams to explore ideas while capturing quality feedback in real-time.
![What's Figma? [2019]](https://i.ytimg.com/vi/Cx2dkpBxst8/hqdefault.jpg "Figma: Design, Prototype, and Collaborate Across Enterprise 17")
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 outdated 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 to 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.
- 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 (SSO), 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 also provides developers with 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, Jira, Dropbox, ProtoPie, and Principle for Mac. They also have a robust API.
Related Martech Zone Content
