photo 1626785774573 4b799315345d

Adobe XD Plugins That Designers & Developers Should Know in 2022

As a designer you’re expected to deliver designs fast and that comes with it’s own challenges when you have to do everything from scratch. But worry no more because, you have a huge range of plugins at your disposal to speed up the design process.

When designing in Adobe XD, plugins can play an important role in increasing your overall productivity and efficiency when designing a websites or apps. In this article we have curated list of some of the best Adobe XD plugins in the market.

Here you go…

Best Adobe XD Plugins

UI Faces

UI Faces plugin is a great tool that aggregates hundreds of thousands of avatars to choose from that can be used for your design mockups.

It lets you add attributes to your selected avatar such as age, gender, emotion, and hair color. It makes the task of finding photos easier, which saves time.

Lorem Ipsum

Lorem Ipsum is a pretty handy tool for generating random text for your layouts. If you are designing a mockup and you run out of texts to place, it generates texts for your design.

Lorem Ipsum provides a long list of dummy texts to choose from. It’s very easy to use and a big time saver.

Rename It

Rename It as the name suggests is a renaming tool that helps you in renaming layers and artboards.

You can either rename every layer with the same name or you can rename each layer with different names as per your requirements.

This plugin plays an important role in keeping your layers tidy and things organized.

Confetti

With Confetti, you can generate absolutely gorgeous confetti patterns in a click. It even allows you to design your own confetti.

You can make the most out of this plugin by creating beautiful confetti for your design.

Userlytics

Userlytics is a user testing platform that lets you configure and create user experience tests within your XD prototype.

It provides you tools to get feedbacks from your target personas and interact with them

Artboard Plus

Artboard Plus is a great plugin that helps you speed up your workflow in XD. This tool lets you rearrange artboards into grid, you can also sort the artboard by name or create it around selection.

It also provides you to sort artboards in ascending or descending order by name in the layer list.

Trello

The Trello plugin allows you to integrate your XD designs with Trello to help you collaborate with your team and keep everything organized.

The plugin lets you send your design assets to Trello for later reference. You can also share artboards and layers with your team on Trello.

Photo Splash 2

Photo Splash offers you thousands of photos to use in your design, plus it also targets specific photo needs as per your designs.

Added features let you select the quality of the images and any screen size you want. It’s truly a one-stop destination for finding stock photos.

unDraw

unDraw is another good plugin that lets you bring beautiful illustrations right inside Adobe XD, without attribution.

One of the best features is that you can modify every colour of the illustrations you use. Also, it needs no sign-up, you can just browse and download.

Vizzy Charts

With Vizzy Charts, you can generate charts using real data within your design project. You can choose a chart from a variety of charts from their menu.

To create charts, you can either use the default setting or you have the option to tweak colors, sizes, and spacing.

Google Sheets

With the Google Sheets plugin you can improve your designs with insightful data and visualizations.

It provides easy collaboration with your team and also lets you open a chat window in the document you’re working on. That way you can edit or review what your team members are working on.

Stark

Stark is good accessibility plugin to help you make your designs more accessible, which is a very important aspect of designing.

Stark plugin provides features checking your design accessibility in regards to color blindness, contrast checker, and color suggestions.

Color Ranger

Color Ranger lets you customize the appearance of your design with light or dark themes, or creating one however you need.

You can adapt the brightness, saturation, hue, color depth, and opacity of your overall design or an individual element to see what color scheme looks good. New features include advances filtering, live changes, and more.

Yotako

Yotako is a plugin that converts your designs into apps and websites. You just have to import your design into the plugin and it converts it using swift and Objective-C for iOS, HTML/CSS for the web, and Android for android.

You can also have a repository under GitHub or Bitbucket, and even if you do not want to use the external provider. Yotako lets you download the zip file containing everything.

Although it does a decent job in design conversion, but it’s always recommend to get your Adobe XD designs converted to code by hiring a developer.

Dribbble

Dribbble is a leading community for designers to showcase their creativity. You can use this plugin to post your design shots directly from within Adobe XD to the Dribbble website.

You can also browse through shots posted by other creators and use them for your design inspiration.

Icondrop

With Icondrop, you get thousands of icons and illustrations for your design in XD. If you don’t find a resource that fits your need, they custom design as per your requirements at a reasonable price.

