cancel
Showing results for 
Search instead for 
Did you mean: 

How to convert Adobe XD design to Magento 2 Custom Theme?

How to convert Adobe XD design to Magento 2 Custom Theme?

I have Adobe XD Design, how to apply as a custom theme, my parent theme Default, how to apply the files. I am using Magento Enterprise Edition. Any docs availabe?

4 REPLIES 4

Re: How to convert Adobe XD design to Magento 2 Custom Theme?

@Aveeva ,

you need to study about Magento Theme structure and create a new StoreFront Theme

you can follow the Doc from Magento.

https://devdocs.magento.com/guides/v2.4/frontend-dev-guide/themes/theme-create.html

 

then you need to study how to customize the less file for your design.

 

divide your XD design into as per the blocks in Magento and start implementation.

 

Problem solved? Click Kudos & Accept as Solution!

Re: How to convert Adobe XD design to Magento 2 Custom Theme?

@amitsamsukha 

I have worked on luma theme and some ready-made themes, now i working on the default theme which means no designing part, here i get Adobe XD, i need some basic idea for how to incorporate all the HTML, CSS, js to blank theme, there are no docs in online regard this.

I am creating a child theme from the parent theme (Default theme) how to incorporate the HTML, CSS, js files from Adobe XD i need some basic idea not everything.  

 

Anyway, let me study with your inputs.

Re: How to convert Adobe XD design to Magento 2 Custom Theme?

to create a new theme from Magento Blank you can follow these steps :

 

  • Create a new theme with Parent Magento/blank 
  • create static files and folders 
    app/design/<area>/EmizenTech/NewTheme/
    ├── web/
    │ ├── css/
    │ │ ├── source/ 
    │ ├── fonts/
    │ ├── images/
    │ ├── js/
  • Override Base/Module Layouts as per your design. 
    <theme_dir>
      |__/<Namespace_Module>
        |__/layout
          |__/override
             |__/base
               |--<layout1>.xml
               |--<layout2>.xml

Override Less/Add new "less" files for different pages or components  
ref :
create a theme
custom theme

Re: How to convert Adobe XD design to Magento 2 Custom Theme?

Hi @Aveeva ,

 

Can you check below link 

 

https://community.magento.com/t5/Magento-1-x-Theming-Layout/I-want-to-implement-Adobe-XD-design-on-M...

 

Hope this helps you!

Problem Solved! Click Kudos & Accept as Solution!