Figma for Web Design
Figma is a powerful design tool utilised by web designers around the world. Not only is there a host of tools built in for you to access straight away, but there is also a vast range of plugins to choose from. Plugins can be accessed through the plugins panel of the Figma interface – they are easy to find and use and can be used for a range of different tasks. But what is a plugin, and how can they be used to take your web design to the next level?
What is a Figma Plugin?
Plugins are programs or applications that are created by the Figma Community of users that extend the functionality of Figma’s editors. Plugins run in files, perform one or more user actions, and allow users to customise their experience or expand their workflow to complete further tasks.
In this article, we’ll delve in our top 8 Figma plugins, show you why they’re so useful, and explain how we use them as web designers to create new expert websites for the hotel and hospitality industry.
Storyset by Freepik
Storyset by Freepik is a free Figma plugin that can be used by designers to implement illustrations into their workflow. Storyset comes with thousands of free illustrations which detail all types of characters and situations. One of the best things that I love about using Storyset within my work is that the illustrations all come with editable colours and strokes.
As an extra bonus, Storyset allows you to choose from several styles before picking an illustration. This quickly filters out illustrations that aren’t relevant to the design you’re working on, which really speeds up the selection process.
Link to Storyset – https://www.figma.com/community/plugin/865232148477039928/Storyset-by-Freepik
Colour Overlay
Colour Overlay is a simple yet effective Figma plugin that can be used to recolour an image in PNG or JPEG format. During the design process, you’ll often find that not all assets are able to be edited in SVG format, therefore they are often PNG or JPEG.
If you wanted to change the colour of this asset to a flat colour, you’d typically have to open photoshop or another image manipulation tool. However, with the help of Colour Overlay, you can continue to work on the asset within Figma and simply change the colour of the asseti n a couple of clicks.
Link to Colour Overlay – https://www.figma.com/community/plugin/786223450940846289/Color-Overlay
Blobs
Blobs once again is a simple but powerful tool that allows designers to create ‘blobs’ within Figma. Blobs are vector based shapes that resemble a ‘blob’ or a ‘splodge’, which can then be edited to suit any design. Designers typically use this plugin to create a shape for background or texture.
The Blobs Figma plugin offers a good amount of functionality and allows a web designer to customise the size and shape of the ‘blob’ before placing it into their design.
Link to Blobs plugin – https://www.figma.com/community/plugin/739208439270091369/Blobs
Unsplash
Unsplash makes the tedious job of finding stock imagery easy by allowing web designers to search effortlessly for images. Unsplash’s simple interface includes a search function as well as a preference checklist, which details which orientation the image should be.
Adding stock images to a design is a great way to bring a design to life, and Unsplash is ideal to use when a client hasn’t got any high-quality imagery to add to their hotel website.
Link to Unsplash plugin – https://www.figma.com/community/plugin/738454987945972471/Unsplash
Lorum Ipsum
Lorum Ipsum isn’t so much of a design-based plugin as it’s usage isn’t used to change the way a design looks visually so to speak. However, it’s still a great tool for any web designers kit. The primary function of Lorum Ipsum is to add placeholder text to a design. Originally based on Latin – Lorum Ipsum has no real meaning to it.
Often, a designer will add placeholder text to fill a space or to add context to show where content may be filled. Having Lorum Ipsum installed as a plugin on Figma makes adding it to a website design much quicker and easier than searching for it online.
Link to Lorum Ipsum plugin – https://www.figma.com/community/plugin/736000994034548392/Lorem-Ipsum
Get Waves
Get Waves is a similar to the ‘Blobs’ plugin in terms of functio, however, it generates waves as vector based shapes. These waves can be edited by changing the colour and the vector points to suit your design. Before placing the shape into a web design, the shape can be customised within the plugin’s UI which is easy to use.
Adding wave shapes to your web design is a great way of breaking up your design and can act as unique dividers to separate sections, blocks or written content.
Link to Get Waves plugin – https://www.figma.com/community/plugin/741472919529947576/SkewDat
Skewdat
Skewdat is a funky plugin made for skewing elements within a design. Skewing elements is typically reserved for more advanced design software, however, this plugin allows you to skew the angle of an element, such as an image, within Figma.
Skewed images can be a great way of adding perspective to an image or mockup, and can be used to make images or elements appear 3D. For example, we’ve used Skewdat to skew images so that they appear as if they are floating seamlessly within a concept.
Link to plugin – https://www.figma.com/community/plugin/741472919529947576/SkewDat
Clear Guides
Clear Guides could be seen as an old-fashioned plugin, however, this plugin is still useful depending upon a web designers workflow. When working on a design, there can be several ways to align elements with others or to maintain a structure. Two of the most common examples are grids layouts and guidelines.
Guidelines can be placed onto a design manually and used to align elements. To remove guidelines you can select one-by-one any that you’d like to remove, or, you can use this handy plugin to remove all guides on a document. Whilst this may seem like a minor task, this simple plugin is a quick and easy way of speeding up your workflow.
Link to Clear Guides plugin – https://www.figma.com/community/plugin/753903260307779121/Clear-Guides
Conclusion
With the power of these Figma plugins at your fingertips, it’s easy to see why Figma remains a leading choice for expert web designers worldwide. If you’d like help creating a stunning website for your hotel or hospitality business, get in touch and we’ll guide you through how we deliver aesthetically stunning websites that boost your direct bookings.
