{"id":262310,"date":"2017-11-07T14:46:45","date_gmt":"2017-11-07T21:46:45","guid":{"rendered":"http:\/\/css-tricks.com\/?p=262310"},"modified":"2017-11-07T14:46:45","modified_gmt":"2017-11-07T21:46:45","slug":"building-flexible-design-systems","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/building-flexible-design-systems\/","title":{"rendered":"Building Flexible Design Systems"},"content":{"rendered":"<p>Yesenia Perez-Cruz talks about design systems that aren&#8217;t just, as she puts it, Lego bricks for piecing layouts together. Yesenia is Design Director at Vox, which is a parent to many very visually different brands, so you can see how a single <em>in<\/em>flexible design system might fall over. <\/p>\n<blockquote><p>Successful design patterns don&#8217;t exist in a vacuum.<\/p><\/blockquote>\n<p><!--more--><\/p>\n<p><iframe loading=\"lazy\" src=\"https:\/\/player.vimeo.com\/video\/228908312\" width=\"640\" height=\"360\" frameborder=\"0\" webkitallowfullscreen mozallowfullscreen allowfullscreen><\/iframe><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Yesenia Perez-Cruz talks about design systems that aren&#8217;t just, as she puts it, Lego bricks for piecing layouts together. Yesenia is Design Director at Vox, which is a parent to many very visually different brands, so you can see how a single inflexible design system might fall over. Successful design patterns don&#8217;t exist in a [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":0,"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":false,"jetpack_social_options":[]},"categories":[17],"tags":[763],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":300866,"url":"https:\/\/css-tricks.com\/making-room-for-variation\/","url_meta":{"origin":262310,"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 &quot;Link&quot;","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":271110,"url":"https:\/\/css-tricks.com\/designsystems-com\/","url_meta":{"origin":262310,"position":1},"title":"designsystems.com","date":"May 15, 2018","format":false,"excerpt":"The team at Figma has created a new resource for \u201clearning, creating and evangelizing design systems\u201d called Design Systems that already has a good collection of interviews and articles by some folks thinking about these things. I particularly liked Jeroen Ransijn\u2019s post on how to convince your company it\u2019s ready\u2026","rel":"","context":"In &quot;Link&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/05\/designsystems-com.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":273858,"url":"https:\/\/css-tricks.com\/design-systems-at-github\/","url_meta":{"origin":262310,"position":2},"title":"Design Systems at GitHub","date":"July 12, 2018","format":false,"excerpt":"Here\u2019s a nifty post by Diana Mounter all about the design systems team at GitHub that details how the team was formed, the problems they've faced and how they've adapted along the way: When I started working at GitHub in late 2015, I noticed that there were many undocumented patterns,\u2026","rel":"","context":"In &quot;Link&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/07\/github-design-systems.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":268937,"url":"https:\/\/css-tricks.com\/vue-design-system\/","url_meta":{"origin":262310,"position":3},"title":"Vue Design System","date":"March 30, 2018","format":false,"excerpt":"We talk a lot about Vue around here, including some practical applications of it, but haven't gotten deep into designing for it. In this post, Viljami Salminen describes his Vue design process and the thinking that led him to build the Vue Design System: A design system can help establish\u2026","rel":"","context":"In &quot;Link&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/03\/vue-circles.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":295970,"url":"https:\/\/css-tricks.com\/a-codebase-and-a-community\/","url_meta":{"origin":262310,"position":4},"title":"A Codebase and a Community","date":"September 27, 2019","format":false,"excerpt":"I woke up one morning and realized that I had it all wrong. I discovered that code and design are unable to solve every problem on a design systems team, even if many problems can be solved by coding and designing in a dark room all day. Wait, huh? How\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/09\/DT3131442-scaled.jpg?fit=1200%2C701&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":255436,"url":"https:\/\/css-tricks.com\/componentizing-a-framework\/","url_meta":{"origin":262310,"position":5},"title":"Componentizing a Framework","date":"June 2, 2017","format":false,"excerpt":"I'm sure most of you understand how you work with a framework like Bootstrap, Foundation, or Materialize. You use their CSS and JavaScript. You also use their chunks of HTML, piecing together and applying classes as needed to do what you need to do. You're on your own piecing the\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"featured_media_src_url":null,"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/262310"}],"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\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=262310"}],"version-history":[{"count":1,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/262310\/revisions"}],"predecessor-version":[{"id":262312,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/262310\/revisions\/262312"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=262310"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=262310"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=262310"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}