StepDescriptionScreen
1

Open figma App


2

Create new project

First screen:

Creating new project:


3

Create a new file inside the project


4

Rename the filename (to keep order in files)

Initial workspace in Figma

Changed filename:



5On the left sidebar, switch to the Assets tab, and then click the Team Library icon



6Find the GE - Design system library and turn it on. Wait till figma loads all components categorized into different groups. Close the modal.



7

Under Grid, Frames category find the basic Frame for Desktop window 1920x1000px. Drag and drop this component into your artboard. Make sure that in View options you have selected Layout Grids

Select Layout grid if you cannot see any grids inside the frame.


8Detach the selected frame. Because it's an instance from the master component inside GE Design System, you cannot edit this frame or put anything inside it. Detach it, so you can edit it but all grids won't be removed.


9Add the Navigation-bar. Switch again to the Assets tab in left sidebar and find the Navigation bar inside the ID2 components group. Drag and drop this component inside the frame. You can always switch off the layout grid because it's quite hard to spot components under the grid.

Switch to the Layers tab to see the new component layer inside the frame.

Switch off the layout grid (you can always turn it on)

Place the Navigation-bar in the right place. Align it to the top, add the constraints to let the navigation bar stick for the left and right side of this frame. 


10Change the variant of Navigation bar. Select the App property and change it into ShopFloor value. 


11Add boardlet components. Find the Boardlet component inside the ID3 components group. Add this component inside the frame. Turn on the Layout grid view to help yourself to place it into the right places.


12Copy and pase / duplicate Boardlet component to add one more inside the frame. Place it, adjust the rezising and constraints  and turn off the Layout grid view to preview how whole screen looks like.


13

Add table components. Find the Table-topbar component inside the ID4 components group.


14Add the header items. Select from the components which one you prefer. Place it, then select them all and group them. Adjust the Auto layout feature, add 1px spacing, select the background fill to create the dividers. Select which header-items should have a fluid width, and which one should have a fixed width (according to the documentation). Rename the text labels inside the header-items. Choose which column should be sortable and which one not. Add the 1px border around all header items.


15Add the row items. Select row-items from the components to fit the header items.. Place it, change the size from Large to Medium, then select them all and group them. Adjust the Auto layout feature, add 1px spacing, select the background fill to create the dividers. Select which row-items should have a fluid width, and which one should have a fixed width (in the same way like in header-items). Rename the text labels inside the rowr-items. 


16Duplicate the row group, and group them all with auto-layout feature. Add 1px spacing between rows, add the background to create a horizontal dividers between the rows. Crop the rows group (add clip content option) to close the rows inside the screen layout. On the right sidebar switch from the Design tab to Prototype tab and Add a vertical scrolling.



17Group the Table Top-bar and Headers group into one group and name it i.e. Table-header. Ad an effect for this group - Elevation level 1


18Group the Table-header group with Rows group. Change it from Group to Frame. Name it i.e. Table and add a 1px border inside the Table. Now the overall look of the table it's done.


19Edit the data inside the table.


20Copy the view frame and change it width to see how the table looks on the narrower or wider resolutions.


21Run the prototype to see how the content scrolling inside the table works.