Creating a Figma Design System: Buttons, Links, Icons, and Images
source link: https://webdesign.tutsplus.com/tutorials/figma-design-system-buttons-links-icons-images--cms-36291
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Creating a Figma Design System: Buttons, Links, Icons, and Images
This is the last in our series of Figma design system tutorials! In it, we’ll be working on this minimalist portfolio WordPress theme:
A sample of the design system in FigmaThis WordPress theme will eventually be coded, and you’ll be able to download it for free as well.
As this design will eventually end up in the hands of a developer I wanted to create a design system for it; something which will help both of us. It will help me design new pages in the future, making sure everything is consistent, and it will also help the developer by creating an efficient coding process. The system contains all the colors, the typographic information, sizing and spacing, and more.
In this tutorial I’m going to show you how to develop several aspects of the design system, giving you an idea of how to implement your own: buttons, links, icons, and images. Let’s dig in!
Creating a Figma Design System
This Figma design system is part of a series of video tutorials–here they are, all in one place!
The Power of Design Systems
Take a look at this collection of learning resources in this Tuts+ series Unlock the Power of Design Systems, including the beginner’s course:
-
What is a design system? And how do you use visual design systems to make your web design work more effective and efficient? Find out in this free course. ...Adi Purdila 21 Apr 2020
And if you’re interested in getting started with Figma design systems, try these on for size!
Introduction To Figma | FREE COURSE
Thanks for watching!
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK