Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Design Systems

Crear un sistema de diseño Figma: botones, enlaces, iconos e imágenes

by
Difficulty:BeginnerLength:ShortLanguages:

Spanish (Español) translation by Marwa Shuwain (you can also view the original English article)

Este es el último de nuestra serie de tutoriales de diseño de Figma sistema! En él, vamos a estar trabajando en este tema de WordPress cartera minimalista:

design system in figmadesign system in figmadesign system in figma
Una muestra del sistema de diseño en Figma

Este tema de WordPress con el tiempo será codificado, y  serás capaz de descargarlo de forma gratuita también.

Como este diseño terminará finalmente en manos de un desarrollador, quería crear un sistema de diseño para él; algo que nos ayudará a ambos. Me ayudará a diseñar nuevas páginas en el futuro, asegurándome de que todo sea consistente, y también ayudará al desarrollador creando un proceso de codificación eficiente. El sistema contiene todos los colores, la información tipográfica, el tamaño y el espaciado, y más.

buttons in figma design systembuttons in figma design systembuttons in figma design system

En este tutorial voy a mostrarte cómo desarrollar varios aspectos del sistema de diseño, dándote una idea de cómo implementar tus propios botones, enlaces, iconos e imágenes. Vamos a cavar en!

Crear un sistema de diseño Figma

Este sistema de diseño de Figma es parte de una serie de video tutoriales, ¡aquí están, todos en un solo lugar!

  • Figma
    Creación de un sistema de diseño Figma: tipografía, espaciado y dimensionamiento
    Adi Purdila
  • sistemas de diseño
    Crear un sistema de diseño Figma: colores y formas
    Adi Purdila
  • sistemas de diseño
    Crear un sistema de diseño Figma: botones, enlaces, iconos e imágenes
    Adi Purdila

El poder de los sistemas de diseño

Echa un vistazo a esta colección de recursos de aprendizaje de esta serie Tuts+ Unlock the Power of Design Systems, incluyendo el curso para principiantes:

  • GRATIS

    Introducción a los sistemas de diseño

Y si estás interesado en comenzar con los sistemas de diseño de Figma, ¡pruébelos para ver tu tamaño!

  • Figma
    ¿Qué es lo de Figma?
    Kezz Bracey
  • Figma
    Atajos esenciales de Figma para trabajar eficientemente
    Adi Purdila
  • Figma
    20 kits de interfaz de usuario de Figma para diseñadores
    Eric Karkovack
  • Adobe XD
    Figma vs. Adobe XD en 2020
    Kezz Bracey
Introduction To Figma FREE COURSEIntroduction To Figma FREE COURSEIntroduction To Figma FREE COURSE
Introducción a Figma | CURSO GRATUITO

¡Gracias por la atención!

Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.