I am a Full stack .NET Developer, I like to work with C#, Asp.Net Core, SQL, Mongo DB, Azure, JavaScript...
Always eager to learn new technologies. I am here to share, ask & eventually learn.
Nice, 😄 I am web developer, but not that good creating nice looking UI , So how can I start learning ? Or What is the process to convert a PSD or figma design to actual HTML template ? Also How can I get design ideas and inspirations ?
As far as I know, there is no short cut. We need to carefully write HTML & CSS. But I can say, divide the work into different phases. Something like this,
Customise the component library according to design and import the same wherever needed.
Identify the color/gradient patterns and extract them as constants.
Check with the designer if he/she has used 12 or 6 column layout.
Learning a design tool superficially also might be helpful to walk in their foot steps. This shouldn't take more than 3 hours according to me.
Map the design tool properties to css nomenclature. This is important.
And most of them I have listed in the above post.
For the design ideas, though I am not a designer, there are sites like figmaresources.com. iOS also provides the basic templates for the design on their site.
Hope that gave a bit more detail. Thanks for the comment!
Indeed there is no shortcut to just import your design file somewhere and then perfect html/css comes out. This is mostly because they are different stacks. The design stack and the web stack are not that compatible.
There are tools, though, for example Desech Studio, where you import the figma, adobexd or sketch file, and then you do some adjustments and you will have proper working html/css. Then you can focus on the responsiveness of the website.
But my advice is to first learn a bit of html/css to understand the web stack better. There are a lot of free html/css tutorials on youtube.
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
Nice, 😄 I am web developer, but not that good creating nice looking UI , So how can I start learning ? Or What is the process to convert a
PSDor figma design to actualHTMLtemplate ? Also How can I get design ideas and inspirations ?As far as I know, there is no short cut. We need to carefully write HTML & CSS. But I can say, divide the work into different phases. Something like this,
For the design ideas, though I am not a designer, there are sites like figmaresources.com. iOS also provides the basic templates for the design on their site.
Hope that gave a bit more detail. Thanks for the comment!
Indeed there is no shortcut to just import your design file somewhere and then perfect html/css comes out. This is mostly because they are different stacks. The design stack and the web stack are not that compatible.
There are tools, though, for example Desech Studio, where you import the figma, adobexd or sketch file, and then you do some adjustments and you will have proper working html/css. Then you can focus on the responsiveness of the website.
But my advice is to first learn a bit of html/css to understand the web stack better. There are a lot of free html/css tutorials on youtube.