DEV Community: Joshua Dimkpa

FIGMA GRID LAYOUT: STEP-BY-STEP GUIDE TO CALCULATE RESPONSIVE GRID LAYOUTS.

Joshua Dimkpa — Wed, 29 Jun 2022 12:16:43 +0000

When designing for screens, there are a lot of layouts to contend with to allow our designs to adapt, We need both precision and flexibility.
In this tutorial, We will create a responsive and adaptive layout using a layout grid, learn how to use simple tools to design our UI, and calculate a responsive grid layout.
Before we get practical, Let us know more about the layout grid.

What are layout grids?

Layout grids help us to align objects within a frame. They provide visual structure to our designs and make our design remain logical and consistent across different platforms and devices.
Layout grids are not reliant on the pixel grid. Which means they are not dependent on a specific resolution or dimensions.
You can only apply layout grids to frames and could be a top-level frame or a frame nested within another frame.

Why use Layout Grid?

Layout grids allow you to do the following:

Establish consistency across numerous platforms.
Make fewer choices when defining layouts.
Reduce the duration taken to define layouts for mock-ups or wireframes.
Support various layout techniques like galleries, icons, or entire page layouts. # Applying layout grids

You can apply a layout grid to any frame. Recall that components are also frames, so we can apply them to components.
You can see the layout grid settings in the right sidebar:

To apply a layout grid on your canvas, you need to follow this steps below:

Select the frame in the canvas or the Layers panel of the left sidebar:
Click on the plus icon next to Layout grids in the right sidebar:
A uniform grid will be applied to the frame by default:
You can then click the multiple box icon to open the layout grid settings and update any properties: ## STEP 1

Hit F on your keyboard, select desktop frame with a width of 1440px on the right property panel, and make the height 886px. Let us add the grid to our layout, click on the layout grid plus icon to add a grid, change the dropdown to a column, make the number of column 12, Make the type to be stretched, make the margin 32, and the gutter 20px.

STEP 2

Let us scale our canvas, resize down and back up. We can see the columns are responsive. They are dynamic depending on the viewport, and how much space we can design in the column will scale accordingly, so our design will perfectly balance within columns and areas left for us to work with.

STEP 3

Now you need to understand that when using a grid layout, there is a total number of designable areas and un-designable spaces. To further understand, we will have to create a list of how to determine this in other to achieve a responsive design using a layout grid. This list will consist of 5 items.
1) Total area.
2) Unavailable space.
3) Available space.
4) Number of columns.
5) Number of columns + spacing(for our design we are using 3 columns(3 columns + spacing)).

STEP 4

We will have to do some simple mathematics when using grid layout to make our canvas responsive. The math is to determine the above list.
1) Total area: to get the total area, we will have to use the total width of our canvas, which is 1440px.

NOTE: when creating our layout grid, our margin is 32 and gutters 20.

2) Unavailable space: to determine the inaccessible areas within our canvas, we will have to sum the total number of gutters and margins to get the total number of unavailable spaces.
We have 2 gutters which are 32px each and will be calculated
32 x 2 = 64px
Then our margins are 11, 20px each and will be calculated
20 x 11 = 220px
Lets add the margins and gutters together.
64px + 220px = 284px.
284px = total number of unavailable space.

NOTE: 284px is the total area not available.

3) Available space: to determine the space available in our canvas, we will subtract the total number of unavailable spaces and the total space of our canvas to determine the total available space.
Total canvas space = 1440px
Unavailable space = 284px
1440px - 284px = 1156px.
our available space to work on is 1156px.

4) Number of columns: the number of columns is 12. to determine the space of each column, we need to use the available space of 1156px divided by 12 columns, and this can be calculated, as
1156px / 12 column = 96.3px

5) Number of columns + spacing(for our design we are using 3 columns(3 columns + spacing)): To determine the total size of the three columns we stated earlier, we will be using the size in each column which is 96.3px, multiplied by 3, plus the number of our margin, 20px multiplied by 2.
Let us do the math.
Total size of 3 column: 96.3px x 3 = 288.9px
Total size of 2 margin: 20px x 2 = 40px
288.9px + 40px = 328.9px

NOTE: we will have to round this up to get an absolute figure, so approximately 328.9px will be 329px. 329px will be the size of each frame box on the grid section of our UI design.

