What is Byblocks

Byblocks is a structured system of layout blocks for web design in Figma. It isn’t a traditional UI kit or template marketplace, and it’s not a no-code site builder. Instead, Byblocks provides a library of purpose-driven design blocks that help you build consistent websites faster, without having to redesign common sections from scratch. In essence, you get a collection of pre-designed content sections (“blocks”) that you can mix and match to assemble pages or screens quickly while maintaining clarity and style. From a user’s perspective, working with Byblocks involves browsing the block library, choosing the type of block you need, and then copying it into your design to customize with your own text, images, and branding. Because each block follows the same design system and best practices, anything you build will look professional and cohesive. For example, you might start a page with an Acquire/Hero block at the top to grab attention, follow it with an Explain/Features block to describe your product, add a Trust/Testimonials block to build credibility, and finish with a Convert/CTA block as a call-to-action. Byblocks handles the heavy lifting of design consistency, allowing you to move fast without compromising on quality or your brand’s visual identity.
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!