You can also choose from a list of designers and photographers and access their designs.

Cloud App

CloudApp is an absolute must for designers working in a team. It lets designers share their artboards and assets through screenshots to get feedback or reviews from their team.

You can even make a quick CloudApp video to make your point instead of lengthy emails and meetings. This plugin makes the collaboration between you and your team really easy.

Mockplus iDoc

Mockplus iDoc is a one-stop tool for faster product design collaboration. You can directly export your design file to this plugin for further enhancement.

Mockplus iDoc is a very efficient tool in generating specs, assets, and code snippets automatically. Other features include feedback to team members, measuring design elements, and more.

Web Export

Web Export lets you export your design to HTML and CSS with support for common web frameworks.

With Web Export, you can add styles and classes, align to all edges and corners, convert text into shapes and images and vice verse, convert images into vector graphics, and do much more.

Angle

Angle has got you covered with hundreds of vector and 3D device mockups with a variety of colors and styles. You can even place your screen into perspective mockups they have created.

They offer 50 free mockups to try and get the hold of their plugin before you switch to their paid offerings.

So, there you go!

That’s it from our side for now. You can check out these best Adobe XD plugins and pick out what’s best for your project and your design workflow.

If we missed any plugin that you like, feel free to share them with us in the comment section below.

 


2945044 scaled

Quick Guide on Choosing Artboard and Container Widths for Responsive Website Design

Users across the globe access websites from all sorts of different screen sizes. From small mobile phone screens of around 320px width to big 5k resolution screens. That makes it difficult for web designers to choose the right resolutions for their designing website UIs.

When designing websites in your favorite design tool like XD, Sketch or Figma, how do you choose the right artboard and container widths for different screen sizes? How to make the most optimum use of your time and create only that set of screen variations that would take care of most desktop, tablet and mobile screen sizes?

The most popular artboard width choice among them is 1920px for desktop designs, 768px for tablets and 375px for mobiles. Some even go to the extent to create more variations at 1024px, 1366px, 1440px etc to cover more screen sizes. With container widths, it’s all over the place, some prefer to do it 1170px, some 1200px, some do it at 1440px.

But are these the right sizes to choose? And how many variations should you create anyways? Let’s have a look…

Let’s First Define Artboards and Containers

When you’re designing website UIs using one of the UI/UX design tools like Adobe XD, Fimga, Sketch etc, you have to start with a blank white canvas or artboard where you do your designs. It’s called an Artboard in Adobe XD, Sketch & Photoshop and Frame in Figma. So when starting to design, that’s the first thing you need to create.

Now within that artboard, there’s a middle content part in websites that come within a fixed container. For most sites the different sections on a page may touch edges of the artboards like in case of full width background and sliders, but content usually stays with a particular container. That’s what we call as a Container.

To illustrate this, have a look at the our website’s homepage design below:

Here’ you’ll notice that the container is of lesser width compared to the artboard and we have some space on both sides of the container.

If you open our homepage on a desktop screen and zoom in and out, or open it on different desktop screens, you’ll notice that the container always remains the same width but the blank space around it changes with the different screen sizes.

So for designing websites, if we keep can find that ideal container width that would work across all popular screen sizes with still some space left on either sides of the screen, we’d have found that perfect container width that would be compatible with most desktop screen sizes across the globe.

Let’s look at what that container width should be and then we’ll look into what artboard size you should use.

Artboard and Container Widths for Large Screens (Desktops and Laptops)

To find our the most optimum artboard and container widths, we need to first know the screen resolutions that are most popular across the globe. According to StatCounter.com, here’s what we know about the desktop screen market (as of March, 2021):

Screen Size Global Usage North America Europe Asia Oceania
1920×1080 21.7% 20.79% 25.9% 20.02% 23.93%
1366×768 20.95% 16.19% 16.13% 26.4% 13.67%
1536×864 9.65% 7.67% 11.42% 10.53% 7.41%
1440×900 6.65% 8.72% 6.79% 4.83% 11.8%
1280×720 5.4% 4.64% 5.06% 6.63% 6.93%
1600×900 3.72% 3.76% 3.91% 3.42%
Desktop screen size usage across the world

