How to Design Graphics using Figma

If you’re in the midst of planning a wedding you’ll know how expensive everything is. As soon as you mention the ‘W’ word the price seems to double! However, often the little touches you want to add to your day seem so simple to make that, if you have the time, you could really DIY them for a fraction of the cost. Plus, with the availability of cheap online printing shops like Vistaprint and Snapfish, you can even order your designs from the comfort of your sofa with a coffee and some biscuits. Ideal! So what can we make at home and how do we do this?

You can really make anything you want or can imagine. Here are some suggestions to get you started:

• Signs (For example "welcome to our wedding", "thanks for coming", "no photography during the ceremony", "sign our guest book", "take a pair of flip flops for your dancing feet", "don’t share your snaps to social media too soon" etc)

• Favours (Anything from homemade soaps or lip balm labels to seed packets)

• Labels for customising gift items for the wedding party

• Invitations and save the dates

• Order of service

• Thank you notes

Things I’ve made for our wedding

At this point there’s a whole host of different things I’ve made for our wedding. It’s a little bit like a bug, once you start you can’t stop!

The first was our invitations. We’re getting married abroad so I wanted them to be plane boarding passes. You can buy these online but they were either too expensive, had a minimum purchase of 50 (we are only have immediate family so that was way too many!) or I just didn’t like them/think they were good enough.

I’ve also made further invitations for our party back home, tissue box favours, seed packet favours, lip balm wrappers for favours, water bottle wrappers, an ice cream voucher for our guests after the ceremony and a few signs for the party at home. Here are some of my creations.

My Figma creations

Getting started - particularly if you’ve never made computer graphics before

Before I started to plan our wedding my graphic design experience consisted of a term at secondary school where we were tasked with designing a new label for a milk bottle or a poster for the school’s charity cake sale. After leaving school I proudly took those skills and did, in fact, design a few fundraising posters and leaflets with the joy that is Microsoft Publisher.

I knew of other editing software, such as Photoshop, but as it isn’t free and because, after seeing someone else using Photoshop, it’s the most complicated program in the entire world, I’d never really delved beyond the colourful shapes and different fonts that were available in the lovely and oh so familiar package that is Publisher. In the eight or so years since I last needed my graphic design skills, I’ve bought a new computer and the new Microsoft package didn’t include Publisher!

So I began searching for an alternative (actually I began searching for a way to get Publisher on to the not-so-new-anymore laptop...) but my Fiancé suggested I used an online application called Figma instead. Obviously I ignored him and carried on with my Publisher search. Eventually though I gave up and gave Figma a try. I discovered he was, annoyingly, right and that his suggestion was much better than my old pal, Publisher.

It’s probably worth pointing out that Figma’s main purpose is not as a graphic design tool for printable posters and things I enjoy creating but for Software Designers creating websites, apps etc. Things I do not enjoy. However, it works fantastically for the purpose I have in mind and best of all, a basic account is free to use for your weddingy purposes. Yay!

So I created an account.

Once you’ve created your account you can create a new project by hitting the + symbol in the top left. You’re then presented with a grey (why is it not white?) screen and a lot of nothingness. What next?

There are probably plenty of tutorials and tips out there (if there’s something you can’t work out how to do, I’d say give it a Google in the first instance) so I won’t go into all the functionality (I also doubt very much that I know all the functionality) but I’ll offer a few tips below which I’ve picked up along the way that might help you to get started.

Depending on what you are looking to make there are two main options which will determine how you use Figma.

Sometimes you can find designs freely available online for download. You may want to upload these into Figma to make edits such as changing the size or colours.

To do this you need images which are SVG file types. SVG stands for ‘Scalable Vector Graphics’ which according to Wikipedia is ‘an XML-based vector image format for two-dimensional graphics with support for interactivity and animation’. Put simply though, they are image files which are made up of components (a background, an image, a picture, some text etc).

The perk of an image made up of components is you can tweak each one and not end up with the surrounding pixels which are slightly the wrong colour like you’d get in a program like Microsoft Paint when editing a png or jpeg file. I found that I couldn’t open SVG files on my computer but I could save them and place the image into Figma. Try Googling ‘Free SVG’ and the image you want. I found these DIY Wedding Tissue Box Favours via Pinterest and with a little help from Figma I was able to tweak the design to match my colour scheme.

