Tool Spotlight: Move over Adobe XD, Figma has taken the cake!
Every designer, whether recently graduated or with several years of experience, has heard of Figma and ended up completely surrendering to this tool. And if you haven’t, where the heck have you been?
Our team of designers here at JMR has been exploring Figma for the past year or so, and we have to say, we love it! Let us explain why.
(DISCLAIMER: Sorry to all other Adobe tools. We still love you.)
So, what exactly is Figma?
Figma is nothing less than the free design tool of your dreams. Imagine if Google Docs and Photoshop had an ultra-talented, super-creative love child born to make your design process a thousand times easier and more effective. Are you picturing it? Well, then that’s Figma!
This cloud-based platform allows you to create, design, prototype, develop projects, and generate code for a smooth handoff very intuitively. No more messy files and versions floating around endless email threads! Figma keeps everything in one cozy, cloud-based space, safe to share with your team (and clients) for easier feedback rounds and on-the-spot changes and updates.
Why do JMRers love it so much?
As we mentioned previously, our love for Figma has a lot to do with its real-time collaboration features, intuitive (and user-friendly) interface, and ability to allow designers and creatives to work seamlessly across different formats with a multitude of useful and unique plug-ins.
On top of it, Figma also has free content libraries and responsive design features. It turns the daunting task of graphic design into a whimsical joyride of creativity. Sometimes, it’s so user-friendly that it almost feels like we’re cheating (which we are NOT!).
What does our team use it for?
In a nutshell, our team uses Figma for all things design-related. From wire-framing to high-quality and responsive mockups, prototypes, presentation templates, web design, product design, social media, etc., this tool is our go-to.
However, to be more specific, one of the things we do most is use Figma for web design. Recently, we have had our share of web design projects, and Figma makes everything flow a lot better. Its prototype feature makes you feel like you are visiting a real website, and (like we mentioned three or four times already), the fact that you can share the project directly with the client is a bonus. The cherry on the top of the cake, however, is Dev Mode! A feature that allows designs to be translated into code almost in the blink of an eye.
How does Dev Mode work?
In a nutshell, Dev Mode is basically like a browser inspector for your design file. Figma uses a component-based approach compatible with React’s component structure, easing the conversion of designs into code. What does this mean? Well, in platforms like WordPress (WP), this feature allows for streamlined exportation of UI/UX elements directly into WP themes, utilizing Fgima’s CSS structure for style consistency. Pretty awesome, right?!
Now, when it comes to Webflow, the code generated by Figma can be imported and tweaked within Webflow’s visual editor, enabling real-time adjustments and cool design-development integrations. On top of that, Figma’s ability to export assets and layouts in .html and .css compatible formats helps with content integration and management systems, preserving the functional integrity of all original designs. So, as you can see, Figma truly makes both designers and developers extremely happy!
Do you still need some convincing? Check out our latest case study for Workin Porto and surrender to the wonders of this platform.