Let’s Start With Finding The Optimum Container Width for Large Screens

From the table above, we can see that all the popular screen sizes in the market are at 1280px width or above that. That means if we can keep our content container size below that, we’ll be able to cover all major desktop and laptop screens in the market available right now globally.

That gives us an ideal container width of around 1200px width. At 1200px width, even on the lowest screen size of 1280px we still have white space of 40px left on both sides, so that works really well for desktops and laptops and that’s we also recommend to our clients. You can either use 1200px or anything below that and that should fine across all large screens.

And you don’t need to take my word for it. Have a look at what the following popular brands are using:

  • Microsoft suggests 1008px and higher as desktop container width.
  • Twitter’s Bootstrap, which is the most popular CSS framework in the market, has been using default container size of 1170px till version 4.
  • Foundation CSS framework, which is the 2nd most popular CSS framework, uses 1200px as it’s default max container width for rows.
  • Semantic UI framework, which is again a very popular CSS framework, uses 1127px as it’s default max container width for rows.
  • Popular page builders like Beaver Builder uses 1100px, Elementor uses 1140px and Divi builder uses 1180px as their default container widths.
  • Talking about popular WordPress themes, Divi theme uses 1080px, Astra, OceanWP and Avada use 1200px and Genesis uses 1040px as their default container widths.
  • Kinsta and WPEngine, providers of premium WordPress hosting services, use a max container width of 1200px.
  • Even WordPress’s official website uses container width of 960px!

From all these examples you can see that all of them use container widths of either 1200px or lower for desktops and laptop screens. So with that said, you can easily conclude that going with the 1200px container width would be the right choice for your next website design project that would work well on all major screens in the market.

Most Optimum Artboard Width for Large Screens

With container width out of the way, choosing the artboard width becomes very easy. You can keep the artboard size pretty much anything that you want as long as it’s wider than the container width and you have some space left on either sides of the container.

You can use any width among the popular screen resolutions: 1280px, 1366px, 1440px, 1536px, 1600px or 1920px. At our agency, we recommend our clients to use artboard width of 1440px. But it does not really matter what you use, as long as your container fits in well within the artboard with some space left on both sides.

Artboard and Container Widths for Smaller Screens: Tablets & Mobiles

For tablets and mobile devices, it is easier to choose artboard and container widths as you have only a limited number of popular screen sizes globally. In most cases the artboard width you’ll be using would be same as the width of the device that your users usually use.

Regarding container width, sites on tablets and mobiles are usually designed to stretch and touch both ends of the screen. So if we keep a padding of 15px or 20px on either sides within the artboard, you will have your container ready!

Let’s look at what artboard size you should keep for tablet design. Here are the most popular tablet screen resolutions globally (as of March, 2021) according to StatsCounter.com:

Screen Size Global Usage
768×1024 43.59%
1280×800 7.22%
800×1280 5.67%
601×962 4.98%
810×1080 3.65%
962×601 3.57%
Tablet screen size usage across the world

From these stats it’s pretty clear that 768px width screens are the most popular ones. So you can keep the artboard width for your tablet designs at 768px and you’ll be good to go. So for tablets, we recommend you to keep 768px as artboard width and for container width, just add some padding of 20px on each side to make it 728px.

For mobile phones, here are the most popular mobile screen resolutions globally (as of March, 2021) according to StatsCounter:

Screen Size Global Usage
360×640 11.26%
414×896 7.84%
375×667 6.02%
360×780 5.94%
360×760 5.13%
375×812 5.02%
Mobile screen size usage across the world

Looking at these stats, we notice that there are only 3 screen widths that are most popular: 360px, 375px and 414px. There’s no big difference among these sizes and no matter which size you choose among these the designs would look almost identical in each of them.

We would recommend you to use 360px as artboard size for your mobile designs because that’s the most popular width compared to others. But even if you choose any of the other two widths, that should still be ok.

Regarding container size, like tablet screens you can keep padding on both sides at around 20px to make the container width 320px and that should work well for most mobile devices.

Conclusion

I tried to keep this article short and to the point. By looking at the most popular screen sizes for desktop, tablets and mobile devices globally, we can figure out the artboard and container widths to use for designing website UIs.

