November 9, 2019 HomeArticlesFigma design system for a marketing website Figma design system for a marketing website By David Keiser Articles, Blog 46 Comments Related posts: Designing a website – Episode 1: Planning & site map! Web design & web development – What’s the difference? | CharliMarieTV How to wireframe a website | CharliMarieTV How to become a web designer (moving from print) | CharliMarieTV Tags:design system, designer, figma, web design, web designer Related Posts Internet Speed Kaise Badhaye | How to Increase Internet Speed | Jio | Yo It’s Azhar Using G Suite with a Slow Internet Connection? LIVE STREAMING SETUP FOR SMALL CHURCHES About Author admin 46 Comments J T great overview, thank u! I will watch it again more calmly 😀 April 13, 2019 Reply Ivanna I was just looking this up for Figma, ironic! Can you still call this a design system if you don't have reusable code included with your system (like Carbon by IBM's page)? When I google that question, I get a "no-ish" answer….it's more than style guide…pattern library? I have no clue what I'm allowed to call this and don't want to call it the wrong thing at work. April 13, 2019 Reply Souris Thanks it is so helpful..Btw, what are other tools you use along side figma? April 13, 2019 Reply Alex Jolly 12:20 Nooo I wanted to see if the container was resizing if the text was longer 🙁 (like with Anima on Sketch) April 13, 2019 Reply Ben Murga Awesome video! This is why I love Figma. One of my favorite ways to replace an instance instead of going through the dropdown list, is to drag a component from the left list and hold Cmd (Ctrl) + Opt (Alt) to replace the existing instance. April 13, 2019 Reply Andrea Gonzalez Awesome video Charli!! Thank you so much April 13, 2019 Reply Raeann Cawkwell Is there a chance you could look into reflective journals online for coursework. It would help as I am making a reflective journal for my coursework. April 13, 2019 Reply Andre Gant @charliemarietv This post is extra creepy. For the past week i've been doing nothing but research on Design Systems, styles etc. I've learned Design Systems are all the craze. Then BAM, CharliMarie drops a video about Design Systems. The universe connects us! lol April 13, 2019 Reply Max Bardus Hi Charli! Do you create design system before you start designing a website or during the design process? April 13, 2019 Reply Rasmus Pagter Wish CC libraries was this powerful April 13, 2019 Reply James Cartwright Thanks for sharing this. I’ve just signed up for a free account of Figma and looking forward to trying it out. Do you do any design for print and if so what software do you use for that? Using illustrator for print is the one thing that’s keeping my Adobe subscription going! April 13, 2019 Reply Angelica D. Components are also available on the free version, I'm not 100% sure but I think the collaboration feature is limited to only 2 accounts for the free version… and that's about it. April 13, 2019 Reply Olya Striletska Charli, thanks, this is super helpful! I really enjoy watching your tips&tricks videos, it helps me to become better each day <3 April 13, 2019 Reply Hamzeh Ghoreyshi That is so helpful, thanks. April 13, 2019 Reply curkas Amazing practical walkthrough! Thanks so much. I'm currently working at a startup in Japan and looking to put together a design system for our upcoming platform. Knowing where to start is probably the hardest part – especially when starting from scratch one something that is simultaneously still trying to develop its brand image. I've always wondered if the best place to start (if creating a web platform) is with creating so key 'pages' to help you get a feel for a particular direction, and then to reverse engineer them to a design system for future development. Do you have any thoughts? April 14, 2019 Reply Ravi D Very Useful, Thanks for sharing. I think this design system will be helpful to create if the project is big or you're working with the company 🙂 April 14, 2019 Reply Christer Egon Eckermann Thank you, this was super helpful! April 15, 2019 Reply George Xervas Wow Charlie, thanks for that. I knew that Figma is powerful with all the components and stuff but not at that kind of level 😛 I was so tempted to switch to XD but Figma just keeps pulling me back. One question tho, why do you design at 1440px width for desktop? April 15, 2019 Reply frcike Good job. April 15, 2019 Reply md khaled love it ur voice and keep growing ,ur video so cool, and very useful Thnx. April 15, 2019 Reply Study Web Development Been looking into Figma lately 🙂 I like how you explained it. Thanks 🙂 April 15, 2019 Reply Chukwuma Udokporo Hello Charli, I'd like to know how much you charge(in dollars) for landing page designs. Have a quote template you can share by any chance? Thanks in advance. April 16, 2019 Reply Karen Viana Im glad you shared it with us! Also that I was able to understand your fast english 😅 Thank you! April 17, 2019 Reply Verity Stothard Charli this is an epic run through of design systems in Figma! Feeling so inspired ✨ April 23, 2019 Reply Exploring Diaries Aha! I came across a new tool, figma seems quite interesting. Gotta try it out & I'll share my thoughts. But it definitely seems interesting. Thanks for sharing 👍 April 25, 2019 Reply Dennise CB Thank you so much for creating this video. Just in time. Many concepts and tools became clearer to me and I am now less overwhelmed with the design systems I have seen 🙋🏻♀️🌞 April 27, 2019 Reply Gazi Taufiq At 10:50 the type change only affected the solid buttons and not the outlined ones. They all have the same master component, right? Or am I missing something? April 27, 2019 Reply Erica Cotten Realized as I was listening to a bunch of Design Life episodes I remember where you said you heard "You probably already have a design system, it's just not documented." I believe you and Fem said it was at the XOXO conference last year! And what a lovely piece of advice it is indeed. April 29, 2019 Reply Sagar A Hi, May 7, 2019 Reply Shane Cheek What are the (12) lines that you have on the layout @4:37? What are they used for? June 14, 2019 Reply Danil Mekhanoshin Great video, Charlie. Very helpful! But it's not Design System. It's UI-Kit. Design System must be implemented in code. Still great and thank you! June 17, 2019 Reply elskeetro SOLD. The styles and nesting, combined with the Dev handoff…I'm in love. July 2, 2019 Reply Benito Chavez T is it possible to have a button component where you can change the text of each individual button like in sketch? July 9, 2019 Reply mbalbertini I'm new at this, your videos are helping me a lot! Would love to see some content on grid and responsive design at Figma 🙂 July 30, 2019 Reply Jeremy Garcia There is a way to work around the icons not keeping the styles you set when you change the instances out. This took me so long to figure out, but I think it is very worth it. Just read this thread and walk through the examples: https://spectrum.chat/figma/general/styles-dont-stick-when-swapping-components~bd7b44b3-aa81-4d68-82f7-af8cd78e8efd August 12, 2019 Reply Paul Dixon Great and helpful video. Recently started using figma for my startup and this was super useful. Thank you. August 18, 2019 Reply Fred Vandaele Tons of inspiration in your video, thanks. BTW, how did you made your icomoon so thin? That looks amazing August 28, 2019 Reply Patrick Rushton Thanks for this Charli! Makes the transition from Sketch that much smoother. I'm curious about what settings you are using for your Bootstrap grids? August 30, 2019 Reply UI Consumer I like how you explained it. Thanks September 10, 2019 Reply MrTubber44 I like you & your content. Thanks! Be-a-u-tiful! September 22, 2019 Reply heli trisal Lovely video and great content however i couldn't find the option to universally use the components on to my other files in the free version… It is asking me to create a team and it's paid… Am i doing something wrong or were you on the paid plan of it? September 27, 2019 Reply byung choe Super informative! Thanks, CM! September 29, 2019 Reply sonal kumar Very helpful video thanks for sharing and the ways of using custom frames as component is incredible. October 7, 2019 Reply Robert Vidaure So cool! If you were to teach an online video workshop I would totally pay for it. October 15, 2019 Reply Daniel Wearne This was way more helpful than most of the videos I've been coming across searching for 'figma design system'. Awesome content October 17, 2019 Reply Amy Woolsey Thanks Charli! I'm using Sketch but found your organization of the design system compelling. I need to clean my stuff up like this! You've inspired me 🙂 October 20, 2019 Reply Add a Comment Cancel reply Your email address will not be published. Required fields are marked *Comment:*Name:* Email Address:* Save my name, email, and website in this browser for the next time I comment.