← Volver al listado de tecnologías ← Índice de OpenPencil

Herramientas de diseño

Por: Artiko
openpencildiseñocanvasbezierauto-layoutbooleanas

Herramientas de diseño

El canvas como sistema de coordenadas

Antes de explorar las herramientas individuales, es importante entender cómo funciona el sistema de coordenadas de OpenPencil. El origen (0,0) está en la esquina superior izquierda del canvas. Las X crecen hacia la derecha y las Y crecen hacia abajo (convención estándar de pantalla, no matemática).

Todos los nodos tienen una posición absoluta en el canvas (X, Y globales) y una posición relativa a su padre (X, Y locales). El panel de propiedades muestra siempre las coordenadas locales relativas al padre. Para ver las coordenadas globales, mantén Alt mientras el nodo está seleccionado.

graph TD
    A[Canvas infinito] --> B[Frame / Artboard]
    B --> C[Grupo]
    B --> D[Rectángulo]
    B --> E[Texto]
    C --> F[Elipse]
    C --> G[Path personalizado]
    B --> H[Componente]
    H --> I[Instancia de componente]

Formas básicas

Rectángulo (R)

El rectángulo es la forma más usada en diseño de interfaces. En el panel de propiedades:

Para editar esquinas independientemente:

  1. Selecciona el rectángulo
  2. En el campo de radio de esquina, haz click en el ícono de “separar esquinas”
  3. Ajusta cada esquina individualmente (superior-izquierda, superior-derecha, inferior-derecha, inferior-izquierda)

Elipse (O)

La elipse funciona igual que el rectángulo pero genera una forma oval. Dos propiedades adicionales:

Ejemplo de uso: Un indicador de progreso circular se puede crear con una elipse con arc que va de 0° a 270° para representar 75% de progreso.

Línea (L)

La herramienta de línea crea paths de dos puntos. Propiedades adicionales:

Para líneas perfectamente horizontales o verticales, mantén Shift mientras dibujas.

Polígono y estrella

En el menú de la herramienta de rectángulo (click sostenido) o en el panel de propiedades de un polígono:

La herramienta Pen / Bezier (P)

La herramienta Pen es la más poderosa y la más compleja del canvas. Permite crear cualquier forma vectorial mediante paths de Bezier.

Conceptos fundamentales de Bezier

Una curva de Bezier tiene tres elementos:

flowchart LR
    A[Anchor Point] -->|Tangent Handle| B[Curve Segment]
    B --> C[Anchor Point]
    C -->|Tangent Handle| D[Next Segment]

Tipos de anchor points

Para alternar entre tipos al crear un punto: mantén Alt/Option mientras haces click.

Flujo de trabajo básico con Pen

1. Pulsa P para activar la herramienta
2. Click para crear el primer anchor point
3. Click en otro lugar para crear un segmento recto
4. Click y arrastra para crear un segmento curvo
5. Al arrastar, los handles de Bezier aparecen
6. Cierra el path haciendo click sobre el primer punto
7. O presiona Enter/Escape para dejar el path abierto

Editar paths existentes

Para editar un path que ya existe:

  1. Selecciónalo con V
  2. Presiona Enter o haz doble click para entrar al modo de edición de path
  3. Aparecen los anchor points como cuadrados (corners) o círculos (smooth)
  4. Arrastra anchor points para mover
  5. Arrastra handles para ajustar curvaturas
  6. Click en un segmento para agregar un nuevo punto
  7. Selecciona un punto y presiona Delete para eliminarlo
  8. Presiona Escape para salir del modo de edición

Herramienta de texto (T)

Tipos de texto

Texto en punto (text point): Click sin arrastrar. El contenedor se expande automáticamente con el texto. Útil para labels cortos.

Texto en área (text area): Click y arrastra para definir un contenedor de ancho fijo. El texto hace wrap automáticamente. Útil para párrafos y bloques de contenido.

Propiedades tipográficas

PropiedadDescripción
FuenteNombre de la familia tipográfica
VarianteRegular, Bold, Italic, etc.
TamañoEn píxeles
Line heightAltura de línea (número o porcentaje)
Letter spacingEspaciado entre letras en px o em
Paragraph spacingEspacio entre párrafos
AlineaciónLeft, center, right, justify
DecoraciónUnderline, strikethrough
CasoUppercase, lowercase, capitalize

Estilos de texto

