Figma Web Design: Learn Web Design In Sinhala

Nov 15, 2025 by Alex Braham 46 views

Hey guys! Today, we're diving into the awesome world of Figma for web design, but get this – we're doing it all in Sinhala! If you're looking to create stunning websites and user interfaces, Figma is your go-to tool. And learning it in your native language? Even better! This tutorial is designed to get you up and running, whether you're a complete beginner or have some design experience. So, let's jump right in and start building!

What is Figma and Why Use It?

Alright, let's kick things off by understanding what Figma actually is. Figma is a powerful, cloud-based design tool that's taken the design world by storm. Unlike traditional software, Figma lives in your browser, which means you can access your projects from anywhere, on any computer. Plus, it's super collaborative, allowing multiple designers to work on the same project simultaneously. Think of it as the Google Docs of the design world – real-time collaboration is a game-changer.

So, why should you use Figma for web design? Here are a few compelling reasons:

Accessibility: As I mentioned, Figma runs in the browser. No more being tied to a specific computer or operating system. Whether you're on a Windows machine, a Mac, or even a Chromebook, you can access Figma and start designing.
Collaboration: This is huge. Figma makes it incredibly easy to collaborate with other designers, developers, and stakeholders. You can share your designs with a simple link, and others can leave comments and feedback directly on your designs. This streamlines the design process and ensures everyone is on the same page.
Cost-Effective: Figma offers a generous free plan that's perfect for individuals and small teams. You can create unlimited files and collaborate with up to two editors. For larger teams and more advanced features, they have affordable paid plans.
Version Control: Say goodbye to the days of endlessly saving different versions of your design files. Figma automatically saves your work and allows you to easily revert to previous versions if needed. This is a lifesaver when you're experimenting with different design ideas.
Prototyping: Figma isn't just for creating static designs. You can also use it to build interactive prototypes that simulate the user experience of your website or app. This allows you to test your designs and get feedback before you start coding.
Plugins: Figma has a vibrant plugin ecosystem that extends its functionality. You can find plugins for everything from generating placeholder content to optimizing images to creating complex animations. These plugins can save you time and effort and help you create even better designs.

In short, Figma is a versatile, collaborative, and accessible design tool that's perfect for web design. Whether you're a seasoned pro or just starting out, Figma has something to offer.

Setting Up Your Figma Account (Sinhala Explanation)

හරි, අපි දැන් බලමු කොහොමද Figma account එකක් හදාගන්නේ කියලා. මේක හරිම ලේසියි! මුලින්ම, ඔයාලගේ web browser එක open කරලා figma.com website එකට යන්න. ඊට පස්සේ, ඔයාලට පේනවා ඇති "Sign up" button එකක්. ඒක click කරලා ඔයාලගේ email address එකයි, password එකයි දෙන්න. එහෙමත් නැත්නම්, ඔයාලගේ Google account එක පාවිච්චි කරලත් sign up වෙන්න පුළුවන්.

ඊට පස්සේ, Figma ඔයාලට verification email එකක් එවයි. ඒ email එක open කරලා ඔයාලගේ account එක verify කරන්න. ඊට පස්සේ ඔයාලට Figma පාවිච්චි කරන්න පුළුවන්. ඔයාලට පුළුවන් design files හදන්න, templates පාවිච්චි කරන්න, තව ගොඩක් දේවල් කරන්න. Figma interface එක ටිකක් අලුත් වගේ දැනෙයි මුලින්ම, ඒත් practice කරද්දී ඔයාලට ඒක හුරු වෙයි.