Now we have the size of our columns, let us implement it to our simple UI grid and see how responsive our grid will be. Hit F on your keyboard, and let's create several frames with a width of 329px in our desktop canvas. You can align them like this below.

Please select all the frames, go to the constraint on the right-side panel, Hold down shift-click the right and left buttons, so we have both right and left selected. To understand Figma constraints better and how it works, you can visit my article on FIGMA CONSTRAINTS: A QUICK, STEP-BY-GUIDE TO CREATING AN ADAPTIVE LAYOUT USING CONSTRAINTS IN FIGMA.

Add images to each of the frame boxes, and this will help us test how responsive the added images will be and our grid.

NOTE: all images are all gotten from Unsplash

https://unsplash.com/s/photos/fashion

Conclusion

Try to resize our grid. I believe it is very responsive and scalable. We have now reached the end of this tutorial. You have learned how to use constraints, create responsive Frames, calculate grid settings, and understand how the mechanics work behind the responsive layout and the responsive grid layout. If you did not follow along this tutorial, click on the DESIGN, where you can test the final result.

FIGMA CONSTRAINTS: A QUICK, STEP-BY-STEP GUIDE TO CREATING AN ADAPTIVE LAYOUT USING CONSTRAINTS IN FIGMA.

Joshua Dimkpa — Wed, 29 Jun 2022 11:38:48 +0000

Constraints in Figma tells Figma how layers should respond when you resize their frames. This should help you control how designs look across different screen sizes and devices.
In this tutorial, we will learn how to use simple tools to design our UI, create responsive and adaptive layout using constraints, design simple icons and make sticky navigation bar.
Before we get practical, let's talk more about how constraints work.

How Does It Work

constraints work Horizontally and vertically. You can apply constraints along the X (horizontal) and Y (Vertical) axis.

Horizontal
The horizontal constraints are defined by how a layer should behave as you resize the frame along the x-axis.

Left: maintains the positions of the layer relative to the left side of the frame.
Right: maintains the positions of the layer relative to the right side of the frame.
Left and Right: this will maintain the layer size and position relative to both sides of the frame, and may cause layers to grow or shrink along the x-axis when resized.
Centre: maintains the position of the layer, relative to the horizontal center of the frame.
Scale: will define the size and position of the layer as a percentage of the dimension of the frame and will then maintain those proportions as you resize it.

Vertical
The vertical constraints define how a layer should behave as you resize the frame along the Y-axis.

Top: Maintains the positions of the layer relative to the top of the frame.
Bottom: maintains the positions of the layer relative to the bottom of the frame.
Top and Bottom: Maintains the layer size and positions relative to the top and bottom of the frame. It May cause layers to grow or shrink along the Y-axis when resized.
Scale: Will define the layer size and position as a percentage of the frame dimension, it will then maintain those proportions as you resize it.

NOTE: Depending on the positions of the layer, more than one constraint may achieve the same result.

How to apply constraints to a layer

You can apply constraints to any layer within a frame, it will not be possible to use constraints on layers outside of a frame or layers in an auto-layout frame.

You can also apply constraints to the frame you have nested within other frames.
Constraints can be applied to layers horizontally and vertically.
You can use constraints to define how layers should respond in scrolling prototypes.
You can not apply constraints to groups, a group will inherit its bounds from the layers contained within it, and the group is considered a single layer with bounds.

NOTE: If you apply constraints to a group, Figma applies constraints to the individual layers or elements inside the group.

Let us set the constraints for a layer.
1) Select the layer or parent within the frame, the blue dotted line on the canvas shows which constraints are currently applied
2) Adjust the vertical and horizontal constraints in the constraints settings in the properties panel.

Use the drop-down menu to set the layers constraints or click on the lines in the interactive diagram to select a constraint 3) If you want the layer to stay in the same position, even when scrolling, check the box next to FIX POSITION WHEN SCROLLING

TIP: Hold SHIFT to select or apply more than one constraint. For instance, left and right constraints.

Sometimes you may want to resize a frame or layer without using the constraints applied to a layer by holding down a modifier key;

MAC: Press down COMMAND when you resize
WINDOWS: Press down CTRL when you resize

Constraints and layout grids

Constraints give you a primary framework for positioning layers within a frame. When it comes to more complex designs, we need more precise control and flexibility, Constraints ensure how our designs behave when resized. That’s where grids come into play when you use a grid within a frame, Figma aligns any layers within the frame to that grid.

