By on

UNIT 3

 How to use figma to create the student score sheet interface (in student module), which will be downloaded or printed by the student.

Our focus will be:

-       Student scoresheet page
-       Using material design icons for the Hamburger icon and Back icon
-       Using text tool for Student Details and Course Details
-       Button for download and print

Ensure you read my previous blog: how to use Figma and Auto layout (Shift + A) to create interface for student module


Output of the scoresheet interface




How to re-use a previous component in figma

for example, if you want to reuse your previous text, created with Text tool, click the text, right click, select copy, click the region or position you want the new copy to appear, right click, select paste here.

Alternatively, if you use keyboard shortcut, ctrl + C, then ctrl + V, the duplicate will be on top of the original copy, click on text with your mouse, and drag it to your desired position, edit it and "TADA", you have a new copy, which will save you the stress of creating a new text afresh.

TIP: Let's say, you press  ctrl + C, then ctrl + V five (5) times, then five (5)  duplicates will be on top of the original copy, which you might not be aware, hence you need to drag the duplicates one after the other till you get to the layer of the original copy. So be careful when using the shortcut keyboard key combination.

Comments

Post a Comment

Popular posts from this blog

By on
Image
   DATA STRUCTURE WITH C++ PROGRAMMING USING STACK PREREQUISITES TO IMPLEMENTING STACK IN C++ We will need to understand how to use some of the constructs in C++ that makes up the implementation of stack in C++ against. And this concepts will also help you in developing other codes and to debug or understand the C++ codes in a company's code bank or to interpret a boiler plate code (a ready made code). Some of these constructs or concepts are: 1. sizeof() 2. Function 3. Pointer 4. Function Pointer 5. Arrow operator 6. malloc() 7. typedef 8. struct PHASE 1: sizeof() It is used to determine the size of variables used in a program, it can determine the size of primitive (or predefined) datatype too and for any user-defined datatypes. It is an inbuilt keyword and a compile-time operator. syntax-1 using variable sizeof(variableName); syntax-2 using primitive datatype sizeof(datatype); //code implementation #include<iostream> using namespace std; int main(){ //declare v...
Read more
By on
Image
 ADDING FILES TO YOUR GITHUB ACCOUNT & Inspect Element & Export SQL file from XAMPP sign into your github account create a new repository give it a name of your choice click create repository ensure you are in the project folder directory for quick access; copy the folder on the desktop open git bash terminal cd desktop cd folder-name (cd whitepace-academy) HANDLE few git commands type:: git init (a git folder is created in your project folder) type:: git add . (add the period sign) type:: git config --global user.email "ajalabamise@gmail.com" type:: git config --global user.name "ajalabamise" type:: git commit -m "initial commit"  (it shows all your folder files) CONNECT your local github folder in your github repository copy and paste the code below from your github repo into your git terminal and press enter key git remote add origin https://github.com/ajalabamise/my-web-dev-tutorial.git UPLOAD the files to github repo git push -u or...
Read more
By on
Image
 CGPA CALCULATOR & BASIC HTML WEB DEV PROJECT Introduction: In this cgpa calculator, user will enter the gp for each semester, then click on the submit button to see the cgpa user can also click the reset button to begin a new input for calculation In this mini project we will be using HTML CSS JAVASCRIPT to develop a cgpa calculator NB:   With a querySelector statement, you can select an element based on a CSS selector. This means you can select elements by ID, class, or any other type of selector. Using the getElementById method, you can only select an element by its ID. Generally, you should opt for the selector that most clearly gets the job done. PHASE 1a:  PROTOTYPE (final product) PHASE 1b:  PROTOTYPE (rought sketch) Let's sketch with our hand how the cgpa calculator will look like PHASE 2: Html (for structuring the webpage content) Shortcut for div and class for css: type dot followed by the name you want e.g .cgpatitle Shortcut for div and id f...
Read more