| Step | Description | Screen | |
|---|---|---|---|
| 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:  | |
| 5 | On the left sidebar, switch to the Assets tab, and then click the Team Library icon |
| |
| 6 | Find 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.
| |
| 8 | Detach 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. |
 | |
| 9 | Add 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.Â
| |
