08 මෙවලම් සහ ප්රායෝගික වැඩපිළිවෙල (Figma)
කඩදාසි සිතුවම් සහ මූලික කේත වලින් ඔබ්බට ගොස්, වෘත්තීය නිර්මාණකරුවන් භාවිතා කරන මෙවලම් සමඟ අපගේ නිර්මාණයට අවසන් නිමාව ලබා දෙමු.
Figma වැනි මෙවලමක් භාවිතා කරන්නේ ඇයි?
Figma (හෝ Adobe XD, Sketch) යනු UI/UX නිර්මාණකරුවන් සඳහාම විශේෂයෙන් සැකසූ, බ්රවුසරය මත පදනම් වූ ප්රබල මෙවලමකි. කේත ලිවීමට පෙර, වෙබ් අඩවියක හෝ යෙදුමක පෙනුම සහ ක්රියාකාරීත්වය සම්පූර්ණයෙන්ම නිර්මාණය කිරීමට, පරීක්ෂා කිරීමට සහ බෙදා ගැනීමට මෙය අපට ඉඩ සලසයි.
- වේගවත් නිර්මාණය: කේත ලියනවාට වඩා වේගයෙන් දෘශ්ය වෙනස්කම් සිදු කළ හැකිය.
- පහසු සහයෝගීතාවය (Collaboration): කණ්ඩායමේ අනෙක් අයට සහ පාරිභෝගිකයින්ට පහසුවෙන් නිර්මාණ පෙන්වා ප්රතිචාර ලබා ගත හැකිය.
- Interactive Prototypes: ක්ලික් කළ හැකි, සැබෑ වෙබ් අඩවියක් මෙන් ක්රියා කරන ආකෘති නිර්මාණය කළ හැකිය.
- Design Systems: නැවත භාවිතා කළ හැකි මූලිකාංග (components) නිර්මාණය කර කළමනාකරණය කළ හැකිය.
High-Fidelity Prototype යනු කුමක්ද?
High-Fidelity (Hi-Fi) Prototype එකක් යනු අවසාන නිෂ්පාදනයට ඉතාමත් සමාන, දෘශ්යමය වශයෙන් සවිස්තරාත්මක සහ බොහෝ විට අන්තර්ක්රියාකාරී (interactive) ආකෘතියකි. අපගේ wireframe එක (low-fidelity) මෙන් නොව, මෙහිදී අපගේ Style Guide හි ඇති නියම වර්ණ, අකුරු, සහ පරතරයන් භාවිතා කරනු ලැබේ.
ප්රායෝගික ක්රියාකාරකම: Figma හි අපේ වෙබ් අඩවිය නිර්මාණය කිරීම
මෙම ඒකකයේදී, අපි අපගේ HTML/CSS ව්යාපෘතිය Figma හි නැවත නිර්මාණය කරන්නෙමු. මෙය ඔබගේ නිර්මාණ කළඹට (portfolio) එක් කිරීමට ඉතා වටිනා ව්යාපෘතියක් වනු ඇත.
ඔබේ කාර්යය:
- Figma.com වෙත ගොස් නොමිලේ ගිණුමක් සාදන්න.
- නව නිර්මාණ ගොනුවක් (New design file) ආරම්භ කරන්න.
- අපගේ
student-notes-v6.htmlගොනුවේ ඇති පෙනුම Figma හි නැවත නිර්මාණය කරන්න.- හතරැස් (rectangles), පෙළ (text), සහ වෙනත් හැඩතල (shapes) භාවිතා කරන්න.
- අපගේ Style Guide එකේ ඇති වර්ණ (#007bff, #f4f4f9, #333) සහ අකුරු (Arial) භාවිතා කරන්න.
- Spacing සහ alignment ගැන සැලකිලිමත් වන්න.
- పూర్తయిన తర్వాత, "Share" බොත්තම භාවිතයෙන් ඔබේ නිර්මාණයේ link එකක් ලබාගෙන එය ඔබේ මිතුරන් සමඟ බෙදාගෙන ප්රතිචාර ලබා ගන්න.