In 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 tricky part is that I’m working with 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. Adding all the other iterations makes my days quite frustrating, as progress is extremely slow.
One piece of the puzzle is that the design agency handed over the prototypes without providing a master stylesheet. We are working to accomplish this 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 complicated process. Not to mention trying to simplify the complexities for speed and scalability
Figma
Figma offers powerful design tools with multiplayer collaboration, enabling teams to explore ideas and capture quality feedback in real-time.
Figma centralizes much of this work with a platform that enables design, feedback, and collaboration throughout 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 anchoring objects to a parent frame, snapping objects to a grid, or creating components that scale automatically.
- Device Frames: Present your designs in the right environments. You can even choose between portrait and landscape mode.
- Interactions: Bring your prototypes to life by defining interactions on click, hover, press, and more.
- 1
- 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, 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 their organization. Single Sign-On (SSO), access controls, and activity logs are included.
Get Started with Figma
Figma maintains a great selection of tutorials on its 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 integrate your existing workflows with various tools, including Zeplin, Jira, Dropbox, ProtoPie, and Principle for Mac. They also have a robust API.
Related Martech Zone Content