I recommend designing only 3 variations, one each for desktop, tablet and mobile screens at the following artboard and container widths:

Device Artboard Width Content Container Width
Large Screens (Desktops and Laptops) 1440px 1200px
Tablets 768px 728px
Mobiles 360px 320px
Our recommended artboard and container widths

Designing only 3 variations and at these widths would be the most efficient use of your time and would cover every major screen size present in the market.

I hope you found this article useful. What do you think? Do you agree or disagree to these widths? If you have any comments or suggestions, feel free to leave a comment in the comment box below.

By Ram Shengale. Part of Fantastech.


download

11 Web Design Trends to Power Up Your Website in 2022

1. Dark mode

Dark mode, which was at that point a major pattern in 2020 on account of OLED screens, will turn out to be significantly more famous one year from now.

11 Web Design Trends to Power Up Your Website in 2021 Web Ark

It looks simple, nice and elegant at the present day. Telegram, Instagram, Twitter, Facebook and Apple are only a couple of examples of the large brands that offer elective topics on their foundation. If you are interested in more design solutions, check the iPhone mockup collection.

2. Human touch

Hand-drawn design elements bring emotion and humanity to websites, something that deep down users who are tired of technology crave.

11 Web Design Trends to Power Up Your Website in 2021 Web Ark

In fact, this rebellious trend is almost the opposite of pixel-perfect, so flaunt your ragged edges and exposed shapes to show how human and realistic your brand is.

3. Immersive 3D elements

Volumetric graphics have always fascinated people; it’s a trend that’s only been held back by technology and cost. Until virtual reality becomes more pervasive and cost-effective, hyper-realistic 3D imagery, which often spans the entire screen, is the best way to create an immersive experience on your site.

Thanks to advances in web technology and the constant refinement of their games, web designers are increasingly using 3D elements as VR/AR technologies gain momentum and add beauty and impact to 3D elements.

4. Delicate shadows, layers

Delicate shadows and drifting components make a pseudo-3D impact and make plans more layered and fascinating.

11 Web Design Trends to Power Up Your Website in 2021 Web Ark

This pattern expects to make profundity. It works with the image, yet additionally with text and photographs, and gives the plan a feeling of daintiness, as though the components were coasting on top of one another.

5. Mixing Photography with Graphics

Using real photographs mixed with illustrations or graphics really captures the spirit of the brand. The style of these visuals can influence how people interpret the photo – cartoon swirls are better used for something more playful, and geometric swirls for something more complex. High-quality photos already look great on their own, but adding cool graphics will really show off your creative flair.

6. Solid frames in a single colour space

Layouts with a full crop release have long been a trend in web design.

Designers are now gravitating towards solid structures and playing around with different ways of using lots of white space (and space of any colour, for that matter) to give their designs more structure and use clean framing, in order to give the design a sense of stability and solidity, order and neatness.

7. Light and neon

Futuristic full colours like blue, purple and bright pink give the design a sense of radiance for the future. Professionals use bold colour combinations to make web design literally jump off the screen. This trend is particularly evident in duochrome web design.

It blends perfectly with other uptrends like extreme minimalism and dark mode. And luminous colours can really shine.

8. Ultra minimalistic navigation

Website content gravitates towards more voice-scripted video and less text. Over the past few years, navigation has become easier to adapt to very small devices and even less attention span. Extremely minimalist navigation removes much of the difficulty in usability.

9. Frosted glass effect

Recent advances in web technology have made it easy to implement a frosted glass effect on websites. The blurred appearance of elements behind the frosted glass overlay helps add colour to the area, as well as allowing text or objects to appear in the image and remain legible.

11 Web Design Trends to Power Up Your Website in 2021 Web Ark

10. Photo art

The main idea is to dazzle customers and grab their attention by showing interesting and unrealistic elements. They make potential consumers use their imagination and stay on your website longer. In this way, you can increase your average session time and possibly increase your conversion rate.

11 Web Design Trends to Power Up Your Website in 2021 Web Ark

11. Realistic textures

After years of ethereal gradients and smooth isometric objects, textures are making a comeback. You can get users to reach out and touch textures by creating outlines and grains. However, try not to overdo it. You may end up diverting visitors’ attention to the wrapper rather than your brand.