I must admit that Curtis is responsible for a lot of UX decisions too though. In the very beginning we used Skype for everything and we occasionally sent files back and forth.Ĭurtis is responsible for the development side of the Mac app, and I make sure the user experience is easy to understand, everything looks good, and design / code the website. This process hasn’t been this smooth in early stages of our journey though. Project management happens on Github which gives insights in our roadmap and progress. We use Skype to communicate and we ping each other on WhatsApp when it’s important. Ieva: Could you tell me a bit about how you organized the process from the concept to beta version and finally to the 1.0? Especially since you and Curtis were working remotely and in your after hours?ĭavey: We both still work on the app in our spare time which is challenging but very inspiring since we’re both motivated to make the best possible app for icons. To never have the worry about starting a design project staring at a blank canvas ever again, is an awesome feeling once you have your own System in place.Īnd if you just ain’t got the time to build out your own System, I’d like to offer you a 35% Discount on my Design System Cabana for Figma.IconJar let’s you preview icons in any color Building your own System does take time (it took me 3 months to build my own, give-or-take), but the satisfaction once you’ve built it is immeasurable. Just remember to get the most commonly used UI elements into place to cover enough use cases, and you’ll be good to go with your initial build. So, here’s just a select few of the Components I added to my own System: I don’t want to take up too much of your valuable time here. Me personally, I like to design those smaller Components first, have them all at the ready, so I can then jump into creating a larger Component, and quickly choose from what I have available until I’m happy with the final build.Īnyway. Now, there are some folks that like to create the larger Component (ie Card) first in its entirety, and then separate out all the elements that it consists of (ie Button, Placeholder, Avatar etc…) into smaller Components. Something like the following works great…ĭoing it this way enabled me then to nest these smaller Components inside larger Components when it came to build those out. What I do recommend though, and following a similar pattern to your Colour Palette, is to once again use those trusty forward slashes (/) to group your Text Styles and make them much easier to reference. I know some folks like to opt for a naming structure like Heading 1 through to Heading 6, and Body, Body L, Body S etc… and a million other kinds of naming conventions. The naming convention here is entirely down to you, and what you feel most comfortable with. The Body I set at a healthy 18pt to improve legibility, especially when creating long-form content.Īs well as the Headings, and Body styles, I created styles for Lead, Small, Caption, and X-Small, with the latter being perfect for when creating designs for mobile, and the former for when dealing with Desktop projects. Who’s got time for a 10000-word article right?Įven so, when building out your own System I recommend sticking to a 2 Font Family rule if possible.įor my own System, I chose Inter and Oxygen as the Base Font Families because they complement each other really well, and they’re not too decorative as initial Base options.Īs well as creating oversized Display Styles, I also created styles for the usual suspects of H₁ to H₅ using Modular Scaling, with my Body text size set at 18pt, and using a Ratio of 1.2. It’s not a guide on showing you how to create one from start to finish. PLEASE NOTE: This article is here to help give you valuable tips, and advice on the best way of starting your own Design System. So with all that said, let me show you how I put together my Design System Cabana for Figma, and in the process help you better understand what goes into creating a versatile and powerful System for yourself. Something which enables you to have those core UI elements pre-built, ready to go, allowing you to focus on the nuances of a design project, and complete it so much faster. In its most basic form, I like to think of it as a Component Library and Style Guide rolled into one. This is where a Design System can come to your assistance. Wouldn’t it be better if you could kick-start your design projects faster, and save yourself so much time? Do you like staring at a blank canvas every time you start a new project in Figma?
0 Comments
Leave a Reply. |