Designing and developing websites is the heart of what Ballyhoo does, and for this, we require powerful design software – which is why we use Figma. The design tool makes creating and sharing UI and UX designs and wireframes easy.
What is Figma?
Figma is a web-based design tool, helping designers to express ideas with accessibility at its heart. Figma Design allows you to create, share and test designs, with many tools to create endless possibilities for UI designs. The software allows you to create multiple projects, with files and canvas to create shapes, text, layers, assets, guides and more.
Figma – The Future of Design
Easy Interface
Gone are the days of clunky design software – Figma allows you to design everything you need in one place, removing the need for additional tools. Recent updates to the Figma interface makes it easy to navigate between designs and projects, in addition to components. These include frames, which are perfect for nesting to create website headers, footers and menus, and the ability to create animations such as hover, scrolling and transitions.
Collaboration
One of the main reasons we love Figma is that it encourages collaboration and makes working together easy. Figma allows for real-time collaboration with not just other designers, but with developers and stakeholders. Instant feedback within Figma via comments means there’s no need for a separate tool to discuss design ideas and feedback, reducing the need for sending a design back and forth.
Additionally, Team Libraries can be used to add the correct branding and fonts to your design, helping when creating new components. As standard, project members are all granted access to the designs within the project, to ensure that everyone is working on the same versions.
Auto-layout
Figma’s handy auto-layout tool allows designers to create responsive designs that fit into frames, ideal for creating various designs for website breakpoints. Using auto-layout, components such as buttons and text become dynamic meaning they are automatically resized and rearranged when moved around the design, maintaining the correct padding and ensuring that the design is intuitive.
Dev Mode
Website designers and website developers work closely together, so how does Figma recognise this? Functionality to translate designs to code in a click of a button.
Developers can take snippets of code for CSS using the inspection tool, to copy components and code directly from Figma, or use a plugin to customise the code for the specific framework that they’re using.
Designers can mark designs as ‘Ready for dev’, so developers can move the work forward, helping to foster collaboration between designers and developers, accelerating the development process.
Client Sharing
Our website design projects need to be shared with our clients – and this is where Figma comes in handy. Not only can prototypes be shared with external shareholders, with updates shared in real time, but Figma gives you the ability to easily export assets and images in a range of formats.
Additionally, they have recently released the ability to select the quality for exporting assets, helping to reduce file size.
Community and Plugins
Figma Community is a platform where designers can share their design files with others, allowing us to find and access free and paid templates, components and widgets.
Additionally, Figma supports plugins – many of which created and shared on Figma Community – helping to simplify processes and support seamless design.
Safe
As Figma is a web-based tool, it is reliable as it can be accessed from anywhere – allowing us to work on our projects even when not in the office.
Additionally, real time backup to the Cloud means that projects are safeguarded, to ensure our work is always saved. Figma also allows you to revert previous versions if needed, ensuring only approved changes are implemented, also helping with rolling back small changes without erasing subsequent updates.
AI
Like many online tools, Figma is delving into the world of AI to help streamline processes. One way in which Figma utilises AI is allowing designers to generate placeholders and design mockups in a click of a button as a first draft, helping to turn a blank canvas into a tangible asset. Want to turn mockups into an interactive prototype? AI helps you do that too, all in a touch of a button to link design stages (such as customer checkout) to create a flow.
Additionally, Figma AI helps you to write text, auto-name layers and components and easily find assets – a valuable tool when you have large design files and projects on the go at once. You can also rewrite and translate your text to a different language, shorter or longer length, and tone of voice.
Another bugbear for designers is having assets that need their background removed. Luckily Figma AI now allows you to do this easily and quickly, removing the need of using a separate background remover tool, helping to speed up the design process.
What Our Designers Think
Here’s what our resident website designer Alison thinks of Figma:
“Figma was a game changer for me, streamlining workflows and giving me greater freedom to be creative. Compared to other creative software and suites, I instantly felt at home using Figma – it’s intuitive and I can very quickly ideate and produce designs, not to mention mastering auto layout and components has made me so much more efficient with my time. I’ve been impressed with the rollout of updates over the years, particularly in reducing friction in the design-dev handover and how they’ve embraced AI, increasing Figma’s value to me even more. I was fortunate to be included in the beta of a recent major update and was able to give feedback to the Figma team directly, they were so receptive and seemed to really listen to their users.”
Ballyhoo Web Design
Figma is an invaluable tool for us as website designers and developers, allowing us to create, improve and share designs before being built.
We create custom built websites to your unique requirements. Contact us now to discuss how a new website design can help your business to grow and expand.