(Translation: Okay, let's see how to create a Figma account. It's very easy! First, open your web browser and go to the figma.com website. Then, you'll see a "Sign up" button. Click on that and enter your email address and password. Alternatively, you can sign up using your Google account.

After that, Figma will send you a verification email. Open that email and verify your account. Then you can use Figma. You can create design files, use templates, and do many other things. The Figma interface may feel a bit new at first, but you'll get used to it with practice.)

Sign-Up Process: Walk users through creating an account, explaining the interface elements in Sinhala.
Account Verification: Detail the importance of verifying the account and how to do it.
Initial Interface Overview: Provide a basic understanding of the Figma interface in Sinhala.

Basic Tools and Interface (Sinhala)

හරි, දැන් අපි Figma වල තියෙන tools සහ interface එක ගැන ඉගෙන ගමු. මේක ටිකක් සංකීර්ණ වගේ පෙනුනත්, practice කරද්දී ඔයාලට මේක හුරු වෙයි. Figma interface එකේ උඩම තියෙන්නේ toolbar එක. ඒකෙ ඔයාලට tools ගොඩක් තියෙනවා. උදාහරණයක් විදියට, selection tool එක, rectangle tool එක, ellipse tool එක, text tool එක වගේ tools තියෙනවා. මේ tools පාවිච්චි කරලා ඔයාලට shapes අඳින්න, text add කරන්න, images insert කරන්න පුළුවන්.

ඊට පස්සේ, වම් පැත්තේ තියෙන්නේ layers panel එක. ඒකෙ ඔයාලගේ design එකේ තියෙන හැම layer එකක්ම පෙන්නුම් කරනවා. ඔයාලට layers organize කරන්න, rename කරන්න, hide කරන්න, lock කරන්න පුළුවන්. මේක design එක organize කරගන්න හරිම වැදගත්.

දකුණු පැත්තේ තියෙන්නේ properties panel එක. ඒකෙ ඔයාලට selected object එකේ properties change කරන්න පුළුවන්. උදාහරණයක් විදියට, color එක, size එක, position එක වගේ දේවල් change කරන්න පුළුවන්. මේක design එක customize කරන්න හරිම වැදගත්.

(Translation: Okay, now let's learn about the tools and interface in Figma. It may seem a bit complicated, but you'll get used to it with practice. At the top of the Figma interface is the toolbar. It has a lot of tools. For example, there's the selection tool, rectangle tool, ellipse tool, text tool, and so on. You can use these tools to draw shapes, add text, and insert images.

Then, on the left side is the layers panel. It shows every layer in your design. You can organize, rename, hide, and lock layers. This is very important for organizing the design.

On the right side is the properties panel. It allows you to change the properties of the selected object. For example, you can change the color, size, and position. This is very important for customizing the design.)

Toolbar Explanation: Detail the function of each tool in the toolbar, such as the selection tool, shape tools, and text tool.
Layers Panel: Explain how to use the layers panel to organize and manage design elements.
Properties Panel: Describe how to use the properties panel to adjust the appearance and behavior of elements.

Creating Your First Web Page (Sinhala)

හරි, අපි දැන් බලමු කොහොමද ඔයාලගේ පළවෙනි web page එක Figma වල හදන්නේ කියලා. මුලින්ම, ඔයාලට file එකක් create කරන්න ඕනේ. Figma එකේ "New Design File" කියන option එක click කරලා අලුත් file එකක් create කරන්න. ඊට පස්සේ, ඔයාලට artboard එකක් create කරන්න ඕනේ. Artboard එකක් කියන්නේ ඔයාලගේ web page එකේ screen එක වගේ දෙයක්. Artboard tool එක select කරලා, ඔයාලට ඕන size එකේ artboard එකක් අඳින්න.

ඊට පස්සේ, ඔයාලට ඔයාලගේ web page එකට elements add කරන්න පුළුවන්. උදාහරණයක් විදියට, ඔයාලට headings, paragraphs, images, buttons වගේ දේවල් add කරන්න පුළුවන්. Text tool එක පාවිච්චි කරලා headings සහ paragraphs add කරන්න. Image tool එක පාවිච්චි කරලා images insert කරන්න. Rectangle tool එක පාවිච්චි කරලා buttons හදන්න.

(Translation: Okay, let's see how to create your first web page in Figma. First, you need to create a file. Click on the "New Design File" option in Figma to create a new file. Then, you need to create an artboard. An artboard is like the screen of your web page. Select the artboard tool and draw an artboard of the size you want.

After that, you can add elements to your web page. For example, you can add things like headings, paragraphs, images, and buttons. Use the text tool to add headings and paragraphs. Use the image tool to insert images. Use the rectangle tool to create buttons.)

Setting Up the Artboard: Guide users on setting up the artboard with appropriate dimensions for web design.
Adding Basic Elements: Show how to add headings, paragraphs, and images to the web page.
Creating Buttons: Explain how to create and style buttons using Figma's shape and text tools.

Using Components and Styles (Sinhala)

දැන් අපි බලමු කොහොමද components සහ styles පාවිච්චි කරන්නේ කියලා. Components කියන්නේ ඔයාලගේ design එකේ reuse කරන්න පුළුවන් elements. උදාහරණයක් විදියට, button එකක් component එකක් විදියට හදන්න පුළුවන්. ඊට පස්සේ, ඔයාලට ඒ button එක ගොඩක් තැන්වල පාවිච්චි කරන්න පුළුවන්. Styles කියන්නේ ඔයාලගේ design එකේ colors, fonts, සහ effects save කරලා reuse කරන්න පුළුවන් විදියක්.

Components හදන්න, ඔයාලට element එකක් select කරලා "Create Component" කියන option එක click කරන්න ඕනේ. ඊට පස්සේ, ඔයාලට ඒ component එක වෙන තැන්වලට drag කරලා copy කරන්න පුළුවන්. Styles හදන්න, ඔයාලට element එකක් select කරලා, properties panel එකේ තියෙන styles section එකට ගිහින් style එකක් create කරන්න පුළුවන්.

(Translation: Now let's see how to use components and styles. Components are elements in your design that can be reused. For example, you can create a button as a component. Then, you can use that button in many places. Styles are a way to save and reuse colors, fonts, and effects in your design.

To create components, you need to select an element and click on the "Create Component" option. Then, you can drag and copy that component to other places. To create styles, you need to select an element, go to the styles section in the properties panel, and create a style.)

Creating Components: Detail how to create reusable components for buttons, navigation bars, and other UI elements.
Applying Styles: Explain how to use styles to maintain consistency in colors, typography, and effects across the design.
Benefits of Using Components and Styles: Emphasize the efficiency and consistency gained by using components and styles.

Prototyping Your Web Design (Sinhala)

අපි දැන් බලමු කොහොමද ඔයාලගේ web design එක prototype කරන්නේ කියලා. Prototyping කියන්නේ ඔයාලගේ design එක interact කරන්න පුළුවන් විදියට හදන එක. මේකෙන් ඔයාලට user experience එක test කරන්න පුළුවන්.

Prototyping කරන්න, ඔයාලට Figma එකේ prototype tab එකට යන්න ඕනේ. ඊට පස්සේ, ඔයාලට connections add කරන්න පුළුවන්. Connections කියන්නේ ඔයාලගේ design එකේ pages අතර link කරන එක. උදාහරණයක් විදියට, button එකක් click කරාම වෙන page එකකට යන විදියට connections හදන්න පුළුවන්.

(Translation: Let's now see how to prototype your web design. Prototyping is making your design interactive. This allows you to test the user experience.

To prototype, you need to go to the prototype tab in Figma. Then, you can add connections. Connections are linking the pages in your design. For example, you can create connections so that when you click a button, it goes to another page.)

Setting Up Interactions: Guide users on how to add interactions between different elements and pages.
Testing User Flows: Explain how to test the user experience by simulating user flows.
Gathering Feedback: Describe how to gather feedback on the prototype to improve the design.

Exporting Your Design (Sinhala)

අන්තිමට, අපි බලමු කොහොමද ඔයාලගේ design එක export කරන්නේ කියලා. Export කරන එකෙන් ඔයාලට design එක developers ලට දෙන්න පුළුවන්, නැත්නම් ඔයාලගේ portfolio එකට add කරන්න පුළුවන්.

Export කරන්න, ඔයාලට Figma එකේ export option එකට යන්න ඕනේ. ඊට පස්සේ, ඔයාලට file format එක select කරන්න පුළුවන්. උදාහරණයක් විදියට, ඔයාලට PNG, JPG, SVG වගේ formats select කරන්න පුළුවන්. ඊට පස්සේ, ඔයාලට design එක export කරන්න පුළුවන්.

(Translation: Finally, let's see how to export your design. Exporting allows you to give the design to developers or add it to your portfolio.

To export, you need to go to the export option in Figma. Then, you can select the file format. For example, you can select formats like PNG, JPG, and SVG. Then, you can export the design.)

Choosing the Right Format: Guide users on selecting the appropriate file format for different use cases.
Exporting Assets: Explain how to export individual assets like images and icons.
Preparing for Development: Describe how to prepare the design for handoff to developers, including providing specifications and guidelines.

Conclusion

So there you have it! A comprehensive guide to Figma web design in Sinhala. We've covered everything from setting up your account to creating your first web page, using components and styles, prototyping, and exporting your design. With these skills, you're well on your way to becoming a Figma pro! Keep practicing, keep experimenting, and most importantly, keep designing! Good luck, and have fun creating amazing web designs with Figma!