10%

Try : Insurtech, Application Development

Edtech(5)

Events(34)

Interviews(10)

Life@mantra(11)

Logistics(1)

Strategy(14)

Testing(8)

Android(45)

Backend(29)

Dev Ops(2)

Enterprise Solution(22)

Frontend(28)

iOS(40)

Javascript(13)

Augmented Reality(17)

Customer Journey(12)

Design(13)

User Experience(34)

AI in Insurance(31)

Insurtech(59)

Product Innovation(37)

Solutions(15)

E-health(3)

HealthTech(8)

mHealth(3)

Telehealth Care(1)

Telemedicine(1)

Artificial Intelligence(109)

Bitcoin(7)

Blockchain(18)

Cognitive Computing(7)

Computer Vision(8)

Data Science(14)

FinTech(44)

Intelligent Automation(26)

Machine Learning(46)

Natural Language Processing(13)

6 Features that Make Adobe XD the Ultimate Tool to Achieve Precision in Designing

6 minutes read

“A good first impression can work wonders” ~ J. K. Rowling.

When a user interacts with any digital product, the first thing that hooks him to an application is user interface (UI). And how well a UI is designed can shape the user experience (UX). Designers have a huge responsibility of creating a design that is simple and appealing to the users. Which is why they need a tool that speeds up their process with precision. One of the most popular amongst the designers is undoubtedly – Adobe XD the ultimate tool that has been assisting them achieve excellency in designing.

First released in 2016, Adobe XD has become the primary tool for about 40% of designers in the last few years helping them achieve speed and accuracy in UI design, prototyping, and managing design systems. In addition to being one of the leading UX design tools, Adobe Experience Design (XD) is a top-notch interface design platform with a host of capabilities that enable designers to create, share, develop, and collaborate on their designs. Adobe XD also allows designers to create prototype interactions and transitions between art-boards with ease.

Here are 6 features that make Adobe XD the ultimate tool to achieve precision in designing:

Adobe XD the Ultimate Tool
  1. Repeat Grid

With the group or element selected, click on “Repeat Grid” (⌘ r) and drag the green handles horizontally or vertically to make a grid. You will be able to hover and drag over spaces between the elements to adjust the spacing. 

All  groups within the grid are going to be automatically updated when you make a change in one group.

💡 Tip: Ungroup the grid to make changes independent to main element or group

Adobe XD the Ultimate Tool

Repeat grid can produce different results based on grid attributes while the basic unit remains the same.

  1. Components & States

Right-click on the group or element and select “Make Component” (⌘ k). Every component has a main component with various instances which you can use across the design. When changing the main component, the changes propagate to all of its instances.

Components can also have multiple states that respond to different inputs – default state, hover state and new state. 

Features of Adobe XD

Creating a component is important for designers to identify the variations of an element

Adobe XD the Ultimate Tool

By using design components, we can avoid inconsistency in our designs

By editing main components, you can instantly update style changes to all elements within that component – a handy shortcut for making quick style changes. 

  1. Libraries

Using the new Libraries panel (⇧⌘Y), you can now save colors, character styles, and components from your art-boards as document assets.  When you’re ready to share, open the library manager by clicking the share icon in the top right corner of the panel. By clicking the blue publish button in the manager, you can publish your document assets as a library to share and use as a team.

💡 Tip: Documents must be saved as cloud documents to publish a library

Libraries

Give editors of your documents access to edit the library

After publishing a library, you can continue to make changes in your XD document, and update the changes once you’re ready. 

XD will notify you when you have new updates to share. You can publish immediately or later from the Library Manager. 

Adobe XD the Ultimate Tool

You can dismiss the message, if you are not ready to share

Adobe XD the Ultimate Tool

To incorporate multiple updates at once, click the update all button.

  1. 3D Transforms

Using the property-panel, we can enable 3D transformation to simulate the 3D effect on any individual element or a group 

After enabling 3D transformations, new object controls will appear in the transform section and Gizmo at the center of the selected object.

3D Transforms

Create perspective design easily with 3D transforms

  1. Content Aware Layout

With the elements selected, create a group. Tap the switches to enable Content-Aware Layout controls. Stacks will align and distribute objects vertically or horizontally while padding will adapt background layers and preserve values. This will automatically make layout changes as your designs change.

💡 Tip:  Using layout on component saves the most amount of time

Adobe XD the Ultimate Tool

Whatever padding values you choose will be retained even if the content inside changes.

  1. Video & Lottie Playback

When designing in XD, you can now include videos and Lottie animations that will play when you preview your XD prototypes and share a link to your prototype from XD. You can use the drag-and-drop feature from your computer to place files on the artboards or you can import videos from your design system into the Creative Cloud Libraries. After it is imported, you can customize the media’s behavior, such as setting animations to loop or configuring when a video or animation will play (automatically, on tap, etc.). 

Adobe XD the Ultimate Tool

Add .json files to create real time prototypes and designs

You can also upload unique thumbnail images and trim videos to the appropriate length using basic editing tools.

Features of Adobe XD

Control the playback of videos, adjust basic video settings, and import videos.

Now that you’ve come so far

Here’s an easter egg for you. Another simple feature that’s commonly overlooked is the built-in number functionality for adjusting the opacity of elements. Either press eg. 4 for 40%, or 6 followed by 7 for 67%.

Adobe XD the Ultimate Tool

Control the transparency of any object