Puedes crear estilos de texto reutilizables (equivalentes a los Text Styles de Figma):

  1. En el panel de propiedades del texto, click en el ícono de “Guardar como estilo”
  2. Asigna un nombre (ej: “Heading/H1”, “Body/Regular”)
  3. El estilo queda disponible en el panel de estilos y se puede aplicar a cualquier texto

Fuentes web y Google Fonts

OpenPencil incluye integración directa con Google Fonts y el repositorio de fuentes del sistema. Para agregar una fuente:

  1. En el selector de fuentes, escribe el nombre
  2. Las fuentes que no están instaladas localmente se muestran con un ícono de descarga
  3. Click en la fuente para descargarla y aplicarla

Para proyectos con fuentes personalizadas, puedes agregar archivos TTF/OTF/WOFF2 desde Preferencias → Fuentes → Agregar fuente local.

Auto-layout

Auto-layout es una de las características más importantes de OpenPencil. Permite crear layouts que se adaptan automáticamente al contenido, usando los mismos principios que CSS Flexbox y Grid.

Activar auto-layout

Selecciona un frame y en el panel de propiedades haz click en el ícono + junto a “Auto layout”. También puedes usar el atajo Shift + A.

Modo Flex (dirección)

Espaciado y padding

Alineación

La alineación principal (en la dirección del layout):

La alineación cruzada (perpendicular a la dirección):

Comportamiento de children

Cada child de un auto-layout puede tener su propio comportamiento:

Este es el equivalente directo a cómo funciona CSS Flexbox, lo que hace que la exportación a código sea casi directa.

Auto-layout Grid

Para layouts más complejos basados en cuadrícula:

  1. Activa el modo Grid en el panel de auto-layout
  2. Define columnas: número fijo, o auto (se adaptan)
  3. Define filas: número fijo, o auto
  4. Configura el gap entre filas y columnas independientemente
graph LR
    subgraph Grid["Auto-layout Grid"]
        A[Col 1] --- B[Col 2] --- C[Col 3]
        D[Col 1] --- E[Col 2] --- F[Col 3]
        G[Col 1] --- H[Col 2] --- I[Col 3]
    end

Ejemplo práctico: Botón con auto-layout

1. Crea un frame
2. Activa auto-layout horizontal
3. Agrega un ícono SVG (16x16) dentro del frame
4. Agrega un texto "Enviar" junto al ícono
5. Configura: padding 12/20, gap 8
6. Alineación: center/center
7. El frame se ajusta automáticamente al contenido
8. Ahora si cambias el texto, el botón se re-dimensiona solo

Operaciones booleanas

Las operaciones booleanas permiten combinar dos o más formas para crear formas más complejas.

OperaciónAtajoResultado
UniónCmd+Alt+UCombina las formas (OR)
SustracciónCmd+Alt+SResta la forma superior de la inferior
IntersecciónCmd+Alt+ISolo el área en común (AND)
ExclusiónCmd+Alt+XÁreas no comunes (XOR)

Ejemplo: Crear un ícono de chat

Para crear un bubble de chat (rectángulo con cola triangular):

  1. Crea un rectángulo redondeado (el bubble principal)
  2. Crea un triángulo pequeño (usando polígono de 3 lados)
  3. Posiciona el triángulo en la esquina inferior del rectángulo, superponiéndolo
  4. Selecciona ambas formas
  5. Aplica Unión (Cmd+Alt+U)
  6. Resultado: una forma compuesta que representa el bubble de chat

Las operaciones booleanas son no destructivas. El grupo booleano mantiene las formas originales como children. Puedes entrar al grupo con doble click y mover las formas originales para ajustar el resultado.

Flatten (aplanar)

Si quieres convertir el resultado booleano en un path único editable:

  1. Selecciona el grupo booleano
  2. Cmd+E para aplanar (Flatten)
  3. El resultado es un path vectorial editable con la herramienta Pen

Imágenes

Insertar una imagen

Métodos para agregar imágenes al canvas:

  1. Arrastrar y soltar: Arrastra un archivo de imagen directamente al canvas
  2. Menú Insert: Insert → Image → selecciona archivo
  3. Pegar: Cmd+V si tienes una imagen en el portapapeles
  4. CLI: op insert '{"type":"IMAGE","src":"./mi-foto.jpg"}'

Formatos soportados: PNG, JPG, GIF, WebP, SVG, AVIF.

