{"id":65,"date":"2019-01-29T13:24:59","date_gmt":"2019-01-29T12:24:59","guid":{"rendered":"https:\/\/sketch2react.wordpress.com\/2019\/01\/29\/myths-about-sketch2react\/"},"modified":"2020-06-18T07:42:37","modified_gmt":"2020-06-18T07:42:37","slug":"myths-about-sketch2react","status":"publish","type":"post","link":"https:\/\/sketch2react.io\/blog\/myths-about-sketch2react\/","title":{"rendered":"Myths about Sketch2React"},"content":{"rendered":"
\n


\n<\/figure>\n

https:\/\/link.medium.com\/LAZPea6SLW<\/a><\/p>\n

We \u2764\ufe0f\u00a0Medium<\/h3>\n

https:\/\/link.medium.com\/LAZPea6SLW<\/a><\/p>\n

Click above to purchase our very latest DLC bundle\u200a\u2014\u200ayou get a nice 25% discount ???\u2764\ufe0f?<\/p>\n

Myths about Sketch2React<\/h3>\n
\n

Prologue<\/em><\/strong><\/p><\/blockquote>\n

Dramatization of semi-true events (all sensitive data has been scrambled, things have been exaggerated for entertaining purposes)<\/em><\/h4>\n

\u2013 You know it happened again (J)<\/p>\n

\u2013 What happened? (F)<\/p>\n

\u2013 Got an email saying something like \u201dit does not work, I linked a 100 page Sketch file to your lousy ass \u201dCode App\u201d and [beep beep] it doesn\u2019t work yo bro\u201d<\/em> (J)<\/p>\n

\n


\n<\/figure>\n

\u2013 Did they really say exactly that? (F)<\/p>\n

\u2013 Of course not, but you know me, I love to exaggerate things. Life\u2019s to effing boring without a bit of spicing on the top. You know that\u2026 (J)<\/p>\n

\u2013 Oooookey\u2026 And? (F)<\/p>\n

\u2013 So anyway, I was thinking I should write an article about all these things, misconceptions you know, so that we don\u2019t need to get those emails anymore. But again, got me thinking\u2026 it doesn\u2019t matter how clear we explain things. Did you know I have written 29 articles<\/em> (this one is the 30th! \u26f1) about Sketch2React since June 2018?<\/p>\n

\u2013 I\u2019m like obsessed with it. Explaining, doing tutorials.<\/p>\n

\u2013 You know why? Cuz people don\u2019t read anymore. That\u2019s why! (J)<\/p>\n

\u2013 Hmmm okey.<\/em> (F)<\/p>\n

\u2013 But I\u2019ll write the piece anyway, it will be fun! (J)<\/p>\n

Above conversation actually took place, mostly inside my head, but also with Fredrik. In the real world.<\/em><\/p>\n

End of Prologue, let\u2019s load the real\u00a0article\u2026<\/strong><\/p><\/blockquote>\n

\n

? Real\u00a0Article<\/h3>\n

Here\u2019s a list of things that we have picked up during our alpha and beta programs since May 2018. Things that are easy to get wrong, misunderstand about our framework and code app. Important insights that we now share with you dear reader so you don\u2019t need to.<\/p>\n

\n
\n


\n<\/figure>\n

Myth Nr 1\u200a\u2014\u200aYour Sketch file will automatically be converted to\u00a0code<\/h3>\n

Truth: No way bro\u00a0?<\/h3>\n

If you are looking for a magical app, that with zero effort, converts your design thingies and layouts inside of Sketch, to real workable code\u200a\u2014\u200alook further. We are not interested in building a one-button-solution since that usually comes with way to many sacrifices regarding exporting your code.<\/p>\n

Biggest difference is that you do all of this in Sketch\u2019s Layer List, pretty effing amazeballs.<\/p><\/blockquote>\n

    \n
  1. You must name each layer in Sketch accordingly to our framework<\/a> and component<\/a> rules. Or you will see nada sip in our code app.<\/li>\n
  2. You must, by hand, as when coding, set up your grids that contains containers, rows, groups and columns. Biggest difference is that you do all of this in Sketch\u2019s Layer List, pretty effing amazeballs.<\/li>\n
  3. You must think more like a developer. That is actually a very good thing. You\u2019ll learn about HTML and CSS constraints in the meantime. All very good things that will give you a deeper understanding on how development works. You may actually develop more empathy. I apologize beforehand.<\/li>\n
  4. You\u2019re enhancing your layers and comps with real code. You can\u2019t cheat your way through this. There will be pain and frustrations ??? Maybe you realize that this is not for you. That is also okay ? We\u2019re glad you gave it a shot.<\/li>\n
  5. If all this sounds like ? start with these very short and simple Beginner Tutorials<\/a>. Download all of our demo files and ePubs and start learning some really amazing things. It gets better and easier- we promise ??<\/li>\n<\/ol>\n
    \n
    \n

    Nope.<\/figcaption><\/figure>\n

    Myth Nr 2 ? This is perfect for really<\/em> quick prototypes<\/h3>\n

    Truth: Depends on how you measure time and\u00a0effort<\/h3>\n

    I wrote this article a way back in time<\/a>. Now I\u2019m taking it all back. Ha!<\/p>\n

    The article is about how to use our framework for what we call Quick Responsive Prototyping<\/strong>. Maybe I was a bit overly optimistic (a non-treatable condition I have). Sorry.<\/em><\/p>\n

    You still need to put in the extra hours here. If you\u2019re looking for a tool that is easy to learn, does things for you, brews you coffee\u200a\u2014\u200alook further. Use the built-in prototype tool in Sketch for that or the other ones (you know them<\/em>).<\/p>\n

    But! <\/strong>If you\u2019re a designer that wants to learn more about code, we can\u2019t think about a more visual way of learning. In the meantime you will learn new valuable skills and impress your developers. And your clients (did you build this?).<\/p>\n

    So the name of the article should have been Fairly Quick Responsive Prototyping<\/strong> but that sounds like sh*t so\u00a0\u2026 yeah\u00a0\u2026 I bent the truth\u00a0\u2026 a\u00a0\u2026 bit?<\/em> Or maybe not, maaaaybe<\/em> you\u2019re kind of a savant and it was easy peasy cup cakes for you? Was it? I salute you!<\/em><\/p>\n

    \n
    \n


    \n<\/figure>\n

    Myth Nr 3 ? You can re-import exported code from our Code App into Sketch\u00a0again<\/h3>\n

    Truth: ??<\/h3>\n

    We are not Gandalf\u2019s ?\u200dor Mandrake\u2019s. This is not dark magic even if it has been called that. We are only humans (we think anyway, there\u2019s no way of actually knowing<\/em>).<\/p>\n

    Once you have exported your code from our code app forget about Sketch completely.<\/strong> Do all your changes directly in code and you will save yourself a lot of headaches.<\/p>\n

    All changes that you do directly in code will stay in code until you our your dev manually changes it.<\/p>\n

    Suggested solution<\/h4>\n

    Honestly not even myself (that\u2019s heavily invested in this) don\u2019t have all the answers on the very best workflow for this. It will take time. We will all make mistakes. As always when learning new ways of working. But here\u2019s a couple of ideas, suggestions.<\/em><\/p>\n