That’s all for now.

Hope this article helps you and you have learned something useful!

About the Author:

Unnathi is a UI/UX designer, currently working at Mantra Labs. She is passionate about research and has expertise in building digital systems that provide engaging experiences.

Want to know more about designing?

Read our latest blog: How to Sell UX Research to Your Clients?

Cancel

Knowledge thats worth delivered in your inbox

Implementing a Clean Architecture with Nest.JS

4 minutes read

This article is for enthusiasts who strive to write clean, scalable, and more importantly refactorable code. It will give an idea about how Nest.JS can help us write clean code and what underlying architecture it uses.

Implementing a clean architecture with Nest.JS will require us to first comprehend what this framework is and how it works.

What is Nest.JS?

Nest or Nest.JS is a framework for building efficient, scalable Node.js applications (server-side) built with TypeScript. It uses Express or Fastify and allows a level of abstraction to enable developers to use an ample amount of modules (third-party) within their code.

Let’s dig deeper into what is this clean architecture all about. 

Well, you all might have used or at least heard of MVC architecture. MVC stands for Model, View, Controller. The idea behind this is to separate our project structure into 3 different sections.

1. Model: It will contain the Object file which maps with Relation/Documents in the DB.

2. Controller: It is the request handler and is responsible for the business logic implementation and all the data manipulation.

3. View: This part will contain files that are concerned with the displaying of the data, either HTML files or some templating engine files.

To create a model, we need some kind of ORM/ODM tool/module/library to build it with. For instance, if you directly use the module, let’s say ‘sequelize’, and then use the same to implement login in your controller and make your core business logic dependent upon the ‘sequelize’. Now, down the line, let’s say after 10 years, there is a better tool in the market that you want to use, but as soon as you replace sequelize with it, you will have to change lots of lines of code to prevent it from breaking. Also, you’ll have to test all the features once again to check if it’s deployed successfully or not which may waste valuable time and resource as well. To overcome this challenge, we can use the last principle of SOLID which is the Dependency Inversion Principle, and a technique called dependency injection to avoid such a mess.

Still confused? Let me explain in detail.

So, what Dependency Inversion Principle says in simple words is, you create your core business logic and then build dependency around it. In other words, free your core logic and business rules from any kind of dependency and modify the outer layers in such a way that they are dependent on your core logic instead of your logic dependent on this. That’s what clean architecture is. It takes out the dependency from your core business logic and builds the system around it in such a way that they seem to be dependent on it rather than it being dependent on them.

Let’s try to understand this with the below diagram.

Source: Clean Architecture Cone 

You can see that we have divided our architecture into 4 layers:

1. Entities: At its core, entities are the models(Enterprise rules) that define your enterprise rules and tell what the application is about. This layer will hardly change over time and is usually abstract and not accessible directly. For eg., every application has a ‘user’. What all fields the user should store, their types, and relations with other entities will comprise an Entity.

2. Use cases: It tells us how can we implement the enterprise rules. Let’s take the example of the user again. Now we know what data to be operated upon, the use case tells us how to operate upon this data, like the user will have a password that needs to be encrypted, the user needs to be created, and the password can be changed at any given point of time, etc.

3. Controllers/Gateways: These are channels that help us to implement the use cases using external tools and libraries using dependency injection.

4. External Tools: All the tools and libraries we use to build our logic will come under this layer eg. ORM, Emailer, Encryption, etc.

The tools we use will be depending upon how we channel them to use cases and in turn, use cases will depend upon the entities which is the core of our business. This way we have inverted the dependency from outwards to inwards. That’s what the Dependency Inversion Principal of SOLID implies.

Okay, by now, you got the gist of Nest.JS and understood how clean architecture works. Now the question arises, how these two are related?  

Let’s try to understand what are the 3 building blocks of Nest.JS and what each of them does.

  1. Modules: Nest.JS is structured in such a way that we can treat each feature as a module. For eg., anything which is linked with the User such as models, controllers, DTOs, interfaces, etc., can be separated as a module. A module has a controller and a bunch of providers which are injectible functionalities like services, orm, emailer, etc.
  1. Controllers: Controllers in Nest.JS are interfaces between the network and your logic. They are used to handle requests and return responses to the client side of the application (for example, call to the API).
  1. Providers (Services): Providers are injectable services/functionalities which we can inject into controllers and other providers to provide flexibility and extra functionality. They abstract any form of complexity and logic.

To summarize,

  • We have controllers that act as interfaces (3rd layer of clean architecture)
  • We have providers which can be injected to provide functionality (4th layer of clean architecture: DB, Devices, etc.)
  • We can also create services and repositories to define our use case (2nd Layer)
  • We can define our entities using DB providers (1st Layer)

Conclusion:

Nest.JS is a powerful Node.JS framework and the most well-known typescript available today. Now that you’ve got the lowdown on this framework, you must be wondering if we can use it to build a project structure with a clean architecture. Well, the answer is -Yes! Absolutely. How? I’ll explain in the next series of this article. 

Till then, Stay tuned!

About the Author:

Junaid Bhat is currently working as a Tech Lead in Mantra Labs. He is a tech enthusiast striving to become a better engineer every day by following industry standards and aligned towards a more structured approach to problem-solving. 


Read our latest blog: Golang-Beego Framework and its Applications

Cancel

Knowledge thats worth delivered in your inbox

Loading More Posts ...
Go Top