Fill de imagen

Cualquier forma puede tener una imagen como fill (en lugar de un color sólido):

  1. En el panel de fills, haz click en el selector de tipo
  2. Selecciona “Image”
  3. Sube o selecciona la imagen

Modos de fit:

Editar imagen (crop)

Con una imagen seleccionada, doble click para entrar al modo de crop. Ajusta el encuadre arrastrando.

Iconos con Iconify

OpenPencil tiene integración nativa con Iconify, que incluye más de 200,000 íconos de más de 150 colecciones (Material Icons, Heroicons, Phosphor, Lucide, Feather y muchas más).

Insertar un ícono

  1. Menú Insert → Icon (o atajo Cmd+Shift+I)
  2. Busca por nombre o colección
  3. Click para insertar como SVG vectorial

El ícono se inserta como un nodo SVG editable. Puedes:

Búsqueda contextual de iconos

OpenPencil puede sugerir iconos automáticamente basado en el contexto:

  1. Crea un texto que diga “Configuración”
  2. Selecciona el texto + un frame vacío
  3. Chat IA: “sugiere un ícono apropiado para este elemento”
  4. El agente buscará en Iconify y lo insertará automáticamente

Panel de propiedades completo

El panel derecho adapta su contenido según el tipo de nodo seleccionado:

flowchart TD
    A[Nodo seleccionado] --> B{Tipo}
    B -->|Frame| C[Layout + Auto-layout<br/>Fills + Strokes<br/>Efectos + Clip content]
    B -->|Forma| D[Posición + Tamaño<br/>Fills + Strokes<br/>Efectos + Opacidad]
    B -->|Texto| E[Tipografía<br/>Texto fills<br/>Alineación + Decoación]
    B -->|Componente| F[Overrides<br/>Variables<br/>Variantes]
    B -->|Imagen| G[Fill mode<br/>Crop<br/>Filtros]

Fills múltiples

Un nodo puede tener múltiples fills apilados. Los fills superiores se renderizan encima de los inferiores. Para efectos como overlay de color sobre una imagen:

  1. Agrega un fill de imagen
  2. Agrega un segundo fill de color sólido semi-transparente (por ejemplo negro al 40%)
  3. El resultado: imagen con un overlay oscuro

Esto es equivalente a background: linear-gradient(...), url(...) en CSS.

Efectos (shadows y blur)

Drop shadow: Sombra exterior. Parámetros: color, X offset, Y offset, blur, spread.

Inner shadow: Sombra interior (simula profundidad hacia adentro).

Gaussian blur: Desenfoque del nodo completo.

Motion blur: Desenfoque direccional (para crear sensación de movimiento).

Background blur: Desenfoca lo que hay detrás del nodo (efecto frosted glass). Requiere que el nodo tenga un fill semi-transparente.

Blend modes

El panel de opacidad también permite cambiar el blend mode del nodo, igual que en CSS mix-blend-mode:

Normal, Multiply, Screen, Overlay, Darken, Lighten, Color Dodge, Color Burn, Hard Light, Soft Light, Difference, Exclusion, Hue, Saturation, Color, Luminosity.

Grids y guías

Grids del frame

Con un frame seleccionado, en el panel de propiedades hay una sección “Layout grid”. Agrega:

Los grids son solo referencias visuales y no afectan el export. Son muy útiles para asegurar alineación consistente.

Guías

Arrastra desde la regla horizontal (para guías horizontales) o vertical (para guías verticales) al canvas. Las guías son globales al documento y se pueden bloquear o eliminar desde View → Manage guides.

Atajos de teclado esenciales

AcciónAtajo
AgruparCmd+G
DesagruparCmd+Shift+G
CopiarCmd+C
Pegar en su lugarCmd+Shift+V
DuplicarCmd+D
Traer al frenteCmd+]
Enviar atrásCmd+[
Ocultar/mostrarCmd+Shift+H
Bloquear/desbloquearCmd+Shift+L
FlattenCmd+E
Booleana: UniónCmd+Alt+U
Booleana: SustracciónCmd+Alt+S
Booleana: IntersecciónCmd+Alt+I
Modo edición de pathEnter (con path seleccionado)

Resumen

En este capítulo has aprendido:

En el próximo capítulo profundizaremos en la IA integrada y el chat de OpenPencil.

← Volver al listado de tecnologías ← Índice de OpenPencil