Bkool Design Kit

Construye rápidamente experiencias estéticas y accesibles.

1. Instalar Figma

Para diseñar con Bkool Design Kit debes tener instalada la versión más reciente de Figma.

2. Descargar ficheros

Hay 4 ficheros claves para el uso eficiente de Bkool Design Kit:

  • Styles
  • Icons
  • Type
  • Components

Estos ficheros deberás descargarlos y añadirlos como librearía de Figma.

3. Entender el sistema

Para comenzar con Bkool Design Kit, familiarízate con cada boblioteca.

Media object Styles
Estilos de color, Efecto y Layout

Los estilos de elememtos serán aplicables para cualquier forma en Figma.

UI Kit
Media object Icons

Añadir nuevo icono

UI Kit

Overrides

UI Kit
Media object Type
Estilos de textos. Títulos, formularios, párrafos...
UI Kit
Media object Components
Símbolos más complejos, a partir de la unión de las bibliotecas anteriores. Botones, tooltips, inputs...

Esta librería está compuesta por 5 páginas, que contienen componentes asociados a sus categorías. Cada categoría sea ha asociado a un "Frame" de Figma específico, para organizar el documento.

UI Kit
  • Atoms
    • Badges
    • Buttons
    • Form-elements
    • Popover
    • Tooltip
  • Molecules
    • Alerts
    • Button-group
    • Dropdown
    • Input-group
    • List-group
    • Navs
    • Split-button
    • Table-rows
  • Organisms
    • Cards
    • Formularios
    • Media-object
    • Modal
    • Tables
  • Templates
    • Carrousel
    • Headers
    • Footer
    • Content
    • Welcome
  • Assets

Al tener este documento como una librería de Figma, podrás ser capaz de arrastrar los componentes que vayas necesitando. Podrás editarlos, "romperlos" y crear nuevas estructuras de componentes según convenga a tu diseño.

Construye rápidamente experiencias estéticas y accesibles.

1. Instalar Sketch

Para diseñar con Bkool Design Kit debes tener instalada la versión más reciente de Sketch.

2. Descargar ficheros

Hay 4 ficheros claves para el uso eficiente de Bkool Design Kit:

  • Bkool-colors-shapes
  • Bkool-icons
  • Bkool-type
  • Componentes

Estos ficheros deberás descargarlos y añadirlos a la biblioteca de sketch

3. Entender el sistema

Para comenzar con Bkool Design Kit, familiarízate con cada boblioteca.

Media object Bkool-color-shapes.sketch
Estilos de color, bordes y sombras

Los estilos de capa son selecciones de color para cualquier forma en Sketch.

Bordes

UI Kit

Relleno

UI Kit

Sombra

UI Kit
Símbolos de "Forma"

Añadir nuevo símbolo de forma

UI Kit

Anatomía del símbolo

UI Kit

Overrides

UI Kit
Media objectBkool-icons.sketch

Añadir nuevo icono

UI Kit

Anatomía del símbolo

UI Kit

Overrides

UI Kit
Media objectBkool-type.sketch
Estilos de textos. Títulos, formularios, párrafos...

Estilos en el body

UI Kit

Estilos en títulos

UI Kit

Estilos en formularios

UI Kit
Media objectComponents.sketch
Símbolos más complejos, a paertir de la unión de las bibliotecas anteriores. Botones, tooltips, inputs...

Añadir nuevo componente

UI Kit

Descargar ficheros Figma

Media object
Style

Elementos de estilos básicos de todos los componentes del proyecto. Colores, efectos y layouts

Descargar
Media object
Icons

Librería de iconos de Bkool. Podrás añadir, cambiar, sobreescribir iconos existentes en el rpoyecto.

Descargar
Media object
Type

Todos los estilos tipográficos usados en el proyecto. Headings, párrafos, formularios...

Descargar
Media object
Componentes

Todos los componentes usados en el proyecto, desde los átomos más simples hasta complejos organismos y templates.

Descargar
Media object
Descargar todo

Todo el paquete de ficheros de Bkool Design Kit

Descargar

Descargar ficheros Sketch

Media object
Átomos

Elementos de estilos básicos de todos los componentes del proyecto. Estilos de texto, formas, colores, , radios, iconos etc.

Descargar

Bkool-colors-shapes Bkool-icons Bkool-type
Media object
Componentes

Bloques de construción usando la unión de átomos. En esta UI, basados en los componentes de Bootstrap.

Descargar

Components
Media object
Organismos

Partes funcionales de una página, hechas de grupos de átomos y componentes. Elementos UI mayores, como navegación, barras de navegación, formularios, etc.

Descargar

Organisms
Media object
Templates

Páginas sin contenido real. Combinación organismos y componentes en un diseño.

Descargar

Templates
Media object
Descargar todo

Todo el paquete de ficheros de Bkool Design Kit

Descargar

Descargar ficheros Sass

Media object
Componentes CSS

Estilos de todos los componentes Bkool.

Descargar

Ficheros SCSS