Skip to main content

Hi

I'm designing a website for a new training organisation. I'm fairly new to Figma, having come from XD and before that Illustrator/Indesign.

I've created a set of medium fidelity wireframes for a website from scratch, and have set it up using components which I've built and with variables set up for text styles, colours and breakpoints. I would call the components I've made semi-responsive at best! I haven't added any interactivity yet.

I'm about to start on the detailed UI design, and my developers recommended using a design kit for things like icons, date pickers etc for the booking system. I haven't used design kits (or Figma libraries) before, so have a number of questions...

  • I'm planning to stick with my wireframes, and then to drop in and adapt elements from another design kit as needed. Does that sound like a reasonable approach? Or is it better to replace all of the buttons, text styles etc from the design. I imagine that the colours, text styles etc will most likely be set up different ways than I've set mine up so far.

  • In future sites, is it best to select a design kit and use that to make the wireframes so that the design kit is fully integrated from the start?

  • I've looked at some free and paid design kits, a lot of them are way more complex than I need. I like how this Material 2 kit contains a reduced kit of elements for example: https://www.figma.com/community/file/847347447642725855 Can anyone recommend any suitable design kits? Should I stick to paid kits, or are free ones OK too? I suppose the Material kits weren't necessarily developed for websites, so are they any good as a starting point for website design?

  • Should I publish my selected design kit as a library and use the elements from that, or is it OK to copy and paste the components from the design kit into my wireframes document and then start the UI work on there?

  • Is there anything else that I should watch out for or be sure to do when using design kits?

Any advice is appreciated!

Hi Carbonara, welcome to Figma!

  1. If you've set up basic local variables like spacings, colors, and fonts, i think it will help you quite a bit if you begin by using a simple, skeletal design kit that you may find the community. You'll have to modify essentially everything (colors, fonts, spacings, sizes), but i'd say it's quicker than making everything from scratch.
    Regarding replacing your design with an existing design kit, i think it's up to you to decide. How much does your design's uniqueness matter to the product? How soon do you need to deliver to the dev team? If you have tons of time, i'd go with the above-mentioned approach. But if i was low on time and the UI's need is solely functional (as in, design isn't a big part of your booking system), i'd just choose a design kit with tons of components and just change the fonts and the colors to match my product's brand. Just be wary that you might not have a component in the design kit that you need and you'll have to build it yourself.
  2. It depends on the size of your project. For example, a one-pager website probably doesn't need a design kit. So the wireframes can be actual b/w wireframes or even sketches that you can share with your client to explain your ideas. In contrast, a SaaS product will definitely need a design kit, and while using the design kit to demo the wireframes can be efficient, it may cause you to miss out on design fundamentals, say, hierarchy and contrast. Another thing that i've personally done is dwelt too much on the details while wireframing, so i'll caution you to be mindful of on the same.
  3. I'm pretty sure devs have used Material 2 for websites in the past -- Material 2's website itself seems to be built on the same, i think? Ultimately it's your decision on what you need, because you know the best on what elements you'll need, and while exploring the community's design kits, you're probably skimming through them to see if they fulfill your product's requirements.
  4. It will be easier to publish the design kit to your library, but just be aware that when you make changes to the kit, you'll have to republish it before you can see the changes on your screens. So it's even easier to make the majority of the changes to the kit beforehand.
  5. I think i've mentioned a few things already, but i'll add that just because you're using an existing design kit, it doesn't mean you need to be limited to it. in fact, the kit will help make new UI elements quicker. Other than that, try to have fun with the process!

Thanks ​@driftingsteps for the detailed reply! It's very useful to hear how people are using kits in real projects. I think I'll follow your suggestions to only bring in the parts I need from other kit(s).

If anyone else has similar questions around UI kits, this tutorial (particularly the second half) was very useful: https://www.youtube.com/watch?v=kctJeIZwdkg

Reply


Terms & ConditionsCookie settings