Tuesday December 22, 2020 By David Quintanilla
Creating a Figma Design System: Buttons, Links, Icons, and Images

That is the final in our sequence of Figma design system tutorials! In it, we’ll be engaged on this minimalist portfolio WordPress theme:

design system in figma
A pattern of the design system in Figma

This WordPress theme will ultimately be coded, and also you’ll have the ability to obtain it totally free as properly. 

As this design will ultimately find yourself within the fingers of a developer I needed to create a design system for it; one thing which can assist each of us. It can assist me design new pages sooner or later, ensuring every thing is constant, and it’ll additionally assist the developer by creating an environment friendly coding course of. The system comprises all the colours, the typographic data, sizing and spacing, and extra.

buttons in figma design system

On this tutorial I’m going to indicate you the right way to develop a number of points of the design system, providing you with an thought of the right way to implement your personal: buttons, hyperlinks, icons, and pictures. Let’s dig in!

Making a Figma Design System

This Figma design system is a part of a sequence of video tutorials–right here they’re, multi function place!

The Energy of Design Techniques

Check out this assortment of studying sources on this Tuts+ sequence Unlock the Power of Design Systems, together with the newbie’s course: 

And when you’re keen on getting began with Figma design techniques, strive these on for measurement! 

Introduction To Figma  FREE COURSE
 Introduction To Figma | FREE COURSE

Thanks for watching!

Source link