System Architecture

2. System Architecture Byblocks is composed of two primary layers that work together: the Core Figma file and the Byblocks web library (platform). 2.1 Core Figma File The Core is a downloadable Figma design file that serves as the single source of truth for the Byblocks system. It contains all the foundational design elements, including: Design tokens: predefined design values (such as colors, typography scales, spacing sizes, etc.) Variables: configurable styles and measurements that drive the look of components Text styles: a set of consistent typography styles for headings, body text, etc. Base components: the core UI components and elements that blocks are built from System rules: built-in guidelines and constraints that ensure consistency All blocks in Byblocks depend on this core file. This means you adjust visual parameters by editing tokens, styles, and component properties in Figma – not by redesigning the blocks themselves. The Core acts as the engine of the system: update something in the Core file (for example, a color or a spacing value) and it propagates through all blocks, keeping everything consistent. 2.2 Byblocks Web Library The Byblocks web platform is a private online library of blocks (it’s not a drag-and-drop page builder itself). This platform allows you to: Browse available blocks, often organized by category or purpose Learn when to use each block (with guidance and examples for each block type) Copy the block design and paste it into your Figma file for customization The platform is essentially a catalog and guide – it helps you select the right blocks for your needs. It does not automatically assemble pages for you, enforce your content, or do any live editing on your site. In other words, the web library guides your selection of blocks, but the execution (placing blocks, entering content, tweaking design details) happens in Figma and in your design process. The platform won’t, for example, stop you from putting too much text in a block or fill in your images; instead, it provides the building blocks and best practices, and you as the designer make the creative decisions within the system’s framework.
Back to help center

Introduction

This is a UI Kit for building out API/developer documentation in Webflow - with a similar UI to GitBook! Below you will find various sections which you can use for building out whatever type of documentation you need. To get started, here's an intro grid block which you can use to link to different sections/pages.

Code block

This is a block which you can put code in, that people can copy with one click! The code to make this work is in the sitewide body and head.

try {
function factorial(n) {
  if (n === 0 || n === 1) return 1;
  return n * factorial(n - 1);
}

// Array of numbers
const numbers = [1, 2, 3, 4, 5];

// Using map to create a new array with factorials
const factorials = numbers.map(factorial);

// Object with person details
const person = { name: "Alice", age: 30, city: "New York" };

// Destructuring object properties
const { name, age } = person;

console.log(`${name} is ${age} years old.`);
console.log(`Factorials: ${factorials.join(", ")}`);
}

Callouts

Use these callouts to share important information - you can use grey to show neutral important information, yellow to share warnings, red to share limitations, and green to emphasise positive information.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Accordions

Accordions are an excellent way to share information which only some people will need to read - that way, you aren't distracting people who don't need it. This is controlled by a Webflow interaction

Some niche topic

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

try {
function factorial(n) {
  if (n === 0 || n === 1) return 1;
  return n * factorial(n - 1);
}

Text formatting

You may need to indicate that a piece of text is to be used in code or an attribute. You can just add a styled span to indicate code.

Video block

I've not got much to say here - videos are great, and you should use them as much as possible to educate users on your product!

Image

A picture is worth a thousand words! Use images as much as possible to show your users what you're trying to explain!