Now lets get practical.

STEP 1

Let us design this UI below.

Background Image: Unsplash, https://unsplash.com/photos/bTxMLuJOff4
Font: Roboto, H1 Font size: 96 bold, H2 40 regular.
Icon color : 5DCB90.
Font color: FFFFFF.

Working with constraints is a crucial part of our workflow. as we design for several screens, elements, groups, and components need to be flexible enough to react to any content or screen change, so we can select a frame and switch between landscape and portrait.

Components are always left and top by default, and when you try to resize your components, they do not resize proportionately, This is why we need to change the constraints of each element, from the default top and left to center and top because we want all components centered.

STEP 2

Be sure all elements and groups constraints are assigned to the top and center from the icon group to the navigation group, except for the background, which will be set to top and left and right holding shift or selecting from the drop-down on the constraints panel.

Now try switching from landscape to portrait, I believe our layers are adaptive already, and yes, it is that simple.

It is nice we can change from landscape to portrait, Yet not all components can resize to an extent. For example, our navigation menu, and contents are too many to fit in smaller devices such as phones.

STEP 3

Let us create our first mobile screen. Press F on your keyboard, Go to phone, select the iPhone x

NOTE: When designing mobile screens use a layout grid, which will help in snapping items to the proper position.

In this case, set the layout grid to 8

Copy and paste all contents from the web screen to mobile. Elements should be too big for our mobile screen, we will need to resize all components one after the other to fit the screen of our mobile screen.

