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.
Styles
Estilos de color, Efecto y Layout
Los estilos de elememtos serán aplicables para cualquier forma en Figma.
![UI Kit](images/components/ui-kit/layer-style/figma-styles.png)
Icons
Añadir nuevo icono
![UI Kit](images/components/ui-kit/icon-symbol/figma-add-icon.png)
Overrides
![UI Kit](images/components/ui-kit/icon-symbol/figma-icon-symbol-overwrite.png)
Type
Estilos de textos. Títulos, formularios, párrafos...
![UI Kit](images/components/ui-kit/type/figma-type.png)
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](images/components/ui-kit/components/figma-component.png)
-
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.
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](images/components/ui-kit/layer-style/layer-style-border.png)
Relleno
![UI Kit](images/components/ui-kit/layer-style/layer-style-fill.png)
Sombra
![UI Kit](images/components/ui-kit/layer-style/layer-style-shadow.png)
Símbolos de "Forma"
Añadir nuevo símbolo de forma
![UI Kit](images/components/ui-kit/layer-style/add-shape.png)
Anatomía del símbolo
![UI Kit](images/components/ui-kit/layer-style/shape-symbol.png)
Overrides
![UI Kit](images/components/ui-kit/layer-style/shape-override.png)
Bkool-icons.sketch
Añadir nuevo icono
![UI Kit](images/components/ui-kit/icon-symbol/add-icon.png)
Anatomía del símbolo
![UI Kit](images/components/ui-kit/icon-symbol/icon-symbol.png)
Overrides
![UI Kit](images/components/ui-kit/icon-symbol/icon-symbol-overwrite.png)
Bkool-type.sketch
Estilos de textos. Títulos, formularios, párrafos...
Estilos en el body
![UI Kit](images/components/ui-kit/type/type-body.png)
Estilos en títulos
![UI Kit](images/components/ui-kit/type/type-title.png)
Estilos en formularios
![UI Kit](images/components/ui-kit/type/type-form.png)
Components.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](images/components/ui-kit/components/add-component.png)
Descargar ficheros Figma
![Media object](images/components/figma-symbol.png)
Style
Elementos de estilos básicos de todos los componentes del proyecto. Colores, efectos y layouts
Descargar![Media object](images/components/figma-symbol.png)
Icons
Librería de iconos de Bkool. Podrás añadir, cambiar, sobreescribir iconos existentes en el rpoyecto.
Descargar![Media object](images/components/figma-symbol.png)
Type
Todos los estilos tipográficos usados en el proyecto. Headings, párrafos, formularios...
Descargar![Media object](images/components/figma-symbol.png)
Componentes
Todos los componentes usados en el proyecto, desde los átomos más simples hasta complejos organismos y templates.
Descargar![Media object](images/components/figma-symbol.png)
Descargar ficheros Sketch
![Media object](images/components/sketch-symbol.png)
Á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](images/components/sketch-symbol.png)
Componentes
Bloques de construción usando la unión de átomos. En esta UI, basados en los componentes de Bootstrap.
Descargar
Components![Media object](images/components/sketch-symbol.png)
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](images/components/sketch-symbol.png)
Templates
Páginas sin contenido real. Combinación organismos y componentes en un diseño.
Descargar
Templates![Media object](images/components/sketch-symbol.png)
Descargar ficheros Sass
![Media object](images/components/sass-symbol.png)