Figma for beginners: a practical guide to your first project

Figma is a design tool for interfaces: websites, apps and anything else that lives on a screen. It runs in the browser or as a desktop app, files live online, and several people can work in the same file at once. For a beginner, it is the most direct way to learn how modern UI design is put together: screens built from frames, arranged with auto layout, and assembled from reusable components.

This guide is a practical first walk through Figma, written in October 2026. It covers frames and layout guides, auto layout, components and variants, styles and variables, prototyping, Dev Mode and handoff, comments, Arabic text, plugins, and a small first project to practise on: a bilingual landing page in Arabic and English.

Figma is the interface tool on my own software list. It changes often, so for every feature that matters I link to Figma's help centre, which is the place to check before you rely on a detail.

Before you start

• Plans. Figma has a free Starter plan with limits, and paid plans built around different seats. Prices and limits change, so check the official pricing page before you decide. Students and teachers should look at the education offer there too.
• Browser or desktop app. Both work. The first difference you will notice is fonts. Figma includes Google Fonts by default. To use fonts installed on your own computer from the browser, you need Figma's font installer, while the desktop app already includes it. On ChromeOS and Linux, only the default fonts are available.
• The screen. Layers on the left, the canvas in the middle, the properties of whatever you select on the right, and a toolbar with the main tools. Click around for a while before you start the project.

Frames: the screens you design on

Everything in Figma starts with a frame. Figma describes frames as container layers that organise shapes, images and text into designs, and they can be nested: an icon inside a button, inside a card, inside a screen. Pick the Frame tool and choose a preset such as Phone or Desktop, or draw your own.

Beginners often use groups where they need frames. Only frames give you layout guides, auto layout, constraints and prototyping, so make the frame your default container.

Layout guides

Layout guides are what Figma used to call layout grids; the help centre notes the rename in May 2025. There are three kinds: a uniform grid, columns and rows. Columns are the ones you will use most for screens. A common start is 12 columns on desktop and 4 on a phone, with a margin and a gutter you keep the same across the product.

One detail for Arabic: a column guide can be set to Left, Center, Right or Stretch, and the Right type starts the columns from the right side of the frame, which is where Arabic content starts.

Auto layout: designs that resize themselves

Auto layout is the feature that turns a drawing into an interface. Select a few layers or a frame and press Shift A. From then on, the items follow rules instead of your hand: a flow (vertical, horizontal or grid), the gap between items, and the padding around them. Change the text in a button, and the button grows with it.

Three resizing options do most of the work:

• Hug contents: the frame shrinks to fit what is inside it. Good for buttons and tags.
• Fill container: the layer stretches to fill its parent. Good for inputs and cards in a column.
• Fixed: the size stays what you set.

Figma has also brought auto layout closer to CSS flexbox, the way developers lay out web pages. Learn auto layout well, and you are learning how the page will be built.

A note for bilingual work: as of October 2026, Figma's help page on horizontal and vertical flows says objects fill the frame from left to right, and I could not find a setting there that reverses a row for right-to-left languages. So for an Arabic screen, reorder the items in each horizontal row yourself. My guide to Arabic RTL UI design lists what should flip and what should stay.

Components and variants

A component is a design element you make once and reuse everywhere: a button, an input, a card, a navigation bar. The original is the main component, and every copy is an instance. Change the main component and every instance updates. On an instance you can still override the text or an icon without breaking the link.

Variants group versions of one component into a set: a button in its default, hover, pressed and disabled states, or in small and large sizes. Component properties add simple switches: show or hide an icon, swap the icon, edit the label, or pick a variant.

A tip for bilingual projects: give components whose layout changes between languages a direction property, such as a list row with an arrow at its end. Switching a screen to Arabic then becomes a property change, not a redraw.

Avoid detaching instances. A detached instance stops updating, and a few months later nobody knows which buttons are the real ones.

Styles and variables

Both keep a design consistent, and both can be shared through libraries. They are not the same, and Figma's article on the difference between variables and styles explains it well:

• Styles can hold several values at once: a text style with its font, size, weight and line height, a gradient, or an effect such as a shadow.
• Variables hold single values: a colour, a number, a piece of text, or true and false. They sit in collections with modes, so one colour variable can have a light and a dark value, and one variable can point to another.

Figma's guide to variables gives an example that matters for bilingual work: previewing how text flows in different languages by switching the copy on a frame. In practice, that means text variables with an Arabic mode and an English mode. The same guide says that using variables in prototypes and publishing them to team libraries needs the education plan or a paid plan.

For a first project, keep it simple: colour variables for the brand colours, and separate text styles for Arabic and English, because Arabic usually needs its own sizes and more line height.

Prototyping basics

A prototype turns your frames into something people can click. In the Prototype tab, drag a connection from a button to another frame; Figma calls these connections "noodles". Each one has three parts:

• A trigger: on click or tap, on hover, on drag, or after a delay.
• An action: navigate to a frame, open an overlay, scroll to a section.
• An animation: instant, dissolve, a slide, or Smart Animate, which moves matching layers between frames.