Alternatively you may just want to build your design completely from scratch. This is what I chose to do with my invitations because there was nothing similar online and I had such a clear vision of how I wanted them to be.

Functionality in Figma – My key tips

Here are some tips and tricks I've picked up whilst using Figma. Hopefully they will give you a head start when you come to create your own designs.

Want to add an image or SVG you sourced online?

In your work sheet go to ‘File’ and then ‘Place Image’. Once you’ve selected your image click anywhere in the screen to place it. If you click within a shape, for example a rectangle you image will place inside that shape. (You can place a shape using the rectangle on the tool bar at the top of the screen).

Place image in Figma

Colouring shapes and adding outlines.

Whether it’s a shape you’ve drawn, or an SVG you have imported, you can change the colour using the ‘Fill’ option, or you can give it an outine using the ‘Stroke’ option.  You can also change the thickness of the outline or add multiple colours in a gradient effect by selecting the + symbol.

Colouring shapes and adding outlines

Want to hide a component instead of deleting it?

If you’ve added something and you’re not sure you like it you can use the eye symbol to turn it on and off to see which you prefer. The neighbouring + symbol will adds another item and the – will remove an item. (I found that minus symbol really handy as I kept accidentally adding shadows to things when I was aimlessly clicking around!)

Want a recent addition to your work to appear behind another shape/image?

To reorder your layers change the order they appear on the bar on the left hand side. Items at the top will appear in front of items lower down on the list.

Ordering shapes and layers

Want your shapes to be perfectly in line or equally spaced apart?

Shapes and images will snap to others as you move them so you know they’re level or equally spaced. The only time I found this didn’t work so well was when there were too many different images placed all around. If that’s the case you can toggle them off using the eye symbol, line them up, and then turn the other layers back on.

Aligning and spacing shapes

Need to make your shape smaller but want it to have the same dimensions?

If you click on the shape you need to resize a tool bar appears on the right which contains the shapes dimensions. If you click on the ‘constrains proportions’ button (looks a bit like a chain link) when you resize a shape it will shrink or enlarge all sides equally.

Need to make a number of components larger in one go?

To scale multiple components at once without losing the shape or structure select the scale option on the top left tool bar. Then simply highlight the items you want to resize and drag them larger/smaller.

Scale multiple shapes

Trouble finding a font?

The fonts menu only has names, it doesn’t give you a preview of what each font looks like and if you have to try every single one you’ll be looking for days! I would suggest using the Google Fonts page to pick the perfect font for your design.

Trouble finding the exact colour or shade you need?

I’d suggest an online search for ‘HTML colour picker’ and finding the shade you want that way. For example, here's a colour picker that Google kindly displays in the search results. Then you can just copy the HEX code into Figma. It’ll look something like FFFFFF (white) or 800080 (purple).

Want to export your image without a background?

Simply untick ‘show in exports’ beneath the "Background" heading in exports.

Export image without a background

Finally (and most importantly!) Don’t be afraid to just click around. A perk of creating content on a computer is that if you accidentally do something bad, you can just ‘undo’. Not all the buttons are obvious but you can toggle everything on and off again so the easiest way to work out what that weird symbol means is just to click it (and then swiftly unclick it if that’s not what you were after).

Oh and if you get a bit too click happy and things to wrong, beyond the memory of undo, you can restore a previous version!

Head to ‘File’ and then ‘Show Version History’. A list of previous versions will show up on the right hand side toolbar and you can click through to find the one you want. When you have it simply select the three dots and ‘Restore this version’. Phew!

Restore previous version

I’m sure there are a whole host of other things it does which I am still oblivious to – I’m not an expert, just an enthusiast that recently discovered the possibilities. If there’s something you’re not sure how to do I’d suggest either clicking around or giving it a Google. It’s always worked for me. And if you have any tips on fancy things I’m missing out on – please let me know!

Why Not Subscribe?

Did you know you can now subscribe to our blog to be the first to receive helpful updates, craft ideas and even discounts to use in our shop. Simply enter your email address below to join our crafting community!

Subscribe to Moochiebo

Sign up to our mailing list to receive the latest news, updates, and promotions.