Let’s resize our background image, resize it to fit the screen of the iPhone x frame, and set the height of the background to be 752dp, Next is our text. Press K on the keyboard to change to scale(this helps to resize a component proportionately, and resize out text with a space of 16dp from the left and right.

Select all elements, including the background, group them and call it HERO. for the icons, they will not fit as they are longer and bigger. So we will have to split them into two groups, select the first, 4, and group and the next 4 do the same still inside the original group called logos, stack them on each other with a distance of 40dp, the logo group should be 40dp distance from the bottom of the background.

Move text and watch button 40dp upwards from the logos, and make sure all elements are centered.

NOTE: the play button we have on the web will not be needed on the mobile, as this should be on a hover state which we do not have on our mobile screen. Hide it by clicking the eye icon on the layer panel.

STEP 4

Creating a mobile navigation bar
At the top, away from our hero group on the layer panel, we should create a sticky mobile navigation bar, using the rectangle tool to create a height of 60dp and width of 375dp, and this will span from left to right of our iPhone x screen. Change our color to black with 70% opacity, and add an effect of a background blur of 40%.

This menu will be handled differently, as it is not a native app, so we will not have it at the bottom, it's best we use the hamburger menu since our navigations are many.

To create the hamburger menu, Draw a simple rectangle with a width of 30dp, and make the height 2dp with a corner radius of 1dp, duplicate this with a distance of 8 between, make it a group, and name it a hamburger, make the top and bottom 24dp and move it 16dp from the left inside the rectangle.

TIP: one cool feature in Figma, you can color group elements placed in a group.

So select the group and add color to it.

Let's create our light and dark mode icon, grab our ellipse tool make a perfect circle holding SHIFT, 24dp height and width, duplicate the Circle with a distance of 12dp, select both and go to our boolean select subtract selection. Make the color the same as the hamburger icon, and move it 16dp from the right and center horizontally.

Select all the three components created, group them and name the group MENU, set the constraints of the hamburger to top and left, and the moon icon to top and right. for our rectangle, it should be set to top, double select left and right holding shift for its adaptiveness. The navigation should be made fixed by clicking on the dialogue box below, which states FIXED POSITION WHEN SCROLLING before this will work, make sure the height of the frame is longer than the screen, then set the height to 1500dp. You can test this out by clicking on presentation and then try scrolling.

NOTE: when you resize a text using a scale, it could add an extra decimal to the font size, it's best to change this to a whole number so your developers can understand better.

STEP 5

Designing for the smallest screen
For the smallest screen, we will be using the iPhone SE which has a width of 320dp. Duplicate our mobile screen, hit F on your keyboard, go to our design panel, click on the drop-down FRAME, and select iPhone SE.

We will need to make some adjustments as we did on our icons and text on the previous mobile screen. Every other thing remains the same aside from the logos and text.
For our logos, hold OPTION for MAC or ALT for WINDOWS resize from the side, this should affect both left and right simultaneously, make sure this has 16dp spacing left and right also scale or text down by hitting K on our keyboard using the scale, we should also have 16dp spacing on both left and right, remember to look at font size as scaling may add an extra decimal point to font size.

Conclusion

All our screens are fully adaptive to every screen size, We’ve now reached the end of this tutorial. You have been able to learn how to use constraints to make your layout adaptive, how to create simple icons like that of the hamburger and dark and light mode icon using the boolean tool, and learned how to make a sticky navigation bar. If you didn’t follow along with the tutorial, click on the DESIGN where you can test the final result.

Basic Concepts in Node.js

Joshua Dimkpa — Mon, 25 Oct 2021 14:10:42 +0000

A web application that is able to send in hundreds of requests by the second to a server that can only process one request at a time. In this article, we’ll cover the basic things you need to know about Node.JS, and why it has such an important role in today’s server side industry.

What is Node JS and why should you use it.

Node JS is an open-source JavaScript based server side programming platform built on Chromes V8 JavaScript engine, which means that the engine that compiles JavaScript in a web browser is also the engine that runs Node.Js in its core, which is why it is so fast, especially for the web applications.
Netflix, Uber, LinkedIn, and Paypal all use the Node.Js as a serverside platform to build modern, and dependable web applications. Its event driven architecture is ideal for applications with high I/O (inputs and outputs) because of its single thread characteristics combined with a multi thread platform that runs in the background, allowing it to serve more clients with less hardware, resulting in higher performance at lower costs.

Features of Node.JS

The following are some very important features that makes Node.js the first choice of software architects, that gives it it's advantage above other technologies for the purpose of back-end web app development.

Non-Blocking I/O

The non-blocking method takes an input and asynchronously returns an output. In other words, it allows a server to receive numerous requests without causing the application to be blocked while the response is processed in the background.

Single Thread

With its single thread feature, Node.js can handle several events at the same time by delegating asynchronous operations to a multi thread platform, allowing only one thread to handle inputs and outputs.

This feature makes it lightweight, and efficient by requiring little memory and infrastructure to handle numerous queries.

Event-Driven.

Node.js is an event-driven technology, which means that events control the server-side platform's control flow. As a result, when a Node application starts, an event listener named Event Loop starts waiting for events and doesn't do anything until it receives them.

Alternatively, it's the equivalent of having a super-efficient waiter taking orders until the restaurant closes.

Event-based Node.js

Node Package Manager (version 2.4) is a tool for managing nodes in a network.
The world's largest free and open source collection of functions, Node Package Manager, may be readily imported and used in any Node application. All of this means that Node Package Manager will have any tools an application requires.

Buffering isn't Necessary

Node.js apps don't buffer data, which cuts down on the time it takes to upload large media like videos or audios. Which alternatively means, it just outputs data in pieces.
A user can, for example, watch videos without being interrupted.

Scalability is a core Node characteristic, as it has a high capacity for handling large amounts of requests asynchronously with low infrastructure thanks to its architecture, which runs on a single thread combined with a multi thread platform, allowing it to receive thousands of events at the same time.

Node.js Architecture

The architecture of Node.js is made up of three core components that work together like an event processing factory. So, to make it easier to grasp how these pieces interact with one another, I'll show you an example of a Node.js REST API.

Let's imagine a client sends this application multiple requests.

Event Queue

As soon as these requests arrive to the program, they are sent to the Event Queue, which is a queue where all the application's events are placed initially, and where they wait to be sent to the main thread, the Event Loop, to be processed.

Event Loop 2

When a request (Blocking Operation) hits the Event Loop, which is a single thread platform that uses the V8 Engine to compile JavaScript at its core, it is delegated to the Thread Pool platform to be processed in the background. As a result of this architectural flow, the main thread is free to process other events once again.

Thread pool

The request (Blocking Operation) is handled asynchronously in the background until it's done and ready to be returned to the Thread Pool, which is a multi-thread platform that runs a library called libuv and has C++ at its core.

Conclusion

Node.js has grown in popularity and is now being used and fully utilized by numerous enterprises and startups.
In today's hyper-connected world, a technology that can scale quickly while requiring minimal infrastructure is undoubtedly a key player to watch.
With this article, I hope you have a better knowledge of how Node.js works.