{"id":271665,"date":"2018-05-28T13:19:39","date_gmt":"2018-05-28T20:19:39","guid":{"rendered":"http:\/\/css-tricks.com\/?p=271665"},"modified":"2018-05-28T13:19:39","modified_gmt":"2018-05-28T20:19:39","slug":"developing-a-design-environment","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/developing-a-design-environment\/","title":{"rendered":"Developing a design environment"},"content":{"rendered":"

Jules Forrest discusses some of the work that her team at Credit Karma has been up to when it comes to design systems. Jules writes:<\/p>\n

…in most engineering organizations, you spend your whole first day setting up your development environment so you can actually ship code. It\u2019s generally pretty tedious and no one likes doing it, but it\u2019s this thing you do to contribute meaningful work to production. Which got me thinking, what would it look like to make it easier for designers to design for production?<\/p><\/blockquote>\n

<\/p>\n

That\u2019s what Jules calls a \u201cdesign environment\u201d and she\u2019s even written a whole bunch of documentation in Thread, Credit Karma\u2019s design system, for designers on their team to get that design environment up and running. That\u2019s stuff like fonts, Sketch plugins, and other useful assets: <\/p>\n

\"\"<\/figure>\n

These problems have certainly been tackled by other teams in the past but this is the first time I\u2019ve heard the phrase \u201cdesign environment\u201d before and I sort of love the heck out of it. Oh, and this post reminds me of a piece by Jon Gold where he wrote about Painting with Code<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"

Jules Forrest discusses some of the work that her team at Credit Karma has been up to when it comes to design systems. Jules writes: …in most engineering organizations, you spend your whole first day setting up your development environment so you can actually ship code. It\u2019s generally pretty tedious and no one likes doing […]<\/p>\n","protected":false},"author":223806,"featured_media":271710,"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":"Developing a design environment","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[17],"tags":[1396],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/05\/cred-karma-design-environment.jpg?fit=1200%2C600&ssl=1","jetpack-related-posts":[{"id":300866,"url":"https:\/\/css-tricks.com\/making-room-for-variation\/","url_meta":{"origin":271665,"position":0},"title":"Making Room for Variation","date":"December 30, 2019","format":false,"excerpt":"Say you have a design system and you're having a moment where it doesn't have what you need. You need to diverge and create something new. Yesenia Perez-Cruz categorizes these moments from essentially ooops to niiice: There are three kinds of deviations that come up in a design system: Unintentional\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/12\/css-star-variations.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":361971,"url":"https:\/\/css-tricks.com\/design-systems-with-backlight\/","url_meta":{"origin":271665,"position":1},"title":"Build, Ship, & Maintain Design Systems with Backlight","date":"January 27, 2022","format":false,"excerpt":"Design systems are an entire job these days. Agencies are hired to create them. In-house teams are formed to handle them, shipping them so that other teams can use them and helping ensure they do. Design systems aren't a fad, they are a positive evolution of how digital design is\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/01\/hero-css-tricks.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":266130,"url":"https:\/\/css-tricks.com\/designer-oriented-styles\/","url_meta":{"origin":271665,"position":2},"title":"Designer-Oriented Styles","date":"January 31, 2018","format":false,"excerpt":"James Kyle: Components are a designer\u2019s bread and butter. Designers have been building design systems with some model of \u201ccomponent\u201d for a really long time. As the web has matured, from Atomic Design to Sketch Symbols, \u201ccomponents\u201d (in some form or another) have asserted themselves as a best practice for\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":271665,"position":3},"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":305736,"url":"https:\/\/css-tricks.com\/how-to-build-a-bad-design-system\/","url_meta":{"origin":271665,"position":4},"title":"How to build a bad design system","date":"March 31, 2020","format":false,"excerpt":"I didn\u2019t realize this until it was far too late, but one of the biggest mistakes that\u2019s made on a design systems team is a common mismanagement issue: there are too many people in a meeting and they have too many dang opinions. Is there a conversation about the color\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/12\/confetti.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":299384,"url":"https:\/\/css-tricks.com\/smarter-design-systems-tools\/","url_meta":{"origin":271665,"position":5},"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":[]}],"featured_media_src_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/05\/cred-karma-design-environment.jpg?fit=1024%2C512&ssl=1","_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/271665"}],"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=271665"}],"version-history":[{"count":7,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/271665\/revisions"}],"predecessor-version":[{"id":271789,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/271665\/revisions\/271789"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/271710"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=271665"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=271665"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=271665"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}