How to Design UI Social Solution Card in Adobe XD

Adobe Xd UI Design:

Design a beautiful UI social solution card landing page for your portfolio or banner in adobe xd in a very simple and easiest way there is no experience required to design it.

Watch Video Tutorial

https://youtu.be/lW9cSTjHxQk

OR

First, create a new template in choose a web template 1920 x 1080

In the second step to creating a shape by using a pen tool like this

Transform:

(W 998, H 1464, X 960, Y -159) set this according to your shape

Appearance: 

Opacity 100%

Blend Mode Normal 

Fill linear-gradient left point color should be #455A64 and the right point, color should be #232D32 opacity 100% for both colors

Shadow (#000000, 16%,  X -25, Y 20, B 6)

Now create a circle and set the properties

Transform:

(W 696, H 696, X 721, Y 589)

Appearance: 

Opacity 60%

Blend Mode Normal 

Fill linear-gradient left point color should be #263238 and the right point, color should be #6E767A opacity 100% for both colors

Shadow (#000000, 16%,  X -25, Y 3, B 6)

Then import an illustration art design and set it

Transform:

(W 1072, H 980, X 844, Y 98)

Appearance: 

Opacity 100%

Blend Mode Normal

You can choose any illustration art design in it. 

Now select a text tool and type "S"

Text will be (font mistral, size 403 regular, AV 50, line-height 491)

Transform:

(W 139, H 491, X 107, Y 217)

Appearance: 

Opacity 100%

Blend Mode Normal

Fill color should be #FFC727 opacity 100%

Text:

Font mistral

Size 403 regular

Align left

AV 50

Line-Height 491

Then select a text tool and type the remaining "part of the word"

Text will be (font mistral, size 403 regular, AV 50, line-height 491)

Transform:

Set it according to the letter "S"

Appearance: 

Opacity 100%

Blend Mode Normal

Fill color should be #455A64 opacity 100%

Text:

Font mistral

Size 206 regular

Align left

AV 50

Line-Height 251

For Button select a rectangle tool and create a shape

Transform:

(W 331, H 87, X 107, Y 802)

Appearance: 

Opacity 100%

Blend Mode Darken

Corner Radius 44 

Fill linear-gradient left point color should be #263238 and the right point, color should be #6E767A opacity 100% for both colors

All is done, congratulations you have successfully created a UI design.

Convert Adobe XD UI Design to HTML

illustration Designed by stories / Freepik