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

[Aveeva]

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?

[amitsamsukha]

@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!

[Aveeva]

@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.

[amitsamsukha]

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

[Nishu Jindal]

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!