--- title: Create a new design based on an existing design --- ##### See this example in our source code - [packages/aaron/config/index.js](https://github.com/freesewing/freesewing/blob/72f34101792bda4d8e553c3479daa63cb461f3c5/packages/aaron/config/index.js#L34) - [packages/aaron/src/index.js](https://github.com/freesewing/freesewing/blob/72f34101792bda4d8e553c3479daa63cb461f3c5/packages/aaron/src/index.js#L2) - [packages/carlita/src/index.js](https://github.com/freesewing/freesewing/blob/8474477911daed3c383700ab29c9565883f16d66/packages/carlita/src/index.js#L25) ## Setup To be able to extend existing patterns, you will have to access them on your local machine. There are two ways to do this: - add needed dependencies when using `npx @freesewing/new-design` - create your new pattern in a clone of the [freesewing monorepo](https://github.com/freesewing/freesewing) ### When using `npx @freesewing/new-design` If you want to use one of our blocks, you can simply pick that option when you run `npx @freesewing/new-design`. Doing so will set everything up for you, so you won't have to worry about a thing. If you want to extend an existing design, you'll have to do some work yourself. #### Start from scratch First step is to spin up the development environment. Pick _from scratch_ when prompted: ```bash npx @freesewing/new-design ``` ### Install dependencies Let's assume you want to extend **Simon**. You will first need to install it as a dependency. We also need to install **Brian** since Simon is based on Brian: ```bash npm install --save @freesewing/simon @freesewing/brian ``` This will install both Simon and Brian as a dependency, which you can then access in your pattern. If the design you extend relies on a design you did not install, error messages will tell you what you are missing ### Import your dependencies Complete this documentation ### Using the freesewing monorepo You can use the power of robots to install the needed dependencies if you work in a clone of the [freesewing monorepo](https://github.com/freesewing/freesewing). - First, clone the monorepo (or your fork of it) to your local machine. - If you haven't already, now is also a good time to create a feature branch so that you don't work directly in the `develop`-branch of the git-repository: `git checkout -b mycoolnewpattern` (adjust name accordingly). - Go to the root and run `yarn kickstart`. This will take a while, so grab a coffee and come back later. - Once that is done, edit the file `config/descriptions.yaml` to include the name and description of your new pattern (take care to start the description with `A FreeSewing pattern`). - Create a folder for your new pattern in `packages`. - Run `yarn reconfigure`. This will read the changes in `config/descriptions.yaml` and create the needed files in your new folder. - You can now start the actual pattern design work (i.e. editing and adding `src` and `config` files for your pattern. - For dependencies, configure them in `config/dependencies.yaml`. - Run `yarn reconfigure` again, and the magic will make sure that your `package.json` is updated accordingly. - You can set yourself as an author in `config/exceptions.yaml`, and - you guessed it - run `yarn reconfigure` again. - To spin up the development environment, you also need to run `npm install` (or `yarn install`) in the `example`-folder of any pattern you want to work on. (This is because the neccessary `node_modules`-folder is excluded from the git-repository.) Now you can work on extending existing patterns into something new and exciting. And the best part about using this method is that making a pull request will be much easier once you're done developing your new pattern. ## Examples The example below is from Aaron, which is based on Brian. Brian has a part called `base` that is hidden by default. We will use this part as a dependency, and also hide it. This is what it looks like in the Aaron config file: ```js dependencies: { front: 'base', back: 'front' }, inject: { front: 'base', back: 'front' }, hide: ['base'], ``` And here is the code: ```js import freesewing from '@freesewing/core' import Brian from '@freesewing/brian' import plugins from '@freesewing/plugin-bundle' import config from '../config' // Parts import draftBack from './back' import draftFront from './front' // Create design const Pattern = new freesewing.Design(config, plugins) // Attach draft methods to prototype Pattern.prototype.draftBase = function(part) { // Getting the base part from Brian return new Brian(this.settings).draftBase(part) } Pattern.prototype.draftFront = part => draftFront(part) Pattern.prototype.draftBack = part => draftBack(part) export default Pattern ``` If you have a lot of parts to inherit, you can create a loop like in this example from Carlita: ```js // Attach draft methods from Carlton to prototype for (let m of [ 'draftBack', 'draftTail', 'draftTopSleeve', 'draftUnderSleeve', 'draftBelt', 'draftCollarStand', 'draftCollar', 'draftCuffFacing', 'draftPocket', 'draftPocketFlap', 'draftPocketLining', 'draftChestPocketWelt', 'draftChestPocketBag', 'draftInnerPocketWelt', 'draftInnerPocketBag', 'draftInnerPocketTab' ]) { Pattern.prototype[m] = function(part) { return new Carlton(this.settings)[m](part) } } ```