A page can hold several flows, each with its own starting point. Press play to see it in Presentation view, and share the link, since anyone with view access can play a prototype. For an Arabic version, set slide animations so that a new screen enters from the left, because forward points left in a right-to-left interface.

Dev Mode and handoff

Dev Mode is a workspace for developers inside the same file. Figma describes it as the place for inspecting designs, viewing properties and generated code, downloading assets, comparing changes and managing handoff. Designers can mark frames and sections as ready for dev and add annotations with specs and notes. You switch to it with Shift D.

According to the help centre in October 2026, Dev Mode is available on paid plans and needs a Full or a Dev seat. Even without it, good handoff habits cost nothing:

• Name your layers and frames. "Frame 427" helps nobody.
• Use components, styles and variables, so the developer sees a system and not one-off values.
• Write notes on whatever the file cannot show: what happens on an error, what flips in Arabic, which digits to use.

Collaboration and comments

Share a file with "can view" or "can edit" access. To comment, press C and click on the canvas. Type @ to mention someone, and Figma emails them the comment with a preview. Comments attach to top-level frames and move with them, and the help centre says anyone with at least view access can add them.

That makes comments a good way to review with a client: send the prototype link, ask for notes on the frames, and resolve each comment once it is handled.

Arabic text in Figma

According to Figma's help page on adding right-to-left text, checked in October 2026:

• Right-to-left and bidirectional text are supported in Figma Design and FigJam files.
• By default, Figma detects the text direction from the language you type.
• You can override it from the right sidebar, from quick actions (Ctrl / on Windows, Command / on Mac), or from the Text menu under Text direction.
• If your font does not include a character you type, Figma shows that character in a Noto font.

That last point deserves attention. A fallback in your design means your chosen font is missing a character, and the live site will not show the same fallback unless the developer loads it. Check every Arabic font for the letters, numbers and punctuation you need before you build a system on it. Older files may also contain Arabic set with plugins from before Figma's own support; the help page says such text is kept and can be upgraded.

A few habits for Arabic in Figma:

• Make separate Arabic text styles with more line height.
• Align Arabic text to the right, the start of the line in Arabic.
• Do not add letter spacing to Arabic. It pulls the joined letters apart.
• Type real Arabic, with English names and numbers inside it, and check the order with your own eyes.

Plugins, with care

Plugins add features to Figma: icon sets, content generators, accessibility checks and much more. But the help centre is clear that plugins run third-party code and can access user and file information, including all the layers in a file.

Before you run a plugin on client work:

• Look for the "Data security info available" label on its Community page. It appears when Figma has reviewed the developer's answers about data security.
• Check the network access label: unknown, unrestricted, restricted to certain domains, or no network access.
• For files under a confidentiality agreement, prefer plugins with restricted or no network access, and ask the client if you are unsure.

Figma also has AI features of its own, and they change often. Treat them like any tool in your hand: useful for speed, with every decision still yours. Check the help centre for what your plan includes.

Your first project: a bilingual landing page

Reading about Figma is not the same as using it. Here is a small project that touches almost everything above. The brief: a one-page website for a small local business, in Arabic and English, with a header and language switch, a hero section, three features, a contact form and a footer.

1. Write the content first, in both languages. Real words, not lorem ipsum.
2. Create four frames: Desktop and Phone, in English and in Arabic. Add column layout guides to each.
3. Set the foundations: colour variables, and Arabic and English text styles.
4. Build the components: a button with variants, an input field with a label and an error state, a feature card, and a header with a language switch. Use auto layout in all of them.
5. Build the English page from instances of those components.
6. Build the Arabic page. Duplicate the frames, replace the text, reorder every horizontal row, flip the arrows, and leave the logo, the checkmarks and the phone number as they are.
7. Prototype it. Link the language switch between the two pages, and show the form's error state.
8. Ask for comments from a friend who reads Arabic, and fix what they find.
9. Prepare for handoff: name the layers and write notes on what flips.
10. Publish it in your portfolio as a self-initiated project, labelled honestly. My design portfolio guide explains how to present it.

From my work

The second practice project I would suggest is a small store flow, and Healoff shows what one looks like. It is a pharmacy and beauty store in Kuwait that sells online in Arabic and English. At Aldar, I designed its mark, the shopping app for iOS and Android, the app store screenshots, the website and the campaign banners. The app screens cover home, categories, product, cart and account.

To be clear about tools: Healoff was designed in Adobe XD, the tool on that project in 2022 and 2023. The thinking carries straight over to Figma. A product card becomes a component with variants, the deep green and gold become colour variables, and the path from home to checkout becomes a prototype flow. Rebuilding five screens like those in Figma, in both languages, is a good second exercise.

Common beginner mistakes

• Groups where frames are needed.
• Fixed sizes where auto layout should hug or fill.
• Detached instances.
• Colours typed by hand instead of styles or variables.
• Layers left with names like "Frame 427" or "Rectangle 12".
• An Arabic version that is only a flipped copy of the English one.

Conclusion

Figma rewards structure. Learn frames, auto layout and components first, add styles and variables, then prototype and hand off. Practise on one real bilingual project instead of many tutorials, and treat the Arabic version as a design of its own.

If you need an interface designed in Arabic and English, start a project with me.