{"id":275906,"date":"2018-09-05T11:20:34","date_gmt":"2018-09-05T18:20:34","guid":{"rendered":"http:\/\/css-tricks.com\/?p=275906"},"modified":"2018-09-05T11:21:25","modified_gmt":"2018-09-05T18:21:25","slug":"designing-with-code","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/designing-with-code\/","title":{"rendered":"Designing With Code"},"content":{"rendered":"

Wall Street Journal design director Matthew Str\u00f6m on something near and dear to me<\/a>: the link between code and design tools:<\/p>\n

\n

We\u2019re in the middle of a design tool renaissance. In the 8 years since Sketch 1.0 was released, there\u2019s been a wave of competition among traditional design tools. And as the number of tools available to designers grows exponentially, ideas that were once considered fringe are finding a broader audience.<\/p>\n

One of these ideas will significantly change the way digital products are designed: integrating design and code at a deep level. Figma can update a React code base in real time; InVision, Abstract, and Zeplin have done away with design-developer handoff documents; Framer\u2019s new Framer X can render interactive React components directly into its workspace. These examples are just a hint of what\u2019s to come.<\/p>\n<\/blockquote>\n

<\/p>\n

Matthew then looks at how this combination of code and design has been improving his own design process, specifically on the \u201cstory cards\u201d that appear on the homepage of the WSJ: <\/p>\n

A tiny bit of NodeJS fills in the cards with live data from the WSJ.com home page. I can make small changes to parts of the component and see how the system reacts in a matter of seconds. This multiplicative process means that small changes have a huge output, making my designs much more comprehensive in the process.<\/p><\/blockquote>\n

I really can\u2019t wait to see how our design tools are evolve. It\u2019s a thoroughly exciting time to be a designer that\u2019s interested in code.<\/p>\n","protected":false},"excerpt":{"rendered":"

Wall Street Journal design director Matthew Str\u00f6m on something near and dear to me: the link between code and design tools: We\u2019re in the middle of a design tool renaissance. In the 8 years since Sketch 1.0 was released, there\u2019s been a wave of competition among traditional design tools. And as the number of tools […]<\/p>\n","protected":false},"author":223806,"featured_media":275927,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[17],"tags":[1480,1315,1481,618],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/09\/wsj-design-with-code.jpg?fit=1200%2C600&ssl=1","jetpack-related-posts":[{"id":240491,"url":"https:\/\/css-tricks.com\/introducing-new-framer\/","url_meta":{"origin":275906,"position":0},"title":"Introducing the new Framer","date":"April 17, 2016","format":false,"excerpt":"Framer, the design and code tool from Motif Tools BV, has been updated with lots of new features. I guess it's Framer \"js\", because the designs you create are formed from a code syntax that is JavaScript-like. Kinda looks like JSON in CoffeeScript. It's CoffeeScript. But you're actually working in\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":359201,"url":"https:\/\/css-tricks.com\/build-great-apps-designer-and-developer-collaboration-just-got-easier\/","url_meta":{"origin":275906,"position":1},"title":"Build Great Apps: Designer and Developer Collaboration Just Got Easier","date":"December 20, 2021","format":false,"excerpt":"We're going to go over details on how designer \u2194\ufe0f developer collaboration in AWS Amplify Studio can make app building easier, but let's cover one of those things right at the top here. Say your designer (or you!) like to work in Figma, the predominant tool in UI design these\u2026","rel":"","context":"In "Sponsored"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/12\/featured-amplify.png?fit=1200%2C790&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":311568,"url":"https:\/\/css-tricks.com\/framer-web\/","url_meta":{"origin":275906,"position":2},"title":"Framer Web","date":"May 26, 2020","format":false,"excerpt":"The prototyping app Framer just launched the web version of their design tool and it looks pretty darn neat. I particularly love the design of the marketing site that explains how to use Framer and what sets it apart from other design tools. They have a ton of examples that\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/05\/Screen-Shot-2020-05-23-at-6.28.12-PM-1.png?fit=1200%2C729&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":259992,"url":"https:\/\/css-tricks.com\/design-tooling-still-figuring\/","url_meta":{"origin":275906,"position":3},"title":"Design Tooling is Still Figuring Itself Out","date":"September 14, 2017","format":false,"excerpt":"It probably always will be, to be fair. At the moment, there are all kinds of things that design software is struggling to address. The term \"screen design\" is common, referring to the fact that many of us are designing very specifically for screens, not print or any other application\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":299384,"url":"https:\/\/css-tricks.com\/smarter-design-systems-tools\/","url_meta":{"origin":275906,"position":4},"title":"Smarter Design Systems Tools","date":"November 22, 2019","format":false,"excerpt":"What has me really excited about building websites is largely around design systems and the design tools we use to build them. Though, design systems are certainly not limited to websites. Closing the Gap In the ever-so-hot-right-now world of design systems, one of the most common phrases people use is\u2026","rel":"","context":"In "2019 End-of-Year Thoughts"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":304682,"url":"https:\/\/css-tricks.com\/browser-based-svg-editors\/","url_meta":{"origin":275906,"position":5},"title":"Browser-Based SVG Editors","date":"March 26, 2018","format":false,"excerpt":"One of the coolest things about SVG is that, despite all the powerful stuff it can do, it\u2019s still readable code. Wanna draw a rectangle? It\u2019s not a bizarre string of gibberish characters, it\u2019s: You\u2019d call that markup, a declarative language. You can draw\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/03\/Screen-Shot-2020-03-04-at-9.22.56-AM.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]}],"featured_media_src_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/09\/wsj-design-with-code.jpg?fit=1024%2C512&ssl=1","_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/275906"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/223806"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=275906"}],"version-history":[{"count":6,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/275906\/revisions"}],"predecessor-version":[{"id":275980,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/275906\/revisions\/275980"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/275927"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=275906"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=275906"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=275906"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}