You keep hearing it in team meetings, on job listings, and from that one colleague who seems to design everything: “Just use Figma.” So you open it, stare at the blank canvas, and quietly close the tab.
I get it. Whether you are a marketer in Singapore who needs to mock up a landing page, a small business owner building your own promo graphics, or a career switcher eyeing a UX role, Figma being the industry standard does not make it any less intimidating the first time you see all those panels and icons.
Most YouTube tutorials do not help either. They race through at double speed, assume you already know what a “frame” or a “component” is, and leave you more confused than when you started.
This is not that. This is a slow, patient Figma tutorial written for absolute beginners with zero design background, where I explain the why behind every click.
One thing that makes this easy: Figma runs entirely in your browser. So even on a work-issued Windows laptop where you cannot install new software, you can follow along without downloading a thing.
Take it one section at a time, and by the end you will have designed and shared your first real screen.
Figma is a cloud-based design tool that runs right in your browser. You do not download a heavy application or worry about which laptop you are on; you just open a link and start designing.
This Figma tutorial exists because Figma has become the default in modern UX and UI work, and I want you to feel confident using it from day one. That is not just a feeling. In the UX Tools 2024 Design Tools Survey of 2,220 designers, Figma was the primary tool for 82.3 percent of respondents, the most dominant share recorded for any design category. Figma co-founder and CEO Dylan Field has said the reason is simple: design, in his words, “is a team sport,” collaborative by nature rather than a solo pursuit.
Figma is where designers turn ideas into something you can see and click. In practice, I use it for a handful of core tasks.
If you have ever mapped out a solid landing page design workflow, you will find Figma slots neatly into that process, from first sketch to a polished, shareable screen. See a solid landing page design workflow for how design fits the wider funnel.
Here is what changed everything: Figma introduced real-time, browser-based collaboration, much like Google Docs.
Older tools made this hard. Sketch is Mac-only, which immediately shut out anyone on Windows, and Adobe XD required installs and clunky file sharing.
With Figma, several people can work on the same file at once, watch each other’s cursors, and drop comments in place. Files save to the cloud automatically, so you never lose work to a crashed app.
For a beginner, the free Starter plan is generous enough to build a full portfolio without paying a cent, and it runs on any operating system.
This is not just a global trend; it is very real here. In-house product and design teams at companies like Grab and DBS build their interfaces in Figma, from Grab’s Duxton design system to DBS’s 135-person UX design team, and local agencies expect new hires to know it.
Whenever I scroll through UX and product design listings on MyCareersFuture, Figma keeps coming up as a required skill rather than a nice-to-have, and MyCareersFuture itself lists it as one of the core tools for the role.
That is part of why I built Figma directly into the SkillsFuture-eligible courses I teach at Equinet, so learning it now lines up with what local employers are already asking for.
Before you draw a single button, you need an account and a tidy workspace. The good news is that getting started with this Figma tutorial costs you nothing, and setup takes about five minutes.
Head to figma.com and click Sign up. You can register with a Google account for one-click convenience, or use your email address and set a password.
Once you are in, Figma asks which plan you want. The Starter plan is free and more than enough for learning, so choose that. It gives you unlimited personal drafts plus 3 Figma design files and 3 FigJam boards for collaborative work, which is plenty while you practise.
The Professional plan adds unlimited team files and version history, but you only need it later when you are working with clients or a team. Do not pay for it while you are still finding your feet.
Figma runs entirely in your browser, so you can design straight from Chrome or Edge without installing anything. That is one reason it became so popular.
There is also a free desktop app you can download. I recommend the desktop app because it handles custom fonts better and feels snappier on larger files. Both stay in sync since your work lives in the cloud.
Figma organises your work in a simple hierarchy. A team sits at the top, projects sit inside teams like folders, and files (or drafts) sit inside projects.
Picture a freelance designer working from a home studio in Tampines. She lands a local F&B client who wants an ordering app, so she creates a team called Studio, a project called Kopitiam Ordering App, and inside that a file for the wireframes.
That structure keeps the client’s work separate from her personal experiments and makes it easy to share the right folder later.
Because Figma files are cloud-based and easily shared, be careful with real customer information. Under Singapore’s Personal Data Protection Act (PDPA), uploading actual customer names, phone numbers, or order screenshots into a shared file could count as mishandling personal data.
While you practise, always use dummy data like John Tan or fake email addresses. Save real data handling for properly scoped client work with the right agreements in place.
If your design calls for a specific font, install it on your device first, or use the free Figma font installer so the desktop app can read it.
Finally, if you are a student at a local polytechnic or university, apply for Figma for Education using your school-issued student email, verified through Figma’s education partner SheerID. It unlocks the Professional plan at no cost for the length of your enrolment, which is a real gift while you are learning.
The fastest way to get past the fear of a new tool is to open it and poke around. So before you read another line, create a blank scratch file in Figma and follow along, because this Figma tutorial works best when you are clicking as you read.
The editor has three main zones: the canvas in the middle, the layers and assets panel on the left, and the design panel on the right. Once you know what each does, nothing on screen feels mysterious.
The canvas is your infinite workspace, and the toolbar runs across the top with the tools you will reach for constantly.
The Move tool (V) selects and drags things around. The Frame tool (F) creates the container that holds your design, think of a frame as an artboard sized to a phone or desktop screen. Then you have shape tools for rectangles and ellipses, the Pen tool (P) for drawing custom paths, the Text tool (T) for typing, and the Comment tool (C) for leaving notes when reviewing work with a teammate.
Here is a concrete practice task. Try recreating the header bar of a familiar Singapore website, such as the LTA MyTransport app or the SingPass login screen. Drop a frame, add a rectangle for the top bar, place a text layer for the app name, and sit a small logo shape on the left. You will use nearly every tool in one go.
Every element you create becomes a layer, and layers stack from top to bottom just like sheets of paper. The item at the top of the list sits in front of everything else on the canvas.
The mess starts when you have twenty layers all named “Rectangle 12”. Double-click any layer name to rename it, so your SingPass header becomes tidy entries like “Top bar”, “Logo”, and “Login button”.
Good naming pays off the same way tidy event names help when how beginners approach Google Analytics 4: future you, or a colleague, can read the structure instantly instead of guessing.
Select any layer and the right panel wakes up with everything you can adjust. This is where precision lives.
You will find these controls the most:
Set the LTA header rectangle to full width, give the login button a subtle corner radius, and add a soft drop shadow. You will see how quickly a plain box starts looking like a real interface.
Finally, save your fingers. Learn shortcuts like V, F, T, and Cmd or Ctrl plus D to duplicate, because over a long session those keystrokes cut real fatigue.
Once you know your way around the interface, the real work begins with frames. In this part of the Figma tutorial, I want to give you the building blocks that every screen you ever design will rest on.
A frame is Figma’s version of an artboard. It is the container that represents a single screen, whether that is a mobile app view, a landing page, or a promo card.
When you press F to create a frame, Figma offers presets in the right panel. For most Singapore projects I pick a mobile-width preset, such as the current iPhone size or a common Android width, because so many locals browse and buy on their phones first.
Choosing the right frame size early forces you to design mobile-first, which is exactly how your users behave.
Inside a frame you build with shapes. Press R for a rectangle, O for an ellipse, and L for a line, then style each one in the right panel.
You can set a fill colour, add a stroke with a chosen weight, and soften a rectangle with a corner radius so a button looks tappable rather than boxy.
Beginners often confuse frames with groups, and it matters more than you think.
A group simply bundles layers together so you can move them as one, but it has no layout intelligence. A frame is smarter: it can hold layout grids, clip overflowing content, and respond to resizing.
My rule of thumb is to use frames for anything that behaves like a real screen or component, and reserve groups for quick, temporary bundling.
Constraints tell an element how to behave when its parent frame changes size. Select a layer inside a frame, and you will see options to pin it left, right, top, bottom, or centre.
If you pin a button to the bottom and stretch it horizontally, it will stay anchored and resize neatly when the frame grows. This is how you get designs that hold up across different phone widths without redoing everything by hand.
Now for the practice scenario. Imagine you are laying out a promo screen for a hawker stall or an event card for a community centre.
Add a layout grid to your frame (I usually use a column grid with a comfortable margin), then place your header image, stall name, and a call to action button so each snaps to the columns. Apply an 8-point spacing system: gaps of 8, 16, or 24 pixels between elements, never random numbers like 13 or 27.
That discipline is what separates amateur work from professional work. When every margin and padding value is a multiple of eight, your design feels calm and deliberate, and clients notice even if they cannot name why.
Text can make or break a design, so let me walk you through the Figma tutorial steps I use to get type looking polished rather than default.
Press T or click the text icon, then click once on the canvas to start typing. That single click creates an auto-width box, which grows sideways as you type.
If you instead click and drag to draw a box first, you get a fixed-size text box that wraps text within those bounds. There is also auto-height, which keeps a set width but grows downwards as the content gets longer.
Here is how I decide which to use:
With your text selected, open the right-hand panel to pick a typeface, size, line height, letter spacing, and alignment. I nudge line height up slightly for body text so paragraphs breathe, usually a touch above the default.
Good design is not just pretty fonts, it is clear hierarchy. Headings, body, and captions each need distinct sizes so the eye knows where to land first.
For a heartland retail app aimed at users glancing at their phones on the MRT, I keep body text comfortably large and avoid tiny captions that vanish on a small screen. Readability on mobile always wins over cramming in more content.
Words carry the message, so the way you write those labels matters as much as how you style them. If you want to sharpen the actual wording, the difference between persuasive and informative text is covered well in these copywriting versus content writing fundamentals.
Say that same heartland app needs English and Chinese labels side by side, “Add to Cart” next to “åŠ å…¥è´ç‰©è½¦”. Not every typeface supports Chinese glyphs, so pick one with proper CJK coverage, or set a separate font for the Chinese text, and check that both weights sit together nicely.
Once your sizes look right, select the text, open Text in the design panel, click the four-dot style icon, and save it as a text style like “H1 Heading” or “Body Regular”.
Now every screen pulls from the same source. This is exactly how professional Singapore agencies enforce brand guidelines, so one tweak updates the whole file instead of forcing you to fix labels one by one.
Here is where Figma stops being a fancy drawing tool and starts saving you real hours. Let me set the scene.
Imagine you are the sole designer at a small fintech startup applying for an Enterprise Singapore grant. You have a dozen screens to prepare for an investor demo, and every screen has buttons, colours, and headings that must look identical.
Doing that by hand is a nightmare. Components and styles let you design something once and reuse it everywhere, so one change updates every copy at the same time.
Start with a single button. Draw a rectangle, add a text label like “Verify Identity”, and group them into a frame.
Select that frame, then right click and choose “Create component” (or press the component icon in the toolbar). You now have a master component, marked with a small diamond.
Copy that master and paste it onto other screens. Each copy is an instance, and every instance stays linked to the master.
Now change the master’s corner radius or padding. Watch every instance across all your demo screens update in one go. That is the moment most beginners fall in love with Figma.
Components handle repeated objects. Styles handle repeated properties like colours and fonts.
For your fintech brand, say the primary colour is a deep navy, and your accent is a bright orange. Select an element, open the fill panel, click the style icon, and save it as a named style such as “Brand/Navy”.
Do the same for text: pick your heading font, size, and weight, then save it as “Heading/Large”. Apply these styles across your screens instead of typing hex codes by hand.
Then the founder walks in and says the investors prefer a slightly different blue. You edit one colour style, and every button, label, and background using it shifts instantly.
This kind of consistency is exactly what makes a grant pitch look polished rather than pieced together the night before.
Real buttons are not static. Your “Verify Identity” button needs a default look, a hover state, and a disabled state for when a field is incomplete.
Rather than making three separate components, you group them into one component set using variants. Select your button versions, click “Combine as variants”, and give each a property like State with values default, hover, and disabled.
Now, in any instance, you switch states from a simple dropdown in the right panel. One tidy component covers every situation, and your file stays clean instead of cluttered with near-duplicate buttons.
Once you get comfortable here, it is worth exploring an extensive list of digital marketing tools that pair well with Figma for shipping a full product story.
Up to this point in the Figma tutorial, you have been building static screens. Now comes the part that makes people lean forward: turning those flat frames into a clickable demo that behaves like a real app, all without writing a single line of code.
Look at the right hand panel. You have been living in the Design tab, but next to it sits the Prototype tab. Click it and your canvas changes subtly, showing small nodes on the edges of every element when you hover.
To create a link, hover over a button, grab the little circular node that appears, then drag a connection arrow to the frame you want it to open. That arrow is the flow.
When you release the drag, Figma shows an interaction panel where you set two things: the trigger (what the user does) and the animation (how the transition looks).
For a beginner, three choices cover almost everything you need:
Smart Animate feels like magic the first time. If a button sits lower on screen one and higher on screen two, Figma animates it moving between the two positions, as long as both layers share the same name.
Let me make this concrete. Imagine you are prototyping a booking flow for a badminton court at an ActiveSG sports hall.
Screen one is the home screen with a “Book a court” button. Screen two shows available time slots with a “Confirm” button. Screen three is the confirmation with a booking reference.
You drag one connection from the “Book a court” button to the slots screen using On Tap and Dissolve. Then you drag a second connection from “Confirm” to the confirmation screen using Smart Animate so the selected slot appears to expand smoothly.
Now hit the Present button (the play icon in the top right). Your prototype opens in a preview window where you can actually tap through home, slots, and confirmation like a real user.
Here is why this matters. When you pitch to a client or a stakeholder, a clickable prototype is far more convincing than a folder of static PNGs.
People struggle to picture flow from still images, but they immediately understand a demo they can tap through themselves.
Just as importantly, prototyping lets you test usability before development starts. If a colleague taps the wrong button or cannot find the confirm step, you fix it in Figma in minutes rather than paying developers to rebuild it later.
Here is where Figma truly earns its keep. Unlike the old habit of emailing static image files back and forth, everything in Figma lives in the browser, so your whole team works from one single source of truth.
Let me walk you through how I actually use this on live projects.
To share, you click the blue Share button in the top right corner and copy the link. Before you send it, decide who gets to do what.
You can grant two levels of access: can view for stakeholders who only need to look and comment, and can edit for teammates who are actively designing. I almost always keep clients on view access so nobody accidentally nudges a component out of place.
Picture a common Singapore setup: the design and marketing team sits in an office in the CBD, while the developer works from home out in the east.
In the past, a design review meant a long email thread with screenshots and confusing notes like “the button on the third screen from the top.” Nobody knew which button anyone meant.
With Figma, I switch to the comment tool (the speech bubble icon or press C) and click directly on the element in question. My comment is pinned exactly where it belongs, so the developer sees “make this orange” sitting right on top of the actual button.
Teammates reply in a thread under each pin, and once a change is made, you mark the comment as resolved so it disappears from view. This keeps feedback tidy and traceable, which pairs nicely with how you might already plan reviews using how to create a content calendar to plan work.
When the design is approved, your developer opens the Dev Mode or Inspect panel. Selecting any layer reveals its exact CSS: font sizes, colours as hex codes, padding, and spacing between elements.
This means the developer no longer guesses measurements. They copy the values straight out of Figma, which cuts down the “why does this look different from the design” arguments on real client builds.
For assets, you export in the format that suits the job:
That smooth handoff is the difference between a project that ships on time and one lost in miscommunication.
Finishing a Figma tutorial feels good, but skills fade fast if you do not use them. The best way to lock in what you have learned is to build things you actually care about.
Here is the honest truth I share with everyone I train: you do not get better by watching; you get better by dragging frames around until something clicks.
Start small and build up. Each project should stretch you a little more than the last.
Do not aim for perfection. The point is repetition, not a masterpiece.
The Figma Community is your best friend here. It is packed with free templates, UI kits, and plugins created by working designers.
My favourite way to learn is reverse-engineering. Find a polished community file, hit Duplicate to copy it into your own drafts, then take it apart layer by layer to see how the maker structured their components, auto layout, and constraints.
You will learn more from picking apart one well-made file than from ten hours of passive watching. If you also do web or content work, it is worth collecting a few useful free tools worth bookmarking alongside your Figma resources so your whole workflow stays lean.
Self-study will only take you so far, especially when you hit tricky topics like design systems or handoff to developers.
If you are a Singaporean or PR, you can tap your SkillsFuture Credit to offset the cost of a structured, hands-on Figma or UX/UI course. A guided course with real feedback usually accelerates your learning far more than piecing it together on your own.
As you complete your practice projects, save your best work into a small portfolio. Two or three polished screens with a short explanation of your decisions are enough to catch a hiring manager’s eye when you apply for roles on MyCareersFuture.
Employers care less about how many tutorials you finished and more about what you can actually ship.
When we started this Figma tutorial, you had a blank canvas and maybe a little hesitation about whether design was for you.
Now look at how far you have come. You signed up, learned your way around the toolbar, built with frames and auto layout, styled with colours and text, and turned static screens into a clickable prototype you can actually share.
That last part matters most. A prototype you can send to a colleague or client is proof that you can take an idea and make it real.
Here is the honest truth I share with everyone I teach: consistent small practice beats binge-watching tutorials. Watching ten hours of videos in one weekend feels productive, but it fades fast.
Half an hour a few times a week, spent building something of your own, is what actually turns knowledge into skill.
And these skills are genuinely in demand here. Across Singapore, product teams at startups and larger tech firms, marketing teams building landing pages, and even founders mocking up their first app are all reaching for Figma.
Being the person on the team who can quickly turn a rough idea into a shareable design makes you noticeably more valuable, whatever your job title.
So here is my one ask for you this week. Pick a single practice project, maybe redesign a mobile screen from an app you use, or mock up a simple sign-up flow, and finish it. Just one.
If you would rather learn this in a guided setting with a trainer to answer your questions and peers to build alongside, come and explore What The Figma (WTF) at Equinet Academy, a hands-on, SkillsFuture-eligible course.
There is no pressure here. Whether you continue solo or join us in class, the important thing is that you keep going. You have already started.
Article Written By
Micah is a passionate content marketing strategist at Equinet Academy who loves turning keyword research into clear, purposeful content plans built around what people are actually searching for. She focuses on creating people-driven blogs and resources that help the company grow while making sure readers genuinely learn something useful and feel more confident applying it.
Article Written By
Micah is a passionate content marketing strategist at Equinet Academy who loves turning keyword research into clear, purposeful content plans built around what people are actually searching for. She focuses on creating people-driven blogs and resources that help the company grow while making sure readers genuinely learn something useful and feel more confident applying it.
Receive the latest blog articles right into your inbox.
Reader Interactions